@formio/js 5.1.0-rc.8 → 5.1.0

package/dist/formio.form.js

@@ -36,7 +36,7 @@ eval("/*! @formio/choices.js v10.2.1 | © 2024 Josh Johnson | https://github.com
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.FieldError = void 0;\nconst formUtil_1 = __webpack_require__(/*! ../utils/formUtil */ \"./node_modules/@formio/core/lib/utils/formUtil/index.js\");\nclass FieldError {\n    constructor(errorKeyOrMessage, context, ruleName = errorKeyOrMessage) {\n        var _a;\n        const { component, hasLabel = true, field = (0, formUtil_1.getComponentErrorField)(component, context), level = 'error', } = context;\n        this.ruleName = ruleName;\n        if ((_a = context.component.validate) === null || _a === void 0 ? void 0 : _a.customMessage) {\n            this.errorKeyOrMessage = context.component.validate.customMessage;\n            this.context = Object.assign(Object.assign({}, context), { hasLabel: false, field, level });\n        }\n        else {\n            this.errorKeyOrMessage = errorKeyOrMessage;\n            this.context = Object.assign(Object.assign({}, context), { hasLabel, field });\n            this.level = level;\n        }\n    }\n}\nexports.FieldError = FieldError;\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/error/FieldError.js?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.FieldError = void 0;\nconst formUtil_1 = __webpack_require__(/*! ../utils/formUtil */ \"./node_modules/@formio/core/lib/utils/formUtil/index.js\");\nclass FieldError {\n    constructor(errorKeyOrMessage, context, ruleName = errorKeyOrMessage) {\n        var _a;\n        const { component, hasLabel = true, field = (0, formUtil_1.getComponentErrorField)(component, context), level = 'error', } = context;\n        this.ruleName = ruleName;\n        this.level = level;\n        if ((_a = context.component.validate) === null || _a === void 0 ? void 0 : _a.customMessage) {\n            this.errorKeyOrMessage = context.component.validate.customMessage;\n            this.context = Object.assign(Object.assign({}, context), { hasLabel: false, field, level });\n        }\n        else {\n            this.errorKeyOrMessage = errorKeyOrMessage;\n            this.context = Object.assign(Object.assign({}, context), { hasLabel, field });\n        }\n    }\n}\nexports.FieldError = FieldError;\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/error/FieldError.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 formUtil_1 = __webpack_require__(/*! ../../utils/formUtil */ \"./node_modules/@formio/core/lib/utils/formUtil/index.js\");\nconst conditions_1 = __webpack_require__(/*! ../../utils/conditions */ \"./node_modules/@formio/core/lib/utils/conditions.js\");\nconst index_1 = __webpack_require__(/*! ../../utils/formUtil/index */ \"./node_modules/@formio/core/lib/utils/formUtil/index.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 { scope, path, component } = 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        const conditionalPath = path ? path : (0, index_1.getComponentPaths)(component).fullPath || '';\n        conditionalComp = {\n            path: conditionalPath,\n            conditionallyHidden: false,\n        };\n        scope.conditionals.push(conditionalComp);\n    }\n    conditionalComp.conditionallyHidden =\n        conditionalComp.conditionallyHidden || isHidden(context) === true;\n    if (conditionalComp.conditionallyHidden) {\n        (0, formUtil_1.setComponentScope)(component, 'conditionallyHidden', 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 formUtil_1 = __webpack_require__(/*! ../../utils/formUtil */ \"./node_modules/@formio/core/lib/utils/formUtil/index.js\");\nconst conditions_1 = __webpack_require__(/*! ../../utils/conditions */ \"./node_modules/@formio/core/lib/utils/conditions.js\");\nconst index_1 = __webpack_require__(/*! ../../utils/formUtil/index */ \"./node_modules/@formio/core/lib/utils/formUtil/index.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 { scope, path, component } = 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        const conditionalPath = path ? path : (0, index_1.getComponentPaths)(component).fullPath || '';\n        conditionalComp = {\n            path: conditionalPath,\n            conditionallyHidden: false,\n        };\n        scope.conditionals.push(conditionalComp);\n    }\n    conditionalComp.conditionallyHidden = isHidden(context) === true;\n    if (conditionalComp.conditionallyHidden) {\n        (0, formUtil_1.setComponentScope)(component, 'conditionallyHidden', 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?");
 
 /***/ }),
 
@@ -541,7 +541,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.ProcessTargets = exports.ProcessorMap = exports.processSync = exports.process = void 0;\nconst formUtil_1 = __webpack_require__(/*! ../utils/formUtil */ \"./node_modules/@formio/core/lib/utils/formUtil/index.js\");\nconst processOne_1 = __webpack_require__(/*! ./processOne */ \"./node_modules/@formio/core/lib/process/processOne.js\");\nconst defaultValue_1 = __webpack_require__(/*! ./defaultValue */ \"./node_modules/@formio/core/lib/process/defaultValue/index.js\");\nconst fetch_1 = __webpack_require__(/*! ./fetch */ \"./node_modules/@formio/core/lib/process/fetch/index.js\");\nconst calculation_1 = __webpack_require__(/*! ./calculation */ \"./node_modules/@formio/core/lib/process/calculation/index.js\");\nconst logic_1 = __webpack_require__(/*! ./logic */ \"./node_modules/@formio/core/lib/process/logic/index.js\");\nconst conditions_1 = __webpack_require__(/*! ./conditions */ \"./node_modules/@formio/core/lib/process/conditions/index.js\");\nconst validation_1 = __webpack_require__(/*! ./validation */ \"./node_modules/@formio/core/lib/process/validation/index.js\");\nconst filter_1 = __webpack_require__(/*! ./filter */ \"./node_modules/@formio/core/lib/process/filter/index.js\");\nconst normalize_1 = __webpack_require__(/*! ./normalize */ \"./node_modules/@formio/core/lib/process/normalize/index.js\");\nconst dereference_1 = __webpack_require__(/*! ./dereference */ \"./node_modules/@formio/core/lib/process/dereference/index.js\");\nconst clearHidden_1 = __webpack_require__(/*! ./clearHidden */ \"./node_modules/@formio/core/lib/process/clearHidden/index.js\");\nconst hideChildren_1 = __webpack_require__(/*! ./hideChildren */ \"./node_modules/@formio/core/lib/process/hideChildren.js\");\nfunction process(context) {\n    return __awaiter(this, void 0, void 0, function* () {\n        const { instances, components, data, scope, flat, processors, local, parent, parentPaths } = context;\n        yield (0, formUtil_1.eachComponentDataAsync)(components, data, (component, compData, row, path, components, index, parent, paths) => __awaiter(this, void 0, void 0, function* () {\n            yield (0, processOne_1.processOne)(Object.assign(Object.assign({}, context), { data: compData, component,\n                components,\n                path,\n                paths,\n                row,\n                index, instance: instances ? instances[path] : undefined, parent }));\n            if (flat) {\n                return true;\n            }\n            if (scope.noRecurse) {\n                scope.noRecurse = false;\n                return true;\n            }\n        }), false, local, parent, parentPaths);\n        for (let i = 0; i < (processors === null || processors === void 0 ? void 0 : processors.length); i++) {\n            const processor = processors[i];\n            if (processor.postProcess) {\n                processor.postProcess(context);\n            }\n        }\n        return scope;\n    });\n}\nexports.process = process;\nfunction processSync(context) {\n    const { instances, components, data, scope, flat, processors, local, parent, parentPaths } = context;\n    (0, formUtil_1.eachComponentData)(components, data, (component, compData, row, path, components, index, parent, paths) => {\n        (0, processOne_1.processOneSync)(Object.assign(Object.assign({}, context), { data: compData, component,\n            components,\n            path,\n            paths,\n            row,\n            index, instance: instances ? instances[path] : undefined, parent }));\n        if (flat) {\n            return true;\n        }\n        if (scope.noRecurse) {\n            scope.noRecurse = false;\n            return true;\n        }\n    }, false, local, parent, parentPaths);\n    for (let i = 0; i < (processors === null || processors === void 0 ? void 0 : processors.length); i++) {\n        const processor = processors[i];\n        if (processor.postProcess) {\n            processor.postProcess(context);\n        }\n    }\n    return scope;\n}\nexports.processSync = processSync;\nexports.ProcessorMap = {\n    filter: filter_1.filterProcessInfo,\n    defaultValue: defaultValue_1.defaultValueProcessInfo,\n    serverDefaultValue: defaultValue_1.serverDefaultValueProcessInfo,\n    customDefaultValue: defaultValue_1.customDefaultValueProcessInfo,\n    calculate: calculation_1.calculateProcessInfo,\n    conditions: conditions_1.conditionProcessInfo,\n    customConditions: conditions_1.customConditionProcessInfo,\n    simpleConditions: conditions_1.simpleConditionProcessInfo,\n    normalize: normalize_1.normalizeProcessInfo,\n    dereference: dereference_1.dereferenceProcessInfo,\n    clearHidden: clearHidden_1.clearHiddenProcessInfo,\n    fetch: fetch_1.fetchProcessInfo,\n    logic: logic_1.logicProcessInfo,\n    validate: validation_1.validateProcessInfo,\n    validateCustom: validation_1.validateCustomProcessInfo,\n    validateServer: validation_1.validateServerProcessInfo,\n    hideChildren: hideChildren_1.hideChildrenProcessorInfo,\n};\nexports.ProcessTargets = {\n    submission: [\n        filter_1.filterProcessInfo,\n        defaultValue_1.serverDefaultValueProcessInfo,\n        normalize_1.normalizeProcessInfo,\n        dereference_1.dereferenceProcessInfo,\n        fetch_1.fetchProcessInfo,\n        conditions_1.simpleConditionProcessInfo,\n        validation_1.validateServerProcessInfo,\n    ],\n    evaluator: [\n        defaultValue_1.customDefaultValueProcessInfo,\n        calculation_1.calculateProcessInfo,\n        logic_1.logicProcessInfo,\n        conditions_1.conditionProcessInfo,\n        hideChildren_1.hideChildrenProcessorInfo,\n        clearHidden_1.clearHiddenProcessInfo,\n        validation_1.validateProcessInfo,\n    ],\n};\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/process/process.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.ProcessTargets = exports.ProcessorMap = exports.processSync = exports.process = void 0;\nconst formUtil_1 = __webpack_require__(/*! ../utils/formUtil */ \"./node_modules/@formio/core/lib/utils/formUtil/index.js\");\nconst processOne_1 = __webpack_require__(/*! ./processOne */ \"./node_modules/@formio/core/lib/process/processOne.js\");\nconst defaultValue_1 = __webpack_require__(/*! ./defaultValue */ \"./node_modules/@formio/core/lib/process/defaultValue/index.js\");\nconst fetch_1 = __webpack_require__(/*! ./fetch */ \"./node_modules/@formio/core/lib/process/fetch/index.js\");\nconst calculation_1 = __webpack_require__(/*! ./calculation */ \"./node_modules/@formio/core/lib/process/calculation/index.js\");\nconst logic_1 = __webpack_require__(/*! ./logic */ \"./node_modules/@formio/core/lib/process/logic/index.js\");\nconst conditions_1 = __webpack_require__(/*! ./conditions */ \"./node_modules/@formio/core/lib/process/conditions/index.js\");\nconst validation_1 = __webpack_require__(/*! ./validation */ \"./node_modules/@formio/core/lib/process/validation/index.js\");\nconst filter_1 = __webpack_require__(/*! ./filter */ \"./node_modules/@formio/core/lib/process/filter/index.js\");\nconst normalize_1 = __webpack_require__(/*! ./normalize */ \"./node_modules/@formio/core/lib/process/normalize/index.js\");\nconst dereference_1 = __webpack_require__(/*! ./dereference */ \"./node_modules/@formio/core/lib/process/dereference/index.js\");\nconst clearHidden_1 = __webpack_require__(/*! ./clearHidden */ \"./node_modules/@formio/core/lib/process/clearHidden/index.js\");\nconst hideChildren_1 = __webpack_require__(/*! ./hideChildren */ \"./node_modules/@formio/core/lib/process/hideChildren.js\");\nfunction process(context) {\n    return __awaiter(this, void 0, void 0, function* () {\n        const { instances, components, data, scope, flat, processors, local, parent, parentPaths } = context;\n        yield (0, formUtil_1.eachComponentDataAsync)(components, data, (component, compData, row, path, components, index, parent, paths) => __awaiter(this, void 0, void 0, function* () {\n            yield (0, processOne_1.processOne)(Object.assign(Object.assign({}, context), { data: compData, component,\n                components,\n                path,\n                paths,\n                row,\n                index, instance: instances\n                    ? instances[component.modelType === 'none' && (paths === null || paths === void 0 ? void 0 : paths.fullPath) ? paths.fullPath : path]\n                    : undefined, parent }));\n            if (flat) {\n                return true;\n            }\n            if (scope.noRecurse) {\n                scope.noRecurse = false;\n                return true;\n            }\n        }), false, local, parent, parentPaths);\n        for (let i = 0; i < (processors === null || processors === void 0 ? void 0 : processors.length); i++) {\n            const processor = processors[i];\n            if (processor.postProcess) {\n                processor.postProcess(context);\n            }\n        }\n        return scope;\n    });\n}\nexports.process = process;\nfunction processSync(context) {\n    const { instances, components, data, scope, flat, processors, local, parent, parentPaths } = context;\n    (0, formUtil_1.eachComponentData)(components, data, (component, compData, row, path, components, index, parent, paths) => {\n        (0, processOne_1.processOneSync)(Object.assign(Object.assign({}, context), { data: compData, component,\n            components,\n            path,\n            paths,\n            row,\n            index, instance: instances\n                ? instances[component.modelType === 'none' && (paths === null || paths === void 0 ? void 0 : paths.fullPath) ? paths.fullPath : path]\n                : undefined, parent }));\n        if (flat) {\n            return true;\n        }\n        if (scope.noRecurse) {\n            scope.noRecurse = false;\n            return true;\n        }\n    }, false, local, parent, parentPaths);\n    for (let i = 0; i < (processors === null || processors === void 0 ? void 0 : processors.length); i++) {\n        const processor = processors[i];\n        if (processor.postProcess) {\n            processor.postProcess(context);\n        }\n    }\n    return scope;\n}\nexports.processSync = processSync;\nexports.ProcessorMap = {\n    filter: filter_1.filterProcessInfo,\n    defaultValue: defaultValue_1.defaultValueProcessInfo,\n    serverDefaultValue: defaultValue_1.serverDefaultValueProcessInfo,\n    customDefaultValue: defaultValue_1.customDefaultValueProcessInfo,\n    calculate: calculation_1.calculateProcessInfo,\n    conditions: conditions_1.conditionProcessInfo,\n    customConditions: conditions_1.customConditionProcessInfo,\n    simpleConditions: conditions_1.simpleConditionProcessInfo,\n    normalize: normalize_1.normalizeProcessInfo,\n    dereference: dereference_1.dereferenceProcessInfo,\n    clearHidden: clearHidden_1.clearHiddenProcessInfo,\n    fetch: fetch_1.fetchProcessInfo,\n    logic: logic_1.logicProcessInfo,\n    validate: validation_1.validateProcessInfo,\n    validateCustom: validation_1.validateCustomProcessInfo,\n    validateServer: validation_1.validateServerProcessInfo,\n    hideChildren: hideChildren_1.hideChildrenProcessorInfo,\n};\nexports.ProcessTargets = {\n    submission: [\n        filter_1.filterProcessInfo,\n        defaultValue_1.serverDefaultValueProcessInfo,\n        normalize_1.normalizeProcessInfo,\n        dereference_1.dereferenceProcessInfo,\n        fetch_1.fetchProcessInfo,\n        conditions_1.simpleConditionProcessInfo,\n        validation_1.validateServerProcessInfo,\n    ],\n    evaluator: [\n        defaultValue_1.customDefaultValueProcessInfo,\n        calculation_1.calculateProcessInfo,\n        logic_1.logicProcessInfo,\n        conditions_1.conditionProcessInfo,\n        hideChildren_1.hideChildrenProcessorInfo,\n        clearHidden_1.clearHiddenProcessInfo,\n        validation_1.validateProcessInfo,\n    ],\n};\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/process/process.js?");
 
 /***/ }),
 
@@ -728,7 +728,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.validateMaximumDayInfo = exports.validateMaximumDaySync = exports.validateMaximumDay = exports.shouldValidate = void 0;\nconst error_1 = __webpack_require__(/*! ../../../error */ \"./node_modules/@formio/core/lib/error/index.js\");\nconst date_1 = __webpack_require__(/*! ../../../utils/date */ \"./node_modules/@formio/core/lib/utils/date.js\");\nconst isValidatableDayComponent = (component) => {\n    return component && component.type === 'day' && component.hasOwnProperty('maxDate');\n};\nconst shouldValidate = (context) => {\n    const { component, value } = context;\n    if (!isValidatableDayComponent(component)) {\n        return false;\n    }\n    if ((0, date_1.isPartialDay)(component, value)) {\n        return false;\n    }\n    if (!(0, date_1.getDateSetting)(component.maxDate)) {\n        return false;\n    }\n    return true;\n};\nexports.shouldValidate = shouldValidate;\nconst validateMaximumDay = (context) => __awaiter(void 0, void 0, void 0, function* () {\n    return (0, exports.validateMaximumDaySync)(context);\n});\nexports.validateMaximumDay = validateMaximumDay;\nconst validateMaximumDaySync = (context) => {\n    const { component, value } = context;\n    if (!(0, exports.shouldValidate)(context)) {\n        return null;\n    }\n    if (typeof value !== 'string') {\n        throw new error_1.ProcessorError(`Cannot validate day value ${value} because it is not a string`, context, 'validate:validateMaximumDay');\n    }\n    // TODO: this validation probably goes for dates and days\n    const format = (0, date_1.getDateValidationFormat)(component);\n    const date = (0, date_1.dayjs)(value, format);\n    const maxDate = (0, date_1.getDateSetting)(component.maxDate);\n    if (maxDate === null) {\n        return null;\n    }\n    else {\n        maxDate.setHours(0, 0, 0, 0);\n    }\n    const error = new error_1.FieldError('maxDay', Object.assign(Object.assign({}, context), { maxDate: String(maxDate), setting: String(maxDate) }));\n    return date.isBefore((0, date_1.dayjs)(maxDate)) || date.isSame((0, date_1.dayjs)(maxDate)) ? null : error;\n};\nexports.validateMaximumDaySync = validateMaximumDaySync;\nexports.validateMaximumDayInfo = {\n    name: 'validateMaximumDay',\n    process: exports.validateMaximumDay,\n    processSync: exports.validateMaximumDaySync,\n    shouldProcess: exports.shouldValidate,\n};\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/process/validation/rules/validateMaximumDay.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.validateMaximumDayInfo = exports.validateMaximumDaySync = exports.validateMaximumDay = exports.shouldValidate = void 0;\nconst error_1 = __webpack_require__(/*! ../../../error */ \"./node_modules/@formio/core/lib/error/index.js\");\nconst date_1 = __webpack_require__(/*! ../../../utils/date */ \"./node_modules/@formio/core/lib/utils/date.js\");\nconst isValidatableDayComponent = (component) => {\n    return component && component.type === 'day' && component.hasOwnProperty('maxDate');\n};\nconst shouldValidate = (context) => {\n    const { component, value } = context;\n    if (!isValidatableDayComponent(component)) {\n        return false;\n    }\n    if ((0, date_1.isPartialDay)(component, value)) {\n        return false;\n    }\n    if (!(0, date_1.getDateSetting)(component.maxDate)) {\n        return false;\n    }\n    return true;\n};\nexports.shouldValidate = shouldValidate;\nconst validateMaximumDay = (context) => __awaiter(void 0, void 0, void 0, function* () {\n    return (0, exports.validateMaximumDaySync)(context);\n});\nexports.validateMaximumDay = validateMaximumDay;\nconst validateMaximumDaySync = (context) => {\n    const { component, value } = context;\n    if (!(0, exports.shouldValidate)(context)) {\n        return null;\n    }\n    if (typeof value !== 'string') {\n        throw new error_1.ProcessorError(`Cannot validate day value ${value} because it is not a string`, context, 'validate:validateMaximumDay');\n    }\n    // TODO: this validation probably goes for dates and days\n    const format = (0, date_1.getDateValidationFormat)(component);\n    const date = (0, date_1.dayjs)(value, format);\n    const maxDate = (0, date_1.getDateSetting)(component.maxDate);\n    if (maxDate === null) {\n        return null;\n    }\n    else {\n        maxDate.setHours(0, 0, 0, 0);\n    }\n    const error = new error_1.FieldError('maxDate', Object.assign(Object.assign({}, context), { maxDate: (0, date_1.dayjs)(maxDate).format((0, date_1.getDayFormat)(component)), setting: String(maxDate) }));\n    return date.isBefore((0, date_1.dayjs)(maxDate)) || date.isSame((0, date_1.dayjs)(maxDate)) ? null : error;\n};\nexports.validateMaximumDaySync = validateMaximumDaySync;\nexports.validateMaximumDayInfo = {\n    name: 'validateMaximumDay',\n    process: exports.validateMaximumDay,\n    processSync: exports.validateMaximumDaySync,\n    shouldProcess: exports.shouldValidate,\n};\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/process/validation/rules/validateMaximumDay.js?");
 
 /***/ }),
 
@@ -794,7 +794,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.validateMinimumDayInfo = exports.validateMinimumDaySync = exports.validateMinimumDay = exports.shouldValidate = void 0;\nconst error_1 = __webpack_require__(/*! ../../../error */ \"./node_modules/@formio/core/lib/error/index.js\");\nconst date_1 = __webpack_require__(/*! ../../../utils/date */ \"./node_modules/@formio/core/lib/utils/date.js\");\nconst isValidatableDayComponent = (component) => {\n    return component && component.type === 'day' && component.hasOwnProperty('minDate');\n};\nconst shouldValidate = (context) => {\n    const { component, value } = context;\n    if (!isValidatableDayComponent(component)) {\n        return false;\n    }\n    if ((0, date_1.isPartialDay)(component, value)) {\n        return false;\n    }\n    if ((0, date_1.getDateSetting)(component.minDate) === null) {\n        return false;\n    }\n    return true;\n};\nexports.shouldValidate = shouldValidate;\nconst validateMinimumDay = (context) => __awaiter(void 0, void 0, void 0, function* () {\n    return (0, exports.validateMinimumDaySync)(context);\n});\nexports.validateMinimumDay = validateMinimumDay;\nconst validateMinimumDaySync = (context) => {\n    const { component, value } = context;\n    if (!(0, exports.shouldValidate)(context)) {\n        return null;\n    }\n    if (typeof value !== 'string') {\n        throw new error_1.ProcessorError(`Cannot validate day value ${value} because it is not a string`, context, 'validate:validateMinimumDay');\n    }\n    const date = (0, date_1.getDateValidationFormat)(component)\n        ? (0, date_1.dayjs)(value, (0, date_1.getDateValidationFormat)(component))\n        : (0, date_1.dayjs)(value);\n    const minDate = (0, date_1.getDateSetting)(component.minDate);\n    if (minDate === null) {\n        return null;\n    }\n    else {\n        minDate.setHours(0, 0, 0, 0);\n    }\n    const error = new error_1.FieldError('minDay', Object.assign(Object.assign({}, context), { minDate: String(minDate), setting: String(minDate) }));\n    return date.isAfter(minDate) || date.isSame(minDate) ? null : error;\n};\nexports.validateMinimumDaySync = validateMinimumDaySync;\nexports.validateMinimumDayInfo = {\n    name: 'validateMinimumDay',\n    process: exports.validateMinimumDay,\n    processSync: exports.validateMinimumDaySync,\n    shouldProcess: exports.shouldValidate,\n};\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/process/validation/rules/validateMinimumDay.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.validateMinimumDayInfo = exports.validateMinimumDaySync = exports.validateMinimumDay = exports.shouldValidate = void 0;\nconst error_1 = __webpack_require__(/*! ../../../error */ \"./node_modules/@formio/core/lib/error/index.js\");\nconst date_1 = __webpack_require__(/*! ../../../utils/date */ \"./node_modules/@formio/core/lib/utils/date.js\");\nconst isValidatableDayComponent = (component) => {\n    return component && component.type === 'day' && component.hasOwnProperty('minDate');\n};\nconst shouldValidate = (context) => {\n    const { component, value } = context;\n    if (!isValidatableDayComponent(component)) {\n        return false;\n    }\n    if ((0, date_1.isPartialDay)(component, value)) {\n        return false;\n    }\n    if ((0, date_1.getDateSetting)(component.minDate) === null) {\n        return false;\n    }\n    return true;\n};\nexports.shouldValidate = shouldValidate;\nconst validateMinimumDay = (context) => __awaiter(void 0, void 0, void 0, function* () {\n    return (0, exports.validateMinimumDaySync)(context);\n});\nexports.validateMinimumDay = validateMinimumDay;\nconst validateMinimumDaySync = (context) => {\n    const { component, value } = context;\n    if (!(0, exports.shouldValidate)(context)) {\n        return null;\n    }\n    if (typeof value !== 'string') {\n        throw new error_1.ProcessorError(`Cannot validate day value ${value} because it is not a string`, context, 'validate:validateMinimumDay');\n    }\n    const date = (0, date_1.getDateValidationFormat)(component)\n        ? (0, date_1.dayjs)(value, (0, date_1.getDateValidationFormat)(component))\n        : (0, date_1.dayjs)(value);\n    const minDate = (0, date_1.getDateSetting)(component.minDate);\n    if (minDate === null) {\n        return null;\n    }\n    else {\n        minDate.setHours(0, 0, 0, 0);\n    }\n    const error = new error_1.FieldError('minDate', Object.assign(Object.assign({}, context), { minDate: (0, date_1.dayjs)(minDate).format((0, date_1.getDayFormat)(component)), setting: String(minDate) }));\n    return date.isAfter(minDate) || date.isSame(minDate) ? null : error;\n};\nexports.validateMinimumDaySync = validateMinimumDaySync;\nexports.validateMinimumDayInfo = {\n    name: 'validateMinimumDay',\n    process: exports.validateMinimumDay,\n    processSync: exports.validateMinimumDaySync,\n    shouldProcess: exports.shouldValidate,\n};\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/process/validation/rules/validateMinimumDay.js?");
 
 /***/ }),
 
@@ -1597,7 +1597,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.dayjs = exports.isPartialDay = exports.getDateValidationFormat = exports.getDateSetting = exports.formatDate = exports.momentDate = exports.convertFormatToMoment = exports.currentTimezone = void 0;\nconst dayjs_1 = __importDefault(__webpack_require__(/*! dayjs */ \"./node_modules/dayjs/dayjs.min.js\"));\nexports.dayjs = dayjs_1.default;\nconst timezone_1 = __importDefault(__webpack_require__(/*! dayjs/plugin/timezone */ \"./node_modules/dayjs/plugin/timezone.js\"));\nconst utc_1 = __importDefault(__webpack_require__(/*! dayjs/plugin/utc */ \"./node_modules/dayjs/plugin/utc.js\"));\nconst advancedFormat_1 = __importDefault(__webpack_require__(/*! dayjs/plugin/advancedFormat */ \"./node_modules/dayjs/plugin/advancedFormat.js\"));\nconst customParseFormat_1 = __importDefault(__webpack_require__(/*! dayjs/plugin/customParseFormat */ \"./node_modules/dayjs/plugin/customParseFormat.js\"));\nconst lodash_1 = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\nconst Evaluator_1 = __webpack_require__(/*! ./Evaluator */ \"./node_modules/@formio/core/lib/utils/Evaluator.js\");\ndayjs_1.default.extend(utc_1.default);\ndayjs_1.default.extend(timezone_1.default);\ndayjs_1.default.extend(advancedFormat_1.default);\ndayjs_1.default.extend(customParseFormat_1.default);\n/**\n * Get the current timezone string.\n *\n * @return {string}\n */\nfunction currentTimezone() {\n    return dayjs_1.default.tz.guess();\n}\nexports.currentTimezone = currentTimezone;\n/**\n * Convert the format from the angular-datepicker module to moment format.\n * @param format\n * @return {string}\n */\nfunction convertFormatToMoment(format) {\n    return (format\n        // Year conversion.\n        .replace(/y/g, 'Y')\n        // Day in month.\n        .replace(/d/g, 'D')\n        // Day in week.\n        .replace(/E/g, 'd')\n        // AM/PM marker\n        .replace(/a/g, 'A')\n        // Unix Timestamp\n        .replace(/U/g, 'X'));\n}\nexports.convertFormatToMoment = convertFormatToMoment;\n/**\n * Get the moment date object for translating dates with timezones.\n *\n * @param value\n * @param format\n * @param timezone\n * @return {*}\n */\nfunction momentDate(value, format, timezone) {\n    const momentDate = (0, dayjs_1.default)(value);\n    if (timezone === 'UTC') {\n        return dayjs_1.default.utc();\n    }\n    if (timezone !== currentTimezone() || (format && format.match(/\\s(z$|z\\s)/))) {\n        return momentDate.tz(timezone);\n    }\n    return momentDate;\n}\nexports.momentDate = momentDate;\n/**\n * Format a date provided a value, format, and timezone object.\n *\n * @param value\n * @param format\n * @param timezone\n * @return {string}\n */\nfunction formatDate(value, format, timezone) {\n    const date = (0, dayjs_1.default)(value);\n    const dayjsFormat = convertFormatToMoment(format);\n    if (timezone === 'UTC') {\n        return `${date.utc().format(dayjsFormat)} UTC`;\n    }\n    if (timezone) {\n        return date.tz(timezone).format(`${dayjsFormat} z`);\n    }\n    return date.format(dayjsFormat);\n}\nexports.formatDate = formatDate;\n/**\n * Return a translated date setting.\n *\n * @param date\n * @return {(null|Date)}\n */\nfunction getDateSetting(date) {\n    if ((0, lodash_1.isNil)(date) || (0, lodash_1.isNaN)(date) || date === '') {\n        return null;\n    }\n    if (date instanceof Date) {\n        return date;\n    }\n    else if (typeof date.toDate === 'function') {\n        return date.isValid() ? date.toDate() : null;\n    }\n    let dateSetting = typeof date !== 'string' || date.indexOf('moment(') === -1 ? (0, dayjs_1.default)(date) : null;\n    if (dateSetting && dateSetting.isValid()) {\n        return dateSetting.toDate();\n    }\n    dateSetting = null;\n    try {\n        const value = Evaluator_1.Evaluator.evaluator(`return ${date};`, 'moment')(dayjs_1.default);\n        if (typeof value === 'string') {\n            dateSetting = (0, dayjs_1.default)(value);\n        }\n        else if (typeof value.toDate === 'function') {\n            dateSetting = (0, dayjs_1.default)(value.toDate().toUTCString());\n        }\n        else if (value instanceof Date) {\n            dateSetting = (0, dayjs_1.default)(value);\n        }\n    }\n    catch (ignoreError) {\n        return null;\n    }\n    if (!dateSetting) {\n        return null;\n    }\n    // Ensure this is a date.\n    if (!dateSetting.isValid()) {\n        return null;\n    }\n    return dateSetting.toDate();\n}\nexports.getDateSetting = getDateSetting;\nconst getDateValidationFormat = (component) => {\n    return component.dayFirst ? 'DD-MM-YYYY' : 'MM-DD-YYYY';\n};\nexports.getDateValidationFormat = getDateValidationFormat;\nconst isPartialDay = (component, value) => {\n    if (!value) {\n        return true;\n    }\n    const [DAY, MONTH, YEAR] = 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};\nexports.isPartialDay = isPartialDay;\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/utils/date.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.dayjs = exports.isPartialDay = exports.getDateValidationFormat = exports.getDateSetting = exports.getDayFormat = exports.formatDate = exports.momentDate = exports.convertFormatToMoment = exports.currentTimezone = void 0;\nconst dayjs_1 = __importDefault(__webpack_require__(/*! dayjs */ \"./node_modules/dayjs/dayjs.min.js\"));\nexports.dayjs = dayjs_1.default;\nconst timezone_1 = __importDefault(__webpack_require__(/*! dayjs/plugin/timezone */ \"./node_modules/dayjs/plugin/timezone.js\"));\nconst utc_1 = __importDefault(__webpack_require__(/*! dayjs/plugin/utc */ \"./node_modules/dayjs/plugin/utc.js\"));\nconst advancedFormat_1 = __importDefault(__webpack_require__(/*! dayjs/plugin/advancedFormat */ \"./node_modules/dayjs/plugin/advancedFormat.js\"));\nconst customParseFormat_1 = __importDefault(__webpack_require__(/*! dayjs/plugin/customParseFormat */ \"./node_modules/dayjs/plugin/customParseFormat.js\"));\nconst lodash_1 = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\nconst Evaluator_1 = __webpack_require__(/*! ./Evaluator */ \"./node_modules/@formio/core/lib/utils/Evaluator.js\");\ndayjs_1.default.extend(utc_1.default);\ndayjs_1.default.extend(timezone_1.default);\ndayjs_1.default.extend(advancedFormat_1.default);\ndayjs_1.default.extend(customParseFormat_1.default);\n/**\n * Get the current timezone string.\n *\n * @return {string}\n */\nfunction currentTimezone() {\n    return dayjs_1.default.tz.guess();\n}\nexports.currentTimezone = currentTimezone;\n/**\n * Convert the format from the angular-datepicker module to moment format.\n * @param format\n * @return {string}\n */\nfunction convertFormatToMoment(format) {\n    return (format\n        // Year conversion.\n        .replace(/y/g, 'Y')\n        // Day in month.\n        .replace(/d/g, 'D')\n        // Day in week.\n        .replace(/E/g, 'd')\n        // AM/PM marker\n        .replace(/a/g, 'A')\n        // Unix Timestamp\n        .replace(/U/g, 'X'));\n}\nexports.convertFormatToMoment = convertFormatToMoment;\n/**\n * Get the moment date object for translating dates with timezones.\n *\n * @param value\n * @param format\n * @param timezone\n * @return {*}\n */\nfunction momentDate(value, format, timezone) {\n    const momentDate = (0, dayjs_1.default)(value);\n    if (timezone === 'UTC') {\n        return dayjs_1.default.utc();\n    }\n    if (timezone !== currentTimezone() || (format && format.match(/\\s(z$|z\\s)/))) {\n        return momentDate.tz(timezone);\n    }\n    return momentDate;\n}\nexports.momentDate = momentDate;\n/**\n * Format a date provided a value, format, and timezone object.\n *\n * @param value\n * @param format\n * @param timezone\n * @return {string}\n */\nfunction formatDate(value, format, timezone) {\n    const date = (0, dayjs_1.default)(value);\n    const dayjsFormat = convertFormatToMoment(format);\n    if (timezone === 'UTC') {\n        return `${date.utc().format(dayjsFormat)} UTC`;\n    }\n    if (timezone) {\n        return date.tz(timezone).format(`${dayjsFormat} z`);\n    }\n    return date.format(dayjsFormat);\n}\nexports.formatDate = formatDate;\nfunction getDayFormat(component) {\n    let format = '';\n    const showDay = !(0, lodash_1.get)(component, 'fields.day.hide', false);\n    const showMonth = !(0, lodash_1.get)(component, 'fields.month.hide', false);\n    const showYear = !(0, lodash_1.get)(component, 'fields.year.hide', false);\n    if (component.dayFirst && showDay) {\n        format += 'D/';\n    }\n    if (showMonth) {\n        format += 'M/';\n    }\n    if (!component.dayFirst && showDay) {\n        format += 'D/';\n    }\n    if (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}\nexports.getDayFormat = getDayFormat;\n/**\n * Return a translated date setting.\n *\n * @param date\n * @return {(null|Date)}\n */\nfunction getDateSetting(date) {\n    if ((0, lodash_1.isNil)(date) || (0, lodash_1.isNaN)(date) || date === '') {\n        return null;\n    }\n    if (date instanceof Date) {\n        return date;\n    }\n    else if (typeof date.toDate === 'function') {\n        return date.isValid() ? date.toDate() : null;\n    }\n    let dateSetting = typeof date !== 'string' || date.indexOf('moment(') === -1 ? (0, dayjs_1.default)(date) : null;\n    if (dateSetting && dateSetting.isValid()) {\n        return dateSetting.toDate();\n    }\n    dateSetting = null;\n    try {\n        const value = Evaluator_1.Evaluator.evaluator(`return ${date};`, 'moment')(dayjs_1.default);\n        if (typeof value === 'string') {\n            dateSetting = (0, dayjs_1.default)(value);\n        }\n        else if (typeof value.toDate === 'function') {\n            dateSetting = (0, dayjs_1.default)(value.toDate().toUTCString());\n        }\n        else if (value instanceof Date) {\n            dateSetting = (0, dayjs_1.default)(value);\n        }\n    }\n    catch (ignoreError) {\n        return null;\n    }\n    if (!dateSetting) {\n        return null;\n    }\n    // Ensure this is a date.\n    if (!dateSetting.isValid()) {\n        return null;\n    }\n    return dateSetting.toDate();\n}\nexports.getDateSetting = getDateSetting;\nconst getDateValidationFormat = (component) => {\n    return component.dayFirst ? 'DD-MM-YYYY' : 'MM-DD-YYYY';\n};\nexports.getDateValidationFormat = getDateValidationFormat;\nconst isPartialDay = (component, value) => {\n    if (!value) {\n        return true;\n    }\n    const [DAY, MONTH, YEAR] = 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};\nexports.isPartialDay = isPartialDay;\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/utils/date.js?");
 
 /***/ }),
 
@@ -1663,7 +1663,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.eachComponentData = void 0;\nconst lodash_1 = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\nconst index_1 = __webpack_require__(/*! ./index */ \"./node_modules/@formio/core/lib/utils/formUtil/index.js\");\nconst eachComponent_1 = __webpack_require__(/*! ./eachComponent */ \"./node_modules/@formio/core/lib/utils/formUtil/eachComponent.js\");\n/**\n * Iterates through each component as well as its data, and triggers a callback for every component along\n * with the contextual data for that component in addition to the absolute path for that component.\n * @param components - The array of JSON components to iterate through.\n * @param data - The contextual data object for the components.\n * @param fn - The callback function to trigger for each component following the signature (component, data, row, path, components, index, parent).\n * @param parent - The parent component.\n * @param includeAll\n * @returns\n */\nconst eachComponentData = (components, data, fn, includeAll = false, local = false, parent, parentPaths) => {\n    if (!components) {\n        return;\n    }\n    return (0, eachComponent_1.eachComponent)(components, (component, compPath, componentComponents, compParent, compPaths) => {\n        const row = (0, index_1.getContextualRowData)(component, data, compPaths, local);\n        if (fn(component, data, row, (compPaths === null || compPaths === void 0 ? void 0 : compPaths.dataPath) || '', componentComponents, compPaths === null || compPaths === void 0 ? void 0 : compPaths.dataIndex, compParent, compPaths) === true) {\n            (0, index_1.resetComponentScope)(component);\n            return true;\n        }\n        if ((0, index_1.isComponentNestedDataType)(component)) {\n            const value = (0, lodash_1.get)(data, local ? (compPaths === null || compPaths === void 0 ? void 0 : compPaths.localDataPath) || '' : (compPaths === null || compPaths === void 0 ? void 0 : compPaths.dataPath) || '');\n            if ((0, index_1.getModelType)(component) === 'nestedArray' ||\n                (0, index_1.getModelType)(component) === 'nestedDataArray') {\n                if (Array.isArray(value) && value.length) {\n                    for (let i = 0; i < value.length; i++) {\n                        if (compPaths) {\n                            compPaths.dataIndex = i;\n                        }\n                        (0, exports.eachComponentData)(component.components, data, fn, includeAll, local, component, compPaths);\n                    }\n                }\n                (0, index_1.resetComponentScope)(component);\n                return true;\n            }\n            else {\n                if (!includeAll && !(0, index_1.shouldProcessComponent)(component, row, value)) {\n                    (0, index_1.resetComponentScope)(component);\n                    return true;\n                }\n                (0, exports.eachComponentData)(component.components, data, fn, includeAll, local, component, compPaths);\n            }\n            (0, index_1.resetComponentScope)(component);\n            return true;\n        }\n        else if (!component.type || (0, index_1.getModelType)(component) === 'none') {\n            const info = (0, index_1.componentInfo)(component);\n            if (info.hasColumns) {\n                component.columns.forEach((column) => (0, exports.eachComponentData)(column.components, data, fn, includeAll, local, component, compPaths));\n            }\n            else if (info.hasRows) {\n                component.rows.forEach((row) => {\n                    if (Array.isArray(row)) {\n                        row.forEach((row) => (0, exports.eachComponentData)(row.components, data, fn, includeAll, local, component, compPaths));\n                    }\n                });\n            }\n            else if (info.hasComps) {\n                (0, exports.eachComponentData)(component.components, data, fn, includeAll, local, component, compPaths);\n            }\n            (0, index_1.resetComponentScope)(component);\n            return true;\n        }\n        (0, index_1.resetComponentScope)(component);\n        return false;\n    }, true, parentPaths, parent);\n};\nexports.eachComponentData = eachComponentData;\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/utils/formUtil/eachComponentData.js?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.eachComponentData = void 0;\nconst lodash_1 = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\nconst index_1 = __webpack_require__(/*! ./index */ \"./node_modules/@formio/core/lib/utils/formUtil/index.js\");\nconst eachComponent_1 = __webpack_require__(/*! ./eachComponent */ \"./node_modules/@formio/core/lib/utils/formUtil/eachComponent.js\");\n/**\n * Iterates through each component as well as its data, and triggers a callback for every component along\n * with the contextual data for that component in addition to the absolute path for that component.\n * @param components - The array of JSON components to iterate through.\n * @param data - The contextual data object for the components.\n * @param fn - The callback function to trigger for each component following the signature (component, data, row, path, components, index, parent).\n * @param parent - The parent component.\n * @param includeAll\n * @returns\n */\nconst eachComponentData = (components, data, fn, includeAll = false, local = false, parent, parentPaths) => {\n    if (!components) {\n        return;\n    }\n    return (0, eachComponent_1.eachComponent)(components, (component, compPath, componentComponents, compParent, compPaths) => {\n        const row = (0, index_1.getContextualRowData)(component, data, compPaths, local);\n        if (fn(component, data, row, (compPaths === null || compPaths === void 0 ? void 0 : compPaths.dataPath) || '', componentComponents, compPaths === null || compPaths === void 0 ? void 0 : compPaths.dataIndex, compParent, compPaths) === true) {\n            (0, index_1.resetComponentScope)(component);\n            return true;\n        }\n        if ((0, index_1.isComponentNestedDataType)(component)) {\n            const value = (0, lodash_1.get)(data, local ? (compPaths === null || compPaths === void 0 ? void 0 : compPaths.localDataPath) || '' : (compPaths === null || compPaths === void 0 ? void 0 : compPaths.dataPath) || '');\n            if ((0, index_1.getModelType)(component) === 'nestedArray' ||\n                (0, index_1.getModelType)(component) === 'nestedDataArray') {\n                if (Array.isArray(value) && value.length) {\n                    for (let i = 0; i < value.length; i++) {\n                        if (compPaths) {\n                            compPaths.dataIndex = i;\n                        }\n                        (0, exports.eachComponentData)(component.components, data, fn, includeAll, local, component, compPaths);\n                    }\n                }\n                else if (includeAll || (0, lodash_1.isUndefined)(value)) {\n                    (0, exports.eachComponentData)(component.components, data, fn, includeAll, local, component, compPaths);\n                }\n                (0, index_1.resetComponentScope)(component);\n                return true;\n            }\n            else {\n                if (!includeAll && !(0, index_1.shouldProcessComponent)(component, row, value)) {\n                    (0, index_1.resetComponentScope)(component);\n                    return true;\n                }\n                (0, exports.eachComponentData)(component.components, data, fn, includeAll, local, component, compPaths);\n            }\n            (0, index_1.resetComponentScope)(component);\n            return true;\n        }\n        else if (!component.type || (0, index_1.getModelType)(component) === 'none') {\n            const info = (0, index_1.componentInfo)(component);\n            if (info.hasColumns) {\n                component.columns.forEach((column) => (0, exports.eachComponentData)(column.components, data, fn, includeAll, local, component, compPaths));\n            }\n            else if (info.hasRows) {\n                component.rows.forEach((row) => {\n                    if (Array.isArray(row)) {\n                        row.forEach((row) => (0, exports.eachComponentData)(row.components, data, fn, includeAll, local, component, compPaths));\n                    }\n                });\n            }\n            else if (info.hasComps) {\n                (0, exports.eachComponentData)(component.components, data, fn, includeAll, local, component, compPaths);\n            }\n            (0, index_1.resetComponentScope)(component);\n            return true;\n        }\n        (0, index_1.resetComponentScope)(component);\n        return false;\n    }, true, parentPaths, parent);\n};\nexports.eachComponentData = eachComponentData;\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/utils/formUtil/eachComponentData.js?");
 
 /***/ }),
 
@@ -1674,7 +1674,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.eachComponentDataAsync = void 0;\nconst lodash_1 = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\nconst index_1 = __webpack_require__(/*! ./index */ \"./node_modules/@formio/core/lib/utils/formUtil/index.js\");\nconst eachComponentAsync_1 = __webpack_require__(/*! ./eachComponentAsync */ \"./node_modules/@formio/core/lib/utils/formUtil/eachComponentAsync.js\");\n// Async each component data.\nconst eachComponentDataAsync = (components_1, data_1, fn_1, ...args_1) => __awaiter(void 0, [components_1, data_1, fn_1, ...args_1], void 0, function* (components, data, fn, includeAll = false, local = false, parent, parentPaths) {\n    if (!components) {\n        return;\n    }\n    return yield (0, eachComponentAsync_1.eachComponentAsync)(components, (component, compPath, componentComponents, compParent, compPaths) => __awaiter(void 0, void 0, void 0, function* () {\n        const row = (0, index_1.getContextualRowData)(component, data, compPaths, local);\n        if ((yield fn(component, data, row, (compPaths === null || compPaths === void 0 ? void 0 : compPaths.dataPath) || '', componentComponents, compPaths === null || compPaths === void 0 ? void 0 : compPaths.dataIndex, compParent)) === true) {\n            (0, index_1.resetComponentScope)(component);\n            return true;\n        }\n        if ((0, index_1.isComponentNestedDataType)(component)) {\n            const value = (0, lodash_1.get)(data, local ? (compPaths === null || compPaths === void 0 ? void 0 : compPaths.localDataPath) || '' : (compPaths === null || compPaths === void 0 ? void 0 : compPaths.dataPath) || '');\n            if ((0, index_1.getModelType)(component) === 'nestedArray' ||\n                (0, index_1.getModelType)(component) === 'nestedDataArray') {\n                if (Array.isArray(value) && value.length) {\n                    for (let i = 0; i < value.length; i++) {\n                        if (compPaths) {\n                            compPaths.dataIndex = i;\n                        }\n                        yield (0, exports.eachComponentDataAsync)(component.components, data, fn, includeAll, local, component, compPaths);\n                    }\n                }\n                (0, index_1.resetComponentScope)(component);\n                return true;\n            }\n            else {\n                if (!includeAll && !(0, index_1.shouldProcessComponent)(component, row, value)) {\n                    (0, index_1.resetComponentScope)(component);\n                    return true;\n                }\n                yield (0, exports.eachComponentDataAsync)(component.components, data, fn, includeAll, local, component, compPaths);\n            }\n            (0, index_1.resetComponentScope)(component);\n            return true;\n        }\n        else if (!component.type || (0, index_1.getModelType)(component) === 'none') {\n            const info = (0, index_1.componentInfo)(component);\n            if (info.hasColumns) {\n                const columnsComponent = component;\n                for (const column of columnsComponent.columns) {\n                    yield (0, exports.eachComponentDataAsync)(column.components, data, fn, includeAll, local, component, compPaths);\n                }\n            }\n            else if (info.hasRows) {\n                const rowsComponent = component;\n                for (const rowArray of rowsComponent.rows) {\n                    if (Array.isArray(rowArray)) {\n                        for (const row of rowArray) {\n                            yield (0, exports.eachComponentDataAsync)(row.components, data, fn, includeAll, local, component, compPaths);\n                        }\n                    }\n                }\n            }\n            else if (info.hasComps) {\n                yield (0, exports.eachComponentDataAsync)(component.components, data, fn, includeAll, local, component, compPaths);\n            }\n            (0, index_1.resetComponentScope)(component);\n            return true;\n        }\n        (0, index_1.resetComponentScope)(component);\n        return false;\n    }), true, parentPaths, parent);\n});\nexports.eachComponentDataAsync = eachComponentDataAsync;\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/utils/formUtil/eachComponentDataAsync.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.eachComponentDataAsync = void 0;\nconst lodash_1 = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\nconst index_1 = __webpack_require__(/*! ./index */ \"./node_modules/@formio/core/lib/utils/formUtil/index.js\");\nconst eachComponentAsync_1 = __webpack_require__(/*! ./eachComponentAsync */ \"./node_modules/@formio/core/lib/utils/formUtil/eachComponentAsync.js\");\n// Async each component data.\nconst eachComponentDataAsync = (components_1, data_1, fn_1, ...args_1) => __awaiter(void 0, [components_1, data_1, fn_1, ...args_1], void 0, function* (components, data, fn, includeAll = false, local = false, parent, parentPaths) {\n    if (!components) {\n        return;\n    }\n    return yield (0, eachComponentAsync_1.eachComponentAsync)(components, (component, compPath, componentComponents, compParent, compPaths) => __awaiter(void 0, void 0, void 0, function* () {\n        const row = (0, index_1.getContextualRowData)(component, data, compPaths, local);\n        if ((yield fn(component, data, row, (compPaths === null || compPaths === void 0 ? void 0 : compPaths.dataPath) || '', componentComponents, compPaths === null || compPaths === void 0 ? void 0 : compPaths.dataIndex, compParent)) === true) {\n            (0, index_1.resetComponentScope)(component);\n            return true;\n        }\n        if ((0, index_1.isComponentNestedDataType)(component)) {\n            const value = (0, lodash_1.get)(data, local ? (compPaths === null || compPaths === void 0 ? void 0 : compPaths.localDataPath) || '' : (compPaths === null || compPaths === void 0 ? void 0 : compPaths.dataPath) || '');\n            if ((0, index_1.getModelType)(component) === 'nestedArray' ||\n                (0, index_1.getModelType)(component) === 'nestedDataArray') {\n                if (Array.isArray(value) && value.length) {\n                    for (let i = 0; i < value.length; i++) {\n                        if (compPaths) {\n                            compPaths.dataIndex = i;\n                        }\n                        yield (0, exports.eachComponentDataAsync)(component.components, data, fn, includeAll, local, component, compPaths);\n                    }\n                }\n                else if (includeAll) {\n                    yield (0, exports.eachComponentDataAsync)(component.components, data, fn, includeAll, local, component, compPaths);\n                }\n                (0, index_1.resetComponentScope)(component);\n                return true;\n            }\n            else {\n                if (!includeAll && !(0, index_1.shouldProcessComponent)(component, row, value)) {\n                    (0, index_1.resetComponentScope)(component);\n                    return true;\n                }\n                yield (0, exports.eachComponentDataAsync)(component.components, data, fn, includeAll, local, component, compPaths);\n            }\n            (0, index_1.resetComponentScope)(component);\n            return true;\n        }\n        else if (!component.type || (0, index_1.getModelType)(component) === 'none') {\n            const info = (0, index_1.componentInfo)(component);\n            if (info.hasColumns) {\n                const columnsComponent = component;\n                for (const column of columnsComponent.columns) {\n                    yield (0, exports.eachComponentDataAsync)(column.components, data, fn, includeAll, local, component, compPaths);\n                }\n            }\n            else if (info.hasRows) {\n                const rowsComponent = component;\n                for (const rowArray of rowsComponent.rows) {\n                    if (Array.isArray(rowArray)) {\n                        for (const row of rowArray) {\n                            yield (0, exports.eachComponentDataAsync)(row.components, data, fn, includeAll, local, component, compPaths);\n                        }\n                    }\n                }\n            }\n            else if (info.hasComps) {\n                yield (0, exports.eachComponentDataAsync)(component.components, data, fn, includeAll, local, component, compPaths);\n            }\n            (0, index_1.resetComponentScope)(component);\n            return true;\n        }\n        (0, index_1.resetComponentScope)(component);\n        return false;\n    }), true, parentPaths, parent);\n});\nexports.eachComponentDataAsync = eachComponentDataAsync;\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/utils/formUtil/eachComponentDataAsync.js?");
 
 /***/ }),
 
@@ -1685,7 +1685,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.eachComponentDataAsync = exports.eachComponentAsync = exports.eachComponentData = exports.eachComponent = exports.normalizeContext = exports.getComponentErrorField = exports.compareSelectResourceWithObjectTypeValues = exports.isSelectResourceWithObjectValue = exports.getItemTemplateKeys = exports.isComponentDataEmpty = exports.getEmptyValue = exports.findComponent = exports.applyFormChanges = exports.generateFormChange = exports.getStrings = exports.getValue = exports.escapeRegExCharacters = exports.formatAsCurrency = exports.parseFloatExt = exports.hasCondition = exports.removeComponent = exports.findComponents = exports.searchComponents = exports.getComponent = exports.matchComponent = exports.isLayoutComponent = exports.getComponentValue = exports.getComponentData = exports.componentInfo = exports.shouldProcessComponent = exports.getComponentLocalData = exports.getContextualRowData = exports.getContextualRowPath = exports.getComponentKey = exports.getComponentFromPath = exports.getBestMatch = exports.componentMatches = exports.getComponentPaths = exports.componentPath = exports.resetComponentScope = exports.setComponentScope = exports.isComponentNestedDataType = exports.getModelType = exports.MODEL_TYPES_OF_KNOWN_COMPONENTS = exports.uniqueName = exports.guid = exports.flattenComponents = void 0;\nconst lodash_1 = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\nconst fast_json_patch_1 = __webpack_require__(/*! fast-json-patch */ \"./node_modules/fast-json-patch/index.mjs\");\nconst types_1 = __webpack_require__(/*! ../../types */ \"./node_modules/@formio/core/lib/types/index.js\");\nconst Evaluator_1 = __webpack_require__(/*! ../Evaluator */ \"./node_modules/@formio/core/lib/utils/Evaluator.js\");\nconst eachComponent_1 = __webpack_require__(/*! ./eachComponent */ \"./node_modules/@formio/core/lib/utils/formUtil/eachComponent.js\");\nObject.defineProperty(exports, \"eachComponent\", ({ enumerable: true, get: function () { return eachComponent_1.eachComponent; } }));\nconst eachComponentData_1 = __webpack_require__(/*! ./eachComponentData */ \"./node_modules/@formio/core/lib/utils/formUtil/eachComponentData.js\");\nObject.defineProperty(exports, \"eachComponentData\", ({ enumerable: true, get: function () { return eachComponentData_1.eachComponentData; } }));\nconst eachComponentAsync_1 = __webpack_require__(/*! ./eachComponentAsync */ \"./node_modules/@formio/core/lib/utils/formUtil/eachComponentAsync.js\");\nObject.defineProperty(exports, \"eachComponentAsync\", ({ enumerable: true, get: function () { return eachComponentAsync_1.eachComponentAsync; } }));\nconst eachComponentDataAsync_1 = __webpack_require__(/*! ./eachComponentDataAsync */ \"./node_modules/@formio/core/lib/utils/formUtil/eachComponentDataAsync.js\");\nObject.defineProperty(exports, \"eachComponentDataAsync\", ({ enumerable: true, get: function () { return eachComponentDataAsync_1.eachComponentDataAsync; } }));\n/**\n * Flatten the form components for data manipulation.\n *\n * @param {Object} components\n *   The components to iterate.\n * @param {Boolean} includeAll\n *   Whether or not to include layout components.\n *\n * @returns {Object}\n *   The flattened components map.\n */\nfunction flattenComponents(components, includeAll = false) {\n    const flattened = {};\n    (0, eachComponent_1.eachComponent)(components, (component, path) => {\n        flattened[path] = component;\n    }, includeAll);\n    return flattened;\n}\nexports.flattenComponents = flattenComponents;\nfunction guid() {\n    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {\n        const r = (Math.random() * 16) | 0;\n        const v = c === 'x' ? r : (r & 0x3) | 0x8;\n        return v.toString(16);\n    });\n}\nexports.guid = guid;\n/**\n * Make a filename guaranteed to be unique.\n * @param name\n * @param template\n * @param evalContext\n * @returns {string}\n */\nfunction uniqueName(name, template, evalContext) {\n    template = template || '{{fileName}}-{{guid}}';\n    //include guid in template anyway, to prevent overwriting issue if filename matches existing file\n    if (!template.includes('{{guid}}')) {\n        template = `${template}-{{guid}}`;\n    }\n    const parts = name.split('.');\n    let fileName = parts.slice(0, parts.length - 1).join('.');\n    const extension = parts.length > 1 ? `.${(0, lodash_1.last)(parts)}` : '';\n    //allow only 100 characters from original name to avoid issues with filename length restrictions\n    fileName = fileName.substr(0, 100);\n    evalContext = Object.assign(evalContext || {}, {\n        fileName,\n        guid: guid(),\n    });\n    //only letters, numbers, dots, dashes, underscores and spaces are allowed. Anything else will be replaced with dash\n    const uniqueName = `${Evaluator_1.Evaluator.interpolate(template, evalContext)}${extension}`.replace(/[^0-9a-zA-Z.\\-_ ]/g, '-');\n    return uniqueName;\n}\nexports.uniqueName = uniqueName;\n/**\n * Defines model types for known components.\n * For now, these will be the only model types supported by the @formio/core library.\n *\n * nestedArray: for components that store their data as an array and have nested components.\n * nestedDataArray: for components that store their data as an array and have nested components, but keeps the value of nested components inside 'data' property.\n * array: for components that store their data as an array.\n * dataObject: for components that store their data in a nested { data: {} } object.\n * object: for components that store their data in an object.\n * map: for components that store their data in a map.\n * content: for components that do not store data.\n * string: for components that store their data as a string.\n * number: for components that store their data as a number.\n * boolean: for components that store their data as a boolean.\n * none: for components that do not store data and should not be included in the submission.\n * any: for components that can store any type of data.\n *\n */\nexports.MODEL_TYPES_OF_KNOWN_COMPONENTS = {\n    nestedArray: ['datagrid', 'editgrid', 'datatable', 'dynamicWizard'],\n    nestedDataArray: ['tagpad'],\n    dataObject: ['form'],\n    object: ['container', 'address'],\n    map: ['datamap'],\n    content: ['htmlelement', 'content'],\n    string: [\n        'textfield',\n        'password',\n        'email',\n        'url',\n        'phoneNumber',\n        'day',\n        'datetime',\n        'time',\n        'signature',\n    ],\n    number: ['number', 'currency'],\n    boolean: ['checkbox', 'radio'],\n    none: ['table', 'well', 'columns', 'fieldset', 'panel', 'tabs'],\n    any: [\n        'survey',\n        'captcha',\n        'textarea',\n        'selectboxes',\n        'tags',\n        'select',\n        'hidden',\n        'button',\n        'datasource',\n        'sketchpad',\n        'reviewpage',\n        'file',\n    ],\n};\nfunction getModelType(component) {\n    // If the component JSON asserts a model type, use that.\n    if (component.modelType) {\n        return component.modelType;\n    }\n    let modelType = 'any';\n    // Otherwise, check for known component types.\n    for (const type of Object.keys(exports.MODEL_TYPES_OF_KNOWN_COMPONENTS)) {\n        if (exports.MODEL_TYPES_OF_KNOWN_COMPONENTS[type].includes(component.type)) {\n            modelType = type;\n            break;\n        }\n    }\n    // Otherwise check for components that assert no value.\n    if (modelType === 'any' && component.input === false) {\n        modelType = 'none';\n    }\n    // To speed up performance of getModelType, we will set the modelType on the component as a non-enumerable property.\n    Object.defineProperty(component, 'modelType', {\n        enumerable: false,\n        writable: true,\n        value: modelType,\n    });\n    // Otherwise default to any.\n    return modelType;\n}\nexports.getModelType = getModelType;\nfunction isComponentNestedDataType(component) {\n    return (component.tree ||\n        getModelType(component) === 'nestedArray' ||\n        getModelType(component) === 'nestedDataArray' ||\n        getModelType(component) === 'dataObject' ||\n        getModelType(component) === 'object' ||\n        getModelType(component) === 'map');\n}\nexports.isComponentNestedDataType = isComponentNestedDataType;\nfunction setComponentScope(component, name, value) {\n    if (!component) {\n        return;\n    }\n    if (!component.scope) {\n        Object.defineProperty(component, 'scope', {\n            enumerable: false,\n            configurable: true,\n            writable: true,\n            value: {},\n        });\n    }\n    Object.defineProperty(component.scope, name, {\n        enumerable: false,\n        writable: false,\n        configurable: true,\n        value,\n    });\n}\nexports.setComponentScope = setComponentScope;\nfunction resetComponentScope(component) {\n    if (component.scope) {\n        delete component.scope;\n    }\n}\nexports.resetComponentScope = resetComponentScope;\n/**\n * Return the component path provided the type of the component path.\n * @param component - The component JSON.\n * @param type - The type of path to return.\n * @returns\n */\nfunction componentPath(component, parent, parentPaths, type) {\n    if (!component) {\n        return '';\n    }\n    if (component.component) {\n        component = component.component;\n    }\n    const compModel = getModelType(component);\n    // Relative paths are only referenced from the current form.\n    const relative = type === types_1.ComponentPath.localPath ||\n        type === types_1.ComponentPath.fullLocalPath ||\n        type === types_1.ComponentPath.localDataPath;\n    // Full paths include all layout component ids in the path.\n    const fullPath = type === types_1.ComponentPath.fullPath || type === types_1.ComponentPath.fullLocalPath;\n    // See if this is a data path.\n    const dataPath = type === types_1.ComponentPath.dataPath || type === types_1.ComponentPath.localDataPath;\n    // Determine if this component should include its key.\n    const includeKey = fullPath || (!!component.type && compModel !== 'none' && compModel !== 'content');\n    // The key is provided if the component can have data or if we are fetching the full path.\n    const key = includeKey ? getComponentKey(component) : '';\n    if (!parent) {\n        // Return the key if there is no parent.\n        return key;\n    }\n    // Get the parent model type.\n    const parentModel = getModelType(parent);\n    // If there is a parent, then we only return the key if the parent is a nested form and it is a relative path.\n    if (relative && parentModel === 'dataObject') {\n        return key;\n    }\n    // Return the parent path.\n    let parentPath = (parentPaths === null || parentPaths === void 0 ? void 0 : parentPaths.hasOwnProperty(type)) ? parentPaths[type] || '' : '';\n    // For data paths (where we wish to get the path to the data), we need to ensure we append the parent\n    // paths to the end of the path so that any component within this component properly references their data.\n    if (dataPath && parentPath) {\n        if (parentModel === 'nestedArray' || parentModel === 'nestedDataArray') {\n            parentPath += `[${(parentPaths === null || parentPaths === void 0 ? void 0 : parentPaths.dataIndex) || 0}]`;\n        }\n        if (parentModel === 'dataObject' || parentModel === 'nestedDataArray') {\n            parentPath += '.data';\n        }\n    }\n    // Return the parent path with its relative component path (if applicable).\n    return parentPath ? (key ? `${parentPath}.${key}` : parentPath) : key;\n}\nexports.componentPath = componentPath;\n/**\n * This method determines a components paths provided the component JSON, the parent and the parent paths.\n * @param component\n * @param parent\n * @param parentPaths\n * @returns\n */\nfunction getComponentPaths(component, parent, parentPaths) {\n    return {\n        path: componentPath(component, parent, parentPaths, types_1.ComponentPath.path),\n        fullPath: componentPath(component, parent, parentPaths, types_1.ComponentPath.fullPath),\n        localPath: componentPath(component, parent, parentPaths, types_1.ComponentPath.localPath),\n        fullLocalPath: componentPath(component, parent, parentPaths, types_1.ComponentPath.fullLocalPath),\n        dataPath: componentPath(component, parent, parentPaths, types_1.ComponentPath.dataPath),\n        localDataPath: componentPath(component, parent, parentPaths, types_1.ComponentPath.localDataPath),\n        dataIndex: parentPaths === null || parentPaths === void 0 ? void 0 : parentPaths.dataIndex,\n    };\n}\nexports.getComponentPaths = getComponentPaths;\n/**\n * Determines if a component has a match at any of the path types.\n * @param component {Component} - The component JSON to check for matches.\n * @param paths {ComponentPaths} - The current component paths object.\n * @param path {string} - Either the \"form\" or \"data\" path to see if a match occurs.\n * @param dataIndex {number | undefined} - The data index for the current component to match.\n * @param matches {Record<string, ComponentMatch | undefined>} - The current matches object.\n * @param addMatch {(type: ComponentPath | 'key', match: ComponentMatch) => ComponentMatch} - A callback function to allow modules to decorate the match object.\n */\nfunction componentMatches(component, paths, path, dataIndex, matches = {\n    path: undefined,\n    fullPath: undefined,\n    localPath: undefined,\n    dataPath: undefined,\n    localDataPath: undefined,\n    fullLocalPath: undefined,\n    key: undefined,\n}, addMatch = (type, match) => {\n    return match;\n}) {\n    let dataProperty = '';\n    if (component.type === 'selectboxes') {\n        const valuePath = new RegExp(`(\\\\.${(0, lodash_1.escapeRegExp)(component.key)})(\\\\.[^\\\\.]+)$`);\n        const pathMatches = path.match(valuePath);\n        if ((pathMatches === null || pathMatches === void 0 ? void 0 : pathMatches.length) === 3) {\n            dataProperty = pathMatches[2];\n            path = path.replace(valuePath, '$1');\n        }\n    }\n    // Get the current model type.\n    const modelType = getModelType(component);\n    const dataModel = modelType !== 'none' && modelType !== 'content';\n    [\n        types_1.ComponentPath.path,\n        types_1.ComponentPath.fullPath,\n        types_1.ComponentPath.localPath,\n        types_1.ComponentPath.fullLocalPath,\n        types_1.ComponentPath.dataPath,\n        types_1.ComponentPath.localDataPath,\n    ].forEach((type) => {\n        const dataPath = type === types_1.ComponentPath.dataPath || type === types_1.ComponentPath.localDataPath;\n        if (paths[type] === path) {\n            const currentMatch = matches[type];\n            const currentModelType = (currentMatch === null || currentMatch === void 0 ? void 0 : currentMatch.component)\n                ? getModelType(currentMatch.component)\n                : 'none';\n            const currentDataModel = currentModelType !== 'none' && currentModelType !== 'content';\n            if (!currentMatch ||\n                (dataPath && dataModel && currentDataModel) || // Replace the current match if this is a dataPath and both are dataModels.\n                (!dataPath && dataIndex === paths.dataIndex) // Replace the current match if this is not a dataPath and the indexes are the same.\n            ) {\n                if (dataPath) {\n                    const dataPaths = {\n                        dataPath: paths.dataPath || '',\n                        localDataPath: paths.localDataPath || '',\n                    };\n                    if (dataProperty) {\n                        dataPaths.dataPath += dataProperty;\n                        dataPaths.localDataPath += dataProperty;\n                    }\n                    matches[type] = addMatch(type, {\n                        component,\n                        paths: Object.assign(Object.assign({}, paths), dataPaths),\n                    });\n                }\n                else {\n                    matches[type] = addMatch(type, { component, paths });\n                }\n            }\n        }\n    });\n    if (!matches.key && component.input !== false && component.key === path) {\n        matches.key = addMatch('key', { component, paths });\n    }\n}\nexports.componentMatches = componentMatches;\nfunction getBestMatch(matches) {\n    if (matches.dataPath) {\n        return matches.dataPath;\n    }\n    if (matches.localDataPath) {\n        return matches.localDataPath;\n    }\n    if (matches.fullPath) {\n        return matches.fullPath;\n    }\n    if (matches.path) {\n        return matches.path;\n    }\n    if (matches.fullLocalPath) {\n        return matches.fullLocalPath;\n    }\n    if (matches.localPath) {\n        return matches.localPath;\n    }\n    if (matches.key) {\n        return matches.key;\n    }\n    return undefined;\n}\nexports.getBestMatch = getBestMatch;\n/**\n * This method performs a fuzzy search for a component within a form provided a number of different\n * paths to search.\n */\nfunction getComponentFromPath(components, path, data, dataIndex, includeAll = false) {\n    const matches = {\n        path: undefined,\n        fullPath: undefined,\n        localPath: undefined,\n        fullLocalPath: undefined,\n        dataPath: undefined,\n        localDataPath: undefined,\n        key: undefined,\n    };\n    if (data) {\n        (0, eachComponentData_1.eachComponentData)(components, data, (component, data, row, compPath, comps, index, parent, paths) => {\n            componentMatches(component, paths || {}, path, dataIndex, matches);\n        }, includeAll);\n    }\n    else {\n        (0, eachComponent_1.eachComponent)(components, (component, compPath, componentComponents, compParent, paths) => {\n            componentMatches(component, paths || {}, path, dataIndex, matches);\n        }, includeAll);\n    }\n    return getBestMatch(matches);\n}\nexports.getComponentFromPath = getComponentFromPath;\n/**\n * Provided a component, this will return the \"data\" key for that component in the contextual data\n * object.\n *\n * @param component\n * @returns\n */\nfunction getComponentKey(component) {\n    if (!component) {\n        return '';\n    }\n    if (component.type === 'checkbox' &&\n        component.inputType === 'radio' &&\n        component.name) {\n        return component.name;\n    }\n    return component.key;\n}\nexports.getComponentKey = getComponentKey;\nfunction getContextualRowPath(component, paths, local) {\n    if (!paths) {\n        return '';\n    }\n    const dataPath = local ? paths.localDataPath : paths.dataPath;\n    return (dataPath === null || dataPath === void 0 ? void 0 : dataPath.replace(new RegExp(`.?${(0, lodash_1.escapeRegExp)(getComponentKey(component))}$`), '')) || '';\n}\nexports.getContextualRowPath = getContextualRowPath;\nfunction getContextualRowData(component, data, paths, local) {\n    const rowPath = getContextualRowPath(component, paths, local);\n    return rowPath ? (0, lodash_1.get)(data, rowPath, null) : data;\n}\nexports.getContextualRowData = getContextualRowData;\nfunction getComponentLocalData(paths, data, local) {\n    var _a;\n    if (local) {\n        return data;\n    }\n    const parentPath = ((_a = paths.dataPath) === null || _a === void 0 ? void 0 : _a.replace(new RegExp(`.?${(0, lodash_1.escapeRegExp)(paths.localDataPath)}$`), '')) || '';\n    return parentPath ? (0, lodash_1.get)(data, parentPath, null) : data;\n}\nexports.getComponentLocalData = getComponentLocalData;\nfunction shouldProcessComponent(comp, row, value) {\n    var _a;\n    if (getModelType(comp) === 'dataObject') {\n        const noReferenceAttached = (value === null || value === void 0 ? void 0 : value._id) ? (0, lodash_1.isEmpty)(value.data) && !(0, lodash_1.has)(value, 'form') : false;\n        const shouldBeCleared = (!comp.hasOwnProperty('clearOnHide') || comp.clearOnHide) &&\n            (comp.hidden || ((_a = comp.scope) === null || _a === void 0 ? void 0 : _a.conditionallyHidden));\n        const shouldSkipProcessingNestedFormData = noReferenceAttached || shouldBeCleared;\n        if (shouldSkipProcessingNestedFormData) {\n            return false;\n        }\n    }\n    return true;\n}\nexports.shouldProcessComponent = shouldProcessComponent;\nfunction componentInfo(component) {\n    const hasColumns = component.columns && Array.isArray(component.columns);\n    const hasRows = component.rows && Array.isArray(component.rows);\n    const hasComps = component.components && Array.isArray(component.components);\n    const isContent = getModelType(component) === 'content';\n    const isLayout = getModelType(component) === 'none';\n    const isInput = !component.hasOwnProperty('input') || !!component.input;\n    return {\n        hasColumns,\n        hasRows,\n        hasComps,\n        layout: hasColumns || hasRows || (hasComps && !isInput) || isLayout || isContent,\n        iterable: hasColumns || hasRows || hasComps || isContent,\n    };\n}\nexports.componentInfo = componentInfo;\n// Provided components, data, and a key, this will return the components data.\nfunction getComponentData(components, data, path) {\n    const compData = { component: null, data: null };\n    (0, eachComponentData_1.eachComponentData)(components, data, (component, data, row, compPath) => {\n        if (compPath === path) {\n            compData.component = component;\n            compData.data = row;\n            return true;\n        }\n    });\n    return compData;\n}\nexports.getComponentData = getComponentData;\nfunction getComponentValue(form, data, path, dataIndex, local) {\n    var _a, _b;\n    const match = getComponentFromPath((form === null || form === void 0 ? void 0 : form.components) || [], path, data, dataIndex);\n    if (!match) {\n        // Fall back to get the value from the data object.\n        return (0, lodash_1.get)(data, path, undefined);\n    }\n    if (local) {\n        return ((_a = match === null || match === void 0 ? void 0 : match.paths) === null || _a === void 0 ? void 0 : _a.localDataPath) ? (0, lodash_1.get)(data, match.paths.localDataPath, undefined) : null;\n    }\n    return ((_b = match === null || match === void 0 ? void 0 : match.paths) === null || _b === void 0 ? void 0 : _b.dataPath) ? (0, lodash_1.get)(data, match.paths.dataPath, undefined) : null;\n}\nexports.getComponentValue = getComponentValue;\n/**\n * Determine if a component is a layout component or not.\n *\n * @param {Object} component\n *   The component to check.\n *\n * @returns {Boolean}\n *   Whether or not the component is a layout component.\n */\nfunction isLayoutComponent(component) {\n    return Boolean((component.columns &&\n        Array.isArray(component.columns)) ||\n        (component.rows && Array.isArray(component.rows)) ||\n        (component.components &&\n            Array.isArray(component.components)));\n}\nexports.isLayoutComponent = isLayoutComponent;\n/**\n * Matches if a component matches the query.\n *\n * @param component\n * @param query\n * @return {boolean}\n */\nfunction matchComponent(component, query, paths) {\n    if ((0, lodash_1.isString)(query)) {\n        return component.key === query || (paths === null || paths === void 0 ? void 0 : paths.localPath) === query || (paths === null || paths === void 0 ? void 0 : paths.path) === query;\n    }\n    else {\n        let matches = false;\n        (0, lodash_1.forOwn)(query, (value, key) => {\n            matches = (0, lodash_1.get)(component, key) === value;\n            if (!matches) {\n                return false;\n            }\n        });\n        return matches;\n    }\n}\nexports.matchComponent = matchComponent;\n/**\n * Get a component by its path.\n *\n * @param {Object} components - The components to iterate.\n * @param {String|Object} path - The key of the component to get, or a query of the component to search.\n * @param {boolean} includeAll - Whether or not to include layout components.\n * @returns {Component} - The component that matches the given key, or undefined if not found.\n */\nfunction getComponent(components, path, includeAll = false, dataIndex) {\n    var _a;\n    return (_a = getComponentFromPath(components, path, undefined, dataIndex, includeAll)) === null || _a === void 0 ? void 0 : _a.component;\n}\nexports.getComponent = getComponent;\n/**\n * Finds a component provided a query of properties of that component.\n *\n * @param components\n * @param query\n * @return {*}\n */\nfunction searchComponents(components, query) {\n    const results = [];\n    (0, eachComponent_1.eachComponent)(components, (component, compPath, components, parent, compPaths) => {\n        if (matchComponent(component, query, compPaths)) {\n            results.push(component);\n        }\n    }, true);\n    return results;\n}\nexports.searchComponents = searchComponents;\n/**\n * Deprecated version of findComponents. Renamed to searchComponents.\n * @param {import('@formio/core').Component[]} components - The components to find components within.\n * @param {object} query - The query to use when searching for the components.\n * @returns {import('@formio/core').Component[]} - The result of the component that is found.\n */\nfunction findComponents(components, query) {\n    console.warn('formio.js/utils findComponents is deprecated. Use searchComponents instead.');\n    return searchComponents(components, query);\n}\nexports.findComponents = findComponents;\n/**\n * Remove a component by path.\n *\n * @param components\n * @param path\n */\nfunction removeComponent(components, path) {\n    // @ts-expect-error - I'm not sure why we're using `pop` here if it's a string\n    const index = path.pop();\n    if (path.length !== 0) {\n        components = (0, lodash_1.get)(components, path);\n    }\n    components.splice(index, 1);\n}\nexports.removeComponent = removeComponent;\n/**\n * Returns if this component has a conditional statement.\n *\n * @param component - The component JSON schema.\n *\n * @returns {boolean} - TRUE - This component has a conditional, FALSE - No conditional provided.\n */\nfunction hasCondition(component) {\n    return Boolean(component.customConditional ||\n        (component.conditional &&\n            (component.conditional.when ||\n                component.conditional.json ||\n                (component.conditional.conjunction &&\n                    (0, lodash_1.isBoolean)(component.conditional.show) &&\n                    !(0, lodash_1.isEmpty)(component.conditional.conditions)))));\n}\nexports.hasCondition = hasCondition;\n/**\n * Extension of standard #parseFloat(value) function, that also clears input string.\n *\n * @param {any} value\n *   The value to parse.\n *\n * @returns {Number}\n *   Parsed value.\n */\nfunction parseFloatExt(value) {\n    return parseFloat((0, lodash_1.isString)(value) ? value.replace(/[^\\de.+-]/gi, '') : value);\n}\nexports.parseFloatExt = parseFloatExt;\n/**\n * Formats provided value in way how Currency component uses it.\n *\n * @param {any} value\n *   The value to format.\n *\n * @returns {String}\n *   Value formatted for Currency component.\n */\nfunction formatAsCurrency(value) {\n    const parsedValue = parseFloatExt(value);\n    if (isNaN(parsedValue)) {\n        return '';\n    }\n    const parts = (0, lodash_1.round)(parsedValue, 2).toString().split('.');\n    parts[0] = (0, lodash_1.chunk)(Array.from(parts[0]).reverse(), 3)\n        .reverse()\n        .map((part) => part.reverse().join(''))\n        .join(',');\n    parts[1] = (0, lodash_1.pad)(parts[1], 2, '0');\n    return parts.join('.');\n}\nexports.formatAsCurrency = formatAsCurrency;\n/**\n * Escapes RegEx characters in provided String value.\n *\n * @param {String} value\n *   String for escaping RegEx characters.\n * @returns {string}\n *   String with escaped RegEx characters.\n */\nfunction escapeRegExCharacters(value) {\n    return value.replace(/[-[\\]/{}()*+?.\\\\^$|]/g, '\\\\$&');\n}\nexports.escapeRegExCharacters = escapeRegExCharacters;\n/**\n * Get the value for a component key, in the given submission.\n *\n * @param {Object} submission\n *   A submission object to search.\n * @param {String} key\n *   A for components API key to search for.\n */\nfunction getValue(submission, key) {\n    const search = (data) => {\n        if ((0, lodash_1.isPlainObject)(data)) {\n            if ((0, lodash_1.has)(data, key)) {\n                return (0, lodash_1.get)(data, key);\n            }\n            let value = null;\n            (0, lodash_1.forOwn)(data, (prop) => {\n                const result = search(prop);\n                if (!(0, lodash_1.isNil)(result)) {\n                    value = result;\n                    return false;\n                }\n            });\n            return value;\n        }\n        else {\n            return null;\n        }\n    };\n    return search(submission.data);\n}\nexports.getValue = getValue;\n/**\n * Iterate over all components in a form and get string values for translation.\n * @param form\n */\nfunction getStrings(form) {\n    const properties = [\n        'label',\n        'title',\n        'legend',\n        'tooltip',\n        'description',\n        'placeholder',\n        'prefix',\n        'suffix',\n        'errorLabel',\n        'content',\n        'html',\n    ];\n    const strings = [];\n    (0, eachComponent_1.eachComponent)(form.components, (component) => {\n        properties.forEach((property) => {\n            if (component.hasOwnProperty(property) && component[property]) {\n                strings.push({\n                    key: component.key,\n                    type: component.type,\n                    property,\n                    string: component[property],\n                });\n            }\n        });\n        if ((!component.dataSrc || component.dataSrc === 'values') &&\n            component.hasOwnProperty('values') &&\n            Array.isArray(component.values) &&\n            component.values.length) {\n            component.values.forEach((value, index) => {\n                strings.push({\n                    key: component.key,\n                    property: `value[${index}].label`,\n                    string: component.values[index].label,\n                });\n            });\n        }\n        // Hard coded values from Day component\n        if (component.type === 'day') {\n            [\n                'day',\n                'month',\n                'year',\n                'Day',\n                'Month',\n                'Year',\n                'january',\n                'february',\n                'march',\n                'april',\n                'may',\n                'june',\n                'july',\n                'august',\n                'september',\n                'october',\n                'november',\n                'december',\n            ].forEach((string) => {\n                strings.push({\n                    key: component.key,\n                    property: 'day',\n                    string,\n                });\n            });\n            if (component.fields.day.placeholder) {\n                strings.push({\n                    key: component.key,\n                    property: 'fields.day.placeholder',\n                    string: component.fields.day.placeholder,\n                });\n            }\n            if (component.fields.month.placeholder) {\n                strings.push({\n                    key: component.key,\n                    property: 'fields.month.placeholder',\n                    string: component.fields.month.placeholder,\n                });\n            }\n            if (component.fields.year.placeholder) {\n                strings.push({\n                    key: component.key,\n                    property: 'fields.year.placeholder',\n                    string: component.fields.year.placeholder,\n                });\n            }\n        }\n        if (component.type === 'editgrid') {\n            const string = component.addAnother || 'Add Another';\n            if (component.addAnother) {\n                strings.push({\n                    key: component.key,\n                    property: 'addAnother',\n                    string,\n                });\n            }\n        }\n        if (component.type === 'select') {\n            ['loading...', 'Type to search'].forEach((string) => {\n                strings.push({\n                    key: component.key,\n                    property: 'select',\n                    string,\n                });\n            });\n        }\n    }, true);\n    return strings;\n}\nexports.getStrings = getStrings;\n// ?????????????????????????\n// questionable section\nfunction generateFormChange(type, data) {\n    let change;\n    switch (type) {\n        case 'add':\n            change = {\n                op: 'add',\n                key: data.component.key,\n                container: data.parent.key, // Parent component\n                path: data.path, // Path to container within parent component.\n                index: data.index, // Index of component in parent container.\n                component: data.component,\n            };\n            break;\n        case 'edit':\n            change = {\n                op: 'edit',\n                key: data.originalComponent.key,\n                patches: (0, fast_json_patch_1.compare)(data.originalComponent, data.component),\n            };\n            // Don't save if nothing changed.\n            if (!change.patches.length) {\n                change = null;\n            }\n            break;\n        case 'remove':\n            change = {\n                op: 'remove',\n                key: data.component.key,\n            };\n            break;\n    }\n    return change;\n}\nexports.generateFormChange = generateFormChange;\nfunction applyFormChanges(form, changes) {\n    const failed = [];\n    changes.forEach(function (change) {\n        let found = false;\n        switch (change.op) {\n            case 'add': {\n                let newComponent = change.component;\n                // Find the container to set the component in.\n                findComponent(form.components, change.container, null, function (parent) {\n                    if (!change.container) {\n                        parent = form;\n                    }\n                    // A move will first run an add so remove any existing components with matching key before inserting.\n                    findComponent(form.components, change.key, null, function (component, path) {\n                        // If found, use the existing component. (If someone else edited it, the changes would be here)\n                        newComponent = component;\n                        removeComponent(form.components, path);\n                    });\n                    found = true;\n                    const container = (0, lodash_1.get)(parent, change.path);\n                    container.splice(change.index, 0, newComponent);\n                });\n                break;\n            }\n            case 'remove':\n                findComponent(form.components, change.key, null, function (component, path) {\n                    found = true;\n                    const oldComponent = (0, lodash_1.get)(form.components, path);\n                    if (oldComponent.key !== component.key) {\n                        path.pop();\n                    }\n                    removeComponent(form.components, path);\n                });\n                break;\n            case 'edit':\n                findComponent(form.components, change.key, null, function (component, path) {\n                    found = true;\n                    try {\n                        const oldComponent = (0, lodash_1.get)(form.components, path);\n                        const newComponent = (0, fast_json_patch_1.applyPatch)(component, change.patches).newDocument;\n                        if (oldComponent.key !== newComponent.key) {\n                            path.pop();\n                        }\n                        (0, lodash_1.set)(form.components, path, newComponent);\n                    }\n                    catch (ignoreErr) {\n                        failed.push(change);\n                    }\n                });\n                break;\n            case 'move':\n                break;\n        }\n        if (!found) {\n            failed.push(change);\n        }\n    });\n    return {\n        form,\n        failed,\n    };\n}\nexports.applyFormChanges = applyFormChanges;\n/**\n * This function will find a component in a form and return the component AND THE PATH to the component in the form.\n * Path to the component is stored as an array of nested components and their indexes.The Path is being filled recursively\n * when you iterating through the nested structure.\n * If the component is not found the callback won't be called and function won't return anything.\n *\n * @param components\n * @param key\n * @param fn\n * @param path\n * @returns {*}\n */\nfunction findComponent(components, key, path, fn) {\n    if (!components)\n        return;\n    path = path || [];\n    if (!key) {\n        return fn(components);\n    }\n    components.forEach(function (component, index) {\n        const newPath = path.slice();\n        // Add an index of the component it iterates through in nested structure\n        newPath.push(index);\n        if (!component)\n            return;\n        if (component.hasOwnProperty('columns') && Array.isArray(component.columns)) {\n            newPath.push('columns');\n            component.columns.forEach(function (column, index) {\n                const colPath = newPath.slice();\n                colPath.push(index);\n                colPath.push('components');\n                findComponent(column.components, key, colPath, fn);\n            });\n        }\n        if (component.hasOwnProperty('rows') && Array.isArray(component.rows)) {\n            newPath.push('rows');\n            component.rows.forEach(function (row, index) {\n                const rowPath = newPath.slice();\n                rowPath.push(index);\n                row.forEach(function (column, index) {\n                    const colPath = rowPath.slice();\n                    colPath.push(index);\n                    colPath.push('components');\n                    findComponent(column.components, key, colPath, fn);\n                });\n            });\n        }\n        if (component.hasOwnProperty('components') && Array.isArray(component.components)) {\n            newPath.push('components');\n            findComponent(component.components, key, newPath, fn);\n        }\n        if (component.key === key) {\n            //Final callback if the component is found\n            fn(component, newPath, components);\n        }\n    });\n}\nexports.findComponent = findComponent;\nconst isCheckboxComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'checkbox';\nconst isDataGridComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'datagrid';\nconst isEditGridComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'editgrid';\nconst isAddressComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'address';\nconst isDataTableComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'datatable';\nconst hasChildComponents = (component) => (component === null || component === void 0 ? void 0 : component.components) != null;\nconst isDateTimeComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'datetime';\nconst isSelectBoxesComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'selectboxes';\nconst isTextAreaComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'textarea';\nconst isTextFieldComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'textfield';\nfunction getEmptyValue(component) {\n    switch (component.type) {\n        case 'textarea':\n        case 'textfield':\n        case 'time':\n        case 'datetime':\n        case 'day':\n            return '';\n        case 'datagrid':\n        case 'editgrid':\n            return [];\n        default:\n            return null;\n    }\n}\nexports.getEmptyValue = getEmptyValue;\nconst replaceBlanks = (value) => {\n    const nbsp = '<p>&nbsp;</p>';\n    const br = '<p><br></p>';\n    const brNbsp = '<p><br>&nbsp;</p>';\n    const regExp = new RegExp(`^${nbsp}|${nbsp}$|^${br}|${br}$|^${brNbsp}|${brNbsp}$`, 'g');\n    return typeof value === 'string' ? value.replace(regExp, '').trim() : value;\n};\nfunction trimBlanks(value) {\n    if (!value) {\n        return value;\n    }\n    if (Array.isArray(value)) {\n        value = value.map((val) => replaceBlanks(val));\n    }\n    else {\n        value = replaceBlanks(value);\n    }\n    return value;\n}\nfunction isValueEmpty(component, value) {\n    const compValueIsEmptyArray = (0, lodash_1.isArray)(value) && value.length === 1 ? (0, lodash_1.isEqual)(value[0], getEmptyValue(component)) : false;\n    return (value == null || value === '' || ((0, lodash_1.isArray)(value) && value.length === 0) || compValueIsEmptyArray);\n}\nfunction isComponentDataEmpty(component, data, path, valueCond) {\n    var _a;\n    const value = (0, lodash_1.isNil)(valueCond) ? (0, lodash_1.get)(data, path) : valueCond;\n    const addressIgnoreProperties = ['mode', 'address'];\n    if (isCheckboxComponent(component)) {\n        return isValueEmpty(component, value) || value === false;\n    }\n    else if (isAddressComponent(component)) {\n        if (Object.keys(value).length === 0) {\n            return true;\n        }\n        return !Object.values((0, lodash_1.omit)(value, addressIgnoreProperties)).some(Boolean);\n    }\n    else if (isDataGridComponent(component) ||\n        isEditGridComponent(component) ||\n        isDataTableComponent(component) ||\n        hasChildComponents(component)) {\n        if ((_a = component.components) === null || _a === void 0 ? void 0 : _a.length) {\n            let childrenEmpty = true;\n            // wrap component in an array to let eachComponentData handle introspection to child components (e.g. this will be different\n            // for data grids versus nested forms, etc.)\n            (0, eachComponentData_1.eachComponentData)([component], data, (thisComponent, data, row, path) => {\n                if (component.key === thisComponent.key)\n                    return;\n                if (!isComponentDataEmpty(thisComponent, data, path)) {\n                    childrenEmpty = false;\n                }\n            });\n            return isValueEmpty(component, value) || childrenEmpty;\n        }\n        return isValueEmpty(component, value);\n    }\n    else if (isDateTimeComponent(component)) {\n        return isValueEmpty(component, value) || value.toString() === 'Invalid date';\n    }\n    else if (isSelectBoxesComponent(component)) {\n        let selectBoxEmpty = true;\n        for (const key in value) {\n            if (value[key]) {\n                selectBoxEmpty = false;\n                break;\n            }\n        }\n        return isValueEmpty(component, value) || selectBoxEmpty;\n    }\n    else if (isTextAreaComponent(component)) {\n        const isPlain = !component.wysiwyg && !component.editor;\n        return isPlain\n            ? typeof value === 'string'\n                ? isValueEmpty(component, value.trim())\n                : isValueEmpty(component, value)\n            : isValueEmpty(component, trimBlanks(value));\n    }\n    else if (isTextFieldComponent(component)) {\n        if (component.allowMultipleMasks && !!component.inputMasks && !!component.inputMasks.length) {\n            return (isValueEmpty(component, value) ||\n                (component.multiple ? value.length === 0 : !value.maskName || !value.value));\n        }\n        return isValueEmpty(component, value === null || value === void 0 ? void 0 : value.toString().trim());\n    }\n    return isValueEmpty(component, value);\n}\nexports.isComponentDataEmpty = isComponentDataEmpty;\n/**\n * Returns the template keys inside the template code.\n * @param {string} template - The template to get the keys from.\n * @returns {Array<string>} - The keys inside the template.\n */\nfunction getItemTemplateKeys(template) {\n    const templateKeys = [];\n    if (!template) {\n        return templateKeys;\n    }\n    const keys = template.match(/({{\\s*(.*?)\\s*}})/g);\n    if (keys) {\n        keys.forEach((key) => {\n            const propKey = key.match(/{{\\s*item\\.(.*?)\\s*}}/);\n            if (propKey && propKey.length > 1) {\n                templateKeys.push(propKey[1]);\n            }\n        });\n    }\n    return templateKeys;\n}\nexports.getItemTemplateKeys = getItemTemplateKeys;\n/**\n * Returns if the component is a select resource with an object for its value.\n * @param {Component} comp - The component to check.\n * @returns {boolean} - TRUE if the component is a select resource with an object for its value; FALSE otherwise.\n */\nfunction isSelectResourceWithObjectValue(comp = {}) {\n    const { reference, dataSrc, valueProperty } = comp;\n    return reference || (dataSrc === 'resource' && (!valueProperty || valueProperty === 'data'));\n}\nexports.isSelectResourceWithObjectValue = isSelectResourceWithObjectValue;\n/**\n * Compares real select resource value with expected value in condition.\n * @param {any} value - current value of selectcomponent.\n * @param {any} comparedValue - expocted value of select component.\n * @param {SelectComponent} conditionComponent - select component on which the condtion is based.\n * @returns {boolean} - TRUE if the select component current value is equal to the expected value; FALSE otherwise.\n */\nfunction compareSelectResourceWithObjectTypeValues(value, comparedValue, conditionComponent) {\n    if (!value || !(0, lodash_1.isPlainObject)(value)) {\n        return false;\n    }\n    const { template, valueProperty } = conditionComponent;\n    if (valueProperty === 'data') {\n        value = { data: value };\n        comparedValue = { data: comparedValue };\n    }\n    return (0, lodash_1.every)(getItemTemplateKeys(template) || [], (k) => (0, lodash_1.isEqual)((0, lodash_1.get)(value, k), (0, lodash_1.get)(comparedValue, k)));\n}\nexports.compareSelectResourceWithObjectTypeValues = compareSelectResourceWithObjectTypeValues;\nfunction getComponentErrorField(component, context) {\n    const toInterpolate = component.errorLabel || component.label || component.placeholder || component.key;\n    return Evaluator_1.Evaluator.interpolate(toInterpolate, context);\n}\nexports.getComponentErrorField = getComponentErrorField;\nfunction normalizeContext(context) {\n    const { data, paths, local } = context;\n    return paths\n        ? Object.assign(Object.assign({}, context), {\n            path: paths.localDataPath,\n            data: getComponentLocalData(paths, data, local),\n        }) : context;\n}\nexports.normalizeContext = normalizeContext;\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/utils/formUtil/index.js?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.eachComponentDataAsync = exports.eachComponentAsync = exports.eachComponentData = exports.eachComponent = exports.normalizeContext = exports.getComponentErrorField = exports.compareSelectResourceWithObjectTypeValues = exports.isSelectResourceWithObjectValue = exports.getItemTemplateKeys = exports.isComponentDataEmpty = exports.getEmptyValue = exports.findComponent = exports.applyFormChanges = exports.generateFormChange = exports.getStrings = exports.getValue = exports.escapeRegExCharacters = exports.formatAsCurrency = exports.parseFloatExt = exports.hasCondition = exports.removeComponent = exports.findComponents = exports.searchComponents = exports.getComponent = exports.matchComponent = exports.isLayoutComponent = exports.getComponentValue = exports.getComponentData = exports.componentInfo = exports.shouldProcessComponent = exports.getComponentLocalData = exports.getContextualRowData = exports.getContextualRowPath = exports.getComponentKey = exports.getComponentFromPath = exports.getBestMatch = exports.componentMatches = exports.getStringFromComponentPath = exports.getComponentPaths = exports.componentPath = exports.resetComponentScope = exports.setComponentScope = exports.isComponentNestedDataType = exports.getModelType = exports.MODEL_TYPES_OF_KNOWN_COMPONENTS = exports.uniqueName = exports.guid = exports.flattenComponents = void 0;\nconst lodash_1 = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\nconst fast_json_patch_1 = __webpack_require__(/*! fast-json-patch */ \"./node_modules/fast-json-patch/index.mjs\");\nconst types_1 = __webpack_require__(/*! ../../types */ \"./node_modules/@formio/core/lib/types/index.js\");\nconst Evaluator_1 = __webpack_require__(/*! ../Evaluator */ \"./node_modules/@formio/core/lib/utils/Evaluator.js\");\nconst eachComponent_1 = __webpack_require__(/*! ./eachComponent */ \"./node_modules/@formio/core/lib/utils/formUtil/eachComponent.js\");\nObject.defineProperty(exports, \"eachComponent\", ({ enumerable: true, get: function () { return eachComponent_1.eachComponent; } }));\nconst eachComponentData_1 = __webpack_require__(/*! ./eachComponentData */ \"./node_modules/@formio/core/lib/utils/formUtil/eachComponentData.js\");\nObject.defineProperty(exports, \"eachComponentData\", ({ enumerable: true, get: function () { return eachComponentData_1.eachComponentData; } }));\nconst eachComponentAsync_1 = __webpack_require__(/*! ./eachComponentAsync */ \"./node_modules/@formio/core/lib/utils/formUtil/eachComponentAsync.js\");\nObject.defineProperty(exports, \"eachComponentAsync\", ({ enumerable: true, get: function () { return eachComponentAsync_1.eachComponentAsync; } }));\nconst eachComponentDataAsync_1 = __webpack_require__(/*! ./eachComponentDataAsync */ \"./node_modules/@formio/core/lib/utils/formUtil/eachComponentDataAsync.js\");\nObject.defineProperty(exports, \"eachComponentDataAsync\", ({ enumerable: true, get: function () { return eachComponentDataAsync_1.eachComponentDataAsync; } }));\n/**\n * Flatten the form components for data manipulation.\n *\n * @param {Object} components\n *   The components to iterate.\n * @param {Boolean} includeAll\n *   Whether or not to include layout components.\n *\n * @returns {Object}\n *   The flattened components map.\n */\nfunction flattenComponents(components, includeAll = false) {\n    const flattened = {};\n    (0, eachComponent_1.eachComponent)(components, (component, path) => {\n        flattened[path] = component;\n    }, includeAll);\n    return flattened;\n}\nexports.flattenComponents = flattenComponents;\nfunction guid() {\n    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {\n        const r = (Math.random() * 16) | 0;\n        const v = c === 'x' ? r : (r & 0x3) | 0x8;\n        return v.toString(16);\n    });\n}\nexports.guid = guid;\n/**\n * Make a filename guaranteed to be unique.\n * @param name\n * @param template\n * @param evalContext\n * @returns {string}\n */\nfunction uniqueName(name, template, evalContext) {\n    template = template || '{{fileName}}-{{guid}}';\n    //include guid in template anyway, to prevent overwriting issue if filename matches existing file\n    if (!template.includes('{{guid}}')) {\n        template = `${template}-{{guid}}`;\n    }\n    const parts = name.split('.');\n    let fileName = parts.slice(0, parts.length - 1).join('.');\n    const extension = parts.length > 1 ? `.${(0, lodash_1.last)(parts)}` : '';\n    //allow only 100 characters from original name to avoid issues with filename length restrictions\n    fileName = fileName.substr(0, 100);\n    evalContext = Object.assign(evalContext || {}, {\n        fileName,\n        guid: guid(),\n    });\n    //only letters, numbers, dots, dashes, underscores and spaces are allowed. Anything else will be replaced with dash\n    const uniqueName = `${Evaluator_1.Evaluator.interpolate(template, evalContext)}${extension}`.replace(/[^0-9a-zA-Z.\\-_ ]/g, '-');\n    return uniqueName;\n}\nexports.uniqueName = uniqueName;\n/**\n * Defines model types for known components.\n * For now, these will be the only model types supported by the @formio/core library.\n *\n * nestedArray: for components that store their data as an array and have nested components.\n * nestedDataArray: for components that store their data as an array and have nested components, but keeps the value of nested components inside 'data' property.\n * array: for components that store their data as an array.\n * dataObject: for components that store their data in a nested { data: {} } object.\n * object: for components that store their data in an object.\n * map: for components that store their data in a map.\n * content: for components that do not store data.\n * string: for components that store their data as a string.\n * number: for components that store their data as a number.\n * boolean: for components that store their data as a boolean.\n * none: for components that do not store data and should not be included in the submission.\n * any: for components that can store any type of data.\n *\n */\nexports.MODEL_TYPES_OF_KNOWN_COMPONENTS = {\n    nestedArray: ['datagrid', 'editgrid', 'datatable', 'dynamicWizard'],\n    nestedDataArray: ['tagpad'],\n    dataObject: ['form'],\n    object: ['container', 'address'],\n    map: ['datamap'],\n    content: ['htmlelement', 'content'],\n    string: [\n        'textfield',\n        'password',\n        'email',\n        'url',\n        'phoneNumber',\n        'day',\n        'datetime',\n        'time',\n        'signature',\n    ],\n    number: ['number', 'currency'],\n    boolean: ['checkbox', 'radio'],\n    none: ['table', 'well', 'columns', 'fieldset', 'panel', 'tabs'],\n    any: [\n        'survey',\n        'captcha',\n        'textarea',\n        'selectboxes',\n        'tags',\n        'select',\n        'hidden',\n        'button',\n        'datasource',\n        'sketchpad',\n        'reviewpage',\n        'file',\n    ],\n};\nfunction getModelType(component) {\n    // If the component JSON asserts a model type, use that.\n    if (component.modelType) {\n        return component.modelType;\n    }\n    let modelType = 'any';\n    // Otherwise, check for known component types.\n    for (const type of Object.keys(exports.MODEL_TYPES_OF_KNOWN_COMPONENTS)) {\n        if (exports.MODEL_TYPES_OF_KNOWN_COMPONENTS[type].includes(component.type)) {\n            modelType = type;\n            break;\n        }\n    }\n    // Otherwise check for components that assert no value.\n    if (modelType === 'any' && component.input === false) {\n        modelType = 'none';\n    }\n    // To speed up performance of getModelType, we will set the modelType on the component as a non-enumerable property.\n    Object.defineProperty(component, 'modelType', {\n        enumerable: false,\n        writable: true,\n        value: modelType,\n    });\n    // Otherwise default to any.\n    return modelType;\n}\nexports.getModelType = getModelType;\nfunction isComponentNestedDataType(component) {\n    return (component.tree ||\n        getModelType(component) === 'nestedArray' ||\n        getModelType(component) === 'nestedDataArray' ||\n        getModelType(component) === 'dataObject' ||\n        getModelType(component) === 'object' ||\n        getModelType(component) === 'map');\n}\nexports.isComponentNestedDataType = isComponentNestedDataType;\nfunction setComponentScope(component, name, value) {\n    if (!component) {\n        return;\n    }\n    if (!component.scope) {\n        Object.defineProperty(component, 'scope', {\n            enumerable: false,\n            configurable: true,\n            writable: true,\n            value: {},\n        });\n    }\n    Object.defineProperty(component.scope, name, {\n        enumerable: false,\n        writable: false,\n        configurable: true,\n        value,\n    });\n}\nexports.setComponentScope = setComponentScope;\nfunction resetComponentScope(component) {\n    if (component.scope) {\n        delete component.scope;\n    }\n}\nexports.resetComponentScope = resetComponentScope;\n/**\n * Return the component path provided the type of the component path.\n * @param component - The component JSON.\n * @param type - The type of path to return.\n * @returns\n */\nfunction componentPath(component, parent, parentPaths, type) {\n    if (!component) {\n        return '';\n    }\n    if (component.component) {\n        component = component.component;\n    }\n    const compModel = getModelType(component);\n    // Relative paths are only referenced from the current form.\n    const relative = type === types_1.ComponentPath.localPath ||\n        type === types_1.ComponentPath.fullLocalPath ||\n        type === types_1.ComponentPath.localDataPath;\n    // Full paths include all layout component ids in the path.\n    const fullPath = type === types_1.ComponentPath.fullPath || type === types_1.ComponentPath.fullLocalPath;\n    // See if this is a data path.\n    const dataPath = type === types_1.ComponentPath.dataPath || type === types_1.ComponentPath.localDataPath;\n    // Determine if this component should include its key.\n    const includeKey = fullPath || (!!component.type && compModel !== 'none' && compModel !== 'content');\n    // The key is provided if the component can have data or if we are fetching the full path.\n    const key = includeKey ? getComponentKey(component) : '';\n    if (!parent) {\n        // Return the key if there is no parent.\n        return key;\n    }\n    // Get the parent model type.\n    const parentModel = getModelType(parent);\n    // If there is a parent, then we only return the key if the parent is a nested form and it is a relative path.\n    if (relative && parentModel === 'dataObject') {\n        return key;\n    }\n    // Return the parent path.\n    let parentPath = (parentPaths === null || parentPaths === void 0 ? void 0 : parentPaths.hasOwnProperty(type)) ? parentPaths[type] || '' : '';\n    // For data paths (where we wish to get the path to the data), we need to ensure we append the parent\n    // paths to the end of the path so that any component within this component properly references their data.\n    if (dataPath && parentPath) {\n        if (parentModel === 'nestedArray' || parentModel === 'nestedDataArray') {\n            parentPath += `[${(parentPaths === null || parentPaths === void 0 ? void 0 : parentPaths.dataIndex) || 0}]`;\n        }\n        if (parentModel === 'dataObject' || parentModel === 'nestedDataArray') {\n            parentPath += '.data';\n        }\n    }\n    // Return the parent path with its relative component path (if applicable).\n    return parentPath ? (key ? `${parentPath}.${key}` : parentPath) : key;\n}\nexports.componentPath = componentPath;\n/**\n * This method determines a components paths provided the component JSON, the parent and the parent paths.\n * @param component\n * @param parent\n * @param parentPaths\n * @returns\n */\nfunction getComponentPaths(component, parent, parentPaths) {\n    return {\n        path: componentPath(component, parent, parentPaths, types_1.ComponentPath.path),\n        fullPath: componentPath(component, parent, parentPaths, types_1.ComponentPath.fullPath),\n        localPath: componentPath(component, parent, parentPaths, types_1.ComponentPath.localPath),\n        fullLocalPath: componentPath(component, parent, parentPaths, types_1.ComponentPath.fullLocalPath),\n        dataPath: componentPath(component, parent, parentPaths, types_1.ComponentPath.dataPath),\n        localDataPath: componentPath(component, parent, parentPaths, types_1.ComponentPath.localDataPath),\n        dataIndex: parentPaths === null || parentPaths === void 0 ? void 0 : parentPaths.dataIndex,\n    };\n}\nexports.getComponentPaths = getComponentPaths;\nfunction getStringFromComponentPath(path) {\n    if (!(0, lodash_1.isArray)(path)) {\n        return path;\n    }\n    let strPath = '';\n    path.forEach((part, i) => {\n        if ((0, lodash_1.isNumber)(part)) {\n            strPath += `[${part}]`;\n        }\n        else {\n            strPath += i === 0 ? part : `.${part}`;\n        }\n    });\n    return strPath;\n}\nexports.getStringFromComponentPath = getStringFromComponentPath;\n/**\n * Determines if a component has a match at any of the path types.\n * @param component {Component} - The component JSON to check for matches.\n * @param paths {ComponentPaths} - The current component paths object.\n * @param path {string} - Either the \"form\" or \"data\" path to see if a match occurs.\n * @param dataIndex {number | undefined} - The data index for the current component to match.\n * @param matches {Record<string, ComponentMatch | undefined>} - The current matches object.\n * @param addMatch {(type: ComponentPath | 'key', match: ComponentMatch) => ComponentMatch} - A callback function to allow modules to decorate the match object.\n */\nfunction componentMatches(component, paths, path, dataIndex, matches = {\n    path: undefined,\n    fullPath: undefined,\n    localPath: undefined,\n    dataPath: undefined,\n    localDataPath: undefined,\n    fullLocalPath: undefined,\n    key: undefined,\n}, addMatch = (type, match) => {\n    return match;\n}) {\n    let dataProperty = '';\n    if (component.type === 'selectboxes') {\n        const valuePath = new RegExp(`(\\\\.${(0, lodash_1.escapeRegExp)(component.key)})(\\\\.[^\\\\.]+)$`);\n        const pathMatches = path.match(valuePath);\n        if ((pathMatches === null || pathMatches === void 0 ? void 0 : pathMatches.length) === 3) {\n            dataProperty = pathMatches[2];\n            path = path.replace(valuePath, '$1');\n        }\n    }\n    // Get the current model type.\n    const modelType = getModelType(component);\n    const dataModel = modelType !== 'none' && modelType !== 'content';\n    [\n        types_1.ComponentPath.path,\n        types_1.ComponentPath.fullPath,\n        types_1.ComponentPath.localPath,\n        types_1.ComponentPath.fullLocalPath,\n        types_1.ComponentPath.dataPath,\n        types_1.ComponentPath.localDataPath,\n    ].forEach((type) => {\n        const dataPath = type === types_1.ComponentPath.dataPath || type === types_1.ComponentPath.localDataPath;\n        if (paths[type] === path) {\n            const currentMatch = matches[type];\n            const currentModelType = (currentMatch === null || currentMatch === void 0 ? void 0 : currentMatch.component)\n                ? getModelType(currentMatch.component)\n                : 'none';\n            const currentDataModel = currentModelType !== 'none' && currentModelType !== 'content';\n            if (!currentMatch ||\n                (dataPath && dataModel && currentDataModel) || // Replace the current match if this is a dataPath and both are dataModels.\n                (!dataPath && dataIndex === paths.dataIndex) // Replace the current match if this is not a dataPath and the indexes are the same.\n            ) {\n                if (dataPath) {\n                    const dataPaths = {\n                        dataPath: paths.dataPath || '',\n                        localDataPath: paths.localDataPath || '',\n                    };\n                    if (dataProperty) {\n                        dataPaths.dataPath += dataProperty;\n                        dataPaths.localDataPath += dataProperty;\n                    }\n                    matches[type] = addMatch(type, {\n                        component,\n                        paths: Object.assign(Object.assign({}, paths), dataPaths),\n                    });\n                }\n                else {\n                    matches[type] = addMatch(type, { component, paths });\n                }\n            }\n        }\n    });\n    if (!matches.key && component.key === path) {\n        matches.key = addMatch('key', { component, paths });\n    }\n}\nexports.componentMatches = componentMatches;\nfunction getBestMatch(matches) {\n    if (matches.dataPath) {\n        return matches.dataPath;\n    }\n    if (matches.localDataPath) {\n        return matches.localDataPath;\n    }\n    if (matches.fullPath) {\n        return matches.fullPath;\n    }\n    if (matches.path) {\n        return matches.path;\n    }\n    if (matches.fullLocalPath) {\n        return matches.fullLocalPath;\n    }\n    if (matches.localPath) {\n        return matches.localPath;\n    }\n    if (matches.key) {\n        return matches.key;\n    }\n    return undefined;\n}\nexports.getBestMatch = getBestMatch;\n/**\n * This method performs a fuzzy search for a component within a form provided a number of different\n * paths to search.\n */\nfunction getComponentFromPath(components, path, data, dataIndex, includeAll = false) {\n    const matches = {\n        path: undefined,\n        fullPath: undefined,\n        localPath: undefined,\n        fullLocalPath: undefined,\n        dataPath: undefined,\n        localDataPath: undefined,\n        key: undefined,\n    };\n    if (data) {\n        (0, eachComponentData_1.eachComponentData)(components, data, (component, data, row, compPath, comps, index, parent, paths) => {\n            componentMatches(component, paths || {}, path, dataIndex, matches);\n        }, includeAll);\n    }\n    else {\n        (0, eachComponent_1.eachComponent)(components, (component, compPath, componentComponents, compParent, paths) => {\n            componentMatches(component, paths || {}, path, dataIndex, matches);\n        }, includeAll);\n    }\n    return getBestMatch(matches);\n}\nexports.getComponentFromPath = getComponentFromPath;\n/**\n * Provided a component, this will return the \"data\" key for that component in the contextual data\n * object.\n *\n * @param component\n * @returns\n */\nfunction getComponentKey(component) {\n    if (!component) {\n        return '';\n    }\n    if (component.type === 'checkbox' &&\n        component.inputType === 'radio' &&\n        component.name) {\n        return component.name;\n    }\n    return component.key;\n}\nexports.getComponentKey = getComponentKey;\nfunction getContextualRowPath(component, paths, local) {\n    if (!paths) {\n        return '';\n    }\n    const dataPath = local ? paths.localDataPath : paths.dataPath;\n    return (dataPath === null || dataPath === void 0 ? void 0 : dataPath.replace(new RegExp(`.?${(0, lodash_1.escapeRegExp)(getComponentKey(component))}$`), '')) || '';\n}\nexports.getContextualRowPath = getContextualRowPath;\nfunction getContextualRowData(component, data, paths, local) {\n    const rowPath = getContextualRowPath(component, paths, local);\n    return rowPath ? (0, lodash_1.get)(data, rowPath, null) : data;\n}\nexports.getContextualRowData = getContextualRowData;\nfunction getComponentLocalData(paths, data, local) {\n    var _a;\n    if (local) {\n        return data;\n    }\n    const parentPath = ((_a = paths.dataPath) === null || _a === void 0 ? void 0 : _a.replace(new RegExp(`.?${(0, lodash_1.escapeRegExp)(paths.localDataPath)}$`), '')) || '';\n    return parentPath ? (0, lodash_1.get)(data, parentPath, null) : data;\n}\nexports.getComponentLocalData = getComponentLocalData;\nfunction shouldProcessComponent(comp, row, value) {\n    var _a;\n    if (getModelType(comp) === 'dataObject') {\n        const noReferenceAttached = (value === null || value === void 0 ? void 0 : value._id) ? (0, lodash_1.isEmpty)(value.data) && !(0, lodash_1.has)(value, 'form') : false;\n        const shouldBeCleared = (!comp.hasOwnProperty('clearOnHide') || comp.clearOnHide) &&\n            (comp.hidden || ((_a = comp.scope) === null || _a === void 0 ? void 0 : _a.conditionallyHidden));\n        const shouldSkipProcessingNestedFormData = noReferenceAttached || shouldBeCleared;\n        if (shouldSkipProcessingNestedFormData) {\n            return false;\n        }\n    }\n    return true;\n}\nexports.shouldProcessComponent = shouldProcessComponent;\nfunction componentInfo(component) {\n    const hasColumns = component.columns && Array.isArray(component.columns);\n    const hasRows = component.rows && Array.isArray(component.rows);\n    const hasComps = component.components && Array.isArray(component.components);\n    const isContent = getModelType(component) === 'content';\n    const isLayout = getModelType(component) === 'none';\n    const isInput = !component.hasOwnProperty('input') || !!component.input;\n    return {\n        hasColumns,\n        hasRows,\n        hasComps,\n        layout: hasColumns || hasRows || (hasComps && !isInput) || isLayout || isContent,\n        iterable: hasColumns || hasRows || hasComps || isContent,\n    };\n}\nexports.componentInfo = componentInfo;\n// Provided components, data, and a key, this will return the components data.\nfunction getComponentData(components, data, path) {\n    const compData = { component: null, data: null };\n    (0, eachComponentData_1.eachComponentData)(components, data, (component, data, row, compPath) => {\n        if (compPath === path) {\n            compData.component = component;\n            compData.data = row;\n            return true;\n        }\n    });\n    return compData;\n}\nexports.getComponentData = getComponentData;\nfunction getComponentValue(form, data, path, dataIndex, local) {\n    var _a, _b;\n    const match = getComponentFromPath((form === null || form === void 0 ? void 0 : form.components) || [], path, data, dataIndex);\n    if (!match) {\n        // Fall back to get the value from the data object.\n        return (0, lodash_1.get)(data, path, undefined);\n    }\n    if (local) {\n        return ((_a = match === null || match === void 0 ? void 0 : match.paths) === null || _a === void 0 ? void 0 : _a.localDataPath) ? (0, lodash_1.get)(data, match.paths.localDataPath, undefined) : null;\n    }\n    return ((_b = match === null || match === void 0 ? void 0 : match.paths) === null || _b === void 0 ? void 0 : _b.dataPath) ? (0, lodash_1.get)(data, match.paths.dataPath, undefined) : null;\n}\nexports.getComponentValue = getComponentValue;\n/**\n * Determine if a component is a layout component or not.\n *\n * @param {Object} component\n *   The component to check.\n *\n * @returns {Boolean}\n *   Whether or not the component is a layout component.\n */\nfunction isLayoutComponent(component) {\n    return Boolean((component.columns &&\n        Array.isArray(component.columns)) ||\n        (component.rows && Array.isArray(component.rows)) ||\n        (component.components &&\n            Array.isArray(component.components)));\n}\nexports.isLayoutComponent = isLayoutComponent;\n/**\n * Matches if a component matches the query.\n *\n * @param component\n * @param query\n * @return {boolean}\n */\nfunction matchComponent(component, query, paths) {\n    if ((0, lodash_1.isString)(query)) {\n        return component.key === query || (paths === null || paths === void 0 ? void 0 : paths.localPath) === query || (paths === null || paths === void 0 ? void 0 : paths.path) === query;\n    }\n    else {\n        let matches = false;\n        (0, lodash_1.forOwn)(query, (value, key) => {\n            matches = (0, lodash_1.get)(component, key) === value;\n            if (!matches) {\n                return false;\n            }\n        });\n        return matches;\n    }\n}\nexports.matchComponent = matchComponent;\n/**\n * Get a component by its path.\n *\n * @param {Object} components - The components to iterate.\n * @param {String|Object} path - The key of the component to get, or a query of the component to search.\n * @param {boolean} includeAll - Whether or not to include layout components.\n * @returns {Component} - The component that matches the given key, or undefined if not found.\n */\nfunction getComponent(components, path, includeAll = true, dataIndex) {\n    var _a;\n    return (_a = getComponentFromPath(components, path, undefined, dataIndex, includeAll)) === null || _a === void 0 ? void 0 : _a.component;\n}\nexports.getComponent = getComponent;\n/**\n * Finds a component provided a query of properties of that component.\n *\n * @param components\n * @param query\n * @return {*}\n */\nfunction searchComponents(components, query) {\n    const results = [];\n    (0, eachComponent_1.eachComponent)(components, (component, compPath, components, parent, compPaths) => {\n        if (matchComponent(component, query, compPaths)) {\n            results.push(component);\n        }\n    }, true);\n    return results;\n}\nexports.searchComponents = searchComponents;\n/**\n * Deprecated version of findComponents. Renamed to searchComponents.\n * @param {import('@formio/core').Component[]} components - The components to find components within.\n * @param {object} query - The query to use when searching for the components.\n * @returns {import('@formio/core').Component[]} - The result of the component that is found.\n */\nfunction findComponents(components, query) {\n    console.warn('formio.js/utils findComponents is deprecated. Use searchComponents instead.');\n    return searchComponents(components, query);\n}\nexports.findComponents = findComponents;\n/**\n * Remove a component by path.\n *\n * @param components\n * @param path\n */\nfunction removeComponent(components, path) {\n    // @ts-expect-error - I'm not sure why we're using `pop` here if it's a string\n    const index = path.pop();\n    if (path.length !== 0) {\n        components = (0, lodash_1.get)(components, path);\n    }\n    components.splice(index, 1);\n}\nexports.removeComponent = removeComponent;\n/**\n * Returns if this component has a conditional statement.\n *\n * @param component - The component JSON schema.\n *\n * @returns {boolean} - TRUE - This component has a conditional, FALSE - No conditional provided.\n */\nfunction hasCondition(component) {\n    return Boolean(component.customConditional ||\n        (component.conditional &&\n            (component.conditional.when ||\n                component.conditional.json ||\n                (component.conditional.conjunction &&\n                    (0, lodash_1.isBoolean)(component.conditional.show) &&\n                    !(0, lodash_1.isEmpty)(component.conditional.conditions)))));\n}\nexports.hasCondition = hasCondition;\n/**\n * Extension of standard #parseFloat(value) function, that also clears input string.\n *\n * @param {any} value\n *   The value to parse.\n *\n * @returns {Number}\n *   Parsed value.\n */\nfunction parseFloatExt(value) {\n    return parseFloat((0, lodash_1.isString)(value) ? value.replace(/[^\\de.+-]/gi, '') : value);\n}\nexports.parseFloatExt = parseFloatExt;\n/**\n * Formats provided value in way how Currency component uses it.\n *\n * @param {any} value\n *   The value to format.\n *\n * @returns {String}\n *   Value formatted for Currency component.\n */\nfunction formatAsCurrency(value) {\n    const parsedValue = parseFloatExt(value);\n    if (isNaN(parsedValue)) {\n        return '';\n    }\n    const parts = (0, lodash_1.round)(parsedValue, 2).toString().split('.');\n    parts[0] = (0, lodash_1.chunk)(Array.from(parts[0]).reverse(), 3)\n        .reverse()\n        .map((part) => part.reverse().join(''))\n        .join(',');\n    parts[1] = (0, lodash_1.pad)(parts[1], 2, '0');\n    return parts.join('.');\n}\nexports.formatAsCurrency = formatAsCurrency;\n/**\n * Escapes RegEx characters in provided String value.\n *\n * @param {String} value\n *   String for escaping RegEx characters.\n * @returns {string}\n *   String with escaped RegEx characters.\n */\nfunction escapeRegExCharacters(value) {\n    return value.replace(/[-[\\]/{}()*+?.\\\\^$|]/g, '\\\\$&');\n}\nexports.escapeRegExCharacters = escapeRegExCharacters;\n/**\n * Get the value for a component key, in the given submission.\n *\n * @param {Object} submission\n *   A submission object to search.\n * @param {String} key\n *   A for components API key to search for.\n */\nfunction getValue(submission, key) {\n    const search = (data) => {\n        if ((0, lodash_1.isPlainObject)(data)) {\n            if ((0, lodash_1.has)(data, key)) {\n                return (0, lodash_1.get)(data, key);\n            }\n            let value = null;\n            (0, lodash_1.forOwn)(data, (prop) => {\n                const result = search(prop);\n                if (!(0, lodash_1.isNil)(result)) {\n                    value = result;\n                    return false;\n                }\n            });\n            return value;\n        }\n        else {\n            return null;\n        }\n    };\n    return search(submission.data);\n}\nexports.getValue = getValue;\n/**\n * Iterate over all components in a form and get string values for translation.\n * @param form\n */\nfunction getStrings(form) {\n    const properties = [\n        'label',\n        'title',\n        'legend',\n        'tooltip',\n        'description',\n        'placeholder',\n        'prefix',\n        'suffix',\n        'errorLabel',\n        'content',\n        'html',\n    ];\n    const strings = [];\n    (0, eachComponent_1.eachComponent)(form.components, (component) => {\n        properties.forEach((property) => {\n            if (component.hasOwnProperty(property) && component[property]) {\n                strings.push({\n                    key: component.key,\n                    type: component.type,\n                    property,\n                    string: component[property],\n                });\n            }\n        });\n        if ((!component.dataSrc || component.dataSrc === 'values') &&\n            component.hasOwnProperty('values') &&\n            Array.isArray(component.values) &&\n            component.values.length) {\n            component.values.forEach((value, index) => {\n                strings.push({\n                    key: component.key,\n                    property: `value[${index}].label`,\n                    string: component.values[index].label,\n                });\n            });\n        }\n        // Hard coded values from Day component\n        if (component.type === 'day') {\n            [\n                'day',\n                'month',\n                'year',\n                'Day',\n                'Month',\n                'Year',\n                'january',\n                'february',\n                'march',\n                'april',\n                'may',\n                'june',\n                'july',\n                'august',\n                'september',\n                'october',\n                'november',\n                'december',\n            ].forEach((string) => {\n                strings.push({\n                    key: component.key,\n                    property: 'day',\n                    string,\n                });\n            });\n            if (component.fields.day.placeholder) {\n                strings.push({\n                    key: component.key,\n                    property: 'fields.day.placeholder',\n                    string: component.fields.day.placeholder,\n                });\n            }\n            if (component.fields.month.placeholder) {\n                strings.push({\n                    key: component.key,\n                    property: 'fields.month.placeholder',\n                    string: component.fields.month.placeholder,\n                });\n            }\n            if (component.fields.year.placeholder) {\n                strings.push({\n                    key: component.key,\n                    property: 'fields.year.placeholder',\n                    string: component.fields.year.placeholder,\n                });\n            }\n        }\n        if (component.type === 'editgrid') {\n            const string = component.addAnother || 'Add Another';\n            if (component.addAnother) {\n                strings.push({\n                    key: component.key,\n                    property: 'addAnother',\n                    string,\n                });\n            }\n        }\n        if (component.type === 'select') {\n            ['loading...', 'Type to search'].forEach((string) => {\n                strings.push({\n                    key: component.key,\n                    property: 'select',\n                    string,\n                });\n            });\n        }\n    }, true);\n    return strings;\n}\nexports.getStrings = getStrings;\n// ?????????????????????????\n// questionable section\nfunction generateFormChange(type, data) {\n    let change;\n    switch (type) {\n        case 'add':\n            change = {\n                op: 'add',\n                key: data.component.key,\n                container: data.parent.key, // Parent component\n                path: data.path, // Path to container within parent component.\n                index: data.index, // Index of component in parent container.\n                component: data.component,\n            };\n            break;\n        case 'edit':\n            change = {\n                op: 'edit',\n                key: data.originalComponent.key,\n                patches: (0, fast_json_patch_1.compare)(data.originalComponent, data.component),\n            };\n            // Don't save if nothing changed.\n            if (!change.patches.length) {\n                change = null;\n            }\n            break;\n        case 'remove':\n            change = {\n                op: 'remove',\n                key: data.component.key,\n            };\n            break;\n    }\n    return change;\n}\nexports.generateFormChange = generateFormChange;\nfunction applyFormChanges(form, changes) {\n    const failed = [];\n    changes.forEach(function (change) {\n        let found = false;\n        switch (change.op) {\n            case 'add': {\n                let newComponent = change.component;\n                // Find the container to set the component in.\n                findComponent(form.components, change.container, null, function (parent) {\n                    if (!change.container) {\n                        parent = form;\n                    }\n                    // A move will first run an add so remove any existing components with matching key before inserting.\n                    findComponent(form.components, change.key, null, function (component, path) {\n                        // If found, use the existing component. (If someone else edited it, the changes would be here)\n                        newComponent = component;\n                        removeComponent(form.components, path);\n                    });\n                    found = true;\n                    const container = (0, lodash_1.get)(parent, change.path);\n                    container.splice(change.index, 0, newComponent);\n                });\n                break;\n            }\n            case 'remove':\n                findComponent(form.components, change.key, null, function (component, path) {\n                    found = true;\n                    const oldComponent = (0, lodash_1.get)(form.components, path);\n                    if (oldComponent.key !== component.key) {\n                        path.pop();\n                    }\n                    removeComponent(form.components, path);\n                });\n                break;\n            case 'edit':\n                findComponent(form.components, change.key, null, function (component, path) {\n                    found = true;\n                    try {\n                        const oldComponent = (0, lodash_1.get)(form.components, path);\n                        const newComponent = (0, fast_json_patch_1.applyPatch)(component, change.patches).newDocument;\n                        if (oldComponent.key !== newComponent.key) {\n                            path.pop();\n                        }\n                        (0, lodash_1.set)(form.components, path, newComponent);\n                    }\n                    catch (ignoreErr) {\n                        failed.push(change);\n                    }\n                });\n                break;\n            case 'move':\n                break;\n        }\n        if (!found) {\n            failed.push(change);\n        }\n    });\n    return {\n        form,\n        failed,\n    };\n}\nexports.applyFormChanges = applyFormChanges;\n/**\n * This function will find a component in a form and return the component AND THE PATH to the component in the form.\n * Path to the component is stored as an array of nested components and their indexes.The Path is being filled recursively\n * when you iterating through the nested structure.\n * If the component is not found the callback won't be called and function won't return anything.\n *\n * @param components\n * @param key\n * @param fn\n * @param path\n * @returns {*}\n */\nfunction findComponent(components, key, path, fn) {\n    if (!components)\n        return;\n    path = path || [];\n    if (!key) {\n        return fn(components);\n    }\n    components.forEach(function (component, index) {\n        const newPath = path.slice();\n        // Add an index of the component it iterates through in nested structure\n        newPath.push(index);\n        if (!component)\n            return;\n        if (component.hasOwnProperty('columns') && Array.isArray(component.columns)) {\n            newPath.push('columns');\n            component.columns.forEach(function (column, index) {\n                const colPath = newPath.slice();\n                colPath.push(index);\n                colPath.push('components');\n                findComponent(column.components, key, colPath, fn);\n            });\n        }\n        if (component.hasOwnProperty('rows') && Array.isArray(component.rows)) {\n            newPath.push('rows');\n            component.rows.forEach(function (row, index) {\n                const rowPath = newPath.slice();\n                rowPath.push(index);\n                row.forEach(function (column, index) {\n                    const colPath = rowPath.slice();\n                    colPath.push(index);\n                    colPath.push('components');\n                    findComponent(column.components, key, colPath, fn);\n                });\n            });\n        }\n        if (component.hasOwnProperty('components') && Array.isArray(component.components)) {\n            newPath.push('components');\n            findComponent(component.components, key, newPath, fn);\n        }\n        if (component.key === key) {\n            //Final callback if the component is found\n            fn(component, newPath, components);\n        }\n    });\n}\nexports.findComponent = findComponent;\nconst isCheckboxComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'checkbox';\nconst isDataGridComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'datagrid';\nconst isEditGridComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'editgrid';\nconst isAddressComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'address';\nconst isDataTableComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'datatable';\nconst hasChildComponents = (component) => (component === null || component === void 0 ? void 0 : component.components) != null;\nconst isDateTimeComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'datetime';\nconst isSelectBoxesComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'selectboxes';\nconst isTextAreaComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'textarea';\nconst isTextFieldComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'textfield';\nfunction getEmptyValue(component) {\n    switch (component.type) {\n        case 'textarea':\n        case 'textfield':\n        case 'time':\n        case 'datetime':\n        case 'day':\n            return '';\n        case 'datagrid':\n        case 'editgrid':\n            return [];\n        default:\n            return null;\n    }\n}\nexports.getEmptyValue = getEmptyValue;\nconst replaceBlanks = (value) => {\n    const nbsp = '<p>&nbsp;</p>';\n    const br = '<p><br></p>';\n    const brNbsp = '<p><br>&nbsp;</p>';\n    const regExp = new RegExp(`^${nbsp}|${nbsp}$|^${br}|${br}$|^${brNbsp}|${brNbsp}$`, 'g');\n    return typeof value === 'string' ? value.replace(regExp, '').trim() : value;\n};\nfunction trimBlanks(value) {\n    if (!value) {\n        return value;\n    }\n    if (Array.isArray(value)) {\n        value = value.map((val) => replaceBlanks(val));\n    }\n    else {\n        value = replaceBlanks(value);\n    }\n    return value;\n}\nfunction isValueEmpty(component, value) {\n    const compValueIsEmptyArray = (0, lodash_1.isArray)(value) && value.length === 1 ? (0, lodash_1.isEqual)(value[0], getEmptyValue(component)) : false;\n    return (value == null || value === '' || ((0, lodash_1.isArray)(value) && value.length === 0) || compValueIsEmptyArray);\n}\nfunction isComponentDataEmpty(component, data, path, valueCond) {\n    var _a;\n    const value = (0, lodash_1.isNil)(valueCond) ? (0, lodash_1.get)(data, path) : valueCond;\n    const addressIgnoreProperties = ['mode', 'address'];\n    if (isCheckboxComponent(component)) {\n        return isValueEmpty(component, value) || value === false;\n    }\n    else if (isAddressComponent(component)) {\n        if (Object.keys(value).length === 0) {\n            return true;\n        }\n        return !Object.values((0, lodash_1.omit)(value, addressIgnoreProperties)).some(Boolean);\n    }\n    else if (isDataGridComponent(component) ||\n        isEditGridComponent(component) ||\n        isDataTableComponent(component) ||\n        hasChildComponents(component)) {\n        if ((_a = component.components) === null || _a === void 0 ? void 0 : _a.length) {\n            let childrenEmpty = true;\n            // wrap component in an array to let eachComponentData handle introspection to child components (e.g. this will be different\n            // for data grids versus nested forms, etc.)\n            (0, eachComponentData_1.eachComponentData)([component], data, (thisComponent, data, row, path) => {\n                if (component.key === thisComponent.key)\n                    return;\n                if (!isComponentDataEmpty(thisComponent, data, path)) {\n                    childrenEmpty = false;\n                }\n            });\n            return isValueEmpty(component, value) || childrenEmpty;\n        }\n        return isValueEmpty(component, value);\n    }\n    else if (isDateTimeComponent(component)) {\n        return isValueEmpty(component, value) || value.toString() === 'Invalid date';\n    }\n    else if (isSelectBoxesComponent(component)) {\n        let selectBoxEmpty = true;\n        for (const key in value) {\n            if (value[key]) {\n                selectBoxEmpty = false;\n                break;\n            }\n        }\n        return isValueEmpty(component, value) || selectBoxEmpty;\n    }\n    else if (isTextAreaComponent(component)) {\n        const isPlain = !component.wysiwyg && !component.editor;\n        return isPlain\n            ? typeof value === 'string'\n                ? isValueEmpty(component, value.trim())\n                : isValueEmpty(component, value)\n            : isValueEmpty(component, trimBlanks(value));\n    }\n    else if (isTextFieldComponent(component)) {\n        if (component.allowMultipleMasks && !!component.inputMasks && !!component.inputMasks.length) {\n            return (isValueEmpty(component, value) ||\n                (component.multiple ? value.length === 0 : !value.maskName || !value.value));\n        }\n        return isValueEmpty(component, value === null || value === void 0 ? void 0 : value.toString().trim());\n    }\n    return isValueEmpty(component, value);\n}\nexports.isComponentDataEmpty = isComponentDataEmpty;\n/**\n * Returns the template keys inside the template code.\n * @param {string} template - The template to get the keys from.\n * @returns {Array<string>} - The keys inside the template.\n */\nfunction getItemTemplateKeys(template) {\n    const templateKeys = [];\n    if (!template) {\n        return templateKeys;\n    }\n    const keys = template.match(/({{\\s*(.*?)\\s*}})/g);\n    if (keys) {\n        keys.forEach((key) => {\n            const propKey = key.match(/{{\\s*item\\.(.*?)\\s*}}/);\n            if (propKey && propKey.length > 1) {\n                templateKeys.push(propKey[1]);\n            }\n        });\n    }\n    return templateKeys;\n}\nexports.getItemTemplateKeys = getItemTemplateKeys;\n/**\n * Returns if the component is a select resource with an object for its value.\n * @param {Component} comp - The component to check.\n * @returns {boolean} - TRUE if the component is a select resource with an object for its value; FALSE otherwise.\n */\nfunction isSelectResourceWithObjectValue(comp = {}) {\n    const { reference, dataSrc, valueProperty } = comp;\n    return reference || (dataSrc === 'resource' && (!valueProperty || valueProperty === 'data'));\n}\nexports.isSelectResourceWithObjectValue = isSelectResourceWithObjectValue;\n/**\n * Compares real select resource value with expected value in condition.\n * @param {any} value - current value of selectcomponent.\n * @param {any} comparedValue - expocted value of select component.\n * @param {SelectComponent} conditionComponent - select component on which the condtion is based.\n * @returns {boolean} - TRUE if the select component current value is equal to the expected value; FALSE otherwise.\n */\nfunction compareSelectResourceWithObjectTypeValues(value, comparedValue, conditionComponent) {\n    if (!value || !(0, lodash_1.isPlainObject)(value)) {\n        return false;\n    }\n    const { template, valueProperty } = conditionComponent;\n    if (valueProperty === 'data') {\n        value = { data: value };\n        comparedValue = { data: comparedValue };\n    }\n    return (0, lodash_1.every)(getItemTemplateKeys(template) || [], (k) => (0, lodash_1.isEqual)((0, lodash_1.get)(value, k), (0, lodash_1.get)(comparedValue, k)));\n}\nexports.compareSelectResourceWithObjectTypeValues = compareSelectResourceWithObjectTypeValues;\nfunction getComponentErrorField(component, context) {\n    const toInterpolate = component.errorLabel || component.label || component.placeholder || component.key;\n    return Evaluator_1.Evaluator.interpolate(toInterpolate, context);\n}\nexports.getComponentErrorField = getComponentErrorField;\nfunction normalizeContext(context) {\n    const { data, paths, local } = context;\n    return paths\n        ? Object.assign(Object.assign({}, context), {\n            path: paths.localDataPath,\n            data: getComponentLocalData(paths, data, local),\n        }) : context;\n}\nexports.normalizeContext = normalizeContext;\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/utils/formUtil/index.js?");
 
 /***/ }),
 
@@ -2860,7 +2860,7 @@ eval("!function(t,i){ true?module.exports=i():0}(this,(function(){\"use strict\"
 /***/ (function(module) {
 
 "use strict";
-eval("/*! @license DOMPurify 3.2.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.3/LICENSE */\n\n\n\nconst {\n  entries,\n  setPrototypeOf,\n  isFrozen,\n  getPrototypeOf,\n  getOwnPropertyDescriptor\n} = Object;\nlet {\n  freeze,\n  seal,\n  create\n} = Object; // eslint-disable-line import/no-mutable-exports\nlet {\n  apply,\n  construct\n} = typeof Reflect !== 'undefined' && Reflect;\nif (!freeze) {\n  freeze = function freeze(x) {\n    return x;\n  };\n}\nif (!seal) {\n  seal = function seal(x) {\n    return x;\n  };\n}\nif (!apply) {\n  apply = function apply(fun, thisValue, args) {\n    return fun.apply(thisValue, args);\n  };\n}\nif (!construct) {\n  construct = function construct(Func, args) {\n    return new Func(...args);\n  };\n}\nconst arrayForEach = unapply(Array.prototype.forEach);\nconst arrayPop = unapply(Array.prototype.pop);\nconst arrayPush = unapply(Array.prototype.push);\nconst stringToLowerCase = unapply(String.prototype.toLowerCase);\nconst stringToString = unapply(String.prototype.toString);\nconst stringMatch = unapply(String.prototype.match);\nconst stringReplace = unapply(String.prototype.replace);\nconst stringIndexOf = unapply(String.prototype.indexOf);\nconst stringTrim = unapply(String.prototype.trim);\nconst objectHasOwnProperty = unapply(Object.prototype.hasOwnProperty);\nconst regExpTest = unapply(RegExp.prototype.test);\nconst typeErrorCreate = unconstruct(TypeError);\n/**\n * Creates a new function that calls the given function with a specified thisArg and arguments.\n *\n * @param func - The function to be wrapped and called.\n * @returns A new function that calls the given function with a specified thisArg and arguments.\n */\nfunction unapply(func) {\n  return function (thisArg) {\n    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n      args[_key - 1] = arguments[_key];\n    }\n    return apply(func, thisArg, args);\n  };\n}\n/**\n * Creates a new function that constructs an instance of the given constructor function with the provided arguments.\n *\n * @param func - The constructor function to be wrapped and called.\n * @returns A new function that constructs an instance of the given constructor function with the provided arguments.\n */\nfunction unconstruct(func) {\n  return function () {\n    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n      args[_key2] = arguments[_key2];\n    }\n    return construct(func, args);\n  };\n}\n/**\n * Add properties to a lookup table\n *\n * @param set - The set to which elements will be added.\n * @param array - The array containing elements to be added to the set.\n * @param transformCaseFunc - An optional function to transform the case of each element before adding to the set.\n * @returns The modified set with added elements.\n */\nfunction addToSet(set, array) {\n  let transformCaseFunc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : stringToLowerCase;\n  if (setPrototypeOf) {\n    // Make 'in' and truthy checks like Boolean(set.constructor)\n    // independent of any properties defined on Object.prototype.\n    // Prevent prototype setters from intercepting set as a this value.\n    setPrototypeOf(set, null);\n  }\n  let l = array.length;\n  while (l--) {\n    let element = array[l];\n    if (typeof element === 'string') {\n      const lcElement = transformCaseFunc(element);\n      if (lcElement !== element) {\n        // Config presets (e.g. tags.js, attrs.js) are immutable.\n        if (!isFrozen(array)) {\n          array[l] = lcElement;\n        }\n        element = lcElement;\n      }\n    }\n    set[element] = true;\n  }\n  return set;\n}\n/**\n * Clean up an array to harden against CSPP\n *\n * @param array - The array to be cleaned.\n * @returns The cleaned version of the array\n */\nfunction cleanArray(array) {\n  for (let index = 0; index < array.length; index++) {\n    const isPropertyExist = objectHasOwnProperty(array, index);\n    if (!isPropertyExist) {\n      array[index] = null;\n    }\n  }\n  return array;\n}\n/**\n * Shallow clone an object\n *\n * @param object - The object to be cloned.\n * @returns A new object that copies the original.\n */\nfunction clone(object) {\n  const newObject = create(null);\n  for (const [property, value] of entries(object)) {\n    const isPropertyExist = objectHasOwnProperty(object, property);\n    if (isPropertyExist) {\n      if (Array.isArray(value)) {\n        newObject[property] = cleanArray(value);\n      } else if (value && typeof value === 'object' && value.constructor === Object) {\n        newObject[property] = clone(value);\n      } else {\n        newObject[property] = value;\n      }\n    }\n  }\n  return newObject;\n}\n/**\n * This method automatically checks if the prop is function or getter and behaves accordingly.\n *\n * @param object - The object to look up the getter function in its prototype chain.\n * @param prop - The property name for which to find the getter function.\n * @returns The getter function found in the prototype chain or a fallback function.\n */\nfunction lookupGetter(object, prop) {\n  while (object !== null) {\n    const desc = getOwnPropertyDescriptor(object, prop);\n    if (desc) {\n      if (desc.get) {\n        return unapply(desc.get);\n      }\n      if (typeof desc.value === 'function') {\n        return unapply(desc.value);\n      }\n    }\n    object = getPrototypeOf(object);\n  }\n  function fallbackValue() {\n    return null;\n  }\n  return fallbackValue;\n}\n\nconst html$1 = freeze(['a', 'abbr', 'acronym', 'address', 'area', 'article', 'aside', 'audio', 'b', 'bdi', 'bdo', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meter', 'nav', 'nobr', 'ol', 'optgroup', 'option', 'output', 'p', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'section', 'select', 'shadow', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr']);\nconst svg$1 = freeze(['svg', 'a', 'altglyph', 'altglyphdef', 'altglyphitem', 'animatecolor', 'animatemotion', 'animatetransform', 'circle', 'clippath', 'defs', 'desc', 'ellipse', 'filter', 'font', 'g', 'glyph', 'glyphref', 'hkern', 'image', 'line', 'lineargradient', 'marker', 'mask', 'metadata', 'mpath', 'path', 'pattern', 'polygon', 'polyline', 'radialgradient', 'rect', 'stop', 'style', 'switch', 'symbol', 'text', 'textpath', 'title', 'tref', 'tspan', 'view', 'vkern']);\nconst svgFilters = freeze(['feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence']);\n// List of SVG elements that are disallowed by default.\n// We still need to know them so that we can do namespace\n// checks properly in case one wants to add them to\n// allow-list.\nconst svgDisallowed = freeze(['animate', 'color-profile', 'cursor', 'discard', 'font-face', 'font-face-format', 'font-face-name', 'font-face-src', 'font-face-uri', 'foreignobject', 'hatch', 'hatchpath', 'mesh', 'meshgradient', 'meshpatch', 'meshrow', 'missing-glyph', 'script', 'set', 'solidcolor', 'unknown', 'use']);\nconst mathMl$1 = freeze(['math', 'menclose', 'merror', 'mfenced', 'mfrac', 'mglyph', 'mi', 'mlabeledtr', 'mmultiscripts', 'mn', 'mo', 'mover', 'mpadded', 'mphantom', 'mroot', 'mrow', 'ms', 'mspace', 'msqrt', 'mstyle', 'msub', 'msup', 'msubsup', 'mtable', 'mtd', 'mtext', 'mtr', 'munder', 'munderover', 'mprescripts']);\n// Similarly to SVG, we want to know all MathML elements,\n// even those that we disallow by default.\nconst mathMlDisallowed = freeze(['maction', 'maligngroup', 'malignmark', 'mlongdiv', 'mscarries', 'mscarry', 'msgroup', 'mstack', 'msline', 'msrow', 'semantics', 'annotation', 'annotation-xml', 'mprescripts', 'none']);\nconst text = freeze(['#text']);\n\nconst html = freeze(['accept', 'action', 'align', 'alt', 'autocapitalize', 'autocomplete', 'autopictureinpicture', 'autoplay', 'background', 'bgcolor', 'border', 'capture', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'clear', 'color', 'cols', 'colspan', 'controls', 'controlslist', 'coords', 'crossorigin', 'datetime', 'decoding', 'default', 'dir', 'disabled', 'disablepictureinpicture', 'disableremoteplayback', 'download', 'draggable', 'enctype', 'enterkeyhint', 'face', 'for', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'id', 'inputmode', 'integrity', 'ismap', 'kind', 'label', 'lang', 'list', 'loading', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'minlength', 'multiple', 'muted', 'name', 'nonce', 'noshade', 'novalidate', 'nowrap', 'open', 'optimum', 'pattern', 'placeholder', 'playsinline', 'popover', 'popovertarget', 'popovertargetaction', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'rev', 'reversed', 'role', 'rows', 'rowspan', 'spellcheck', 'scope', 'selected', 'shape', 'size', 'sizes', 'span', 'srclang', 'start', 'src', 'srcset', 'step', 'style', 'summary', 'tabindex', 'title', 'translate', 'type', 'usemap', 'valign', 'value', 'width', 'wrap', 'xmlns', 'slot']);\nconst svg = freeze(['accent-height', 'accumulate', 'additive', 'alignment-baseline', 'amplitude', 'ascent', 'attributename', 'attributetype', 'azimuth', 'basefrequency', 'baseline-shift', 'begin', 'bias', 'by', 'class', 'clip', 'clippathunits', 'clip-path', 'clip-rule', 'color', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'cx', 'cy', 'd', 'dx', 'dy', 'diffuseconstant', 'direction', 'display', 'divisor', 'dur', 'edgemode', 'elevation', 'end', 'exponent', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'filterunits', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'fx', 'fy', 'g1', 'g2', 'glyph-name', 'glyphref', 'gradientunits', 'gradienttransform', 'height', 'href', 'id', 'image-rendering', 'in', 'in2', 'intercept', 'k', 'k1', 'k2', 'k3', 'k4', 'kerning', 'keypoints', 'keysplines', 'keytimes', 'lang', 'lengthadjust', 'letter-spacing', 'kernelmatrix', 'kernelunitlength', 'lighting-color', 'local', 'marker-end', 'marker-mid', 'marker-start', 'markerheight', 'markerunits', 'markerwidth', 'maskcontentunits', 'maskunits', 'max', 'mask', 'media', 'method', 'mode', 'min', 'name', 'numoctaves', 'offset', 'operator', 'opacity', 'order', 'orient', 'orientation', 'origin', 'overflow', 'paint-order', 'path', 'pathlength', 'patterncontentunits', 'patterntransform', 'patternunits', 'points', 'preservealpha', 'preserveaspectratio', 'primitiveunits', 'r', 'rx', 'ry', 'radius', 'refx', 'refy', 'repeatcount', 'repeatdur', 'restart', 'result', 'rotate', 'scale', 'seed', 'shape-rendering', 'slope', 'specularconstant', 'specularexponent', 'spreadmethod', 'startoffset', 'stddeviation', 'stitchtiles', 'stop-color', 'stop-opacity', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke', 'stroke-width', 'style', 'surfacescale', 'systemlanguage', 'tabindex', 'tablevalues', 'targetx', 'targety', 'transform', 'transform-origin', 'text-anchor', 'text-decoration', 'text-rendering', 'textlength', 'type', 'u1', 'u2', 'unicode', 'values', 'viewbox', 'visibility', 'version', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'width', 'word-spacing', 'wrap', 'writing-mode', 'xchannelselector', 'ychannelselector', 'x', 'x1', 'x2', 'xmlns', 'y', 'y1', 'y2', 'z', 'zoomandpan']);\nconst mathMl = freeze(['accent', 'accentunder', 'align', 'bevelled', 'close', 'columnsalign', 'columnlines', 'columnspan', 'denomalign', 'depth', 'dir', 'display', 'displaystyle', 'encoding', 'fence', 'frame', 'height', 'href', 'id', 'largeop', 'length', 'linethickness', 'lspace', 'lquote', 'mathbackground', 'mathcolor', 'mathsize', 'mathvariant', 'maxsize', 'minsize', 'movablelimits', 'notation', 'numalign', 'open', 'rowalign', 'rowlines', 'rowspacing', 'rowspan', 'rspace', 'rquote', 'scriptlevel', 'scriptminsize', 'scriptsizemultiplier', 'selection', 'separator', 'separators', 'stretchy', 'subscriptshift', 'supscriptshift', 'symmetric', 'voffset', 'width', 'xmlns']);\nconst xml = freeze(['xlink:href', 'xml:id', 'xlink:title', 'xml:space', 'xmlns:xlink']);\n\n// eslint-disable-next-line unicorn/better-regex\nconst MUSTACHE_EXPR = seal(/\\{\\{[\\w\\W]*|[\\w\\W]*\\}\\}/gm); // Specify template detection regex for SAFE_FOR_TEMPLATES mode\nconst ERB_EXPR = seal(/<%[\\w\\W]*|[\\w\\W]*%>/gm);\nconst TMPLIT_EXPR = seal(/\\$\\{[\\w\\W]*}/gm); // eslint-disable-line unicorn/better-regex\nconst DATA_ATTR = seal(/^data-[\\-\\w.\\u00B7-\\uFFFF]+$/); // eslint-disable-line no-useless-escape\nconst ARIA_ATTR = seal(/^aria-[\\-\\w]+$/); // eslint-disable-line no-useless-escape\nconst IS_ALLOWED_URI = seal(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]|[a-z+.\\-]+(?:[^a-z+.\\-:]|$))/i // eslint-disable-line no-useless-escape\n);\nconst IS_SCRIPT_OR_DATA = seal(/^(?:\\w+script|data):/i);\nconst ATTR_WHITESPACE = seal(/[\\u0000-\\u0020\\u00A0\\u1680\\u180E\\u2000-\\u2029\\u205F\\u3000]/g // eslint-disable-line no-control-regex\n);\nconst DOCTYPE_NAME = seal(/^html$/i);\nconst CUSTOM_ELEMENT = seal(/^[a-z][.\\w]*(-[.\\w]+)+$/i);\n\nvar EXPRESSIONS = /*#__PURE__*/Object.freeze({\n  __proto__: null,\n  ARIA_ATTR: ARIA_ATTR,\n  ATTR_WHITESPACE: ATTR_WHITESPACE,\n  CUSTOM_ELEMENT: CUSTOM_ELEMENT,\n  DATA_ATTR: DATA_ATTR,\n  DOCTYPE_NAME: DOCTYPE_NAME,\n  ERB_EXPR: ERB_EXPR,\n  IS_ALLOWED_URI: IS_ALLOWED_URI,\n  IS_SCRIPT_OR_DATA: IS_SCRIPT_OR_DATA,\n  MUSTACHE_EXPR: MUSTACHE_EXPR,\n  TMPLIT_EXPR: TMPLIT_EXPR\n});\n\n/* eslint-disable @typescript-eslint/indent */\n// https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType\nconst NODE_TYPE = {\n  element: 1,\n  attribute: 2,\n  text: 3,\n  cdataSection: 4,\n  entityReference: 5,\n  // Deprecated\n  entityNode: 6,\n  // Deprecated\n  progressingInstruction: 7,\n  comment: 8,\n  document: 9,\n  documentType: 10,\n  documentFragment: 11,\n  notation: 12 // Deprecated\n};\nconst getGlobal = function getGlobal() {\n  return typeof window === 'undefined' ? null : window;\n};\n/**\n * Creates a no-op policy for internal use only.\n * Don't export this function outside this module!\n * @param trustedTypes The policy factory.\n * @param purifyHostElement The Script element used to load DOMPurify (to determine policy name suffix).\n * @return The policy created (or null, if Trusted Types\n * are not supported or creating the policy failed).\n */\nconst _createTrustedTypesPolicy = function _createTrustedTypesPolicy(trustedTypes, purifyHostElement) {\n  if (typeof trustedTypes !== 'object' || typeof trustedTypes.createPolicy !== 'function') {\n    return null;\n  }\n  // Allow the callers to control the unique policy name\n  // by adding a data-tt-policy-suffix to the script element with the DOMPurify.\n  // Policy creation with duplicate names throws in Trusted Types.\n  let suffix = null;\n  const ATTR_NAME = 'data-tt-policy-suffix';\n  if (purifyHostElement && purifyHostElement.hasAttribute(ATTR_NAME)) {\n    suffix = purifyHostElement.getAttribute(ATTR_NAME);\n  }\n  const policyName = 'dompurify' + (suffix ? '#' + suffix : '');\n  try {\n    return trustedTypes.createPolicy(policyName, {\n      createHTML(html) {\n        return html;\n      },\n      createScriptURL(scriptUrl) {\n        return scriptUrl;\n      }\n    });\n  } catch (_) {\n    // Policy creation failed (most likely another DOMPurify script has\n    // already run). Skip creating the policy, as this will only cause errors\n    // if TT are enforced.\n    console.warn('TrustedTypes policy ' + policyName + ' could not be created.');\n    return null;\n  }\n};\nconst _createHooksMap = function _createHooksMap() {\n  return {\n    afterSanitizeAttributes: [],\n    afterSanitizeElements: [],\n    afterSanitizeShadowDOM: [],\n    beforeSanitizeAttributes: [],\n    beforeSanitizeElements: [],\n    beforeSanitizeShadowDOM: [],\n    uponSanitizeAttribute: [],\n    uponSanitizeElement: [],\n    uponSanitizeShadowNode: []\n  };\n};\nfunction createDOMPurify() {\n  let window = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getGlobal();\n  const DOMPurify = root => createDOMPurify(root);\n  DOMPurify.version = '3.2.3';\n  DOMPurify.removed = [];\n  if (!window || !window.document || window.document.nodeType !== NODE_TYPE.document) {\n    // Not running in a browser, provide a factory function\n    // so that you can pass your own Window\n    DOMPurify.isSupported = false;\n    return DOMPurify;\n  }\n  let {\n    document\n  } = window;\n  const originalDocument = document;\n  const currentScript = originalDocument.currentScript;\n  const {\n    DocumentFragment,\n    HTMLTemplateElement,\n    Node,\n    Element,\n    NodeFilter,\n    NamedNodeMap = window.NamedNodeMap || window.MozNamedAttrMap,\n    HTMLFormElement,\n    DOMParser,\n    trustedTypes\n  } = window;\n  const ElementPrototype = Element.prototype;\n  const cloneNode = lookupGetter(ElementPrototype, 'cloneNode');\n  const remove = lookupGetter(ElementPrototype, 'remove');\n  const getNextSibling = lookupGetter(ElementPrototype, 'nextSibling');\n  const getChildNodes = lookupGetter(ElementPrototype, 'childNodes');\n  const getParentNode = lookupGetter(ElementPrototype, 'parentNode');\n  // As per issue #47, the web-components registry is inherited by a\n  // new document created via createHTMLDocument. As per the spec\n  // (http://w3c.github.io/webcomponents/spec/custom/#creating-and-passing-registries)\n  // a new empty registry is used when creating a template contents owner\n  // document, so we use that as our parent document to ensure nothing\n  // is inherited.\n  if (typeof HTMLTemplateElement === 'function') {\n    const template = document.createElement('template');\n    if (template.content && template.content.ownerDocument) {\n      document = template.content.ownerDocument;\n    }\n  }\n  let trustedTypesPolicy;\n  let emptyHTML = '';\n  const {\n    implementation,\n    createNodeIterator,\n    createDocumentFragment,\n    getElementsByTagName\n  } = document;\n  const {\n    importNode\n  } = originalDocument;\n  let hooks = _createHooksMap();\n  /**\n   * Expose whether this browser supports running the full DOMPurify.\n   */\n  DOMPurify.isSupported = typeof entries === 'function' && typeof getParentNode === 'function' && implementation && implementation.createHTMLDocument !== undefined;\n  const {\n    MUSTACHE_EXPR,\n    ERB_EXPR,\n    TMPLIT_EXPR,\n    DATA_ATTR,\n    ARIA_ATTR,\n    IS_SCRIPT_OR_DATA,\n    ATTR_WHITESPACE,\n    CUSTOM_ELEMENT\n  } = EXPRESSIONS;\n  let {\n    IS_ALLOWED_URI: IS_ALLOWED_URI$1\n  } = EXPRESSIONS;\n  /**\n   * We consider the elements and attributes below to be safe. Ideally\n   * don't add any new ones but feel free to remove unwanted ones.\n   */\n  /* allowed element names */\n  let ALLOWED_TAGS = null;\n  const DEFAULT_ALLOWED_TAGS = addToSet({}, [...html$1, ...svg$1, ...svgFilters, ...mathMl$1, ...text]);\n  /* Allowed attribute names */\n  let ALLOWED_ATTR = null;\n  const DEFAULT_ALLOWED_ATTR = addToSet({}, [...html, ...svg, ...mathMl, ...xml]);\n  /*\n   * Configure how DOMPurify should handle custom elements and their attributes as well as customized built-in elements.\n   * @property {RegExp|Function|null} tagNameCheck one of [null, regexPattern, predicate]. Default: `null` (disallow any custom elements)\n   * @property {RegExp|Function|null} attributeNameCheck one of [null, regexPattern, predicate]. Default: `null` (disallow any attributes not on the allow list)\n   * @property {boolean} allowCustomizedBuiltInElements allow custom elements derived from built-ins if they pass CUSTOM_ELEMENT_HANDLING.tagNameCheck. Default: `false`.\n   */\n  let CUSTOM_ELEMENT_HANDLING = Object.seal(create(null, {\n    tagNameCheck: {\n      writable: true,\n      configurable: false,\n      enumerable: true,\n      value: null\n    },\n    attributeNameCheck: {\n      writable: true,\n      configurable: false,\n      enumerable: true,\n      value: null\n    },\n    allowCustomizedBuiltInElements: {\n      writable: true,\n      configurable: false,\n      enumerable: true,\n      value: false\n    }\n  }));\n  /* Explicitly forbidden tags (overrides ALLOWED_TAGS/ADD_TAGS) */\n  let FORBID_TAGS = null;\n  /* Explicitly forbidden attributes (overrides ALLOWED_ATTR/ADD_ATTR) */\n  let FORBID_ATTR = null;\n  /* Decide if ARIA attributes are okay */\n  let ALLOW_ARIA_ATTR = true;\n  /* Decide if custom data attributes are okay */\n  let ALLOW_DATA_ATTR = true;\n  /* Decide if unknown protocols are okay */\n  let ALLOW_UNKNOWN_PROTOCOLS = false;\n  /* Decide if self-closing tags in attributes are allowed.\n   * Usually removed due to a mXSS issue in jQuery 3.0 */\n  let ALLOW_SELF_CLOSE_IN_ATTR = true;\n  /* Output should be safe for common template engines.\n   * This means, DOMPurify removes data attributes, mustaches and ERB\n   */\n  let SAFE_FOR_TEMPLATES = false;\n  /* Output should be safe even for XML used within HTML and alike.\n   * This means, DOMPurify removes comments when containing risky content.\n   */\n  let SAFE_FOR_XML = true;\n  /* Decide if document with <html>... should be returned */\n  let WHOLE_DOCUMENT = false;\n  /* Track whether config is already set on this instance of DOMPurify. */\n  let SET_CONFIG = false;\n  /* Decide if all elements (e.g. style, script) must be children of\n   * document.body. By default, browsers might move them to document.head */\n  let FORCE_BODY = false;\n  /* Decide if a DOM `HTMLBodyElement` should be returned, instead of a html\n   * string (or a TrustedHTML object if Trusted Types are supported).\n   * If `WHOLE_DOCUMENT` is enabled a `HTMLHtmlElement` will be returned instead\n   */\n  let RETURN_DOM = false;\n  /* Decide if a DOM `DocumentFragment` should be returned, instead of a html\n   * string  (or a TrustedHTML object if Trusted Types are supported) */\n  let RETURN_DOM_FRAGMENT = false;\n  /* Try to return a Trusted Type object instead of a string, return a string in\n   * case Trusted Types are not supported  */\n  let RETURN_TRUSTED_TYPE = false;\n  /* Output should be free from DOM clobbering attacks?\n   * This sanitizes markups named with colliding, clobberable built-in DOM APIs.\n   */\n  let SANITIZE_DOM = true;\n  /* Achieve full DOM Clobbering protection by isolating the namespace of named\n   * properties and JS variables, mitigating attacks that abuse the HTML/DOM spec rules.\n   *\n   * HTML/DOM spec rules that enable DOM Clobbering:\n   *   - Named Access on Window (§7.3.3)\n   *   - DOM Tree Accessors (§3.1.5)\n   *   - Form Element Parent-Child Relations (§4.10.3)\n   *   - Iframe srcdoc / Nested WindowProxies (§4.8.5)\n   *   - HTMLCollection (§4.2.10.2)\n   *\n   * Namespace isolation is implemented by prefixing `id` and `name` attributes\n   * with a constant string, i.e., `user-content-`\n   */\n  let SANITIZE_NAMED_PROPS = false;\n  const SANITIZE_NAMED_PROPS_PREFIX = 'user-content-';\n  /* Keep element content when removing element? */\n  let KEEP_CONTENT = true;\n  /* If a `Node` is passed to sanitize(), then performs sanitization in-place instead\n   * of importing it into a new Document and returning a sanitized copy */\n  let IN_PLACE = false;\n  /* Allow usage of profiles like html, svg and mathMl */\n  let USE_PROFILES = {};\n  /* Tags to ignore content of when KEEP_CONTENT is true */\n  let FORBID_CONTENTS = null;\n  const DEFAULT_FORBID_CONTENTS = addToSet({}, ['annotation-xml', 'audio', 'colgroup', 'desc', 'foreignobject', 'head', 'iframe', 'math', 'mi', 'mn', 'mo', 'ms', 'mtext', 'noembed', 'noframes', 'noscript', 'plaintext', 'script', 'style', 'svg', 'template', 'thead', 'title', 'video', 'xmp']);\n  /* Tags that are safe for data: URIs */\n  let DATA_URI_TAGS = null;\n  const DEFAULT_DATA_URI_TAGS = addToSet({}, ['audio', 'video', 'img', 'source', 'image', 'track']);\n  /* Attributes safe for values like \"javascript:\" */\n  let URI_SAFE_ATTRIBUTES = null;\n  const DEFAULT_URI_SAFE_ATTRIBUTES = addToSet({}, ['alt', 'class', 'for', 'id', 'label', 'name', 'pattern', 'placeholder', 'role', 'summary', 'title', 'value', 'style', 'xmlns']);\n  const MATHML_NAMESPACE = 'http://www.w3.org/1998/Math/MathML';\n  const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';\n  const HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';\n  /* Document namespace */\n  let NAMESPACE = HTML_NAMESPACE;\n  let IS_EMPTY_INPUT = false;\n  /* Allowed XHTML+XML namespaces */\n  let ALLOWED_NAMESPACES = null;\n  const DEFAULT_ALLOWED_NAMESPACES = addToSet({}, [MATHML_NAMESPACE, SVG_NAMESPACE, HTML_NAMESPACE], stringToString);\n  let MATHML_TEXT_INTEGRATION_POINTS = addToSet({}, ['mi', 'mo', 'mn', 'ms', 'mtext']);\n  let HTML_INTEGRATION_POINTS = addToSet({}, ['annotation-xml']);\n  // Certain elements are allowed in both SVG and HTML\n  // namespace. We need to specify them explicitly\n  // so that they don't get erroneously deleted from\n  // HTML namespace.\n  const COMMON_SVG_AND_HTML_ELEMENTS = addToSet({}, ['title', 'style', 'font', 'a', 'script']);\n  /* Parsing of strict XHTML documents */\n  let PARSER_MEDIA_TYPE = null;\n  const SUPPORTED_PARSER_MEDIA_TYPES = ['application/xhtml+xml', 'text/html'];\n  const DEFAULT_PARSER_MEDIA_TYPE = 'text/html';\n  let transformCaseFunc = null;\n  /* Keep a reference to config to pass to hooks */\n  let CONFIG = null;\n  /* Ideally, do not touch anything below this line */\n  /* ______________________________________________ */\n  const formElement = document.createElement('form');\n  const isRegexOrFunction = function isRegexOrFunction(testValue) {\n    return testValue instanceof RegExp || testValue instanceof Function;\n  };\n  /**\n   * _parseConfig\n   *\n   * @param cfg optional config literal\n   */\n  // eslint-disable-next-line complexity\n  const _parseConfig = function _parseConfig() {\n    let cfg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n    if (CONFIG && CONFIG === cfg) {\n      return;\n    }\n    /* Shield configuration object from tampering */\n    if (!cfg || typeof cfg !== 'object') {\n      cfg = {};\n    }\n    /* Shield configuration object from prototype pollution */\n    cfg = clone(cfg);\n    PARSER_MEDIA_TYPE =\n    // eslint-disable-next-line unicorn/prefer-includes\n    SUPPORTED_PARSER_MEDIA_TYPES.indexOf(cfg.PARSER_MEDIA_TYPE) === -1 ? DEFAULT_PARSER_MEDIA_TYPE : cfg.PARSER_MEDIA_TYPE;\n    // HTML tags and attributes are not case-sensitive, converting to lowercase. Keeping XHTML as is.\n    transformCaseFunc = PARSER_MEDIA_TYPE === 'application/xhtml+xml' ? stringToString : stringToLowerCase;\n    /* Set configuration parameters */\n    ALLOWED_TAGS = objectHasOwnProperty(cfg, 'ALLOWED_TAGS') ? addToSet({}, cfg.ALLOWED_TAGS, transformCaseFunc) : DEFAULT_ALLOWED_TAGS;\n    ALLOWED_ATTR = objectHasOwnProperty(cfg, 'ALLOWED_ATTR') ? addToSet({}, cfg.ALLOWED_ATTR, transformCaseFunc) : DEFAULT_ALLOWED_ATTR;\n    ALLOWED_NAMESPACES = objectHasOwnProperty(cfg, 'ALLOWED_NAMESPACES') ? addToSet({}, cfg.ALLOWED_NAMESPACES, stringToString) : DEFAULT_ALLOWED_NAMESPACES;\n    URI_SAFE_ATTRIBUTES = objectHasOwnProperty(cfg, 'ADD_URI_SAFE_ATTR') ? addToSet(clone(DEFAULT_URI_SAFE_ATTRIBUTES), cfg.ADD_URI_SAFE_ATTR, transformCaseFunc) : DEFAULT_URI_SAFE_ATTRIBUTES;\n    DATA_URI_TAGS = objectHasOwnProperty(cfg, 'ADD_DATA_URI_TAGS') ? addToSet(clone(DEFAULT_DATA_URI_TAGS), cfg.ADD_DATA_URI_TAGS, transformCaseFunc) : DEFAULT_DATA_URI_TAGS;\n    FORBID_CONTENTS = objectHasOwnProperty(cfg, 'FORBID_CONTENTS') ? addToSet({}, cfg.FORBID_CONTENTS, transformCaseFunc) : DEFAULT_FORBID_CONTENTS;\n    FORBID_TAGS = objectHasOwnProperty(cfg, 'FORBID_TAGS') ? addToSet({}, cfg.FORBID_TAGS, transformCaseFunc) : {};\n    FORBID_ATTR = objectHasOwnProperty(cfg, 'FORBID_ATTR') ? addToSet({}, cfg.FORBID_ATTR, transformCaseFunc) : {};\n    USE_PROFILES = objectHasOwnProperty(cfg, 'USE_PROFILES') ? cfg.USE_PROFILES : false;\n    ALLOW_ARIA_ATTR = cfg.ALLOW_ARIA_ATTR !== false; // Default true\n    ALLOW_DATA_ATTR = cfg.ALLOW_DATA_ATTR !== false; // Default true\n    ALLOW_UNKNOWN_PROTOCOLS = cfg.ALLOW_UNKNOWN_PROTOCOLS || false; // Default false\n    ALLOW_SELF_CLOSE_IN_ATTR = cfg.ALLOW_SELF_CLOSE_IN_ATTR !== false; // Default true\n    SAFE_FOR_TEMPLATES = cfg.SAFE_FOR_TEMPLATES || false; // Default false\n    SAFE_FOR_XML = cfg.SAFE_FOR_XML !== false; // Default true\n    WHOLE_DOCUMENT = cfg.WHOLE_DOCUMENT || false; // Default false\n    RETURN_DOM = cfg.RETURN_DOM || false; // Default false\n    RETURN_DOM_FRAGMENT = cfg.RETURN_DOM_FRAGMENT || false; // Default false\n    RETURN_TRUSTED_TYPE = cfg.RETURN_TRUSTED_TYPE || false; // Default false\n    FORCE_BODY = cfg.FORCE_BODY || false; // Default false\n    SANITIZE_DOM = cfg.SANITIZE_DOM !== false; // Default true\n    SANITIZE_NAMED_PROPS = cfg.SANITIZE_NAMED_PROPS || false; // Default false\n    KEEP_CONTENT = cfg.KEEP_CONTENT !== false; // Default true\n    IN_PLACE = cfg.IN_PLACE || false; // Default false\n    IS_ALLOWED_URI$1 = cfg.ALLOWED_URI_REGEXP || IS_ALLOWED_URI;\n    NAMESPACE = cfg.NAMESPACE || HTML_NAMESPACE;\n    MATHML_TEXT_INTEGRATION_POINTS = cfg.MATHML_TEXT_INTEGRATION_POINTS || MATHML_TEXT_INTEGRATION_POINTS;\n    HTML_INTEGRATION_POINTS = cfg.HTML_INTEGRATION_POINTS || HTML_INTEGRATION_POINTS;\n    CUSTOM_ELEMENT_HANDLING = cfg.CUSTOM_ELEMENT_HANDLING || {};\n    if (cfg.CUSTOM_ELEMENT_HANDLING && isRegexOrFunction(cfg.CUSTOM_ELEMENT_HANDLING.tagNameCheck)) {\n      CUSTOM_ELEMENT_HANDLING.tagNameCheck = cfg.CUSTOM_ELEMENT_HANDLING.tagNameCheck;\n    }\n    if (cfg.CUSTOM_ELEMENT_HANDLING && isRegexOrFunction(cfg.CUSTOM_ELEMENT_HANDLING.attributeNameCheck)) {\n      CUSTOM_ELEMENT_HANDLING.attributeNameCheck = cfg.CUSTOM_ELEMENT_HANDLING.attributeNameCheck;\n    }\n    if (cfg.CUSTOM_ELEMENT_HANDLING && typeof cfg.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements === 'boolean') {\n      CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements = cfg.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements;\n    }\n    if (SAFE_FOR_TEMPLATES) {\n      ALLOW_DATA_ATTR = false;\n    }\n    if (RETURN_DOM_FRAGMENT) {\n      RETURN_DOM = true;\n    }\n    /* Parse profile info */\n    if (USE_PROFILES) {\n      ALLOWED_TAGS = addToSet({}, text);\n      ALLOWED_ATTR = [];\n      if (USE_PROFILES.html === true) {\n        addToSet(ALLOWED_TAGS, html$1);\n        addToSet(ALLOWED_ATTR, html);\n      }\n      if (USE_PROFILES.svg === true) {\n        addToSet(ALLOWED_TAGS, svg$1);\n        addToSet(ALLOWED_ATTR, svg);\n        addToSet(ALLOWED_ATTR, xml);\n      }\n      if (USE_PROFILES.svgFilters === true) {\n        addToSet(ALLOWED_TAGS, svgFilters);\n        addToSet(ALLOWED_ATTR, svg);\n        addToSet(ALLOWED_ATTR, xml);\n      }\n      if (USE_PROFILES.mathMl === true) {\n        addToSet(ALLOWED_TAGS, mathMl$1);\n        addToSet(ALLOWED_ATTR, mathMl);\n        addToSet(ALLOWED_ATTR, xml);\n      }\n    }\n    /* Merge configuration parameters */\n    if (cfg.ADD_TAGS) {\n      if (ALLOWED_TAGS === DEFAULT_ALLOWED_TAGS) {\n        ALLOWED_TAGS = clone(ALLOWED_TAGS);\n      }\n      addToSet(ALLOWED_TAGS, cfg.ADD_TAGS, transformCaseFunc);\n    }\n    if (cfg.ADD_ATTR) {\n      if (ALLOWED_ATTR === DEFAULT_ALLOWED_ATTR) {\n        ALLOWED_ATTR = clone(ALLOWED_ATTR);\n      }\n      addToSet(ALLOWED_ATTR, cfg.ADD_ATTR, transformCaseFunc);\n    }\n    if (cfg.ADD_URI_SAFE_ATTR) {\n      addToSet(URI_SAFE_ATTRIBUTES, cfg.ADD_URI_SAFE_ATTR, transformCaseFunc);\n    }\n    if (cfg.FORBID_CONTENTS) {\n      if (FORBID_CONTENTS === DEFAULT_FORBID_CONTENTS) {\n        FORBID_CONTENTS = clone(FORBID_CONTENTS);\n      }\n      addToSet(FORBID_CONTENTS, cfg.FORBID_CONTENTS, transformCaseFunc);\n    }\n    /* Add #text in case KEEP_CONTENT is set to true */\n    if (KEEP_CONTENT) {\n      ALLOWED_TAGS['#text'] = true;\n    }\n    /* Add html, head and body to ALLOWED_TAGS in case WHOLE_DOCUMENT is true */\n    if (WHOLE_DOCUMENT) {\n      addToSet(ALLOWED_TAGS, ['html', 'head', 'body']);\n    }\n    /* Add tbody to ALLOWED_TAGS in case tables are permitted, see #286, #365 */\n    if (ALLOWED_TAGS.table) {\n      addToSet(ALLOWED_TAGS, ['tbody']);\n      delete FORBID_TAGS.tbody;\n    }\n    if (cfg.TRUSTED_TYPES_POLICY) {\n      if (typeof cfg.TRUSTED_TYPES_POLICY.createHTML !== 'function') {\n        throw typeErrorCreate('TRUSTED_TYPES_POLICY configuration option must provide a \"createHTML\" hook.');\n      }\n      if (typeof cfg.TRUSTED_TYPES_POLICY.createScriptURL !== 'function') {\n        throw typeErrorCreate('TRUSTED_TYPES_POLICY configuration option must provide a \"createScriptURL\" hook.');\n      }\n      // Overwrite existing TrustedTypes policy.\n      trustedTypesPolicy = cfg.TRUSTED_TYPES_POLICY;\n      // Sign local variables required by `sanitize`.\n      emptyHTML = trustedTypesPolicy.createHTML('');\n    } else {\n      // Uninitialized policy, attempt to initialize the internal dompurify policy.\n      if (trustedTypesPolicy === undefined) {\n        trustedTypesPolicy = _createTrustedTypesPolicy(trustedTypes, currentScript);\n      }\n      // If creating the internal policy succeeded sign internal variables.\n      if (trustedTypesPolicy !== null && typeof emptyHTML === 'string') {\n        emptyHTML = trustedTypesPolicy.createHTML('');\n      }\n    }\n    // Prevent further manipulation of configuration.\n    // Not available in IE8, Safari 5, etc.\n    if (freeze) {\n      freeze(cfg);\n    }\n    CONFIG = cfg;\n  };\n  /* Keep track of all possible SVG and MathML tags\n   * so that we can perform the namespace checks\n   * correctly. */\n  const ALL_SVG_TAGS = addToSet({}, [...svg$1, ...svgFilters, ...svgDisallowed]);\n  const ALL_MATHML_TAGS = addToSet({}, [...mathMl$1, ...mathMlDisallowed]);\n  /**\n   * @param element a DOM element whose namespace is being checked\n   * @returns Return false if the element has a\n   *  namespace that a spec-compliant parser would never\n   *  return. Return true otherwise.\n   */\n  const _checkValidNamespace = function _checkValidNamespace(element) {\n    let parent = getParentNode(element);\n    // In JSDOM, if we're inside shadow DOM, then parentNode\n    // can be null. We just simulate parent in this case.\n    if (!parent || !parent.tagName) {\n      parent = {\n        namespaceURI: NAMESPACE,\n        tagName: 'template'\n      };\n    }\n    const tagName = stringToLowerCase(element.tagName);\n    const parentTagName = stringToLowerCase(parent.tagName);\n    if (!ALLOWED_NAMESPACES[element.namespaceURI]) {\n      return false;\n    }\n    if (element.namespaceURI === SVG_NAMESPACE) {\n      // The only way to switch from HTML namespace to SVG\n      // is via <svg>. If it happens via any other tag, then\n      // it should be killed.\n      if (parent.namespaceURI === HTML_NAMESPACE) {\n        return tagName === 'svg';\n      }\n      // The only way to switch from MathML to SVG is via`\n      // svg if parent is either <annotation-xml> or MathML\n      // text integration points.\n      if (parent.namespaceURI === MATHML_NAMESPACE) {\n        return tagName === 'svg' && (parentTagName === 'annotation-xml' || MATHML_TEXT_INTEGRATION_POINTS[parentTagName]);\n      }\n      // We only allow elements that are defined in SVG\n      // spec. All others are disallowed in SVG namespace.\n      return Boolean(ALL_SVG_TAGS[tagName]);\n    }\n    if (element.namespaceURI === MATHML_NAMESPACE) {\n      // The only way to switch from HTML namespace to MathML\n      // is via <math>. If it happens via any other tag, then\n      // it should be killed.\n      if (parent.namespaceURI === HTML_NAMESPACE) {\n        return tagName === 'math';\n      }\n      // The only way to switch from SVG to MathML is via\n      // <math> and HTML integration points\n      if (parent.namespaceURI === SVG_NAMESPACE) {\n        return tagName === 'math' && HTML_INTEGRATION_POINTS[parentTagName];\n      }\n      // We only allow elements that are defined in MathML\n      // spec. All others are disallowed in MathML namespace.\n      return Boolean(ALL_MATHML_TAGS[tagName]);\n    }\n    if (element.namespaceURI === HTML_NAMESPACE) {\n      // The only way to switch from SVG to HTML is via\n      // HTML integration points, and from MathML to HTML\n      // is via MathML text integration points\n      if (parent.namespaceURI === SVG_NAMESPACE && !HTML_INTEGRATION_POINTS[parentTagName]) {\n        return false;\n      }\n      if (parent.namespaceURI === MATHML_NAMESPACE && !MATHML_TEXT_INTEGRATION_POINTS[parentTagName]) {\n        return false;\n      }\n      // We disallow tags that are specific for MathML\n      // or SVG and should never appear in HTML namespace\n      return !ALL_MATHML_TAGS[tagName] && (COMMON_SVG_AND_HTML_ELEMENTS[tagName] || !ALL_SVG_TAGS[tagName]);\n    }\n    // For XHTML and XML documents that support custom namespaces\n    if (PARSER_MEDIA_TYPE === 'application/xhtml+xml' && ALLOWED_NAMESPACES[element.namespaceURI]) {\n      return true;\n    }\n    // The code should never reach this place (this means\n    // that the element somehow got namespace that is not\n    // HTML, SVG, MathML or allowed via ALLOWED_NAMESPACES).\n    // Return false just in case.\n    return false;\n  };\n  /**\n   * _forceRemove\n   *\n   * @param node a DOM node\n   */\n  const _forceRemove = function _forceRemove(node) {\n    arrayPush(DOMPurify.removed, {\n      element: node\n    });\n    try {\n      // eslint-disable-next-line unicorn/prefer-dom-node-remove\n      getParentNode(node).removeChild(node);\n    } catch (_) {\n      remove(node);\n    }\n  };\n  /**\n   * _removeAttribute\n   *\n   * @param name an Attribute name\n   * @param element a DOM node\n   */\n  const _removeAttribute = function _removeAttribute(name, element) {\n    try {\n      arrayPush(DOMPurify.removed, {\n        attribute: element.getAttributeNode(name),\n        from: element\n      });\n    } catch (_) {\n      arrayPush(DOMPurify.removed, {\n        attribute: null,\n        from: element\n      });\n    }\n    element.removeAttribute(name);\n    // We void attribute values for unremovable \"is\" attributes\n    if (name === 'is') {\n      if (RETURN_DOM || RETURN_DOM_FRAGMENT) {\n        try {\n          _forceRemove(element);\n        } catch (_) {}\n      } else {\n        try {\n          element.setAttribute(name, '');\n        } catch (_) {}\n      }\n    }\n  };\n  /**\n   * _initDocument\n   *\n   * @param dirty - a string of dirty markup\n   * @return a DOM, filled with the dirty markup\n   */\n  const _initDocument = function _initDocument(dirty) {\n    /* Create a HTML document */\n    let doc = null;\n    let leadingWhitespace = null;\n    if (FORCE_BODY) {\n      dirty = '<remove></remove>' + dirty;\n    } else {\n      /* If FORCE_BODY isn't used, leading whitespace needs to be preserved manually */\n      const matches = stringMatch(dirty, /^[\\r\\n\\t ]+/);\n      leadingWhitespace = matches && matches[0];\n    }\n    if (PARSER_MEDIA_TYPE === 'application/xhtml+xml' && NAMESPACE === HTML_NAMESPACE) {\n      // Root of XHTML doc must contain xmlns declaration (see https://www.w3.org/TR/xhtml1/normative.html#strict)\n      dirty = '<html xmlns=\"http://www.w3.org/1999/xhtml\"><head></head><body>' + dirty + '</body></html>';\n    }\n    const dirtyPayload = trustedTypesPolicy ? trustedTypesPolicy.createHTML(dirty) : dirty;\n    /*\n     * Use the DOMParser API by default, fallback later if needs be\n     * DOMParser not work for svg when has multiple root element.\n     */\n    if (NAMESPACE === HTML_NAMESPACE) {\n      try {\n        doc = new DOMParser().parseFromString(dirtyPayload, PARSER_MEDIA_TYPE);\n      } catch (_) {}\n    }\n    /* Use createHTMLDocument in case DOMParser is not available */\n    if (!doc || !doc.documentElement) {\n      doc = implementation.createDocument(NAMESPACE, 'template', null);\n      try {\n        doc.documentElement.innerHTML = IS_EMPTY_INPUT ? emptyHTML : dirtyPayload;\n      } catch (_) {\n        // Syntax error if dirtyPayload is invalid xml\n      }\n    }\n    const body = doc.body || doc.documentElement;\n    if (dirty && leadingWhitespace) {\n      body.insertBefore(document.createTextNode(leadingWhitespace), body.childNodes[0] || null);\n    }\n    /* Work on whole document or just its body */\n    if (NAMESPACE === HTML_NAMESPACE) {\n      return getElementsByTagName.call(doc, WHOLE_DOCUMENT ? 'html' : 'body')[0];\n    }\n    return WHOLE_DOCUMENT ? doc.documentElement : body;\n  };\n  /**\n   * Creates a NodeIterator object that you can use to traverse filtered lists of nodes or elements in a document.\n   *\n   * @param root The root element or node to start traversing on.\n   * @return The created NodeIterator\n   */\n  const _createNodeIterator = function _createNodeIterator(root) {\n    return createNodeIterator.call(root.ownerDocument || root, root,\n    // eslint-disable-next-line no-bitwise\n    NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT | NodeFilter.SHOW_PROCESSING_INSTRUCTION | NodeFilter.SHOW_CDATA_SECTION, null);\n  };\n  /**\n   * _isClobbered\n   *\n   * @param element element to check for clobbering attacks\n   * @return true if clobbered, false if safe\n   */\n  const _isClobbered = function _isClobbered(element) {\n    return element instanceof HTMLFormElement && (typeof element.nodeName !== 'string' || typeof element.textContent !== 'string' || typeof element.removeChild !== 'function' || !(element.attributes instanceof NamedNodeMap) || typeof element.removeAttribute !== 'function' || typeof element.setAttribute !== 'function' || typeof element.namespaceURI !== 'string' || typeof element.insertBefore !== 'function' || typeof element.hasChildNodes !== 'function');\n  };\n  /**\n   * Checks whether the given object is a DOM node.\n   *\n   * @param value object to check whether it's a DOM node\n   * @return true is object is a DOM node\n   */\n  const _isNode = function _isNode(value) {\n    return typeof Node === 'function' && value instanceof Node;\n  };\n  function _executeHooks(hooks, currentNode, data) {\n    arrayForEach(hooks, hook => {\n      hook.call(DOMPurify, currentNode, data, CONFIG);\n    });\n  }\n  /**\n   * _sanitizeElements\n   *\n   * @protect nodeName\n   * @protect textContent\n   * @protect removeChild\n   * @param currentNode to check for permission to exist\n   * @return true if node was killed, false if left alive\n   */\n  const _sanitizeElements = function _sanitizeElements(currentNode) {\n    let content = null;\n    /* Execute a hook if present */\n    _executeHooks(hooks.beforeSanitizeElements, currentNode, null);\n    /* Check if element is clobbered or can clobber */\n    if (_isClobbered(currentNode)) {\n      _forceRemove(currentNode);\n      return true;\n    }\n    /* Now let's check the element's type and name */\n    const tagName = transformCaseFunc(currentNode.nodeName);\n    /* Execute a hook if present */\n    _executeHooks(hooks.uponSanitizeElement, currentNode, {\n      tagName,\n      allowedTags: ALLOWED_TAGS\n    });\n    /* Detect mXSS attempts abusing namespace confusion */\n    if (currentNode.hasChildNodes() && !_isNode(currentNode.firstElementChild) && regExpTest(/<[/\\w]/g, currentNode.innerHTML) && regExpTest(/<[/\\w]/g, currentNode.textContent)) {\n      _forceRemove(currentNode);\n      return true;\n    }\n    /* Remove any occurrence of processing instructions */\n    if (currentNode.nodeType === NODE_TYPE.progressingInstruction) {\n      _forceRemove(currentNode);\n      return true;\n    }\n    /* Remove any kind of possibly harmful comments */\n    if (SAFE_FOR_XML && currentNode.nodeType === NODE_TYPE.comment && regExpTest(/<[/\\w]/g, currentNode.data)) {\n      _forceRemove(currentNode);\n      return true;\n    }\n    /* Remove element if anything forbids its presence */\n    if (!ALLOWED_TAGS[tagName] || FORBID_TAGS[tagName]) {\n      /* Check if we have a custom element to handle */\n      if (!FORBID_TAGS[tagName] && _isBasicCustomElement(tagName)) {\n        if (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, tagName)) {\n          return false;\n        }\n        if (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(tagName)) {\n          return false;\n        }\n      }\n      /* Keep content except for bad-listed elements */\n      if (KEEP_CONTENT && !FORBID_CONTENTS[tagName]) {\n        const parentNode = getParentNode(currentNode) || currentNode.parentNode;\n        const childNodes = getChildNodes(currentNode) || currentNode.childNodes;\n        if (childNodes && parentNode) {\n          const childCount = childNodes.length;\n          for (let i = childCount - 1; i >= 0; --i) {\n            const childClone = cloneNode(childNodes[i], true);\n            childClone.__removalCount = (currentNode.__removalCount || 0) + 1;\n            parentNode.insertBefore(childClone, getNextSibling(currentNode));\n          }\n        }\n      }\n      _forceRemove(currentNode);\n      return true;\n    }\n    /* Check whether element has a valid namespace */\n    if (currentNode instanceof Element && !_checkValidNamespace(currentNode)) {\n      _forceRemove(currentNode);\n      return true;\n    }\n    /* Make sure that older browsers don't get fallback-tag mXSS */\n    if ((tagName === 'noscript' || tagName === 'noembed' || tagName === 'noframes') && regExpTest(/<\\/no(script|embed|frames)/i, currentNode.innerHTML)) {\n      _forceRemove(currentNode);\n      return true;\n    }\n    /* Sanitize element content to be template-safe */\n    if (SAFE_FOR_TEMPLATES && currentNode.nodeType === NODE_TYPE.text) {\n      /* Get the element's text content */\n      content = currentNode.textContent;\n      arrayForEach([MUSTACHE_EXPR, ERB_EXPR, TMPLIT_EXPR], expr => {\n        content = stringReplace(content, expr, ' ');\n      });\n      if (currentNode.textContent !== content) {\n        arrayPush(DOMPurify.removed, {\n          element: currentNode.cloneNode()\n        });\n        currentNode.textContent = content;\n      }\n    }\n    /* Execute a hook if present */\n    _executeHooks(hooks.afterSanitizeElements, currentNode, null);\n    return false;\n  };\n  /**\n   * _isValidAttribute\n   *\n   * @param lcTag Lowercase tag name of containing element.\n   * @param lcName Lowercase attribute name.\n   * @param value Attribute value.\n   * @return Returns true if `value` is valid, otherwise false.\n   */\n  // eslint-disable-next-line complexity\n  const _isValidAttribute = function _isValidAttribute(lcTag, lcName, value) {\n    /* Make sure attribute cannot clobber */\n    if (SANITIZE_DOM && (lcName === 'id' || lcName === 'name') && (value in document || value in formElement)) {\n      return false;\n    }\n    /* Allow valid data-* attributes: At least one character after \"-\"\n        (https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes)\n        XML-compatible (https://html.spec.whatwg.org/multipage/infrastructure.html#xml-compatible and http://www.w3.org/TR/xml/#d0e804)\n        We don't need to check the value; it's always URI safe. */\n    if (ALLOW_DATA_ATTR && !FORBID_ATTR[lcName] && regExpTest(DATA_ATTR, lcName)) ; else if (ALLOW_ARIA_ATTR && regExpTest(ARIA_ATTR, lcName)) ; else if (!ALLOWED_ATTR[lcName] || FORBID_ATTR[lcName]) {\n      if (\n      // First condition does a very basic check if a) it's basically a valid custom element tagname AND\n      // b) if the tagName passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck\n      // and c) if the attribute name passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.attributeNameCheck\n      _isBasicCustomElement(lcTag) && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, lcTag) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(lcTag)) && (CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.attributeNameCheck, lcName) || CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.attributeNameCheck(lcName)) ||\n      // Alternative, second condition checks if it's an `is`-attribute, AND\n      // the value passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck\n      lcName === 'is' && CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, value) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(value))) ; else {\n        return false;\n      }\n      /* Check value is safe. First, is attr inert? If so, is safe */\n    } else if (URI_SAFE_ATTRIBUTES[lcName]) ; else if (regExpTest(IS_ALLOWED_URI$1, stringReplace(value, ATTR_WHITESPACE, ''))) ; else if ((lcName === 'src' || lcName === 'xlink:href' || lcName === 'href') && lcTag !== 'script' && stringIndexOf(value, 'data:') === 0 && DATA_URI_TAGS[lcTag]) ; else if (ALLOW_UNKNOWN_PROTOCOLS && !regExpTest(IS_SCRIPT_OR_DATA, stringReplace(value, ATTR_WHITESPACE, ''))) ; else if (value) {\n      return false;\n    } else ;\n    return true;\n  };\n  /**\n   * _isBasicCustomElement\n   * checks if at least one dash is included in tagName, and it's not the first char\n   * for more sophisticated checking see https://github.com/sindresorhus/validate-element-name\n   *\n   * @param tagName name of the tag of the node to sanitize\n   * @returns Returns true if the tag name meets the basic criteria for a custom element, otherwise false.\n   */\n  const _isBasicCustomElement = function _isBasicCustomElement(tagName) {\n    return tagName !== 'annotation-xml' && stringMatch(tagName, CUSTOM_ELEMENT);\n  };\n  /**\n   * _sanitizeAttributes\n   *\n   * @protect attributes\n   * @protect nodeName\n   * @protect removeAttribute\n   * @protect setAttribute\n   *\n   * @param currentNode to sanitize\n   */\n  const _sanitizeAttributes = function _sanitizeAttributes(currentNode) {\n    /* Execute a hook if present */\n    _executeHooks(hooks.beforeSanitizeAttributes, currentNode, null);\n    const {\n      attributes\n    } = currentNode;\n    /* Check if we have attributes; if not we might have a text node */\n    if (!attributes || _isClobbered(currentNode)) {\n      return;\n    }\n    const hookEvent = {\n      attrName: '',\n      attrValue: '',\n      keepAttr: true,\n      allowedAttributes: ALLOWED_ATTR,\n      forceKeepAttr: undefined\n    };\n    let l = attributes.length;\n    /* Go backwards over all attributes; safely remove bad ones */\n    while (l--) {\n      const attr = attributes[l];\n      const {\n        name,\n        namespaceURI,\n        value: attrValue\n      } = attr;\n      const lcName = transformCaseFunc(name);\n      let value = name === 'value' ? attrValue : stringTrim(attrValue);\n      /* Execute a hook if present */\n      hookEvent.attrName = lcName;\n      hookEvent.attrValue = value;\n      hookEvent.keepAttr = true;\n      hookEvent.forceKeepAttr = undefined; // Allows developers to see this is a property they can set\n      _executeHooks(hooks.uponSanitizeAttribute, currentNode, hookEvent);\n      value = hookEvent.attrValue;\n      /* Full DOM Clobbering protection via namespace isolation,\n       * Prefix id and name attributes with `user-content-`\n       */\n      if (SANITIZE_NAMED_PROPS && (lcName === 'id' || lcName === 'name')) {\n        // Remove the attribute with this value\n        _removeAttribute(name, currentNode);\n        // Prefix the value and later re-create the attribute with the sanitized value\n        value = SANITIZE_NAMED_PROPS_PREFIX + value;\n      }\n      /* Work around a security issue with comments inside attributes */\n      if (SAFE_FOR_XML && regExpTest(/((--!?|])>)|<\\/(style|title)/i, value)) {\n        _removeAttribute(name, currentNode);\n        continue;\n      }\n      /* Did the hooks approve of the attribute? */\n      if (hookEvent.forceKeepAttr) {\n        continue;\n      }\n      /* Remove attribute */\n      _removeAttribute(name, currentNode);\n      /* Did the hooks approve of the attribute? */\n      if (!hookEvent.keepAttr) {\n        continue;\n      }\n      /* Work around a security issue in jQuery 3.0 */\n      if (!ALLOW_SELF_CLOSE_IN_ATTR && regExpTest(/\\/>/i, value)) {\n        _removeAttribute(name, currentNode);\n        continue;\n      }\n      /* Sanitize attribute content to be template-safe */\n      if (SAFE_FOR_TEMPLATES) {\n        arrayForEach([MUSTACHE_EXPR, ERB_EXPR, TMPLIT_EXPR], expr => {\n          value = stringReplace(value, expr, ' ');\n        });\n      }\n      /* Is `value` valid for this attribute? */\n      const lcTag = transformCaseFunc(currentNode.nodeName);\n      if (!_isValidAttribute(lcTag, lcName, value)) {\n        continue;\n      }\n      /* Handle attributes that require Trusted Types */\n      if (trustedTypesPolicy && typeof trustedTypes === 'object' && typeof trustedTypes.getAttributeType === 'function') {\n        if (namespaceURI) ; else {\n          switch (trustedTypes.getAttributeType(lcTag, lcName)) {\n            case 'TrustedHTML':\n              {\n                value = trustedTypesPolicy.createHTML(value);\n                break;\n              }\n            case 'TrustedScriptURL':\n              {\n                value = trustedTypesPolicy.createScriptURL(value);\n                break;\n              }\n          }\n        }\n      }\n      /* Handle invalid data-* attribute set by try-catching it */\n      try {\n        if (namespaceURI) {\n          currentNode.setAttributeNS(namespaceURI, name, value);\n        } else {\n          /* Fallback to setAttribute() for browser-unrecognized namespaces e.g. \"x-schema\". */\n          currentNode.setAttribute(name, value);\n        }\n        if (_isClobbered(currentNode)) {\n          _forceRemove(currentNode);\n        } else {\n          arrayPop(DOMPurify.removed);\n        }\n      } catch (_) {}\n    }\n    /* Execute a hook if present */\n    _executeHooks(hooks.afterSanitizeAttributes, currentNode, null);\n  };\n  /**\n   * _sanitizeShadowDOM\n   *\n   * @param fragment to iterate over recursively\n   */\n  const _sanitizeShadowDOM = function _sanitizeShadowDOM(fragment) {\n    let shadowNode = null;\n    const shadowIterator = _createNodeIterator(fragment);\n    /* Execute a hook if present */\n    _executeHooks(hooks.beforeSanitizeShadowDOM, fragment, null);\n    while (shadowNode = shadowIterator.nextNode()) {\n      /* Execute a hook if present */\n      _executeHooks(hooks.uponSanitizeShadowNode, shadowNode, null);\n      /* Sanitize tags and elements */\n      _sanitizeElements(shadowNode);\n      /* Check attributes next */\n      _sanitizeAttributes(shadowNode);\n      /* Deep shadow DOM detected */\n      if (shadowNode.content instanceof DocumentFragment) {\n        _sanitizeShadowDOM(shadowNode.content);\n      }\n    }\n    /* Execute a hook if present */\n    _executeHooks(hooks.afterSanitizeShadowDOM, fragment, null);\n  };\n  // eslint-disable-next-line complexity\n  DOMPurify.sanitize = function (dirty) {\n    let cfg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n    let body = null;\n    let importedNode = null;\n    let currentNode = null;\n    let returnNode = null;\n    /* Make sure we have a string to sanitize.\n      DO NOT return early, as this will return the wrong type if\n      the user has requested a DOM object rather than a string */\n    IS_EMPTY_INPUT = !dirty;\n    if (IS_EMPTY_INPUT) {\n      dirty = '<!-->';\n    }\n    /* Stringify, in case dirty is an object */\n    if (typeof dirty !== 'string' && !_isNode(dirty)) {\n      if (typeof dirty.toString === 'function') {\n        dirty = dirty.toString();\n        if (typeof dirty !== 'string') {\n          throw typeErrorCreate('dirty is not a string, aborting');\n        }\n      } else {\n        throw typeErrorCreate('toString is not a function');\n      }\n    }\n    /* Return dirty HTML if DOMPurify cannot run */\n    if (!DOMPurify.isSupported) {\n      return dirty;\n    }\n    /* Assign config vars */\n    if (!SET_CONFIG) {\n      _parseConfig(cfg);\n    }\n    /* Clean up removed elements */\n    DOMPurify.removed = [];\n    /* Check if dirty is correctly typed for IN_PLACE */\n    if (typeof dirty === 'string') {\n      IN_PLACE = false;\n    }\n    if (IN_PLACE) {\n      /* Do some early pre-sanitization to avoid unsafe root nodes */\n      if (dirty.nodeName) {\n        const tagName = transformCaseFunc(dirty.nodeName);\n        if (!ALLOWED_TAGS[tagName] || FORBID_TAGS[tagName]) {\n          throw typeErrorCreate('root node is forbidden and cannot be sanitized in-place');\n        }\n      }\n    } else if (dirty instanceof Node) {\n      /* If dirty is a DOM element, append to an empty document to avoid\n         elements being stripped by the parser */\n      body = _initDocument('<!---->');\n      importedNode = body.ownerDocument.importNode(dirty, true);\n      if (importedNode.nodeType === NODE_TYPE.element && importedNode.nodeName === 'BODY') {\n        /* Node is already a body, use as is */\n        body = importedNode;\n      } else if (importedNode.nodeName === 'HTML') {\n        body = importedNode;\n      } else {\n        // eslint-disable-next-line unicorn/prefer-dom-node-append\n        body.appendChild(importedNode);\n      }\n    } else {\n      /* Exit directly if we have nothing to do */\n      if (!RETURN_DOM && !SAFE_FOR_TEMPLATES && !WHOLE_DOCUMENT &&\n      // eslint-disable-next-line unicorn/prefer-includes\n      dirty.indexOf('<') === -1) {\n        return trustedTypesPolicy && RETURN_TRUSTED_TYPE ? trustedTypesPolicy.createHTML(dirty) : dirty;\n      }\n      /* Initialize the document to work on */\n      body = _initDocument(dirty);\n      /* Check we have a DOM node from the data */\n      if (!body) {\n        return RETURN_DOM ? null : RETURN_TRUSTED_TYPE ? emptyHTML : '';\n      }\n    }\n    /* Remove first element node (ours) if FORCE_BODY is set */\n    if (body && FORCE_BODY) {\n      _forceRemove(body.firstChild);\n    }\n    /* Get node iterator */\n    const nodeIterator = _createNodeIterator(IN_PLACE ? dirty : body);\n    /* Now start iterating over the created document */\n    while (currentNode = nodeIterator.nextNode()) {\n      /* Sanitize tags and elements */\n      _sanitizeElements(currentNode);\n      /* Check attributes next */\n      _sanitizeAttributes(currentNode);\n      /* Shadow DOM detected, sanitize it */\n      if (currentNode.content instanceof DocumentFragment) {\n        _sanitizeShadowDOM(currentNode.content);\n      }\n    }\n    /* If we sanitized `dirty` in-place, return it. */\n    if (IN_PLACE) {\n      return dirty;\n    }\n    /* Return sanitized string or DOM */\n    if (RETURN_DOM) {\n      if (RETURN_DOM_FRAGMENT) {\n        returnNode = createDocumentFragment.call(body.ownerDocument);\n        while (body.firstChild) {\n          // eslint-disable-next-line unicorn/prefer-dom-node-append\n          returnNode.appendChild(body.firstChild);\n        }\n      } else {\n        returnNode = body;\n      }\n      if (ALLOWED_ATTR.shadowroot || ALLOWED_ATTR.shadowrootmode) {\n        /*\n          AdoptNode() is not used because internal state is not reset\n          (e.g. the past names map of a HTMLFormElement), this is safe\n          in theory but we would rather not risk another attack vector.\n          The state that is cloned by importNode() is explicitly defined\n          by the specs.\n        */\n        returnNode = importNode.call(originalDocument, returnNode, true);\n      }\n      return returnNode;\n    }\n    let serializedHTML = WHOLE_DOCUMENT ? body.outerHTML : body.innerHTML;\n    /* Serialize doctype if allowed */\n    if (WHOLE_DOCUMENT && ALLOWED_TAGS['!doctype'] && body.ownerDocument && body.ownerDocument.doctype && body.ownerDocument.doctype.name && regExpTest(DOCTYPE_NAME, body.ownerDocument.doctype.name)) {\n      serializedHTML = '<!DOCTYPE ' + body.ownerDocument.doctype.name + '>\\n' + serializedHTML;\n    }\n    /* Sanitize final string template-safe */\n    if (SAFE_FOR_TEMPLATES) {\n      arrayForEach([MUSTACHE_EXPR, ERB_EXPR, TMPLIT_EXPR], expr => {\n        serializedHTML = stringReplace(serializedHTML, expr, ' ');\n      });\n    }\n    return trustedTypesPolicy && RETURN_TRUSTED_TYPE ? trustedTypesPolicy.createHTML(serializedHTML) : serializedHTML;\n  };\n  DOMPurify.setConfig = function () {\n    let cfg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n    _parseConfig(cfg);\n    SET_CONFIG = true;\n  };\n  DOMPurify.clearConfig = function () {\n    CONFIG = null;\n    SET_CONFIG = false;\n  };\n  DOMPurify.isValidAttribute = function (tag, attr, value) {\n    /* Initialize shared config vars if necessary. */\n    if (!CONFIG) {\n      _parseConfig({});\n    }\n    const lcTag = transformCaseFunc(tag);\n    const lcName = transformCaseFunc(attr);\n    return _isValidAttribute(lcTag, lcName, value);\n  };\n  DOMPurify.addHook = function (entryPoint, hookFunction) {\n    if (typeof hookFunction !== 'function') {\n      return;\n    }\n    arrayPush(hooks[entryPoint], hookFunction);\n  };\n  DOMPurify.removeHook = function (entryPoint) {\n    return arrayPop(hooks[entryPoint]);\n  };\n  DOMPurify.removeHooks = function (entryPoint) {\n    hooks[entryPoint] = [];\n  };\n  DOMPurify.removeAllHooks = function () {\n    hooks = _createHooksMap();\n  };\n  return DOMPurify;\n}\nvar purify = createDOMPurify();\n\nmodule.exports = purify;\n//# sourceMappingURL=purify.cjs.js.map\n\n\n//# sourceURL=webpack://Formio/./node_modules/dompurify/dist/purify.cjs.js?");
+eval("/*! @license DOMPurify 3.2.4 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.4/LICENSE */\n\n\n\nconst {\n  entries,\n  setPrototypeOf,\n  isFrozen,\n  getPrototypeOf,\n  getOwnPropertyDescriptor\n} = Object;\nlet {\n  freeze,\n  seal,\n  create\n} = Object; // eslint-disable-line import/no-mutable-exports\nlet {\n  apply,\n  construct\n} = typeof Reflect !== 'undefined' && Reflect;\nif (!freeze) {\n  freeze = function freeze(x) {\n    return x;\n  };\n}\nif (!seal) {\n  seal = function seal(x) {\n    return x;\n  };\n}\nif (!apply) {\n  apply = function apply(fun, thisValue, args) {\n    return fun.apply(thisValue, args);\n  };\n}\nif (!construct) {\n  construct = function construct(Func, args) {\n    return new Func(...args);\n  };\n}\nconst arrayForEach = unapply(Array.prototype.forEach);\nconst arrayLastIndexOf = unapply(Array.prototype.lastIndexOf);\nconst arrayPop = unapply(Array.prototype.pop);\nconst arrayPush = unapply(Array.prototype.push);\nconst arraySplice = unapply(Array.prototype.splice);\nconst stringToLowerCase = unapply(String.prototype.toLowerCase);\nconst stringToString = unapply(String.prototype.toString);\nconst stringMatch = unapply(String.prototype.match);\nconst stringReplace = unapply(String.prototype.replace);\nconst stringIndexOf = unapply(String.prototype.indexOf);\nconst stringTrim = unapply(String.prototype.trim);\nconst objectHasOwnProperty = unapply(Object.prototype.hasOwnProperty);\nconst regExpTest = unapply(RegExp.prototype.test);\nconst typeErrorCreate = unconstruct(TypeError);\n/**\n * Creates a new function that calls the given function with a specified thisArg and arguments.\n *\n * @param func - The function to be wrapped and called.\n * @returns A new function that calls the given function with a specified thisArg and arguments.\n */\nfunction unapply(func) {\n  return function (thisArg) {\n    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n      args[_key - 1] = arguments[_key];\n    }\n    return apply(func, thisArg, args);\n  };\n}\n/**\n * Creates a new function that constructs an instance of the given constructor function with the provided arguments.\n *\n * @param func - The constructor function to be wrapped and called.\n * @returns A new function that constructs an instance of the given constructor function with the provided arguments.\n */\nfunction unconstruct(func) {\n  return function () {\n    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n      args[_key2] = arguments[_key2];\n    }\n    return construct(func, args);\n  };\n}\n/**\n * Add properties to a lookup table\n *\n * @param set - The set to which elements will be added.\n * @param array - The array containing elements to be added to the set.\n * @param transformCaseFunc - An optional function to transform the case of each element before adding to the set.\n * @returns The modified set with added elements.\n */\nfunction addToSet(set, array) {\n  let transformCaseFunc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : stringToLowerCase;\n  if (setPrototypeOf) {\n    // Make 'in' and truthy checks like Boolean(set.constructor)\n    // independent of any properties defined on Object.prototype.\n    // Prevent prototype setters from intercepting set as a this value.\n    setPrototypeOf(set, null);\n  }\n  let l = array.length;\n  while (l--) {\n    let element = array[l];\n    if (typeof element === 'string') {\n      const lcElement = transformCaseFunc(element);\n      if (lcElement !== element) {\n        // Config presets (e.g. tags.js, attrs.js) are immutable.\n        if (!isFrozen(array)) {\n          array[l] = lcElement;\n        }\n        element = lcElement;\n      }\n    }\n    set[element] = true;\n  }\n  return set;\n}\n/**\n * Clean up an array to harden against CSPP\n *\n * @param array - The array to be cleaned.\n * @returns The cleaned version of the array\n */\nfunction cleanArray(array) {\n  for (let index = 0; index < array.length; index++) {\n    const isPropertyExist = objectHasOwnProperty(array, index);\n    if (!isPropertyExist) {\n      array[index] = null;\n    }\n  }\n  return array;\n}\n/**\n * Shallow clone an object\n *\n * @param object - The object to be cloned.\n * @returns A new object that copies the original.\n */\nfunction clone(object) {\n  const newObject = create(null);\n  for (const [property, value] of entries(object)) {\n    const isPropertyExist = objectHasOwnProperty(object, property);\n    if (isPropertyExist) {\n      if (Array.isArray(value)) {\n        newObject[property] = cleanArray(value);\n      } else if (value && typeof value === 'object' && value.constructor === Object) {\n        newObject[property] = clone(value);\n      } else {\n        newObject[property] = value;\n      }\n    }\n  }\n  return newObject;\n}\n/**\n * This method automatically checks if the prop is function or getter and behaves accordingly.\n *\n * @param object - The object to look up the getter function in its prototype chain.\n * @param prop - The property name for which to find the getter function.\n * @returns The getter function found in the prototype chain or a fallback function.\n */\nfunction lookupGetter(object, prop) {\n  while (object !== null) {\n    const desc = getOwnPropertyDescriptor(object, prop);\n    if (desc) {\n      if (desc.get) {\n        return unapply(desc.get);\n      }\n      if (typeof desc.value === 'function') {\n        return unapply(desc.value);\n      }\n    }\n    object = getPrototypeOf(object);\n  }\n  function fallbackValue() {\n    return null;\n  }\n  return fallbackValue;\n}\n\nconst html$1 = freeze(['a', 'abbr', 'acronym', 'address', 'area', 'article', 'aside', 'audio', 'b', 'bdi', 'bdo', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meter', 'nav', 'nobr', 'ol', 'optgroup', 'option', 'output', 'p', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'section', 'select', 'shadow', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr']);\nconst svg$1 = freeze(['svg', 'a', 'altglyph', 'altglyphdef', 'altglyphitem', 'animatecolor', 'animatemotion', 'animatetransform', 'circle', 'clippath', 'defs', 'desc', 'ellipse', 'filter', 'font', 'g', 'glyph', 'glyphref', 'hkern', 'image', 'line', 'lineargradient', 'marker', 'mask', 'metadata', 'mpath', 'path', 'pattern', 'polygon', 'polyline', 'radialgradient', 'rect', 'stop', 'style', 'switch', 'symbol', 'text', 'textpath', 'title', 'tref', 'tspan', 'view', 'vkern']);\nconst svgFilters = freeze(['feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence']);\n// List of SVG elements that are disallowed by default.\n// We still need to know them so that we can do namespace\n// checks properly in case one wants to add them to\n// allow-list.\nconst svgDisallowed = freeze(['animate', 'color-profile', 'cursor', 'discard', 'font-face', 'font-face-format', 'font-face-name', 'font-face-src', 'font-face-uri', 'foreignobject', 'hatch', 'hatchpath', 'mesh', 'meshgradient', 'meshpatch', 'meshrow', 'missing-glyph', 'script', 'set', 'solidcolor', 'unknown', 'use']);\nconst mathMl$1 = freeze(['math', 'menclose', 'merror', 'mfenced', 'mfrac', 'mglyph', 'mi', 'mlabeledtr', 'mmultiscripts', 'mn', 'mo', 'mover', 'mpadded', 'mphantom', 'mroot', 'mrow', 'ms', 'mspace', 'msqrt', 'mstyle', 'msub', 'msup', 'msubsup', 'mtable', 'mtd', 'mtext', 'mtr', 'munder', 'munderover', 'mprescripts']);\n// Similarly to SVG, we want to know all MathML elements,\n// even those that we disallow by default.\nconst mathMlDisallowed = freeze(['maction', 'maligngroup', 'malignmark', 'mlongdiv', 'mscarries', 'mscarry', 'msgroup', 'mstack', 'msline', 'msrow', 'semantics', 'annotation', 'annotation-xml', 'mprescripts', 'none']);\nconst text = freeze(['#text']);\n\nconst html = freeze(['accept', 'action', 'align', 'alt', 'autocapitalize', 'autocomplete', 'autopictureinpicture', 'autoplay', 'background', 'bgcolor', 'border', 'capture', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'clear', 'color', 'cols', 'colspan', 'controls', 'controlslist', 'coords', 'crossorigin', 'datetime', 'decoding', 'default', 'dir', 'disabled', 'disablepictureinpicture', 'disableremoteplayback', 'download', 'draggable', 'enctype', 'enterkeyhint', 'face', 'for', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'id', 'inputmode', 'integrity', 'ismap', 'kind', 'label', 'lang', 'list', 'loading', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'minlength', 'multiple', 'muted', 'name', 'nonce', 'noshade', 'novalidate', 'nowrap', 'open', 'optimum', 'pattern', 'placeholder', 'playsinline', 'popover', 'popovertarget', 'popovertargetaction', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'rev', 'reversed', 'role', 'rows', 'rowspan', 'spellcheck', 'scope', 'selected', 'shape', 'size', 'sizes', 'span', 'srclang', 'start', 'src', 'srcset', 'step', 'style', 'summary', 'tabindex', 'title', 'translate', 'type', 'usemap', 'valign', 'value', 'width', 'wrap', 'xmlns', 'slot']);\nconst svg = freeze(['accent-height', 'accumulate', 'additive', 'alignment-baseline', 'amplitude', 'ascent', 'attributename', 'attributetype', 'azimuth', 'basefrequency', 'baseline-shift', 'begin', 'bias', 'by', 'class', 'clip', 'clippathunits', 'clip-path', 'clip-rule', 'color', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'cx', 'cy', 'd', 'dx', 'dy', 'diffuseconstant', 'direction', 'display', 'divisor', 'dur', 'edgemode', 'elevation', 'end', 'exponent', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'filterunits', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'fx', 'fy', 'g1', 'g2', 'glyph-name', 'glyphref', 'gradientunits', 'gradienttransform', 'height', 'href', 'id', 'image-rendering', 'in', 'in2', 'intercept', 'k', 'k1', 'k2', 'k3', 'k4', 'kerning', 'keypoints', 'keysplines', 'keytimes', 'lang', 'lengthadjust', 'letter-spacing', 'kernelmatrix', 'kernelunitlength', 'lighting-color', 'local', 'marker-end', 'marker-mid', 'marker-start', 'markerheight', 'markerunits', 'markerwidth', 'maskcontentunits', 'maskunits', 'max', 'mask', 'media', 'method', 'mode', 'min', 'name', 'numoctaves', 'offset', 'operator', 'opacity', 'order', 'orient', 'orientation', 'origin', 'overflow', 'paint-order', 'path', 'pathlength', 'patterncontentunits', 'patterntransform', 'patternunits', 'points', 'preservealpha', 'preserveaspectratio', 'primitiveunits', 'r', 'rx', 'ry', 'radius', 'refx', 'refy', 'repeatcount', 'repeatdur', 'restart', 'result', 'rotate', 'scale', 'seed', 'shape-rendering', 'slope', 'specularconstant', 'specularexponent', 'spreadmethod', 'startoffset', 'stddeviation', 'stitchtiles', 'stop-color', 'stop-opacity', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke', 'stroke-width', 'style', 'surfacescale', 'systemlanguage', 'tabindex', 'tablevalues', 'targetx', 'targety', 'transform', 'transform-origin', 'text-anchor', 'text-decoration', 'text-rendering', 'textlength', 'type', 'u1', 'u2', 'unicode', 'values', 'viewbox', 'visibility', 'version', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'width', 'word-spacing', 'wrap', 'writing-mode', 'xchannelselector', 'ychannelselector', 'x', 'x1', 'x2', 'xmlns', 'y', 'y1', 'y2', 'z', 'zoomandpan']);\nconst mathMl = freeze(['accent', 'accentunder', 'align', 'bevelled', 'close', 'columnsalign', 'columnlines', 'columnspan', 'denomalign', 'depth', 'dir', 'display', 'displaystyle', 'encoding', 'fence', 'frame', 'height', 'href', 'id', 'largeop', 'length', 'linethickness', 'lspace', 'lquote', 'mathbackground', 'mathcolor', 'mathsize', 'mathvariant', 'maxsize', 'minsize', 'movablelimits', 'notation', 'numalign', 'open', 'rowalign', 'rowlines', 'rowspacing', 'rowspan', 'rspace', 'rquote', 'scriptlevel', 'scriptminsize', 'scriptsizemultiplier', 'selection', 'separator', 'separators', 'stretchy', 'subscriptshift', 'supscriptshift', 'symmetric', 'voffset', 'width', 'xmlns']);\nconst xml = freeze(['xlink:href', 'xml:id', 'xlink:title', 'xml:space', 'xmlns:xlink']);\n\n// eslint-disable-next-line unicorn/better-regex\nconst MUSTACHE_EXPR = seal(/\\{\\{[\\w\\W]*|[\\w\\W]*\\}\\}/gm); // Specify template detection regex for SAFE_FOR_TEMPLATES mode\nconst ERB_EXPR = seal(/<%[\\w\\W]*|[\\w\\W]*%>/gm);\nconst TMPLIT_EXPR = seal(/\\$\\{[\\w\\W]*/gm); // eslint-disable-line unicorn/better-regex\nconst DATA_ATTR = seal(/^data-[\\-\\w.\\u00B7-\\uFFFF]+$/); // eslint-disable-line no-useless-escape\nconst ARIA_ATTR = seal(/^aria-[\\-\\w]+$/); // eslint-disable-line no-useless-escape\nconst IS_ALLOWED_URI = seal(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]|[a-z+.\\-]+(?:[^a-z+.\\-:]|$))/i // eslint-disable-line no-useless-escape\n);\nconst IS_SCRIPT_OR_DATA = seal(/^(?:\\w+script|data):/i);\nconst ATTR_WHITESPACE = seal(/[\\u0000-\\u0020\\u00A0\\u1680\\u180E\\u2000-\\u2029\\u205F\\u3000]/g // eslint-disable-line no-control-regex\n);\nconst DOCTYPE_NAME = seal(/^html$/i);\nconst CUSTOM_ELEMENT = seal(/^[a-z][.\\w]*(-[.\\w]+)+$/i);\n\nvar EXPRESSIONS = /*#__PURE__*/Object.freeze({\n  __proto__: null,\n  ARIA_ATTR: ARIA_ATTR,\n  ATTR_WHITESPACE: ATTR_WHITESPACE,\n  CUSTOM_ELEMENT: CUSTOM_ELEMENT,\n  DATA_ATTR: DATA_ATTR,\n  DOCTYPE_NAME: DOCTYPE_NAME,\n  ERB_EXPR: ERB_EXPR,\n  IS_ALLOWED_URI: IS_ALLOWED_URI,\n  IS_SCRIPT_OR_DATA: IS_SCRIPT_OR_DATA,\n  MUSTACHE_EXPR: MUSTACHE_EXPR,\n  TMPLIT_EXPR: TMPLIT_EXPR\n});\n\n/* eslint-disable @typescript-eslint/indent */\n// https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType\nconst NODE_TYPE = {\n  element: 1,\n  attribute: 2,\n  text: 3,\n  cdataSection: 4,\n  entityReference: 5,\n  // Deprecated\n  entityNode: 6,\n  // Deprecated\n  progressingInstruction: 7,\n  comment: 8,\n  document: 9,\n  documentType: 10,\n  documentFragment: 11,\n  notation: 12 // Deprecated\n};\nconst getGlobal = function getGlobal() {\n  return typeof window === 'undefined' ? null : window;\n};\n/**\n * Creates a no-op policy for internal use only.\n * Don't export this function outside this module!\n * @param trustedTypes The policy factory.\n * @param purifyHostElement The Script element used to load DOMPurify (to determine policy name suffix).\n * @return The policy created (or null, if Trusted Types\n * are not supported or creating the policy failed).\n */\nconst _createTrustedTypesPolicy = function _createTrustedTypesPolicy(trustedTypes, purifyHostElement) {\n  if (typeof trustedTypes !== 'object' || typeof trustedTypes.createPolicy !== 'function') {\n    return null;\n  }\n  // Allow the callers to control the unique policy name\n  // by adding a data-tt-policy-suffix to the script element with the DOMPurify.\n  // Policy creation with duplicate names throws in Trusted Types.\n  let suffix = null;\n  const ATTR_NAME = 'data-tt-policy-suffix';\n  if (purifyHostElement && purifyHostElement.hasAttribute(ATTR_NAME)) {\n    suffix = purifyHostElement.getAttribute(ATTR_NAME);\n  }\n  const policyName = 'dompurify' + (suffix ? '#' + suffix : '');\n  try {\n    return trustedTypes.createPolicy(policyName, {\n      createHTML(html) {\n        return html;\n      },\n      createScriptURL(scriptUrl) {\n        return scriptUrl;\n      }\n    });\n  } catch (_) {\n    // Policy creation failed (most likely another DOMPurify script has\n    // already run). Skip creating the policy, as this will only cause errors\n    // if TT are enforced.\n    console.warn('TrustedTypes policy ' + policyName + ' could not be created.');\n    return null;\n  }\n};\nconst _createHooksMap = function _createHooksMap() {\n  return {\n    afterSanitizeAttributes: [],\n    afterSanitizeElements: [],\n    afterSanitizeShadowDOM: [],\n    beforeSanitizeAttributes: [],\n    beforeSanitizeElements: [],\n    beforeSanitizeShadowDOM: [],\n    uponSanitizeAttribute: [],\n    uponSanitizeElement: [],\n    uponSanitizeShadowNode: []\n  };\n};\nfunction createDOMPurify() {\n  let window = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getGlobal();\n  const DOMPurify = root => createDOMPurify(root);\n  DOMPurify.version = '3.2.4';\n  DOMPurify.removed = [];\n  if (!window || !window.document || window.document.nodeType !== NODE_TYPE.document || !window.Element) {\n    // Not running in a browser, provide a factory function\n    // so that you can pass your own Window\n    DOMPurify.isSupported = false;\n    return DOMPurify;\n  }\n  let {\n    document\n  } = window;\n  const originalDocument = document;\n  const currentScript = originalDocument.currentScript;\n  const {\n    DocumentFragment,\n    HTMLTemplateElement,\n    Node,\n    Element,\n    NodeFilter,\n    NamedNodeMap = window.NamedNodeMap || window.MozNamedAttrMap,\n    HTMLFormElement,\n    DOMParser,\n    trustedTypes\n  } = window;\n  const ElementPrototype = Element.prototype;\n  const cloneNode = lookupGetter(ElementPrototype, 'cloneNode');\n  const remove = lookupGetter(ElementPrototype, 'remove');\n  const getNextSibling = lookupGetter(ElementPrototype, 'nextSibling');\n  const getChildNodes = lookupGetter(ElementPrototype, 'childNodes');\n  const getParentNode = lookupGetter(ElementPrototype, 'parentNode');\n  // As per issue #47, the web-components registry is inherited by a\n  // new document created via createHTMLDocument. As per the spec\n  // (http://w3c.github.io/webcomponents/spec/custom/#creating-and-passing-registries)\n  // a new empty registry is used when creating a template contents owner\n  // document, so we use that as our parent document to ensure nothing\n  // is inherited.\n  if (typeof HTMLTemplateElement === 'function') {\n    const template = document.createElement('template');\n    if (template.content && template.content.ownerDocument) {\n      document = template.content.ownerDocument;\n    }\n  }\n  let trustedTypesPolicy;\n  let emptyHTML = '';\n  const {\n    implementation,\n    createNodeIterator,\n    createDocumentFragment,\n    getElementsByTagName\n  } = document;\n  const {\n    importNode\n  } = originalDocument;\n  let hooks = _createHooksMap();\n  /**\n   * Expose whether this browser supports running the full DOMPurify.\n   */\n  DOMPurify.isSupported = typeof entries === 'function' && typeof getParentNode === 'function' && implementation && implementation.createHTMLDocument !== undefined;\n  const {\n    MUSTACHE_EXPR,\n    ERB_EXPR,\n    TMPLIT_EXPR,\n    DATA_ATTR,\n    ARIA_ATTR,\n    IS_SCRIPT_OR_DATA,\n    ATTR_WHITESPACE,\n    CUSTOM_ELEMENT\n  } = EXPRESSIONS;\n  let {\n    IS_ALLOWED_URI: IS_ALLOWED_URI$1\n  } = EXPRESSIONS;\n  /**\n   * We consider the elements and attributes below to be safe. Ideally\n   * don't add any new ones but feel free to remove unwanted ones.\n   */\n  /* allowed element names */\n  let ALLOWED_TAGS = null;\n  const DEFAULT_ALLOWED_TAGS = addToSet({}, [...html$1, ...svg$1, ...svgFilters, ...mathMl$1, ...text]);\n  /* Allowed attribute names */\n  let ALLOWED_ATTR = null;\n  const DEFAULT_ALLOWED_ATTR = addToSet({}, [...html, ...svg, ...mathMl, ...xml]);\n  /*\n   * Configure how DOMPurify should handle custom elements and their attributes as well as customized built-in elements.\n   * @property {RegExp|Function|null} tagNameCheck one of [null, regexPattern, predicate]. Default: `null` (disallow any custom elements)\n   * @property {RegExp|Function|null} attributeNameCheck one of [null, regexPattern, predicate]. Default: `null` (disallow any attributes not on the allow list)\n   * @property {boolean} allowCustomizedBuiltInElements allow custom elements derived from built-ins if they pass CUSTOM_ELEMENT_HANDLING.tagNameCheck. Default: `false`.\n   */\n  let CUSTOM_ELEMENT_HANDLING = Object.seal(create(null, {\n    tagNameCheck: {\n      writable: true,\n      configurable: false,\n      enumerable: true,\n      value: null\n    },\n    attributeNameCheck: {\n      writable: true,\n      configurable: false,\n      enumerable: true,\n      value: null\n    },\n    allowCustomizedBuiltInElements: {\n      writable: true,\n      configurable: false,\n      enumerable: true,\n      value: false\n    }\n  }));\n  /* Explicitly forbidden tags (overrides ALLOWED_TAGS/ADD_TAGS) */\n  let FORBID_TAGS = null;\n  /* Explicitly forbidden attributes (overrides ALLOWED_ATTR/ADD_ATTR) */\n  let FORBID_ATTR = null;\n  /* Decide if ARIA attributes are okay */\n  let ALLOW_ARIA_ATTR = true;\n  /* Decide if custom data attributes are okay */\n  let ALLOW_DATA_ATTR = true;\n  /* Decide if unknown protocols are okay */\n  let ALLOW_UNKNOWN_PROTOCOLS = false;\n  /* Decide if self-closing tags in attributes are allowed.\n   * Usually removed due to a mXSS issue in jQuery 3.0 */\n  let ALLOW_SELF_CLOSE_IN_ATTR = true;\n  /* Output should be safe for common template engines.\n   * This means, DOMPurify removes data attributes, mustaches and ERB\n   */\n  let SAFE_FOR_TEMPLATES = false;\n  /* Output should be safe even for XML used within HTML and alike.\n   * This means, DOMPurify removes comments when containing risky content.\n   */\n  let SAFE_FOR_XML = true;\n  /* Decide if document with <html>... should be returned */\n  let WHOLE_DOCUMENT = false;\n  /* Track whether config is already set on this instance of DOMPurify. */\n  let SET_CONFIG = false;\n  /* Decide if all elements (e.g. style, script) must be children of\n   * document.body. By default, browsers might move them to document.head */\n  let FORCE_BODY = false;\n  /* Decide if a DOM `HTMLBodyElement` should be returned, instead of a html\n   * string (or a TrustedHTML object if Trusted Types are supported).\n   * If `WHOLE_DOCUMENT` is enabled a `HTMLHtmlElement` will be returned instead\n   */\n  let RETURN_DOM = false;\n  /* Decide if a DOM `DocumentFragment` should be returned, instead of a html\n   * string  (or a TrustedHTML object if Trusted Types are supported) */\n  let RETURN_DOM_FRAGMENT = false;\n  /* Try to return a Trusted Type object instead of a string, return a string in\n   * case Trusted Types are not supported  */\n  let RETURN_TRUSTED_TYPE = false;\n  /* Output should be free from DOM clobbering attacks?\n   * This sanitizes markups named with colliding, clobberable built-in DOM APIs.\n   */\n  let SANITIZE_DOM = true;\n  /* Achieve full DOM Clobbering protection by isolating the namespace of named\n   * properties and JS variables, mitigating attacks that abuse the HTML/DOM spec rules.\n   *\n   * HTML/DOM spec rules that enable DOM Clobbering:\n   *   - Named Access on Window (§7.3.3)\n   *   - DOM Tree Accessors (§3.1.5)\n   *   - Form Element Parent-Child Relations (§4.10.3)\n   *   - Iframe srcdoc / Nested WindowProxies (§4.8.5)\n   *   - HTMLCollection (§4.2.10.2)\n   *\n   * Namespace isolation is implemented by prefixing `id` and `name` attributes\n   * with a constant string, i.e., `user-content-`\n   */\n  let SANITIZE_NAMED_PROPS = false;\n  const SANITIZE_NAMED_PROPS_PREFIX = 'user-content-';\n  /* Keep element content when removing element? */\n  let KEEP_CONTENT = true;\n  /* If a `Node` is passed to sanitize(), then performs sanitization in-place instead\n   * of importing it into a new Document and returning a sanitized copy */\n  let IN_PLACE = false;\n  /* Allow usage of profiles like html, svg and mathMl */\n  let USE_PROFILES = {};\n  /* Tags to ignore content of when KEEP_CONTENT is true */\n  let FORBID_CONTENTS = null;\n  const DEFAULT_FORBID_CONTENTS = addToSet({}, ['annotation-xml', 'audio', 'colgroup', 'desc', 'foreignobject', 'head', 'iframe', 'math', 'mi', 'mn', 'mo', 'ms', 'mtext', 'noembed', 'noframes', 'noscript', 'plaintext', 'script', 'style', 'svg', 'template', 'thead', 'title', 'video', 'xmp']);\n  /* Tags that are safe for data: URIs */\n  let DATA_URI_TAGS = null;\n  const DEFAULT_DATA_URI_TAGS = addToSet({}, ['audio', 'video', 'img', 'source', 'image', 'track']);\n  /* Attributes safe for values like \"javascript:\" */\n  let URI_SAFE_ATTRIBUTES = null;\n  const DEFAULT_URI_SAFE_ATTRIBUTES = addToSet({}, ['alt', 'class', 'for', 'id', 'label', 'name', 'pattern', 'placeholder', 'role', 'summary', 'title', 'value', 'style', 'xmlns']);\n  const MATHML_NAMESPACE = 'http://www.w3.org/1998/Math/MathML';\n  const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';\n  const HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';\n  /* Document namespace */\n  let NAMESPACE = HTML_NAMESPACE;\n  let IS_EMPTY_INPUT = false;\n  /* Allowed XHTML+XML namespaces */\n  let ALLOWED_NAMESPACES = null;\n  const DEFAULT_ALLOWED_NAMESPACES = addToSet({}, [MATHML_NAMESPACE, SVG_NAMESPACE, HTML_NAMESPACE], stringToString);\n  let MATHML_TEXT_INTEGRATION_POINTS = addToSet({}, ['mi', 'mo', 'mn', 'ms', 'mtext']);\n  let HTML_INTEGRATION_POINTS = addToSet({}, ['annotation-xml']);\n  // Certain elements are allowed in both SVG and HTML\n  // namespace. We need to specify them explicitly\n  // so that they don't get erroneously deleted from\n  // HTML namespace.\n  const COMMON_SVG_AND_HTML_ELEMENTS = addToSet({}, ['title', 'style', 'font', 'a', 'script']);\n  /* Parsing of strict XHTML documents */\n  let PARSER_MEDIA_TYPE = null;\n  const SUPPORTED_PARSER_MEDIA_TYPES = ['application/xhtml+xml', 'text/html'];\n  const DEFAULT_PARSER_MEDIA_TYPE = 'text/html';\n  let transformCaseFunc = null;\n  /* Keep a reference to config to pass to hooks */\n  let CONFIG = null;\n  /* Ideally, do not touch anything below this line */\n  /* ______________________________________________ */\n  const formElement = document.createElement('form');\n  const isRegexOrFunction = function isRegexOrFunction(testValue) {\n    return testValue instanceof RegExp || testValue instanceof Function;\n  };\n  /**\n   * _parseConfig\n   *\n   * @param cfg optional config literal\n   */\n  // eslint-disable-next-line complexity\n  const _parseConfig = function _parseConfig() {\n    let cfg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n    if (CONFIG && CONFIG === cfg) {\n      return;\n    }\n    /* Shield configuration object from tampering */\n    if (!cfg || typeof cfg !== 'object') {\n      cfg = {};\n    }\n    /* Shield configuration object from prototype pollution */\n    cfg = clone(cfg);\n    PARSER_MEDIA_TYPE =\n    // eslint-disable-next-line unicorn/prefer-includes\n    SUPPORTED_PARSER_MEDIA_TYPES.indexOf(cfg.PARSER_MEDIA_TYPE) === -1 ? DEFAULT_PARSER_MEDIA_TYPE : cfg.PARSER_MEDIA_TYPE;\n    // HTML tags and attributes are not case-sensitive, converting to lowercase. Keeping XHTML as is.\n    transformCaseFunc = PARSER_MEDIA_TYPE === 'application/xhtml+xml' ? stringToString : stringToLowerCase;\n    /* Set configuration parameters */\n    ALLOWED_TAGS = objectHasOwnProperty(cfg, 'ALLOWED_TAGS') ? addToSet({}, cfg.ALLOWED_TAGS, transformCaseFunc) : DEFAULT_ALLOWED_TAGS;\n    ALLOWED_ATTR = objectHasOwnProperty(cfg, 'ALLOWED_ATTR') ? addToSet({}, cfg.ALLOWED_ATTR, transformCaseFunc) : DEFAULT_ALLOWED_ATTR;\n    ALLOWED_NAMESPACES = objectHasOwnProperty(cfg, 'ALLOWED_NAMESPACES') ? addToSet({}, cfg.ALLOWED_NAMESPACES, stringToString) : DEFAULT_ALLOWED_NAMESPACES;\n    URI_SAFE_ATTRIBUTES = objectHasOwnProperty(cfg, 'ADD_URI_SAFE_ATTR') ? addToSet(clone(DEFAULT_URI_SAFE_ATTRIBUTES), cfg.ADD_URI_SAFE_ATTR, transformCaseFunc) : DEFAULT_URI_SAFE_ATTRIBUTES;\n    DATA_URI_TAGS = objectHasOwnProperty(cfg, 'ADD_DATA_URI_TAGS') ? addToSet(clone(DEFAULT_DATA_URI_TAGS), cfg.ADD_DATA_URI_TAGS, transformCaseFunc) : DEFAULT_DATA_URI_TAGS;\n    FORBID_CONTENTS = objectHasOwnProperty(cfg, 'FORBID_CONTENTS') ? addToSet({}, cfg.FORBID_CONTENTS, transformCaseFunc) : DEFAULT_FORBID_CONTENTS;\n    FORBID_TAGS = objectHasOwnProperty(cfg, 'FORBID_TAGS') ? addToSet({}, cfg.FORBID_TAGS, transformCaseFunc) : {};\n    FORBID_ATTR = objectHasOwnProperty(cfg, 'FORBID_ATTR') ? addToSet({}, cfg.FORBID_ATTR, transformCaseFunc) : {};\n    USE_PROFILES = objectHasOwnProperty(cfg, 'USE_PROFILES') ? cfg.USE_PROFILES : false;\n    ALLOW_ARIA_ATTR = cfg.ALLOW_ARIA_ATTR !== false; // Default true\n    ALLOW_DATA_ATTR = cfg.ALLOW_DATA_ATTR !== false; // Default true\n    ALLOW_UNKNOWN_PROTOCOLS = cfg.ALLOW_UNKNOWN_PROTOCOLS || false; // Default false\n    ALLOW_SELF_CLOSE_IN_ATTR = cfg.ALLOW_SELF_CLOSE_IN_ATTR !== false; // Default true\n    SAFE_FOR_TEMPLATES = cfg.SAFE_FOR_TEMPLATES || false; // Default false\n    SAFE_FOR_XML = cfg.SAFE_FOR_XML !== false; // Default true\n    WHOLE_DOCUMENT = cfg.WHOLE_DOCUMENT || false; // Default false\n    RETURN_DOM = cfg.RETURN_DOM || false; // Default false\n    RETURN_DOM_FRAGMENT = cfg.RETURN_DOM_FRAGMENT || false; // Default false\n    RETURN_TRUSTED_TYPE = cfg.RETURN_TRUSTED_TYPE || false; // Default false\n    FORCE_BODY = cfg.FORCE_BODY || false; // Default false\n    SANITIZE_DOM = cfg.SANITIZE_DOM !== false; // Default true\n    SANITIZE_NAMED_PROPS = cfg.SANITIZE_NAMED_PROPS || false; // Default false\n    KEEP_CONTENT = cfg.KEEP_CONTENT !== false; // Default true\n    IN_PLACE = cfg.IN_PLACE || false; // Default false\n    IS_ALLOWED_URI$1 = cfg.ALLOWED_URI_REGEXP || IS_ALLOWED_URI;\n    NAMESPACE = cfg.NAMESPACE || HTML_NAMESPACE;\n    MATHML_TEXT_INTEGRATION_POINTS = cfg.MATHML_TEXT_INTEGRATION_POINTS || MATHML_TEXT_INTEGRATION_POINTS;\n    HTML_INTEGRATION_POINTS = cfg.HTML_INTEGRATION_POINTS || HTML_INTEGRATION_POINTS;\n    CUSTOM_ELEMENT_HANDLING = cfg.CUSTOM_ELEMENT_HANDLING || {};\n    if (cfg.CUSTOM_ELEMENT_HANDLING && isRegexOrFunction(cfg.CUSTOM_ELEMENT_HANDLING.tagNameCheck)) {\n      CUSTOM_ELEMENT_HANDLING.tagNameCheck = cfg.CUSTOM_ELEMENT_HANDLING.tagNameCheck;\n    }\n    if (cfg.CUSTOM_ELEMENT_HANDLING && isRegexOrFunction(cfg.CUSTOM_ELEMENT_HANDLING.attributeNameCheck)) {\n      CUSTOM_ELEMENT_HANDLING.attributeNameCheck = cfg.CUSTOM_ELEMENT_HANDLING.attributeNameCheck;\n    }\n    if (cfg.CUSTOM_ELEMENT_HANDLING && typeof cfg.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements === 'boolean') {\n      CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements = cfg.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements;\n    }\n    if (SAFE_FOR_TEMPLATES) {\n      ALLOW_DATA_ATTR = false;\n    }\n    if (RETURN_DOM_FRAGMENT) {\n      RETURN_DOM = true;\n    }\n    /* Parse profile info */\n    if (USE_PROFILES) {\n      ALLOWED_TAGS = addToSet({}, text);\n      ALLOWED_ATTR = [];\n      if (USE_PROFILES.html === true) {\n        addToSet(ALLOWED_TAGS, html$1);\n        addToSet(ALLOWED_ATTR, html);\n      }\n      if (USE_PROFILES.svg === true) {\n        addToSet(ALLOWED_TAGS, svg$1);\n        addToSet(ALLOWED_ATTR, svg);\n        addToSet(ALLOWED_ATTR, xml);\n      }\n      if (USE_PROFILES.svgFilters === true) {\n        addToSet(ALLOWED_TAGS, svgFilters);\n        addToSet(ALLOWED_ATTR, svg);\n        addToSet(ALLOWED_ATTR, xml);\n      }\n      if (USE_PROFILES.mathMl === true) {\n        addToSet(ALLOWED_TAGS, mathMl$1);\n        addToSet(ALLOWED_ATTR, mathMl);\n        addToSet(ALLOWED_ATTR, xml);\n      }\n    }\n    /* Merge configuration parameters */\n    if (cfg.ADD_TAGS) {\n      if (ALLOWED_TAGS === DEFAULT_ALLOWED_TAGS) {\n        ALLOWED_TAGS = clone(ALLOWED_TAGS);\n      }\n      addToSet(ALLOWED_TAGS, cfg.ADD_TAGS, transformCaseFunc);\n    }\n    if (cfg.ADD_ATTR) {\n      if (ALLOWED_ATTR === DEFAULT_ALLOWED_ATTR) {\n        ALLOWED_ATTR = clone(ALLOWED_ATTR);\n      }\n      addToSet(ALLOWED_ATTR, cfg.ADD_ATTR, transformCaseFunc);\n    }\n    if (cfg.ADD_URI_SAFE_ATTR) {\n      addToSet(URI_SAFE_ATTRIBUTES, cfg.ADD_URI_SAFE_ATTR, transformCaseFunc);\n    }\n    if (cfg.FORBID_CONTENTS) {\n      if (FORBID_CONTENTS === DEFAULT_FORBID_CONTENTS) {\n        FORBID_CONTENTS = clone(FORBID_CONTENTS);\n      }\n      addToSet(FORBID_CONTENTS, cfg.FORBID_CONTENTS, transformCaseFunc);\n    }\n    /* Add #text in case KEEP_CONTENT is set to true */\n    if (KEEP_CONTENT) {\n      ALLOWED_TAGS['#text'] = true;\n    }\n    /* Add html, head and body to ALLOWED_TAGS in case WHOLE_DOCUMENT is true */\n    if (WHOLE_DOCUMENT) {\n      addToSet(ALLOWED_TAGS, ['html', 'head', 'body']);\n    }\n    /* Add tbody to ALLOWED_TAGS in case tables are permitted, see #286, #365 */\n    if (ALLOWED_TAGS.table) {\n      addToSet(ALLOWED_TAGS, ['tbody']);\n      delete FORBID_TAGS.tbody;\n    }\n    if (cfg.TRUSTED_TYPES_POLICY) {\n      if (typeof cfg.TRUSTED_TYPES_POLICY.createHTML !== 'function') {\n        throw typeErrorCreate('TRUSTED_TYPES_POLICY configuration option must provide a \"createHTML\" hook.');\n      }\n      if (typeof cfg.TRUSTED_TYPES_POLICY.createScriptURL !== 'function') {\n        throw typeErrorCreate('TRUSTED_TYPES_POLICY configuration option must provide a \"createScriptURL\" hook.');\n      }\n      // Overwrite existing TrustedTypes policy.\n      trustedTypesPolicy = cfg.TRUSTED_TYPES_POLICY;\n      // Sign local variables required by `sanitize`.\n      emptyHTML = trustedTypesPolicy.createHTML('');\n    } else {\n      // Uninitialized policy, attempt to initialize the internal dompurify policy.\n      if (trustedTypesPolicy === undefined) {\n        trustedTypesPolicy = _createTrustedTypesPolicy(trustedTypes, currentScript);\n      }\n      // If creating the internal policy succeeded sign internal variables.\n      if (trustedTypesPolicy !== null && typeof emptyHTML === 'string') {\n        emptyHTML = trustedTypesPolicy.createHTML('');\n      }\n    }\n    // Prevent further manipulation of configuration.\n    // Not available in IE8, Safari 5, etc.\n    if (freeze) {\n      freeze(cfg);\n    }\n    CONFIG = cfg;\n  };\n  /* Keep track of all possible SVG and MathML tags\n   * so that we can perform the namespace checks\n   * correctly. */\n  const ALL_SVG_TAGS = addToSet({}, [...svg$1, ...svgFilters, ...svgDisallowed]);\n  const ALL_MATHML_TAGS = addToSet({}, [...mathMl$1, ...mathMlDisallowed]);\n  /**\n   * @param element a DOM element whose namespace is being checked\n   * @returns Return false if the element has a\n   *  namespace that a spec-compliant parser would never\n   *  return. Return true otherwise.\n   */\n  const _checkValidNamespace = function _checkValidNamespace(element) {\n    let parent = getParentNode(element);\n    // In JSDOM, if we're inside shadow DOM, then parentNode\n    // can be null. We just simulate parent in this case.\n    if (!parent || !parent.tagName) {\n      parent = {\n        namespaceURI: NAMESPACE,\n        tagName: 'template'\n      };\n    }\n    const tagName = stringToLowerCase(element.tagName);\n    const parentTagName = stringToLowerCase(parent.tagName);\n    if (!ALLOWED_NAMESPACES[element.namespaceURI]) {\n      return false;\n    }\n    if (element.namespaceURI === SVG_NAMESPACE) {\n      // The only way to switch from HTML namespace to SVG\n      // is via <svg>. If it happens via any other tag, then\n      // it should be killed.\n      if (parent.namespaceURI === HTML_NAMESPACE) {\n        return tagName === 'svg';\n      }\n      // The only way to switch from MathML to SVG is via`\n      // svg if parent is either <annotation-xml> or MathML\n      // text integration points.\n      if (parent.namespaceURI === MATHML_NAMESPACE) {\n        return tagName === 'svg' && (parentTagName === 'annotation-xml' || MATHML_TEXT_INTEGRATION_POINTS[parentTagName]);\n      }\n      // We only allow elements that are defined in SVG\n      // spec. All others are disallowed in SVG namespace.\n      return Boolean(ALL_SVG_TAGS[tagName]);\n    }\n    if (element.namespaceURI === MATHML_NAMESPACE) {\n      // The only way to switch from HTML namespace to MathML\n      // is via <math>. If it happens via any other tag, then\n      // it should be killed.\n      if (parent.namespaceURI === HTML_NAMESPACE) {\n        return tagName === 'math';\n      }\n      // The only way to switch from SVG to MathML is via\n      // <math> and HTML integration points\n      if (parent.namespaceURI === SVG_NAMESPACE) {\n        return tagName === 'math' && HTML_INTEGRATION_POINTS[parentTagName];\n      }\n      // We only allow elements that are defined in MathML\n      // spec. All others are disallowed in MathML namespace.\n      return Boolean(ALL_MATHML_TAGS[tagName]);\n    }\n    if (element.namespaceURI === HTML_NAMESPACE) {\n      // The only way to switch from SVG to HTML is via\n      // HTML integration points, and from MathML to HTML\n      // is via MathML text integration points\n      if (parent.namespaceURI === SVG_NAMESPACE && !HTML_INTEGRATION_POINTS[parentTagName]) {\n        return false;\n      }\n      if (parent.namespaceURI === MATHML_NAMESPACE && !MATHML_TEXT_INTEGRATION_POINTS[parentTagName]) {\n        return false;\n      }\n      // We disallow tags that are specific for MathML\n      // or SVG and should never appear in HTML namespace\n      return !ALL_MATHML_TAGS[tagName] && (COMMON_SVG_AND_HTML_ELEMENTS[tagName] || !ALL_SVG_TAGS[tagName]);\n    }\n    // For XHTML and XML documents that support custom namespaces\n    if (PARSER_MEDIA_TYPE === 'application/xhtml+xml' && ALLOWED_NAMESPACES[element.namespaceURI]) {\n      return true;\n    }\n    // The code should never reach this place (this means\n    // that the element somehow got namespace that is not\n    // HTML, SVG, MathML or allowed via ALLOWED_NAMESPACES).\n    // Return false just in case.\n    return false;\n  };\n  /**\n   * _forceRemove\n   *\n   * @param node a DOM node\n   */\n  const _forceRemove = function _forceRemove(node) {\n    arrayPush(DOMPurify.removed, {\n      element: node\n    });\n    try {\n      // eslint-disable-next-line unicorn/prefer-dom-node-remove\n      getParentNode(node).removeChild(node);\n    } catch (_) {\n      remove(node);\n    }\n  };\n  /**\n   * _removeAttribute\n   *\n   * @param name an Attribute name\n   * @param element a DOM node\n   */\n  const _removeAttribute = function _removeAttribute(name, element) {\n    try {\n      arrayPush(DOMPurify.removed, {\n        attribute: element.getAttributeNode(name),\n        from: element\n      });\n    } catch (_) {\n      arrayPush(DOMPurify.removed, {\n        attribute: null,\n        from: element\n      });\n    }\n    element.removeAttribute(name);\n    // We void attribute values for unremovable \"is\" attributes\n    if (name === 'is') {\n      if (RETURN_DOM || RETURN_DOM_FRAGMENT) {\n        try {\n          _forceRemove(element);\n        } catch (_) {}\n      } else {\n        try {\n          element.setAttribute(name, '');\n        } catch (_) {}\n      }\n    }\n  };\n  /**\n   * _initDocument\n   *\n   * @param dirty - a string of dirty markup\n   * @return a DOM, filled with the dirty markup\n   */\n  const _initDocument = function _initDocument(dirty) {\n    /* Create a HTML document */\n    let doc = null;\n    let leadingWhitespace = null;\n    if (FORCE_BODY) {\n      dirty = '<remove></remove>' + dirty;\n    } else {\n      /* If FORCE_BODY isn't used, leading whitespace needs to be preserved manually */\n      const matches = stringMatch(dirty, /^[\\r\\n\\t ]+/);\n      leadingWhitespace = matches && matches[0];\n    }\n    if (PARSER_MEDIA_TYPE === 'application/xhtml+xml' && NAMESPACE === HTML_NAMESPACE) {\n      // Root of XHTML doc must contain xmlns declaration (see https://www.w3.org/TR/xhtml1/normative.html#strict)\n      dirty = '<html xmlns=\"http://www.w3.org/1999/xhtml\"><head></head><body>' + dirty + '</body></html>';\n    }\n    const dirtyPayload = trustedTypesPolicy ? trustedTypesPolicy.createHTML(dirty) : dirty;\n    /*\n     * Use the DOMParser API by default, fallback later if needs be\n     * DOMParser not work for svg when has multiple root element.\n     */\n    if (NAMESPACE === HTML_NAMESPACE) {\n      try {\n        doc = new DOMParser().parseFromString(dirtyPayload, PARSER_MEDIA_TYPE);\n      } catch (_) {}\n    }\n    /* Use createHTMLDocument in case DOMParser is not available */\n    if (!doc || !doc.documentElement) {\n      doc = implementation.createDocument(NAMESPACE, 'template', null);\n      try {\n        doc.documentElement.innerHTML = IS_EMPTY_INPUT ? emptyHTML : dirtyPayload;\n      } catch (_) {\n        // Syntax error if dirtyPayload is invalid xml\n      }\n    }\n    const body = doc.body || doc.documentElement;\n    if (dirty && leadingWhitespace) {\n      body.insertBefore(document.createTextNode(leadingWhitespace), body.childNodes[0] || null);\n    }\n    /* Work on whole document or just its body */\n    if (NAMESPACE === HTML_NAMESPACE) {\n      return getElementsByTagName.call(doc, WHOLE_DOCUMENT ? 'html' : 'body')[0];\n    }\n    return WHOLE_DOCUMENT ? doc.documentElement : body;\n  };\n  /**\n   * Creates a NodeIterator object that you can use to traverse filtered lists of nodes or elements in a document.\n   *\n   * @param root The root element or node to start traversing on.\n   * @return The created NodeIterator\n   */\n  const _createNodeIterator = function _createNodeIterator(root) {\n    return createNodeIterator.call(root.ownerDocument || root, root,\n    // eslint-disable-next-line no-bitwise\n    NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT | NodeFilter.SHOW_PROCESSING_INSTRUCTION | NodeFilter.SHOW_CDATA_SECTION, null);\n  };\n  /**\n   * _isClobbered\n   *\n   * @param element element to check for clobbering attacks\n   * @return true if clobbered, false if safe\n   */\n  const _isClobbered = function _isClobbered(element) {\n    return element instanceof HTMLFormElement && (typeof element.nodeName !== 'string' || typeof element.textContent !== 'string' || typeof element.removeChild !== 'function' || !(element.attributes instanceof NamedNodeMap) || typeof element.removeAttribute !== 'function' || typeof element.setAttribute !== 'function' || typeof element.namespaceURI !== 'string' || typeof element.insertBefore !== 'function' || typeof element.hasChildNodes !== 'function');\n  };\n  /**\n   * Checks whether the given object is a DOM node.\n   *\n   * @param value object to check whether it's a DOM node\n   * @return true is object is a DOM node\n   */\n  const _isNode = function _isNode(value) {\n    return typeof Node === 'function' && value instanceof Node;\n  };\n  function _executeHooks(hooks, currentNode, data) {\n    arrayForEach(hooks, hook => {\n      hook.call(DOMPurify, currentNode, data, CONFIG);\n    });\n  }\n  /**\n   * _sanitizeElements\n   *\n   * @protect nodeName\n   * @protect textContent\n   * @protect removeChild\n   * @param currentNode to check for permission to exist\n   * @return true if node was killed, false if left alive\n   */\n  const _sanitizeElements = function _sanitizeElements(currentNode) {\n    let content = null;\n    /* Execute a hook if present */\n    _executeHooks(hooks.beforeSanitizeElements, currentNode, null);\n    /* Check if element is clobbered or can clobber */\n    if (_isClobbered(currentNode)) {\n      _forceRemove(currentNode);\n      return true;\n    }\n    /* Now let's check the element's type and name */\n    const tagName = transformCaseFunc(currentNode.nodeName);\n    /* Execute a hook if present */\n    _executeHooks(hooks.uponSanitizeElement, currentNode, {\n      tagName,\n      allowedTags: ALLOWED_TAGS\n    });\n    /* Detect mXSS attempts abusing namespace confusion */\n    if (currentNode.hasChildNodes() && !_isNode(currentNode.firstElementChild) && regExpTest(/<[/\\w]/g, currentNode.innerHTML) && regExpTest(/<[/\\w]/g, currentNode.textContent)) {\n      _forceRemove(currentNode);\n      return true;\n    }\n    /* Remove any occurrence of processing instructions */\n    if (currentNode.nodeType === NODE_TYPE.progressingInstruction) {\n      _forceRemove(currentNode);\n      return true;\n    }\n    /* Remove any kind of possibly harmful comments */\n    if (SAFE_FOR_XML && currentNode.nodeType === NODE_TYPE.comment && regExpTest(/<[/\\w]/g, currentNode.data)) {\n      _forceRemove(currentNode);\n      return true;\n    }\n    /* Remove element if anything forbids its presence */\n    if (!ALLOWED_TAGS[tagName] || FORBID_TAGS[tagName]) {\n      /* Check if we have a custom element to handle */\n      if (!FORBID_TAGS[tagName] && _isBasicCustomElement(tagName)) {\n        if (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, tagName)) {\n          return false;\n        }\n        if (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(tagName)) {\n          return false;\n        }\n      }\n      /* Keep content except for bad-listed elements */\n      if (KEEP_CONTENT && !FORBID_CONTENTS[tagName]) {\n        const parentNode = getParentNode(currentNode) || currentNode.parentNode;\n        const childNodes = getChildNodes(currentNode) || currentNode.childNodes;\n        if (childNodes && parentNode) {\n          const childCount = childNodes.length;\n          for (let i = childCount - 1; i >= 0; --i) {\n            const childClone = cloneNode(childNodes[i], true);\n            childClone.__removalCount = (currentNode.__removalCount || 0) + 1;\n            parentNode.insertBefore(childClone, getNextSibling(currentNode));\n          }\n        }\n      }\n      _forceRemove(currentNode);\n      return true;\n    }\n    /* Check whether element has a valid namespace */\n    if (currentNode instanceof Element && !_checkValidNamespace(currentNode)) {\n      _forceRemove(currentNode);\n      return true;\n    }\n    /* Make sure that older browsers don't get fallback-tag mXSS */\n    if ((tagName === 'noscript' || tagName === 'noembed' || tagName === 'noframes') && regExpTest(/<\\/no(script|embed|frames)/i, currentNode.innerHTML)) {\n      _forceRemove(currentNode);\n      return true;\n    }\n    /* Sanitize element content to be template-safe */\n    if (SAFE_FOR_TEMPLATES && currentNode.nodeType === NODE_TYPE.text) {\n      /* Get the element's text content */\n      content = currentNode.textContent;\n      arrayForEach([MUSTACHE_EXPR, ERB_EXPR, TMPLIT_EXPR], expr => {\n        content = stringReplace(content, expr, ' ');\n      });\n      if (currentNode.textContent !== content) {\n        arrayPush(DOMPurify.removed, {\n          element: currentNode.cloneNode()\n        });\n        currentNode.textContent = content;\n      }\n    }\n    /* Execute a hook if present */\n    _executeHooks(hooks.afterSanitizeElements, currentNode, null);\n    return false;\n  };\n  /**\n   * _isValidAttribute\n   *\n   * @param lcTag Lowercase tag name of containing element.\n   * @param lcName Lowercase attribute name.\n   * @param value Attribute value.\n   * @return Returns true if `value` is valid, otherwise false.\n   */\n  // eslint-disable-next-line complexity\n  const _isValidAttribute = function _isValidAttribute(lcTag, lcName, value) {\n    /* Make sure attribute cannot clobber */\n    if (SANITIZE_DOM && (lcName === 'id' || lcName === 'name') && (value in document || value in formElement)) {\n      return false;\n    }\n    /* Allow valid data-* attributes: At least one character after \"-\"\n        (https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes)\n        XML-compatible (https://html.spec.whatwg.org/multipage/infrastructure.html#xml-compatible and http://www.w3.org/TR/xml/#d0e804)\n        We don't need to check the value; it's always URI safe. */\n    if (ALLOW_DATA_ATTR && !FORBID_ATTR[lcName] && regExpTest(DATA_ATTR, lcName)) ; else if (ALLOW_ARIA_ATTR && regExpTest(ARIA_ATTR, lcName)) ; else if (!ALLOWED_ATTR[lcName] || FORBID_ATTR[lcName]) {\n      if (\n      // First condition does a very basic check if a) it's basically a valid custom element tagname AND\n      // b) if the tagName passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck\n      // and c) if the attribute name passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.attributeNameCheck\n      _isBasicCustomElement(lcTag) && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, lcTag) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(lcTag)) && (CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.attributeNameCheck, lcName) || CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.attributeNameCheck(lcName)) ||\n      // Alternative, second condition checks if it's an `is`-attribute, AND\n      // the value passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck\n      lcName === 'is' && CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, value) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(value))) ; else {\n        return false;\n      }\n      /* Check value is safe. First, is attr inert? If so, is safe */\n    } else if (URI_SAFE_ATTRIBUTES[lcName]) ; else if (regExpTest(IS_ALLOWED_URI$1, stringReplace(value, ATTR_WHITESPACE, ''))) ; else if ((lcName === 'src' || lcName === 'xlink:href' || lcName === 'href') && lcTag !== 'script' && stringIndexOf(value, 'data:') === 0 && DATA_URI_TAGS[lcTag]) ; else if (ALLOW_UNKNOWN_PROTOCOLS && !regExpTest(IS_SCRIPT_OR_DATA, stringReplace(value, ATTR_WHITESPACE, ''))) ; else if (value) {\n      return false;\n    } else ;\n    return true;\n  };\n  /**\n   * _isBasicCustomElement\n   * checks if at least one dash is included in tagName, and it's not the first char\n   * for more sophisticated checking see https://github.com/sindresorhus/validate-element-name\n   *\n   * @param tagName name of the tag of the node to sanitize\n   * @returns Returns true if the tag name meets the basic criteria for a custom element, otherwise false.\n   */\n  const _isBasicCustomElement = function _isBasicCustomElement(tagName) {\n    return tagName !== 'annotation-xml' && stringMatch(tagName, CUSTOM_ELEMENT);\n  };\n  /**\n   * _sanitizeAttributes\n   *\n   * @protect attributes\n   * @protect nodeName\n   * @protect removeAttribute\n   * @protect setAttribute\n   *\n   * @param currentNode to sanitize\n   */\n  const _sanitizeAttributes = function _sanitizeAttributes(currentNode) {\n    /* Execute a hook if present */\n    _executeHooks(hooks.beforeSanitizeAttributes, currentNode, null);\n    const {\n      attributes\n    } = currentNode;\n    /* Check if we have attributes; if not we might have a text node */\n    if (!attributes || _isClobbered(currentNode)) {\n      return;\n    }\n    const hookEvent = {\n      attrName: '',\n      attrValue: '',\n      keepAttr: true,\n      allowedAttributes: ALLOWED_ATTR,\n      forceKeepAttr: undefined\n    };\n    let l = attributes.length;\n    /* Go backwards over all attributes; safely remove bad ones */\n    while (l--) {\n      const attr = attributes[l];\n      const {\n        name,\n        namespaceURI,\n        value: attrValue\n      } = attr;\n      const lcName = transformCaseFunc(name);\n      let value = name === 'value' ? attrValue : stringTrim(attrValue);\n      /* Execute a hook if present */\n      hookEvent.attrName = lcName;\n      hookEvent.attrValue = value;\n      hookEvent.keepAttr = true;\n      hookEvent.forceKeepAttr = undefined; // Allows developers to see this is a property they can set\n      _executeHooks(hooks.uponSanitizeAttribute, currentNode, hookEvent);\n      value = hookEvent.attrValue;\n      /* Full DOM Clobbering protection via namespace isolation,\n       * Prefix id and name attributes with `user-content-`\n       */\n      if (SANITIZE_NAMED_PROPS && (lcName === 'id' || lcName === 'name')) {\n        // Remove the attribute with this value\n        _removeAttribute(name, currentNode);\n        // Prefix the value and later re-create the attribute with the sanitized value\n        value = SANITIZE_NAMED_PROPS_PREFIX + value;\n      }\n      /* Work around a security issue with comments inside attributes */\n      if (SAFE_FOR_XML && regExpTest(/((--!?|])>)|<\\/(style|title)/i, value)) {\n        _removeAttribute(name, currentNode);\n        continue;\n      }\n      /* Did the hooks approve of the attribute? */\n      if (hookEvent.forceKeepAttr) {\n        continue;\n      }\n      /* Remove attribute */\n      _removeAttribute(name, currentNode);\n      /* Did the hooks approve of the attribute? */\n      if (!hookEvent.keepAttr) {\n        continue;\n      }\n      /* Work around a security issue in jQuery 3.0 */\n      if (!ALLOW_SELF_CLOSE_IN_ATTR && regExpTest(/\\/>/i, value)) {\n        _removeAttribute(name, currentNode);\n        continue;\n      }\n      /* Sanitize attribute content to be template-safe */\n      if (SAFE_FOR_TEMPLATES) {\n        arrayForEach([MUSTACHE_EXPR, ERB_EXPR, TMPLIT_EXPR], expr => {\n          value = stringReplace(value, expr, ' ');\n        });\n      }\n      /* Is `value` valid for this attribute? */\n      const lcTag = transformCaseFunc(currentNode.nodeName);\n      if (!_isValidAttribute(lcTag, lcName, value)) {\n        continue;\n      }\n      /* Handle attributes that require Trusted Types */\n      if (trustedTypesPolicy && typeof trustedTypes === 'object' && typeof trustedTypes.getAttributeType === 'function') {\n        if (namespaceURI) ; else {\n          switch (trustedTypes.getAttributeType(lcTag, lcName)) {\n            case 'TrustedHTML':\n              {\n                value = trustedTypesPolicy.createHTML(value);\n                break;\n              }\n            case 'TrustedScriptURL':\n              {\n                value = trustedTypesPolicy.createScriptURL(value);\n                break;\n              }\n          }\n        }\n      }\n      /* Handle invalid data-* attribute set by try-catching it */\n      try {\n        if (namespaceURI) {\n          currentNode.setAttributeNS(namespaceURI, name, value);\n        } else {\n          /* Fallback to setAttribute() for browser-unrecognized namespaces e.g. \"x-schema\". */\n          currentNode.setAttribute(name, value);\n        }\n        if (_isClobbered(currentNode)) {\n          _forceRemove(currentNode);\n        } else {\n          arrayPop(DOMPurify.removed);\n        }\n      } catch (_) {}\n    }\n    /* Execute a hook if present */\n    _executeHooks(hooks.afterSanitizeAttributes, currentNode, null);\n  };\n  /**\n   * _sanitizeShadowDOM\n   *\n   * @param fragment to iterate over recursively\n   */\n  const _sanitizeShadowDOM = function _sanitizeShadowDOM(fragment) {\n    let shadowNode = null;\n    const shadowIterator = _createNodeIterator(fragment);\n    /* Execute a hook if present */\n    _executeHooks(hooks.beforeSanitizeShadowDOM, fragment, null);\n    while (shadowNode = shadowIterator.nextNode()) {\n      /* Execute a hook if present */\n      _executeHooks(hooks.uponSanitizeShadowNode, shadowNode, null);\n      /* Sanitize tags and elements */\n      _sanitizeElements(shadowNode);\n      /* Check attributes next */\n      _sanitizeAttributes(shadowNode);\n      /* Deep shadow DOM detected */\n      if (shadowNode.content instanceof DocumentFragment) {\n        _sanitizeShadowDOM(shadowNode.content);\n      }\n    }\n    /* Execute a hook if present */\n    _executeHooks(hooks.afterSanitizeShadowDOM, fragment, null);\n  };\n  // eslint-disable-next-line complexity\n  DOMPurify.sanitize = function (dirty) {\n    let cfg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n    let body = null;\n    let importedNode = null;\n    let currentNode = null;\n    let returnNode = null;\n    /* Make sure we have a string to sanitize.\n      DO NOT return early, as this will return the wrong type if\n      the user has requested a DOM object rather than a string */\n    IS_EMPTY_INPUT = !dirty;\n    if (IS_EMPTY_INPUT) {\n      dirty = '<!-->';\n    }\n    /* Stringify, in case dirty is an object */\n    if (typeof dirty !== 'string' && !_isNode(dirty)) {\n      if (typeof dirty.toString === 'function') {\n        dirty = dirty.toString();\n        if (typeof dirty !== 'string') {\n          throw typeErrorCreate('dirty is not a string, aborting');\n        }\n      } else {\n        throw typeErrorCreate('toString is not a function');\n      }\n    }\n    /* Return dirty HTML if DOMPurify cannot run */\n    if (!DOMPurify.isSupported) {\n      return dirty;\n    }\n    /* Assign config vars */\n    if (!SET_CONFIG) {\n      _parseConfig(cfg);\n    }\n    /* Clean up removed elements */\n    DOMPurify.removed = [];\n    /* Check if dirty is correctly typed for IN_PLACE */\n    if (typeof dirty === 'string') {\n      IN_PLACE = false;\n    }\n    if (IN_PLACE) {\n      /* Do some early pre-sanitization to avoid unsafe root nodes */\n      if (dirty.nodeName) {\n        const tagName = transformCaseFunc(dirty.nodeName);\n        if (!ALLOWED_TAGS[tagName] || FORBID_TAGS[tagName]) {\n          throw typeErrorCreate('root node is forbidden and cannot be sanitized in-place');\n        }\n      }\n    } else if (dirty instanceof Node) {\n      /* If dirty is a DOM element, append to an empty document to avoid\n         elements being stripped by the parser */\n      body = _initDocument('<!---->');\n      importedNode = body.ownerDocument.importNode(dirty, true);\n      if (importedNode.nodeType === NODE_TYPE.element && importedNode.nodeName === 'BODY') {\n        /* Node is already a body, use as is */\n        body = importedNode;\n      } else if (importedNode.nodeName === 'HTML') {\n        body = importedNode;\n      } else {\n        // eslint-disable-next-line unicorn/prefer-dom-node-append\n        body.appendChild(importedNode);\n      }\n    } else {\n      /* Exit directly if we have nothing to do */\n      if (!RETURN_DOM && !SAFE_FOR_TEMPLATES && !WHOLE_DOCUMENT &&\n      // eslint-disable-next-line unicorn/prefer-includes\n      dirty.indexOf('<') === -1) {\n        return trustedTypesPolicy && RETURN_TRUSTED_TYPE ? trustedTypesPolicy.createHTML(dirty) : dirty;\n      }\n      /* Initialize the document to work on */\n      body = _initDocument(dirty);\n      /* Check we have a DOM node from the data */\n      if (!body) {\n        return RETURN_DOM ? null : RETURN_TRUSTED_TYPE ? emptyHTML : '';\n      }\n    }\n    /* Remove first element node (ours) if FORCE_BODY is set */\n    if (body && FORCE_BODY) {\n      _forceRemove(body.firstChild);\n    }\n    /* Get node iterator */\n    const nodeIterator = _createNodeIterator(IN_PLACE ? dirty : body);\n    /* Now start iterating over the created document */\n    while (currentNode = nodeIterator.nextNode()) {\n      /* Sanitize tags and elements */\n      _sanitizeElements(currentNode);\n      /* Check attributes next */\n      _sanitizeAttributes(currentNode);\n      /* Shadow DOM detected, sanitize it */\n      if (currentNode.content instanceof DocumentFragment) {\n        _sanitizeShadowDOM(currentNode.content);\n      }\n    }\n    /* If we sanitized `dirty` in-place, return it. */\n    if (IN_PLACE) {\n      return dirty;\n    }\n    /* Return sanitized string or DOM */\n    if (RETURN_DOM) {\n      if (RETURN_DOM_FRAGMENT) {\n        returnNode = createDocumentFragment.call(body.ownerDocument);\n        while (body.firstChild) {\n          // eslint-disable-next-line unicorn/prefer-dom-node-append\n          returnNode.appendChild(body.firstChild);\n        }\n      } else {\n        returnNode = body;\n      }\n      if (ALLOWED_ATTR.shadowroot || ALLOWED_ATTR.shadowrootmode) {\n        /*\n          AdoptNode() is not used because internal state is not reset\n          (e.g. the past names map of a HTMLFormElement), this is safe\n          in theory but we would rather not risk another attack vector.\n          The state that is cloned by importNode() is explicitly defined\n          by the specs.\n        */\n        returnNode = importNode.call(originalDocument, returnNode, true);\n      }\n      return returnNode;\n    }\n    let serializedHTML = WHOLE_DOCUMENT ? body.outerHTML : body.innerHTML;\n    /* Serialize doctype if allowed */\n    if (WHOLE_DOCUMENT && ALLOWED_TAGS['!doctype'] && body.ownerDocument && body.ownerDocument.doctype && body.ownerDocument.doctype.name && regExpTest(DOCTYPE_NAME, body.ownerDocument.doctype.name)) {\n      serializedHTML = '<!DOCTYPE ' + body.ownerDocument.doctype.name + '>\\n' + serializedHTML;\n    }\n    /* Sanitize final string template-safe */\n    if (SAFE_FOR_TEMPLATES) {\n      arrayForEach([MUSTACHE_EXPR, ERB_EXPR, TMPLIT_EXPR], expr => {\n        serializedHTML = stringReplace(serializedHTML, expr, ' ');\n      });\n    }\n    return trustedTypesPolicy && RETURN_TRUSTED_TYPE ? trustedTypesPolicy.createHTML(serializedHTML) : serializedHTML;\n  };\n  DOMPurify.setConfig = function () {\n    let cfg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n    _parseConfig(cfg);\n    SET_CONFIG = true;\n  };\n  DOMPurify.clearConfig = function () {\n    CONFIG = null;\n    SET_CONFIG = false;\n  };\n  DOMPurify.isValidAttribute = function (tag, attr, value) {\n    /* Initialize shared config vars if necessary. */\n    if (!CONFIG) {\n      _parseConfig({});\n    }\n    const lcTag = transformCaseFunc(tag);\n    const lcName = transformCaseFunc(attr);\n    return _isValidAttribute(lcTag, lcName, value);\n  };\n  DOMPurify.addHook = function (entryPoint, hookFunction) {\n    if (typeof hookFunction !== 'function') {\n      return;\n    }\n    arrayPush(hooks[entryPoint], hookFunction);\n  };\n  DOMPurify.removeHook = function (entryPoint, hookFunction) {\n    if (hookFunction !== undefined) {\n      const index = arrayLastIndexOf(hooks[entryPoint], hookFunction);\n      return index === -1 ? undefined : arraySplice(hooks[entryPoint], index, 1)[0];\n    }\n    return arrayPop(hooks[entryPoint]);\n  };\n  DOMPurify.removeHooks = function (entryPoint) {\n    hooks[entryPoint] = [];\n  };\n  DOMPurify.removeAllHooks = function () {\n    hooks = _createHooksMap();\n  };\n  return DOMPurify;\n}\nvar purify = createDOMPurify();\n\nmodule.exports = purify;\n//# sourceMappingURL=purify.cjs.js.map\n\n\n//# sourceURL=webpack://Formio/./node_modules/dompurify/dist/purify.cjs.js?");
 
 /***/ }),
 
@@ -4861,7 +4861,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst compare_versions_1 = __webpack_require__(/*! compare-versions */ \"./node_modules/compare-versions/lib/esm/index.js\");\nconst EventEmitter_1 = __importDefault(__webpack_require__(/*! ./EventEmitter */ \"./lib/cjs/EventEmitter.js\"));\nconst i18n_1 = __importDefault(__webpack_require__(/*! ./i18n */ \"./lib/cjs/i18n.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst Components_1 = __importDefault(__webpack_require__(/*! ./components/Components */ \"./lib/cjs/components/Components.js\"));\nconst NestedDataComponent_1 = __importDefault(__webpack_require__(/*! ./components/_classes/nesteddata/NestedDataComponent */ \"./lib/cjs/components/_classes/nesteddata/NestedDataComponent.js\"));\nconst utils_1 = __webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst formUtils_1 = __webpack_require__(/*! ./utils/formUtils */ \"./lib/cjs/utils/formUtils.js\");\n// We need this here because dragula pulls in CustomEvent class that requires global to exist.\nif (typeof window !== 'undefined' && typeof window.global === 'undefined') {\n    window.global = window;\n}\nconst dragula_1 = __importDefault(__webpack_require__(/*! dragula */ \"./node_modules/dragula/dragula.js\"));\n// Initialize the available forms.\nFormio_1.Formio.forms = {};\n// Allow people to register components.\nFormio_1.Formio.registerComponent = Components_1.default.setComponent;\n/**\n *\n * @param {any} icons  - The icons to use.\n * @returns {any} - The icon set.\n */\nfunction getIconSet(icons) {\n    if (icons === \"fontawesome\") {\n        return \"fa\";\n    }\n    return icons || \"\";\n}\n/**\n *\n * @param {any} options - The options to get.\n * @returns {any} - The options.\n */\nfunction getOptions(options) {\n    options = lodash_1.default.defaults(options, {\n        submitOnEnter: false,\n        iconset: getIconSet(options && options.icons ? options.icons : Formio_1.Formio.icons),\n        i18next: null,\n        saveDraft: false,\n        alwaysDirty: false,\n        saveDraftThrottle: 5000,\n        display: \"form\",\n        cdnUrl: Formio_1.Formio.cdn.baseUrl,\n    });\n    if (!options.events) {\n        options.events = new EventEmitter_1.default();\n    }\n    return options;\n}\n/**\n * Represents a JSON value.\n * @typedef {(string | number | boolean | null | JSONArray | JSONObject)} JSON\n */\n/**\n * Represents a JSON array.\n * @typedef {Array<JSON>} JSONArray\n */\n/**\n * Represents a JSON object.\n * @typedef {{[key: string]: JSON}} JSONObject\n */\n/**\n * @typedef {object} FormioHooks\n * @property {Function} [beforeSubmit] - A function that is called before the form is submitted.\n * @property {Function} [beforeCancel] - A function that is called before the form is canceled.\n * @property {Function} [beforeNext] - A function that is called before moving to the next page in a multi-page form.\n * @property {Function} [beforePrev] - A function that is called before moving to the previous page in a multi-page form.\n * @property {Function} [attachComponent] - A function that is called when a component is attached to the form.\n * @property {Function} [setDataValue] - A function that is called when setting the value of a data component.\n * @property {Function} [addComponents] - A function that is called when adding multiple components to the form.\n * @property {Function} [addComponent] - A function that is called when adding a single component to the form.\n * @property {Function} [customValidation] - A function that is called for custom validation of the form.\n * @property {Function} [attachWebform] - A function that is called when attaching a webform to the form.\n */\n/**\n * @typedef {object} SanitizeConfig\n * @property {string[]} [addAttr] - The attributes to add.\n * @property {string[]} [addTags] - The tags to add.\n * @property {string[]} [allowedAttrs] - The allowed attributes.\n * @property {string[]} [allowedTags] - The allowed tags.\n * @property {string[]} [allowedUriRegex] - The allowed URI regex.\n * @property {string[]} [addUriSafeAttr] - The URI safe attributes.\n */\n/**\n * @typedef {object} ButtonSettings\n * @property {boolean} [showPrevious] - Show the \"Previous\" button.\n * @property {boolean} [showNext] - Show the \"Next\" button.\n * @property {boolean} [showCancel] - Show the \"Cancel\" button.\n * @property {boolean} [showSubmit] - Show the \"Submit\" button.\n */\n/**\n * @typedef {object} FormOptions\n * @property {boolean} [saveDraft] - Enable the save draft feature.\n * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.\n * @property {boolean} [readOnly] - Set this form to readOnly.\n * @property {boolean} [noAlerts] - Disable the alerts dialog.\n * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.\n * @property {string} [template] - Custom logic for creation of elements.\n * @property {boolean} [noDefaults] - Exclude default values from the settings.\n * @property {any} [fileService] - The file service for this form.\n * @property {EventEmitter} [events] - The EventEmitter for this form.\n * @property {string} [language] - The language to render this form in.\n * @property {{[key: string]: string}} [i18next] - The i18next configuration for this form.\n * @property {boolean} [viewAsHtml] - View the form as raw HTML.\n * @property {'form' | 'html' | 'flat' | 'builder' | 'pdf'} [renderMode] - The render mode for this form.\n * @property {boolean} [highlightErrors] - Highlight any errors on the form.\n * @property {string} [componentErrorClass] - The error class for components.\n * @property {any} [templates] - The templates for this form.\n * @property {string} [iconset] - The iconset for this form.\n * @property {import('@formio/core').Component[]} [components] - The components for this form.\n * @property {{[key: string]: boolean}} [disabled] - Disabled components for this form.\n * @property {boolean} [showHiddenFields] - Show hidden fields.\n * @property {{[key: string]: boolean}} [hide] - Hidden components for this form.\n * @property {{[key: string]: boolean}} [show] - Components to show for this form.\n * @property {Formio} [formio] - The Formio instance for this form.\n * @property {string} [decimalSeparator] - The decimal separator for this form.\n * @property {string} [thousandsSeparator] - The thousands separator for this form.\n * @property {FormioHooks} [hooks] - The hooks for this form.\n * @property {boolean} [alwaysDirty] - Always be dirty.\n * @property {boolean} [skipDraftRestore] - Skip restoring a draft.\n * @property {'form' | 'wizard' | 'pdf'} [display] - The display for this form.\n * @property {string} [cdnUrl] - The CDN url for this form.\n * @property {boolean} [flatten] - Flatten the form.\n * @property {boolean} [sanitize] - Sanitize the form.\n * @property {SanitizeConfig} [sanitizeConfig] - The sanitize configuration for this form.\n * @property {ButtonSettings} [buttonSettings] - The button settings for this form.\n * @property {object} [breadcrumbSettings] - The breadcrumb settings for this form.\n * @property {boolean} [allowPrevious] - Allow the previous button (for Wizard forms).\n * @property {string[]} [wizardButtonOrder] - The order of the buttons (for Wizard forms).\n * @property {boolean} [showCheckboxBackground] - Show the checkbox background.\n * @property {boolean} [inputsOnly] - Only show inputs in the form and no labels.\n * @property {boolean} [building] - If we are in the process of building the form.\n * @property {number} [zoom] - The zoom for PDF forms.\n */\nclass Webform extends NestedDataComponent_1.default {\n    /**\n     * Creates a new Form instance.\n     * @param {HTMLElement | object | import('Form').FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.\n     * @param {import('Form').FormOptions} [options] - The options to create a new form instance.\n     */\n    constructor(elementOrOptions, options = undefined) {\n        let element, formOptions;\n        if (elementOrOptions instanceof HTMLElement || options) {\n            element = elementOrOptions;\n            formOptions = options || {};\n        }\n        else {\n            formOptions = elementOrOptions || {};\n        }\n        super(null, getOptions(formOptions));\n        this.executeShortcuts = (event) => {\n            const { target } = event;\n            if (!this.keyboardCatchableElement(target)) {\n                return;\n            }\n            const ctrl = event.ctrlKey || event.metaKey;\n            const keyCode = event.keyCode;\n            let char = \"\";\n            if (65 <= keyCode && keyCode <= 90) {\n                char = String.fromCharCode(keyCode);\n            }\n            else if (keyCode === 13) {\n                char = \"Enter\";\n            }\n            else if (keyCode === 27) {\n                char = \"Esc\";\n            }\n            lodash_1.default.each(this.shortcuts, (shortcut) => {\n                if (shortcut.ctrl && !ctrl) {\n                    return;\n                }\n                if (shortcut.shortcut === char) {\n                    shortcut.element.click();\n                    event.preventDefault();\n                }\n            });\n        };\n        this.setElement(element);\n        // Keep track of all available forms globally.\n        Formio_1.Formio.forms[this.id] = this;\n        // Set the base url.\n        if (this.options.baseUrl) {\n            Formio_1.Formio.setBaseUrl(this.options.baseUrl);\n        }\n        /**\n         * The type of this element.\n         * @type {string}\n         */\n        this.type = \"form\";\n        this._src = \"\";\n        this._loading = false;\n        this._form = {};\n        this.draftEnabled = false;\n        this.savingDraft = false;\n        if (this.options.saveDraftThrottle) {\n            this.triggerSaveDraft = lodash_1.default.throttle(this.saveDraft.bind(this), this.options.saveDraftThrottle);\n        }\n        else {\n            this.triggerSaveDraft = this.saveDraft.bind(this);\n        }\n        /**\n         * Determines if this form should submit the API on submit.\n         * @type {boolean}\n         */\n        this.nosubmit = false;\n        /**\n         * Determines if the form has tried to be submitted, error or not.\n         * @type {boolean}\n         */\n        this.submitted = false;\n        /**\n         * Determines if the form is being submitted at the moment.\n         * @type {boolean}\n         */\n        this.submitting = false;\n        /**\n         * The Formio instance for this form.\n         * @type {Formio}\n         */\n        this.formio = null;\n        /**\n         * The loader HTML element.\n         * @type {HTMLElement}\n         */\n        this.loader = null;\n        /**\n         * The alert HTML element\n         * @type {HTMLElement}\n         */\n        this.alert = null;\n        /**\n         * Promise that is triggered when the submission is done loading.\n         * @type {Promise}\n         */\n        this.onSubmission = null;\n        /**\n         * Determines if this submission is explicitly set.\n         * @type {boolean}\n         */\n        this.submissionSet = false;\n        /**\n         * Promise that executes when the form is ready and rendered.\n         * @type {Promise}\n         * @example\n         * import Webform from '@formio/js/Webform';\n         * let form = new Webform(document.getElementById('formio'));\n         * form.formReady.then(() => {\n         *   console.log('The form is ready!');\n         * });\n         * form.src = 'https://examples.form.io/example';\n         */\n        this.formReady = new Promise((resolve, reject) => {\n            /**\n             * Called when the formReady state of this form has been resolved.\n             * @type {Function}\n             */\n            this.formReadyResolve = resolve;\n            /**\n             * Called when this form could not load and is rejected.\n             * @type {Function}\n             */\n            this.formReadyReject = reject;\n        });\n        /**\n         * Promise that executes when the submission is ready and rendered.\n         * @type {Promise}\n         * @example\n         * import Webform from '@formio/js/Webform';\n         * let form = new Webform(document.getElementById('formio'));\n         * form.submissionReady.then(() => {\n         *   console.log('The submission is ready!');\n         * });\n         * form.src = 'https://examples.form.io/example/submission/234234234234234243';\n         */\n        this.submissionReady = new Promise((resolve, reject) => {\n            /**\n             * Called when the formReady state of this form has been resolved.\n             * @type {Function}\n             */\n            this.submissionReadyResolve = resolve;\n            /**\n             * Called when this form could not load and is rejected.\n             * @type {Function}\n             */\n            this.submissionReadyReject = reject;\n        });\n        this.shortcuts = [];\n        // Set language after everything is established.\n        this.language = this.i18next.language;\n        // See if we need to restore the draft from a user.\n        if (this.options.saveDraft) {\n            if (this.options.skipDraftRestore) {\n                this.draftEnabled = true;\n                this.savingDraft = false;\n            }\n            else {\n                this.formReady.then(() => {\n                    const user = Formio_1.Formio.getUser();\n                    // Only restore a draft if the submission isn't explicitly set.\n                    if (user && !this.submissionSet) {\n                        this.restoreDraft(user._id);\n                    }\n                });\n            }\n        }\n        this.component.clearOnHide = false;\n        // Ensure the root is set to this component.\n        this.root = this;\n        this.localRoot = this;\n        this.root.dragulaLib = dragula_1.default;\n    }\n    /* eslint-enable max-statements */\n    get language() {\n        return this.options.language;\n    }\n    get emptyValue() {\n        return null;\n    }\n    componentContext() {\n        return this._data;\n    }\n    /**\n     * Sets the language for this form.\n     * @param {string} lang - The language to use (e.g. 'en', 'sp', etc.)\n     */\n    set language(lang) {\n        if (!this.i18next) {\n            return;\n        }\n        this.options.language = lang;\n        if (this.i18next.language === lang) {\n            return;\n        }\n        this.i18next.changeLanguage(lang, (err) => {\n            if (err) {\n                return;\n            }\n            this.rebuild();\n            this.emit(\"languageChanged\");\n        });\n    }\n    get componentComponents() {\n        return this.form.components;\n    }\n    get shadowRoot() {\n        return this.options.shadowRoot;\n    }\n    /**\n     * Add a language for translations\n     * @param {string} code - The language code for the language being added.\n     * @param {object} lang - The language translations.\n     * @param {boolean} [active] - If this language should be set as the active language.\n     */\n    addLanguage(code, lang, active = false) {\n        if (this.i18next) {\n            var translations = lodash_1.default.assign((0, utils_1.fastCloneDeep)(i18n_1.default.resources.en.translation), lang);\n            this.i18next.addResourceBundle(code, \"translation\", translations, true, true);\n            if (active) {\n                this.language = code;\n            }\n        }\n    }\n    keyboardCatchableElement(element) {\n        if (element.nodeName === \"TEXTAREA\") {\n            return false;\n        }\n        if (element.nodeName === \"INPUT\") {\n            return [\"text\", \"email\", \"password\"].indexOf(element.type) === -1;\n        }\n        return true;\n    }\n    addShortcut(element, shortcut) {\n        if (!shortcut || !/^([A-Z]|Enter|Esc)$/i.test(shortcut)) {\n            return;\n        }\n        shortcut = lodash_1.default.capitalize(shortcut);\n        if (shortcut === \"Enter\" || shortcut === \"Esc\") {\n            // Restrict Enter and Esc only for buttons\n            if (element.tagName !== \"BUTTON\") {\n                return;\n            }\n            this.shortcuts.push({\n                shortcut,\n                element,\n            });\n        }\n        else {\n            this.shortcuts.push({\n                ctrl: true,\n                shortcut,\n                element,\n            });\n        }\n    }\n    removeShortcut(element, shortcut) {\n        if (!shortcut || !/^([A-Z]|Enter|Esc)$/i.test(shortcut)) {\n            return;\n        }\n        lodash_1.default.remove(this.shortcuts, {\n            shortcut,\n            element,\n        });\n    }\n    /**\n     * Get the embed source of the form.\n     * @returns {string} - The source of the form.\n     */\n    get src() {\n        return this._src;\n    }\n    /**\n     * Loads the submission if applicable.\n     * @returns {Promise} - The promise that is triggered when the submission is loaded.\n     */\n    loadSubmission() {\n        this.loadingSubmission = true;\n        if (this.formio.submissionId) {\n            this.onSubmission = this.formio\n                .loadSubmission()\n                .then((submission) => this.setSubmission(submission), (err) => this.submissionReadyReject(err))\n                .catch((err) => this.submissionReadyReject(err));\n        }\n        else {\n            this.submissionReadyResolve();\n        }\n        return this.submissionReady;\n    }\n    /**\n     * Set the src of the form renderer.\n     * @param {string} value - The source value to set.\n     * @param {any} options - The options to set.\n     * @returns {Promise} - The promise that is triggered when the form is set.\n     */\n    setSrc(value, options) {\n        if (this.setUrl(value, options)) {\n            this.nosubmit = false;\n            return this.formio\n                .loadForm({ params: { live: 1 } })\n                .then((form) => {\n                const setForm = this.setForm(form);\n                this.loadSubmission();\n                return setForm;\n            })\n                .catch((err) => {\n                console.warn(err);\n                this.formReadyReject(err);\n            });\n        }\n        return Promise.resolve();\n    }\n    /**\n     * Set the Form source, which is typically the Form.io embed URL.\n     * @param {string} value - The value of the form embed url.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.formReady.then(() => {\n     *   console.log('The form is formReady!');\n     * });\n     * form.src = 'https://examples.form.io/example';\n     */\n    set src(value) {\n        this.setSrc(value);\n    }\n    /**\n     * Get the embed source of the form.\n     * @returns {string} - returns the source of the form.\n     */\n    get url() {\n        return this._src;\n    }\n    /**\n     * Sets the url of the form renderer.\n     * @param {string} value - The value to set the url to.\n     * @param {any} options - The options to set.\n     * @returns {boolean} - TRUE means the url was set, FALSE otherwise.\n     */\n    setUrl(value, options) {\n        if (!value || typeof value !== \"string\" || value === this._src) {\n            return false;\n        }\n        this._src = value;\n        this.nosubmit = true;\n        this.formio = this.options.formio = new Formio_1.Formio(value, options);\n        if (this.type === \"form\") {\n            // Set the options source so this can be passed to other components.\n            this.options.src = value;\n        }\n        return true;\n    }\n    /**\n     * Set the form source but don't initialize the form and submission from the url.\n     * @param {string} value - The value of the form embed url.\n     */\n    set url(value) {\n        this.setUrl(value);\n    }\n    /**\n     * Called when both the form and submission have been loaded.\n     * @returns {Promise} - The promise to trigger when both form and submission have loaded.\n     */\n    get ready() {\n        return this.formReady.then(() => {\n            return super.ready.then(() => {\n                return this.loadingSubmission ? this.submissionReady : true;\n            });\n        });\n    }\n    /**\n     * Returns if this form is loading.\n     * @returns {boolean} - TRUE means the form is loading, FALSE otherwise.\n     */\n    get loading() {\n        return this._loading;\n    }\n    /**\n     * Set the loading state for this form, and also show the loader spinner.\n     * @param {boolean} loading - If this form should be \"loading\" or not.\n     */\n    set loading(loading) {\n        if (this._loading !== loading) {\n            this._loading = loading;\n            if (!this.loader && loading) {\n                this.loader = this.ce(\"div\", {\n                    class: \"loader-wrapper\",\n                });\n                const spinner = this.ce(\"div\", {\n                    class: \"loader text-center\",\n                });\n                this.loader.appendChild(spinner);\n            }\n            /* eslint-disable max-depth */\n            if (this.loader) {\n                try {\n                    if (loading) {\n                        this.prependTo(this.loader, this.wrapper);\n                    }\n                    else {\n                        this.removeChildFrom(this.loader, this.wrapper);\n                    }\n                }\n                catch (err) {\n                    // ingore\n                }\n            }\n            /* eslint-enable max-depth */\n        }\n    }\n    /**\n     * Sets the JSON schema for the form to be rendered.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.setForm({\n     *   components: [\n     *     {\n     *       type: 'textfield',\n     *       key: 'firstName',\n     *       label: 'First Name',\n     *       placeholder: 'Enter your first name.',\n     *       input: true\n     *     },\n     *     {\n     *       type: 'textfield',\n     *       key: 'lastName',\n     *       label: 'Last Name',\n     *       placeholder: 'Enter your last name',\n     *       input: true\n     *     },\n     *     {\n     *       type: 'button',\n     *       action: 'submit',\n     *       label: 'Submit',\n     *       theme: 'primary'\n     *     }\n     *   ]\n     * });\n     * @param {object} form - The JSON schema of the form @see https://examples.form.io/example for an example JSON schema.\n     * @param {any} flags - Any flags to apply when setting the form.\n     * @returns {Promise} - The promise that is triggered when the form is set.\n     */\n    setForm(form, flags = {}) {\n        var _a;\n        const isFormAlreadySet = this._form && ((_a = this._form.components) === null || _a === void 0 ? void 0 : _a.length);\n        try {\n            // Do not set the form again if it has been already set\n            if (isFormAlreadySet && JSON.stringify(this._form) === JSON.stringify(form)) {\n                this.formReadyResolve();\n                return Promise.resolve();\n            }\n            // Create the form.\n            this._form = (flags === null || flags === void 0 ? void 0 : flags.keepAsReference) ? form : lodash_1.default.cloneDeep(form);\n            if (this.onSetForm) {\n                this.onSetForm(lodash_1.default.cloneDeep(this._form), form);\n            }\n        }\n        catch (err) {\n            console.warn(err);\n            // If provided form is not a valid JSON object, do not set it too\n            this.formReadyReject(err);\n            return Promise.resolve();\n        }\n        // Allow the form to provide component overrides.\n        if (form && form.settings && form.settings.components) {\n            this.options.components = form.settings.components;\n        }\n        if (form && form.properties) {\n            this.options.properties = form.properties;\n        }\n        // Use the sanitize config from the form settings or the global sanitize config if it is not provided in the options\n        if (!this.options.sanitizeConfig && !this.builderMode) {\n            this.options.sanitizeConfig =\n                lodash_1.default.get(form, \"settings.sanitizeConfig\") ||\n                    lodash_1.default.get(form, \"globalSettings.sanitizeConfig\");\n        }\n        if (\"schema\" in form && (0, compare_versions_1.compareVersions)(form.schema, \"1.x\") > 0) {\n            this.ready.then(() => {\n                this.setAlert(\"alert alert-danger\", \"Form schema is for a newer version, please upgrade your renderer. Some functionality may not work.\");\n            });\n        }\n        // See if they pass a module, and evaluate it if so.\n        if (form && form.module) {\n            let formModule = null;\n            if (typeof form.module === \"string\") {\n                try {\n                    formModule = this.evaluate(`return ${form.module}`);\n                }\n                catch (err) {\n                    console.warn(err);\n                }\n            }\n            else {\n                formModule = form.module;\n            }\n            if (formModule) {\n                Formio_1.Formio.use(formModule);\n                // Since we got here after instantiation, we need to manually apply form options.\n                if (formModule.options && formModule.options.form) {\n                    this.options = Object.assign(this.options, formModule.options.form);\n                }\n            }\n        }\n        this.initialized = false;\n        const rebuild = this.rebuild() || Promise.resolve();\n        return rebuild.then(() => {\n            this.emit(\"formLoad\", form);\n            this.triggerCaptcha();\n            // Make sure to trigger onChange after a render event occurs to speed up form rendering.\n            setTimeout(() => {\n                this.onChange(flags);\n                this.formReadyResolve();\n            }, 0);\n            return this.formReady;\n        });\n    }\n    /**\n     * Gets the form object.\n     * @returns {object} - The form JSON schema.\n     */\n    get form() {\n        if (!this._form) {\n            this._form = {\n                components: [],\n            };\n        }\n        return this._form;\n    }\n    /**\n     * Sets the form value.\n     * @alias setForm\n     * @param {object} form - The form schema object.\n     */\n    set form(form) {\n        this.setForm(form);\n    }\n    /**\n     * Returns the submission object that was set within this form.\n     * @returns {object} - The submission object.\n     */\n    get submission() {\n        return this.getValue();\n    }\n    /**\n     * Sets the submission of a form.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.src = 'https://examples.form.io/example';\n     * form.submission = {data: {\n     *   firstName: 'Joe',\n     *   lastName: 'Smith',\n     *   email: 'joe@example.com'\n     * }};\n     * @param {object} submission - The Form.io submission object.\n     */\n    set submission(submission) {\n        this.setSubmission(submission);\n    }\n    /**\n     * Sets the submission value\n     * @param {object|null|undefined} submission - The submission to set.\n     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.\n     * @return {void}\n     */\n    onSetSubmission(submission, flags = {}) {\n        this.submissionSet = true;\n        this.triggerChange(flags);\n        this.emit('beforeSetSubmission', submission);\n        this.setValue(submission, flags);\n    }\n    /**\n     * Sets a submission and returns the promise when it is ready.\n     * @param {any} submission - The submission to set.\n     * @param {any} flags - Any flags to apply when setting the submission.\n     * @returns {Promise} - The promise that is triggered when the submission is set.\n     */\n    setSubmission(submission, flags = {}) {\n        flags = Object.assign(Object.assign({}, flags), { fromSubmission: lodash_1.default.has(flags, \"fromSubmission\") ? flags.fromSubmission : true });\n        return (this.onSubmission = this.formReady\n            .then((resolveFlags) => {\n            if (resolveFlags) {\n                flags = Object.assign(Object.assign({}, flags), resolveFlags);\n            }\n            this.onSetSubmission(submission, flags);\n            return this.submissionReadyResolve(submission);\n        }, (err) => this.submissionReadyReject(err))\n            .catch((err) => this.submissionReadyReject(err)));\n    }\n    handleDraftError(errName, errDetails, restoreDraft) {\n        const errorMessage = lodash_1.default.trim(`${this.t(errName)} ${errDetails || \"\"}`);\n        console.warn(errorMessage);\n        this.emit(restoreDraft ? \"restoreDraftError\" : \"saveDraftError\", errDetails || errorMessage);\n    }\n    saveDraft() {\n        if (!this.draftEnabled) {\n            return;\n        }\n        if (!this.formio) {\n            this.handleDraftError(\"saveDraftInstanceError\");\n            return;\n        }\n        if (!Formio_1.Formio.getUser()) {\n            this.handleDraftError(\"saveDraftAuthError\");\n            return;\n        }\n        const draft = (0, utils_1.fastCloneDeep)(this.submission);\n        draft.state = \"draft\";\n        if (!this.savingDraft && !this.submitting) {\n            this.emit(\"saveDraftBegin\");\n            this.savingDraft = true;\n            this.formio\n                .saveSubmission(draft)\n                .then((sub) => {\n                // Set id to submission to avoid creating new draft submission\n                this.submission._id = sub._id;\n                this.savingDraft = false;\n                this.emit(\"saveDraft\", sub);\n            })\n                .catch((err) => {\n                this.savingDraft = false;\n                this.handleDraftError(\"saveDraftError\", err);\n            });\n        }\n    }\n    /**\n     * Restores a draft submission based on the user who is authenticated.\n     * @param {string} userId - The user id where we need to restore the draft from.\n     */\n    restoreDraft(userId) {\n        const formio = this.formio || this.options.formio;\n        if (!formio) {\n            this.handleDraftError(\"restoreDraftInstanceError\", null, true);\n            return;\n        }\n        this.savingDraft = true;\n        formio\n            .loadSubmissions({\n            params: {\n                state: 'draft',\n                owner: userId,\n                sort: '-created'\n            },\n        })\n            .then((submissions) => {\n            if (submissions.length > 0 && !this.options.skipDraftRestore) {\n                const draft = (0, utils_1.fastCloneDeep)(submissions[0]);\n                return this.setSubmission(draft).then(() => {\n                    this.draftEnabled = true;\n                    this.savingDraft = false;\n                    this.emit(\"restoreDraft\", draft);\n                });\n            }\n            // Enable drafts so that we can keep track of changes.\n            this.draftEnabled = true;\n            this.savingDraft = false;\n            this.emit(\"restoreDraft\", null);\n        })\n            .catch((err) => {\n            this.draftEnabled = true;\n            this.savingDraft = false;\n            this.handleDraftError(\"restoreDraftError\", err, true);\n        });\n    }\n    get schema() {\n        const schema = (0, utils_1.fastCloneDeep)(lodash_1.default.omit(this._form, [\"components\"]));\n        schema.components = [];\n        this.eachComponent((component) => schema.components.push(component.schema));\n        return schema;\n    }\n    mergeData(_this, _that) {\n        lodash_1.default.mergeWith(_this, _that, (thisValue, thatValue) => {\n            if (Array.isArray(thisValue) &&\n                Array.isArray(thatValue) &&\n                thisValue.length !== thatValue.length) {\n                return thatValue;\n            }\n        });\n    }\n    setValue(submission, flags = {}) {\n        if (!submission || !submission.data) {\n            submission = {\n                data: {},\n            };\n        }\n        // Metadata needs to be available before setValue\n        this._submission.metadata = submission.metadata ? lodash_1.default.cloneDeep(submission.metadata) : {};\n        this.editing = !!submission._id;\n        // Set the timezone in the options if available.\n        if (!this.options.submissionTimezone &&\n            submission.metadata &&\n            submission.metadata.timezone) {\n            this.options.submissionTimezone = submission.metadata.timezone;\n        }\n        const changed = super.setValue(submission.data, flags);\n        if (!flags.sanitize) {\n            this.mergeData(this.data, submission.data);\n        }\n        submission.data = this.data;\n        this._submission = submission;\n        return changed;\n    }\n    getValue() {\n        if (!this._submission) {\n            this._submission = {};\n        }\n        if (!this._submission.data) {\n            this._submission.data = {};\n        }\n        if (this.viewOnly) {\n            return this._submission;\n        }\n        const submission = this._submission;\n        submission.data = this.data;\n        return this._submission;\n    }\n    /**\n     * Build the form.\n     * @returns {Promise} - The promise that is triggered when the form is built.\n     */\n    init() {\n        if (this.options.submission) {\n            const submission = lodash_1.default.extend({}, this.options.submission);\n            this._submission = submission;\n            this._data = submission.data;\n        }\n        else {\n            this._submission = this._submission || { data: {} };\n        }\n        // Remove any existing components.\n        if (this.components && this.components.length) {\n            this.destroyComponents();\n            this.components = [];\n        }\n        if (this.component) {\n            this.component.components = this.form ? this.form.components : [];\n        }\n        else {\n            this.component = this.form;\n        }\n        this.component.type = \"form\";\n        this.component.input = false;\n        this.addComponents();\n        this.on(\"submitButton\", (options) => {\n            this.submit(false, options).catch((e) => {\n                options.instance.loading = false;\n                return e !== false && e !== undefined && console.log(e);\n            });\n        }, true);\n        this.on(\"checkValidity\", (data) => this.validate(data, { dirty: true, process: \"change\" }), true);\n        this.on(\"requestUrl\", (args) => this.submitUrl(args.url, args.headers), true);\n        this.on(\"resetForm\", () => this.resetValue(), true);\n        this.on(\"deleteSubmission\", () => this.deleteSubmission(), true);\n        this.on(\"refreshData\", () => this.updateValue(), true);\n        this.executeFormController();\n        return this.formReady;\n    }\n    executeFormController() {\n        // If no controller value or\n        // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)\n        if (!this.form ||\n            !this.form.controller ||\n            ((!this.visible || this.component.hidden) &&\n                this.component.clearOnHide &&\n                !this.rootPristine)) {\n            return false;\n        }\n        this.formReady.then(() => {\n            this.evaluate(this.form.controller, {\n                components: this.components,\n                instance: this,\n            });\n        });\n    }\n    /**\n     *\n     */\n    teardown() {\n        this.emit(\"formDelete\", this.id);\n        delete Formio_1.Formio.forms[this.id];\n        delete this.executeShortcuts;\n        delete this.triggerSaveDraft;\n        super.teardown();\n    }\n    destroy(all = false) {\n        this.off(\"submitButton\");\n        this.off(\"checkValidity\");\n        this.off(\"requestUrl\");\n        this.off(\"resetForm\");\n        this.off(\"deleteSubmission\");\n        this.off(\"refreshData\");\n        return super.destroy(all);\n    }\n    build(element) {\n        if (element || this.element) {\n            return this.ready.then(() => {\n                element = element || this.element;\n                super.build(element);\n            });\n        }\n        return this.ready;\n    }\n    getClassName() {\n        let classes = \"formio-form\";\n        if (this.options.readOnly) {\n            classes += \" formio-read-only\";\n        }\n        return classes;\n    }\n    render() {\n        return super.render(this.renderTemplate(\"webform\", {\n            classes: this.getClassName(),\n            children: this.renderComponents(),\n        }), this.builderMode ? \"builder\" : \"form\", true);\n    }\n    redraw() {\n        // Don't bother if we have not built yet.\n        if (!this.element) {\n            return Promise.resolve();\n        }\n        this.clear();\n        this.setContent(this.element, this.render());\n        return this.attach(this.element);\n    }\n    attach(element) {\n        this.setElement(element);\n        this.loadRefs(element, { webform: \"single\" });\n        const childPromise = this.attachComponents(this.refs.webform);\n        this.addEventListener(document, \"keydown\", this.executeShortcuts);\n        this.currentForm = this;\n        this.hook(\"attachWebform\", element, this);\n        return childPromise.then(() => {\n            this.emit(\"render\", this.element);\n            return this.setValue(this._submission, {\n                noUpdateEvent: true,\n            });\n        });\n    }\n    hasRequiredFields() {\n        let result = false;\n        (0, formUtils_1.eachComponent)(this.form.components, (component) => {\n            if (component.validate.required) {\n                result = true;\n                return true;\n            }\n        }, true);\n        return result;\n    }\n    resetValue() {\n        lodash_1.default.each(this.getComponents(), (comp) => comp.resetValue());\n        this.setPristine(true);\n        this.onChange({ resetValue: true });\n    }\n    /**\n     * Sets a new alert to display in the error dialog of the form.\n     * @param {string} type - The type of alert to display. \"danger\", \"success\", \"warning\", etc.\n     * @param {string} message - The message to show in the alert.\n     * @param {object} options - The options for the alert.\n     */\n    setAlert(type, message, options) {\n        if (!type && this.submitted) {\n            if (this.alert) {\n                if (this.refs.errorRef && this.refs.errorRef.length) {\n                    this.refs.errorRef.forEach((el) => {\n                        this.removeEventListener(el, \"click\");\n                        this.removeEventListener(el, \"keypress\");\n                    });\n                }\n                this.removeChild(this.alert);\n                this.alert = null;\n            }\n            return;\n        }\n        if (this.options.noAlerts) {\n            if (!message) {\n                this.emit(\"error\", false);\n            }\n            return;\n        }\n        if (this.alert) {\n            try {\n                if (this.refs.errorRef && this.refs.errorRef.length) {\n                    this.refs.errorRef.forEach((el) => {\n                        this.removeEventListener(el, \"click\");\n                        this.removeEventListener(el, \"keypress\");\n                    });\n                }\n                this.removeChild(this.alert);\n                this.alert = null;\n            }\n            catch (err) {\n                // ignore\n            }\n        }\n        if (message) {\n            const attrs = {\n                class: (options && options.classes) || `alert alert-${type}`,\n                id: `error-list-${this.id}`,\n            };\n            const templateOptions = {\n                message: message instanceof HTMLElement ? message.outerHTML : message,\n                attrs: attrs,\n                type,\n            };\n            this.alert = (0, utils_1.convertStringToHTMLElement)(this.renderTemplate(\"alert\", templateOptions), `#${attrs.id}`);\n        }\n        if (!this.alert) {\n            return;\n        }\n        this.loadRefs(this.alert, { errorRef: \"multiple\" });\n        if (this.refs.errorRef && this.refs.errorRef.length) {\n            this.refs.errorRef.forEach((el) => {\n                this.addEventListener(el, \"click\", (e) => {\n                    const key = e.currentTarget.dataset.componentKey;\n                    this.focusOnComponent(key);\n                });\n                this.addEventListener(el, \"keydown\", (e) => {\n                    if (e.keyCode === 13) {\n                        e.preventDefault();\n                        const key = e.currentTarget.dataset.componentKey;\n                        this.focusOnComponent(key);\n                    }\n                });\n            });\n        }\n        this.prepend(this.alert);\n    }\n    /**\n     * Focus on selected component.\n     * @param {string} key - The key of selected component.\n     */\n    focusOnComponent(key) {\n        if (key) {\n            const component = this.getComponent(key);\n            if (component) {\n                component.focus();\n            }\n        }\n    }\n    /**\n     * Show the errors of this form within the alert dialog.\n     * @param {object} error - An optional additional error to display along with the component errors.\n     * @returns {*}\n     */\n    /* eslint-disable no-unused-vars */\n    /**\n     *\n     * @param {Array} errors - An array of errors to display.\n     * @param {boolean} triggerEvent - Whether or not to trigger the error event.\n     * @returns {void|Array} - The errors that were set.\n     */\n    showErrors(errors, triggerEvent) {\n        this.loading = false;\n        if (!Array.isArray(errors)) {\n            errors = [errors];\n        }\n        if (Array.isArray(this.errors)) {\n            errors = lodash_1.default.union(errors, this.errors);\n        }\n        errors = errors.concat(this.customErrors).filter((err) => !!err);\n        if (!errors.length) {\n            this.setAlert(false);\n            return;\n        }\n        // Mark any components as invalid if in a custom message.\n        const componentErrors = {};\n        errors.forEach((err) => {\n            var _a, _b;\n            const path = err.path || ((_a = err.context) === null || _a === void 0 ? void 0 : _a.path) || ((_b = err.component) === null || _b === void 0 ? void 0 : _b.key);\n            if (!componentErrors[path]) {\n                componentErrors[path] = [];\n            }\n            componentErrors[path].push(err);\n        });\n        // Iterate through all of our component errors and apply them to the components.\n        for (let path in componentErrors) {\n            const component = this.getComponent(path);\n            const errors = componentErrors[path];\n            if (component) {\n                component.serverErrors = errors.filter((err) => err.fromServer);\n                component.setCustomValidity(errors, true);\n            }\n        }\n        const displayedErrors = [];\n        if (errors.length) {\n            errors = lodash_1.default.uniqBy(errors, (error) => { var _a, _b; return [error.message, (_a = error.component) === null || _a === void 0 ? void 0 : _a.id, (_b = error.context) === null || _b === void 0 ? void 0 : _b.path].join(); });\n            const createListItem = (message, index) => {\n                var _a, _b, _c;\n                const err = errors[index];\n                const messageFromIndex = !lodash_1.default.isUndefined(index) && errors && errors[index];\n                const keyOrPath = (messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.formattedKeyOrPath) ||\n                    (messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.path) ||\n                    ((_a = messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.context) === null || _a === void 0 ? void 0 : _a.path) ||\n                    (((_b = err.context) === null || _b === void 0 ? void 0 : _b.component) && ((_c = err.context) === null || _c === void 0 ? void 0 : _c.component.key)) ||\n                    (err.component && err.component.key) ||\n                    (err.fromServer && err.path);\n                const formattedKeyOrPath = keyOrPath ? (0, utils_1.getStringFromComponentPath)(keyOrPath) : \"\";\n                if (typeof err !== \"string\" && !err.formattedKeyOrPath) {\n                    err.formattedKeyOrPath = formattedKeyOrPath;\n                }\n                return {\n                    message: (0, utils_1.unescapeHTML)(message),\n                    keyOrPath: formattedKeyOrPath,\n                };\n            };\n            errors.forEach(({ message, context, fromServer, component }, index) => {\n                const text = !(component === null || component === void 0 ? void 0 : component.label) || (context === null || context === void 0 ? void 0 : context.hasLabel) || fromServer\n                    ? this.t(\"alertMessage\", { message: this.t(message) })\n                    : this.t(\"alertMessageWithLabel\", {\n                        label: this.t(component === null || component === void 0 ? void 0 : component.label),\n                        message: this.t(message),\n                    });\n                displayedErrors.push(createListItem(text, index));\n            });\n        }\n        const errorsList = this.renderTemplate(\"errorsList\", { errors: displayedErrors });\n        this.root.setAlert(\"danger\", errorsList);\n        if (triggerEvent) {\n            this.emit(\"error\", errors);\n        }\n        return errors;\n    }\n    /* eslint-enable no-unused-vars */\n    /**\n     * Called when the submission has completed, or if the submission needs to be sent to an external library.\n     * @param {object} submission - The submission object.\n     * @param {boolean} saved - Whether or not this submission was saved to the server.\n     * @returns {object} - The submission object.\n     */\n    onSubmit(submission, saved) {\n        var _a;\n        this.loading = false;\n        this.submitting = false;\n        this.setPristine(true);\n        // We want to return the submitted submission and setValue will mutate the submission so cloneDeep it here.\n        this.setValue((0, utils_1.fastCloneDeep)(submission), {\n            noValidate: true,\n            noCheck: true,\n        });\n        this.setAlert(\"success\", `<p>${this.t(\"complete\")}</p>`);\n        // Cancel triggered saveDraft to prevent overriding the submitted state\n        if (this.draftEnabled && ((_a = this.triggerSaveDraft) === null || _a === void 0 ? void 0 : _a.cancel)) {\n            this.triggerSaveDraft.cancel();\n        }\n        this.emit(\"submit\", submission, saved);\n        if (saved) {\n            this.emit(\"submitDone\", submission);\n        }\n        return submission;\n    }\n    normalizeError(error) {\n        if (error) {\n            if (typeof error === \"object\" && \"details\" in error) {\n                error = error.details;\n            }\n            if (typeof error === \"string\") {\n                error = { message: error };\n            }\n        }\n        return error;\n    }\n    /**\n     * Called when an error occurs during the submission.\n     * @param {object} error - The error that occured.\n     * @returns {Array} errors - All errors.\n     */\n    onSubmissionError(error) {\n        error = this.normalizeError(error);\n        this.submitting = false;\n        this.setPristine(false);\n        this.emit(\"submitError\", error || this.errors);\n        // Allow for silent cancellations (no error message, no submit button error state)\n        if (error && error.silent) {\n            this.emit(\"change\", { isValid: true }, { silent: true });\n            return false;\n        }\n        const errors = this.showErrors(error, true);\n        if (this.root && this.root.alert) {\n            this.scrollIntoView(this.root.alert);\n        }\n        return errors;\n    }\n    /**\n     * Trigger the change event for this form.\n     * @param {any} flags - The flags to set on this change event.\n     * @param {any} changed - The changed object which reflects the changes in the form.\n     * @param {boolean} modified - Whether or not the form has been modified.\n     * @param {any} changes - The changes that have occured in the form.\n     */\n    onChange(flags, changed, modified, changes) {\n        var _a;\n        flags = flags || {};\n        let isChangeEventEmitted = false;\n        if (((_a = this.parent) === null || _a === void 0 ? void 0 : _a.subForm) === this) {\n            super.onChange(Object.assign(Object.assign({}, flags), { modified }), false);\n        }\n        else {\n            super.onChange(flags, true);\n        }\n        const value = lodash_1.default.clone(this.submission);\n        flags.changed = value.changed = changed;\n        flags.changes = changes;\n        if (modified && this.pristine) {\n            this.pristine = false;\n        }\n        this.checkData(value.data, flags);\n        const shouldValidate = !flags.noValidate ||\n            flags.fromIframe ||\n            (flags.fromSubmission && this.rootPristine && this.pristine && flags.changed);\n        const errors = shouldValidate\n            ? this.validate(value.data, Object.assign(Object.assign({}, flags), { noValidate: false, process: 'change' }))\n            : [];\n        value.isValid = (errors || []).filter(err => !err.fromServer).length === 0;\n        this.loading = false;\n        if (this.submitted) {\n            // show server errors while they are not cleaned/fixed\n            const nonComponentServerErrors = lodash_1.default.filter(this.serverErrors || [], (err) => !err.component && !err.path);\n            this.showErrors(nonComponentServerErrors.length ? nonComponentServerErrors : errors);\n        }\n        // See if we need to save the draft of the form.\n        if (modified && this.options.saveDraft) {\n            this.triggerSaveDraft();\n        }\n        if (!flags || !flags.noEmit) {\n            this.emit(\"change\", value, flags, modified);\n            isChangeEventEmitted = true;\n        }\n        // The form is initialized after the first change event occurs.\n        if (isChangeEventEmitted && !this.initialized) {\n            this.emit(\"initialized\");\n            this.initialized = true;\n        }\n    }\n    /**\n     * Send a delete request to the server.\n     * @returns {Promise} - The promise that is triggered when the delete is complete.\n     */\n    deleteSubmission() {\n        return this.formio.deleteSubmission().then(() => {\n            this.emit(\"submissionDeleted\", this.submission);\n            this.resetValue();\n        });\n    }\n    /**\n     * Cancels the submission.\n     * @param {boolean} noconfirm - Whether or not to confirm the cancellation.\n     * @alias reset\n     * @returns {boolean} - TRUE means the submission was cancelled, FALSE otherwise.\n     */\n    cancel(noconfirm) {\n        const shouldReset = this.hook(\"beforeCancel\", true);\n        if (shouldReset && (noconfirm || confirm(this.t(\"confirmCancel\")))) {\n            this.resetValue();\n            return true;\n        }\n        else {\n            this.emit(\"cancelSubmit\");\n            return false;\n        }\n    }\n    setMetadata(submission) {\n        // Add in metadata about client submitting the form\n        submission.metadata = submission.metadata || {};\n        lodash_1.default.defaults(submission.metadata, {\n            timezone: lodash_1.default.get(this, \"_submission.metadata.timezone\", (0, utils_1.currentTimezone)()),\n            offset: parseInt(lodash_1.default.get(this, \"_submission.metadata.offset\", (0, moment_1.default)().utcOffset()), 10),\n            origin: document.location.origin,\n            referrer: document.referrer,\n            browserName: navigator.appName,\n            userAgent: navigator.userAgent,\n            pathName: window.location.pathname,\n            onLine: navigator.onLine,\n        });\n    }\n    submitForm(options = {}, local = false) {\n        this.clearServerErrors();\n        return new Promise((resolve, reject) => {\n            // Read-only forms should never submit.\n            if (this.options.readOnly) {\n                return resolve({\n                    submission: this.submission,\n                    saved: false,\n                });\n            }\n            const submission = (0, utils_1.fastCloneDeep)(this.submission || {});\n            this.setMetadata(submission);\n            submission.state = options.state || submission.state || \"submitted\";\n            const isDraft = submission.state === \"draft\";\n            this.hook(\"beforeSubmit\", Object.assign(Object.assign({}, submission), { component: options.component }), (err, data) => {\n                var _a;\n                if (err) {\n                    return reject(err);\n                }\n                submission._vnote = data && data._vnote ? data._vnote : \"\";\n                try {\n                    if (!isDraft && !options.noValidate) {\n                        if (!submission.data) {\n                            return reject(\"Invalid Submission\");\n                        }\n                        const errors = this.validate(submission.data, {\n                            local,\n                            dirty: true,\n                            silentCheck: false,\n                            process: \"submit\",\n                        });\n                        if (errors.length ||\n                            ((_a = options.beforeSubmitResults) === null || _a === void 0 ? void 0 : _a.some((result) => result.status === \"rejected\"))) {\n                            return reject(errors);\n                        }\n                    }\n                }\n                catch (err) {\n                    console.error(err);\n                }\n                this.everyComponent((comp) => {\n                    var _a, _b;\n                    if (submission._vnote && comp.type === \"form\" && comp.component.reference) {\n                        lodash_1.default.get(submission.data, local ? (_a = comp.paths) === null || _a === void 0 ? void 0 : _a.localDataPath : comp.path, {})._vnote = submission._vnote;\n                    }\n                    const { persistent } = comp.component;\n                    if (persistent === \"client-only\") {\n                        lodash_1.default.unset(submission.data, local ? (_b = comp.paths) === null || _b === void 0 ? void 0 : _b.localDataPath : comp.path);\n                    }\n                });\n                this.hook(\"customValidation\", Object.assign(Object.assign({}, submission), { component: options.component }), (err) => {\n                    if (err) {\n                        // If string is returned, cast to object.\n                        if (typeof err === \"string\") {\n                            err = {\n                                message: err,\n                            };\n                        }\n                        // Ensure err is an array.\n                        err = Array.isArray(err) ? err : [err];\n                        return reject(err);\n                    }\n                    this.loading = true;\n                    // Use the form action to submit the form if available.\n                    if (this._form && this._form.action) {\n                        const method = submission.data._id &&\n                            this._form.action.includes(submission.data._id)\n                            ? \"PUT\"\n                            : \"POST\";\n                        return Formio_1.Formio.makeStaticRequest(this._form.action, method, submission, this.formio ? this.formio.options : {})\n                            .then((result) => resolve({\n                            submission: result,\n                            saved: true,\n                        }))\n                            .catch((error) => {\n                            this.setServerErrors(error);\n                            return reject(error);\n                        });\n                    }\n                    const submitFormio = this.formio;\n                    if (this.nosubmit || !submitFormio) {\n                        return resolve({\n                            submission,\n                            saved: false,\n                        });\n                    }\n                    // If this is an actionUrl, then make sure to save the action and not the submission.\n                    const submitMethod = submitFormio.actionUrl\n                        ? \"saveAction\"\n                        : \"saveSubmission\";\n                    submitFormio[submitMethod](submission)\n                        .then((result) => resolve({\n                        submission: result,\n                        saved: true,\n                    }))\n                        .catch((error) => {\n                        this.setServerErrors(error);\n                        return reject(error);\n                    });\n                });\n            });\n        });\n    }\n    setServerErrors(error) {\n        if (error.details) {\n            this.serverErrors = error.details\n                .filter((err) => (err.level ? err.level === \"error\" : err))\n                .map((err) => {\n                err.fromServer = true;\n                return err;\n            });\n        }\n        else if (typeof error === \"string\") {\n            this.serverErrors = [{ fromServer: true, level: \"error\", message: error }];\n        }\n    }\n    executeSubmit(options) {\n        this.submitted = true;\n        this.submitting = true;\n        return this.submitForm(options)\n            .then(({ submission, saved }) => this.onSubmit(submission, saved))\n            .then((results) => {\n            this.submissionInProcess = false;\n            return results;\n        })\n            .catch((err) => {\n            this.submissionInProcess = false;\n            return Promise.reject(this.onSubmissionError(err));\n        });\n    }\n    clearServerErrors() {\n        var _a;\n        (_a = this.serverErrors) === null || _a === void 0 ? void 0 : _a.forEach((error) => {\n            if (error.path) {\n                const pathArray = (0, utils_1.getArrayFromComponentPath)(error.path);\n                const component = this.getComponent(pathArray, lodash_1.default.identity, error.formattedKeyOrPath);\n                if (component) {\n                    component.serverErrors = [];\n                }\n            }\n        });\n        this.serverErrors = [];\n    }\n    /**\n     * Submits the form.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.src = 'https://examples.form.io/example';\n     * form.submission = {data: {\n     *   firstName: 'Joe',\n     *   lastName: 'Smith',\n     *   email: 'joe@example.com'\n     * }};\n     * form.submit().then((submission) => {\n     *   console.log(submission);\n     * });\n     * @param {boolean} before - If this submission occured from the before handlers.\n     * @param {any} options - The options to use when submitting this form.\n     * @returns {Promise} - A promise when the form is done submitting.\n     */\n    submit(before = false, options = {}) {\n        this.submissionInProcess = true;\n        if (!before) {\n            return this.beforeSubmit(options).then(() => this.executeSubmit(options));\n        }\n        else {\n            return this.executeSubmit(options);\n        }\n    }\n    submitUrl(URL, headers) {\n        if (!URL) {\n            return console.warn(\"Missing URL argument\");\n        }\n        const submission = this.submission || {};\n        const API_URL = URL;\n        const settings = {\n            method: \"POST\",\n            headers: {},\n        };\n        if (headers && headers.length > 0) {\n            headers.map((e) => {\n                if (e.header !== \"\" && e.value !== \"\") {\n                    settings.headers[e.header] = this.interpolate(e.value, submission);\n                }\n            });\n        }\n        if (API_URL && settings) {\n            Formio_1.Formio.makeStaticRequest(API_URL, settings.method, submission, {\n                headers: settings.headers,\n            })\n                .then(() => {\n                this.emit(\"requestDone\");\n                this.setAlert(\"success\", \"<p> Success </p>\");\n            })\n                .catch((e) => {\n                const message = `${e.statusText ? e.statusText : \"\"} ${e.status ? e.status : e}`;\n                this.emit(\"error\", message);\n                console.error(message);\n                this.setAlert(\"danger\", `<p> ${message} </p>`);\n                return Promise.reject(this.onSubmissionError(e));\n            });\n        }\n        else {\n            this.emit(\"error\", \"You should add a URL to this button.\");\n            this.setAlert(\"warning\", \"You should add a URL to this button.\");\n            return console.warn(\"You should add a URL to this button.\");\n        }\n    }\n    triggerCaptcha() {\n        if (!this || !this.components) {\n            return;\n        }\n        const captchaComponent = [];\n        this.eachComponent((component) => {\n            if (/^(re)?captcha$/.test(component.type) && component.component.eventType === 'formLoad') {\n                captchaComponent.push(component);\n            }\n        });\n        if (captchaComponent.length > 0) {\n            captchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);\n        }\n    }\n    set nosubmit(value) {\n        this._nosubmit = !!value;\n        this.emit(\"nosubmit\", this._nosubmit);\n    }\n    get nosubmit() {\n        return this._nosubmit || false;\n    }\n    get conditions() {\n        var _a, _b;\n        return (_b = (_a = this.schema.settings) === null || _a === void 0 ? void 0 : _a.conditions) !== null && _b !== void 0 ? _b : [];\n    }\n    get variables() {\n        var _a, _b;\n        return (_b = (_a = this.schema.settings) === null || _a === void 0 ? void 0 : _a.variables) !== null && _b !== void 0 ? _b : [];\n    }\n}\nexports[\"default\"] = Webform;\nWebform.setBaseUrl = Formio_1.Formio.setBaseUrl;\nWebform.setApiUrl = Formio_1.Formio.setApiUrl;\nWebform.setAppUrl = Formio_1.Formio.setAppUrl;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Webform.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst compare_versions_1 = __webpack_require__(/*! compare-versions */ \"./node_modules/compare-versions/lib/esm/index.js\");\nconst EventEmitter_1 = __importDefault(__webpack_require__(/*! ./EventEmitter */ \"./lib/cjs/EventEmitter.js\"));\nconst i18n_1 = __importDefault(__webpack_require__(/*! ./i18n */ \"./lib/cjs/i18n.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst Components_1 = __importDefault(__webpack_require__(/*! ./components/Components */ \"./lib/cjs/components/Components.js\"));\nconst NestedDataComponent_1 = __importDefault(__webpack_require__(/*! ./components/_classes/nesteddata/NestedDataComponent */ \"./lib/cjs/components/_classes/nesteddata/NestedDataComponent.js\"));\nconst utils_1 = __webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst formUtils_1 = __webpack_require__(/*! ./utils/formUtils */ \"./lib/cjs/utils/formUtils.js\");\n// We need this here because dragula pulls in CustomEvent class that requires global to exist.\nif (typeof window !== 'undefined' && typeof window.global === 'undefined') {\n    window.global = window;\n}\nconst dragula_1 = __importDefault(__webpack_require__(/*! dragula */ \"./node_modules/dragula/dragula.js\"));\n// Initialize the available forms.\nFormio_1.Formio.forms = {};\n// Allow people to register components.\nFormio_1.Formio.registerComponent = Components_1.default.setComponent;\n/**\n *\n * @param {any} icons  - The icons to use.\n * @returns {any} - The icon set.\n */\nfunction getIconSet(icons) {\n    if (icons === \"fontawesome\") {\n        return \"fa\";\n    }\n    return icons || \"\";\n}\n/**\n *\n * @param {any} options - The options to get.\n * @returns {any} - The options.\n */\nfunction getOptions(options) {\n    options = lodash_1.default.defaults(options, {\n        submitOnEnter: false,\n        iconset: getIconSet(options && options.icons ? options.icons : Formio_1.Formio.icons),\n        i18next: null,\n        saveDraft: false,\n        alwaysDirty: false,\n        saveDraftThrottle: 5000,\n        display: \"form\",\n        cdnUrl: Formio_1.Formio.cdn.baseUrl,\n    });\n    if (!options.events) {\n        options.events = new EventEmitter_1.default();\n    }\n    return options;\n}\n/**\n * Represents a JSON value.\n * @typedef {(string | number | boolean | null | JSONArray | JSONObject)} JSON\n */\n/**\n * Represents a JSON array.\n * @typedef {Array<JSON>} JSONArray\n */\n/**\n * Represents a JSON object.\n * @typedef {{[key: string]: JSON}} JSONObject\n */\n/**\n * @typedef {object} FormioHooks\n * @property {Function} [beforeSubmit] - A function that is called before the form is submitted.\n * @property {Function} [beforeCancel] - A function that is called before the form is canceled.\n * @property {Function} [beforeNext] - A function that is called before moving to the next page in a multi-page form.\n * @property {Function} [beforePrev] - A function that is called before moving to the previous page in a multi-page form.\n * @property {Function} [attachComponent] - A function that is called when a component is attached to the form.\n * @property {Function} [setDataValue] - A function that is called when setting the value of a data component.\n * @property {Function} [addComponents] - A function that is called when adding multiple components to the form.\n * @property {Function} [addComponent] - A function that is called when adding a single component to the form.\n * @property {Function} [customValidation] - A function that is called for custom validation of the form.\n * @property {Function} [attachWebform] - A function that is called when attaching a webform to the form.\n */\n/**\n * @typedef {object} SanitizeConfig\n * @property {string[]} [addAttr] - The attributes to add.\n * @property {string[]} [addTags] - The tags to add.\n * @property {string[]} [allowedAttrs] - The allowed attributes.\n * @property {string[]} [allowedTags] - The allowed tags.\n * @property {string[]} [allowedUriRegex] - The allowed URI regex.\n * @property {string[]} [addUriSafeAttr] - The URI safe attributes.\n */\n/**\n * @typedef {object} ButtonSettings\n * @property {boolean} [showPrevious] - Show the \"Previous\" button.\n * @property {boolean} [showNext] - Show the \"Next\" button.\n * @property {boolean} [showCancel] - Show the \"Cancel\" button.\n * @property {boolean} [showSubmit] - Show the \"Submit\" button.\n */\n/**\n * @typedef {object} FormOptions\n * @property {boolean} [saveDraft] - Enable the save draft feature.\n * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.\n * @property {boolean} [readOnly] - Set this form to readOnly.\n * @property {boolean} [noAlerts] - Disable the alerts dialog.\n * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.\n * @property {string} [template] - Custom logic for creation of elements.\n * @property {boolean} [noDefaults] - Exclude default values from the settings.\n * @property {any} [fileService] - The file service for this form.\n * @property {EventEmitter} [events] - The EventEmitter for this form.\n * @property {string} [language] - The language to render this form in.\n * @property {{[key: string]: string}} [i18next] - The i18next configuration for this form.\n * @property {boolean} [viewAsHtml] - View the form as raw HTML.\n * @property {'form' | 'html' | 'flat' | 'builder' | 'pdf'} [renderMode] - The render mode for this form.\n * @property {boolean} [highlightErrors] - Highlight any errors on the form.\n * @property {string} [componentErrorClass] - The error class for components.\n * @property {any} [templates] - The templates for this form.\n * @property {string} [iconset] - The iconset for this form.\n * @property {import('@formio/core').Component[]} [components] - The components for this form.\n * @property {{[key: string]: boolean}} [disabled] - Disabled components for this form.\n * @property {boolean} [showHiddenFields] - Show hidden fields.\n * @property {{[key: string]: boolean}} [hide] - Hidden components for this form.\n * @property {{[key: string]: boolean}} [show] - Components to show for this form.\n * @property {Formio} [formio] - The Formio instance for this form.\n * @property {string} [decimalSeparator] - The decimal separator for this form.\n * @property {string} [thousandsSeparator] - The thousands separator for this form.\n * @property {FormioHooks} [hooks] - The hooks for this form.\n * @property {boolean} [alwaysDirty] - Always be dirty.\n * @property {boolean} [skipDraftRestore] - Skip restoring a draft.\n * @property {'form' | 'wizard' | 'pdf'} [display] - The display for this form.\n * @property {string} [cdnUrl] - The CDN url for this form.\n * @property {boolean} [flatten] - Flatten the form.\n * @property {boolean} [sanitize] - Sanitize the form.\n * @property {SanitizeConfig} [sanitizeConfig] - The sanitize configuration for this form.\n * @property {ButtonSettings} [buttonSettings] - The button settings for this form.\n * @property {object} [breadcrumbSettings] - The breadcrumb settings for this form.\n * @property {boolean} [allowPrevious] - Allow the previous button (for Wizard forms).\n * @property {string[]} [wizardButtonOrder] - The order of the buttons (for Wizard forms).\n * @property {boolean} [showCheckboxBackground] - Show the checkbox background.\n * @property {boolean} [inputsOnly] - Only show inputs in the form and no labels.\n * @property {boolean} [building] - If we are in the process of building the form.\n * @property {number} [zoom] - The zoom for PDF forms.\n */\nclass Webform extends NestedDataComponent_1.default {\n    /**\n     * Creates a new Form instance.\n     * @param {HTMLElement | object | import('Form').FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.\n     * @param {import('Form').FormOptions} [options] - The options to create a new form instance.\n     */\n    constructor(elementOrOptions, options = undefined) {\n        let element, formOptions;\n        if (elementOrOptions instanceof HTMLElement || options) {\n            element = elementOrOptions;\n            formOptions = options || {};\n        }\n        else {\n            formOptions = elementOrOptions || {};\n        }\n        super(null, getOptions(formOptions));\n        this.executeShortcuts = (event) => {\n            const { target } = event;\n            if (!this.keyboardCatchableElement(target)) {\n                return;\n            }\n            const ctrl = event.ctrlKey || event.metaKey;\n            const keyCode = event.keyCode;\n            let char = \"\";\n            if (65 <= keyCode && keyCode <= 90) {\n                char = String.fromCharCode(keyCode);\n            }\n            else if (keyCode === 13) {\n                char = \"Enter\";\n            }\n            else if (keyCode === 27) {\n                char = \"Esc\";\n            }\n            lodash_1.default.each(this.shortcuts, (shortcut) => {\n                if (shortcut.ctrl && !ctrl) {\n                    return;\n                }\n                if (shortcut.shortcut === char) {\n                    shortcut.element.click();\n                    event.preventDefault();\n                }\n            });\n        };\n        this.setElement(element);\n        // Keep track of all available forms globally.\n        Formio_1.Formio.forms[this.id] = this;\n        // Set the base url.\n        if (this.options.baseUrl) {\n            Formio_1.Formio.setBaseUrl(this.options.baseUrl);\n        }\n        /**\n         * The type of this element.\n         * @type {string}\n         */\n        this.type = \"form\";\n        this._src = \"\";\n        this._loading = false;\n        this._form = {};\n        this.draftEnabled = false;\n        this.savingDraft = false;\n        if (this.options.saveDraftThrottle) {\n            this.triggerSaveDraft = lodash_1.default.throttle(this.saveDraft.bind(this), this.options.saveDraftThrottle);\n        }\n        else {\n            this.triggerSaveDraft = this.saveDraft.bind(this);\n        }\n        /**\n         * Determines if this form should submit the API on submit.\n         * @type {boolean}\n         */\n        this.nosubmit = false;\n        /**\n         * Determines if the form has tried to be submitted, error or not.\n         * @type {boolean}\n         */\n        this.submitted = false;\n        /**\n         * Determines if the form is being submitted at the moment.\n         * @type {boolean}\n         */\n        this.submitting = false;\n        /**\n         * The Formio instance for this form.\n         * @type {Formio}\n         */\n        this.formio = null;\n        /**\n         * The loader HTML element.\n         * @type {HTMLElement}\n         */\n        this.loader = null;\n        /**\n         * The alert HTML element\n         * @type {HTMLElement}\n         */\n        this.alert = null;\n        /**\n         * Promise that is triggered when the submission is done loading.\n         * @type {Promise}\n         */\n        this.onSubmission = null;\n        /**\n         * Determines if this submission is explicitly set.\n         * @type {boolean}\n         */\n        this.submissionSet = false;\n        /**\n         * Promise that executes when the form is ready and rendered.\n         * @type {Promise}\n         * @example\n         * import Webform from '@formio/js/Webform';\n         * let form = new Webform(document.getElementById('formio'));\n         * form.formReady.then(() => {\n         *   console.log('The form is ready!');\n         * });\n         * form.src = 'https://examples.form.io/example';\n         */\n        this.formReady = new Promise((resolve, reject) => {\n            /**\n             * Called when the formReady state of this form has been resolved.\n             * @type {Function}\n             */\n            this.formReadyResolve = resolve;\n            /**\n             * Called when this form could not load and is rejected.\n             * @type {Function}\n             */\n            this.formReadyReject = reject;\n        });\n        /**\n         * Promise that executes when the submission is ready and rendered.\n         * @type {Promise}\n         * @example\n         * import Webform from '@formio/js/Webform';\n         * let form = new Webform(document.getElementById('formio'));\n         * form.submissionReady.then(() => {\n         *   console.log('The submission is ready!');\n         * });\n         * form.src = 'https://examples.form.io/example/submission/234234234234234243';\n         */\n        this.submissionReady = new Promise((resolve, reject) => {\n            /**\n             * Called when the formReady state of this form has been resolved.\n             * @type {Function}\n             */\n            this.submissionReadyResolve = resolve;\n            /**\n             * Called when this form could not load and is rejected.\n             * @type {Function}\n             */\n            this.submissionReadyReject = reject;\n        });\n        this.shortcuts = [];\n        // Set language after everything is established.\n        this.language = this.i18next.language;\n        // See if we need to restore the draft from a user.\n        if (this.options.saveDraft) {\n            if (this.options.skipDraftRestore) {\n                this.draftEnabled = true;\n                this.savingDraft = false;\n            }\n            else {\n                this.formReady.then(() => {\n                    const user = Formio_1.Formio.getUser();\n                    // Only restore a draft if the submission isn't explicitly set.\n                    if (user && !this.submissionSet) {\n                        this.restoreDraft(user._id);\n                    }\n                });\n            }\n        }\n        this.component.clearOnHide = false;\n        // Ensure the root is set to this component.\n        this.root = this;\n        this.localRoot = this;\n        this.root.dragulaLib = dragula_1.default;\n    }\n    /* eslint-enable max-statements */\n    get language() {\n        return this.options.language;\n    }\n    get emptyValue() {\n        return null;\n    }\n    componentContext() {\n        return this._data;\n    }\n    /**\n     * Sets the language for this form.\n     * @param {string} lang - The language to use (e.g. 'en', 'sp', etc.)\n     */\n    set language(lang) {\n        if (!this.i18next) {\n            return;\n        }\n        this.options.language = lang;\n        if (this.i18next.language === lang) {\n            return;\n        }\n        this.i18next.changeLanguage(lang, (err) => {\n            if (err) {\n                return;\n            }\n            this.rebuild();\n            this.emit(\"languageChanged\");\n        });\n    }\n    get componentComponents() {\n        return this.form.components;\n    }\n    get shadowRoot() {\n        return this.options.shadowRoot;\n    }\n    /**\n     * Add a language for translations\n     * @param {string} code - The language code for the language being added.\n     * @param {object} lang - The language translations.\n     * @param {boolean} [active] - If this language should be set as the active language.\n     */\n    addLanguage(code, lang, active = false) {\n        if (this.i18next) {\n            var translations = lodash_1.default.assign((0, utils_1.fastCloneDeep)(i18n_1.default.resources.en.translation), lang);\n            this.i18next.addResourceBundle(code, \"translation\", translations, true, true);\n            if (active) {\n                this.language = code;\n            }\n        }\n    }\n    keyboardCatchableElement(element) {\n        if (element.nodeName === \"TEXTAREA\") {\n            return false;\n        }\n        if (element.nodeName === \"INPUT\") {\n            return [\"text\", \"email\", \"password\"].indexOf(element.type) === -1;\n        }\n        return true;\n    }\n    addShortcut(element, shortcut) {\n        if (!shortcut || !/^([A-Z]|Enter|Esc)$/i.test(shortcut)) {\n            return;\n        }\n        shortcut = lodash_1.default.capitalize(shortcut);\n        if (shortcut === \"Enter\" || shortcut === \"Esc\") {\n            // Restrict Enter and Esc only for buttons\n            if (element.tagName !== \"BUTTON\") {\n                return;\n            }\n            this.shortcuts.push({\n                shortcut,\n                element,\n            });\n        }\n        else {\n            this.shortcuts.push({\n                ctrl: true,\n                shortcut,\n                element,\n            });\n        }\n    }\n    removeShortcut(element, shortcut) {\n        if (!shortcut || !/^([A-Z]|Enter|Esc)$/i.test(shortcut)) {\n            return;\n        }\n        lodash_1.default.remove(this.shortcuts, {\n            shortcut,\n            element,\n        });\n    }\n    /**\n     * Get the embed source of the form.\n     * @returns {string} - The source of the form.\n     */\n    get src() {\n        return this._src;\n    }\n    /**\n     * Loads the submission if applicable.\n     * @returns {Promise} - The promise that is triggered when the submission is loaded.\n     */\n    loadSubmission() {\n        this.loadingSubmission = true;\n        if (this.formio.submissionId) {\n            this.onSubmission = this.formio\n                .loadSubmission()\n                .then((submission) => this.setSubmission(submission), (err) => this.submissionReadyReject(err))\n                .catch((err) => this.submissionReadyReject(err));\n        }\n        else {\n            this.submissionReadyResolve();\n        }\n        return this.submissionReady;\n    }\n    /**\n     * Set the src of the form renderer.\n     * @param {string} value - The source value to set.\n     * @param {any} options - The options to set.\n     * @returns {Promise} - The promise that is triggered when the form is set.\n     */\n    setSrc(value, options) {\n        if (this.setUrl(value, options)) {\n            this.nosubmit = false;\n            return this.formio\n                .loadForm({ params: { live: 1 } })\n                .then((form) => {\n                const setForm = this.setForm(form);\n                this.loadSubmission();\n                return setForm;\n            })\n                .catch((err) => {\n                console.warn(err);\n                this.formReadyReject(err);\n            });\n        }\n        return Promise.resolve();\n    }\n    /**\n     * Set the Form source, which is typically the Form.io embed URL.\n     * @param {string} value - The value of the form embed url.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.formReady.then(() => {\n     *   console.log('The form is formReady!');\n     * });\n     * form.src = 'https://examples.form.io/example';\n     */\n    set src(value) {\n        this.setSrc(value);\n    }\n    /**\n     * Get the embed source of the form.\n     * @returns {string} - returns the source of the form.\n     */\n    get url() {\n        return this._src;\n    }\n    /**\n     * Sets the url of the form renderer.\n     * @param {string} value - The value to set the url to.\n     * @param {any} options - The options to set.\n     * @returns {boolean} - TRUE means the url was set, FALSE otherwise.\n     */\n    setUrl(value, options) {\n        if (!value || typeof value !== \"string\" || value === this._src) {\n            return false;\n        }\n        this._src = value;\n        this.nosubmit = true;\n        this.formio = this.options.formio = new Formio_1.Formio(value, options);\n        if (this.type === \"form\") {\n            // Set the options source so this can be passed to other components.\n            this.options.src = value;\n        }\n        return true;\n    }\n    /**\n     * Set the form source but don't initialize the form and submission from the url.\n     * @param {string} value - The value of the form embed url.\n     */\n    set url(value) {\n        this.setUrl(value);\n    }\n    /**\n     * Called when both the form and submission have been loaded.\n     * @returns {Promise} - The promise to trigger when both form and submission have loaded.\n     */\n    get ready() {\n        return this.formReady.then(() => {\n            return super.ready.then(() => {\n                return this.loadingSubmission ? this.submissionReady : true;\n            });\n        });\n    }\n    /**\n     * Returns if this form is loading.\n     * @returns {boolean} - TRUE means the form is loading, FALSE otherwise.\n     */\n    get loading() {\n        return this._loading;\n    }\n    /**\n     * Set the loading state for this form, and also show the loader spinner.\n     * @param {boolean} loading - If this form should be \"loading\" or not.\n     */\n    set loading(loading) {\n        if (this._loading !== loading) {\n            this._loading = loading;\n            if (!this.loader && loading) {\n                this.loader = this.ce(\"div\", {\n                    class: \"loader-wrapper\",\n                });\n                const spinner = this.ce(\"div\", {\n                    class: \"loader text-center\",\n                });\n                this.loader.appendChild(spinner);\n            }\n            /* eslint-disable max-depth */\n            if (this.loader) {\n                try {\n                    if (loading) {\n                        this.prependTo(this.loader, this.wrapper);\n                    }\n                    else {\n                        this.removeChildFrom(this.loader, this.wrapper);\n                    }\n                }\n                catch (err) {\n                    // ingore\n                }\n            }\n            /* eslint-enable max-depth */\n        }\n    }\n    /**\n     * Sets the JSON schema for the form to be rendered.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.setForm({\n     *   components: [\n     *     {\n     *       type: 'textfield',\n     *       key: 'firstName',\n     *       label: 'First Name',\n     *       placeholder: 'Enter your first name.',\n     *       input: true\n     *     },\n     *     {\n     *       type: 'textfield',\n     *       key: 'lastName',\n     *       label: 'Last Name',\n     *       placeholder: 'Enter your last name',\n     *       input: true\n     *     },\n     *     {\n     *       type: 'button',\n     *       action: 'submit',\n     *       label: 'Submit',\n     *       theme: 'primary'\n     *     }\n     *   ]\n     * });\n     * @param {object} form - The JSON schema of the form @see https://examples.form.io/example for an example JSON schema.\n     * @param {any} flags - Any flags to apply when setting the form.\n     * @returns {Promise} - The promise that is triggered when the form is set.\n     */\n    setForm(form, flags = {}) {\n        var _a;\n        const isFormAlreadySet = this._form && ((_a = this._form.components) === null || _a === void 0 ? void 0 : _a.length);\n        try {\n            // Do not set the form again if it has been already set\n            if (isFormAlreadySet && JSON.stringify(this._form) === JSON.stringify(form)) {\n                this.formReadyResolve();\n                return Promise.resolve();\n            }\n            // Create the form.\n            this._form = (flags === null || flags === void 0 ? void 0 : flags.keepAsReference) ? form : lodash_1.default.cloneDeep(form);\n            if (this.onSetForm) {\n                this.onSetForm(lodash_1.default.cloneDeep(this._form), form);\n            }\n        }\n        catch (err) {\n            console.warn(err);\n            // If provided form is not a valid JSON object, do not set it too\n            this.formReadyReject(err);\n            return Promise.resolve();\n        }\n        // Allow the form to provide component overrides.\n        if (form && form.settings && form.settings.components) {\n            this.options.components = form.settings.components;\n        }\n        if (form && form.properties) {\n            this.options.properties = form.properties;\n        }\n        // Use the sanitize config from the form settings or the global sanitize config if it is not provided in the options\n        if (!this.options.sanitizeConfig && !this.builderMode) {\n            this.options.sanitizeConfig =\n                lodash_1.default.get(form, \"settings.sanitizeConfig\") ||\n                    lodash_1.default.get(form, \"globalSettings.sanitizeConfig\");\n        }\n        if (\"schema\" in form && (0, compare_versions_1.compareVersions)(form.schema, \"1.x\") > 0) {\n            this.ready.then(() => {\n                this.setAlert(\"alert alert-danger\", \"Form schema is for a newer version, please upgrade your renderer. Some functionality may not work.\");\n            });\n        }\n        // See if they pass a module, and evaluate it if so.\n        if (form && form.module) {\n            let formModule = null;\n            if (typeof form.module === \"string\") {\n                try {\n                    formModule = this.evaluate(`return ${form.module}`);\n                }\n                catch (err) {\n                    console.warn(err);\n                }\n            }\n            else {\n                formModule = form.module;\n            }\n            if (formModule) {\n                Formio_1.Formio.use(formModule);\n                // Since we got here after instantiation, we need to manually apply form options.\n                if (formModule.options && formModule.options.form) {\n                    this.options = Object.assign(this.options, formModule.options.form);\n                }\n            }\n        }\n        this.initialized = false;\n        const rebuild = this.rebuild() || Promise.resolve();\n        return rebuild.then(() => {\n            this.emit(\"formLoad\", form);\n            this.triggerCaptcha();\n            // Make sure to trigger onChange after a render event occurs to speed up form rendering.\n            setTimeout(() => {\n                this.onChange(flags);\n                this.formReadyResolve();\n            }, 0);\n            return this.formReady;\n        });\n    }\n    /**\n     * Gets the form object.\n     * @returns {object} - The form JSON schema.\n     */\n    get form() {\n        if (!this._form) {\n            this._form = {\n                components: [],\n            };\n        }\n        return this._form;\n    }\n    /**\n     * Sets the form value.\n     * @alias setForm\n     * @param {object} form - The form schema object.\n     */\n    set form(form) {\n        this.setForm(form);\n    }\n    /**\n     * Returns the submission object that was set within this form.\n     * @returns {object} - The submission object.\n     */\n    get submission() {\n        return this.getValue();\n    }\n    /**\n     * Sets the submission of a form.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.src = 'https://examples.form.io/example';\n     * form.submission = {data: {\n     *   firstName: 'Joe',\n     *   lastName: 'Smith',\n     *   email: 'joe@example.com'\n     * }};\n     * @param {object} submission - The Form.io submission object.\n     */\n    set submission(submission) {\n        this.setSubmission(submission);\n    }\n    /**\n     * Sets the submission value\n     * @param {object|null|undefined} submission - The submission to set.\n     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.\n     * @returns {void}\n     */\n    onSetSubmission(submission, flags = {}) {\n        this.submissionSet = true;\n        this.triggerChange(flags);\n        this.emit('beforeSetSubmission', submission);\n        this.setValue(submission, flags);\n    }\n    /**\n     * Sets a submission and returns the promise when it is ready.\n     * @param {any} submission - The submission to set.\n     * @param {any} flags - Any flags to apply when setting the submission.\n     * @returns {Promise} - The promise that is triggered when the submission is set.\n     */\n    setSubmission(submission, flags = {}) {\n        flags = Object.assign(Object.assign({}, flags), { fromSubmission: lodash_1.default.has(flags, \"fromSubmission\") ? flags.fromSubmission : true });\n        return (this.onSubmission = this.formReady\n            .then((resolveFlags) => {\n            if (resolveFlags) {\n                flags = Object.assign(Object.assign({}, flags), resolveFlags);\n            }\n            this.onSetSubmission(submission, flags);\n            return this.submissionReadyResolve(submission);\n        }, (err) => this.submissionReadyReject(err))\n            .catch((err) => this.submissionReadyReject(err)));\n    }\n    handleDraftError(errName, errDetails, restoreDraft) {\n        const errorMessage = lodash_1.default.trim(`${this.t(errName)} ${errDetails || \"\"}`);\n        console.warn(errorMessage);\n        this.emit(restoreDraft ? \"restoreDraftError\" : \"saveDraftError\", errDetails || errorMessage);\n    }\n    saveDraft() {\n        if (!this.draftEnabled) {\n            return;\n        }\n        if (!this.formio) {\n            this.handleDraftError(\"saveDraftInstanceError\");\n            return;\n        }\n        if (!Formio_1.Formio.getUser()) {\n            this.handleDraftError(\"saveDraftAuthError\");\n            return;\n        }\n        const draft = (0, utils_1.fastCloneDeep)(this.submission);\n        draft.state = \"draft\";\n        if (!this.savingDraft && !this.submitting) {\n            this.emit(\"saveDraftBegin\");\n            this.savingDraft = true;\n            this.formio\n                .saveSubmission(draft)\n                .then((sub) => {\n                // Set id to submission to avoid creating new draft submission\n                this.submission._id = sub._id;\n                this.savingDraft = false;\n                this.emit(\"saveDraft\", sub);\n            })\n                .catch((err) => {\n                this.savingDraft = false;\n                this.handleDraftError(\"saveDraftError\", err);\n            });\n        }\n    }\n    /**\n     * Restores a draft submission based on the user who is authenticated.\n     * @param {string} userId - The user id where we need to restore the draft from.\n     */\n    restoreDraft(userId) {\n        const formio = this.formio || this.options.formio;\n        if (!formio) {\n            this.handleDraftError(\"restoreDraftInstanceError\", null, true);\n            return;\n        }\n        this.savingDraft = true;\n        formio\n            .loadSubmissions({\n            params: {\n                state: 'draft',\n                owner: userId,\n                sort: '-created'\n            },\n        })\n            .then((submissions) => {\n            if (submissions.length > 0 && !this.options.skipDraftRestore) {\n                const draft = (0, utils_1.fastCloneDeep)(submissions[0]);\n                return this.setSubmission(draft).then(() => {\n                    this.draftEnabled = true;\n                    this.savingDraft = false;\n                    this.emit(\"restoreDraft\", draft);\n                });\n            }\n            // Enable drafts so that we can keep track of changes.\n            this.draftEnabled = true;\n            this.savingDraft = false;\n            this.emit(\"restoreDraft\", null);\n        })\n            .catch((err) => {\n            this.draftEnabled = true;\n            this.savingDraft = false;\n            this.handleDraftError(\"restoreDraftError\", err, true);\n        });\n    }\n    get schema() {\n        const schema = (0, utils_1.fastCloneDeep)(lodash_1.default.omit(this._form, [\"components\"]));\n        schema.components = [];\n        this.eachComponent((component) => schema.components.push(component.schema));\n        return schema;\n    }\n    mergeData(_this, _that) {\n        lodash_1.default.mergeWith(_this, _that, (thisValue, thatValue) => {\n            if (Array.isArray(thisValue) &&\n                Array.isArray(thatValue) &&\n                thisValue.length !== thatValue.length) {\n                return thatValue;\n            }\n        });\n    }\n    setValue(submission, flags = {}) {\n        if (!submission || !submission.data) {\n            submission = {\n                data: {},\n            };\n        }\n        // Metadata needs to be available before setValue\n        this._submission.metadata = submission.metadata ? lodash_1.default.cloneDeep(submission.metadata) : {};\n        this.editing = !!submission._id;\n        // Set the timezone in the options if available.\n        if (!this.options.submissionTimezone &&\n            submission.metadata &&\n            submission.metadata.timezone) {\n            this.options.submissionTimezone = submission.metadata.timezone;\n        }\n        const changed = super.setValue(submission.data, flags);\n        if (!flags.sanitize) {\n            this.mergeData(this.data, submission.data);\n        }\n        submission.data = this.data;\n        this._submission = submission;\n        return changed;\n    }\n    getValue() {\n        if (!this._submission) {\n            this._submission = {};\n        }\n        if (!this._submission.data) {\n            this._submission.data = {};\n        }\n        if (this.viewOnly) {\n            return this._submission;\n        }\n        const submission = this._submission;\n        submission.data = this.data;\n        return this._submission;\n    }\n    /**\n     * Build the form.\n     * @returns {Promise} - The promise that is triggered when the form is built.\n     */\n    init() {\n        if (this.options.submission) {\n            const submission = lodash_1.default.extend({}, this.options.submission);\n            this._submission = submission;\n            this._data = submission.data;\n        }\n        else {\n            this._submission = this._submission || { data: {} };\n        }\n        // Remove any existing components.\n        if (this.components && this.components.length) {\n            this.destroyComponents();\n            this.components = [];\n        }\n        if (this.component) {\n            this.component.components = this.form ? this.form.components : [];\n        }\n        else {\n            this.component = this.form;\n        }\n        this.component.type = \"form\";\n        this.component.input = false;\n        this.addComponents();\n        this.on(\"submitButton\", (options) => {\n            this.submit(false, options).catch((e) => {\n                options.instance.loading = false;\n                return e !== false && e !== undefined && console.log(e);\n            });\n        }, true);\n        this.on(\"checkValidity\", (data) => this.validate(data, { dirty: true, process: \"change\" }), true);\n        this.on(\"requestUrl\", (args) => this.submitUrl(args.url, args.headers), true);\n        this.on(\"resetForm\", () => this.resetValue(), true);\n        this.on(\"deleteSubmission\", () => this.deleteSubmission(), true);\n        this.on(\"refreshData\", () => this.updateValue(), true);\n        this.executeFormController();\n        return this.formReady;\n    }\n    executeFormController() {\n        // If no controller value or\n        // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)\n        if (!this.form ||\n            !this.form.controller ||\n            ((!this.visible || this.component.hidden) &&\n                this.component.clearOnHide &&\n                !this.rootPristine)) {\n            return false;\n        }\n        this.formReady.then(() => {\n            this.evaluate(this.form.controller, {\n                components: this.components,\n                instance: this,\n            });\n        });\n    }\n    /**\n     *\n     */\n    teardown() {\n        this.emit(\"formDelete\", this.id);\n        delete Formio_1.Formio.forms[this.id];\n        delete this.executeShortcuts;\n        delete this.triggerSaveDraft;\n        super.teardown();\n    }\n    destroy(all = false) {\n        this.off(\"submitButton\");\n        this.off(\"checkValidity\");\n        this.off(\"requestUrl\");\n        this.off(\"resetForm\");\n        this.off(\"deleteSubmission\");\n        this.off(\"refreshData\");\n        return super.destroy(all);\n    }\n    build(element) {\n        if (element || this.element) {\n            return this.ready.then(() => {\n                element = element || this.element;\n                super.build(element);\n            });\n        }\n        return this.ready;\n    }\n    getClassName() {\n        let classes = \"formio-form\";\n        if (this.options.readOnly) {\n            classes += \" formio-read-only\";\n        }\n        return classes;\n    }\n    render() {\n        return super.render(this.renderTemplate(\"webform\", {\n            classes: this.getClassName(),\n            children: this.renderComponents(),\n        }), this.builderMode ? \"builder\" : \"form\", true);\n    }\n    redraw() {\n        // Don't bother if we have not built yet.\n        if (!this.element) {\n            return Promise.resolve();\n        }\n        this.clear();\n        this.setContent(this.element, this.render());\n        return this.attach(this.element);\n    }\n    attach(element) {\n        this.setElement(element);\n        this.loadRefs(element, { webform: \"single\" });\n        const childPromise = this.attachComponents(this.refs.webform);\n        this.addEventListener(document, \"keydown\", this.executeShortcuts);\n        this.currentForm = this;\n        this.hook(\"attachWebform\", element, this);\n        return childPromise.then(() => {\n            this.emit(\"render\", this.element);\n            return this.setValue(this._submission, {\n                noUpdateEvent: true,\n            });\n        });\n    }\n    hasRequiredFields() {\n        let result = false;\n        (0, formUtils_1.eachComponent)(this.form.components, (component) => {\n            if (component.validate.required) {\n                result = true;\n                return true;\n            }\n        }, true);\n        return result;\n    }\n    resetValue() {\n        lodash_1.default.each(this.getComponents(), (comp) => comp.resetValue());\n        this.setPristine(true);\n        this.onChange({ resetValue: true });\n    }\n    /**\n     * Sets a new alert to display in the error dialog of the form.\n     * @param {string} type - The type of alert to display. \"danger\", \"success\", \"warning\", etc.\n     * @param {string} message - The message to show in the alert.\n     * @param {object} options - The options for the alert.\n     */\n    setAlert(type, message, options) {\n        if (!type && this.submitted) {\n            if (this.alert) {\n                if (this.refs.errorRef && this.refs.errorRef.length) {\n                    this.refs.errorRef.forEach((el) => {\n                        this.removeEventListener(el, \"click\");\n                        this.removeEventListener(el, \"keypress\");\n                    });\n                }\n                this.removeChild(this.alert);\n                this.alert = null;\n            }\n            return;\n        }\n        if (this.options.noAlerts) {\n            if (!message) {\n                this.emit(\"error\", false);\n            }\n            return;\n        }\n        if (this.alert) {\n            try {\n                if (this.refs.errorRef && this.refs.errorRef.length) {\n                    this.refs.errorRef.forEach((el) => {\n                        this.removeEventListener(el, \"click\");\n                        this.removeEventListener(el, \"keypress\");\n                    });\n                }\n                this.removeChild(this.alert);\n                this.alert = null;\n            }\n            catch (err) {\n                // ignore\n            }\n        }\n        if (message) {\n            const attrs = {\n                class: (options && options.classes) || `alert alert-${type}`,\n                id: `error-list-${this.id}`,\n            };\n            const templateOptions = {\n                message: message instanceof HTMLElement ? message.outerHTML : message,\n                attrs: attrs,\n                type,\n            };\n            this.alert = (0, utils_1.convertStringToHTMLElement)(this.renderTemplate(\"alert\", templateOptions), `#${attrs.id}`);\n        }\n        if (!this.alert) {\n            return;\n        }\n        this.loadRefs(this.alert, { errorRef: \"multiple\" });\n        if (this.refs.errorRef && this.refs.errorRef.length) {\n            this.refs.errorRef.forEach((el) => {\n                this.addEventListener(el, \"click\", (e) => {\n                    const key = e.currentTarget.dataset.componentKey;\n                    this.focusOnComponent(key);\n                });\n                this.addEventListener(el, \"keydown\", (e) => {\n                    if (e.keyCode === 13) {\n                        e.preventDefault();\n                        const key = e.currentTarget.dataset.componentKey;\n                        this.focusOnComponent(key);\n                    }\n                });\n            });\n        }\n        this.prepend(this.alert);\n    }\n    /**\n     * Focus on selected component.\n     * @param {string} key - The key of selected component.\n     */\n    focusOnComponent(key) {\n        if (key) {\n            const component = this.getComponent(key);\n            if (component) {\n                component.focus();\n            }\n        }\n    }\n    /**\n     * Show the errors of this form within the alert dialog.\n     * @param {object} error - An optional additional error to display along with the component errors.\n     * @returns {*}\n     */\n    /* eslint-disable no-unused-vars */\n    /**\n     *\n     * @param {Array} errors - An array of errors to display.\n     * @param {boolean} triggerEvent - Whether or not to trigger the error event.\n     * @returns {void|Array} - The errors that were set.\n     */\n    showErrors(errors, triggerEvent) {\n        this.loading = false;\n        if (!Array.isArray(errors)) {\n            errors = [errors];\n        }\n        if (Array.isArray(this.errors)) {\n            errors = lodash_1.default.union(errors, this.errors);\n        }\n        errors = errors.concat(this.customErrors).filter((err) => !!err);\n        if (!errors.length) {\n            this.setAlert(false);\n            return;\n        }\n        // Mark any components as invalid if in a custom message.\n        const componentErrors = {};\n        errors.forEach((err) => {\n            var _a, _b;\n            const path = err.path || ((_a = err.context) === null || _a === void 0 ? void 0 : _a.path) || ((_b = err.component) === null || _b === void 0 ? void 0 : _b.key);\n            if (!componentErrors[path]) {\n                componentErrors[path] = [];\n            }\n            componentErrors[path].push(err);\n        });\n        // Iterate through all of our component errors and apply them to the components.\n        for (let path in componentErrors) {\n            const component = this.getComponent(path);\n            const errors = componentErrors[path];\n            if (component) {\n                component.serverErrors = errors.filter((err) => err.fromServer);\n                component.setCustomValidity(errors, true);\n            }\n        }\n        const displayedErrors = [];\n        if (errors.length) {\n            errors = lodash_1.default.uniqBy(errors, (error) => { var _a, _b; return [error.message, (_a = error.component) === null || _a === void 0 ? void 0 : _a.id, (_b = error.context) === null || _b === void 0 ? void 0 : _b.path].join(); });\n            const createListItem = (message, index) => {\n                var _a, _b, _c;\n                const err = errors[index];\n                const messageFromIndex = !lodash_1.default.isUndefined(index) && errors && errors[index];\n                const keyOrPath = (messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.formattedKeyOrPath) ||\n                    (messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.path) ||\n                    ((_a = messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.context) === null || _a === void 0 ? void 0 : _a.path) ||\n                    (((_b = err.context) === null || _b === void 0 ? void 0 : _b.component) && ((_c = err.context) === null || _c === void 0 ? void 0 : _c.component.key)) ||\n                    (err.component && err.component.key) ||\n                    (err.fromServer && err.path);\n                const formattedKeyOrPath = keyOrPath ? (0, utils_1.getStringFromComponentPath)(keyOrPath) : \"\";\n                if (typeof err !== \"string\" && !err.formattedKeyOrPath) {\n                    err.formattedKeyOrPath = formattedKeyOrPath;\n                }\n                return {\n                    message: (0, utils_1.unescapeHTML)(message),\n                    keyOrPath: formattedKeyOrPath,\n                };\n            };\n            errors.forEach(({ message, context, fromServer, component }, index) => {\n                const text = !(component === null || component === void 0 ? void 0 : component.label) || (context === null || context === void 0 ? void 0 : context.hasLabel) || fromServer\n                    ? this.t(\"alertMessage\", { message: this.t(message) })\n                    : this.t(\"alertMessageWithLabel\", {\n                        label: this.t(component === null || component === void 0 ? void 0 : component.label),\n                        message: this.t(message),\n                    });\n                displayedErrors.push(createListItem(text, index));\n            });\n        }\n        const errorsList = this.renderTemplate(\"errorsList\", { errors: displayedErrors });\n        this.root.setAlert(\"danger\", errorsList);\n        if (triggerEvent) {\n            this.emit(\"error\", errors);\n        }\n        return errors;\n    }\n    /* eslint-enable no-unused-vars */\n    /**\n     * Called when the submission has completed, or if the submission needs to be sent to an external library.\n     * @param {object} submission - The submission object.\n     * @param {boolean} saved - Whether or not this submission was saved to the server.\n     * @returns {object} - The submission object.\n     */\n    onSubmit(submission, saved) {\n        var _a;\n        this.loading = false;\n        this.submitting = false;\n        this.setPristine(true);\n        // We want to return the submitted submission and setValue will mutate the submission so cloneDeep it here.\n        this.setValue((0, utils_1.fastCloneDeep)(submission), {\n            noValidate: true,\n            noCheck: true,\n        });\n        this.setAlert(\"success\", `<p>${this.t(\"complete\")}</p>`);\n        // Cancel triggered saveDraft to prevent overriding the submitted state\n        if (this.draftEnabled && ((_a = this.triggerSaveDraft) === null || _a === void 0 ? void 0 : _a.cancel)) {\n            this.triggerSaveDraft.cancel();\n        }\n        this.emit(\"submit\", submission, saved);\n        if (saved) {\n            this.emit(\"submitDone\", submission);\n        }\n        return submission;\n    }\n    normalizeError(error) {\n        if (error) {\n            if (typeof error === \"object\" && \"details\" in error) {\n                error = error.details;\n            }\n            if (typeof error === \"string\") {\n                error = { message: error };\n            }\n        }\n        return error;\n    }\n    /**\n     * Called when an error occurs during the submission.\n     * @param {object} error - The error that occured.\n     * @returns {Array} errors - All errors.\n     */\n    onSubmissionError(error) {\n        error = this.normalizeError(error);\n        this.submitting = false;\n        this.setPristine(false);\n        this.emit(\"submitError\", error || this.errors);\n        // Allow for silent cancellations (no error message, no submit button error state)\n        if (error && error.silent) {\n            this.emit(\"change\", { isValid: true }, { silent: true });\n            return false;\n        }\n        const errors = this.showErrors(error, true);\n        if (this.root && this.root.alert) {\n            this.scrollIntoView(this.root.alert);\n        }\n        return errors;\n    }\n    /**\n     * Trigger the change event for this form.\n     * @param {any} flags - The flags to set on this change event.\n     * @param {any} changed - The changed object which reflects the changes in the form.\n     * @param {boolean} modified - Whether or not the form has been modified.\n     * @param {any} changes - The changes that have occured in the form.\n     */\n    onChange(flags, changed, modified, changes) {\n        var _a;\n        flags = flags || {};\n        let isChangeEventEmitted = false;\n        if (((_a = this.parent) === null || _a === void 0 ? void 0 : _a.subForm) === this) {\n            super.onChange(Object.assign(Object.assign({}, flags), { modified }), false);\n        }\n        else {\n            super.onChange(flags, true);\n        }\n        const value = lodash_1.default.clone(this.submission);\n        flags.changed = value.changed = changed;\n        flags.changes = changes;\n        if (modified && this.pristine) {\n            this.pristine = false;\n        }\n        this.checkData(value.data, flags);\n        const shouldValidate = !flags.noValidate ||\n            flags.fromIframe ||\n            (flags.fromSubmission && this.rootPristine && this.pristine && flags.changed);\n        const errors = shouldValidate\n            ? this.validate(value.data, Object.assign(Object.assign({}, flags), { noValidate: false, process: 'change' }))\n            : [];\n        value.isValid = (errors || []).filter(err => !err.fromServer).length === 0;\n        this.loading = false;\n        if (this.submitted) {\n            // show server errors while they are not cleaned/fixed\n            const nonComponentServerErrors = lodash_1.default.filter(this.serverErrors || [], (err) => !err.component && !err.path);\n            this.showErrors(nonComponentServerErrors.length ? nonComponentServerErrors : errors);\n        }\n        // See if we need to save the draft of the form.\n        if (modified && this.options.saveDraft) {\n            this.triggerSaveDraft();\n        }\n        if (!flags || !flags.noEmit) {\n            this.emit(\"change\", value, flags, modified);\n            isChangeEventEmitted = true;\n        }\n        // The form is initialized after the first change event occurs.\n        if (isChangeEventEmitted && !this.initialized) {\n            this.emit(\"initialized\");\n            this.initialized = true;\n        }\n    }\n    /**\n     * Send a delete request to the server.\n     * @returns {Promise} - The promise that is triggered when the delete is complete.\n     */\n    deleteSubmission() {\n        return this.formio.deleteSubmission().then(() => {\n            this.emit(\"submissionDeleted\", this.submission);\n            this.resetValue();\n        });\n    }\n    /**\n     * Cancels the submission.\n     * @param {boolean} noconfirm - Whether or not to confirm the cancellation.\n     * @alias reset\n     * @returns {boolean} - TRUE means the submission was cancelled, FALSE otherwise.\n     */\n    cancel(noconfirm) {\n        const shouldReset = this.hook(\"beforeCancel\", true);\n        if (shouldReset && (noconfirm || confirm(this.t(\"confirmCancel\")))) {\n            this.resetValue();\n            return true;\n        }\n        else {\n            this.emit(\"cancelSubmit\");\n            return false;\n        }\n    }\n    setMetadata(submission) {\n        // Add in metadata about client submitting the form\n        submission.metadata = submission.metadata || {};\n        lodash_1.default.defaults(submission.metadata, {\n            timezone: lodash_1.default.get(this, \"_submission.metadata.timezone\", (0, utils_1.currentTimezone)()),\n            offset: parseInt(lodash_1.default.get(this, \"_submission.metadata.offset\", (0, moment_1.default)().utcOffset()), 10),\n            origin: document.location.origin,\n            referrer: document.referrer,\n            browserName: navigator.appName,\n            userAgent: navigator.userAgent,\n            pathName: window.location.pathname,\n            onLine: navigator.onLine,\n        });\n    }\n    submitForm(options = {}, local = false) {\n        this.clearServerErrors();\n        return new Promise((resolve, reject) => {\n            // Read-only forms should never submit.\n            if (this.options.readOnly) {\n                return resolve({\n                    submission: this.submission,\n                    saved: false,\n                });\n            }\n            const submission = (0, utils_1.fastCloneDeep)(this.submission || {});\n            this.setMetadata(submission);\n            submission.state = options.state || submission.state || \"submitted\";\n            const isDraft = submission.state === \"draft\";\n            this.hook(\"beforeSubmit\", Object.assign(Object.assign({}, submission), { component: options.component }), (err, data) => {\n                var _a;\n                if (err) {\n                    return reject(err);\n                }\n                submission._vnote = data && data._vnote ? data._vnote : \"\";\n                try {\n                    if (!isDraft && !options.noValidate) {\n                        if (!submission.data) {\n                            return reject(\"Invalid Submission\");\n                        }\n                        const errors = this.validate(submission.data, {\n                            local,\n                            dirty: true,\n                            silentCheck: false,\n                            process: \"submit\",\n                        });\n                        if (errors.length ||\n                            ((_a = options.beforeSubmitResults) === null || _a === void 0 ? void 0 : _a.some((result) => result.status === \"rejected\"))) {\n                            return reject(errors);\n                        }\n                    }\n                }\n                catch (err) {\n                    console.error(err);\n                }\n                this.everyComponent((comp) => {\n                    var _a, _b;\n                    if (submission._vnote && comp.type === \"form\" && comp.component.reference) {\n                        lodash_1.default.get(submission.data, local ? (_a = comp.paths) === null || _a === void 0 ? void 0 : _a.localDataPath : comp.path, {})._vnote = submission._vnote;\n                    }\n                    const { persistent } = comp.component;\n                    if (persistent === \"client-only\") {\n                        lodash_1.default.unset(submission.data, local ? (_b = comp.paths) === null || _b === void 0 ? void 0 : _b.localDataPath : comp.path);\n                    }\n                });\n                this.hook(\"customValidation\", Object.assign(Object.assign({}, submission), { component: options.component }), (err) => {\n                    if (err) {\n                        // If string is returned, cast to object.\n                        if (typeof err === \"string\") {\n                            err = {\n                                message: err,\n                            };\n                        }\n                        // Ensure err is an array.\n                        err = Array.isArray(err) ? err : [err];\n                        return reject(err);\n                    }\n                    this.loading = true;\n                    // Use the form action to submit the form if available.\n                    if (this._form && this._form.action) {\n                        const method = submission.data._id &&\n                            this._form.action.includes(submission.data._id)\n                            ? \"PUT\"\n                            : \"POST\";\n                        return Formio_1.Formio.makeStaticRequest(this._form.action, method, submission, this.formio ? this.formio.options : {})\n                            .then((result) => resolve({\n                            submission: result,\n                            saved: true,\n                        }))\n                            .catch((error) => {\n                            this.setServerErrors(error);\n                            return reject(error);\n                        });\n                    }\n                    const submitFormio = this.formio;\n                    if (this.nosubmit || !submitFormio) {\n                        return resolve({\n                            submission,\n                            saved: false,\n                        });\n                    }\n                    // If this is an actionUrl, then make sure to save the action and not the submission.\n                    const submitMethod = submitFormio.actionUrl\n                        ? \"saveAction\"\n                        : \"saveSubmission\";\n                    submitFormio[submitMethod](submission)\n                        .then((result) => resolve({\n                        submission: result,\n                        saved: true,\n                    }))\n                        .catch((error) => {\n                        this.setServerErrors(error);\n                        return reject(error);\n                    });\n                });\n            });\n        });\n    }\n    setServerErrors(error) {\n        if (error.details) {\n            this.serverErrors = error.details\n                .filter((err) => (err.level ? err.level === \"error\" : err))\n                .map((err) => {\n                err.fromServer = true;\n                return err;\n            });\n        }\n        else if (typeof error === \"string\") {\n            this.serverErrors = [{ fromServer: true, level: \"error\", message: error }];\n        }\n    }\n    executeSubmit(options) {\n        this.submitted = true;\n        this.submitting = true;\n        return this.submitForm(options)\n            .then(({ submission, saved }) => this.onSubmit(submission, saved))\n            .then((results) => {\n            this.submissionInProcess = false;\n            return results;\n        })\n            .catch((err) => {\n            this.submissionInProcess = false;\n            return Promise.reject(this.onSubmissionError(err));\n        });\n    }\n    clearServerErrors() {\n        var _a;\n        (_a = this.serverErrors) === null || _a === void 0 ? void 0 : _a.forEach((error) => {\n            if (error.path) {\n                const pathArray = (0, utils_1.getArrayFromComponentPath)(error.path);\n                const component = this.getComponent(pathArray, lodash_1.default.identity, error.formattedKeyOrPath);\n                if (component) {\n                    component.serverErrors = [];\n                }\n            }\n        });\n        this.serverErrors = [];\n    }\n    /**\n     * Submits the form.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.src = 'https://examples.form.io/example';\n     * form.submission = {data: {\n     *   firstName: 'Joe',\n     *   lastName: 'Smith',\n     *   email: 'joe@example.com'\n     * }};\n     * form.submit().then((submission) => {\n     *   console.log(submission);\n     * });\n     * @param {boolean} before - If this submission occured from the before handlers.\n     * @param {any} options - The options to use when submitting this form.\n     * @returns {Promise} - A promise when the form is done submitting.\n     */\n    submit(before = false, options = {}) {\n        this.submissionInProcess = true;\n        if (!before) {\n            return this.beforeSubmit(options).then(() => this.executeSubmit(options));\n        }\n        else {\n            return this.executeSubmit(options);\n        }\n    }\n    submitUrl(URL, headers) {\n        if (!URL) {\n            return console.warn(\"Missing URL argument\");\n        }\n        const submission = this.submission || {};\n        const API_URL = URL;\n        const settings = {\n            method: \"POST\",\n            headers: {},\n        };\n        if (headers && headers.length > 0) {\n            headers.map((e) => {\n                if (e.header !== \"\" && e.value !== \"\") {\n                    settings.headers[e.header] = this.interpolate(e.value, submission);\n                }\n            });\n        }\n        if (API_URL && settings) {\n            Formio_1.Formio.makeStaticRequest(API_URL, settings.method, submission, {\n                headers: settings.headers,\n            })\n                .then(() => {\n                this.emit(\"requestDone\");\n                this.setAlert(\"success\", \"<p> Success </p>\");\n            })\n                .catch((e) => {\n                const message = `${e.statusText ? e.statusText : \"\"} ${e.status ? e.status : e}`;\n                this.emit(\"error\", message);\n                console.error(message);\n                this.setAlert(\"danger\", `<p> ${message} </p>`);\n                return Promise.reject(this.onSubmissionError(e));\n            });\n        }\n        else {\n            this.emit(\"error\", \"You should add a URL to this button.\");\n            this.setAlert(\"warning\", \"You should add a URL to this button.\");\n            return console.warn(\"You should add a URL to this button.\");\n        }\n    }\n    triggerCaptcha(components = null) {\n        if (!this || !this.components) {\n            return;\n        }\n        const captchaComponent = [];\n        (0, formUtils_1.eachComponent)(components || this.components, (component) => {\n            if (/^(re)?captcha$/.test(component.type) && component.component.eventType === 'formLoad') {\n                captchaComponent.push(component);\n            }\n        }, true);\n        if (captchaComponent.length > 0) {\n            if (captchaComponent[0].component.provider === 'google' && components) {\n                return;\n            }\n            captchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);\n        }\n    }\n    set nosubmit(value) {\n        this._nosubmit = !!value;\n        this.emit(\"nosubmit\", this._nosubmit);\n    }\n    get nosubmit() {\n        return this._nosubmit || false;\n    }\n    get conditions() {\n        var _a, _b;\n        return (_b = (_a = this.schema.settings) === null || _a === void 0 ? void 0 : _a.conditions) !== null && _b !== void 0 ? _b : [];\n    }\n    get variables() {\n        var _a, _b;\n        return (_b = (_a = this.schema.settings) === null || _a === void 0 ? void 0 : _a.variables) !== null && _b !== void 0 ? _b : [];\n    }\n}\nexports[\"default\"] = Webform;\nWebform.setBaseUrl = Formio_1.Formio.setBaseUrl;\nWebform.setApiUrl = Formio_1.Formio.setApiUrl;\nWebform.setAppUrl = Formio_1.Formio.setAppUrl;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Webform.js?");
 
 /***/ }),
 
@@ -4872,7 +4872,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 Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass Wizard extends Webform_1.default {\n    /**\n     * Constructor for wizard-based forms.\n     * @param {HTMLElement | object | import('Form').FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.\n     * @param {import('Form').FormOptions} [_options] - The options to create a new form instance.\n     *    - breadcrumbSettings.clickable: true (default) - determines if the breadcrumb bar is clickable.\n     *    - buttonSettings.show*(Previous, Next, Cancel): true (default) - determines if the button is shown.\n     *    - allowPrevious: false (default) - determines if the breadcrumb bar is clickable for visited tabs.\n     */\n    constructor(elementOrOptions = undefined, _options = undefined) {\n        let element, options;\n        if (elementOrOptions instanceof HTMLElement || _options) {\n            element = elementOrOptions;\n            options = _options || {};\n        }\n        else {\n            options = elementOrOptions || {};\n        }\n        options.display = 'wizard';\n        super(element, options);\n        this.pages = [];\n        this.prefixComps = [];\n        this.suffixComps = [];\n        this.components = [];\n        this.originalComponents = [];\n        this.page = 0;\n        this.currentPanel = null;\n        this.currentPanels = null;\n        this.currentNextPage = 0;\n        this._seenPages = [0];\n        this.subWizards = [];\n        this.allPages = [];\n        this.lastPromise = Promise.resolve();\n        this.enabledIndex = 0;\n        this.editMode = false;\n        this.originalOptions = lodash_1.default.cloneDeep(this.options);\n    }\n    isLastPage() {\n        const next = this.getNextPage();\n        if (lodash_1.default.isNumber(next)) {\n            return next === -1;\n        }\n        return lodash_1.default.isNull(next);\n    }\n    getPages(args = {}) {\n        const { all = false } = args;\n        const pages = this.hasExtraPages ? this.components : this.pages;\n        const filteredPages = pages\n            .filter(all ? lodash_1.default.identity : (p, index) => this._seenPages.includes(index));\n        return filteredPages;\n    }\n    get hasExtraPages() {\n        return !lodash_1.default.isEmpty(this.subWizards);\n    }\n    get data() {\n        return super.data;\n    }\n    get localData() {\n        var _a, _b;\n        return ((_b = (_a = this.pages[this.page]) === null || _a === void 0 ? void 0 : _a.root) === null || _b === void 0 ? void 0 : _b.submission.data) || this.submission.data;\n    }\n    checkConditions(data, flags, row) {\n        const visible = super.checkConditions(data, flags, row);\n        this.establishPages(data);\n        return visible;\n    }\n    set data(value) {\n        this._data = value;\n        lodash_1.default.each(this.getPages({ all: true }), (component) => {\n            component.data = this.componentContext(component);\n        });\n    }\n    getComponents() {\n        return this.submitting\n            ? this.getPages({ all: this.isLastPage() })\n            : super.getComponents();\n    }\n    resetValue() {\n        this.getPages({ all: true }).forEach((page) => page.resetValue());\n        this.setPristine(true);\n    }\n    init() {\n        var _a;\n        // Check for and initlize button settings object\n        this.options.buttonSettings = lodash_1.default.defaults(this.options.buttonSettings, {\n            showPrevious: true,\n            showNext: true,\n            showSubmit: true,\n            showCancel: !this.options.readOnly\n        });\n        this.options.breadcrumbSettings = lodash_1.default.defaults(this.options.breadcrumbSettings, {\n            clickable: true\n        });\n        this.options.allowPrevious = this.options.allowPrevious || false;\n        this.page = 0;\n        const onReady = super.init();\n        this.setComponentSchema();\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[this.page]) {\n            this.component = this.pages[this.page].component;\n        }\n        this.on('subWizardsUpdated', (subForm) => {\n            const subWizard = this.subWizards.find(subWizard => { var _a; return (subForm === null || subForm === void 0 ? void 0 : subForm.id) && ((_a = subWizard.subForm) === null || _a === void 0 ? void 0 : _a.id) === (subForm === null || subForm === void 0 ? void 0 : subForm.id); });\n            if (this.subWizards.length && subWizard) {\n                subWizard.subForm.setValue(subForm._submission, {}, true);\n                this.establishPages();\n                this.redraw();\n            }\n        });\n        return onReady;\n    }\n    get wizardKey() {\n        return `wizard-${this.id}`;\n    }\n    get wizard() {\n        return this.form;\n    }\n    set wizard(form) {\n        this.setForm(form);\n    }\n    get buttons() {\n        const buttons = {};\n        [\n            { name: 'cancel', method: 'cancel' },\n            { name: 'previous', method: 'prevPage' },\n            { name: 'next', method: 'nextPage' },\n            { name: 'submit', method: 'submit' }\n        ].forEach((button) => {\n            if (this.hasButton(button.name)) {\n                buttons[button.name] = button;\n            }\n        });\n        return buttons;\n    }\n    get buttonOrder() {\n        var _a, _b, _c;\n        const defaultButtonOrder = [\n            'cancel',\n            'previous',\n            'next',\n            'submit'\n        ];\n        return (_c = (_b = (_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.wizardButtonOrder) === null || _b === void 0 ? void 0 : _b.toLowerCase().split(', ')) !== null && _c !== void 0 ? _c : defaultButtonOrder;\n    }\n    get renderContext() {\n        var _a, _b;\n        return {\n            disableWizardSubmit: this.form.disableWizardSubmit,\n            wizardKey: this.wizardKey,\n            isBreadcrumbClickable: this.isBreadcrumbClickable(),\n            isSubForm: !!this.parent && !((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.type) === 'wizard',\n            panels: this.allPages.length ? this.allPages.map(page => page.component) : this.pages.map(page => page.component),\n            buttons: this.buttons,\n            currentPage: this.page,\n            buttonOrder: this.buttonOrder,\n        };\n    }\n    prepareNavigationSettings(ctx) {\n        const currentPanel = this.currentPanel;\n        if (currentPanel && currentPanel.buttonSettings) {\n            Object.keys(currentPanel.buttonSettings).forEach(() => {\n                Object.keys(ctx.buttons).forEach(key => {\n                    if (typeof currentPanel.buttonSettings[key] !== 'undefined' && !currentPanel.buttonSettings[key] || ctx.isSubForm) {\n                        ctx.buttons[key] = null;\n                    }\n                });\n            });\n        }\n        return this.renderTemplate('wizardNav', ctx);\n    }\n    prepareHeaderSettings(ctx, headerType) {\n        var _a;\n        const shouldHideBreadcrumbs = ((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.breadcrumb) === 'none' ||\n            lodash_1.default.get(this.form, 'settings.wizardBreadcrumbsType', '') === 'none';\n        if (shouldHideBreadcrumbs || ctx.isSubForm) {\n            return null;\n        }\n        return this.renderTemplate(headerType, ctx);\n    }\n    render() {\n        const ctx = this.renderContext;\n        if (this.component.key) {\n            ctx.panels.map(panel => {\n                if (panel.key === this.component.key) {\n                    this.currentPanel = panel;\n                    ctx.wizardPageTooltip = this.getFormattedTooltip(panel.tooltip);\n                }\n            });\n        }\n        const wizardNav = this.prepareNavigationSettings(ctx);\n        const wizardHeaderType = `wizardHeader${lodash_1.default.get(this.form, 'settings.wizardHeaderType', '')}`;\n        const wizardHeaderLocation = lodash_1.default.get(this.form, 'settings.wizardHeaderLocation', 'left');\n        const wizardHeader = this.prepareHeaderSettings(ctx, wizardHeaderType);\n        return this.renderTemplate('wizard', Object.assign(Object.assign({}, ctx), { className: super.getClassName(), wizardHeader,\n            wizardHeaderType,\n            wizardHeaderLocation,\n            wizardNav, components: this.renderComponents([\n                ...this.prefixComps,\n                ...this.currentPage.components,\n                ...this.suffixComps\n            ]) }), this.builderMode ? 'builder' : 'form');\n    }\n    redrawNavigation() {\n        if (this.element) {\n            let navElement = this.element.querySelector(`#${this.wizardKey}-nav`);\n            if (navElement) {\n                this.detachNav();\n                navElement.outerHTML = this.renderTemplate('wizardNav', this.renderContext);\n                navElement = this.element.querySelector(`#${this.wizardKey}-nav`);\n                this.loadRefs(navElement, {\n                    [`${this.wizardKey}-cancel`]: 'single',\n                    [`${this.wizardKey}-previous`]: 'single',\n                    [`${this.wizardKey}-next`]: 'single',\n                    [`${this.wizardKey}-submit`]: 'single',\n                });\n                this.attachNav();\n            }\n        }\n    }\n    redrawHeader() {\n        if (this.element) {\n            let headerElement = this.element.querySelector(`#${this.wizardKey}-header`);\n            if (headerElement) {\n                this.detachHeader();\n                headerElement.outerHTML = this.renderTemplate(`wizardHeader${lodash_1.default.get(this.form, 'settings.wizardHeaderType', '')}`, this.renderContext);\n                headerElement = this.element.querySelector(`#${this.wizardKey}-header`);\n                this.loadRefs(headerElement, {\n                    [`${this.wizardKey}-link`]: 'multiple',\n                    [`${this.wizardKey}-tooltip`]: 'multiple'\n                });\n                this.attachHeader();\n            }\n        }\n    }\n    /**\n     * Attaches the wizard to the provided DOM element, initializes component references, sets up navigation,\n     * and emits a render event. It will initialize the wizard's index if necessary,\n     * attach event hooks, and make sure that the current page is rendered and displayed correctly.\n     * @param {HTMLElement} element - The DOM element to which the wizard will be attached.\n     * @returns {Promise} A promise that resolves when all components have been successfully attached.\n     */\n    attach(element) {\n        var _a;\n        this.setElement(element);\n        this.loadRefs(element, {\n            [this.wizardKey]: 'single',\n            [`${this.wizardKey}-header`]: 'single',\n            [`${this.wizardKey}-cancel`]: 'single',\n            [`${this.wizardKey}-previous`]: 'single',\n            [`${this.wizardKey}-next`]: 'single',\n            [`${this.wizardKey}-submit`]: 'single',\n            [`${this.wizardKey}-link`]: 'multiple',\n            [`${this.wizardKey}-tooltip`]: 'multiple'\n        });\n        if ((this.options.readOnly || this.editMode) && !this.enabledIndex) {\n            this.enabledIndex = ((_a = this.pages) === null || _a === void 0 ? void 0 : _a.length) - 1;\n        }\n        this.hook('attachWebform', element, this);\n        const promises = this.attachComponents(this.refs[this.wizardKey], [\n            ...this.prefixComps,\n            ...this.currentPage.components,\n            ...this.suffixComps,\n        ]);\n        this.attachNav();\n        this.attachHeader();\n        return promises.then(() => {\n            this.emit('render', { component: this.currentPage, page: this.page });\n            if (this.component.scrollToTop) {\n                this.scrollPageToTop();\n            }\n        });\n    }\n    scrollPageToTop() {\n        var _a;\n        const pageTop = (_a = this.refs[`${this.wizardKey}-header`]) !== null && _a !== void 0 ? _a : this.refs[this.wizardKey];\n        if (!pageTop) {\n            return;\n        }\n        if ('scrollIntoView' in pageTop) {\n            pageTop.scrollIntoView(true);\n        }\n        else {\n            this.scrollIntoView(pageTop);\n        }\n    }\n    isBreadcrumbClickable() {\n        let currentPage = null;\n        this.pages.map(page => {\n            if (lodash_1.default.isEqual(this.currentPage.component, page.component)) {\n                currentPage = page;\n            }\n        });\n        if (lodash_1.default.has(currentPage, 'component.breadcrumbClickable')) {\n            return lodash_1.default.get(currentPage, 'component.breadcrumbClickable');\n        }\n        if (lodash_1.default.has(this.options, 'breadcrumbSettings.clickable')) {\n            return this.options.breadcrumbSettings.clickable;\n        }\n        return true;\n    }\n    isAllowPrevious() {\n        let currentPage = null;\n        this.pages.map(page => {\n            if (lodash_1.default.isEqual(this.currentPage.component, page.component)) {\n                currentPage = page;\n            }\n        });\n        return lodash_1.default.get(currentPage.component, 'allowPrevious', this.options.allowPrevious);\n    }\n    /**\n     * Handles navigate on 'Enter' key event in a wizard form.\n     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.\n     */\n    handleNaviageteOnEnter(event) {\n        if (event.keyCode === 13) {\n            const clickEvent = new CustomEvent('click');\n            const buttonElement = this.refs[`${this.wizardKey}-${this.buttons.next.name}`];\n            if (buttonElement) {\n                buttonElement.dispatchEvent(clickEvent);\n            }\n        }\n    }\n    /**\n     * Handles save on 'Enter' key event in a wizard form.\n     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.\n     */\n    handleSaveOnEnter(event) {\n        if (event.keyCode === 13) {\n            const clickEvent = new CustomEvent('click');\n            const buttonElement = this.refs[`${this.wizardKey}-${this.buttons.submit.name}`];\n            if (buttonElement) {\n                buttonElement.dispatchEvent(clickEvent);\n            }\n        }\n    }\n    attachNav() {\n        if (this.component.navigateOnEnter) {\n            this.addEventListener(document, 'keyup', this.handleNaviageteOnEnter.bind(this));\n        }\n        if (this.component.saveOnEnter) {\n            this.addEventListener(document, 'keyup', this.handleSaveOnEnter.bind(this));\n        }\n        lodash_1.default.each(this.buttons, (button) => {\n            const buttonElement = this.refs[`${this.wizardKey}-${button.name}`];\n            this.addEventListener(buttonElement, 'click', (event) => {\n                event.preventDefault();\n                // Disable the button until done.\n                buttonElement.setAttribute('disabled', 'disabled');\n                this.setLoading(buttonElement, true);\n                // Call the button method, then re-enable the button.\n                this[button.method]().then(() => {\n                    buttonElement.removeAttribute('disabled');\n                    this.setLoading(buttonElement, false);\n                }).catch(() => {\n                    buttonElement.removeAttribute('disabled');\n                    this.setLoading(buttonElement, false);\n                });\n            });\n        });\n    }\n    /**\n     * Emits an event indicating that a wizard page has been selected.\n     * @param {number} index - Index of the selected wizard page in the `pages` array.\n     * @fires emit - Emits the 'wizardPageSelected' event with the page object and index.\n     */\n    emitWizardPageSelected(index) {\n        this.emit('wizardPageSelected', this.pages[index], index);\n    }\n    attachHeader() {\n        var _a, _b;\n        const isAllowPrevious = this.isAllowPrevious();\n        this.attachTooltips(this.refs[`${this.wizardKey}-tooltip`], (_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.tooltip);\n        if (this.isBreadcrumbClickable() || isAllowPrevious) {\n            (_b = this.refs[`${this.wizardKey}-link`]) === null || _b === void 0 ? void 0 : _b.forEach((link, index) => {\n                if (!isAllowPrevious || index <= this.enabledIndex) {\n                    this.addEventListener(link, 'click', (event) => {\n                        this.emit('wizardNavigationClicked', this.pages[index]);\n                        event.preventDefault();\n                        return this.setPage(index).then(() => {\n                            this.emitWizardPageSelected(index);\n                        });\n                    });\n                }\n            });\n        }\n    }\n    detachNav() {\n        if (this.component.navigateOnEnter) {\n            this.removeEventListener(document, 'keyup', this.handleNaviageteOnEnter.bind(this));\n        }\n        if (this.component.saveOnEnter) {\n            this.removeEventListener(document, 'keyup', this.handleSaveOnEnter.bind(this));\n        }\n        lodash_1.default.each(this.buttons, (button) => {\n            this.removeEventListener(this.refs[`${this.wizardKey}-${button.name}`], 'click');\n        });\n    }\n    detachHeader() {\n        if (this.refs[`${this.wizardKey}-link`]) {\n            this.refs[`${this.wizardKey}-link`].forEach((link) => {\n                this.removeEventListener(link, 'click');\n            });\n        }\n    }\n    transformPages() {\n        const allComponents = [];\n        const components = this.getSortedComponents(this);\n        let defferedComponents = [];\n        this.allPages = [];\n        // Get all components including all nested components and line up in the correct order\n        const getAllComponents = (nestedComp, compsArr, pushAllowed = true) => {\n            const nestedPages = [];\n            const dataArrayComponents = ['datagrid', 'editgrid', 'dynamicWizard'];\n            const currentComponents = (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.subForm) ? this.getSortedComponents(nestedComp.subForm) : (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.components) || [];\n            const visibleComponents = currentComponents.filter(comp => comp._visible);\n            const filteredComponents = visibleComponents.filter(comp => !dataArrayComponents.includes(comp.component.type) && (comp.type !== 'form' || comp.isNestedWizard));\n            const additionalComponents = currentComponents.filter(comp => { var _a; return ((_a = comp.subForm) === null || _a === void 0 ? void 0 : _a._form.display) !== 'wizard'; });\n            let hasNested = false;\n            (0, utils_1.eachComponent)(filteredComponents, (comp) => {\n                if (comp && comp.component) {\n                    if (comp.component.type === 'panel' && (comp === null || comp === void 0 ? void 0 : comp.parent.wizard) && !getAllComponents(comp, compsArr, false)) {\n                        if (pushAllowed) {\n                            this.setRootPanelId(comp);\n                            nestedPages.push(comp);\n                        }\n                        hasNested = true;\n                    }\n                    if (comp.isNestedWizard && comp.subForm) {\n                        const hasNestedForm = getAllComponents(comp, nestedPages, pushAllowed);\n                        if (!hasNested) {\n                            hasNested = hasNestedForm;\n                        }\n                    }\n                }\n            }, true);\n            if (nestedComp.component.type === 'panel') {\n                if (!hasNested && pushAllowed) {\n                    this.setRootPanelId(nestedComp);\n                    compsArr.push(nestedComp);\n                }\n                if (hasNested && additionalComponents.length) {\n                    const newComp = lodash_1.default.clone(nestedComp);\n                    newComp.components = additionalComponents;\n                    this.setRootPanelId(newComp);\n                    defferedComponents.push(newComp);\n                }\n            }\n            if (pushAllowed) {\n                compsArr.push(...defferedComponents, ...nestedPages);\n                defferedComponents = [];\n            }\n            return hasNested;\n        };\n        components.forEach((component) => {\n            if (component.visible) {\n                getAllComponents(component, allComponents);\n            }\n        }, []);\n        // recalculate pages only for root wizards, including the situation when the wizard is in a wrapper\n        if (this.localRoot && this.id === this.localRoot.id) {\n            allComponents.forEach((comp, index) => {\n                comp.eachComponent((component) => {\n                    component.page = index;\n                });\n            });\n        }\n        this.allPages = allComponents;\n    }\n    getSortedComponents({ components, originalComponents }) {\n        const currentComponents = [];\n        const currentPages = [];\n        if (components && components.length) {\n            components.map(page => {\n                if (page.component.type === 'panel') {\n                    currentPages[page.component.key || page.component.title] = page;\n                }\n            });\n        }\n        originalComponents === null || originalComponents === void 0 ? void 0 : originalComponents.forEach((item) => {\n            if (!item.key) {\n                item.key = item.title;\n            }\n            if (currentPages[item.key]) {\n                currentComponents.push(currentPages[item.key]);\n            }\n        });\n        return currentComponents;\n    }\n    findRootPanel(component) {\n        var _a;\n        return ((_a = component.parent) === null || _a === void 0 ? void 0 : _a.parent) ? this.findRootPanel(component.parent) : component;\n    }\n    setRootPanelId(component) {\n        var _a;\n        if (component.rootPanelId && component.rootPanelId !== component.id) {\n            return;\n        }\n        const parent = ((_a = component.parent) === null || _a === void 0 ? void 0 : _a.parent) ? this.findRootPanel(component.parent) : component;\n        component.rootPanelId = parent.id;\n    }\n    establishPages(data = this.data) {\n        this.pages = [];\n        this.prefixComps = [];\n        this.suffixComps = [];\n        const visible = [];\n        const currentPages = {};\n        const pageOptions = Object.assign(Object.assign({}, (lodash_1.default.clone(this.options))), (this.parent ? { root: this } : {}));\n        if (this.components && this.components.length) {\n            this.components.forEach(page => {\n                if (page.component.type === 'panel') {\n                    currentPages[page.component.key || page.component.title] = page;\n                }\n            });\n        }\n        if (this.originalComponents) {\n            this.originalComponents.forEach((item) => {\n                if (item.type === 'panel') {\n                    if (!item.key) {\n                        item.key = item.title;\n                    }\n                    let page = currentPages[item.key];\n                    const forceShow = this.shouldForceShow(item);\n                    const forceHide = this.shouldForceHide(item);\n                    let isVisible = !page\n                        ? (0, utils_1.checkCondition)(item, data, data, this.component, this) && !item.hidden\n                        : page.visible;\n                    if (forceShow) {\n                        isVisible = true;\n                    }\n                    else if (forceHide) {\n                        isVisible = false;\n                    }\n                    if (isVisible) {\n                        visible.push(item);\n                        if (page) {\n                            this.pages.push(page);\n                        }\n                    }\n                    if (!page && isVisible) {\n                        page = this.createComponent(item, pageOptions);\n                        page.visible = isVisible;\n                        this.pages.push(page);\n                        page.eachComponent((component) => {\n                            component.page = (this.pages.length - 1);\n                        });\n                    }\n                }\n                else if (item.type !== 'button') {\n                    if (!this.pages.length) {\n                        this.prefixComps.push(this.createComponent(item, pageOptions));\n                    }\n                    else {\n                        this.suffixComps.push(this.createComponent(item, pageOptions));\n                    }\n                }\n            });\n        }\n        if (this.pages.length) {\n            this.emit('pagesChanged');\n        }\n        this.transformPages();\n        if (this.allPages && this.allPages.length) {\n            this.updatePages();\n        }\n        return visible;\n    }\n    updatePages() {\n        this.pages = this.allPages;\n    }\n    addComponents() {\n        this.establishPages();\n    }\n    setPage(num) {\n        if (num === this.page) {\n            return Promise.resolve();\n        }\n        if (num >= 0 && num < this.pages.length) {\n            this.page = num;\n            this.pageFieldLogic(num);\n            this.getNextPage();\n            let parentNum = num;\n            if (this.hasExtraPages) {\n                const pageFromPages = this.pages[num];\n                const pageFromComponents = this.components[num];\n                if (!pageFromComponents || (pageFromPages === null || pageFromPages === void 0 ? void 0 : pageFromPages.id) !== pageFromComponents.id) {\n                    parentNum = this.components.findIndex(comp => {\n                        var _a, _b;\n                        return comp.id === ((_b = (_a = this.pages) === null || _a === void 0 ? void 0 : _a[parentNum]) === null || _b === void 0 ? void 0 : _b.rootPanelId);\n                    });\n                }\n            }\n            if (!this._seenPages.includes(parentNum)) {\n                this._seenPages = this._seenPages.concat(parentNum);\n            }\n            this.redraw().then(() => {\n                this.checkData(this.submission.data);\n                const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();\n                if (this.alert) {\n                    this.showErrors(errors, true, true);\n                }\n            });\n            return Promise.resolve();\n        }\n        else if (!this.pages.length) {\n            this.redraw();\n            return Promise.resolve();\n        }\n        return Promise.reject('Page not found');\n    }\n    pageFieldLogic(page) {\n        var _a;\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[page]) {\n            // Handle field logic on pages.\n            this.component = this.pages[page].component;\n            this.originalComponent = (0, utils_1.fastCloneDeep)(this.component);\n            this.fieldLogic(this.data);\n            // If disabled changed, be sure to distribute the setting.\n            this.disabled = this.shouldDisabled;\n        }\n    }\n    get currentPage() {\n        return (this.pages && (this.pages.length >= this.page)) ? this.pages[this.page] : { components: [] };\n    }\n    getNextPage() {\n        var _a;\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[this.page]) {\n            const data = this.submission.data;\n            const form = this.pages[this.page].component;\n            // Check conditional nextPage\n            if (form) {\n                const page = this.pages.length > (this.page + 1) && !this.showAllErrors ? this.page + 1 : -1;\n                if (form.nextPage) {\n                    const next = this.evaluate(form.nextPage, {\n                        next: page,\n                        data,\n                        page,\n                        form\n                    }, 'next');\n                    if (next === null) {\n                        this.currentNextPage = null;\n                        return null;\n                    }\n                    const pageNum = parseInt(next, 10);\n                    if (!isNaN(parseInt(pageNum, 10)) && isFinite(pageNum)) {\n                        this.currentNextPage = pageNum;\n                        return pageNum;\n                    }\n                    this.currentNextPage = this.getPageIndexByKey(next);\n                    return this.currentNextPage;\n                }\n                this.currentNextPage = page;\n                return page;\n            }\n            this.currentNextPage = null;\n        }\n        return null;\n    }\n    getPreviousPage() {\n        return this.page - 1;\n    }\n    beforeSubmit() {\n        const pages = this.getPages({ all: true });\n        return Promise.all(pages.map((page) => {\n            page.options.beforeSubmit = true;\n            return page.beforeSubmit();\n        }));\n    }\n    beforePage(next) {\n        return new Promise((resolve, reject) => {\n            this.hook(next ? 'beforeNext' : 'beforePrev', this.currentPage, this.submission, (err) => {\n                if (err) {\n                    this.showErrors(err, true);\n                    reject(err);\n                }\n                const form = this.currentPage;\n                if (form) {\n                    form.beforePage(next).then(resolve).catch(reject);\n                }\n                else {\n                    resolve();\n                }\n            });\n        });\n    }\n    emitNextPage() {\n        this.emit('nextPage', { page: this.page, submission: this.submission });\n    }\n    nextPage() {\n        // Read-only forms should not worry about validation before going to next page, nor should they submit.\n        if (this.options.readOnly) {\n            return this.beforePage(true).then(() => {\n                return this.setPage(this.getNextPage()).then(() => {\n                    this.emitNextPage();\n                });\n            });\n        }\n        // Validate the form before going to the next page\n        const currentPageErrors = this.validateCurrentPage({ dirty: true });\n        const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : currentPageErrors;\n        // allow going to the next page if the current page is valid, even if there are form level errors\n        if (currentPageErrors.length === 0) {\n            this.checkData(this.submission.data);\n            return this.beforePage(true).then(() => {\n                return this.setPage(this.getNextPage()).then(() => {\n                    if (!(this.options.readOnly || this.editMode) && this.enabledIndex < this.page) {\n                        this.enabledIndex = this.page;\n                        this.redraw();\n                    }\n                    this.emitNextPage();\n                });\n            });\n        }\n        else {\n            this.currentPage.components.forEach((comp) => comp.setPristine(false));\n            this.scrollIntoView(this.element, true);\n            return Promise.reject(this.showErrors(errors, true));\n        }\n    }\n    validateCurrentPage(flags = {}) {\n        var _a, _b;\n        const components = (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components.map((component) => component.component);\n        // Accessing the parent ensures the right instance (whether it's the parent Wizard or a nested Wizard) performs its validation\n        return (_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.parent.validateComponents(components, this.root.data, flags);\n    }\n    emitPrevPage() {\n        this.emit('prevPage', { page: this.page, submission: this.submission });\n    }\n    prevPage() {\n        return this.beforePage().then(() => {\n            return this.setPage(this.getPreviousPage()).then(() => {\n                this.emitPrevPage();\n            });\n        });\n    }\n    cancel(noconfirm) {\n        if (this.options.readOnly) {\n            return Promise.resolve();\n        }\n        if (super.cancel(noconfirm)) {\n            this.setPristine(true);\n            return this.setPage(0).then(() => {\n                if (this.enabledIndex) {\n                    this.enabledIndex = 0;\n                }\n                this.onChange({ resetValue: true });\n                this.redraw();\n                return this.page;\n            });\n        }\n        return Promise.resolve();\n    }\n    getPageIndexByKey(key) {\n        let pageIndex = this.page;\n        this.pages.forEach((page, index) => {\n            if (page.component.key === key) {\n                pageIndex = index;\n                return false;\n            }\n        });\n        return pageIndex;\n    }\n    get schema() {\n        return this.wizard;\n    }\n    setComponentSchema() {\n        const pageKeys = {};\n        this.originalComponents = [];\n        this.component.components.map((item) => {\n            if (item.type === 'panel') {\n                item.key = (0, utils_1.uniqueKey)(pageKeys, (item.key || 'panel'));\n                pageKeys[item.key] = true;\n                if (this.wizard.full) {\n                    this.options.show = this.options.show || {};\n                    this.options.show[item.key] = true;\n                }\n                else if (Object.prototype.hasOwnProperty.call(this.wizard, 'full')\n                    && !lodash_1.default.isEqual(this.originalOptions.show, this.options.show)) {\n                    this.options.show = Object.assign({}, (this.originalOptions.show || {}));\n                }\n            }\n            this.originalComponents.push(lodash_1.default.clone(item));\n        });\n        if (!Object.keys(pageKeys).length) {\n            const newPage = {\n                type: 'panel',\n                title: 'Page 1',\n                label: 'Page 1',\n                key: 'page1',\n                components: this.component.components\n            };\n            this.component.components = [newPage];\n            this.originalComponents.push(lodash_1.default.clone(newPage));\n        }\n    }\n    setForm(form, flags = {}) {\n        if (!form) {\n            return;\n        }\n        return super.setForm(form, flags);\n    }\n    onSetForm(clonedForm, initialForm) {\n        this.component.components = (this.parent ? initialForm.components : clonedForm.components) || [];\n        this.setComponentSchema();\n    }\n    setEditMode(submission) {\n        if (!this.editMode && submission._id && !this.options.readOnly) {\n            this.editMode = true;\n            this.redraw();\n        }\n    }\n    setValue(submission, flags = {}, ignoreEstablishment) {\n        const changed = this.getPages({ all: true }).reduce((changed, page) => {\n            return this.setNestedValue(page, submission.data, flags, changed) || changed;\n        }, false);\n        this.mergeData(this.data, submission.data);\n        if (changed) {\n            this.pageFieldLogic(this.page);\n        }\n        submission.data = this.data;\n        this._submission = submission;\n        if (!ignoreEstablishment) {\n            this.establishPages(submission.data);\n        }\n        this.setEditMode(submission);\n        return changed;\n    }\n    isClickable(page, index) {\n        return this.page !== index && (0, utils_1.firstNonNil)([\n            lodash_1.default.get(page, 'breadcrumbClickable'),\n            this.options.breadcrumbSettings.clickable\n        ]);\n    }\n    hasButton(name, nextPage = this.getNextPage()) {\n        // get page options with global options as default values\n        const { previous = this.options.buttonSettings.showPrevious, cancel = this.options.buttonSettings.showCancel, submit = this.options.buttonSettings.showSubmit, next = this.options.buttonSettings.showNext } = lodash_1.default.get(this.currentPage, 'component.buttonSettings', {});\n        switch (name) {\n            case 'previous':\n                return previous && (this.getPreviousPage() > -1);\n            case 'next':\n                return next && (nextPage !== null) && (nextPage !== -1);\n            case 'cancel':\n                return cancel && !this.options.readOnly;\n            case 'submit':\n                return submit && !this.options.readOnly && ((nextPage === null) || (this.page === (this.pages.length - 1)));\n            default:\n                return true;\n        }\n    }\n    pageId(page) {\n        if (page.key) {\n            // Some panels have the same key....\n            return `${page.key}-${page.title}`;\n        }\n        else if (page.components &&\n            page.components.length > 0) {\n            return this.pageId(page.components[0]);\n        }\n        else {\n            return page.title;\n        }\n    }\n    onChange(flags, changed, modified, changes) {\n        var _a, _b;\n        super.onChange(flags, changed, modified, changes);\n        // The onChange loop doesn't need all components for wizards\n        const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();\n        if (this.alert) {\n            this.showErrors(errors, true, true);\n        }\n        // If the pages change, need to redraw the header.\n        let currentPanels;\n        let panels;\n        const currentNextPage = this.currentNextPage;\n        if (this.hasExtraPages) {\n            currentPanels = this.pages.map(page => page.component.key);\n            this.establishPages();\n            panels = this.pages.map(page => page.component.key);\n        }\n        else {\n            currentPanels = this.currentPanels || this.pages.map(page => page.component.key);\n            panels = this.establishPages().map(panel => panel.key);\n            this.currentPanels = panels;\n            if (((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.key) && ((_b = this.currentPanels) === null || _b === void 0 ? void 0 : _b.length)) {\n                this.setPage(this.currentPanels.findIndex(panel => panel === this.currentPanel.key));\n            }\n        }\n        if (!lodash_1.default.isEqual(panels, currentPanels) || (flags && flags.fromSubmission)) {\n            this.redrawHeader();\n        }\n        // If the next page changes, then make sure to redraw navigation.\n        if (currentNextPage !== this.getNextPage()) {\n            this.redrawNavigation();\n        }\n        if (this.options.readOnly && (this.prefixComps.length || this.suffixComps.length)) {\n            this.redraw();\n        }\n    }\n    rebuild() {\n        const currentPage = this.page;\n        const setCurrentPage = () => this.setPage(currentPage);\n        return super.rebuild().then(setCurrentPage);\n    }\n    checkValidity(data, dirty, row, currentPageOnly, childErrors = []) {\n        if (!this.checkCondition(row, data)) {\n            this.setCustomValidity('');\n            return true;\n        }\n        const components = !currentPageOnly || this.isLastPage()\n            ? this.getComponents()\n            : this.currentPage.components;\n        return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, currentPageOnly, childErrors) && check, true);\n    }\n    get errors() {\n        return !this.isLastPage() && !this.submitted ? this.currentPage.errors : super.errors;\n    }\n    focusOnComponent(key) {\n        const component = this.getComponent(key);\n        if (component) {\n            let topPanel = component.parent;\n            while (!(topPanel.parent instanceof Wizard)) {\n                topPanel = topPanel.parent;\n            }\n            const pageIndex = this.pages.findIndex(page => page.id === topPanel.id);\n            if (pageIndex >= 0) {\n                const page = this.pages[pageIndex];\n                if (page && page !== this.currentPage) {\n                    return this.setPage(pageIndex).then(() => {\n                        this.showErrors(this.validate(this.localData, { dirty: true }));\n                        super.focusOnComponent(key);\n                    });\n                }\n            }\n        }\n        return super.focusOnComponent(key);\n    }\n}\nexports[\"default\"] = Wizard;\nWizard.setBaseUrl = Formio_1.Formio.setBaseUrl;\nWizard.setApiUrl = Formio_1.Formio.setApiUrl;\nWizard.setAppUrl = Formio_1.Formio.setAppUrl;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Wizard.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 Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass Wizard extends Webform_1.default {\n    /**\n     * Constructor for wizard-based forms.\n     * @param {HTMLElement | object | import('Form').FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.\n     * @param {import('Form').FormOptions} [_options] - The options to create a new form instance.\n     *    - breadcrumbSettings.clickable: true (default) - determines if the breadcrumb bar is clickable.\n     *    - buttonSettings.show*(Previous, Next, Cancel): true (default) - determines if the button is shown.\n     *    - allowPrevious: false (default) - determines if the breadcrumb bar is clickable for visited tabs.\n     */\n    constructor(elementOrOptions = undefined, _options = undefined) {\n        let element, options;\n        if (elementOrOptions instanceof HTMLElement || _options) {\n            element = elementOrOptions;\n            options = _options || {};\n        }\n        else {\n            options = elementOrOptions || {};\n        }\n        options.display = 'wizard';\n        super(element, options);\n        this.pages = [];\n        this.prefixComps = [];\n        this.suffixComps = [];\n        this.components = [];\n        this.originalComponents = [];\n        this.page = 0;\n        this.currentPanel = null;\n        this.currentPanels = null;\n        this.currentNextPage = 0;\n        this._seenPages = [0];\n        this.subWizards = [];\n        this.allPages = [];\n        this.lastPromise = Promise.resolve();\n        this.enabledIndex = 0;\n        this.editMode = false;\n        this.originalOptions = lodash_1.default.cloneDeep(this.options);\n    }\n    isLastPage() {\n        const next = this.getNextPage();\n        if (lodash_1.default.isNumber(next)) {\n            return next === -1;\n        }\n        return lodash_1.default.isNull(next);\n    }\n    getPages(args = {}) {\n        const { all = false } = args;\n        const pages = this.hasExtraPages ? this.components : this.pages;\n        const filteredPages = pages\n            .filter(all ? lodash_1.default.identity : (p, index) => this._seenPages.includes(index));\n        return filteredPages;\n    }\n    get hasExtraPages() {\n        return !lodash_1.default.isEmpty(this.subWizards);\n    }\n    get data() {\n        return super.data;\n    }\n    get localData() {\n        var _a, _b;\n        return ((_b = (_a = this.pages[this.page]) === null || _a === void 0 ? void 0 : _a.root) === null || _b === void 0 ? void 0 : _b.submission.data) || this.submission.data;\n    }\n    checkConditions(data, flags, row) {\n        const visible = super.checkConditions(data, flags, row);\n        this.establishPages(data);\n        return visible;\n    }\n    set data(value) {\n        this._data = value;\n        lodash_1.default.each(this.getPages({ all: true }), (component) => {\n            component.data = this.componentContext(component);\n        });\n    }\n    getComponents() {\n        return this.submitting\n            ? this.getPages({ all: this.isLastPage() })\n            : super.getComponents();\n    }\n    resetValue() {\n        this.getPages({ all: true }).forEach((page) => page.resetValue());\n        this.setPristine(true);\n    }\n    init() {\n        var _a;\n        // Check for and initlize button settings object\n        this.options.buttonSettings = lodash_1.default.defaults(this.options.buttonSettings, {\n            showPrevious: true,\n            showNext: true,\n            showSubmit: true,\n            showCancel: !this.options.readOnly\n        });\n        this.options.breadcrumbSettings = lodash_1.default.defaults(this.options.breadcrumbSettings, {\n            clickable: true\n        });\n        this.options.allowPrevious = this.options.allowPrevious || false;\n        this.page = 0;\n        const onReady = super.init();\n        this.setComponentSchema();\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[this.page]) {\n            this.component = this.pages[this.page].component;\n        }\n        this.on('subWizardsUpdated', (subForm) => {\n            const subWizard = this.subWizards.find(subWizard => { var _a; return (subForm === null || subForm === void 0 ? void 0 : subForm.id) && ((_a = subWizard.subForm) === null || _a === void 0 ? void 0 : _a.id) === (subForm === null || subForm === void 0 ? void 0 : subForm.id); });\n            if (this.subWizards.length && subWizard) {\n                subWizard.subForm.setValue(subForm._submission, {}, true);\n                this.establishPages();\n                this.redraw();\n            }\n        });\n        return onReady;\n    }\n    get wizardKey() {\n        return `wizard-${this.id}`;\n    }\n    get wizard() {\n        return this.form;\n    }\n    set wizard(form) {\n        this.setForm(form);\n    }\n    get buttons() {\n        const buttons = {};\n        [\n            { name: 'cancel', method: 'cancel' },\n            { name: 'previous', method: 'prevPage' },\n            { name: 'next', method: 'nextPage' },\n            { name: 'submit', method: 'submit' }\n        ].forEach((button) => {\n            if (this.hasButton(button.name)) {\n                buttons[button.name] = button;\n            }\n        });\n        return buttons;\n    }\n    get buttonOrder() {\n        var _a, _b, _c;\n        const defaultButtonOrder = [\n            'cancel',\n            'previous',\n            'next',\n            'submit'\n        ];\n        return (_c = (_b = (_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.wizardButtonOrder) === null || _b === void 0 ? void 0 : _b.toLowerCase().split(', ')) !== null && _c !== void 0 ? _c : defaultButtonOrder;\n    }\n    get renderContext() {\n        var _a, _b;\n        return {\n            disableWizardSubmit: this.form.disableWizardSubmit,\n            wizardKey: this.wizardKey,\n            isBreadcrumbClickable: this.isBreadcrumbClickable(),\n            isSubForm: !!this.parent && !((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.type) === 'wizard',\n            panels: this.allPages.length ? this.allPages.map(page => page.component) : this.pages.map(page => page.component),\n            buttons: this.buttons,\n            currentPage: this.page,\n            buttonOrder: this.buttonOrder,\n        };\n    }\n    prepareNavigationSettings(ctx) {\n        const currentPanel = this.currentPanel;\n        if (currentPanel && currentPanel.buttonSettings) {\n            Object.keys(currentPanel.buttonSettings).forEach(() => {\n                Object.keys(ctx.buttons).forEach(key => {\n                    if (typeof currentPanel.buttonSettings[key] !== 'undefined' && !currentPanel.buttonSettings[key] || ctx.isSubForm) {\n                        ctx.buttons[key] = null;\n                    }\n                });\n            });\n        }\n        return this.renderTemplate('wizardNav', ctx);\n    }\n    prepareHeaderSettings(ctx, headerType) {\n        var _a;\n        const shouldHideBreadcrumbs = ((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.breadcrumb) === 'none' ||\n            lodash_1.default.get(this.form, 'settings.wizardBreadcrumbsType', '') === 'none';\n        if (shouldHideBreadcrumbs || ctx.isSubForm) {\n            return null;\n        }\n        return this.renderTemplate(headerType, ctx);\n    }\n    render() {\n        const ctx = this.renderContext;\n        if (this.component.key) {\n            ctx.panels.map(panel => {\n                if (panel.key === this.component.key) {\n                    this.currentPanel = panel;\n                    ctx.wizardPageTooltip = this.getFormattedTooltip(panel.tooltip);\n                }\n            });\n        }\n        const wizardNav = this.prepareNavigationSettings(ctx);\n        const wizardHeaderType = `wizardHeader${lodash_1.default.get(this.form, 'settings.wizardHeaderType', '')}`;\n        const wizardHeaderLocation = lodash_1.default.get(this.form, 'settings.wizardHeaderLocation', 'left');\n        const wizardHeader = this.prepareHeaderSettings(ctx, wizardHeaderType);\n        return this.renderTemplate('wizard', Object.assign(Object.assign({}, ctx), { className: super.getClassName(), wizardHeader,\n            wizardHeaderType,\n            wizardHeaderLocation,\n            wizardNav, components: this.renderComponents([\n                ...this.prefixComps,\n                ...this.currentPage.components,\n                ...this.suffixComps\n            ]) }), this.builderMode ? 'builder' : 'form');\n    }\n    redrawNavigation() {\n        if (this.element) {\n            let navElement = this.element.querySelector(`#${this.wizardKey}-nav`);\n            if (navElement) {\n                this.detachNav();\n                navElement.outerHTML = this.renderTemplate('wizardNav', this.renderContext);\n                navElement = this.element.querySelector(`#${this.wizardKey}-nav`);\n                this.loadRefs(navElement, {\n                    [`${this.wizardKey}-cancel`]: 'single',\n                    [`${this.wizardKey}-previous`]: 'single',\n                    [`${this.wizardKey}-next`]: 'single',\n                    [`${this.wizardKey}-submit`]: 'single',\n                });\n                this.attachNav();\n            }\n        }\n    }\n    redrawHeader() {\n        if (this.element) {\n            let headerElement = this.element.querySelector(`#${this.wizardKey}-header`);\n            if (headerElement) {\n                this.detachHeader();\n                headerElement.outerHTML = this.renderTemplate(`wizardHeader${lodash_1.default.get(this.form, 'settings.wizardHeaderType', '')}`, this.renderContext);\n                headerElement = this.element.querySelector(`#${this.wizardKey}-header`);\n                this.loadRefs(headerElement, {\n                    [`${this.wizardKey}-link`]: 'multiple',\n                    [`${this.wizardKey}-tooltip`]: 'multiple'\n                });\n                this.attachHeader();\n            }\n        }\n    }\n    /**\n     * Attaches the wizard to the provided DOM element, initializes component references, sets up navigation,\n     * and emits a render event. It will initialize the wizard's index if necessary,\n     * attach event hooks, and make sure that the current page is rendered and displayed correctly.\n     * @param {HTMLElement} element - The DOM element to which the wizard will be attached.\n     * @returns {Promise} A promise that resolves when all components have been successfully attached.\n     */\n    attach(element) {\n        var _a;\n        this.setElement(element);\n        this.loadRefs(element, {\n            [this.wizardKey]: 'single',\n            [`${this.wizardKey}-header`]: 'single',\n            [`${this.wizardKey}-cancel`]: 'single',\n            [`${this.wizardKey}-previous`]: 'single',\n            [`${this.wizardKey}-next`]: 'single',\n            [`${this.wizardKey}-submit`]: 'single',\n            [`${this.wizardKey}-link`]: 'multiple',\n            [`${this.wizardKey}-tooltip`]: 'multiple'\n        });\n        if ((this.options.readOnly || this.editMode) && !this.enabledIndex) {\n            this.enabledIndex = ((_a = this.pages) === null || _a === void 0 ? void 0 : _a.length) - 1;\n        }\n        this.hook('attachWebform', element, this);\n        const promises = this.attachComponents(this.refs[this.wizardKey], [\n            ...this.prefixComps,\n            ...this.currentPage.components,\n            ...this.suffixComps,\n        ]);\n        this.attachNav();\n        this.attachHeader();\n        return promises.then(() => {\n            this.emit('render', { component: this.currentPage, page: this.page });\n            if (this.component.scrollToTop) {\n                this.scrollPageToTop();\n            }\n        });\n    }\n    scrollPageToTop() {\n        var _a;\n        const pageTop = (_a = this.refs[`${this.wizardKey}-header`]) !== null && _a !== void 0 ? _a : this.refs[this.wizardKey];\n        if (!pageTop) {\n            return;\n        }\n        if ('scrollIntoView' in pageTop) {\n            pageTop.scrollIntoView(true);\n        }\n        else {\n            this.scrollIntoView(pageTop);\n        }\n    }\n    isBreadcrumbClickable() {\n        let currentPage = null;\n        this.pages.map(page => {\n            if (lodash_1.default.isEqual(this.currentPage.component, page.component)) {\n                currentPage = page;\n            }\n        });\n        if (lodash_1.default.has(currentPage, 'component.breadcrumbClickable')) {\n            return lodash_1.default.get(currentPage, 'component.breadcrumbClickable');\n        }\n        if (lodash_1.default.has(this.options, 'breadcrumbSettings.clickable')) {\n            return this.options.breadcrumbSettings.clickable;\n        }\n        return true;\n    }\n    isAllowPrevious() {\n        let currentPage = null;\n        this.pages.map(page => {\n            if (lodash_1.default.isEqual(this.currentPage.component, page.component)) {\n                currentPage = page;\n            }\n        });\n        return lodash_1.default.get(currentPage.component, 'allowPrevious', this.options.allowPrevious);\n    }\n    /**\n     * Handles navigate on 'Enter' key event in a wizard form.\n     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.\n     */\n    handleNaviageteOnEnter(event) {\n        if (event.keyCode === 13) {\n            const clickEvent = new CustomEvent('click');\n            const buttonElement = this.refs[`${this.wizardKey}-${this.buttons.next.name}`];\n            if (buttonElement) {\n                buttonElement.dispatchEvent(clickEvent);\n            }\n        }\n    }\n    /**\n     * Handles save on 'Enter' key event in a wizard form.\n     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.\n     */\n    handleSaveOnEnter(event) {\n        if (event.keyCode === 13) {\n            const clickEvent = new CustomEvent('click');\n            const buttonElement = this.refs[`${this.wizardKey}-${this.buttons.submit.name}`];\n            if (buttonElement) {\n                buttonElement.dispatchEvent(clickEvent);\n            }\n        }\n    }\n    attachNav() {\n        if (this.component.navigateOnEnter) {\n            this.addEventListener(document, 'keyup', this.handleNaviageteOnEnter.bind(this));\n        }\n        if (this.component.saveOnEnter) {\n            this.addEventListener(document, 'keyup', this.handleSaveOnEnter.bind(this));\n        }\n        lodash_1.default.each(this.buttons, (button) => {\n            const buttonElement = this.refs[`${this.wizardKey}-${button.name}`];\n            this.addEventListener(buttonElement, 'click', (event) => {\n                event.preventDefault();\n                // Disable the button until done.\n                buttonElement.setAttribute('disabled', 'disabled');\n                this.setLoading(buttonElement, true);\n                // Call the button method, then re-enable the button.\n                this[button.method]().then(() => {\n                    buttonElement.removeAttribute('disabled');\n                    this.setLoading(buttonElement, false);\n                }).catch(() => {\n                    buttonElement.removeAttribute('disabled');\n                    this.setLoading(buttonElement, false);\n                });\n            });\n        });\n    }\n    /**\n     * Emits an event indicating that a wizard page has been selected.\n     * @param {number} index - Index of the selected wizard page in the `pages` array.\n     * @fires emit - Emits the 'wizardPageSelected' event with the page object and index.\n     */\n    emitWizardPageSelected(index) {\n        this.emit('wizardPageSelected', this.pages[index], index);\n    }\n    attachHeader() {\n        var _a, _b;\n        const isAllowPrevious = this.isAllowPrevious();\n        this.attachTooltips(this.refs[`${this.wizardKey}-tooltip`], (_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.tooltip);\n        if (this.isBreadcrumbClickable() || isAllowPrevious) {\n            (_b = this.refs[`${this.wizardKey}-link`]) === null || _b === void 0 ? void 0 : _b.forEach((link, index) => {\n                if (!isAllowPrevious || index <= this.enabledIndex) {\n                    this.addEventListener(link, 'click', (event) => {\n                        this.emit('wizardNavigationClicked', this.pages[index]);\n                        event.preventDefault();\n                        return this.setPage(index).then(() => {\n                            this.emitWizardPageSelected(index);\n                        });\n                    });\n                }\n            });\n        }\n    }\n    detachNav() {\n        if (this.component.navigateOnEnter) {\n            this.removeEventListener(document, 'keyup', this.handleNaviageteOnEnter.bind(this));\n        }\n        if (this.component.saveOnEnter) {\n            this.removeEventListener(document, 'keyup', this.handleSaveOnEnter.bind(this));\n        }\n        lodash_1.default.each(this.buttons, (button) => {\n            this.removeEventListener(this.refs[`${this.wizardKey}-${button.name}`], 'click');\n        });\n    }\n    detachHeader() {\n        if (this.refs[`${this.wizardKey}-link`]) {\n            this.refs[`${this.wizardKey}-link`].forEach((link) => {\n                this.removeEventListener(link, 'click');\n            });\n        }\n    }\n    transformPages() {\n        const allComponents = [];\n        const components = this.getSortedComponents(this);\n        let defferedComponents = [];\n        this.allPages = [];\n        // Get all components including all nested components and line up in the correct order\n        const getAllComponents = (nestedComp, compsArr, pushAllowed = true) => {\n            const nestedPages = [];\n            const dataArrayComponents = ['datagrid', 'editgrid', 'dynamicWizard'];\n            const currentComponents = (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.subForm) ? this.getSortedComponents(nestedComp.subForm) : (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.components) || [];\n            const visibleComponents = currentComponents.filter(comp => comp._visible);\n            const filteredComponents = visibleComponents.filter(comp => !dataArrayComponents.includes(comp.component.type) && (comp.type !== 'form' || comp.isNestedWizard));\n            const additionalComponents = currentComponents.filter(comp => { var _a; return ((_a = comp.subForm) === null || _a === void 0 ? void 0 : _a._form.display) !== 'wizard'; });\n            let hasNested = false;\n            (0, utils_1.eachComponent)(filteredComponents, (comp) => {\n                if (comp && comp.component) {\n                    if (comp.component.type === 'panel' && (comp === null || comp === void 0 ? void 0 : comp.parent.wizard) && !getAllComponents(comp, compsArr, false)) {\n                        if (pushAllowed) {\n                            this.setRootPanelId(comp);\n                            nestedPages.push(comp);\n                        }\n                        hasNested = true;\n                    }\n                    if (comp.isNestedWizard && comp.subForm) {\n                        const hasNestedForm = getAllComponents(comp, nestedPages, pushAllowed);\n                        if (!hasNested) {\n                            hasNested = hasNestedForm;\n                        }\n                    }\n                }\n            }, true);\n            if (nestedComp.component.type === 'panel') {\n                if (!hasNested && pushAllowed) {\n                    this.setRootPanelId(nestedComp);\n                    compsArr.push(nestedComp);\n                }\n                if (hasNested && additionalComponents.length) {\n                    const newComp = lodash_1.default.clone(nestedComp);\n                    newComp.components = additionalComponents;\n                    this.setRootPanelId(newComp);\n                    defferedComponents.push(newComp);\n                }\n            }\n            if (pushAllowed) {\n                compsArr.push(...defferedComponents, ...nestedPages);\n                defferedComponents = [];\n            }\n            return hasNested;\n        };\n        components.forEach((component) => {\n            if (component.visible) {\n                getAllComponents(component, allComponents);\n            }\n        }, []);\n        // recalculate pages only for root wizards, including the situation when the wizard is in a wrapper\n        if (this.localRoot && this.id === this.localRoot.id) {\n            allComponents.forEach((comp, index) => {\n                comp.eachComponent((component) => {\n                    component.page = index;\n                });\n            });\n        }\n        this.allPages = allComponents;\n    }\n    getSortedComponents({ components, originalComponents }) {\n        const currentComponents = [];\n        const currentPages = [];\n        if (components && components.length) {\n            components.map(page => {\n                if (page.component.type === 'panel') {\n                    currentPages[page.component.key || page.component.title] = page;\n                }\n            });\n        }\n        originalComponents === null || originalComponents === void 0 ? void 0 : originalComponents.forEach((item) => {\n            if (!item.key) {\n                item.key = item.title;\n            }\n            if (currentPages[item.key]) {\n                currentComponents.push(currentPages[item.key]);\n            }\n        });\n        return currentComponents;\n    }\n    findRootPanel(component) {\n        var _a;\n        return ((_a = component.parent) === null || _a === void 0 ? void 0 : _a.parent) ? this.findRootPanel(component.parent) : component;\n    }\n    setRootPanelId(component) {\n        var _a;\n        if (component.rootPanelId && component.rootPanelId !== component.id) {\n            return;\n        }\n        const parent = ((_a = component.parent) === null || _a === void 0 ? void 0 : _a.parent) ? this.findRootPanel(component.parent) : component;\n        component.rootPanelId = parent.id;\n    }\n    establishPages(data = this.data) {\n        this.pages = [];\n        this.prefixComps = [];\n        this.suffixComps = [];\n        const visible = [];\n        const currentPages = {};\n        const pageOptions = Object.assign(Object.assign({}, (lodash_1.default.clone(this.options))), (this.parent ? { root: this } : {}));\n        if (this.components && this.components.length) {\n            this.components.forEach(page => {\n                if (page.component.type === 'panel') {\n                    currentPages[page.component.key || page.component.title] = page;\n                }\n            });\n        }\n        if (this.originalComponents) {\n            this.originalComponents.forEach((item) => {\n                if (item.type === 'panel') {\n                    if (!item.key) {\n                        item.key = item.title;\n                    }\n                    let page = currentPages[item.key];\n                    const forceShow = this.shouldForceShow(item);\n                    const forceHide = this.shouldForceHide(item);\n                    let isVisible = !page\n                        ? (0, utils_1.checkCondition)(item, data, data, this.component, this) && !item.hidden\n                        : page.visible;\n                    if (forceShow) {\n                        isVisible = true;\n                    }\n                    else if (forceHide) {\n                        isVisible = false;\n                    }\n                    if (isVisible) {\n                        visible.push(item);\n                        if (page) {\n                            this.pages.push(page);\n                        }\n                    }\n                    if (!page && isVisible) {\n                        page = this.createComponent(item, pageOptions);\n                        page.visible = isVisible;\n                        this.pages.push(page);\n                        page.eachComponent((component) => {\n                            component.page = (this.pages.length - 1);\n                        });\n                    }\n                }\n                else if (item.type !== 'button') {\n                    if (!this.pages.length) {\n                        this.prefixComps.push(this.createComponent(item, pageOptions));\n                    }\n                    else {\n                        this.suffixComps.push(this.createComponent(item, pageOptions));\n                    }\n                }\n            });\n        }\n        if (this.pages.length) {\n            this.emit('pagesChanged');\n        }\n        this.transformPages();\n        if (this.allPages && this.allPages.length) {\n            this.updatePages();\n        }\n        return visible;\n    }\n    updatePages() {\n        this.pages = this.allPages;\n    }\n    addComponents() {\n        this.establishPages();\n    }\n    setPage(num) {\n        if (num === this.page) {\n            return Promise.resolve();\n        }\n        if (num >= 0 && num < this.pages.length) {\n            this.page = num;\n            this.pageFieldLogic(num);\n            this.getNextPage();\n            let parentNum = num;\n            if (this.hasExtraPages) {\n                const pageFromPages = this.pages[num];\n                const pageFromComponents = this.components[num];\n                if (!pageFromComponents || (pageFromPages === null || pageFromPages === void 0 ? void 0 : pageFromPages.id) !== pageFromComponents.id) {\n                    parentNum = this.components.findIndex(comp => {\n                        var _a, _b;\n                        return comp.id === ((_b = (_a = this.pages) === null || _a === void 0 ? void 0 : _a[parentNum]) === null || _b === void 0 ? void 0 : _b.rootPanelId);\n                    });\n                }\n            }\n            if (!this._seenPages.includes(parentNum)) {\n                this._seenPages = this._seenPages.concat(parentNum);\n            }\n            this.redraw().then(() => {\n                this.checkData(this.submission.data);\n                this.triggerCaptcha(this.currentPage.components);\n                const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();\n                if (this.alert) {\n                    this.showErrors(errors, true, true);\n                }\n            });\n            return Promise.resolve();\n        }\n        else if (!this.pages.length) {\n            this.redraw();\n            return Promise.resolve();\n        }\n        return Promise.reject('Page not found');\n    }\n    pageFieldLogic(page) {\n        var _a;\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[page]) {\n            // Handle field logic on pages.\n            this.component = this.pages[page].component;\n            this.originalComponent = (0, utils_1.fastCloneDeep)(this.component);\n            this.fieldLogic(this.data);\n            // If disabled changed, be sure to distribute the setting.\n            this.disabled = this.shouldDisabled;\n        }\n    }\n    get currentPage() {\n        return (this.pages && (this.pages.length >= this.page)) ? this.pages[this.page] : { components: [] };\n    }\n    getNextPage() {\n        var _a;\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[this.page]) {\n            const data = this.submission.data;\n            const form = this.pages[this.page].component;\n            // Check conditional nextPage\n            if (form) {\n                const page = this.pages.length > (this.page + 1) && !this.showAllErrors ? this.page + 1 : -1;\n                if (form.nextPage) {\n                    const next = this.evaluate(form.nextPage, {\n                        next: page,\n                        data,\n                        page,\n                        form\n                    }, 'next');\n                    if (next === null) {\n                        this.currentNextPage = null;\n                        return null;\n                    }\n                    const pageNum = parseInt(next, 10);\n                    if (!isNaN(parseInt(pageNum, 10)) && isFinite(pageNum)) {\n                        this.currentNextPage = pageNum;\n                        return pageNum;\n                    }\n                    this.currentNextPage = this.getPageIndexByKey(next);\n                    return this.currentNextPage;\n                }\n                this.currentNextPage = page;\n                return page;\n            }\n            this.currentNextPage = null;\n        }\n        return null;\n    }\n    getPreviousPage() {\n        return this.page - 1;\n    }\n    beforeSubmit() {\n        const pages = this.getPages({ all: true });\n        return Promise.all(pages.map((page) => {\n            this.triggerButtonCaptcha(page);\n            page.options.beforeSubmit = true;\n            return page.beforeSubmit();\n        }));\n    }\n    beforePage(next) {\n        return new Promise((resolve, reject) => {\n            this.hook(next ? 'beforeNext' : 'beforePrev', this.currentPage, this.submission, (err) => {\n                if (err) {\n                    this.showErrors(err, true);\n                    reject(err);\n                }\n                const form = this.currentPage;\n                if (form) {\n                    form.beforePage(next).then(resolve).catch(reject);\n                }\n                else {\n                    resolve();\n                }\n            });\n        });\n    }\n    emitNextPage() {\n        this.emit('nextPage', { page: this.page, submission: this.submission });\n    }\n    nextPage() {\n        // Read-only forms should not worry about validation before going to next page, nor should they submit.\n        if (this.options.readOnly) {\n            return this.beforePage(true).then(() => {\n                return this.setPage(this.getNextPage()).then(() => {\n                    this.emitNextPage();\n                });\n            });\n        }\n        // Validate the form before going to the next page\n        const currentPageErrors = this.validateCurrentPage({ dirty: true });\n        const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : currentPageErrors;\n        // allow going to the next page if the current page is valid, even if there are form level errors\n        if (currentPageErrors.length === 0) {\n            this.checkData(this.submission.data);\n            return this.beforePage(true).then(() => {\n                return this.setPage(this.getNextPage()).then(() => {\n                    if (!(this.options.readOnly || this.editMode) && this.enabledIndex < this.page) {\n                        this.enabledIndex = this.page;\n                        this.redraw();\n                    }\n                    this.emitNextPage();\n                });\n            });\n        }\n        else {\n            this.currentPage.components.forEach((comp) => comp.setPristine(false));\n            this.scrollIntoView(this.element, true);\n            return Promise.reject(this.showErrors(errors, true));\n        }\n    }\n    validateCurrentPage(flags = {}) {\n        var _a, _b, _c, _d;\n        const components = (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components.map((component) => component.component);\n        // Accessing the parent ensures the right instance (whether it's the parent Wizard or a nested Wizard) performs its validation\n        if ((_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.parent) {\n            return (_c = this.currentPage) === null || _c === void 0 ? void 0 : _c.parent.validateComponents(components, this.root.data, flags);\n        }\n        return (_d = this.currentPage) === null || _d === void 0 ? void 0 : _d.validateComponents(components, this.root ? this.root.data : this.data, flags);\n    }\n    emitPrevPage() {\n        this.emit('prevPage', { page: this.page, submission: this.submission });\n    }\n    prevPage() {\n        return this.beforePage().then(() => {\n            return this.setPage(this.getPreviousPage()).then(() => {\n                this.emitPrevPage();\n            });\n        });\n    }\n    cancel(noconfirm) {\n        if (this.options.readOnly) {\n            return Promise.resolve();\n        }\n        if (super.cancel(noconfirm)) {\n            this.setPristine(true);\n            return this.setPage(0).then(() => {\n                if (this.enabledIndex) {\n                    this.enabledIndex = 0;\n                }\n                this.onChange({ resetValue: true });\n                this.redraw();\n                return this.page;\n            });\n        }\n        return Promise.resolve();\n    }\n    getPageIndexByKey(key) {\n        let pageIndex = this.page;\n        this.pages.forEach((page, index) => {\n            if (page.component.key === key) {\n                pageIndex = index;\n                return false;\n            }\n        });\n        return pageIndex;\n    }\n    get schema() {\n        return this.wizard;\n    }\n    setComponentSchema() {\n        const pageKeys = {};\n        this.originalComponents = [];\n        this.component.components.map((item) => {\n            if (item.type === 'panel') {\n                item.key = (0, utils_1.uniqueKey)(pageKeys, (item.key || 'panel'));\n                pageKeys[item.key] = true;\n                if (this.wizard.full) {\n                    this.options.show = this.options.show || {};\n                    this.options.show[item.key] = true;\n                }\n                else if (Object.prototype.hasOwnProperty.call(this.wizard, 'full')\n                    && !lodash_1.default.isEqual(this.originalOptions.show, this.options.show)) {\n                    this.options.show = Object.assign({}, (this.originalOptions.show || {}));\n                }\n            }\n            this.originalComponents.push(lodash_1.default.clone(item));\n        });\n        if (!Object.keys(pageKeys).length) {\n            const newPage = {\n                type: 'panel',\n                title: 'Page 1',\n                label: 'Page 1',\n                key: 'page1',\n                components: this.component.components\n            };\n            this.component.components = [newPage];\n            this.originalComponents.push(lodash_1.default.clone(newPage));\n        }\n    }\n    setForm(form, flags = {}) {\n        if (!form) {\n            return;\n        }\n        return super.setForm(form, flags);\n    }\n    onSetForm(clonedForm, initialForm) {\n        this.component.components = (this.parent ? initialForm.components : clonedForm.components) || [];\n        this.setComponentSchema();\n    }\n    setEditMode(submission) {\n        if (!this.editMode && submission._id && !this.options.readOnly) {\n            this.editMode = true;\n            this.redraw();\n        }\n    }\n    setValue(submission, flags = {}, ignoreEstablishment) {\n        const changed = this.getPages({ all: true }).reduce((changed, page) => {\n            return this.setNestedValue(page, submission.data, flags, changed) || changed;\n        }, false);\n        this.mergeData(this.data, submission.data);\n        if (changed) {\n            this.pageFieldLogic(this.page);\n        }\n        submission.data = this.data;\n        this._submission = submission;\n        if (!ignoreEstablishment) {\n            this.establishPages(submission.data);\n        }\n        this.setEditMode(submission);\n        return changed;\n    }\n    isClickable(page, index) {\n        return this.page !== index && (0, utils_1.firstNonNil)([\n            lodash_1.default.get(page, 'breadcrumbClickable'),\n            this.options.breadcrumbSettings.clickable\n        ]);\n    }\n    hasButton(name, nextPage = this.getNextPage()) {\n        // get page options with global options as default values\n        const { previous = this.options.buttonSettings.showPrevious, cancel = this.options.buttonSettings.showCancel, submit = this.options.buttonSettings.showSubmit, next = this.options.buttonSettings.showNext } = lodash_1.default.get(this.currentPage, 'component.buttonSettings', {});\n        switch (name) {\n            case 'previous':\n                return previous && (this.getPreviousPage() > -1);\n            case 'next':\n                return next && (nextPage !== null) && (nextPage !== -1);\n            case 'cancel':\n                return cancel && !this.options.readOnly;\n            case 'submit':\n                return submit && !this.options.readOnly && ((nextPage === null) || (this.page === (this.pages.length - 1)));\n            default:\n                return true;\n        }\n    }\n    pageId(page) {\n        if (page.key) {\n            // Some panels have the same key....\n            return `${page.key}-${page.title}`;\n        }\n        else if (page.components &&\n            page.components.length > 0) {\n            return this.pageId(page.components[0]);\n        }\n        else {\n            return page.title;\n        }\n    }\n    onChange(flags, changed, modified, changes) {\n        var _a, _b;\n        super.onChange(flags, changed, modified, changes);\n        // The onChange loop doesn't need all components for wizards\n        const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();\n        if (this.alert) {\n            this.showErrors(errors, true, true);\n        }\n        // If the pages change, need to redraw the header.\n        let currentPanels;\n        let panels;\n        const currentNextPage = this.currentNextPage;\n        if (this.hasExtraPages) {\n            currentPanels = this.pages.map(page => page.component.key);\n            this.establishPages();\n            panels = this.pages.map(page => page.component.key);\n        }\n        else {\n            currentPanels = this.currentPanels || this.pages.map(page => page.component.key);\n            panels = this.establishPages().map(panel => panel.key);\n            this.currentPanels = panels;\n            if (((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.key) && ((_b = this.currentPanels) === null || _b === void 0 ? void 0 : _b.length)) {\n                this.setPage(this.currentPanels.findIndex(panel => panel === this.currentPanel.key));\n            }\n        }\n        if (!lodash_1.default.isEqual(panels, currentPanels) || (flags && flags.fromSubmission)) {\n            this.redrawHeader();\n        }\n        // If the next page changes, then make sure to redraw navigation.\n        if (currentNextPage !== this.getNextPage()) {\n            this.redrawNavigation();\n        }\n        if (this.options.readOnly && (this.prefixComps.length || this.suffixComps.length)) {\n            this.redraw();\n        }\n    }\n    rebuild() {\n        const currentPage = this.page;\n        const setCurrentPage = () => this.setPage(currentPage);\n        return super.rebuild().then(setCurrentPage);\n    }\n    checkValidity(data, dirty, row, currentPageOnly, childErrors = []) {\n        if (!this.checkCondition(row, data)) {\n            this.setCustomValidity('');\n            return true;\n        }\n        const components = !currentPageOnly || this.isLastPage()\n            ? this.getComponents()\n            : this.currentPage.components;\n        return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, currentPageOnly, childErrors) && check, true);\n    }\n    get errors() {\n        return !this.isLastPage() && !this.submitted ? this.currentPage.errors : super.errors;\n    }\n    focusOnComponent(key) {\n        const component = this.getComponent(key);\n        if (component) {\n            let topPanel = component.parent;\n            while (!(topPanel.parent instanceof Wizard)) {\n                topPanel = topPanel.parent;\n            }\n            const pageIndex = this.pages.findIndex(page => page.id === topPanel.id);\n            if (pageIndex >= 0) {\n                const page = this.pages[pageIndex];\n                if (page && page !== this.currentPage) {\n                    return this.setPage(pageIndex).then(() => {\n                        this.showErrors(this.validate(this.localData, { dirty: true }));\n                        super.focusOnComponent(key);\n                    });\n                }\n            }\n        }\n        return super.focusOnComponent(key);\n    }\n    triggerButtonCaptcha(page) {\n        if (!page.components) {\n            return;\n        }\n        let captchaComponent;\n        page.eachComponent((component) => {\n            if (/^(re)?captcha$/.test(component.component.type) &&\n                component.component.eventType === 'buttonClick' &&\n                component.component.buttonKey === 'submit') {\n                captchaComponent = component;\n            }\n        });\n        if (captchaComponent) {\n            captchaComponent.verify(`submitClick`);\n        }\n    }\n}\nexports[\"default\"] = Wizard;\nWizard.setBaseUrl = Formio_1.Formio.setBaseUrl;\nWizard.setApiUrl = Formio_1.Formio.setApiUrl;\nWizard.setAppUrl = Formio_1.Formio.setAppUrl;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Wizard.js?");
 
 /***/ }),
 
@@ -4949,7 +4949,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n/* globals Quill, ClassicEditor, CKEDITOR */\nconst vanilla_text_mask_1 = __webpack_require__(/*! @formio/vanilla-text-mask */ \"./node_modules/@formio/vanilla-text-mask/dist/vanillaTextMask.js\");\nconst tippy_js_1 = __importDefault(__webpack_require__(/*! tippy.js */ \"./node_modules/tippy.js/dist/tippy.esm.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst ismobilejs_1 = __importDefault(__webpack_require__(/*! ismobilejs */ \"./node_modules/ismobilejs/esm/index.js\"));\nconst process_1 = __webpack_require__(/*! @formio/core/process */ \"./node_modules/@formio/core/lib/process/index.js\");\nconst Formio_1 = __webpack_require__(/*! ../../../Formio */ \"./lib/cjs/Formio.js\");\nconst FormioUtils = __importStar(__webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\"));\nconst utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Element_1 = __importDefault(__webpack_require__(/*! ../../../Element */ \"./lib/cjs/Element.js\"));\nconst ComponentModal_1 = __importDefault(__webpack_require__(/*! ../componentModal/ComponentModal */ \"./lib/cjs/components/_classes/componentModal/ComponentModal.js\"));\nconst widgets_1 = __importDefault(__webpack_require__(/*! ../../../widgets */ \"./lib/cjs/widgets/index.js\"));\nconst addons_1 = __importDefault(__webpack_require__(/*! ../../../addons */ \"./lib/cjs/addons/index.js\"));\nconst uploadAdapter_1 = __webpack_require__(/*! ../../../providers/storage/uploadAdapter */ \"./lib/cjs/providers/storage/uploadAdapter.js\");\nconst en_1 = __importDefault(__webpack_require__(/*! ../../../translations/en */ \"./lib/cjs/translations/en.js\"));\nconst Templates_1 = __importDefault(__webpack_require__(/*! ../../../templates/Templates */ \"./lib/cjs/templates/Templates.js\"));\nconst isIEBrowser = FormioUtils.getBrowserInfo().ie;\n/**\n * This is the Component class\n which all elements within the FormioForm derive from.\n */\nclass Component extends Element_1.default {\n    static schema(...sources) {\n        return lodash_1.default.merge({\n            /**\n             * Determines if this component provides an input.\n             */\n            input: true,\n            /**\n             * The data key for this component (how the data is stored in the database).\n             */\n            key: '',\n            /**\n             * The input placeholder for this component.\n             */\n            placeholder: '',\n            /**\n             * The input prefix\n             */\n            prefix: '',\n            /**\n             * The custom CSS class to provide to this component.\n             */\n            customClass: '',\n            /**\n             * The input suffix.\n             */\n            suffix: '',\n            /**\n             * If this component should allow an array of values to be captured.\n             */\n            multiple: false,\n            /**\n             * The default value of this component.\n             */\n            defaultValue: null,\n            /**\n             * If the data of this component should be protected (no GET api requests can see the data)\n             */\n            protected: false,\n            /**\n             * Validate if the value of this component should be unique within the form.\n             */\n            unique: false,\n            /**\n             * If the value of this component should be persisted within the backend api database.\n             */\n            persistent: true,\n            /**\n             * Determines if the component should be within the form, but not visible.\n             */\n            hidden: false,\n            /**\n             * If the component should be cleared when hidden.\n             */\n            clearOnHide: true,\n            /**\n             * This will refresh this component options when this field changes.\n             */\n            refreshOn: '',\n            /**\n             * This will redraw the component when this field changes.\n             */\n            redrawOn: '',\n            /**\n             * If this component should be included as a column within a submission table.\n             */\n            tableView: false,\n            /**\n             * If this component should be rendering in modal.\n             */\n            modalEdit: false,\n            /**\n             * The input label provided to this component.\n             */\n            label: '',\n            dataGridLabel: false,\n            labelPosition: 'top',\n            description: '',\n            errorLabel: '',\n            tooltip: '',\n            hideLabel: false,\n            tabindex: '',\n            disabled: false,\n            autofocus: false,\n            dbIndex: false,\n            customDefaultValue: '',\n            calculateValue: '',\n            calculateServer: false,\n            widget: null,\n            /**\n             * Attributes that will be assigned to the input elements of this component.\n             */\n            attributes: {},\n            /**\n             * This will perform the validation on either \"change\" or \"blur\" of the input element.\n             */\n            validateOn: 'change',\n            /**\n             * The validation criteria for this component.\n             */\n            validate: {\n                /**\n                 * If this component is required.\n                 */\n                required: false,\n                /**\n                 * Custom JavaScript validation.\n                 */\n                custom: '',\n                /**\n                 * If the custom validation should remain private (only the backend will see it and execute it).\n                 */\n                customPrivate: false,\n                /**\n                 * If this component should implement a strict date validation if the Calendar widget is implemented.\n                 */\n                strictDateValidation: false,\n                multiple: false,\n                unique: false\n            },\n            /**\n             * The simple conditional settings for a component.\n             */\n            conditional: {\n                show: null,\n                when: null,\n                eq: ''\n            },\n            overlay: {\n                style: '',\n                left: '',\n                top: '',\n                width: '',\n                height: '',\n            },\n            allowCalculateOverride: false,\n            encrypted: false,\n            showCharCount: false,\n            showWordCount: false,\n            properties: {},\n            allowMultipleMasks: false,\n            addons: [],\n        }, ...sources);\n    }\n    /**\n     * Return the simple condition settings as part of the component.\n     * @returns {object} - The simple conditional settings.\n     */\n    static get conditionOperatorsSettings() {\n        return {\n            operators: ['isEqual', 'isNotEqual', 'isEmpty', 'isNotEmpty'],\n            valueComponent() {\n                return {\n                    type: 'textfield',\n                    widget: {\n                        type: 'input'\n                    }\n                };\n            }\n        };\n    }\n    /**\n     * Return the array of possible types of component value absed on its schema.\n     * @param schema\n     * @returns {Array}\n     */\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return FormioUtils.getComponentSavedTypes(schema) || [FormioUtils.componentValueTypes.any];\n    }\n    /**\n     * Provides a table view for this component. Override if you wish to do something different than using getView\n     * method of your instance.\n     * @param value\n     * @param options\n     */\n    /* eslint-disable no-unused-vars */\n    static tableView(value, options) { }\n    /* eslint-enable no-unused-vars */\n    /**\n     * Initialize a new Component.\n     * @param {object} component - The component JSON you wish to initialize.\n     * @param {object} options - The options for this component.\n     * @param {object} data - The global data submission object this component will belong.\n     */\n    /* eslint-disable max-statements */\n    constructor(component, options, data) {\n        var _a, _b, _c, _d;\n        super(Object.assign({\n            renderMode: 'form',\n            attachMode: 'full',\n            noDefaults: false\n        }, options || {}));\n        // Restore the component id.\n        if (component && component.id) {\n            this.id = component.id;\n        }\n        /**\n         * Determines if this component has a condition assigned to it.\n         * @type {null}\n         * @private\n         */\n        this._hasCondition = null;\n        /**\n         * The row index for this component.\n         */\n        this._rowIndex = undefined;\n        /**\n         * References to dom elements\n         */\n        this.refs = {};\n        // Allow global override for any component JSON.\n        if (component &&\n            this.options.components &&\n            this.options.components[component.type]) {\n            lodash_1.default.merge(component, this.options.components[component.type]);\n        }\n        /**\n         * An array of all the children components errors.\n         */\n        this.childErrors = [];\n        /**\n         * Last validation errors that have occured.\n         */\n        this._errors = [];\n        this._visibleErrors = [];\n        /**\n         * The Form.io component JSON schema.\n         * @type {*}\n         */\n        this.component = this.mergeSchema(component || {});\n        // Add the id to the component.\n        this.component.id = this.id;\n        this.afterComponentAssign();\n        // Save off the original component to be used in logic.\n        this.originalComponent = (0, utils_1.fastCloneDeep)(this.component);\n        /**\n         * If the component has been attached\n         */\n        this.attached = false;\n        /**\n         * If the component has been rendered\n         */\n        this.rendered = false;\n        /**\n         * The data object in which this component resides.\n         * @type {*}\n         */\n        this._data = data || {};\n        /**\n         * Tool tip text after processing\n         * @type {string}\n         */\n        this.tooltip = '';\n        /**\n         * The row path of this component.\n         * @type {number}\n         */\n        this.row = this.options.row;\n        /**\n         * Points to a flat map of child components (if applicable).\n         * @type {object}\n         */\n        this.childComponentsMap = {};\n        /**\n         * Determines if this component is disabled, or not.\n         * @type {boolean}\n         */\n        this._disabled = (0, utils_1.boolValue)(this.component.disabled) ? this.component.disabled : false;\n        /**\n         * Points to the root component, usually the FormComponent.\n         * @type {Component}\n         */\n        this.root = this.options.root || this;\n        this.localRoot = this.options.localRoot || this;\n        /**\n         * If this input has been input and provided value.\n         * @type {boolean}\n         */\n        this.pristine = true;\n        /**\n         * Points to the parent component.\n         * @type {Component}\n         */\n        this.parent = this.options.parent;\n        /**\n         * The component paths for this component.\n         * @type {import('@formio/core').ComponentPaths} - The component paths.\n         */\n        this.paths = FormioUtils.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths), { dataIndex: this.options.rowIndex === undefined ? (_d = (_c = this.parent) === null || _c === void 0 ? void 0 : _c.paths) === null || _d === void 0 ? void 0 : _d.dataIndex : this.options.rowIndex }));\n        this.options.name = this.options.name || 'data';\n        this._path = '';\n        // Needs for Nextgen Rules Engine\n        this.resetCaches();\n        /**\n         * Determines if this component is conditionally hidden. Should generally not be set outside of conditional logic pipeline.\n         * This is necessary because of clearOnHide behavior that only clears when conditionally hidden - we need to track\n         * conditionallyHidden separately from \"regular\" visibility.\n         */\n        this._parentConditionallyHidden = this.options.hasOwnProperty('parentConditionallyHidden') ? this.options.parentConditionallyHidden : false;\n        this._conditionallyHidden = this.checkConditionallyHidden(null, data) || this._parentConditionallyHidden;\n        /**\n         * Determines if this component is visible, or not.\n         */\n        this._parentVisible = this.options.hasOwnProperty('parentVisible') ? this.options.parentVisible : true;\n        this._visible = this._parentVisible && (this.hasCondition() ? !this._conditionallyHidden : !this.component.hidden);\n        this._parentDisabled = false;\n        /**\n         * The reference attribute name for this component\n         */\n        this._referenceAttributeName = 'ref';\n        /**\n         * Used to trigger a new change in this component.\n         * @type {Function} - Call to trigger a change in this component.\n         */\n        let changes = [];\n        let lastChanged = null;\n        let triggerArgs = [];\n        const _triggerChange = lodash_1.default.debounce((...args) => {\n            if (this.root) {\n                this.root.changing = false;\n            }\n            triggerArgs = [];\n            if (!args[1] && lastChanged) {\n                // Set the changed component if one isn't provided.\n                args[1] = lastChanged;\n            }\n            if (lodash_1.default.isEmpty(args[0]) && lastChanged) {\n                // Set the flags if it is empty and lastChanged exists.\n                args[0] = lastChanged.flags;\n            }\n            lastChanged = null;\n            args[3] = changes;\n            const retVal = this.onChange(...args);\n            changes = [];\n            return retVal;\n        }, 100);\n        this.triggerChange = (...args) => {\n            if (args[1]) {\n                // Make sure that during the debounce that we always track lastChanged component, even if they\n                // don't provide one later.\n                lastChanged = args[1];\n                changes.push(lastChanged);\n            }\n            if (this.root) {\n                this.root.changing = true;\n            }\n            if (args.length) {\n                triggerArgs = args;\n            }\n            return _triggerChange(...triggerArgs);\n        };\n        /**\n         * Used to trigger a redraw event within this component.\n         * @type {Function}\n         */\n        this.triggerRedraw = lodash_1.default.debounce(this.redraw.bind(this), 100);\n        /**\n         * list of attached tooltips\n         * @type {Array}\n         */\n        this.tooltips = [];\n        /**\n         * List of attached addons\n         * @type {Array}\n         */\n        this.addons = [];\n        // To force this component to be invalid.\n        this.invalid = false;\n        if (this.component) {\n            this.type = this.component.type;\n            if (this.allowData && this.key) {\n                this.options.name += `[${this.key}]`;\n                // If component is visible or not set to clear on hide, set the default value.\n                if (!(this.conditionallyHidden && this.component.clearOnHide)) {\n                    if (!this.hasValue()) {\n                        if (this.shouldAddDefaultValue) {\n                            this.dataValue = this.defaultValue;\n                        }\n                    }\n                    else {\n                        // Ensure the dataValue is set.\n                        /* eslint-disable  no-self-assign */\n                        this.dataValue = this.dataValue;\n                        /* eslint-enable  no-self-assign */\n                    }\n                }\n            }\n            /**\n             * The element information for creating the input element.\n             * @type {*}\n             */\n            this.info = this.elementInfo();\n        }\n        // Allow anyone to hook into the component creation.\n        this.hook('component');\n        if (!this.options.skipInit) {\n            this.init();\n        }\n    }\n    /* eslint-enable max-statements */\n    get componentsMap() {\n        var _a;\n        return ((_a = this.root) === null || _a === void 0 ? void 0 : _a.childComponentsMap) || {};\n    }\n    get data() {\n        return this._data;\n    }\n    set data(value) {\n        this._data = value;\n    }\n    mergeSchema(component = {}) {\n        return lodash_1.default.defaultsDeep(component, this.defaultSchema);\n    }\n    // Allow componets to notify when ready.\n    get ready() {\n        return Promise.resolve(this);\n    }\n    get isPDFReadOnlyMode() {\n        return this.parent &&\n            this.parent.form &&\n            (this.parent.form.display === 'pdf') &&\n            this.options.readOnly;\n    }\n    get labelInfo() {\n        const label = {};\n        label.hidden = this.labelIsHidden();\n        label.className = '';\n        label.labelPosition = this.component.labelPosition;\n        label.tooltipClass = `${this.iconClass('question-sign')} text-muted`;\n        const isPDFReadOnlyMode = this.isPDFReadOnlyMode;\n        if (this.hasInput && this.component.validate && (0, utils_1.boolValue)(this.component.validate.required) && !isPDFReadOnlyMode) {\n            label.className += ' field-required';\n        }\n        if (label.hidden) {\n            label.className += ' control-label--hidden';\n        }\n        if (this.info.attr.id) {\n            label.for = this.info.attr.id;\n        }\n        return label;\n    }\n    init() {\n        var _a;\n        this.disabled = this.shouldDisabled;\n        this._conditionallyHidden = this.checkConditionallyHidden();\n        this._visible = (this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden);\n        if ((_a = this.component.addons) === null || _a === void 0 ? void 0 : _a.length) {\n            this.component.addons.forEach((addon) => this.createAddon(addon));\n        }\n    }\n    /**\n     * Get Row Index.\n     * @returns {number} - The row index.\n     */\n    get rowIndex() {\n        return this._rowIndex;\n    }\n    /**\n     * Set Row Index to row and update each component.\n     * @param {number} value - The row index.\n     * @returns {void}\n     */\n    set rowIndex(value) {\n        var _a, _b;\n        this.paths = FormioUtils.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths) || {})), { dataIndex: value }));\n        this._rowIndex = value;\n    }\n    afterComponentAssign() {\n        //implement in extended classes\n    }\n    createAddon(addonConfiguration) {\n        var _a;\n        const name = addonConfiguration.name;\n        if (!name) {\n            return;\n        }\n        const settings = ((_a = addonConfiguration.settings) === null || _a === void 0 ? void 0 : _a.data) || {};\n        const Addon = addons_1.default[name.value];\n        let addon = null;\n        if (Addon) {\n            const supportedComponents = Addon.info.supportedComponents;\n            const supportsThisComponentType = !(supportedComponents === null || supportedComponents === void 0 ? void 0 : supportedComponents.length) ||\n                supportedComponents.indexOf(this.component.type) !== -1;\n            if (supportsThisComponentType) {\n                addon = new Addon(settings, this);\n                this.addons.push(addon);\n            }\n            else {\n                console.warn(`Addon ${name.label} does not support component of type ${this.component.type}.`);\n            }\n        }\n        return addon;\n    }\n    teardown() {\n        if (this.element) {\n            delete this.element.component;\n            delete this.element;\n        }\n        delete this._currentForm;\n        delete this.parent;\n        delete this.root;\n        delete this.triggerChange;\n        delete this.triggerRedraw;\n        if (this.options) {\n            delete this.options.root;\n            delete this.options.parent;\n            delete this.options.i18next;\n        }\n        super.teardown();\n    }\n    destroy(all = false) {\n        super.destroy(all);\n        this.detach();\n        this.addons.forEach((addon) => addon.destroy());\n        if (all) {\n            this.teardown();\n        }\n    }\n    get shouldDisabled() {\n        return this.options.readOnly || this.component.disabled || (this.options.hasOwnProperty('disabled') && this.options.disabled[this.key]);\n    }\n    get isInputComponent() {\n        return !this.component.hasOwnProperty('input') || this.component.input;\n    }\n    get allowData() {\n        return this.hasInput;\n    }\n    get hasInput() {\n        return this.isInputComponent || (this.refs.input && this.refs.input.length);\n    }\n    get defaultSchema() {\n        return Component.schema();\n    }\n    get key() {\n        return lodash_1.default.get(this.component, 'key', '');\n    }\n    get path() {\n        return this.paths.dataPath;\n    }\n    set path(path) {\n        throw new Error('Should not be setting the path of a component.');\n    }\n    set parentVisible(value) {\n        this._parentVisible = value;\n    }\n    get parentVisible() {\n        return this._parentVisible;\n    }\n    set parentDisabled(value) {\n        this._parentDisabled = value;\n    }\n    get parentDisabled() {\n        return this._parentDisabled;\n    }\n    shouldForceVisibility(component, visibility) {\n        if (!this.options[visibility]) {\n            return false;\n        }\n        if (!component) {\n            component = this.component;\n        }\n        if (lodash_1.default.isArray(this.options[visibility])) {\n            return this.options[visibility].includes(component.key);\n        }\n        return this.options[visibility][component.key];\n    }\n    shouldForceHide(component) {\n        return this.shouldForceVisibility(component, 'hide');\n    }\n    shouldForceShow(component) {\n        return this.shouldForceVisibility(component, 'show');\n    }\n    /**\n     * Sets the component visibility.\n     * @param {boolean} value - Whether the component should be visible or not.\n     */\n    set visible(value) {\n        if (this._visible !== value) {\n            // Skip if this component is set to visible and is supposed to be hidden.\n            if (value && this.shouldForceHide()) {\n                return;\n            }\n            // Skip if this component is set to hidden and is supposed to be shown.\n            if (!value && this.shouldForceShow()) {\n                return;\n            }\n            this._visible = value;\n            this.redraw();\n        }\n    }\n    /**\n     * Returns the component visibility\n     * @returns {boolean} - Whether the component is visible or not.\n     */\n    get visible() {\n        // Show only if visibility changes or if we are in builder mode or if hidden fields should be shown.\n        if (this.builderMode || this.previewMode || this.options.showHiddenFields) {\n            return true;\n        }\n        if (this.shouldForceHide()) {\n            return false;\n        }\n        if (this.shouldForceShow()) {\n            return true;\n        }\n        return this._visible && this._parentVisible;\n    }\n    get conditionallyHidden() {\n        return this._conditionallyHidden || this._parentConditionallyHidden;\n    }\n    /**\n     * Evaluates whether the component is conditionally hidden (as opposed to intentionally hidden, e.g. via the `hidden` component schema property).\n     * @param {object} data - The data object to evaluate the condition against.\n     * @param {object} row - The row object to evaluate the condition against.\n     * @returns {boolean} - Whether the component is conditionally hidden.\n     */\n    checkConditionallyHidden(data = null, row = null) {\n        if (!this.hasCondition()) {\n            return false;\n        }\n        return !this.conditionallyVisible(data, row);\n    }\n    get currentForm() {\n        return this._currentForm;\n    }\n    set currentForm(instance) {\n        this._currentForm = instance;\n    }\n    get fullMode() {\n        return this.options.attachMode === 'full';\n    }\n    get builderMode() {\n        return this.options.attachMode === 'builder';\n    }\n    get calculatedPath() {\n        console.error('component.calculatedPath was deprecated, use component.path instead.');\n        return this.path;\n    }\n    get labelPosition() {\n        return this.component.labelPosition;\n    }\n    get labelWidth() {\n        const width = this.component.labelWidth;\n        return width >= 0 ? width : 30;\n    }\n    get labelMargin() {\n        const margin = this.component.labelMargin;\n        return margin >= 0 ? margin : 3;\n    }\n    get isAdvancedLabel() {\n        return [\n            'left-left',\n            'left-right',\n            'right-left',\n            'right-right'\n        ].includes(this.labelPosition);\n    }\n    get labelPositions() {\n        return this.labelPosition.split('-');\n    }\n    get skipInEmail() {\n        return false;\n    }\n    rightDirection(direction) {\n        if (this.options.condensedMode) {\n            return false;\n        }\n        return direction === 'right';\n    }\n    getLabelInfo(isCondensed = false) {\n        const isRightPosition = this.rightDirection(this.labelPositions[0]);\n        const isLeftPosition = this.labelPositions[0] === 'left' || isCondensed;\n        const isRightAlign = this.rightDirection(this.labelPositions[1]);\n        let contentMargin = '';\n        if (this.component.hideLabel) {\n            const margin = isCondensed ? 0 : this.labelWidth + this.labelMargin;\n            contentMargin = isRightPosition ? `margin-right: ${margin}%` : '';\n            contentMargin = isLeftPosition ? `margin-left: ${margin}%` : '';\n        }\n        const labelStyles = `\n      flex: ${this.labelWidth};\n      ${isRightPosition ? 'margin-left' : 'margin-right'}: ${this.labelMargin}%;\n    `;\n        const contentStyles = `\n      flex: ${100 - this.labelWidth - this.labelMargin};\n      ${contentMargin};\n      ${this.component.hideLabel ? `max-width: ${100 - this.labelWidth - this.labelMargin}` : ''};\n    `;\n        return {\n            isRightPosition,\n            isRightAlign,\n            labelStyles,\n            contentStyles\n        };\n    }\n    /**\n     * Returns only the schema that is different from the default.\n     * @param {object} schema - The \"full\" json schema for the component.\n     * @param {object} defaultSchema - The \"default\" json schema for the component.\n     * @param {boolean} recursion - If we are currently in a recursive loop.\n     * @returns {object} - The minified json schema for this component.\n     */\n    getModifiedSchema(schema, defaultSchema, recursion) {\n        const modified = {};\n        if (!defaultSchema) {\n            return schema;\n        }\n        lodash_1.default.each(schema, (val, key) => {\n            if (!lodash_1.default.isArray(val) && lodash_1.default.isObject(val) && defaultSchema.hasOwnProperty(key)) {\n                const subModified = this.getModifiedSchema(val, defaultSchema[key], true);\n                if (!lodash_1.default.isEmpty(subModified)) {\n                    modified[key] = subModified;\n                }\n            }\n            else if (lodash_1.default.isArray(val)) {\n                if (val.length !== 0 && !lodash_1.default.isEqual(val, defaultSchema[key])) {\n                    modified[key] = val;\n                }\n            }\n            else if ((!recursion && (key === 'type')) ||\n                (!recursion && (key === 'key')) ||\n                (!recursion && (key === 'label')) ||\n                (!recursion && (key === 'input')) ||\n                (!recursion && (key === 'tableView')) ||\n                (val !== '' && !defaultSchema.hasOwnProperty(key)) ||\n                (val !== '' && val !== defaultSchema[key]) ||\n                (defaultSchema[key] && val !== defaultSchema[key])) {\n                modified[key] = val;\n            }\n        });\n        return modified;\n    }\n    /**\n     * Returns the JSON schema for this component.\n     * @returns {object} - The JSON schema for this component.\n     */\n    get schema() {\n        return (0, utils_1.fastCloneDeep)(this.getModifiedSchema(lodash_1.default.omit(this.component, 'id'), this.defaultSchema));\n    }\n    /**\n     * Returns true if component is inside DataGrid\n     * @returns {boolean} - True if component is inside DataGrid\n     */\n    get isInDataGrid() {\n        return this.inDataGrid;\n    }\n    /**\n     * Translate a text using the i18n system.\n     * @param {string} text - The i18n identifier.\n     * @param {object} params - The i18n parameters to use for translation.\n     * @param {...any} args - Additional arguments to pass to the translation library.\n     * @returns {string} - The translated text.\n     */\n    t(text, params = {}, ...args) {\n        if (!text) {\n            return '';\n        }\n        // Use _userInput: true to ignore translations from defaults\n        if (text in en_1.default && params._userInput) {\n            return text;\n        }\n        params.data = params.data || this.rootValue;\n        params.row = params.row || this.data;\n        params.component = params.component || this.component;\n        return super.t(text, params, ...args);\n    }\n    labelIsHidden() {\n        return !this.component.label ||\n            ((!this.isInDataGrid && this.component.hideLabel) ||\n                (this.isInDataGrid && !this.component.dataGridLabel) ||\n                this.options.floatingLabels ||\n                this.options.inputsOnly) && !this.builderMode;\n    }\n    transform(type, value) {\n        const frameworkTemplates = this.options.template ? Templates_1.default.templates[this.options.template] : Templates_1.default.current;\n        return frameworkTemplates.hasOwnProperty('transform')\n            ? frameworkTemplates.transform(type, value, this)\n            : (type, value) => value;\n    }\n    getTemplate(names, modes) {\n        modes = Array.isArray(modes) ? modes : [modes];\n        names = Array.isArray(names) ? names : [names];\n        if (!modes.includes('form')) {\n            modes.push('form');\n        }\n        let result = null;\n        if (this.options.templates) {\n            result = this.checkTemplate(this.options.templates, names, modes);\n            if (result) {\n                return result;\n            }\n        }\n        const frameworkTemplates = this.options.template ? Templates_1.default.templates[this.options.template] : Templates_1.default.current;\n        result = this.checkTemplate(frameworkTemplates, names, modes);\n        if (result) {\n            return result;\n        }\n        // Default back to bootstrap if not defined.\n        const name = names[names.length - 1];\n        const templatesByName = Templates_1.default.defaultTemplates[name];\n        if (!templatesByName) {\n            return { template: `Unknown template: ${name}` };\n        }\n        const templateByMode = this.checkTemplateMode(templatesByName, modes);\n        if (templateByMode) {\n            return { template: templateByMode };\n        }\n        return { template: templatesByName.form };\n    }\n    checkTemplate(templates, names, modes) {\n        for (const name of names) {\n            const templatesByName = templates[name];\n            if (templatesByName) {\n                const { referenceAttributeName } = templatesByName;\n                const templateByMode = this.checkTemplateMode(templatesByName, modes);\n                if (templateByMode) {\n                    return { template: templateByMode, referenceAttributeName };\n                }\n            }\n        }\n        return null;\n    }\n    checkTemplateMode(templatesByName, modes) {\n        for (const mode of modes) {\n            const templateByMode = templatesByName[mode];\n            if (templateByMode) {\n                return templateByMode;\n            }\n        }\n        return null;\n    }\n    getFormattedAttribute(attr) {\n        return attr ? this.t(attr, { _userInput: true }).replace(/\"/g, '&quot;') : '';\n    }\n    getFormattedTooltip(tooltipValue) {\n        const tooltip = this.interpolate(tooltipValue || '').replace(/(?:\\r\\n|\\r|\\n)/g, '<br />');\n        return this.getFormattedAttribute(tooltip);\n    }\n    isHtmlRenderMode() {\n        return this.options.renderMode === 'html';\n    }\n    renderTemplate(name, data = {}, modeOption = '') {\n        // Need to make this fall back to form if renderMode is not found similar to how we search templates.\n        const mode = modeOption || this.options.renderMode || 'form';\n        data.component = this.component;\n        data.self = this;\n        data.options = this.options;\n        data.readOnly = this.options.readOnly;\n        data.iconClass = this.iconClass.bind(this);\n        data.size = this.size.bind(this);\n        data.t = this.t.bind(this);\n        data.transform = this.transform.bind(this);\n        data.id = data.id || this.id;\n        data.key = data.key || this.key;\n        data.value = data.value || this.dataValue;\n        data.disabled = this.disabled;\n        data.builder = this.builderMode;\n        data.render = (...args) => {\n            console.warn(`Form.io 'render' template function is deprecated.\n      If you need to render template (template A) inside of another template (template B),\n      pass pre-compiled template A (use this.renderTemplate('template_A_name') as template context variable for template B`);\n            return this.renderTemplate(...args);\n        };\n        data.label = data.labelInfo || this.labelInfo;\n        data.tooltip = this.getFormattedTooltip(this.component.tooltip);\n        // Allow more specific template names\n        const names = [\n            `${name}-${this.component.type}-${this.key}`,\n            `${name}-${this.component.type}`,\n            `${name}-${this.key}`,\n            `${name}`,\n        ];\n        // Allow template alters.\n        const { referenceAttributeName, template } = this.getTemplate(names, mode);\n        if (referenceAttributeName) {\n            this._referenceAttributeName = referenceAttributeName;\n        }\n        return this.hook(`render${name.charAt(0).toUpperCase() + name.substring(1, name.length)}`, this.interpolate(template, data), data, mode);\n    }\n    /**\n     * Sanitize an html string.\n     * @param {string} dirty - The dirty html string to sanitize.\n     * @param {boolean} forceSanitize - If we should force the sanitize to occur.\n     * @param {object} options - The options for the sanitize.\n     * @returns {*} - The sanitized html string.\n     */\n    sanitize(dirty, forceSanitize = false, options = {}) {\n        var _a;\n        if (!this.shouldSanitizeValue && !forceSanitize) {\n            return dirty;\n        }\n        return FormioUtils.sanitize(dirty, {\n            sanitizeConfig: lodash_1.default.merge(((_a = this.options) === null || _a === void 0 ? void 0 : _a.sanitizeConfig) || {}, options || {}),\n        });\n    }\n    /**\n     * Render a template string into html.\n     * @param {string} template - The template to render.\n     * @param {object} data - The data to provide to the template.\n     * @returns {HTMLElement | string} - The created element or an empty string if template is not specified.\n     */\n    renderString(template, data) {\n        if (!template) {\n            return '';\n        }\n        // Interpolate the template and populate\n        return this.interpolate(template, data);\n    }\n    /**\n     * Allows for modification of the component value prior to submission.\n     * @param {*} input - The input to be modified.\n     * @returns {*} - The modified input mapping for the extended component.\n     */\n    performInputMapping(input) {\n        return input;\n    }\n    /**\n     * Returns the component \"widget\" if one is available.\n     * @returns {Widget|null} - The widget instance. null if not available.\n     */\n    get widget() {\n        var _a;\n        const settings = this.component.widget;\n        if (settings && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.shadowRoot)) {\n            settings.shadowRoot = this.root.shadowRoot;\n        }\n        const widget = settings && widgets_1.default[settings.type] ? new widgets_1.default[settings.type](settings, this.component, this) : null;\n        return widget;\n    }\n    /**\n     * Returns the native supported browser language.\n     * @returns {string|null} - The native browser language that is supported.\n     */\n    getBrowserLanguage() {\n        const nav = window.navigator;\n        const browserLanguagePropertyKeys = ['language', 'browserLanguage', 'systemLanguage', 'userLanguage'];\n        let language;\n        // support for HTML 5.1 \"navigator.languages\"\n        if (Array.isArray(nav.languages)) {\n            for (let i = 0; i < nav.languages.length; i++) {\n                language = nav.languages[i];\n                if (language && language.length) {\n                    return language.split(';')[0];\n                }\n            }\n        }\n        // support for other well known properties in browsers\n        for (let i = 0; i < browserLanguagePropertyKeys.length; i++) {\n            language = nav[browserLanguagePropertyKeys[i]];\n            if (language && language.length) {\n                return language.split(';')[0];\n            }\n        }\n        return null;\n    }\n    /**\n     * Called before a next and previous page is triggered allowing the components to perform special functions.\n     * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the next/previous page navigation.\n     */\n    beforePage() {\n        return Promise.resolve(true);\n    }\n    /**\n     * Called before the next page is triggered allowing the components to hook into the page navigation and perform tasks.\n     * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the next page navigation.\n     */\n    beforeNext() {\n        return this.beforePage(true);\n    }\n    /**\n     * Called before a submission is triggered allowing the components to perform special async functions.\n     * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the submission.\n     */\n    beforeSubmit() {\n        return Promise.resolve(true);\n    }\n    /**\n     * Return the submission timezone.\n     * @returns {string} - The submission timezone.\n     */\n    get submissionTimezone() {\n        this.options.submissionTimezone = this.options.submissionTimezone || lodash_1.default.get(this.root, 'options.submissionTimezone');\n        return this.options.submissionTimezone;\n    }\n    /**\n     * Return the current timezone.\n     * @returns {string} - The current timezone.\n     */\n    get timezone() {\n        return this.getTimezone(this.component);\n    }\n    /**\n     * Return the current timezone.\n     * @param {object} settings - Settings to control how the timezone should be returned.\n     * @returns {string} - The current timezone.\n     */\n    getTimezone(settings) {\n        if (settings.timezone) {\n            return settings.timezone;\n        }\n        if (settings.displayInTimezone === 'utc') {\n            return 'UTC';\n        }\n        const submissionTimezone = this.submissionTimezone;\n        if (submissionTimezone &&\n            ((settings.displayInTimezone === 'submission') ||\n                ((this.options.pdf || this.options.server) && (settings.displayInTimezone === 'viewer')))) {\n            return submissionTimezone;\n        }\n        // Return current timezone if none are provided.\n        return (0, utils_1.currentTimezone)();\n    }\n    /**\n     *\n     * @param {HTMLElement} element - The containing DOM element to query for the ref value.\n     * @param {object} refs - The references to load.\n     * @param {string} [referenceAttributeName] - The attribute name to use for the reference.\n     */\n    loadRefs(element, refs, referenceAttributeName) {\n        if (!element) {\n            return;\n        }\n        for (const ref in refs) {\n            const refType = refs[ref];\n            const isString = typeof refType === 'string';\n            const selector = isString && refType.includes('scope')\n                ? `:scope > [${referenceAttributeName || this._referenceAttributeName || 'ref'}=\"${ref}\"]`\n                : `[${referenceAttributeName || this._referenceAttributeName || 'ref'}=\"${ref}\"]`;\n            if (isString && refType.startsWith('single')) {\n                this.refs[ref] = element.querySelector(selector);\n            }\n            else {\n                this.refs[ref] = element.querySelectorAll(selector);\n            }\n        }\n    }\n    /**\n     * Opens the modal element.\n     * @param {string} template - The template to use for the modal dialog.\n     */\n    setOpenModalElement(template = null) {\n        this.componentModal.setOpenModalElement(template || this.getModalPreviewTemplate());\n    }\n    /**\n     * Renders a modal preview template and returns the markup as a string\n     * @param {object|null|undefined} ctx - The rendering context\n     * @return {string} - The modal preview markup\n     */\n    renderModalPreview(ctx) {\n        return this.renderTemplate('modalPreview', ctx || {});\n    }\n    /**\n     * Returns the modal preview template.\n     * @returns {string} - The modal preview template.\n     */\n    getModalPreviewTemplate() {\n        var _a;\n        const dataValue = this.component.type === 'password' ? this.dataValue.replace(/./g, '•') : this.dataValue;\n        let modalLabel;\n        if (this.hasInput && ((_a = this.component.validate) === null || _a === void 0 ? void 0 : _a.required) && !this.isPDFReadOnlyMode) {\n            modalLabel = { className: 'field-required' };\n        }\n        return this.renderModalPreview({\n            previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('Click to set value'),\n            messages: '',\n            labelInfo: modalLabel,\n        });\n    }\n    /**\n     * Performs a complete build of a component, which empties, renders, sets the content in the DOM, and then finally attaches events.\n     * @param {HTMLElement} element - The element to attach this component to.\n     * @returns {Promise<void>} - A promise that resolves when the component has been built.\n     */\n    build(element) {\n        element = element || this.element;\n        this.empty(element);\n        this.setContent(element, this.render());\n        return this.attach(element);\n    }\n    get hasModalSaveButton() {\n        return true;\n    }\n    /**\n     * Renders a component as an HTML string.\n     * @param {string} children - The contents of all the children HTML as a string.\n     * @param {boolean} topLevel - If this is the topmost component that is being rendered.\n     * @returns {string} - The rendered HTML string of a component.\n     */\n    render(children = `Unknown component: ${this.component.type}`, topLevel = false) {\n        const isVisible = this.visible;\n        this.rendered = true;\n        if (!this.builderMode && !this.previewMode && this.component.modalEdit) {\n            return ComponentModal_1.default.render(this, {\n                visible: isVisible,\n                showSaveButton: this.hasModalSaveButton,\n                id: this.id,\n                classes: this.className,\n                styles: this.customStyle,\n                children\n            }, topLevel);\n        }\n        else {\n            return this.renderTemplate('component', {\n                visible: isVisible,\n                id: this.id,\n                classes: this.className,\n                styles: this.customStyle,\n                children\n            }, topLevel);\n        }\n    }\n    /**\n     * Creates the tooltip instance using tippy.js and returns it\n     * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip\n     * @param {object|null|undefined} settings - tippy.js options\n     * @return {import('tippy.js').Tippy} - tippy.js instance\n     */\n    createTooltip(tooltipEl, settings = {}) {\n        const tooltipAttribute = tooltipEl.getAttribute('data-tooltip');\n        const tooltipDataTitle = tooltipEl.getAttribute('data-title');\n        const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)\n            .replace(/(?:\\r\\n|\\r|\\n)/g, '<br />');\n        return (0, tippy_js_1.default)(tooltipEl, Object.assign(Object.assign({ allowHTML: true, trigger: 'mouseenter click focus', placement: 'right', zIndex: 10000, interactive: true }, settings), { content: this.t(this.sanitize(tooltipText), { _userInput: true }) }));\n    }\n    /**\n     * Attaches all the tooltips provided the refs object.\n     * @param {object} toolTipsRefs - The refs for the tooltips within your template.\n     * @returns {void}\n     */\n    attachTooltips(toolTipsRefs) {\n        toolTipsRefs === null || toolTipsRefs === void 0 ? void 0 : toolTipsRefs.forEach((tooltip, index) => {\n            if (tooltip) {\n                this.tooltips[index] = this.createTooltip(tooltip);\n            }\n        });\n    }\n    /**\n     * Create a new component modal for this component.\n     * @param {HTMLElement} element - The element to attach the modal to.\n     * @param {boolean} modalShouldBeOpened - TRUE if the modal should open immediately.\n     * @param {any} currentValue - The current value of the component.\n     * @returns {ComponentModal} - The created component modal.\n     */\n    createComponentModal(element, modalShouldBeOpened, currentValue) {\n        return new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);\n    }\n    /**\n     * Attaches all event listensers for this component to the DOM elements that were rendered.\n     * @param {HTMLElement} element - The element to attach the listeners to.\n     * @returns {Promise<void>} - Resolves when the component is done attaching to the DOM.\n     */\n    attach(element) {\n        if (!this.builderMode && !this.previewMode && this.component.modalEdit) {\n            const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;\n            const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;\n            const openModalTemplate = this.componentModal && modalShouldBeOpened\n                ? this.componentModal.openModalTemplate\n                : null;\n            this.componentModal = this.createComponentModal(element, modalShouldBeOpened, currentValue);\n            this.setOpenModalElement(openModalTemplate);\n        }\n        this.attached = true;\n        this.setElement(element);\n        element.component = this;\n        // If this already has an id, get it from the dom. If SSR, it could be different from the initiated id.\n        if (this.element.id) {\n            this.id = this.element.id;\n            this.component.id = this.id;\n        }\n        this.loadRefs(element, {\n            messageContainer: 'single',\n            tooltip: 'multiple'\n        });\n        this.attachTooltips(this.refs.tooltip);\n        // Attach logic.\n        this.attachLogic();\n        this.autofocus();\n        // Allow global attach.\n        this.hook('attachComponent', element, this);\n        // Allow attach per component type.\n        const type = this.component.type;\n        if (type) {\n            this.hook(`attach${type.charAt(0).toUpperCase() + type.substring(1, type.length)}`, element, this);\n        }\n        this.restoreFocus();\n        this.addons.forEach((addon) => addon.attach(element));\n        return Promise.resolve();\n    }\n    /**\n     * Restors the \"focus\" on a component after a redraw event has occured.\n     */\n    restoreFocus() {\n        var _a, _b, _c;\n        const isFocused = ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.focusedComponent) === null || _b === void 0 ? void 0 : _b.path) === this.path;\n        if (isFocused) {\n            this.loadRefs(this.element, { input: 'multiple' });\n            this.focus((_c = this.root.currentSelection) === null || _c === void 0 ? void 0 : _c.index);\n            this.restoreCaretPosition();\n        }\n    }\n    /**\n     * Adds a keyboard shortcut to this component.\n     * @param {HTMLElement} element - The element to attach the keyboard shortcut to.\n     * @param {string} shortcut - The keyboard shortcut to add.\n     * @returns {void}\n     */\n    addShortcut(element, shortcut) {\n        // Avoid infinite recursion.\n        if (!element || !this.root || (this.root === this)) {\n            return;\n        }\n        if (!shortcut) {\n            shortcut = this.component.shortcut;\n        }\n        this.root.addShortcut(element, shortcut);\n    }\n    /**\n     * Removes a keyboard shortcut from this component.\n     * @param {HTMLElement} element - The element to remove the keyboard shortcut from.\n     * @param {string} shortcut - The keyboard shortcut to remove.\n     * @returns {void}\n     */\n    removeShortcut(element, shortcut) {\n        // Avoid infinite recursion.\n        if (!element || (this.root === this)) {\n            return;\n        }\n        if (!shortcut) {\n            shortcut = this.component.shortcut;\n        }\n        this.root.removeShortcut(element, shortcut);\n    }\n    /**\n     * Remove all event handlers.\n     */\n    detach() {\n        // First iterate through each ref and delete the component so there are no dangling component references.\n        lodash_1.default.each(this.refs, (ref) => {\n            if (ref instanceof NodeList) {\n                ref.forEach((elem) => {\n                    delete elem.component;\n                });\n            }\n            else if (ref) {\n                delete ref.component;\n            }\n        });\n        this.refs = {};\n        this.removeEventListeners();\n        this.detachLogic();\n        if (this.tooltip) {\n            this.tooltip.destroy();\n        }\n    }\n    /**\n     * Determines if the component should be refreshed based on the path of another component that changed.\n     * @param {string} refreshData - The path of the data that needs to trigger a refresh.\n     * @param {boolean} changed - Flag that is true if the data has been changed.\n     * @param {any} flags - The flags for the checkData procedure.\n     * @returns {void}\n     */\n    checkRefresh(refreshData, changed, flags) {\n        var _a, _b;\n        const changePath = lodash_1.default.get(changed, 'instance.path', false);\n        // Don't let components change themselves.\n        if (changePath && this.path === changePath) {\n            return;\n        }\n        if (refreshData === 'data') {\n            this.refresh(this.data, changed, flags);\n        }\n        else if ((changePath && (((_b = (_a = changed.instance) === null || _a === void 0 ? void 0 : _a.paths) === null || _b === void 0 ? void 0 : _b.localPath) === refreshData)) && changed && changed.instance &&\n            // Make sure the changed component is not in a different \"context\". Solves issues where refreshOn being set\n            // in fields inside EditGrids could alter their state from other rows (which is bad).\n            this.inContext(changed.instance)) {\n            this.refresh(changed.value, changed, flags);\n        }\n    }\n    /**\n     * Iterates over a list of changes, and determines if the component should be refreshed if it is configured to refresh on any of those components.\n     * @param {Array<any>} changes - The list of components that have changed.\n     * @param {any} flags - The checkData flags.\n     * @returns {void}\n     */\n    checkRefreshOn(changes, flags = {}) {\n        changes = changes || [];\n        if (flags.noRefresh) {\n            return;\n        }\n        if (!changes.length && flags.changed) {\n            changes = [flags.changed];\n        }\n        const refreshOn = flags.fromBlur ? this.component.refreshOnBlur : this.component.refreshOn || this.component.redrawOn;\n        // If they wish to refresh on a value, then add that here.\n        if (refreshOn) {\n            if (Array.isArray(refreshOn)) {\n                refreshOn.forEach(refreshData => changes.forEach(changed => this.checkRefresh(refreshData, changed, flags)));\n            }\n            else {\n                changes.forEach(changed => this.checkRefresh(refreshOn, changed, flags));\n            }\n        }\n    }\n    /**\n     * Refreshes the component with a new value.\n     * @param {any} value - The latest value of the component to check if it needs to be refreshed.\n     * @returns {void}\n     */\n    refresh(value) {\n        if (this.hasOwnProperty('refreshOnValue')) {\n            this.refreshOnChanged = !lodash_1.default.isEqual(value, this.refreshOnValue);\n        }\n        else {\n            this.refreshOnChanged = true;\n        }\n        this.refreshOnValue = (0, utils_1.fastCloneDeep)(value);\n        if (this.refreshOnChanged) {\n            if (this.component.clearOnRefresh) {\n                this.setValue(null);\n            }\n            this.triggerRedraw();\n        }\n    }\n    /**\n     * Checks to see if a separate component is in the \"context\" of this component. This is determined by first checking\n     * if they share the same \"data\" object. It will then walk up the parent tree and compare its parents data objects\n     * with the components data and returns true if they are in the same context.\n     *\n     * Different rows of the same EditGrid, for example, are in different contexts.\n     * @param {any} component - The component to check if it is in the same context as this component.\n     * @returns {boolean} - TRUE if the component is in the same context as this component.\n     */\n    inContext(component) {\n        if (component.data === this.data) {\n            return true;\n        }\n        let parent = this.parent;\n        while (parent) {\n            if (parent.data === component.data) {\n                return true;\n            }\n            parent = parent.parent;\n        }\n        return false;\n    }\n    /**\n     * Determines if we are in \"view\" only mode.\n     * @returns {boolean} - TRUE if we are in \"view\" only mode.\n     */\n    get viewOnly() {\n        return this.options.readOnly && this.options.viewAsHtml;\n    }\n    /**\n     * Sets the HTMLElement for this component.\n     * @param {HTMLElement} element - The element that is attached to this component.\n     * @returns {void}\n     */\n    setElement(element) {\n        if (this.element) {\n            delete this.element.component;\n            delete this.element;\n        }\n        this.element = element;\n    }\n    /**\n     * Creates an element to hold the \"view only\" version of this component.\n     * @returns {HTMLElement} - The element for this component.\n     */\n    createViewOnlyElement() {\n        this.setElement(this.ce('dl', {\n            id: this.id\n        }));\n        if (this.element) {\n            // Ensure you can get the component info from the element.\n            this.element.component = this;\n        }\n        return this.element;\n    }\n    /**\n     * The default value for the \"view only\" mode of a component if the value is not provided.\n     * @returns {string} - The default value for this component.\n     */\n    get defaultViewOnlyValue() {\n        return '-';\n    }\n    /**\n     * Uses the widget to determine the output string.\n     * @param {any} value - The current value of the component.\n     * @param {any} options - The options for getValueAsString.\n     * @returns {any|Array<any>} - The value as a string.\n     */\n    getWidgetValueAsString(value, options) {\n        const noInputWidget = !this.refs.input || !this.refs.input[0] || !this.refs.input[0].widget;\n        if (!value || noInputWidget) {\n            if (!this.widget || !value) {\n                return value;\n            }\n            else {\n                return this.widget.getValueAsString(value);\n            }\n        }\n        if (Array.isArray(value)) {\n            const values = [];\n            value.forEach((val, index) => {\n                const widget = this.refs.input[index] && this.refs.input[index].widget;\n                if (widget) {\n                    values.push(widget.getValueAsString(val, options));\n                }\n            });\n            return values;\n        }\n        const widget = this.refs.input[0].widget;\n        return widget.getValueAsString(value, options);\n    }\n    /**\n     * Returns the value of the component as a string.\n     * @param {any} value - The value for this component.\n     * @param {any} options - The options for this component.\n     * @returns {string} - The string representation of the value of this component.\n     */\n    getValueAsString(value, options) {\n        if (!value) {\n            return '';\n        }\n        value = this.getWidgetValueAsString(value, options);\n        if (Array.isArray(value)) {\n            return value.join(', ');\n        }\n        if (lodash_1.default.isPlainObject(value)) {\n            return JSON.stringify(value);\n        }\n        if (value === null || value === undefined) {\n            return '';\n        }\n        const stringValue = value.toString();\n        return this.sanitize(stringValue);\n    }\n    /**\n     * Returns the string representation \"view\" of the component value.\n     * @param {any} value - The value of the component.\n     * @param {any} options - The options for this component.\n     * @returns {string} - The string representation of the value of this component.\n     */\n    getView(value, options) {\n        if (this.component.protected) {\n            return '--- PROTECTED ---';\n        }\n        return this.getValueAsString(value, options);\n    }\n    /**\n     * Updates the items list for this component. Useful for Select and other List component types.\n     * @param {...any} args - The arguments to pass to the onChange event.\n     * @returns {void}\n     */\n    updateItems(...args) {\n        this.restoreValue();\n        this.onChange(...args);\n    }\n    /**\n     * Returns the value for a specific item in a List type component.\n     * @param {any} data - The data for this component.\n     * @param {boolean} [forceUseValue] - if true, return 'value' property of the data\n     * @returns {any} - The value of the item.\n     */\n    itemValue(data, forceUseValue = false) {\n        if (lodash_1.default.isObject(data) && !lodash_1.default.isArray(data)) {\n            if (this.valueProperty) {\n                return lodash_1.default.get(data, this.valueProperty);\n            }\n            if (forceUseValue) {\n                return data.value;\n            }\n        }\n        return data;\n    }\n    /**\n     * Returns the item value for html mode.\n     * @param {any} value - The value for this component.\n     * @returns {any} - The value of the item for html mode.\n     */\n    itemValueForHTMLMode(value) {\n        if (Array.isArray(value)) {\n            const values = value.map(item => Array.isArray(item) ? this.itemValueForHTMLMode(item) : this.itemValue(item));\n            return values.join(', ');\n        }\n        return this.itemValue(value);\n    }\n    /**\n     * Creates a modal to input the value of this component.\n     * @param {HTMLElement} element - The element to attach the modal to.\n     * @param {any} attr - A list of attributes to add to the modal.\n     * @param {boolean} confirm - If we should add a confirmation to the modal that keeps it from closing unless confirmed.\n     * @returns {HTMLElement} - The created modal element.\n     */\n    createModal(element, attr, confirm) {\n        const dialog = this.ce('div', attr || {});\n        this.setContent(dialog, this.renderTemplate('dialog'));\n        // Add refs to dialog, not \"this\".\n        dialog.refs = {};\n        this.loadRefs.call(dialog, dialog, {\n            dialogOverlay: 'single',\n            dialogContents: 'single',\n            dialogClose: 'single',\n        });\n        dialog.refs.dialogContents.appendChild(element);\n        document.body.appendChild(dialog);\n        document.body.classList.add('modal-open');\n        dialog.close = () => {\n            document.body.classList.remove('modal-open');\n            dialog.dispatchEvent(new CustomEvent('close'));\n        };\n        this.addEventListener(dialog, 'close', () => this.removeChildFrom(dialog, document.body));\n        const close = (event) => {\n            event.preventDefault();\n            dialog.close();\n        };\n        const handleCloseClick = (e) => {\n            if (confirm) {\n                confirm().then(() => close(e))\n                    .catch(() => { });\n            }\n            else {\n                close(e);\n            }\n        };\n        this.addEventListener(dialog.refs.dialogOverlay, 'click', handleCloseClick);\n        this.addEventListener(dialog.refs.dialogClose, 'click', handleCloseClick);\n        return dialog;\n    }\n    /**\n     * Uses CSS classes to show or hide an element.\n     * @returns {boolean} - TRUE if the element has been css removed.\n     */\n    get optimizeRedraw() {\n        if (this.options.optimizeRedraw && this.element && !this.visible) {\n            this.addClass(this.element, 'formio-removed');\n            return true;\n        }\n        return false;\n    }\n    /**\n     * Retrieves the CSS class name of this component.\n     * @returns {string} - The class name of this component.\n     */\n    get className() {\n        let className = this.hasInput ? `${this.transform('class', 'form-group')} has-feedback ` : '';\n        className += `formio-component formio-component-${this.component.type} `;\n        // TODO: find proper way to avoid overriding of default type-based component styles\n        if (this.key && this.key !== 'form') {\n            className += `formio-component-${this.key} `;\n        }\n        if (this.component.multiple) {\n            className += 'formio-component-multiple ';\n        }\n        if (this.component.customClass) {\n            className += this.component.customClass;\n        }\n        if (this.hasInput && this.component.validate && (0, utils_1.boolValue)(this.component.validate.required)) {\n            className += ' required';\n        }\n        if (this.labelIsHidden()) {\n            className += ' formio-component-label-hidden';\n        }\n        if (!this.visible) {\n            className += ' formio-hidden';\n        }\n        return className;\n    }\n    /**\n     * Build the custom style from the layout values\n     * @returns {string} - The custom style\n     */\n    get customStyle() {\n        let customCSS = '';\n        lodash_1.default.each(this.component.style, (value, key) => {\n            if (value !== '') {\n                customCSS += `${key}:${value};`;\n            }\n        });\n        return customCSS;\n    }\n    /**\n     * Returns the component condition operator settings if available.\n     * @returns {object} - The component condition operator settings.\n     */\n    static get serverConditionSettings() {\n        return Component.conditionOperatorsSettings;\n    }\n    /**\n     * Returns if the application is on a mobile device.\n     * @returns {boolean} - TRUE if the application is on a mobile device.\n     */\n    get isMobile() {\n        return (0, ismobilejs_1.default)();\n    }\n    /**\n     * Returns the outside wrapping element of this component.\n     * @returns {HTMLElement} - The wrapping element of this component.\n     */\n    getElement() {\n        return this.element;\n    }\n    /**\n     * Create an evaluation context for all script executions and interpolations.\n     * @param {any} additional - Additional context to provide.\n     * @returns {any} - The evaluation context.\n     */\n    evalContext(additional) {\n        return super.evalContext(Object.assign({\n            component: this.component,\n            row: this.data,\n            rowIndex: this.rowIndex,\n            data: this.rootValue,\n            iconClass: this.iconClass.bind(this),\n            // Bind the translate function to the data context of any interpolated string.\n            // It is useful to translate strings in different scenarions (eg: custom edit grid templates, custom error messages etc.)\n            // and desirable to be publicly available rather than calling the internal {instance.t} function in the template string.\n            t: this.t.bind(this),\n            submission: (this.root ? this.root._submission : {\n                data: this.rootValue\n            }),\n            form: this.root ? this.root._form : {},\n            options: this.options,\n        }, additional));\n    }\n    /**\n     * Sets the pristine flag for this component.\n     * @param {boolean} pristine - TRUE to make pristine, FALSE not pristine.\n     */\n    setPristine(pristine) {\n        this.pristine = pristine;\n    }\n    /**\n     * Returns if the component is pristine.\n     * @returns {boolean} - TRUE if the component is pristine.\n     */\n    get isPristine() {\n        return this.pristine;\n    }\n    /**\n     * Sets the dirty flag for this component.\n     * @param {boolean} dirty - TRUE to make dirty, FALSE not dirty.\n     */\n    setDirty(dirty) {\n        this.dirty = dirty;\n    }\n    /**\n     * Returns if the component is dirty.\n     * @returns {boolean} - TRUE if the component is dirty.\n     */\n    get isDirty() {\n        return this.dirty;\n    }\n    /**\n     * Removes a value out of the data array and rebuild the rows.\n     * @param {number} index - The index of the data element to remove.\n     */\n    removeValue(index) {\n        this.splice(index);\n        this.redraw();\n        this.restoreValue();\n        this.triggerRootChange();\n    }\n    /**\n     * Returns the icon class for a given icon name.\n     * @param {string} name - The name of the icon you wish to fetch provided the icon class. This is the \"font awesome\" version of the name of the icon.\n     * @param {boolean} spinning - If the component should be spinning.\n     * @returns {string} - The icon class for the equivalent icon in the iconset we are using.\n     */\n    iconClass(name, spinning) {\n        const iconset = this.options.iconset || Templates_1.default.current.defaultIconset || 'fa';\n        return Templates_1.default.current.hasOwnProperty('iconClass')\n            ? Templates_1.default.current.iconClass(iconset, name, spinning)\n            : this.options.iconset === 'fa' ? Templates_1.default.defaultTemplates.iconClass(iconset, name, spinning) : name;\n    }\n    /**\n     * Returns the size css class names for our current template.\n     * @param {string} size - The size class name for the default iconset.\n     * @returns {string} - The size class for our component.\n     */\n    size(size) {\n        return Templates_1.default.current.hasOwnProperty('size')\n            ? Templates_1.default.current.size(size)\n            : size;\n    }\n    /**\n     * The readible name for this component.\n     * @returns {string} - The name of the component.\n     */\n    get name() {\n        return this.t(this.component.label || this.component.placeholder || this.key, { _userInput: true });\n    }\n    /**\n     * Returns the visible errors for this component.\n     * @returns {Array<object>} - The visible errors for this component.\n     */\n    get visibleErrors() {\n        return this._visibleErrors;\n    }\n    /**\n     * Returns all the errors for this component, visible or not.\n     * @returns {Array<object>} - All the errors for this component.\n     */\n    get errors() {\n        return this._errors;\n    }\n    /**\n     * Returns the error label for this component.\n     * @returns {string} - The error label for this component.\n     */\n    get errorLabel() {\n        return this.t(this.component.errorLabel\n            || this.component.label\n            || this.component.placeholder\n            || this.key);\n    }\n    /**\n     * Get the error message provided a certain type of error.\n     * @param {string} type - The type of error to fetch the message for.\n     * @returns {string} - The error message configured for this component.\n     */\n    errorMessage(type) {\n        return (this.component.errors && this.component.errors[type]) ? this.component.errors[type] : type;\n    }\n    /**\n     * Sets the content, innerHTML, of an element to the sanitized content.\n     * @param {HTMLElement} element - The element to set the innerHTML to.\n     * @param {string} content - The HTML string content that we wish to set.\n     * @param {boolean} forceSanitize - If we should force the content to be sanitized.\n     * @param {any} sanitizeOptions - The options for the sanitize function.\n     * @returns {boolean} - TRUE if the content was sanitized and set.\n     */\n    setContent(element, content, forceSanitize, sanitizeOptions) {\n        if (element instanceof HTMLElement) {\n            element.innerHTML = this.sanitize(content, forceSanitize, sanitizeOptions);\n            return true;\n        }\n        return false;\n    }\n    /**\n     * Restores the caret position in the input element after a refresh occurs.\n     */\n    restoreCaretPosition() {\n        var _a, _b, _c;\n        if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.currentSelection) {\n            if ((_b = this.refs.input) === null || _b === void 0 ? void 0 : _b.length) {\n                const { index } = this.root.currentSelection;\n                let input = this.refs.input[index];\n                const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test((i === null || i === void 0 ? void 0 : i.type) || '');\n                if (input) {\n                    if (isInputRangeSelectable(input)) {\n                        input.setSelectionRange(input.value.length, input.value.length);\n                    }\n                }\n                else {\n                    input = this.refs.input[this.refs.input.length];\n                    const lastCharacter = ((_c = input.value) === null || _c === void 0 ? void 0 : _c.length) || 0;\n                    if (isInputRangeSelectable(input)) {\n                        input.setSelectionRange(lastCharacter, lastCharacter);\n                    }\n                }\n            }\n        }\n    }\n    /**\n     * Redraw the component.\n     * @returns {Promise<void>} - A promise that resolves when the component is done redrawing.\n     */\n    redraw() {\n        // Don't bother if we have not built yet.\n        if (!this.element || !this.element.parentNode || this.optimizeRedraw) {\n            // Return a non-resolving promise.\n            return Promise.resolve();\n        }\n        this.detach();\n        this.emit('redraw');\n        // Since we are going to replace the element, we need to know it's position so we can find it in the parent's children.\n        const parent = this.element.parentNode;\n        const index = Array.prototype.indexOf.call(parent.children, this.element);\n        this.element.outerHTML = this.sanitize(this.render());\n        this.setElement(parent.children[index]);\n        return this.attach(this.element);\n    }\n    /**\n     * Rebuild and redraw a component.\n     * @returns {Promise<void>} - A promise that resolves when the component is done rebuilding and redrawing.\n     */\n    rebuild() {\n        this.destroy();\n        this.init();\n        this.visible = this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden;\n        return this.redraw();\n    }\n    /**\n     * Removes all event listeners attached to this component.\n     */\n    removeEventListeners() {\n        super.removeEventListeners();\n        this.tooltips.forEach(tooltip => tooltip.destroy());\n        this.tooltips = [];\n    }\n    /**\n     * Returns if the dom node has the classes provided.\n     * @param {HTMLElement} element - The element to check for the class.\n     * @param {string} className - The name of the class to check.\n     * @returns {boolean|void} - TRUE if the element has the class.\n     */\n    hasClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.hasClass(element, this.transform('class', className));\n    }\n    /**\n     * Adds a class to an HTML element.\n     * @param {HTMLElement} element - The dom element to add the class to.\n     * @param {string} className - The class name you wish to add.\n     * @returns {this|void} - The component instance.\n     */\n    addClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.addClass(element, this.transform('class', className));\n    }\n    /**\n     * Removes a class from an element.\n     * @param {HTMLElement} element - The element to remove the class from.\n     * @param {string} className - The class name to remove.\n     * @returns {this|void} - The component instance.\n     */\n    removeClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.removeClass(element, this.transform('class', className));\n    }\n    /**\n     * Determines if this component has a condition defined.\n     * @returns {boolean} - TRUE if the component has a condition defined.\n     */\n    hasCondition() {\n        if (this._hasCondition !== null) {\n            return this._hasCondition;\n        }\n        this._hasCondition = FormioUtils.hasCondition(this.component);\n        return this._hasCondition;\n    }\n    /**\n     * Check if this component is conditionally visible.\n     * @param {any} data - The data to check against.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean} - TRUE if the component is conditionally visible.\n     */\n    conditionallyVisible(data, row) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        if (this.builderMode || this.previewMode) {\n            return true;\n        }\n        data = data || (this.root ? this.root.data : {});\n        return this.checkCondition(row, data);\n    }\n    /**\n     * Checks the condition of this component.\n     *\n     * TODO: Switch row and data parameters to be consistent with other methods.\n     * @param {any} row - The row contextual data.\n     * @param {any} data - The global data object.\n     * @returns {boolean} - True if the condition applies to this component.\n     */\n    checkCondition(row, data) {\n        return FormioUtils.checkCondition(this.component, row || this.data, data || this.rootValue, this.root ? this.root._form : {}, this);\n    }\n    /**\n     * Check for conditionals and hide/show the element based on those conditions.\n     * @param {any} data - The data to check against.\n     * @param {any} flags - The flags passed to checkData function.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean} - TRUE if the component is visible.\n     */\n    checkComponentConditions(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        if (!this.builderMode & !this.previewMode && this.fieldLogic(data, row)) {\n            this.redraw();\n        }\n        // Check advanced conditions (and cache the result)\n        const isConditionallyHidden = this.checkConditionallyHidden(data, row) || this._parentConditionallyHidden;\n        if (isConditionallyHidden !== this._conditionallyHidden) {\n            this._conditionallyHidden = isConditionallyHidden;\n            this.clearOnHide();\n        }\n        // Check visibility\n        const visible = (this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden);\n        if (this.visible !== visible) {\n            this.visible = visible;\n        }\n        return visible;\n    }\n    /**\n     * Checks conditions for this component and any sub components.\n     * @param {any} data - The data to check against.\n     * @param {any} flags - The flags passed to checkData function.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean} - TRUE if the component is visible.\n     */\n    checkConditions(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        return this.checkComponentConditions(data, flags, row);\n    }\n    /**\n     * Returns the component logic if applicable.\n     * @returns {Array<object>} - The component logic.\n     */\n    get logic() {\n        return this.component.logic || [];\n    }\n    /**\n     * Check all triggers and apply necessary actions.\n     * @param {any} data - The data to check against.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean|void} - TRUE if the component was altered.\n     */\n    fieldLogic(data = this.rootValue, row = this.data) {\n        const logics = this.logic;\n        // If there aren't logic, don't go further.\n        if (logics.length === 0) {\n            return;\n        }\n        const newComponent = (0, utils_1.fastCloneDeep)(this.originalComponent);\n        let changed = logics.reduce((changed, logic) => {\n            const result = FormioUtils.checkTrigger(newComponent, logic.trigger, row, data, this.root ? this.root._form : {}, this);\n            return (result ? this.applyActions(newComponent, logic.actions, result, row, data) : false) || changed;\n        }, false);\n        // If component definition changed, replace and mark as changed.\n        if (!lodash_1.default.isEqual(this.component, newComponent)) {\n            this.component = newComponent;\n            changed = true;\n            const disabled = this.shouldDisabled;\n            // Change disabled state if it has changed\n            if (this.disabled !== disabled) {\n                this.disabled = disabled;\n            }\n        }\n        return changed;\n    }\n    /**\n     * Retuns if the browser is Internet Explorer.\n     * @returns {boolean} - TRUE if the browser is IE.\n     */\n    isIE() {\n        if (typeof window === 'undefined') {\n            return false;\n        }\n        const userAgent = window.navigator.userAgent;\n        const msie = userAgent.indexOf('MSIE ');\n        if (msie > 0) {\n            // IE 10 or older => return version number\n            return parseInt(userAgent.substring(msie + 5, userAgent.indexOf('.', msie)), 10);\n        }\n        const trident = userAgent.indexOf('Trident/');\n        if (trident > 0) {\n            // IE 11 => return version number\n            const rv = userAgent.indexOf('rv:');\n            return parseInt(userAgent.substring(rv + 3, userAgent.indexOf('.', rv)), 10);\n        }\n        const edge = userAgent.indexOf('Edge/');\n        if (edge > 0) {\n            // IE 12 (aka Edge) => return version number\n            return parseInt(userAgent.substring(edge + 5, userAgent.indexOf('.', edge)), 10);\n        }\n        // other browser\n        return false;\n    }\n    /**\n     * Defines the logic action value through evaluation.\n     * @param {object} action - The action within the Logic system to perform.\n     * @param {object} argsObject - The arguments to pass to the evaluation.\n     * @returns {any} - The result of the evaluation.\n     */\n    defineActionValue(action, argsObject) {\n        return this.evaluate(action.value, argsObject, 'value');\n    }\n    /**\n     * Apply the actions of Logic for a component once the conditions have been met.\n     * @param {object} newComponent - The new component to apply the actions to.\n     * @param {Array<object>} actions - An array of actions\n     * @param {any} result - The result of the conditional check in order to evaluate the actions.\n     * @param {any} row - The contextual row data for this component.\n     * @param {any} data - The global data object for the submission.\n     * @returns {boolean} - TRUE if the component was altered.\n     */\n    applyActions(newComponent, actions, result, row, data) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        return actions.reduce((changed, action) => {\n            switch (action.type) {\n                case 'property': {\n                    FormioUtils.setActionProperty(newComponent, action, result, row, data, this);\n                    const property = action.property.value;\n                    if (!lodash_1.default.isEqual(lodash_1.default.get(this.component, property), lodash_1.default.get(newComponent, property))) {\n                        // Advanced Logic can modify the component's hidden property; because we track conditionally hidden state\n                        // separately from the component's hidden property, and technically this Advanced Logic conditionally hides\n                        // a component, we need to set _conditionallyHidden to the new value\n                        if (property === 'hidden') {\n                            this._conditionallyHidden = newComponent.hidden;\n                        }\n                        changed = true;\n                    }\n                    break;\n                }\n                case 'value': {\n                    const oldValue = this.getValue();\n                    const newValue = this.defineActionValue(action, {\n                        value: lodash_1.default.clone(oldValue),\n                        data,\n                        row,\n                        component: newComponent,\n                        result,\n                    });\n                    if (!lodash_1.default.isEqual(oldValue, newValue) && !(this.component.clearOnHide && this.conditionallyHidden)) {\n                        this.setValue(newValue);\n                        if (this.viewOnly) {\n                            this.dataValue = newValue;\n                        }\n                        changed = true;\n                    }\n                    break;\n                }\n                case 'mergeComponentSchema': {\n                    const schema = this.evaluate(action.schemaDefinition, {\n                        value: lodash_1.default.clone(this.getValue()),\n                        data,\n                        row,\n                        component: newComponent,\n                        result,\n                    }, 'schema');\n                    lodash_1.default.assign(newComponent, schema);\n                    if (!lodash_1.default.isEqual(this.component, newComponent)) {\n                        changed = true;\n                    }\n                    break;\n                }\n                case 'customAction': {\n                    const oldValue = this.getValue();\n                    const newValue = this.evaluate(action.customAction, {\n                        value: lodash_1.default.clone(oldValue),\n                        data,\n                        row,\n                        input: oldValue,\n                        component: newComponent,\n                        result,\n                    }, 'value');\n                    if (!lodash_1.default.isEqual(oldValue, newValue) && !(this.component.clearOnHide && this.conditionallyHidden)) {\n                        this.setValue(newValue);\n                        if (this.viewOnly) {\n                            this.dataValue = newValue;\n                        }\n                        changed = true;\n                    }\n                    break;\n                }\n            }\n            return changed;\n        }, false);\n    }\n    // Deprecated\n    addInputError(message, dirty, elements) {\n        this.addMessages(message);\n        this.setErrorClasses(elements, dirty, !!message);\n    }\n    // Deprecated\n    removeInputError(elements) {\n        this.setErrorClasses(elements, true, false);\n    }\n    /**\n     * Add a new input error to this element.\n     * @param {Array<object>|string} messages - An array of messages to add to the element.\n     * @returns {void}\n     */\n    addMessages(messages) {\n        if (!messages) {\n            return;\n        }\n        // Standardize on array of objects for message.\n        if (typeof messages === 'string') {\n            messages = {\n                messages,\n                level: 'error',\n            };\n        }\n        if (!Array.isArray(messages)) {\n            messages = [messages];\n        }\n        messages = lodash_1.default.uniqBy(messages, message => message.message);\n        if (this.refs.messageContainer) {\n            this.setContent(this.refs.messageContainer, messages.map((message) => {\n                return this.renderTemplate('message', Object.assign({}, message));\n            }).join(''));\n        }\n    }\n    /**\n     * Sets the form input widget error classes.\n     * @param {Array<HTMLElement>} elements - An array of DOM elements to set the error classes on.\n     * @param {boolean} dirty - If the input is dirty.\n     * @param {boolean} hasErrors - If the input has errors.\n     * @param {boolean} hasMessages - If the input has messages.\n     * @param {HTMLElement} element - The wrapper element for all the other elements passed in first argument.\n     * @returns {void}\n     */\n    setErrorClasses(elements, dirty, hasErrors, hasMessages, element = this.element) {\n        this.clearErrorClasses();\n        elements.forEach((element) => {\n            this.setElementInvalid(this.performInputMapping(element), false);\n        });\n        this.setInputWidgetErrorClasses(elements, hasErrors);\n        // do not set error classes for hidden components\n        if (!this.visible) {\n            return;\n        }\n        if (hasErrors) {\n            // Add error classes\n            elements.forEach((input) => {\n                this.setElementInvalid(this.performInputMapping(input), true);\n            });\n            if (dirty && this.options.highlightErrors) {\n                this.addClass(element, this.options.componentErrorClass);\n            }\n            else {\n                this.addClass(element, 'has-error');\n            }\n        }\n        if (hasMessages) {\n            this.addClass(element, 'has-message');\n        }\n    }\n    /**\n     * Adds the classes necessary to mark an element as invalid.\n     * @param {HTMLElement} element - The element you wish to add the invalid classes to.\n     * @param {boolean} invalid - TRUE if the component is invalid, FALSE otherwise.\n     * @returns {void}\n     */\n    setElementInvalid(element, invalid) {\n        if (!element)\n            return;\n        if (invalid) {\n            this.addClass(element, 'is-invalid');\n        }\n        else {\n            this.removeClass(element, 'is-invalid');\n        }\n        element.setAttribute('aria-invalid', invalid ? 'true' : 'false');\n    }\n    /**\n     * Clears the components data if it is conditionally hidden AND clearOnHide is set to true for this component.\n     */\n    clearOnHide() {\n        // clearOnHide defaults to true for old forms (without the value set) so only trigger if the value is false.\n        if (\n        // if change happens inside EditGrid's row, it doesn't trigger change on the root level, so rootPristine will be true\n        (!this.rootPristine || this.options.server || (0, utils_1.isInsideScopingComponent)(this)) &&\n            this.component.clearOnHide !== false &&\n            !this.options.readOnly &&\n            !this.options.showHiddenFields) {\n            if (this.conditionallyHidden) {\n                this.deleteValue();\n            }\n            else if (!this.hasValue() && this.shouldAddDefaultValue) {\n                // If shown, ensure the default is set.\n                this.setValue(this.defaultValue, {\n                    noUpdateEvent: true\n                });\n            }\n        }\n    }\n    /**\n     * Triggers a debounced onChange event for the root component (usually Webform).\n     * @param {...any} args - The arguments to pass to the onChange event.\n     */\n    triggerRootChange(...args) {\n        if (this.options.onChange) {\n            this.options.onChange(...args);\n        }\n        else if (this.root && this.root.triggerChange) {\n            this.root.triggerChange(...args);\n        }\n    }\n    /**\n     * Called when the component value has been changed. This will then trigger the root level onChange handler which\n     * propagates the checkData methods for the full component tree.\n     * @param {any} flags - The flags for the change event propagation.\n     * @param {boolean} fromRoot - If the change event is from the root component.\n     * @returns {boolean} - TRUE if the component has changed.\n     */\n    onChange(flags, fromRoot) {\n        flags = flags || {};\n        if (flags.modified) {\n            if (!flags.noPristineChangeOnModified) {\n                this.pristine = false;\n            }\n            this.addClass(this.getElement(), 'formio-modified');\n        }\n        // If we are supposed to validate on blur, then don't trigger validation yet.\n        if (this.component.validateOn === 'blur' || this.component.validateOn === 'submit') {\n            flags.noValidate = true;\n        }\n        if (this.component.onChange) {\n            this.evaluate(this.component.onChange, {\n                flags\n            });\n        }\n        // Set the changed variable.\n        const changed = {\n            instance: this,\n            component: this.component,\n            value: this.dataValue,\n            flags: flags\n        };\n        // Emit the change.\n        this.emit('componentChange', changed);\n        // Do not propogate the modified flag.\n        let modified = false;\n        if (flags.modified) {\n            modified = true;\n            delete flags.modified;\n        }\n        // Bubble this change up to the top.\n        if (!fromRoot) {\n            this.triggerRootChange(flags, changed, modified);\n        }\n        return changed;\n    }\n    get wysiwygDefault() {\n        return {\n            quill: {\n                theme: 'snow',\n                placeholder: this.t(this.component.placeholder, { _userInput: true }),\n                modules: {\n                    toolbar: [\n                        [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown\n                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],\n                        [{ 'font': [] }],\n                        ['bold', 'italic', 'underline', 'strike', { 'script': 'sub' }, { 'script': 'super' }, 'clean'],\n                        [{ 'color': [] }, { 'background': [] }],\n                        [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }, { 'align': [] }],\n                        ['blockquote', 'code-block'],\n                        ['link', 'image', 'video', 'formula', 'source']\n                    ]\n                }\n            },\n            ace: {\n                theme: 'ace/theme/xcode',\n                maxLines: 12,\n                minLines: 12,\n                tabSize: 2,\n                mode: 'ace/mode/javascript',\n                placeholder: this.t(this.component.placeholder, { _userInput: true })\n            },\n            ckeditor: {\n                image: {\n                    toolbar: [\n                        'imageTextAlternative',\n                        '|',\n                        'imageStyle:full',\n                        'imageStyle:alignLeft',\n                        'imageStyle:alignCenter',\n                        'imageStyle:alignRight'\n                    ],\n                    styles: [\n                        'full',\n                        'alignLeft',\n                        'alignCenter',\n                        'alignRight'\n                    ]\n                },\n                extraPlugins: []\n            },\n            default: {}\n        };\n    }\n    addCKE(element, settings, onChange) {\n        settings = lodash_1.default.isEmpty(settings) ? {} : settings;\n        settings.base64Upload = this.component.isUploadEnabled ? false : true;\n        settings.mediaEmbed = { previewsInData: true };\n        settings = lodash_1.default.merge(this.wysiwygDefault.ckeditor, lodash_1.default.get(this.options, 'editors.ckeditor.settings', {}), settings);\n        if (this.component.isUploadEnabled) {\n            settings.extraPlugins.push((0, uploadAdapter_1.getFormioUploadAdapterPlugin)(this.fileService, this));\n        }\n        return Formio_1.Formio.requireLibrary('ckeditor', isIEBrowser ? 'CKEDITOR' : 'ClassicEditor', lodash_1.default.get(this.options, 'editors.ckeditor.src', `${Formio_1.Formio.cdn.ckeditor}/ckeditor.js`), true)\n            .then(() => {\n            if (!element.parentNode) {\n                return Promise.reject();\n            }\n            if (isIEBrowser) {\n                const editor = CKEDITOR.replace(element);\n                editor.on('change', () => onChange(editor.getData()));\n                return Promise.resolve(editor);\n            }\n            else {\n                return ClassicEditor.create(element, settings).then(editor => {\n                    editor.model.document.on('change', () => onChange(editor.data.get()));\n                    return editor;\n                });\n            }\n        });\n    }\n    addQuill(element, settings, onChange) {\n        settings = lodash_1.default.isEmpty(settings) ? this.wysiwygDefault.quill : settings;\n        settings = lodash_1.default.merge(this.wysiwygDefault.quill, lodash_1.default.get(this.options, 'editors.quill.settings', {}), settings);\n        settings = Object.assign(Object.assign({}, settings), { modules: Object.assign({ table: true }, settings.modules) });\n        // Lazy load the quill css.\n        Formio_1.Formio.requireLibrary(`quill-css-${settings.theme}`, 'Quill', [\n            { type: 'styles', src: `${Formio_1.Formio.cdn.quill}/quill.${settings.theme}.css` }\n        ], true);\n        // Lazy load the quill library.\n        return Formio_1.Formio.requireLibrary('quill', 'Quill', lodash_1.default.get(this.options, 'editors.quill.src', `${Formio_1.Formio.cdn.quill}/quill.min.js`), true)\n            .then(() => {\n            return Formio_1.Formio.requireLibrary('quill-table', 'Quill', `${Formio_1.Formio.cdn.baseUrl}/quill/quill-table.js`, true)\n                .then(() => {\n                if (!element.parentNode) {\n                    return Promise.reject();\n                }\n                this.quill = new Quill(element, isIEBrowser ? Object.assign(Object.assign({}, settings), { modules: {} }) : settings);\n                /** This block of code adds the [source] capabilities.  See https://codepen.io/anon/pen/ZyEjrQ */\n                const txtArea = document.createElement('textarea');\n                txtArea.setAttribute('class', 'quill-source-code');\n                this.quill.addContainer('ql-custom').appendChild(txtArea);\n                const qlSource = element.parentNode.querySelector('.ql-source');\n                if (qlSource) {\n                    this.addEventListener(qlSource, 'click', (event) => {\n                        event.preventDefault();\n                        if (txtArea.style.display === 'inherit') {\n                            this.quill.setContents(this.quill.clipboard.convert({ html: txtArea.value }));\n                        }\n                        txtArea.style.display = (txtArea.style.display === 'none') ? 'inherit' : 'none';\n                    });\n                }\n                /** END CODEBLOCK */\n                // Make sure to select cursor when they click on the element.\n                this.addEventListener(element, 'click', () => this.quill.focus());\n                // Allows users to skip toolbar items when tabbing though form\n                const elm = document.querySelectorAll('.ql-formats > button');\n                for (let i = 0; i < elm.length; i++) {\n                    elm[i].setAttribute('tabindex', '-1');\n                }\n                this.quill.on('text-change', () => {\n                    txtArea.value = this.quill.root.innerHTML;\n                    onChange(txtArea);\n                });\n                return this.quill;\n            });\n        });\n    }\n    get shouldSanitizeValue() {\n        var _a;\n        // Sanitize value if sanitizing for thw whole content is turned off\n        return (((_a = this.options) === null || _a === void 0 ? void 0 : _a.sanitize) !== false);\n    }\n    addAce(element, settings, onChange) {\n        if (!settings || (settings.theme === 'snow')) {\n            const mode = settings ? settings.mode : '';\n            settings = {};\n            if (mode) {\n                settings.mode = mode;\n            }\n        }\n        settings = lodash_1.default.merge(this.wysiwygDefault.ace, lodash_1.default.get(this.options, 'editors.ace.settings', {}), settings || {});\n        return Formio_1.Formio.requireLibrary('ace', 'ace', lodash_1.default.get(this.options, 'editors.ace.src', `${Formio_1.Formio.cdn.ace}/ace.js`), true)\n            .then((editor) => {\n            editor = editor.edit(element);\n            editor.removeAllListeners('change');\n            editor.setOptions(settings);\n            editor.getSession().setMode(settings.mode);\n            editor.on('change', () => onChange(editor.getValue()));\n            if (settings.isUseWorkerDisabled) {\n                editor.session.setUseWorker(false);\n            }\n            return editor;\n        });\n    }\n    get tree() {\n        return this.component.tree || false;\n    }\n    /**\n     * The empty value for this component.\n     * @returns {null} - The empty value for this component.\n     */\n    get emptyValue() {\n        return null;\n    }\n    /**\n     * Returns if this component has a value set.\n     * @param {any} data - The global data object.\n     * @returns {boolean} - TRUE if a value is set.\n     */\n    hasValue(data) {\n        return !lodash_1.default.isUndefined(lodash_1.default.get(data || this.data, this.key));\n    }\n    /**\n     * Get the data value at the root level.\n     * @returns {*} - The root value for the component, typically the Webform data object.\n     */\n    get rootValue() {\n        return this.root ? this.root.data : this.data;\n    }\n    get rootPristine() {\n        return lodash_1.default.get(this, 'root.pristine', false);\n    }\n    /**\n     * Get the static value of this component.\n     * @returns {*} - The value for this component.\n     */\n    get dataValue() {\n        if (!this.key ||\n            (this.conditionallyHidden && this.component.clearOnHide && !this.rootPristine)) {\n            return this.emptyValue;\n        }\n        if (!this.hasValue() && this.shouldAddDefaultValue) {\n            const empty = this.component.multiple ? [] : this.emptyValue;\n            if (!this.rootPristine) {\n                this.dataValue = empty;\n            }\n            return empty;\n        }\n        return lodash_1.default.get(this._data, this.key);\n    }\n    /**\n     * Sets the static value of this component.\n     * @param {*} value - The value to set for this component.\n     */\n    set dataValue(value) {\n        if (!this.allowData ||\n            !this.key ||\n            (this.conditionallyHidden && this.component.clearOnHide && !this.rootPristine)) {\n            return;\n        }\n        if ((value !== null) && (value !== undefined)) {\n            value = this.hook('setDataValue', value, this.key, this._data);\n        }\n        if ((value === null) || (value === undefined)) {\n            this.unset();\n            return;\n        }\n        lodash_1.default.set(this._data, this.key, value);\n        return;\n    }\n    /**\n     * Splice a value from the dataValue.\n     * @param {number} index - The index to splice for an array component values.\n     * @param {*} flags - The flags to use when splicing the value.\n     */\n    splice(index, flags = {}) {\n        if (this.hasValue()) {\n            const dataValue = this.dataValue || [];\n            if (lodash_1.default.isArray(dataValue) && dataValue.hasOwnProperty(index)) {\n                dataValue.splice(index, 1);\n                this.dataValue = dataValue;\n                this.triggerChange(flags);\n            }\n        }\n    }\n    unset() {\n        lodash_1.default.unset(this._data, this.key);\n    }\n    /**\n     * Deletes the value of the component.\n     */\n    deleteValue() {\n        this.setValue(null, {\n            noUpdateEvent: true,\n            noDefault: true\n        });\n        this.unset();\n    }\n    getCustomDefaultValue(defaultValue) {\n        if (this.component.customDefaultValue && !this.options.preview) {\n            defaultValue = this.evaluate(this.component.customDefaultValue, { value: '' }, 'value');\n        }\n        return defaultValue;\n    }\n    get shouldAddDefaultValue() {\n        return !this.options.noDefaults || (this.component.defaultValue && !this.isEmpty(this.component.defaultValue)) || this.component.customDefaultValue;\n    }\n    get defaultValue() {\n        let defaultValue = this.emptyValue;\n        if (this.component.defaultValue) {\n            defaultValue = this.component.defaultValue;\n        }\n        defaultValue = this.getCustomDefaultValue(defaultValue);\n        const checkMask = (value) => {\n            if (typeof value === 'string') {\n                if (this.component.type !== 'textfield') {\n                    const placeholderChar = this.placeholderChar;\n                    value = (0, vanilla_text_mask_1.conformToMask)(value, this.defaultMask, { placeholderChar }).conformedValue;\n                    if (!FormioUtils.matchInputMask(value, this.defaultMask)) {\n                        value = '';\n                    }\n                }\n            }\n            else {\n                value = '';\n            }\n            return value;\n        };\n        if (this.defaultMask) {\n            if (Array.isArray(defaultValue)) {\n                defaultValue = defaultValue.map(checkMask);\n            }\n            else {\n                defaultValue = checkMask(defaultValue);\n            }\n        }\n        // Clone so that it creates a new instance.\n        return lodash_1.default.cloneDeep(defaultValue);\n    }\n    /**\n     * Get the input value of this component.\n     * @returns {*} - The value for the component.\n     */\n    getValue() {\n        if (!this.hasInput || this.viewOnly || !this.refs.input || !this.refs.input.length) {\n            return this.dataValue;\n        }\n        const values = [];\n        for (const i in this.refs.input) {\n            if (this.refs.input.hasOwnProperty(i)) {\n                if (!this.component.multiple) {\n                    return this.getValueAt(i);\n                }\n                values.push(this.getValueAt(i));\n            }\n        }\n        if (values.length === 0 && !this.component.multiple) {\n            return '';\n        }\n        return values;\n    }\n    /**\n     * Get the value at a specific index.\n     * @param {number} index - For an array component or multiple values, this returns the value at a specific index.\n     * @returns {*} - The value at the specified index.\n     */\n    getValueAt(index) {\n        const input = this.performInputMapping(this.refs.input[index]);\n        return input ? input.value : undefined;\n    }\n    /**\n     * Set the value of this component.\n     * @param {*} value - The value to set for this component.\n     * @param {*} flags - The flags to use when setting the value.\n     * @returns {boolean} - If the value changed.\n     */\n    setValue(value, flags = {}) {\n        const changed = this.updateValue(value, flags);\n        value = this.dataValue;\n        if (!this.hasInput) {\n            return changed;\n        }\n        const isArray = Array.isArray(value);\n        const valueInput = this.refs.fileLink || this.refs.input;\n        if (isArray &&\n            Array.isArray(this.defaultValue) &&\n            this.refs.hasOwnProperty('input') &&\n            valueInput &&\n            (valueInput.length !== value.length) &&\n            this.visible) {\n            this.redraw();\n        }\n        if (this.isHtmlRenderMode() && flags && flags.fromSubmission && changed) {\n            this.redraw();\n            return changed;\n        }\n        for (const i in this.refs.input) {\n            if (this.refs.input.hasOwnProperty(i)) {\n                this.setValueAt(i, isArray && !this.isSingleInputValue() ? value[i] : value, flags);\n            }\n        }\n        return changed;\n    }\n    /**\n     * Returns if the value (e.g. array) should be divided between several inputs\n     * @returns {boolean}\n     */\n    isSingleInputValue() {\n        return false;\n    }\n    /**\n     * Set the value at a specific index.\n     * @param {number} index - The index to set the value at.\n     * @param {*} value - The value to set at the specified index.\n     * @param {*} flags - The flags to use when setting the value.\n     */\n    setValueAt(index, value, flags = {}) {\n        if (!flags.noDefault && (value === null || value === undefined) && !this.component.multiple) {\n            value = this.defaultValue;\n        }\n        const input = this.performInputMapping(this.refs.input[index]);\n        const valueMaskInput = this.refs.valueMaskInput;\n        if ((valueMaskInput === null || valueMaskInput === void 0 ? void 0 : valueMaskInput.mask) && valueMaskInput.mask.textMaskInputElement) {\n            valueMaskInput.mask.textMaskInputElement.update(value);\n        }\n        if (input.mask && input.mask.textMaskInputElement) {\n            input.mask.textMaskInputElement.update(value);\n        }\n        else if (input.widget && input.widget.setValue) {\n            input.widget.setValue(value);\n        }\n        else {\n            input.value = value;\n        }\n    }\n    get hasSetValue() {\n        return this.hasValue() && !this.isEmpty(this.dataValue);\n    }\n    setDefaultValue() {\n        if (this.defaultValue && this.shouldAddDefaultValue) {\n            const defaultValue = (this.component.multiple && !this.dataValue.length) ? [] : this.defaultValue;\n            this.setValue(defaultValue, {\n                noUpdateEvent: true\n            });\n        }\n    }\n    /**\n     * Restore the value of a control.\n     */\n    restoreValue() {\n        if (this.hasSetValue) {\n            this.setValue(this.dataValue, {\n                noUpdateEvent: true\n            });\n        }\n        else {\n            this.setDefaultValue();\n        }\n    }\n    /**\n     * Normalize values coming into updateValue.\n     * @param {*} value - The value to normalize before setting.\n     * @returns {*} - The normalized value.\n     */\n    normalizeValue(value) {\n        return value;\n    }\n    /**\n     * Update a value of this component.\n     * @param {*} value - The value to update.\n     * @param {*} flags - The flags to use when updating the value.\n     * @returns {boolean} - If the value changed.\n     */\n    updateComponentValue(value, flags = {}) {\n        let newValue = (!flags.resetValue && (value === undefined || value === null)) ? this.getValue() : value;\n        newValue = this.normalizeValue(newValue, flags);\n        const oldValue = this.dataValue;\n        let changed = ((newValue !== undefined) ? this.hasChanged(newValue, oldValue) : false);\n        if (changed) {\n            this.dataValue = newValue;\n            changed = this.dataValue !== oldValue;\n            this.updateOnChange(flags, changed);\n        }\n        if (this.componentModal && flags && flags.fromSubmission) {\n            this.componentModal.setValue(value);\n        }\n        return changed;\n    }\n    /**\n     * Updates the value of this component plus all sub-components.\n     * @param {...any} args - The arguments to pass to updateValue.\n     * @returns {boolean} - If the value changed.\n     */\n    updateValue(...args) {\n        return this.updateComponentValue(...args);\n    }\n    getIcon(name, content, styles, ref = 'icon') {\n        return this.renderTemplate('icon', {\n            className: this.iconClass(name),\n            ref,\n            styles,\n            content\n        });\n    }\n    /**\n     * Resets the value of this component.\n     */\n    resetValue() {\n        this.unset();\n        this.setValue(this.defaultValue || this.emptyValue, {\n            noUpdateEvent: true,\n            noValidate: true,\n            resetValue: true\n        });\n    }\n    /**\n     * Determine if the value of this component has changed.\n     * @param {*} newValue - The new value to check.\n     * @param {*} oldValue - The existing value of the component.\n     * @returns {boolean} - TRUE if the value has changed.\n     */\n    hasChanged(newValue, oldValue) {\n        if (((newValue === undefined) || (newValue === null)) &&\n            ((oldValue === undefined) || (oldValue === null) || this.isEmpty(oldValue))) {\n            return false;\n        }\n        // If we do not have a value and are getting set to anything other than undefined or null, then we changed.\n        if (newValue !== undefined &&\n            newValue !== null &&\n            this.allowData &&\n            !this.hasValue()) {\n            return true;\n        }\n        return !lodash_1.default.isEqual(newValue, oldValue);\n    }\n    /**\n     * Update the value on change.\n     * @param {*} flags - The flags to use when triggering the on change event.\n     * @param {boolean} changed - If the value has changed.\n     * @returns {boolean} - If the value changed.\n     */\n    updateOnChange(flags = {}, changed = false) {\n        if (!flags.noUpdateEvent && changed) {\n            if (flags.fromSubmission) {\n                // Reset the errors when a submission has been made and allow it to revalidate.\n                this._errors = [];\n            }\n            this.triggerChange(flags);\n            return true;\n        }\n        return false;\n    }\n    convertNumberOrBoolToString(value) {\n        if (typeof value === 'number' || typeof value === 'boolean') {\n            return value.toString();\n        }\n        return value;\n    }\n    doValueCalculation(dataValue, data, row) {\n        var _a;\n        return this.evaluate(this.component.calculateValue, {\n            value: dataValue,\n            data,\n            row: row || this.data,\n            submission: ((_a = this.root) === null || _a === void 0 ? void 0 : _a._submission) || {\n                data: this.rootValue\n            }\n        }, 'value');\n    }\n    /* eslint-disable max-statements */\n    calculateComponentValue(data, flags, row) {\n        // Skip value calculation for the component if we don't have entire form data set or in builder mode\n        if (this.builderMode || lodash_1.default.isUndefined(lodash_1.default.get(this, 'root.data'))) {\n            return false;\n        }\n        // If no calculated value or\n        // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)\n        const { clearOnHide } = this.component;\n        const shouldBeCleared = this.conditionallyHidden && clearOnHide;\n        const allowOverride = lodash_1.default.get(this.component, 'allowCalculateOverride', false);\n        if (shouldBeCleared) {\n            // remove calculated value so that the value is recalculated once component becomes visible\n            if (this.hasOwnProperty('calculatedValue') && allowOverride) {\n                lodash_1.default.unset(this, 'calculatedValue');\n            }\n            return false;\n        }\n        // Handle all cases when calculated values should not fire.\n        if ((this.options.readOnly && !this.options.pdf && !this.component.calculateValue) ||\n            !(this.component.calculateValue || this.component.calculateValueVariable) ||\n            (this.options.server && !this.component.calculateServer) ||\n            (flags.dataSourceInitialLoading && allowOverride)) {\n            return false;\n        }\n        const dataValue = this.dataValue;\n        // Calculate the new value.\n        let calculatedValue = this.doValueCalculation(dataValue, data, row, flags);\n        if (this.options.readOnly && dataValue && !calculatedValue) {\n            return false;\n        }\n        if (lodash_1.default.isNil(calculatedValue)) {\n            calculatedValue = this.emptyValue;\n        }\n        const changed = !lodash_1.default.isEqual(dataValue, calculatedValue);\n        // Do not override calculations on server if they have calculateServer set.\n        if (allowOverride) {\n            // The value is considered locked if it is not empty and comes from a submission value.\n            const fromSubmission = (flags.fromSubmission && this.component.persistent === true);\n            if (this.isEmpty(dataValue)) {\n                // Reset the calculation lock if ever the data is cleared.\n                this.calculationLocked = false;\n            }\n            else if (this.calculationLocked || fromSubmission) {\n                this.calculationLocked = true;\n                return false;\n            }\n            const firstPass = (this.calculatedValue === undefined) || flags.resetValue;\n            if (firstPass) {\n                this.calculatedValue = null;\n            }\n            const newCalculatedValue = this.normalizeValue(this.convertNumberOrBoolToString(calculatedValue));\n            const previousCalculatedValue = this.normalizeValue(this.convertNumberOrBoolToString(this.calculatedValue));\n            const normalizedDataValue = this.normalizeValue(this.convertNumberOrBoolToString(dataValue));\n            const calculationChanged = !lodash_1.default.isEqual(previousCalculatedValue, newCalculatedValue);\n            const previousChanged = !lodash_1.default.isEqual(normalizedDataValue, previousCalculatedValue);\n            if (calculationChanged && previousChanged && !firstPass) {\n                return false;\n            }\n            // Check to ensure that the calculated value is different than the previously calculated value.\n            if (previousCalculatedValue && previousChanged && !calculationChanged) {\n                this.calculatedValue = null;\n                return false;\n            }\n            if (flags.isReordered || !calculationChanged) {\n                return false;\n            }\n            if (fromSubmission) {\n                // If we set value from submission and it differs from calculated one, set the calculated value to prevent overriding dataValue in the next pass\n                this.calculatedValue = (0, utils_1.fastCloneDeep)(calculatedValue);\n                return false;\n            }\n            // If this is the firstPass, and the dataValue is different than to the calculatedValue.\n            if (firstPass && !this.isEmpty(dataValue) && changed && calculationChanged) {\n                // Return that we have a change so it will perform another pass.\n                return true;\n            }\n        }\n        this.calculatedValue = (0, utils_1.fastCloneDeep)(calculatedValue);\n        if (changed) {\n            if (!flags.noPristineChangeOnModified && this.root.initialized) {\n                this.pristine = false;\n            }\n            flags.triggeredComponentId = this.id;\n            return this.setValue(calculatedValue, flags);\n        }\n        return false;\n    }\n    /* eslint-enable max-statements */\n    /**\n     * Performs calculations in this component plus any child components.\n     * @param {*} data - The data to perform the calculation with.\n     * @param {*} flags - The flags to use when calculating the value.\n     * @param {*} row - The contextual row data to use when performing the calculation.\n     * @returns {boolean} - TRUE if the value changed.\n     */\n    calculateValue(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        return this.calculateComponentValue(data, flags, row);\n    }\n    /**\n     * Get this component's label text.\n     * @returns {string} - The label text for this component.\n     */\n    get label() {\n        return this.component.label;\n    }\n    /**\n     * Set this component's label text and render it.\n     * @param {string} value - The new label text.\n     */\n    set label(value) {\n        this.component.label = value;\n        if (this.labelElement) {\n            this.labelElement.innerText = value;\n        }\n    }\n    /**\n     * Get FormioForm element at the root of this component tree.\n     * @returns {*} root - The root component to search from.\n     */\n    getRoot() {\n        return this.root;\n    }\n    /**\n     * Returns the invalid message, or empty string if the component is valid.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {boolean} ignoreCondition - If conditions for the component should be ignored when checking validity.\n     * @param {*} row - Contextual row data for this component.\n     * @returns {string} - The message to show when the component is invalid.\n     */\n    invalidMessage(data, dirty, ignoreCondition, row) {\n        var _a;\n        if (!row) {\n            row = (0, utils_1.getContextualRowData)(this.component, data, this.paths);\n        }\n        if (!ignoreCondition && !this.checkCondition(row, data)) {\n            return '';\n        }\n        // See if this is forced invalid.\n        if (this.invalid) {\n            return this.invalid;\n        }\n        // No need to check for errors if there is no input or if it is pristine.\n        if (!this.hasInput || (!dirty && this.pristine)) {\n            return '';\n        }\n        const validationScope = { errors: [] };\n        (0, process_1.processOneSync)({\n            component: this.component,\n            data,\n            row,\n            path: this.path || this.component.key,\n            parent: (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component,\n            paths: this.paths,\n            scope: validationScope,\n            instance: this,\n            processors: [\n                process_1.validateProcessInfo\n            ]\n        });\n        const errors = validationScope.errors;\n        const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));\n        return lodash_1.default.map(interpolatedErrors, 'message').join('\\n\\n');\n    }\n    /**\n     * Returns if the component is valid or not.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    isValid(data, dirty) {\n        return !this.invalidMessage(data, dirty);\n    }\n    setComponentValidity(errors, dirty, silentCheck) {\n        if (silentCheck) {\n            return [];\n        }\n        const messages = errors.filter(message => !message.fromServer);\n        if (errors.length && !!messages.length && (!this.isEmpty(this.defaultValue) || dirty || !this.pristine)) {\n            return this.setCustomValidity(messages, dirty);\n        }\n        else {\n            return this.setCustomValidity('');\n        }\n    }\n    /**\n     * Interpolate errors from the validation methods.\n     * @param {Array<any>} errors - An array of errors to interpolate.\n     * @returns {Array<any>} - The interpolated errors.\n     */\n    interpolateErrors(errors) {\n        var _a;\n        const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));\n        return ((_a = this.serverErrors) === null || _a === void 0 ? void 0 : _a.length) ? [...interpolatedErrors, ...this.serverErrors] : interpolatedErrors;\n    }\n    /**\n     * Show component validation errors.\n     * @param {*} errors - An array of errors that have occured.\n     * @param {*} data - The root submission data.\n     * @param {*} row - The contextual row data.\n     * @param {*} flags - The flags to perform validation.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    showValidationErrors(errors, data, row, flags) {\n        if (flags.silentCheck) {\n            return [];\n        }\n        let isDirty = (flags.dirty === false) ? false : (this.dirty || flags.dirty);\n        if (this.options.alwaysDirty) {\n            isDirty = true;\n        }\n        this.setDirty(isDirty);\n        return this.setComponentValidity(errors, isDirty, flags.silentCheck, flags.fromSubmission);\n    }\n    /**\n     * Perform a component validation.\n     * @param {*} data - The root data you wish to use for this component.\n     * @param {*} row - The contextual row data you wish to use for this component.\n     * @param {*} flags - The flags to control the behavior of the validation.\n     * @returns {Array<any>} - An array of errors if the component is invalid.\n     */\n    validateComponent(data = null, row = null, flags = {}) {\n        var _a;\n        data = data || this.rootValue;\n        row = row || this.data;\n        const { async = false } = flags;\n        if (this.shouldSkipValidation(data, row, flags)) {\n            return async ? Promise.resolve([]) : [];\n        }\n        const processContext = {\n            component: this.component,\n            data,\n            row,\n            local: !!flags.local,\n            value: this.validationValue,\n            parent: (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component,\n            paths: this.paths,\n            path: this.path || this.component.key,\n            instance: this,\n            form: this.root ? this.root._form : {},\n            scope: { errors: [] },\n            processors: [\n                process_1.validateProcessInfo\n            ]\n        };\n        if (async) {\n            return (0, process_1.processOne)(processContext).then(() => {\n                this._errors = this.interpolateErrors(processContext.scope.errors);\n                return this._errors;\n            });\n        }\n        (0, process_1.processOneSync)(processContext);\n        this._errors = this.interpolateErrors(processContext.scope.errors);\n        return this._errors;\n    }\n    /**\n     * Checks the validity of this component and sets the error message if it is invalid.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {*} row - The contextual row data for this component.\n     * @param {*} flags - The flags to use when checking the validity.\n     * @param {Array<any>} allErrors - An array of all errors that have occured so that it can be appended when another one occurs here.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    checkComponentValidity(data = null, dirty = false, row = null, flags = {}, allErrors = []) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        flags.dirty = dirty || false;\n        if (flags.async) {\n            return this.validateComponent(data, row, flags).then((errors) => {\n                allErrors.push(...errors);\n                if (this.parent && this.parent.childErrors) {\n                    if (errors.length) {\n                        this.parent.childErrors.push(...errors);\n                    }\n                    else {\n                        lodash_1.default.remove(this.parent.childErrors, (err) => { var _a, _b; return (((_a = err === null || err === void 0 ? void 0 : err.component) === null || _a === void 0 ? void 0 : _a.key) || ((_b = err === null || err === void 0 ? void 0 : err.context) === null || _b === void 0 ? void 0 : _b.key)) === this.component.key; });\n                    }\n                }\n                this.showValidationErrors(errors, data, row, flags);\n                return errors.length === 0;\n            });\n        }\n        else {\n            const errors = this.validateComponent(data, row, flags);\n            this.showValidationErrors(errors, data, row, flags);\n            allErrors.push(...errors);\n            if (this.parent && this.parent.childErrors) {\n                if (errors.length) {\n                    this.parent.childErrors.push(...errors);\n                }\n                else {\n                    lodash_1.default.remove(this.parent.childErrors, (err) => { var _a, _b; return (((_a = err === null || err === void 0 ? void 0 : err.component) === null || _a === void 0 ? void 0 : _a.key) || ((_b = err === null || err === void 0 ? void 0 : err.context) === null || _b === void 0 ? void 0 : _b.key)) === this.component.key; });\n                }\n            }\n            return errors.length === 0;\n        }\n    }\n    /**\n     * Checks the validity of the component.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {*} row - The contextual row data for this component.\n     * @param {boolean} silentCheck - If the check should be silent and not set the error messages.\n     * @param {Array<any>} errors - An array of all errors that have occured so that it can be appended when another one occurs here.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    checkValidity(data = null, dirty = false, row = null, silentCheck = false, errors = []) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        return this.checkComponentValidity(data, dirty, row, { silentCheck }, errors);\n    }\n    checkAsyncValidity(data = null, dirty = false, row = null, silentCheck = false, errors = []) {\n        return this.checkComponentValidity(data, dirty, row, { async: true, silentCheck }, errors);\n    }\n    /**\n     * Check the conditions, calculations, and validity of a single component and triggers an update if\n     * something changed.\n     * @param {*} data - The root data of the change event.\n     * @param {*} flags - The flags from this change event.\n     * @param {*} row - The contextual row data for this component.\n     * @returns {void|boolean} - TRUE if no check should be performed on the component.\n     */\n    checkData(data = null, flags = null, row = null) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        // Needs for Nextgen Rules Engine\n        this.resetCaches();\n        // Do not trigger refresh if change was triggered on blur event since components with Refresh on Blur have their own listeners\n        if (!flags.fromBlur) {\n            this.checkRefreshOn(flags.changes, flags);\n        }\n        if (flags.noCheck) {\n            return true;\n        }\n        this.checkComponentConditions(data, flags, row);\n        if (this.id !== flags.triggeredComponentId) {\n            this.calculateComponentValue(data, flags, row);\n        }\n    }\n    checkModal(errors = [], dirty = false) {\n        const messages = errors.filter(error => !error.fromServer);\n        const isValid = errors.length === 0;\n        if (!this.component.modalEdit || !this.componentModal) {\n            return;\n        }\n        if (dirty && !isValid) {\n            this.setErrorClasses([this.refs.openModal], dirty, !isValid, !!messages.length, this.refs.openModalWrapper);\n        }\n        else {\n            this.clearErrorClasses(this.refs.openModalWrapper);\n        }\n    }\n    get validationValue() {\n        return this.dataValue;\n    }\n    isEmpty(value = this.dataValue) {\n        const isEmptyArray = (lodash_1.default.isArray(value) && value.length === 1) ? lodash_1.default.isEqual(value[0], this.emptyValue) : false;\n        return value == null || value.length === 0 || lodash_1.default.isEqual(value, this.emptyValue) || isEmptyArray;\n    }\n    isEqual(valueA, valueB = this.dataValue) {\n        return (this.isEmpty(valueA) && this.isEmpty(valueB)) || lodash_1.default.isEqual(valueA, valueB);\n    }\n    /**\n     * Check if a component is eligible for multiple validation\n     * @returns {boolean} - TRUE if the component is eligible for multiple validation.\n     */\n    validateMultiple() {\n        return true;\n    }\n    clearErrorClasses(element = this.element) {\n        this.removeClass(element, this.options.componentErrorClass);\n        this.removeClass(element, 'alert alert-danger');\n        this.removeClass(element, 'has-error');\n        this.removeClass(element, 'has-message');\n    }\n    setInputWidgetErrorClasses(inputRefs, hasErrors) {\n        if (!this.isInputComponent || !this.component.widget || !(inputRefs === null || inputRefs === void 0 ? void 0 : inputRefs.length)) {\n            return;\n        }\n        inputRefs.forEach((input) => {\n            if ((input === null || input === void 0 ? void 0 : input.widget) && input.widget.setErrorClasses) {\n                input.widget.setErrorClasses(hasErrors);\n            }\n        });\n    }\n    addFocusBlurEvents(element) {\n        this.addEventListener(element, 'focus', () => {\n            if (this.root.focusedComponent !== this) {\n                if (this.root.pendingBlur) {\n                    this.root.pendingBlur();\n                }\n                this.root.focusedComponent = this;\n                this.emit('focus', this);\n            }\n            else if (this.root.focusedComponent === this && this.root.pendingBlur) {\n                this.root.pendingBlur.cancel();\n                this.root.pendingBlur = null;\n            }\n        });\n        this.addEventListener(element, 'blur', () => {\n            this.root.pendingBlur = FormioUtils.delay(() => {\n                this.emit('blur', this);\n                if (this.component.validateOn === 'blur') {\n                    this.root.triggerChange({ fromBlur: true }, {\n                        instance: this,\n                        component: this.component,\n                        value: this.dataValue,\n                        flags: { fromBlur: true }\n                    });\n                }\n                this.root.focusedComponent = null;\n                this.root.pendingBlur = null;\n            });\n        });\n    }\n    // eslint-disable-next-line max-statements\n    setCustomValidity(messages, dirty, external) {\n        const inputRefs = this.isInputComponent ? this.refs.input || [] : null;\n        if (typeof messages === 'string' && messages) {\n            messages = {\n                level: 'error',\n                message: messages,\n                component: this.component,\n            };\n        }\n        if (!Array.isArray(messages)) {\n            if (messages) {\n                messages = [messages];\n            }\n            else {\n                messages = [];\n            }\n        }\n        const errors = messages.filter(message => message.level === 'error');\n        let invalidInputRefs = inputRefs;\n        // Filter the invalid input refs in multiple components\n        if (this.component.multiple) {\n            const refsArray = Array.from(inputRefs);\n            refsArray.forEach((input) => {\n                this.setElementInvalid(this.performInputMapping(input), false);\n            });\n            this.setInputWidgetErrorClasses(refsArray, false);\n            invalidInputRefs = refsArray.filter((ref, index) => {\n                var _a;\n                return (_a = messages.some) === null || _a === void 0 ? void 0 : _a.call(messages, (msg) => {\n                    var _a;\n                    return ((_a = msg === null || msg === void 0 ? void 0 : msg.context) === null || _a === void 0 ? void 0 : _a.index) === index;\n                });\n            });\n        }\n        if (messages.length) {\n            if (this.refs.messageContainer) {\n                this.empty(this.refs.messageContainer);\n            }\n            this.emit('componentError', {\n                instance: this,\n                component: this.component,\n                message: messages[0].message,\n                messages,\n                external: !!external,\n            });\n            this.addMessages(messages, dirty, invalidInputRefs);\n            if (invalidInputRefs) {\n                this.setErrorClasses(invalidInputRefs, dirty, !!errors.length, !!messages.length);\n            }\n        }\n        else if (!errors.length || (errors[0].external === !!external)) {\n            if (this.refs.messageContainer) {\n                this.empty(this.refs.messageContainer);\n            }\n            if (this.refs.modalMessageContainer) {\n                this.empty(this.refs.modalMessageContainer);\n            }\n            if (invalidInputRefs) {\n                this.setErrorClasses(invalidInputRefs, dirty, !!errors.length, !!messages.length);\n            }\n            this.clearErrorClasses();\n        }\n        this._visibleErrors = messages;\n        return messages;\n    }\n    /**\n     * Determines if the value of this component is hidden from the user as if it is coming from the server, but is\n     * protected.\n     * @returns {boolean|*} - TRUE if the value is hidden.\n     */\n    isValueHidden() {\n        if (this.component.protected && this.root.editing) {\n            return false;\n        }\n        if (!this.root || !this.root.hasOwnProperty('editing')) {\n            return false;\n        }\n        if (!this.root || !this.root.editing) {\n            return false;\n        }\n        return (this.component.protected || !this.component.persistent || (this.component.persistent === 'client-only'));\n    }\n    shouldSkipValidation(data, row, flags = {}) {\n        const rules = [\n            // Do not validate if the flags say not too.\n            () => flags.noValidate,\n            // Force valid if component is read-only\n            () => this.options.readOnly,\n            // Do not check validations if component is not an input component.\n            () => !this.hasInput,\n            // Check to see if we are editing and if so, check component persistence.\n            () => this.isValueHidden(),\n            // Force valid if component is hidden.\n            () => {\n                if (!this.component.validateWhenHidden && (!this.visible || !this.checkCondition(row, data))) {\n                    // If this component is forced valid when it is hidden, then we also need to reset the errors for this component.\n                    this._errors = [];\n                    return true;\n                }\n                return false;\n            }\n        ];\n        return rules.some(pred => pred());\n    }\n    // Maintain reverse compatibility.\n    whenReady() {\n        console.warn('The whenReady() method has been deprecated. Please use the dataReady property instead.');\n        return this.dataReady;\n    }\n    get dataReady() {\n        return Promise.resolve();\n    }\n    /**\n     * Prints out the value of this component as a string value.\n     * @param {*} value - The value to print out.\n     * @returns {string} - The string representation of the value.\n     */\n    asString(value) {\n        value = value || this.getValue();\n        return (Array.isArray(value) ? value : [value]).map(lodash_1.default.toString).join(', ');\n    }\n    /**\n     * Return if the component is disabled.\n     * @returns {boolean} - TRUE if the component is disabled.\n     */\n    get disabled() {\n        return this._disabled || this.parentDisabled;\n    }\n    /**\n     * Disable this component.\n     * @param {boolean} disabled - TRUE to disable the component.\n     */\n    set disabled(disabled) {\n        this._disabled = disabled;\n    }\n    setDisabled(element, disabled) {\n        if (!element) {\n            return;\n        }\n        element.disabled = disabled;\n        if (disabled) {\n            element.setAttribute('disabled', 'disabled');\n        }\n        else {\n            element.removeAttribute('disabled');\n        }\n    }\n    setLoading(element, loading) {\n        if (!element || (element.loading === loading)) {\n            return;\n        }\n        element.loading = loading;\n        if (!element.loader && loading) {\n            element.loader = this.ce('i', {\n                class: `${this.iconClass('refresh', true)} button-icon-right`\n            });\n        }\n        if (element.loader) {\n            if (loading) {\n                this.appendTo(element.loader, element);\n            }\n            else {\n                this.removeChildFrom(element.loader, element);\n            }\n        }\n    }\n    selectOptions(select, tag, options, defaultValue) {\n        lodash_1.default.each(options, (option) => {\n            const attrs = {\n                value: option.value\n            };\n            if (defaultValue !== undefined && (option.value === defaultValue)) {\n                attrs.selected = 'selected';\n            }\n            const optionElement = this.ce('option', attrs);\n            optionElement.appendChild(this.text(option.label));\n            select.appendChild(optionElement);\n        });\n    }\n    setSelectValue(select, value) {\n        const options = select.querySelectorAll('option');\n        lodash_1.default.each(options, (option) => {\n            if (option.value === value) {\n                option.setAttribute('selected', 'selected');\n            }\n            else {\n                option.removeAttribute('selected');\n            }\n        });\n        if (select.onchange) {\n            select.onchange();\n        }\n        if (select.onselect) {\n            select.onselect();\n        }\n    }\n    getRelativePath(path) {\n        const keyPart = `.${this.key}`;\n        const thisPath = this.isInputComponent ? this.path\n            : this.path.slice(0).replace(keyPart, '');\n        return path.replace(thisPath, '');\n    }\n    clear() {\n        this.detach();\n        this.empty(this.getElement());\n    }\n    append(element) {\n        this.appendTo(element, this.element);\n    }\n    prepend(element) {\n        this.prependTo(element, this.element);\n    }\n    removeChild(element) {\n        this.removeChildFrom(element, this.element);\n    }\n    detachLogic() {\n        this.logic.forEach(logic => {\n            if (logic.trigger.type === 'event') {\n                const event = this.interpolate(logic.trigger.event);\n                this.off(event); // only applies to callbacks on this component\n            }\n        });\n    }\n    attachLogic() {\n        // Do not attach logic during builder mode.\n        if (this.builderMode) {\n            return;\n        }\n        this.logic.forEach((logic) => {\n            if (logic.trigger.type === 'event') {\n                const event = this.interpolate(logic.trigger.event);\n                this.on(event, (...args) => {\n                    const newComponent = (0, utils_1.fastCloneDeep)(this.originalComponent);\n                    if (this.applyActions(newComponent, logic.actions, args)) {\n                        // If component definition changed, replace it.\n                        if (!lodash_1.default.isEqual(this.component, newComponent)) {\n                            this.component = newComponent;\n                            const visible = this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden;\n                            const disabled = this.shouldDisabled;\n                            // Change states which won't be recalculated during redrawing\n                            if (this.visible !== visible) {\n                                this.visible = visible;\n                            }\n                            if (this.disabled !== disabled) {\n                                this.disabled = disabled;\n                            }\n                            this.redraw();\n                        }\n                    }\n                }, true);\n            }\n        });\n    }\n    /**\n     * Get the element information.\n     * @returns {*} - The components \"input\" DOM element information.\n     */\n    elementInfo() {\n        const attributes = {\n            name: this.options.name,\n            type: this.component.inputType || 'text',\n            class: 'form-control',\n            lang: this.options.language\n        };\n        if (this.component.placeholder) {\n            attributes.placeholder = this.t(this.component.placeholder, { _userInput: true });\n        }\n        if (this.component.tabindex) {\n            attributes.tabindex = this.component.tabindex;\n        }\n        if (this.disabled) {\n            attributes.disabled = 'disabled';\n        }\n        lodash_1.default.defaults(attributes, this.component.attributes);\n        return {\n            type: 'input',\n            component: this.component,\n            changeEvent: 'change',\n            attr: attributes\n        };\n    }\n    autofocus() {\n        const hasAutofocus = this.component.autofocus && !this.builderMode && !this.options.preview;\n        if (hasAutofocus) {\n            this.on('render', () => this.focus(), true);\n        }\n    }\n    scrollIntoView(element = this.element, verticalOnly) {\n        if (!element) {\n            return;\n        }\n        const { left, top } = element.getBoundingClientRect();\n        window.scrollTo(verticalOnly ? window.scrollX : left + window.scrollX, top + window.scrollY);\n    }\n    focus(index) {\n        var _a, _b, _c, _d;\n        if ('beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n        if (!index && !lodash_1.default.isNumber(index) && ((_b = (_a = this.refs) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.length)) {\n            index = this.refs.input.length - 1;\n        }\n        if ((_c = this.refs.input) === null || _c === void 0 ? void 0 : _c.length) {\n            const focusingInput = this.refs.input[index];\n            if (((_d = this.component.widget) === null || _d === void 0 ? void 0 : _d.type) === 'calendar') {\n                const sibling = focusingInput.nextSibling;\n                if (sibling) {\n                    sibling.focus();\n                }\n            }\n            else {\n                focusingInput.focus();\n            }\n        }\n        if (this.refs.openModal) {\n            this.refs.openModal.focus();\n        }\n        if (this.parent.refs.openModal) {\n            this.parent.refs.openModal.focus();\n        }\n    }\n    /**\n     * Get `Formio` instance for working with files\n     * @returns {import('@formio/core').Formio} - The Formio instance file service.\n     */\n    get fileService() {\n        if (this.options.fileService) {\n            return this.options.fileService;\n        }\n        if (this.options.formio) {\n            return this.options.formio;\n        }\n        if (this.root && this.root.formio) {\n            return this.root.formio;\n        }\n        const formio = new Formio_1.Formio();\n        // If a form is loaded, then make sure to set the correct formUrl.\n        if (this.root && this.root._form && this.root._form._id) {\n            formio.formUrl = `${formio.projectUrl}/form/${this.root._form._id}`;\n        }\n        return formio;\n    }\n    resetCaches() { }\n    get previewMode() {\n        return false;\n    }\n}\nexports[\"default\"] = Component;\nComponent.externalLibraries = {};\nComponent.requireLibrary = function (name, property, src, polling) {\n    if (!Component.externalLibraries.hasOwnProperty(name)) {\n        Component.externalLibraries[name] = {};\n        Component.externalLibraries[name].ready = new Promise((resolve, reject) => {\n            Component.externalLibraries[name].resolve = resolve;\n            Component.externalLibraries[name].reject = reject;\n        });\n        const callbackName = `${name}Callback`;\n        if (!polling && !window[callbackName]) {\n            window[callbackName] = function () {\n                this.resolve();\n            }.bind(Component.externalLibraries[name]);\n        }\n        // See if the plugin already exists.\n        const plugin = (0, utils_1.getScriptPlugin)(property);\n        if (plugin) {\n            Component.externalLibraries[name].resolve(plugin);\n        }\n        else {\n            src = Array.isArray(src) ? src : [src];\n            src.forEach((lib) => {\n                let attrs = {};\n                let elementType = '';\n                if (typeof lib === 'string') {\n                    lib = {\n                        type: 'script',\n                        src: lib\n                    };\n                }\n                switch (lib.type) {\n                    case 'script':\n                        elementType = 'script';\n                        attrs = {\n                            src: lib.src,\n                            type: 'text/javascript',\n                            defer: true,\n                            async: true\n                        };\n                        break;\n                    case 'styles':\n                        elementType = 'link';\n                        attrs = {\n                            href: lib.src,\n                            rel: 'stylesheet'\n                        };\n                        break;\n                }\n                // Add the script to the top page.\n                const script = document.createElement(elementType);\n                for (const attr in attrs) {\n                    script.setAttribute(attr, attrs[attr]);\n                }\n                document.getElementsByTagName('head')[0].appendChild(script);\n            });\n            // if no callback is provided, then check periodically for the script.\n            if (polling) {\n                setTimeout(function checkLibrary() {\n                    const plugin = (0, utils_1.getScriptPlugin)(property);\n                    if (plugin) {\n                        Component.externalLibraries[name].resolve(plugin);\n                    }\n                    else {\n                        // check again after 200 ms.\n                        setTimeout(checkLibrary, 200);\n                    }\n                }, 200);\n            }\n        }\n    }\n    return Component.externalLibraries[name].ready;\n};\nComponent.libraryReady = function (name) {\n    if (Component.externalLibraries.hasOwnProperty(name) &&\n        Component.externalLibraries[name].ready) {\n        return Component.externalLibraries[name].ready;\n    }\n    return Promise.reject(`${name} library was not required.`);\n};\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/component/Component.js?");
+eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n/* globals Quill, ClassicEditor, CKEDITOR */\nconst vanilla_text_mask_1 = __webpack_require__(/*! @formio/vanilla-text-mask */ \"./node_modules/@formio/vanilla-text-mask/dist/vanillaTextMask.js\");\nconst tippy_js_1 = __importDefault(__webpack_require__(/*! tippy.js */ \"./node_modules/tippy.js/dist/tippy.esm.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst ismobilejs_1 = __importDefault(__webpack_require__(/*! ismobilejs */ \"./node_modules/ismobilejs/esm/index.js\"));\nconst process_1 = __webpack_require__(/*! @formio/core/process */ \"./node_modules/@formio/core/lib/process/index.js\");\nconst Formio_1 = __webpack_require__(/*! ../../../Formio */ \"./lib/cjs/Formio.js\");\nconst FormioUtils = __importStar(__webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\"));\nconst utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Element_1 = __importDefault(__webpack_require__(/*! ../../../Element */ \"./lib/cjs/Element.js\"));\nconst ComponentModal_1 = __importDefault(__webpack_require__(/*! ../componentModal/ComponentModal */ \"./lib/cjs/components/_classes/componentModal/ComponentModal.js\"));\nconst widgets_1 = __importDefault(__webpack_require__(/*! ../../../widgets */ \"./lib/cjs/widgets/index.js\"));\nconst addons_1 = __importDefault(__webpack_require__(/*! ../../../addons */ \"./lib/cjs/addons/index.js\"));\nconst uploadAdapter_1 = __webpack_require__(/*! ../../../providers/storage/uploadAdapter */ \"./lib/cjs/providers/storage/uploadAdapter.js\");\nconst en_1 = __importDefault(__webpack_require__(/*! ../../../translations/en */ \"./lib/cjs/translations/en.js\"));\nconst Templates_1 = __importDefault(__webpack_require__(/*! ../../../templates/Templates */ \"./lib/cjs/templates/Templates.js\"));\nconst isIEBrowser = FormioUtils.getBrowserInfo().ie;\n/**\n * This is the Component class\n which all elements within the FormioForm derive from.\n */\nclass Component extends Element_1.default {\n    static schema(...sources) {\n        return lodash_1.default.merge({\n            /**\n             * Determines if this component provides an input.\n             */\n            input: true,\n            /**\n             * The data key for this component (how the data is stored in the database).\n             */\n            key: '',\n            /**\n             * The input placeholder for this component.\n             */\n            placeholder: '',\n            /**\n             * The input prefix\n             */\n            prefix: '',\n            /**\n             * The custom CSS class to provide to this component.\n             */\n            customClass: '',\n            /**\n             * The input suffix.\n             */\n            suffix: '',\n            /**\n             * If this component should allow an array of values to be captured.\n             */\n            multiple: false,\n            /**\n             * The default value of this component.\n             */\n            defaultValue: null,\n            /**\n             * If the data of this component should be protected (no GET api requests can see the data)\n             */\n            protected: false,\n            /**\n             * Validate if the value of this component should be unique within the form.\n             */\n            unique: false,\n            /**\n             * If the value of this component should be persisted within the backend api database.\n             */\n            persistent: true,\n            /**\n             * Determines if the component should be within the form, but not visible.\n             */\n            hidden: false,\n            /**\n             * If the component should be cleared when hidden.\n             */\n            clearOnHide: true,\n            /**\n             * This will refresh this component options when this field changes.\n             */\n            refreshOn: '',\n            /**\n             * This will redraw the component when this field changes.\n             */\n            redrawOn: '',\n            /**\n             * If this component should be included as a column within a submission table.\n             */\n            tableView: false,\n            /**\n             * If this component should be rendering in modal.\n             */\n            modalEdit: false,\n            /**\n             * The input label provided to this component.\n             */\n            label: '',\n            dataGridLabel: false,\n            labelPosition: 'top',\n            description: '',\n            errorLabel: '',\n            tooltip: '',\n            hideLabel: false,\n            tabindex: '',\n            disabled: false,\n            autofocus: false,\n            dbIndex: false,\n            customDefaultValue: '',\n            calculateValue: '',\n            calculateServer: false,\n            widget: null,\n            /**\n             * Attributes that will be assigned to the input elements of this component.\n             */\n            attributes: {},\n            /**\n             * This will perform the validation on either \"change\" or \"blur\" of the input element.\n             */\n            validateOn: 'change',\n            /**\n             * The validation criteria for this component.\n             */\n            validate: {\n                /**\n                 * If this component is required.\n                 */\n                required: false,\n                /**\n                 * Custom JavaScript validation.\n                 */\n                custom: '',\n                /**\n                 * If the custom validation should remain private (only the backend will see it and execute it).\n                 */\n                customPrivate: false,\n                /**\n                 * If this component should implement a strict date validation if the Calendar widget is implemented.\n                 */\n                strictDateValidation: false,\n                multiple: false,\n                unique: false\n            },\n            /**\n             * The simple conditional settings for a component.\n             */\n            conditional: {\n                show: null,\n                when: null,\n                eq: ''\n            },\n            overlay: {\n                style: '',\n                left: '',\n                top: '',\n                width: '',\n                height: '',\n            },\n            allowCalculateOverride: false,\n            encrypted: false,\n            showCharCount: false,\n            showWordCount: false,\n            properties: {},\n            allowMultipleMasks: false,\n            addons: [],\n        }, ...sources);\n    }\n    /**\n     * Return the simple condition settings as part of the component.\n     * @returns {object} - The simple conditional settings.\n     */\n    static get conditionOperatorsSettings() {\n        return {\n            operators: ['isEqual', 'isNotEqual', 'isEmpty', 'isNotEmpty'],\n            valueComponent() {\n                return {\n                    type: 'textfield',\n                    widget: {\n                        type: 'input'\n                    }\n                };\n            }\n        };\n    }\n    /**\n     * Return the array of possible types of component value absed on its schema.\n     * @param schema\n     * @returns {Array}\n     */\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return FormioUtils.getComponentSavedTypes(schema) || [FormioUtils.componentValueTypes.any];\n    }\n    /**\n     * Provides a table view for this component. Override if you wish to do something different than using getView\n     * method of your instance.\n     * @param value\n     * @param options\n     */\n    /* eslint-disable no-unused-vars */\n    static tableView(value, options) { }\n    /* eslint-enable no-unused-vars */\n    /**\n     * Initialize a new Component.\n     * @param {object} component - The component JSON you wish to initialize.\n     * @param {object} options - The options for this component.\n     * @param {object} data - The global data submission object this component will belong.\n     */\n    /* eslint-disable max-statements */\n    constructor(component, options, data) {\n        var _a, _b, _c, _d;\n        super(Object.assign({\n            renderMode: 'form',\n            attachMode: 'full',\n            noDefaults: false\n        }, options || {}));\n        // Restore the component id.\n        if (component && component.id) {\n            this.id = component.id;\n        }\n        /**\n         * Determines if this component has a condition assigned to it.\n         * @type {null}\n         * @private\n         */\n        this._hasCondition = null;\n        /**\n         * The row index for this component.\n         */\n        this._rowIndex = undefined;\n        /**\n         * References to dom elements\n         */\n        this.refs = {};\n        // Allow global override for any component JSON.\n        if (component &&\n            this.options.components &&\n            this.options.components[component.type]) {\n            lodash_1.default.merge(component, this.options.components[component.type]);\n        }\n        /**\n         * An array of all the children components errors.\n         */\n        this.childErrors = [];\n        /**\n         * Last validation errors that have occured.\n         */\n        this._errors = [];\n        this._visibleErrors = [];\n        /**\n         * The Form.io component JSON schema.\n         * @type {*}\n         */\n        this.component = this.mergeSchema(component || {});\n        // Add the id to the component.\n        this.component.id = this.id;\n        this.afterComponentAssign();\n        // Save off the original component to be used in logic.\n        this.originalComponent = (0, utils_1.fastCloneDeep)(this.component);\n        /**\n         * If the component has been attached\n         */\n        this.attached = false;\n        /**\n         * If the component has been rendered\n         */\n        this.rendered = false;\n        /**\n         * The data object in which this component resides.\n         * @type {*}\n         */\n        this._data = data || {};\n        /**\n         * Tool tip text after processing\n         * @type {string}\n         */\n        this.tooltip = '';\n        /**\n         * The row path of this component.\n         * @type {number}\n         */\n        this.row = this.options.row;\n        /**\n         * Points to a flat map of child components (if applicable).\n         * @type {object}\n         */\n        this.childComponentsMap = {};\n        /**\n         * Determines if this component is disabled, or not.\n         * @type {boolean}\n         */\n        this._disabled = (0, utils_1.boolValue)(this.component.disabled) ? this.component.disabled : false;\n        /**\n         * Points to the root component, usually the FormComponent.\n         * @type {Component}\n         */\n        this.root = this.options.root || this;\n        this.localRoot = this.options.localRoot || this;\n        /**\n         * If this input has been input and provided value.\n         * @type {boolean}\n         */\n        this.pristine = true;\n        /**\n         * Points to the parent component.\n         * @type {Component}\n         */\n        this.parent = this.options.parent;\n        /**\n         * The component paths for this component.\n         * @type {import('@formio/core').ComponentPaths} - The component paths.\n         */\n        this.paths = FormioUtils.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths), { dataIndex: this.options.rowIndex === undefined ? (_d = (_c = this.parent) === null || _c === void 0 ? void 0 : _c.paths) === null || _d === void 0 ? void 0 : _d.dataIndex : this.options.rowIndex }));\n        this.options.name = this.options.name || 'data';\n        this._path = '';\n        // Needs for Nextgen Rules Engine\n        this.resetCaches();\n        /**\n         * Determines if this component is visible, or not.\n         */\n        this._parentVisible = this.options.hasOwnProperty('parentVisible') ? this.options.parentVisible : true;\n        this._visible = this._parentVisible && (this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden);\n        this._parentDisabled = false;\n        /**\n         * The reference attribute name for this component\n         */\n        this._referenceAttributeName = 'ref';\n        /**\n         * Used to trigger a new change in this component.\n         * @type {Function} - Call to trigger a change in this component.\n         */\n        let changes = [];\n        let lastChanged = null;\n        let triggerArgs = [];\n        const _triggerChange = lodash_1.default.debounce((...args) => {\n            if (this.root) {\n                this.root.changing = false;\n            }\n            triggerArgs = [];\n            if (!args[1] && lastChanged) {\n                // Set the changed component if one isn't provided.\n                args[1] = lastChanged;\n            }\n            if (lodash_1.default.isEmpty(args[0]) && lastChanged) {\n                // Set the flags if it is empty and lastChanged exists.\n                args[0] = lastChanged.flags;\n            }\n            lastChanged = null;\n            args[3] = changes;\n            const retVal = this.onChange(...args);\n            changes = [];\n            return retVal;\n        }, 100);\n        this.triggerChange = (...args) => {\n            if (args[1]) {\n                // Make sure that during the debounce that we always track lastChanged component, even if they\n                // don't provide one later.\n                lastChanged = args[1];\n                changes.push(lastChanged);\n            }\n            if (this.root) {\n                this.root.changing = true;\n            }\n            if (args.length) {\n                triggerArgs = args;\n            }\n            return _triggerChange(...triggerArgs);\n        };\n        /**\n         * Used to trigger a redraw event within this component.\n         * @type {Function}\n         */\n        this.triggerRedraw = lodash_1.default.debounce(this.redraw.bind(this), 100);\n        /**\n         * list of attached tooltips\n         * @type {Array}\n         */\n        this.tooltips = [];\n        /**\n         * List of attached addons\n         * @type {Array}\n         */\n        this.addons = [];\n        // To force this component to be invalid.\n        this.invalid = false;\n        if (this.component) {\n            this.type = this.component.type;\n            if (this.allowData && this.key) {\n                this.options.name += `[${this.key}]`;\n                // If component is visible or not set to clear on hide, set the default value.\n                if (!this.shouldConditionallyClear()) {\n                    if (!this.hasValue()) {\n                        if (this.shouldAddDefaultValue) {\n                            this.dataValue = this.defaultValue;\n                        }\n                    }\n                    else {\n                        // Ensure the dataValue is set.\n                        /* eslint-disable  no-self-assign */\n                        this.dataValue = this.dataValue;\n                        /* eslint-enable  no-self-assign */\n                    }\n                }\n            }\n            /**\n             * The element information for creating the input element.\n             * @type {*}\n             */\n            this.info = this.elementInfo();\n        }\n        // Allow anyone to hook into the component creation.\n        this.hook('component');\n        if (!this.options.skipInit) {\n            this.init();\n        }\n    }\n    /* eslint-enable max-statements */\n    get componentsMap() {\n        var _a;\n        return ((_a = this.root) === null || _a === void 0 ? void 0 : _a.childComponentsMap) || {};\n    }\n    parentShouldConditionallyClear() {\n        let currentParent = this.parent;\n        while (currentParent) {\n            if (currentParent.shouldConditionallyClear(true)) {\n                return true;\n            }\n            currentParent = currentParent.parent;\n        }\n        return false;\n    }\n    parentConditionallyHidden() {\n        let currentParent = this.parent;\n        while (currentParent) {\n            if (currentParent.conditionallyHidden(true)) {\n                return true;\n            }\n            currentParent = currentParent.parent;\n        }\n        return false;\n    }\n    get data() {\n        return this._data;\n    }\n    set data(value) {\n        this._data = value;\n    }\n    mergeSchema(component = {}) {\n        return lodash_1.default.defaultsDeep(component, this.defaultSchema);\n    }\n    // Allow componets to notify when ready.\n    get ready() {\n        return Promise.resolve(this);\n    }\n    get isPDFReadOnlyMode() {\n        return this.parent &&\n            this.parent.form &&\n            (this.parent.form.display === 'pdf') &&\n            this.options.readOnly;\n    }\n    get labelInfo() {\n        const label = {};\n        label.hidden = this.labelIsHidden();\n        label.className = '';\n        label.labelPosition = this.component.labelPosition;\n        label.tooltipClass = `${this.iconClass('question-sign')} text-muted`;\n        const isPDFReadOnlyMode = this.isPDFReadOnlyMode;\n        if (this.hasInput && this.component.validate && (0, utils_1.boolValue)(this.component.validate.required) && !isPDFReadOnlyMode) {\n            label.className += ' field-required';\n        }\n        if (label.hidden) {\n            label.className += ' control-label--hidden';\n        }\n        if (this.info.attr.id) {\n            label.for = this.info.attr.id;\n        }\n        return label;\n    }\n    init() {\n        var _a;\n        this.disabled = this.shouldDisabled;\n        this._visible = (this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden);\n        if ((_a = this.component.addons) === null || _a === void 0 ? void 0 : _a.length) {\n            this.component.addons.forEach((addon) => this.createAddon(addon));\n        }\n    }\n    /**\n     * Get Row Index.\n     * @returns {number} - The row index.\n     */\n    get rowIndex() {\n        return this._rowIndex;\n    }\n    /**\n     * Set Row Index to row and update each component.\n     * @param {number} value - The row index.\n     * @returns {void}\n     */\n    set rowIndex(value) {\n        var _a, _b;\n        this.paths = FormioUtils.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths) || {})), { dataIndex: value }));\n        this._rowIndex = value;\n    }\n    afterComponentAssign() {\n        //implement in extended classes\n    }\n    createAddon(addonConfiguration) {\n        var _a;\n        const name = addonConfiguration.name;\n        if (!name) {\n            return;\n        }\n        const settings = ((_a = addonConfiguration.settings) === null || _a === void 0 ? void 0 : _a.data) || {};\n        const Addon = addons_1.default[name.value];\n        let addon = null;\n        if (Addon) {\n            const supportedComponents = Addon.info.supportedComponents;\n            const supportsThisComponentType = !(supportedComponents === null || supportedComponents === void 0 ? void 0 : supportedComponents.length) ||\n                supportedComponents.indexOf(this.component.type) !== -1;\n            if (supportsThisComponentType) {\n                addon = new Addon(settings, this);\n                this.addons.push(addon);\n            }\n            else {\n                console.warn(`Addon ${name.label} does not support component of type ${this.component.type}.`);\n            }\n        }\n        return addon;\n    }\n    teardown() {\n        if (this.element) {\n            delete this.element.component;\n            delete this.element;\n        }\n        delete this._currentForm;\n        delete this.parent;\n        delete this.root;\n        delete this.triggerChange;\n        delete this.triggerRedraw;\n        if (this.options) {\n            delete this.options.root;\n            delete this.options.parent;\n            delete this.options.i18next;\n        }\n        super.teardown();\n    }\n    destroy(all = false) {\n        super.destroy(all);\n        this.detach();\n        this.addons.forEach((addon) => addon.destroy());\n        if (all) {\n            this.teardown();\n        }\n    }\n    get shouldDisabled() {\n        return this.options.readOnly || this.component.disabled || (this.options.hasOwnProperty('disabled') && this.options.disabled[this.key]);\n    }\n    get isInputComponent() {\n        return !this.component.hasOwnProperty('input') || this.component.input;\n    }\n    get allowData() {\n        return this.hasInput;\n    }\n    get hasInput() {\n        return this.isInputComponent || (this.refs.input && this.refs.input.length);\n    }\n    get defaultSchema() {\n        return Component.schema();\n    }\n    get key() {\n        return lodash_1.default.get(this.component, 'key', '');\n    }\n    get path() {\n        return this.paths.dataPath;\n    }\n    set path(path) {\n        throw new Error('Should not be setting the path of a component.');\n    }\n    set parentVisible(value) {\n        this._parentVisible = value;\n    }\n    get parentVisible() {\n        return this._parentVisible;\n    }\n    set parentDisabled(value) {\n        this._parentDisabled = value;\n    }\n    get parentDisabled() {\n        return this._parentDisabled;\n    }\n    shouldForceVisibility(component, visibility) {\n        if (!this.options[visibility]) {\n            return false;\n        }\n        if (!component) {\n            component = this.component;\n        }\n        if (lodash_1.default.isArray(this.options[visibility])) {\n            return this.options[visibility].includes(component.key);\n        }\n        return this.options[visibility][component.key];\n    }\n    shouldForceHide(component) {\n        return this.shouldForceVisibility(component, 'hide');\n    }\n    shouldForceShow(component) {\n        return this.shouldForceVisibility(component, 'show');\n    }\n    /**\n     * Sets the component visibility.\n     * @param {boolean} value - Whether the component should be visible or not.\n     */\n    set visible(value) {\n        if (this._visible !== value) {\n            // Skip if this component is set to visible and is supposed to be hidden.\n            if (value && this.shouldForceHide()) {\n                return;\n            }\n            // Skip if this component is set to hidden and is supposed to be shown.\n            if (!value && this.shouldForceShow()) {\n                return;\n            }\n            this._visible = value;\n            this.redraw();\n        }\n    }\n    /**\n     * Returns the component visibility\n     * @returns {boolean} - Whether the component is visible or not.\n     */\n    get visible() {\n        // Show only if visibility changes or if we are in builder mode or if hidden fields should be shown.\n        if (this.builderMode || this.previewMode || this.options.showHiddenFields) {\n            return true;\n        }\n        if (this.shouldForceHide()) {\n            return false;\n        }\n        if (this.shouldForceShow()) {\n            return true;\n        }\n        return this._visible && this._parentVisible;\n    }\n    get logicallyHidden() {\n        if (this._logicallyHidden && !this.component.hidden) {\n            this._logicallyHidden = false;\n        }\n        return this._logicallyHidden;\n    }\n    shouldConditionallyClear(skipParent = false) {\n        // Skip if this component has clearOnHide set to false.\n        if (this.component.clearOnHide === false) {\n            return false;\n        }\n        // If the component is logically hidden, then it is conditionally hidden and should clear.\n        if (this.logicallyHidden) {\n            return true;\n        }\n        // If we have a condition and it is not conditionally visible, the it should conditionally clear.\n        if (this.hasCondition() && !this.conditionallyVisible()) {\n            return true;\n        }\n        if (skipParent) {\n            // Stop recurrsion for the parent checks.\n            return false;\n        }\n        // If this component has a set value, then it should ONLY clear if a parent is hidden\n        // and has the clearOnHide set to true.\n        if (this.hasSetValue) {\n            return this.parentShouldConditionallyClear();\n        }\n        // Clear the value if the parent is conditionally hidden.\n        return this.parentConditionallyHidden();\n    }\n    conditionallyHidden(skipParent = false) {\n        if (this.logicallyHidden) {\n            return true;\n        }\n        if (!this.hasCondition() && !skipParent) {\n            return this.parentConditionallyHidden();\n        }\n        // Return if we are not conditionally visible (conditionallyHidden)\n        if (!this.conditionallyVisible()) {\n            return true;\n        }\n        if (skipParent) {\n            // Stop recurrsion for the parent checks.\n            return false;\n        }\n        // Check the parent.\n        return this.parentConditionallyHidden();\n    }\n    get currentForm() {\n        return this._currentForm;\n    }\n    set currentForm(instance) {\n        this._currentForm = instance;\n    }\n    get fullMode() {\n        return this.options.attachMode === 'full';\n    }\n    get builderMode() {\n        return this.options.attachMode === 'builder';\n    }\n    get calculatedPath() {\n        console.error('component.calculatedPath was deprecated, use component.path instead.');\n        return this.path;\n    }\n    get labelPosition() {\n        return this.component.labelPosition;\n    }\n    get labelWidth() {\n        const width = this.component.labelWidth;\n        return width >= 0 ? width : 30;\n    }\n    get labelMargin() {\n        const margin = this.component.labelMargin;\n        return margin >= 0 ? margin : 3;\n    }\n    get isAdvancedLabel() {\n        return [\n            'left-left',\n            'left-right',\n            'right-left',\n            'right-right'\n        ].includes(this.labelPosition);\n    }\n    get labelPositions() {\n        return this.labelPosition.split('-');\n    }\n    get skipInEmail() {\n        return false;\n    }\n    rightDirection(direction) {\n        if (this.options.condensedMode) {\n            return false;\n        }\n        return direction === 'right';\n    }\n    getLabelInfo(isCondensed = false) {\n        const isRightPosition = this.rightDirection(this.labelPositions[0]);\n        const isLeftPosition = this.labelPositions[0] === 'left' || isCondensed;\n        const isRightAlign = this.rightDirection(this.labelPositions[1]);\n        let contentMargin = '';\n        if (this.component.hideLabel) {\n            const margin = isCondensed ? 0 : this.labelWidth + this.labelMargin;\n            contentMargin = isRightPosition ? `margin-right: ${margin}%` : '';\n            contentMargin = isLeftPosition ? `margin-left: ${margin}%` : '';\n        }\n        const labelStyles = `\n      flex: ${this.labelWidth};\n      ${isRightPosition ? 'margin-left' : 'margin-right'}: ${this.labelMargin}%;\n    `;\n        const contentStyles = `\n      flex: ${100 - this.labelWidth - this.labelMargin};\n      ${contentMargin};\n      ${this.component.hideLabel ? `max-width: ${100 - this.labelWidth - this.labelMargin}` : ''};\n    `;\n        return {\n            isRightPosition,\n            isRightAlign,\n            labelStyles,\n            contentStyles\n        };\n    }\n    /**\n     * Returns only the schema that is different from the default.\n     * @param {object} schema - The \"full\" json schema for the component.\n     * @param {object} defaultSchema - The \"default\" json schema for the component.\n     * @param {boolean} recursion - If we are currently in a recursive loop.\n     * @returns {object} - The minified json schema for this component.\n     */\n    getModifiedSchema(schema, defaultSchema, recursion) {\n        const modified = {};\n        if (!defaultSchema) {\n            return schema;\n        }\n        lodash_1.default.each(schema, (val, key) => {\n            if (!lodash_1.default.isArray(val) && lodash_1.default.isObject(val) && defaultSchema.hasOwnProperty(key)) {\n                const subModified = this.getModifiedSchema(val, defaultSchema[key], true);\n                if (!lodash_1.default.isEmpty(subModified)) {\n                    modified[key] = subModified;\n                }\n            }\n            else if (lodash_1.default.isArray(val)) {\n                if (val.length !== 0 && !lodash_1.default.isEqual(val, defaultSchema[key])) {\n                    modified[key] = val;\n                }\n            }\n            else if ((!recursion && (key === 'type')) ||\n                (!recursion && (key === 'key')) ||\n                (!recursion && (key === 'label')) ||\n                (!recursion && (key === 'input')) ||\n                (!recursion && (key === 'tableView')) ||\n                (val !== '' && !defaultSchema.hasOwnProperty(key)) ||\n                (val !== '' && val !== defaultSchema[key]) ||\n                (defaultSchema[key] && val !== defaultSchema[key])) {\n                modified[key] = val;\n            }\n        });\n        return modified;\n    }\n    /**\n     * Returns the JSON schema for this component.\n     * @returns {object} - The JSON schema for this component.\n     */\n    get schema() {\n        return (0, utils_1.fastCloneDeep)(this.getModifiedSchema(lodash_1.default.omit(this.component, 'id'), this.defaultSchema));\n    }\n    /**\n     * Returns true if component is inside DataGrid\n     * @returns {boolean} - True if component is inside DataGrid\n     */\n    get isInDataGrid() {\n        return this.inDataGrid;\n    }\n    /**\n     * Translate a text using the i18n system.\n     * @param {string} text - The i18n identifier.\n     * @param {object} params - The i18n parameters to use for translation.\n     * @param {...any} args - Additional arguments to pass to the translation library.\n     * @returns {string} - The translated text.\n     */\n    t(text, params = {}, ...args) {\n        if (!text) {\n            return '';\n        }\n        // Use _userInput: true to ignore translations from defaults\n        if (text in en_1.default && params._userInput) {\n            return text;\n        }\n        params.data = params.data || this.rootValue;\n        params.row = params.row || this.data;\n        params.component = params.component || this.component;\n        return super.t(text, params, ...args);\n    }\n    labelIsHidden() {\n        return !this.component.label ||\n            ((!this.isInDataGrid && this.component.hideLabel) ||\n                (this.isInDataGrid && !this.component.dataGridLabel) ||\n                this.options.floatingLabels ||\n                this.options.inputsOnly) && !this.builderMode;\n    }\n    transform(type, value) {\n        const frameworkTemplates = this.options.template ? Templates_1.default.templates[this.options.template] : Templates_1.default.current;\n        return frameworkTemplates.hasOwnProperty('transform')\n            ? frameworkTemplates.transform(type, value, this)\n            : (type, value) => value;\n    }\n    getTemplate(names, modes) {\n        modes = Array.isArray(modes) ? modes : [modes];\n        names = Array.isArray(names) ? names : [names];\n        if (!modes.includes('form')) {\n            modes.push('form');\n        }\n        let result = null;\n        if (this.options.templates) {\n            result = this.checkTemplate(this.options.templates, names, modes);\n            if (result) {\n                return result;\n            }\n        }\n        const frameworkTemplates = this.options.template ? Templates_1.default.templates[this.options.template] : Templates_1.default.current;\n        result = this.checkTemplate(frameworkTemplates, names, modes);\n        if (result) {\n            return result;\n        }\n        // Default back to bootstrap if not defined.\n        const name = names[names.length - 1];\n        const templatesByName = Templates_1.default.defaultTemplates[name];\n        if (!templatesByName) {\n            return { template: `Unknown template: ${name}` };\n        }\n        const templateByMode = this.checkTemplateMode(templatesByName, modes);\n        if (templateByMode) {\n            return { template: templateByMode };\n        }\n        return { template: templatesByName.form };\n    }\n    checkTemplate(templates, names, modes) {\n        for (const name of names) {\n            const templatesByName = templates[name];\n            if (templatesByName) {\n                const { referenceAttributeName } = templatesByName;\n                const templateByMode = this.checkTemplateMode(templatesByName, modes);\n                if (templateByMode) {\n                    return { template: templateByMode, referenceAttributeName };\n                }\n            }\n        }\n        return null;\n    }\n    checkTemplateMode(templatesByName, modes) {\n        for (const mode of modes) {\n            const templateByMode = templatesByName[mode];\n            if (templateByMode) {\n                return templateByMode;\n            }\n        }\n        return null;\n    }\n    getFormattedAttribute(attr) {\n        return attr ? this.t(attr, { _userInput: true }).replace(/\"/g, '&quot;') : '';\n    }\n    getFormattedTooltip(tooltipValue) {\n        const tooltip = this.interpolate(tooltipValue || '').replace(/(?:\\r\\n|\\r|\\n)/g, '<br />');\n        return this.getFormattedAttribute(tooltip);\n    }\n    isHtmlRenderMode() {\n        return this.options.renderMode === 'html';\n    }\n    renderTemplate(name, data = {}, modeOption = '') {\n        // Need to make this fall back to form if renderMode is not found similar to how we search templates.\n        const mode = modeOption || this.options.renderMode || 'form';\n        data.component = this.component;\n        data.self = this;\n        data.options = this.options;\n        data.readOnly = this.options.readOnly;\n        data.iconClass = this.iconClass.bind(this);\n        data.size = this.size.bind(this);\n        data.t = this.t.bind(this);\n        data.transform = this.transform.bind(this);\n        data.id = data.id || this.id;\n        data.key = data.key || this.key;\n        data.value = data.value || this.dataValue;\n        data.disabled = this.disabled;\n        data.builder = this.builderMode;\n        data.render = (...args) => {\n            console.warn(`Form.io 'render' template function is deprecated.\n      If you need to render template (template A) inside of another template (template B),\n      pass pre-compiled template A (use this.renderTemplate('template_A_name') as template context variable for template B`);\n            return this.renderTemplate(...args);\n        };\n        data.label = data.labelInfo || this.labelInfo;\n        data.tooltip = this.getFormattedTooltip(this.component.tooltip);\n        // Allow more specific template names\n        const names = [\n            `${name}-${this.component.type}-${this.key}`,\n            `${name}-${this.component.type}`,\n            `${name}-${this.key}`,\n            `${name}`,\n        ];\n        // Allow template alters.\n        const { referenceAttributeName, template } = this.getTemplate(names, mode);\n        if (referenceAttributeName) {\n            this._referenceAttributeName = referenceAttributeName;\n        }\n        return this.hook(`render${name.charAt(0).toUpperCase() + name.substring(1, name.length)}`, this.interpolate(template, data), data, mode);\n    }\n    /**\n     * Sanitize an html string.\n     * @param {string} dirty - The dirty html string to sanitize.\n     * @param {boolean} forceSanitize - If we should force the sanitize to occur.\n     * @param {object} options - The options for the sanitize.\n     * @returns {*} - The sanitized html string.\n     */\n    sanitize(dirty, forceSanitize = false, options = {}) {\n        var _a;\n        if (!this.shouldSanitizeValue && !forceSanitize) {\n            return dirty;\n        }\n        return FormioUtils.sanitize(dirty, {\n            sanitizeConfig: lodash_1.default.merge(((_a = this.options) === null || _a === void 0 ? void 0 : _a.sanitizeConfig) || {}, options || {}),\n        });\n    }\n    /**\n     * Render a template string into html.\n     * @param {string} template - The template to render.\n     * @param {object} data - The data to provide to the template.\n     * @returns {HTMLElement | string} - The created element or an empty string if template is not specified.\n     */\n    renderString(template, data) {\n        if (!template) {\n            return '';\n        }\n        // Interpolate the template and populate\n        return this.interpolate(template, data);\n    }\n    /**\n     * Allows for modification of the component value prior to submission.\n     * @param {*} input - The input to be modified.\n     * @returns {*} - The modified input mapping for the extended component.\n     */\n    performInputMapping(input) {\n        return input;\n    }\n    /**\n     * Returns the component \"widget\" if one is available.\n     * @returns {Widget|null} - The widget instance. null if not available.\n     */\n    get widget() {\n        var _a;\n        const settings = this.component.widget;\n        if (settings && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.shadowRoot)) {\n            settings.shadowRoot = this.root.shadowRoot;\n        }\n        const widget = settings && widgets_1.default[settings.type] ? new widgets_1.default[settings.type](settings, this.component, this) : null;\n        return widget;\n    }\n    /**\n     * Returns the native supported browser language.\n     * @returns {string|null} - The native browser language that is supported.\n     */\n    getBrowserLanguage() {\n        const nav = window.navigator;\n        const browserLanguagePropertyKeys = ['language', 'browserLanguage', 'systemLanguage', 'userLanguage'];\n        let language;\n        // support for HTML 5.1 \"navigator.languages\"\n        if (Array.isArray(nav.languages)) {\n            for (let i = 0; i < nav.languages.length; i++) {\n                language = nav.languages[i];\n                if (language && language.length) {\n                    return language.split(';')[0];\n                }\n            }\n        }\n        // support for other well known properties in browsers\n        for (let i = 0; i < browserLanguagePropertyKeys.length; i++) {\n            language = nav[browserLanguagePropertyKeys[i]];\n            if (language && language.length) {\n                return language.split(';')[0];\n            }\n        }\n        return null;\n    }\n    /**\n     * Called before a next and previous page is triggered allowing the components to perform special functions.\n     * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the next/previous page navigation.\n     */\n    beforePage() {\n        return Promise.resolve(true);\n    }\n    /**\n     * Called before the next page is triggered allowing the components to hook into the page navigation and perform tasks.\n     * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the next page navigation.\n     */\n    beforeNext() {\n        return this.beforePage(true);\n    }\n    /**\n     * Called before a submission is triggered allowing the components to perform special async functions.\n     * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the submission.\n     */\n    beforeSubmit() {\n        return Promise.resolve(true);\n    }\n    /**\n     * Return the submission timezone.\n     * @returns {string} - The submission timezone.\n     */\n    get submissionTimezone() {\n        this.options.submissionTimezone = this.options.submissionTimezone || lodash_1.default.get(this.root, 'options.submissionTimezone');\n        return this.options.submissionTimezone;\n    }\n    /**\n     * Return the current timezone.\n     * @returns {string} - The current timezone.\n     */\n    get timezone() {\n        return this.getTimezone(this.component);\n    }\n    /**\n     * Return the current timezone.\n     * @param {object} settings - Settings to control how the timezone should be returned.\n     * @returns {string} - The current timezone.\n     */\n    getTimezone(settings) {\n        if (settings.timezone) {\n            return settings.timezone;\n        }\n        if (settings.displayInTimezone === 'utc') {\n            return 'UTC';\n        }\n        const submissionTimezone = this.submissionTimezone;\n        if (submissionTimezone &&\n            ((settings.displayInTimezone === 'submission') ||\n                ((this.options.pdf || this.options.server) && (settings.displayInTimezone === 'viewer')))) {\n            return submissionTimezone;\n        }\n        // Return current timezone if none are provided.\n        return (0, utils_1.currentTimezone)();\n    }\n    /**\n     *\n     * @param {HTMLElement} element - The containing DOM element to query for the ref value.\n     * @param {object} refs - The references to load.\n     * @param {string} [referenceAttributeName] - The attribute name to use for the reference.\n     */\n    loadRefs(element, refs, referenceAttributeName) {\n        if (!element) {\n            return;\n        }\n        for (const ref in refs) {\n            const refType = refs[ref];\n            const isString = typeof refType === 'string';\n            const selector = isString && refType.includes('scope')\n                ? `:scope > [${referenceAttributeName || this._referenceAttributeName || 'ref'}=\"${ref}\"]`\n                : `[${referenceAttributeName || this._referenceAttributeName || 'ref'}=\"${ref}\"]`;\n            if (isString && refType.startsWith('single')) {\n                this.refs[ref] = element.querySelector(selector);\n            }\n            else {\n                this.refs[ref] = element.querySelectorAll(selector);\n            }\n        }\n    }\n    /**\n     * Opens the modal element.\n     * @param {string} template - The template to use for the modal dialog.\n     */\n    setOpenModalElement(template = null) {\n        this.componentModal.setOpenModalElement(template || this.getModalPreviewTemplate());\n    }\n    /**\n     * Renders a modal preview template and returns the markup as a string\n     * @param {object|null|undefined} ctx - The rendering context\n     * @returns {string} - The modal preview markup\n     */\n    renderModalPreview(ctx) {\n        return this.renderTemplate('modalPreview', ctx || {});\n    }\n    /**\n     * Returns the modal preview template.\n     * @returns {string} - The modal preview template.\n     */\n    getModalPreviewTemplate() {\n        var _a;\n        const dataValue = this.component.type === 'password' ? this.dataValue.replace(/./g, '•') : this.dataValue;\n        let modalLabel;\n        if (this.hasInput && ((_a = this.component.validate) === null || _a === void 0 ? void 0 : _a.required) && !this.isPDFReadOnlyMode) {\n            modalLabel = { className: 'field-required' };\n        }\n        return this.renderModalPreview({\n            previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('Click to set value'),\n            messages: '',\n            labelInfo: modalLabel,\n        });\n    }\n    /**\n     * Performs a complete build of a component, which empties, renders, sets the content in the DOM, and then finally attaches events.\n     * @param {HTMLElement} element - The element to attach this component to.\n     * @returns {Promise<void>} - A promise that resolves when the component has been built.\n     */\n    build(element) {\n        element = element || this.element;\n        this.empty(element);\n        this.setContent(element, this.render());\n        return this.attach(element);\n    }\n    get hasModalSaveButton() {\n        return true;\n    }\n    /**\n     * Renders a component as an HTML string.\n     * @param {string} children - The contents of all the children HTML as a string.\n     * @param {boolean} topLevel - If this is the topmost component that is being rendered.\n     * @returns {string} - The rendered HTML string of a component.\n     */\n    render(children = `Unknown component: ${this.component.type}`, topLevel = false) {\n        const isVisible = this.visible;\n        this.rendered = true;\n        if (!this.builderMode && !this.previewMode && this.component.modalEdit) {\n            return ComponentModal_1.default.render(this, {\n                visible: isVisible,\n                showSaveButton: this.hasModalSaveButton,\n                id: this.id,\n                classes: this.className,\n                styles: this.customStyle,\n                children\n            }, topLevel);\n        }\n        else {\n            return this.renderTemplate('component', {\n                visible: isVisible,\n                id: this.id,\n                classes: this.className,\n                styles: this.customStyle,\n                children\n            }, topLevel);\n        }\n    }\n    /**\n     * Creates the tooltip instance using tippy.js and returns it\n     * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip\n     * @param {object|null|undefined} settings - tippy.js options\n     * @returns {import('tippy.js').Tippy} - tippy.js instance\n     */\n    createTooltip(tooltipEl, settings = {}) {\n        const tooltipAttribute = tooltipEl.getAttribute('data-tooltip');\n        const tooltipDataTitle = tooltipEl.getAttribute('data-title');\n        const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)\n            .replace(/(?:\\r\\n|\\r|\\n)/g, '<br />');\n        return (0, tippy_js_1.default)(tooltipEl, Object.assign(Object.assign({ allowHTML: true, trigger: 'mouseenter click focus', placement: 'right', zIndex: 10000, interactive: true }, settings), { content: this.t(this.sanitize(tooltipText), { _userInput: true }) }));\n    }\n    /**\n     * Attaches all the tooltips provided the refs object.\n     * @param {object} toolTipsRefs - The refs for the tooltips within your template.\n     * @returns {void}\n     */\n    attachTooltips(toolTipsRefs) {\n        toolTipsRefs === null || toolTipsRefs === void 0 ? void 0 : toolTipsRefs.forEach((tooltip, index) => {\n            if (tooltip) {\n                this.tooltips[index] = this.createTooltip(tooltip);\n            }\n        });\n    }\n    /**\n     * Create a new component modal for this component.\n     * @param {HTMLElement} element - The element to attach the modal to.\n     * @param {boolean} modalShouldBeOpened - TRUE if the modal should open immediately.\n     * @param {any} currentValue - The current value of the component.\n     * @returns {ComponentModal} - The created component modal.\n     */\n    createComponentModal(element, modalShouldBeOpened, currentValue) {\n        return new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);\n    }\n    /**\n     * Attaches all event listensers for this component to the DOM elements that were rendered.\n     * @param {HTMLElement} element - The element to attach the listeners to.\n     * @returns {Promise<void>} - Resolves when the component is done attaching to the DOM.\n     */\n    attach(element) {\n        if (!this.builderMode && !this.previewMode && this.component.modalEdit) {\n            const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;\n            const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;\n            const openModalTemplate = this.componentModal && modalShouldBeOpened\n                ? this.componentModal.openModalTemplate\n                : null;\n            this.componentModal = this.createComponentModal(element, modalShouldBeOpened, currentValue);\n            this.setOpenModalElement(openModalTemplate);\n        }\n        this.attached = true;\n        this.setElement(element);\n        element.component = this;\n        // If this already has an id, get it from the dom. If SSR, it could be different from the initiated id.\n        if (this.element.id) {\n            this.id = this.element.id;\n            this.component.id = this.id;\n        }\n        this.loadRefs(element, {\n            messageContainer: 'single',\n            tooltip: 'multiple'\n        });\n        this.attachTooltips(this.refs.tooltip);\n        // Attach logic.\n        this.attachLogic();\n        this.autofocus();\n        // Allow global attach.\n        this.hook('attachComponent', element, this);\n        // Allow attach per component type.\n        const type = this.component.type;\n        if (type) {\n            this.hook(`attach${type.charAt(0).toUpperCase() + type.substring(1, type.length)}`, element, this);\n        }\n        this.restoreFocus();\n        this.addons.forEach((addon) => addon.attach(element));\n        return Promise.resolve();\n    }\n    /**\n     * Restors the \"focus\" on a component after a redraw event has occured.\n     */\n    restoreFocus() {\n        var _a, _b, _c;\n        const isFocused = ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.focusedComponent) === null || _b === void 0 ? void 0 : _b.path) === this.path;\n        if (isFocused) {\n            this.loadRefs(this.element, { input: 'multiple' });\n            this.focus((_c = this.root.currentSelection) === null || _c === void 0 ? void 0 : _c.index);\n            this.restoreCaretPosition();\n        }\n    }\n    /**\n     * Adds a keyboard shortcut to this component.\n     * @param {HTMLElement} element - The element to attach the keyboard shortcut to.\n     * @param {string} shortcut - The keyboard shortcut to add.\n     * @returns {void}\n     */\n    addShortcut(element, shortcut) {\n        // Avoid infinite recursion.\n        if (!element || !this.root || (this.root === this)) {\n            return;\n        }\n        if (!shortcut) {\n            shortcut = this.component.shortcut;\n        }\n        this.root.addShortcut(element, shortcut);\n    }\n    /**\n     * Removes a keyboard shortcut from this component.\n     * @param {HTMLElement} element - The element to remove the keyboard shortcut from.\n     * @param {string} shortcut - The keyboard shortcut to remove.\n     * @returns {void}\n     */\n    removeShortcut(element, shortcut) {\n        // Avoid infinite recursion.\n        if (!element || (this.root === this)) {\n            return;\n        }\n        if (!shortcut) {\n            shortcut = this.component.shortcut;\n        }\n        this.root.removeShortcut(element, shortcut);\n    }\n    /**\n     * Remove all event handlers.\n     */\n    detach() {\n        // First iterate through each ref and delete the component so there are no dangling component references.\n        lodash_1.default.each(this.refs, (ref) => {\n            if (ref instanceof NodeList) {\n                ref.forEach((elem) => {\n                    delete elem.component;\n                });\n            }\n            else if (ref) {\n                delete ref.component;\n            }\n        });\n        this.refs = {};\n        this.removeEventListeners();\n        this.detachLogic();\n        if (this.tooltip) {\n            this.tooltip.destroy();\n        }\n    }\n    /**\n     * Determines if the component should be refreshed based on the path of another component that changed.\n     * @param {string} refreshData - The path of the data that needs to trigger a refresh.\n     * @param {boolean} changed - Flag that is true if the data has been changed.\n     * @param {any} flags - The flags for the checkData procedure.\n     * @returns {void}\n     */\n    checkRefresh(refreshData, changed, flags) {\n        var _a, _b;\n        const changePath = lodash_1.default.get(changed, 'instance.path', false);\n        // Don't let components change themselves.\n        if (changePath && this.path === changePath) {\n            return;\n        }\n        if (refreshData === 'data') {\n            this.refresh(this.data, changed, flags);\n        }\n        else if ((changePath && (((_b = (_a = changed.instance) === null || _a === void 0 ? void 0 : _a.paths) === null || _b === void 0 ? void 0 : _b.localPath) === refreshData)) && changed && changed.instance &&\n            // Make sure the changed component is not in a different \"context\". Solves issues where refreshOn being set\n            // in fields inside EditGrids could alter their state from other rows (which is bad).\n            this.inContext(changed.instance)) {\n            this.refresh(changed.value, changed, flags);\n        }\n    }\n    /**\n     * Iterates over a list of changes, and determines if the component should be refreshed if it is configured to refresh on any of those components.\n     * @param {Array<any>} changes - The list of components that have changed.\n     * @param {any} flags - The checkData flags.\n     * @returns {void}\n     */\n    checkRefreshOn(changes, flags = {}) {\n        changes = changes || [];\n        if (flags.noRefresh) {\n            return;\n        }\n        if (!changes.length && flags.changed) {\n            changes = [flags.changed];\n        }\n        const refreshOn = flags.fromBlur ? this.component.refreshOnBlur : this.component.refreshOn || this.component.redrawOn;\n        // If they wish to refresh on a value, then add that here.\n        if (refreshOn) {\n            if (Array.isArray(refreshOn)) {\n                refreshOn.forEach(refreshData => changes.forEach(changed => this.checkRefresh(refreshData, changed, flags)));\n            }\n            else {\n                changes.forEach(changed => this.checkRefresh(refreshOn, changed, flags));\n            }\n        }\n    }\n    /**\n     * Refreshes the component with a new value.\n     * @param {any} value - The latest value of the component to check if it needs to be refreshed.\n     * @returns {void}\n     */\n    refresh(value) {\n        if (this.hasOwnProperty('refreshOnValue')) {\n            this.refreshOnChanged = !lodash_1.default.isEqual(value, this.refreshOnValue);\n        }\n        else {\n            this.refreshOnChanged = true;\n        }\n        this.refreshOnValue = (0, utils_1.fastCloneDeep)(value);\n        if (this.refreshOnChanged) {\n            if (this.component.clearOnRefresh) {\n                this.setValue(null);\n            }\n            this.triggerRedraw();\n        }\n    }\n    /**\n     * Checks to see if a separate component is in the \"context\" of this component. This is determined by first checking\n     * if they share the same \"data\" object. It will then walk up the parent tree and compare its parents data objects\n     * with the components data and returns true if they are in the same context.\n     *\n     * Different rows of the same EditGrid, for example, are in different contexts.\n     * @param {any} component - The component to check if it is in the same context as this component.\n     * @returns {boolean} - TRUE if the component is in the same context as this component.\n     */\n    inContext(component) {\n        if (component.data === this.data) {\n            return true;\n        }\n        let parent = this.parent;\n        while (parent) {\n            if (parent.data === component.data) {\n                return true;\n            }\n            parent = parent.parent;\n        }\n        return false;\n    }\n    /**\n     * Determines if we are in \"view\" only mode.\n     * @returns {boolean} - TRUE if we are in \"view\" only mode.\n     */\n    get viewOnly() {\n        return this.options.readOnly && this.options.viewAsHtml;\n    }\n    /**\n     * Sets the HTMLElement for this component.\n     * @param {HTMLElement} element - The element that is attached to this component.\n     * @returns {void}\n     */\n    setElement(element) {\n        if (this.element) {\n            delete this.element.component;\n            delete this.element;\n        }\n        this.element = element;\n    }\n    /**\n     * Creates an element to hold the \"view only\" version of this component.\n     * @returns {HTMLElement} - The element for this component.\n     */\n    createViewOnlyElement() {\n        this.setElement(this.ce('dl', {\n            id: this.id\n        }));\n        if (this.element) {\n            // Ensure you can get the component info from the element.\n            this.element.component = this;\n        }\n        return this.element;\n    }\n    /**\n     * The default value for the \"view only\" mode of a component if the value is not provided.\n     * @returns {string} - The default value for this component.\n     */\n    get defaultViewOnlyValue() {\n        return '-';\n    }\n    /**\n     * Uses the widget to determine the output string.\n     * @param {any} value - The current value of the component.\n     * @param {any} options - The options for getValueAsString.\n     * @returns {any|Array<any>} - The value as a string.\n     */\n    getWidgetValueAsString(value, options) {\n        const noInputWidget = !this.refs.input || !this.refs.input[0] || !this.refs.input[0].widget;\n        if (!value || noInputWidget) {\n            if (!this.widget || !value) {\n                return value;\n            }\n            else {\n                return this.widget.getValueAsString(value);\n            }\n        }\n        if (Array.isArray(value)) {\n            const values = [];\n            value.forEach((val, index) => {\n                const widget = this.refs.input[index] && this.refs.input[index].widget;\n                if (widget) {\n                    values.push(widget.getValueAsString(val, options));\n                }\n            });\n            return values;\n        }\n        const widget = this.refs.input[0].widget;\n        return widget.getValueAsString(value, options);\n    }\n    /**\n     * Returns the value of the component as a string.\n     * @param {any} value - The value for this component.\n     * @param {any} options - The options for this component.\n     * @returns {string} - The string representation of the value of this component.\n     */\n    getValueAsString(value, options) {\n        if (!value) {\n            return '';\n        }\n        value = this.getWidgetValueAsString(value, options);\n        if (Array.isArray(value)) {\n            return value.join(', ');\n        }\n        if (lodash_1.default.isPlainObject(value)) {\n            return JSON.stringify(value);\n        }\n        if (value === null || value === undefined) {\n            return '';\n        }\n        const stringValue = value.toString();\n        return this.sanitize(stringValue);\n    }\n    /**\n     * Returns the string representation \"view\" of the component value.\n     * @param {any} value - The value of the component.\n     * @param {any} options - The options for this component.\n     * @returns {string} - The string representation of the value of this component.\n     */\n    getView(value, options) {\n        if (this.component.protected) {\n            return '--- PROTECTED ---';\n        }\n        return this.getValueAsString(value, options);\n    }\n    /**\n     * Updates the items list for this component. Useful for Select and other List component types.\n     * @param {...any} args - The arguments to pass to the onChange event.\n     * @returns {void}\n     */\n    updateItems(...args) {\n        this.restoreValue();\n        this.onChange(...args);\n    }\n    /**\n     * Returns the value for a specific item in a List type component.\n     * @param {any} data - The data for this component.\n     * @param {boolean} [forceUseValue] - if true, return 'value' property of the data\n     * @returns {any} - The value of the item.\n     */\n    itemValue(data, forceUseValue = false) {\n        if (lodash_1.default.isObject(data) && !lodash_1.default.isArray(data)) {\n            if (this.valueProperty) {\n                return lodash_1.default.get(data, this.valueProperty);\n            }\n            if (forceUseValue) {\n                return data.value;\n            }\n        }\n        return data;\n    }\n    /**\n     * Returns the item value for html mode.\n     * @param {any} value - The value for this component.\n     * @returns {any} - The value of the item for html mode.\n     */\n    itemValueForHTMLMode(value) {\n        if (Array.isArray(value)) {\n            const values = value.map(item => Array.isArray(item) ? this.itemValueForHTMLMode(item) : this.itemValue(item));\n            return values.join(', ');\n        }\n        return this.itemValue(value);\n    }\n    /**\n     * Creates a modal to input the value of this component.\n     * @param {HTMLElement} element - The element to attach the modal to.\n     * @param {any} attr - A list of attributes to add to the modal.\n     * @param {boolean} confirm - If we should add a confirmation to the modal that keeps it from closing unless confirmed.\n     * @returns {HTMLElement} - The created modal element.\n     */\n    createModal(element, attr, confirm) {\n        const dialog = this.ce('div', attr || {});\n        this.setContent(dialog, this.renderTemplate('dialog'));\n        // Add refs to dialog, not \"this\".\n        dialog.refs = {};\n        this.loadRefs.call(dialog, dialog, {\n            dialogOverlay: 'single',\n            dialogContents: 'single',\n            dialogClose: 'single',\n        });\n        dialog.refs.dialogContents.appendChild(element);\n        document.body.appendChild(dialog);\n        document.body.classList.add('modal-open');\n        dialog.close = () => {\n            document.body.classList.remove('modal-open');\n            dialog.dispatchEvent(new CustomEvent('close'));\n        };\n        this.addEventListener(dialog, 'close', () => this.removeChildFrom(dialog, document.body));\n        const close = (event) => {\n            event.preventDefault();\n            dialog.close();\n        };\n        const handleCloseClick = (e) => {\n            if (confirm) {\n                confirm().then(() => close(e))\n                    .catch(() => { });\n            }\n            else {\n                close(e);\n            }\n        };\n        this.addEventListener(dialog.refs.dialogOverlay, 'click', handleCloseClick);\n        this.addEventListener(dialog.refs.dialogClose, 'click', handleCloseClick);\n        return dialog;\n    }\n    /**\n     * Uses CSS classes to show or hide an element.\n     * @returns {boolean} - TRUE if the element has been css removed.\n     */\n    get optimizeRedraw() {\n        if (this.options.optimizeRedraw && this.element && !this.visible) {\n            this.addClass(this.element, 'formio-removed');\n            return true;\n        }\n        return false;\n    }\n    /**\n     * Retrieves the CSS class name of this component.\n     * @returns {string} - The class name of this component.\n     */\n    get className() {\n        let className = this.hasInput ? `${this.transform('class', 'form-group')} has-feedback ` : '';\n        className += `formio-component formio-component-${this.component.type} `;\n        // TODO: find proper way to avoid overriding of default type-based component styles\n        if (this.key && this.key !== 'form') {\n            className += `formio-component-${this.key} `;\n        }\n        if (this.component.multiple) {\n            className += 'formio-component-multiple ';\n        }\n        if (this.component.customClass) {\n            className += this.component.customClass;\n        }\n        if (this.hasInput && this.component.validate && (0, utils_1.boolValue)(this.component.validate.required)) {\n            className += ' required';\n        }\n        if (this.labelIsHidden()) {\n            className += ' formio-component-label-hidden';\n        }\n        if (!this.visible) {\n            className += ' formio-hidden';\n        }\n        return className;\n    }\n    /**\n     * Build the custom style from the layout values\n     * @returns {string} - The custom style\n     */\n    get customStyle() {\n        let customCSS = '';\n        lodash_1.default.each(this.component.style, (value, key) => {\n            if (value !== '') {\n                customCSS += `${key}:${value};`;\n            }\n        });\n        return customCSS;\n    }\n    /**\n     * Returns the component condition operator settings if available.\n     * @returns {object} - The component condition operator settings.\n     */\n    static get serverConditionSettings() {\n        return Component.conditionOperatorsSettings;\n    }\n    /**\n     * Returns if the application is on a mobile device.\n     * @returns {boolean} - TRUE if the application is on a mobile device.\n     */\n    get isMobile() {\n        return (0, ismobilejs_1.default)();\n    }\n    /**\n     * Returns the outside wrapping element of this component.\n     * @returns {HTMLElement} - The wrapping element of this component.\n     */\n    getElement() {\n        return this.element;\n    }\n    /**\n     * Create an evaluation context for all script executions and interpolations.\n     * @param {any} additional - Additional context to provide.\n     * @returns {any} - The evaluation context.\n     */\n    evalContext(additional) {\n        return super.evalContext(Object.assign({\n            component: this.component,\n            row: this.data,\n            rowIndex: this.rowIndex,\n            data: this.rootValue,\n            iconClass: this.iconClass.bind(this),\n            // Bind the translate function to the data context of any interpolated string.\n            // It is useful to translate strings in different scenarions (eg: custom edit grid templates, custom error messages etc.)\n            // and desirable to be publicly available rather than calling the internal {instance.t} function in the template string.\n            t: this.t.bind(this),\n            submission: (this.root ? this.root._submission : {\n                data: this.rootValue\n            }),\n            form: this.root ? this.root._form : {},\n            options: this.options,\n        }, additional));\n    }\n    /**\n     * Sets the pristine flag for this component.\n     * @param {boolean} pristine - TRUE to make pristine, FALSE not pristine.\n     */\n    setPristine(pristine) {\n        this.pristine = pristine;\n    }\n    /**\n     * Returns if the component is pristine.\n     * @returns {boolean} - TRUE if the component is pristine.\n     */\n    get isPristine() {\n        return this.pristine;\n    }\n    /**\n     * Sets the dirty flag for this component.\n     * @param {boolean} dirty - TRUE to make dirty, FALSE not dirty.\n     */\n    setDirty(dirty) {\n        this.dirty = dirty;\n    }\n    /**\n     * Returns if the component is dirty.\n     * @returns {boolean} - TRUE if the component is dirty.\n     */\n    get isDirty() {\n        return this.dirty;\n    }\n    /**\n     * Removes a value out of the data array and rebuild the rows.\n     * @param {number} index - The index of the data element to remove.\n     */\n    removeValue(index) {\n        this.splice(index);\n        this.redraw();\n        this.restoreValue();\n        this.triggerRootChange();\n    }\n    /**\n     * Returns the icon class for a given icon name.\n     * @param {string} name - The name of the icon you wish to fetch provided the icon class. This is the \"font awesome\" version of the name of the icon.\n     * @param {boolean} spinning - If the component should be spinning.\n     * @returns {string} - The icon class for the equivalent icon in the iconset we are using.\n     */\n    iconClass(name, spinning) {\n        const iconset = this.options.iconset || Templates_1.default.current.defaultIconset || 'fa';\n        return Templates_1.default.current.hasOwnProperty('iconClass')\n            ? Templates_1.default.current.iconClass(iconset, name, spinning)\n            : this.options.iconset === 'fa' ? Templates_1.default.defaultTemplates.iconClass(iconset, name, spinning) : name;\n    }\n    /**\n     * Returns the size css class names for our current template.\n     * @param {string} size - The size class name for the default iconset.\n     * @returns {string} - The size class for our component.\n     */\n    size(size) {\n        return Templates_1.default.current.hasOwnProperty('size')\n            ? Templates_1.default.current.size(size)\n            : size;\n    }\n    /**\n     * The readible name for this component.\n     * @returns {string} - The name of the component.\n     */\n    get name() {\n        return this.t(this.component.label || this.component.placeholder || this.key, { _userInput: true });\n    }\n    /**\n     * Returns the visible errors for this component.\n     * @returns {Array<object>} - The visible errors for this component.\n     */\n    get visibleErrors() {\n        return this._visibleErrors;\n    }\n    /**\n     * Returns all the errors for this component, visible or not.\n     * @returns {Array<object>} - All the errors for this component.\n     */\n    get errors() {\n        return this._errors;\n    }\n    /**\n     * Returns the error label for this component.\n     * @returns {string} - The error label for this component.\n     */\n    get errorLabel() {\n        return this.t(this.component.errorLabel\n            || this.component.label\n            || this.component.placeholder\n            || this.key);\n    }\n    /**\n     * Get the error message provided a certain type of error.\n     * @param {string} type - The type of error to fetch the message for.\n     * @returns {string} - The error message configured for this component.\n     */\n    errorMessage(type) {\n        return (this.component.errors && this.component.errors[type]) ? this.component.errors[type] : type;\n    }\n    /**\n     * Sets the content, innerHTML, of an element to the sanitized content.\n     * @param {HTMLElement} element - The element to set the innerHTML to.\n     * @param {string} content - The HTML string content that we wish to set.\n     * @param {boolean} forceSanitize - If we should force the content to be sanitized.\n     * @param {any} sanitizeOptions - The options for the sanitize function.\n     * @returns {boolean} - TRUE if the content was sanitized and set.\n     */\n    setContent(element, content, forceSanitize, sanitizeOptions) {\n        if (element instanceof HTMLElement) {\n            element.innerHTML = this.sanitize(content, forceSanitize, sanitizeOptions);\n            return true;\n        }\n        return false;\n    }\n    /**\n     * Restores the caret position in the input element after a refresh occurs.\n     */\n    restoreCaretPosition() {\n        var _a, _b, _c;\n        if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.currentSelection) {\n            if ((_b = this.refs.input) === null || _b === void 0 ? void 0 : _b.length) {\n                const { index } = this.root.currentSelection;\n                let input = this.refs.input[index];\n                const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test((i === null || i === void 0 ? void 0 : i.type) || '');\n                if (input) {\n                    if (isInputRangeSelectable(input)) {\n                        input.setSelectionRange(input.value.length, input.value.length);\n                    }\n                }\n                else {\n                    input = this.refs.input[this.refs.input.length];\n                    const lastCharacter = ((_c = input.value) === null || _c === void 0 ? void 0 : _c.length) || 0;\n                    if (isInputRangeSelectable(input)) {\n                        input.setSelectionRange(lastCharacter, lastCharacter);\n                    }\n                }\n            }\n        }\n    }\n    /**\n     * Redraw the component.\n     * @returns {Promise<void>} - A promise that resolves when the component is done redrawing.\n     */\n    redraw() {\n        // Don't bother if we have not built yet.\n        if (!this.element || !this.element.parentNode || this.optimizeRedraw) {\n            // Return a non-resolving promise.\n            return Promise.resolve();\n        }\n        this.detach();\n        this.emit('redraw');\n        // Since we are going to replace the element, we need to know it's position so we can find it in the parent's children.\n        const parent = this.element.parentNode;\n        const index = Array.prototype.indexOf.call(parent.children, this.element);\n        this.element.outerHTML = this.sanitize(this.render());\n        this.setElement(parent.children[index]);\n        return this.attach(this.element);\n    }\n    /**\n     * Rebuild and redraw a component.\n     * @returns {Promise<void>} - A promise that resolves when the component is done rebuilding and redrawing.\n     */\n    rebuild() {\n        this.destroy();\n        this.init();\n        this.visible = this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden;\n        return this.redraw();\n    }\n    /**\n     * Removes all event listeners attached to this component.\n     */\n    removeEventListeners() {\n        super.removeEventListeners();\n        this.tooltips.forEach(tooltip => tooltip.destroy());\n        this.tooltips = [];\n    }\n    /**\n     * Returns if the dom node has the classes provided.\n     * @param {HTMLElement} element - The element to check for the class.\n     * @param {string} className - The name of the class to check.\n     * @returns {boolean|void} - TRUE if the element has the class.\n     */\n    hasClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.hasClass(element, this.transform('class', className));\n    }\n    /**\n     * Adds a class to an HTML element.\n     * @param {HTMLElement} element - The dom element to add the class to.\n     * @param {string} className - The class name you wish to add.\n     * @returns {this|void} - The component instance.\n     */\n    addClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.addClass(element, this.transform('class', className));\n    }\n    /**\n     * Removes a class from an element.\n     * @param {HTMLElement} element - The element to remove the class from.\n     * @param {string} className - The class name to remove.\n     * @returns {this|void} - The component instance.\n     */\n    removeClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.removeClass(element, this.transform('class', className));\n    }\n    /**\n     * Determines if this component has a condition defined.\n     * @returns {boolean} - TRUE if the component has a condition defined.\n     */\n    hasCondition() {\n        if (this._hasCondition !== null) {\n            return this._hasCondition;\n        }\n        this._hasCondition = FormioUtils.hasCondition(this.component);\n        return this._hasCondition;\n    }\n    /**\n     * Check if this component is conditionally visible.\n     * @param {any} data - The data to check against.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean} - TRUE if the component is conditionally visible.\n     */\n    conditionallyVisible(data, row) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        if (this.builderMode || this.previewMode) {\n            return true;\n        }\n        data = data || (this.root ? this.root.data : {});\n        return this.checkCondition(row, data);\n    }\n    /**\n     * Checks the condition of this component.\n     *\n     * TODO: Switch row and data parameters to be consistent with other methods.\n     * @param {any} row - The row contextual data.\n     * @param {any} data - The global data object.\n     * @returns {boolean} - True if the condition applies to this component.\n     */\n    checkCondition(row, data) {\n        return FormioUtils.checkCondition(this.component, row || this.data, data || this.rootValue, this.root ? this.root._form : {}, this);\n    }\n    /**\n     * Check for conditionals and hide/show the element based on those conditions.\n     * @param {any} data - The data to check against.\n     * @param {any} flags - The flags passed to checkData function.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean} - TRUE if the component is visible.\n     */\n    checkComponentConditions(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        if (!this.builderMode & !this.previewMode && this.fieldLogic(data, row)) {\n            this.redraw();\n        }\n        // Check visibility\n        const visible = (this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden);\n        if (this.visible !== visible) {\n            this.visible = visible;\n        }\n        this.clearComponentOnHide();\n        return visible;\n    }\n    /**\n     * Checks conditions for this component and any sub components.\n     * @param {any} data - The data to check against.\n     * @param {any} flags - The flags passed to checkData function.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean} - TRUE if the component is visible.\n     */\n    checkConditions(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        return this.checkComponentConditions(data, flags, row);\n    }\n    /**\n     * Returns the component logic if applicable.\n     * @returns {Array<object>} - The component logic.\n     */\n    get logic() {\n        return this.component.logic || [];\n    }\n    /**\n     * Check all triggers and apply necessary actions.\n     * @param {any} data - The data to check against.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean|void} - TRUE if the component was altered.\n     */\n    fieldLogic(data = this.rootValue, row = this.data) {\n        const logics = this.logic;\n        // If there aren't logic, don't go further.\n        if (logics.length === 0) {\n            return;\n        }\n        const newComponent = (0, utils_1.fastCloneDeep)(this.originalComponent);\n        let changed = logics.reduce((changed, logic) => {\n            const result = FormioUtils.checkTrigger(newComponent, logic.trigger, row, data, this.root ? this.root._form : {}, this);\n            return (result ? this.applyActions(newComponent, logic.actions, result, row, data) : false) || changed;\n        }, false);\n        // If component definition changed, replace and mark as changed.\n        if (!lodash_1.default.isEqual(this.component, newComponent)) {\n            this.component = newComponent;\n            changed = true;\n            const disabled = this.shouldDisabled;\n            // Change disabled state if it has changed\n            if (this.disabled !== disabled) {\n                this.disabled = disabled;\n            }\n        }\n        return changed;\n    }\n    /**\n     * Retuns if the browser is Internet Explorer.\n     * @returns {boolean} - TRUE if the browser is IE.\n     */\n    isIE() {\n        if (typeof window === 'undefined') {\n            return false;\n        }\n        const userAgent = window.navigator.userAgent;\n        const msie = userAgent.indexOf('MSIE ');\n        if (msie > 0) {\n            // IE 10 or older => return version number\n            return parseInt(userAgent.substring(msie + 5, userAgent.indexOf('.', msie)), 10);\n        }\n        const trident = userAgent.indexOf('Trident/');\n        if (trident > 0) {\n            // IE 11 => return version number\n            const rv = userAgent.indexOf('rv:');\n            return parseInt(userAgent.substring(rv + 3, userAgent.indexOf('.', rv)), 10);\n        }\n        const edge = userAgent.indexOf('Edge/');\n        if (edge > 0) {\n            // IE 12 (aka Edge) => return version number\n            return parseInt(userAgent.substring(edge + 5, userAgent.indexOf('.', edge)), 10);\n        }\n        // other browser\n        return false;\n    }\n    /**\n     * Defines the logic action value through evaluation.\n     * @param {object} action - The action within the Logic system to perform.\n     * @param {object} argsObject - The arguments to pass to the evaluation.\n     * @returns {any} - The result of the evaluation.\n     */\n    defineActionValue(action, argsObject) {\n        return this.evaluate(action.value, argsObject, 'value');\n    }\n    /**\n     * Apply the actions of Logic for a component once the conditions have been met.\n     * @param {object} newComponent - The new component to apply the actions to.\n     * @param {Array<object>} actions - An array of actions\n     * @param {any} result - The result of the conditional check in order to evaluate the actions.\n     * @param {any} row - The contextual row data for this component.\n     * @param {any} data - The global data object for the submission.\n     * @returns {boolean} - TRUE if the component was altered.\n     */\n    applyActions(newComponent, actions, result, row, data) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        return actions.reduce((changed, action) => {\n            switch (action.type) {\n                case 'property': {\n                    FormioUtils.setActionProperty(newComponent, action, result, row, data, this);\n                    const property = action.property.value;\n                    if (!lodash_1.default.isEqual(lodash_1.default.get(this.component, property), lodash_1.default.get(newComponent, property))) {\n                        // Advanced Logic can modify the component's hidden property; because we track conditionally hidden state\n                        // separately from the component's hidden property, and technically this Advanced Logic conditionally hides\n                        // a component, we need to set a temporary variable to the new value\n                        if (property === 'hidden') {\n                            this._logicallyHidden = newComponent.hidden;\n                        }\n                        changed = true;\n                    }\n                    break;\n                }\n                case 'value': {\n                    const oldValue = this.getValue();\n                    const newValue = this.defineActionValue(action, {\n                        value: lodash_1.default.clone(oldValue),\n                        data,\n                        row,\n                        component: newComponent,\n                        result,\n                    });\n                    if (!lodash_1.default.isEqual(oldValue, newValue) && !this.shouldConditionallyClear()) {\n                        this.setValue(newValue);\n                        if (this.viewOnly) {\n                            this.dataValue = newValue;\n                        }\n                        changed = true;\n                    }\n                    break;\n                }\n                case 'mergeComponentSchema': {\n                    const schema = this.evaluate(action.schemaDefinition, {\n                        value: lodash_1.default.clone(this.getValue()),\n                        data,\n                        row,\n                        component: newComponent,\n                        result,\n                    }, 'schema');\n                    lodash_1.default.assign(newComponent, schema);\n                    if (!lodash_1.default.isEqual(this.component, newComponent)) {\n                        changed = true;\n                    }\n                    break;\n                }\n                case 'customAction': {\n                    const oldValue = this.getValue();\n                    const newValue = this.evaluate(action.customAction, {\n                        value: lodash_1.default.clone(oldValue),\n                        data,\n                        row,\n                        input: oldValue,\n                        component: newComponent,\n                        result,\n                    }, 'value');\n                    if (!lodash_1.default.isEqual(oldValue, newValue) && !this.shouldConditionallyClear()) {\n                        this.setValue(newValue);\n                        if (this.viewOnly) {\n                            this.dataValue = newValue;\n                        }\n                        changed = true;\n                    }\n                    break;\n                }\n            }\n            return changed;\n        }, false);\n    }\n    // Deprecated\n    addInputError(message, dirty, elements) {\n        this.addMessages(message);\n        this.setErrorClasses(elements, dirty, !!message);\n    }\n    // Deprecated\n    removeInputError(elements) {\n        this.setErrorClasses(elements, true, false);\n    }\n    /**\n     * Add a new input error to this element.\n     * @param {Array<object>|string} messages - An array of messages to add to the element.\n     * @returns {void}\n     */\n    addMessages(messages) {\n        if (!messages) {\n            return;\n        }\n        // Standardize on array of objects for message.\n        if (typeof messages === 'string') {\n            messages = {\n                messages,\n                level: 'error',\n            };\n        }\n        if (!Array.isArray(messages)) {\n            messages = [messages];\n        }\n        messages = lodash_1.default.uniqBy(messages, message => message.message);\n        if (this.refs.messageContainer) {\n            this.setContent(this.refs.messageContainer, messages.map((message) => {\n                return this.renderTemplate('message', Object.assign({}, message));\n            }).join(''));\n        }\n    }\n    /**\n     * Sets the form input widget error classes.\n     * @param {Array<HTMLElement>} elements - An array of DOM elements to set the error classes on.\n     * @param {boolean} dirty - If the input is dirty.\n     * @param {boolean} hasErrors - If the input has errors.\n     * @param {boolean} hasMessages - If the input has messages.\n     * @param {HTMLElement} element - The wrapper element for all the other elements passed in first argument.\n     * @returns {void}\n     */\n    setErrorClasses(elements, dirty, hasErrors, hasMessages, element = this.element) {\n        this.clearErrorClasses();\n        elements.forEach((element) => {\n            this.setElementInvalid(this.performInputMapping(element), false);\n        });\n        this.setInputWidgetErrorClasses(elements, hasErrors);\n        // do not set error classes for hidden components\n        if (!this.visible) {\n            return;\n        }\n        if (hasErrors) {\n            // Add error classes\n            elements.forEach((input) => {\n                this.setElementInvalid(this.performInputMapping(input), true);\n            });\n            if (dirty && this.options.highlightErrors) {\n                this.addClass(element, this.options.componentErrorClass);\n            }\n            else {\n                this.addClass(element, 'has-error');\n            }\n        }\n        if (hasMessages) {\n            this.addClass(element, 'has-message');\n        }\n    }\n    /**\n     * Adds the classes necessary to mark an element as invalid.\n     * @param {HTMLElement} element - The element you wish to add the invalid classes to.\n     * @param {boolean} invalid - TRUE if the component is invalid, FALSE otherwise.\n     * @returns {void}\n     */\n    setElementInvalid(element, invalid) {\n        if (!element)\n            return;\n        if (invalid) {\n            this.addClass(element, 'is-invalid');\n        }\n        else {\n            this.removeClass(element, 'is-invalid');\n        }\n        element.setAttribute('aria-invalid', invalid ? 'true' : 'false');\n    }\n    /**\n     * Clear any conditionally hidden components for this component only.\n     */\n    clearComponentOnHide() {\n        // clearOnHide defaults to true for old forms (without the value set) so only trigger if the value is false.\n        if (this.component.clearOnHide !== false && !this.options.readOnly && !this.options.showHiddenFields) {\n            if (this.shouldConditionallyClear()) {\n                this.deleteValue();\n            }\n            else if (!this.hasValue() && this.shouldAddDefaultValue) {\n                // If shown, ensure the default is set.\n                this.setValue(this.defaultValue, {\n                    noUpdateEvent: true\n                });\n            }\n        }\n    }\n    /**\n     * Clears the components data if it is conditionally hidden AND clearOnHide is set to true for this component.\n     */\n    clearOnHide() {\n        this.clearComponentOnHide();\n    }\n    /**\n     * Triggers a debounced onChange event for the root component (usually Webform).\n     * @param {...any} args - The arguments to pass to the onChange event.\n     */\n    triggerRootChange(...args) {\n        if (this.options.onChange) {\n            this.options.onChange(...args);\n        }\n        else if (this.root && this.root.triggerChange) {\n            this.root.triggerChange(...args);\n        }\n    }\n    /**\n     * Called when the component value has been changed. This will then trigger the root level onChange handler which\n     * propagates the checkData methods for the full component tree.\n     * @param {any} flags - The flags for the change event propagation.\n     * @param {boolean} fromRoot - If the change event is from the root component.\n     * @returns {boolean} - TRUE if the component has changed.\n     */\n    onChange(flags, fromRoot) {\n        flags = flags || {};\n        if (flags.modified) {\n            if (!flags.noPristineChangeOnModified) {\n                this.pristine = false;\n            }\n            this.addClass(this.getElement(), 'formio-modified');\n        }\n        // If we are supposed to validate on blur, then don't trigger validation yet.\n        if (this.component.validateOn === 'blur' || this.component.validateOn === 'submit') {\n            flags.noValidate = true;\n        }\n        if (this.component.onChange) {\n            this.evaluate(this.component.onChange, {\n                flags\n            });\n        }\n        // Set the changed variable.\n        const changed = {\n            instance: this,\n            component: this.component,\n            value: this.dataValue,\n            flags: flags\n        };\n        // Emit the change.\n        this.emit('componentChange', changed);\n        // Do not propogate the modified flag.\n        let modified = false;\n        if (flags.modified) {\n            modified = true;\n            delete flags.modified;\n        }\n        // Bubble this change up to the top.\n        if (!fromRoot) {\n            this.triggerRootChange(flags, changed, modified);\n        }\n        return changed;\n    }\n    get wysiwygDefault() {\n        return {\n            quill: {\n                theme: 'snow',\n                placeholder: this.t(this.component.placeholder, { _userInput: true }),\n                modules: {\n                    toolbar: [\n                        [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown\n                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],\n                        [{ 'font': [] }],\n                        ['bold', 'italic', 'underline', 'strike', { 'script': 'sub' }, { 'script': 'super' }, 'clean'],\n                        [{ 'color': [] }, { 'background': [] }],\n                        [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }, { 'align': [] }],\n                        ['blockquote', 'code-block'],\n                        ['link', 'image', 'video', 'formula', 'source']\n                    ]\n                }\n            },\n            ace: {\n                theme: 'ace/theme/xcode',\n                maxLines: 12,\n                minLines: 12,\n                tabSize: 2,\n                mode: 'ace/mode/javascript',\n                placeholder: this.t(this.component.placeholder, { _userInput: true })\n            },\n            ckeditor: {\n                image: {\n                    toolbar: [\n                        'imageTextAlternative',\n                        '|',\n                        'imageStyle:full',\n                        'imageStyle:alignLeft',\n                        'imageStyle:alignCenter',\n                        'imageStyle:alignRight'\n                    ],\n                    styles: [\n                        'full',\n                        'alignLeft',\n                        'alignCenter',\n                        'alignRight'\n                    ]\n                },\n                extraPlugins: []\n            },\n            default: {}\n        };\n    }\n    addCKE(element, settings, onChange) {\n        settings = lodash_1.default.isEmpty(settings) ? {} : settings;\n        settings.base64Upload = this.component.isUploadEnabled ? false : true;\n        settings.mediaEmbed = { previewsInData: true };\n        settings = lodash_1.default.merge(this.wysiwygDefault.ckeditor, lodash_1.default.get(this.options, 'editors.ckeditor.settings', {}), settings);\n        if (this.component.isUploadEnabled) {\n            settings.extraPlugins.push((0, uploadAdapter_1.getFormioUploadAdapterPlugin)(this.fileService, this));\n        }\n        return Formio_1.Formio.requireLibrary('ckeditor', isIEBrowser ? 'CKEDITOR' : 'ClassicEditor', lodash_1.default.get(this.options, 'editors.ckeditor.src', `${Formio_1.Formio.cdn.ckeditor}/ckeditor.js`), true)\n            .then(() => {\n            if (!element.parentNode) {\n                return Promise.reject();\n            }\n            if (isIEBrowser) {\n                const editor = CKEDITOR.replace(element);\n                editor.on('change', () => onChange(editor.getData()));\n                return Promise.resolve(editor);\n            }\n            else {\n                return ClassicEditor.create(element, settings).then(editor => {\n                    editor.model.document.on('change', () => onChange(editor.data.get()));\n                    return editor;\n                });\n            }\n        });\n    }\n    addQuill(element, settings, onChange) {\n        settings = lodash_1.default.isEmpty(settings) ? this.wysiwygDefault.quill : settings;\n        settings = lodash_1.default.merge(this.wysiwygDefault.quill, lodash_1.default.get(this.options, 'editors.quill.settings', {}), settings);\n        settings = Object.assign(Object.assign({}, settings), { modules: Object.assign({ table: true }, settings.modules) });\n        // Lazy load the quill css.\n        Formio_1.Formio.requireLibrary(`quill-css-${settings.theme}`, 'Quill', [\n            { type: 'styles', src: `${Formio_1.Formio.cdn.quill}/quill.${settings.theme}.css` }\n        ], true);\n        // Lazy load the quill library.\n        return Formio_1.Formio.requireLibrary('quill', 'Quill', lodash_1.default.get(this.options, 'editors.quill.src', `${Formio_1.Formio.cdn.quill}/quill.min.js`), true)\n            .then(() => {\n            return Formio_1.Formio.requireLibrary('quill-table', 'Quill', `${Formio_1.Formio.cdn.baseUrl}/quill/quill-table.js`, true)\n                .then(() => {\n                if (!element.parentNode) {\n                    return Promise.reject();\n                }\n                this.quill = new Quill(element, isIEBrowser ? Object.assign(Object.assign({}, settings), { modules: {} }) : settings);\n                /** This block of code adds the [source] capabilities.  See https://codepen.io/anon/pen/ZyEjrQ */\n                const txtArea = document.createElement('textarea');\n                txtArea.setAttribute('class', 'quill-source-code');\n                this.quill.addContainer('ql-custom').appendChild(txtArea);\n                const qlSource = element.parentNode.querySelector('.ql-source');\n                if (qlSource) {\n                    this.addEventListener(qlSource, 'click', (event) => {\n                        event.preventDefault();\n                        if (txtArea.style.display === 'inherit') {\n                            this.quill.setContents(this.quill.clipboard.convert({ html: txtArea.value }));\n                        }\n                        txtArea.style.display = (txtArea.style.display === 'none') ? 'inherit' : 'none';\n                    });\n                }\n                /** END CODEBLOCK */\n                // Make sure to select cursor when they click on the element.\n                this.addEventListener(element, 'click', () => this.quill.focus());\n                // Allows users to skip toolbar items when tabbing though form\n                const elm = document.querySelectorAll('.ql-formats > button');\n                for (let i = 0; i < elm.length; i++) {\n                    elm[i].setAttribute('tabindex', '-1');\n                }\n                this.quill.on('text-change', () => {\n                    txtArea.value = this.quill.root.innerHTML;\n                    onChange(txtArea);\n                });\n                return this.quill;\n            });\n        });\n    }\n    get shouldSanitizeValue() {\n        var _a;\n        // Sanitize value if sanitizing for thw whole content is turned off\n        return (((_a = this.options) === null || _a === void 0 ? void 0 : _a.sanitize) !== false);\n    }\n    addAce(element, settings, onChange) {\n        if (!settings || (settings.theme === 'snow')) {\n            const mode = settings ? settings.mode : '';\n            settings = {};\n            if (mode) {\n                settings.mode = mode;\n            }\n        }\n        settings = lodash_1.default.merge(this.wysiwygDefault.ace, lodash_1.default.get(this.options, 'editors.ace.settings', {}), settings || {});\n        return Formio_1.Formio.requireLibrary('ace', 'ace', lodash_1.default.get(this.options, 'editors.ace.src', `${Formio_1.Formio.cdn.ace}/ace.js`), true)\n            .then((editor) => {\n            editor = editor.edit(element);\n            editor.removeAllListeners('change');\n            editor.setOptions(settings);\n            editor.getSession().setMode(settings.mode);\n            editor.on('change', () => onChange(editor.getValue()));\n            if (settings.isUseWorkerDisabled) {\n                editor.session.setUseWorker(false);\n            }\n            return editor;\n        });\n    }\n    get tree() {\n        return this.component.tree || false;\n    }\n    /**\n     * The empty value for this component.\n     * @returns {null} - The empty value for this component.\n     */\n    get emptyValue() {\n        return null;\n    }\n    /**\n     * Returns if this component has a value set.\n     * @param {any} data - The global data object.\n     * @returns {boolean} - TRUE if a value is set.\n     */\n    hasValue(data) {\n        return !lodash_1.default.isUndefined(lodash_1.default.get(data || this.data, this.key));\n    }\n    /**\n     * Get the data value at the root level.\n     * @returns {*} - The root value for the component, typically the Webform data object.\n     */\n    get rootValue() {\n        return this.root ? this.root.data : this.data;\n    }\n    get rootPristine() {\n        return lodash_1.default.get(this, 'root.pristine', false);\n    }\n    /**\n     * Get the static value of this component.\n     * @returns {*} - The value for this component.\n     */\n    get dataValue() {\n        if (!this.key) {\n            return this.component.multiple ? [] : this.emptyValue;\n        }\n        return lodash_1.default.get(this._data, this.key, this.component.multiple ? [] : this.emptyValue);\n    }\n    /**\n     * Sets the static value of this component.\n     * @param {*} value - The value to set for this component.\n     */\n    set dataValue(value) {\n        if (!this.allowData || !this.key) {\n            return;\n        }\n        if ((value !== null) && (value !== undefined)) {\n            value = this.hook('setDataValue', value, this.key, this._data);\n        }\n        if ((value === null) || (value === undefined)) {\n            this.unset();\n            return;\n        }\n        lodash_1.default.set(this._data, this.key, value);\n        return;\n    }\n    /**\n     * Splice a value from the dataValue.\n     * @param {number} index - The index to splice for an array component values.\n     * @param {*} flags - The flags to use when splicing the value.\n     */\n    splice(index, flags = {}) {\n        if (this.hasValue()) {\n            const dataValue = this.dataValue || [];\n            if (lodash_1.default.isArray(dataValue) && dataValue.hasOwnProperty(index)) {\n                dataValue.splice(index, 1);\n                this.dataValue = dataValue;\n                this.triggerChange(flags);\n            }\n        }\n    }\n    unset() {\n        lodash_1.default.unset(this._data, this.key);\n    }\n    /**\n     * Deletes the value of the component.\n     */\n    deleteValue() {\n        this.setValue(null, {\n            noUpdateEvent: true,\n            noDefault: true\n        });\n        this.unset();\n    }\n    getCustomDefaultValue(defaultValue) {\n        if (this.component.customDefaultValue && !this.options.preview) {\n            defaultValue = this.evaluate(this.component.customDefaultValue, { value: this.dataValue }, 'value');\n        }\n        return defaultValue;\n    }\n    /**\n     * Returns if a component has a default value set.\n     * @returns {boolean} - TRUE if a default value is set.\n     */\n    get hasDefaultValue() {\n        return this.component.customDefaultValue || (this.component.hasOwnProperty('defaultValue') &&\n            (this.component.defaultValue !== null) &&\n            (this.component.defaultValue !== undefined));\n    }\n    /**\n     * Determine if we should add a default value for this component.\n     * @returns {boolean} - TRUE if a default value should be set\n     */\n    get shouldAddDefaultValue() {\n        return this.pristine && this.allowData && (this.hasDefaultValue || !this.options.noDefaults);\n    }\n    /**\n     * Get the default value of this component.\n     * @returns {*} - The default value for this component.\n     */\n    get defaultValue() {\n        let defaultValue = this.emptyValue;\n        if (this.component.defaultValue) {\n            defaultValue = this.component.defaultValue;\n        }\n        defaultValue = this.getCustomDefaultValue(defaultValue);\n        const checkMask = (value) => {\n            if (typeof value === 'string') {\n                if (this.component.type !== 'textfield') {\n                    const placeholderChar = this.placeholderChar;\n                    value = (0, vanilla_text_mask_1.conformToMask)(value, this.defaultMask, { placeholderChar }).conformedValue;\n                    if (!FormioUtils.matchInputMask(value, this.defaultMask)) {\n                        value = '';\n                    }\n                }\n            }\n            else {\n                value = '';\n            }\n            return value;\n        };\n        if (this.defaultMask) {\n            if (Array.isArray(defaultValue)) {\n                defaultValue = defaultValue.map(checkMask);\n            }\n            else {\n                defaultValue = checkMask(defaultValue);\n            }\n        }\n        // Clone so that it creates a new instance.\n        return lodash_1.default.cloneDeep(defaultValue);\n    }\n    /**\n     * Get the input value of this component.\n     * @returns {*} - The value for the component.\n     */\n    getValue() {\n        if (!this.hasInput || this.viewOnly || !this.refs.input || !this.refs.input.length) {\n            return this.dataValue;\n        }\n        const values = [];\n        for (const i in this.refs.input) {\n            if (this.refs.input.hasOwnProperty(i)) {\n                if (!this.component.multiple) {\n                    return this.getValueAt(i);\n                }\n                values.push(this.getValueAt(i));\n            }\n        }\n        if (values.length === 0 && !this.component.multiple) {\n            return '';\n        }\n        return values;\n    }\n    /**\n     * Get the value at a specific index.\n     * @param {number} index - For an array component or multiple values, this returns the value at a specific index.\n     * @returns {*} - The value at the specified index.\n     */\n    getValueAt(index) {\n        const input = this.performInputMapping(this.refs.input[index]);\n        return input ? input.value : undefined;\n    }\n    /**\n     * Set the value of this component.\n     * @param {*} value - The value to set for this component.\n     * @param {*} flags - The flags to use when setting the value.\n     * @returns {boolean} - If the value changed.\n     */\n    setValue(value, flags = {}) {\n        const changed = this.updateValue(value, flags);\n        value = this.dataValue;\n        if (!this.hasInput) {\n            return changed;\n        }\n        const isArray = Array.isArray(value);\n        const valueInput = this.refs.fileLink || this.refs.input;\n        if (isArray &&\n            Array.isArray(this.defaultValue) &&\n            this.refs.hasOwnProperty('input') &&\n            valueInput &&\n            (valueInput.length !== value.length) &&\n            this.visible) {\n            this.redraw();\n        }\n        if (this.isHtmlRenderMode() && flags && flags.fromSubmission && changed) {\n            this.redraw();\n            return changed;\n        }\n        for (const i in this.refs.input) {\n            if (this.refs.input.hasOwnProperty(i)) {\n                this.setValueAt(i, isArray && !this.isSingleInputValue() ? value[i] : value, flags);\n            }\n        }\n        return changed;\n    }\n    /**\n     * Returns if the value (e.g. array) should be divided between several inputs\n     * @returns {boolean}\n     */\n    isSingleInputValue() {\n        return false;\n    }\n    /**\n     * Set the value at a specific index.\n     * @param {number} index - The index to set the value at.\n     * @param {*} value - The value to set at the specified index.\n     * @param {*} flags - The flags to use when setting the value.\n     */\n    setValueAt(index, value, flags = {}) {\n        if (!flags.noDefault && (value === null || value === undefined) && !this.component.multiple) {\n            value = this.defaultValue;\n        }\n        const input = this.performInputMapping(this.refs.input[index]);\n        const valueMaskInput = this.refs.valueMaskInput;\n        if ((valueMaskInput === null || valueMaskInput === void 0 ? void 0 : valueMaskInput.mask) && valueMaskInput.mask.textMaskInputElement) {\n            valueMaskInput.mask.textMaskInputElement.update(value);\n        }\n        if (input.mask && input.mask.textMaskInputElement) {\n            input.mask.textMaskInputElement.update(value);\n        }\n        else if (input.widget && input.widget.setValue) {\n            input.widget.setValue(value);\n        }\n        else {\n            input.value = value;\n        }\n    }\n    get hasSetValue() {\n        return this.hasValue() && !this.isEmpty(this.dataValue);\n    }\n    setDefaultValue() {\n        if (this.defaultValue && this.shouldAddDefaultValue) {\n            const defaultValue = (this.component.multiple && !this.dataValue.length) ? [] : this.defaultValue;\n            this.setValue(defaultValue, {\n                noUpdateEvent: true\n            });\n        }\n    }\n    /**\n     * Restore the value of a control.\n     */\n    restoreValue() {\n        if (this.hasSetValue) {\n            this.setValue(this.dataValue, {\n                noUpdateEvent: true\n            });\n        }\n        else {\n            this.setDefaultValue();\n        }\n    }\n    /**\n     * Normalize values coming into updateValue.\n     * @param {*} value - The value to normalize before setting.\n     * @returns {*} - The normalized value.\n     */\n    normalizeValue(value) {\n        return value;\n    }\n    /**\n     * Update a value of this component.\n     * @param {*} value - The value to update.\n     * @param {*} flags - The flags to use when updating the value.\n     * @returns {boolean} - If the value changed.\n     */\n    updateComponentValue(value, flags = {}) {\n        let newValue = (!flags.resetValue && (value === undefined || value === null)) ? this.getValue() : value;\n        newValue = this.normalizeValue(newValue, flags);\n        const oldValue = this.dataValue;\n        let changed = ((newValue !== undefined) ? this.hasChanged(newValue, oldValue) : false);\n        if (changed) {\n            this.dataValue = newValue;\n            changed = this.dataValue !== oldValue;\n            this.updateOnChange(flags, changed);\n        }\n        if (this.componentModal && flags && flags.fromSubmission) {\n            this.componentModal.setValue(value);\n        }\n        return changed;\n    }\n    /**\n     * Updates the value of this component plus all sub-components.\n     * @param {...any} args - The arguments to pass to updateValue.\n     * @returns {boolean} - If the value changed.\n     */\n    updateValue(...args) {\n        return this.updateComponentValue(...args);\n    }\n    getIcon(name, content, styles, ref = 'icon') {\n        return this.renderTemplate('icon', {\n            className: this.iconClass(name),\n            ref,\n            styles,\n            content\n        });\n    }\n    /**\n     * Resets the value of this component.\n     */\n    resetValue() {\n        this.unset();\n        this.setValue(this.defaultValue || this.emptyValue, {\n            noUpdateEvent: true,\n            noValidate: true,\n            resetValue: true\n        });\n    }\n    /**\n     * Determine if the value of this component has changed.\n     * @param {*} newValue - The new value to check.\n     * @param {*} oldValue - The existing value of the component.\n     * @returns {boolean} - TRUE if the value has changed.\n     */\n    hasChanged(newValue, oldValue) {\n        if (((newValue === undefined) || (newValue === null)) &&\n            ((oldValue === undefined) || (oldValue === null) || this.isEmpty(oldValue))) {\n            return false;\n        }\n        // If we do not have a value and are getting set to anything other than undefined or null, then we changed.\n        if (newValue !== undefined &&\n            newValue !== null &&\n            this.allowData &&\n            !this.hasValue()) {\n            return true;\n        }\n        return !lodash_1.default.isEqual(newValue, oldValue);\n    }\n    /**\n     * Update the value on change.\n     * @param {*} flags - The flags to use when triggering the on change event.\n     * @param {boolean} changed - If the value has changed.\n     * @returns {boolean} - If the value changed.\n     */\n    updateOnChange(flags = {}, changed = false) {\n        if (!flags.noUpdateEvent && changed) {\n            if (flags.fromSubmission) {\n                // Reset the errors when a submission has been made and allow it to revalidate.\n                this._errors = [];\n            }\n            this.triggerChange(flags);\n            return true;\n        }\n        return false;\n    }\n    convertNumberOrBoolToString(value) {\n        if (typeof value === 'number' || typeof value === 'boolean') {\n            return value.toString();\n        }\n        return value;\n    }\n    doValueCalculation(dataValue, data, row) {\n        var _a;\n        return this.evaluate(this.component.calculateValue, {\n            value: dataValue,\n            data,\n            row: row || this.data,\n            submission: ((_a = this.root) === null || _a === void 0 ? void 0 : _a._submission) || {\n                data: this.rootValue\n            }\n        }, 'value');\n    }\n    /* eslint-disable max-statements */\n    calculateComponentValue(data, flags, row) {\n        // Skip value calculation for the component if we don't have entire form data set or in builder mode\n        if (this.builderMode || lodash_1.default.isUndefined(lodash_1.default.get(this, 'root.data'))) {\n            return false;\n        }\n        // If no calculated value or\n        // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)\n        const allowOverride = lodash_1.default.get(this.component, 'allowCalculateOverride', false);\n        if (this.shouldConditionallyClear()) {\n            // remove calculated value so that the value is recalculated once component becomes visible\n            if (this.hasOwnProperty('calculatedValue') && allowOverride) {\n                lodash_1.default.unset(this, 'calculatedValue');\n            }\n            return false;\n        }\n        // Handle all cases when calculated values should not fire.\n        if ((this.options.readOnly && !this.options.pdf && !this.component.calculateValue) ||\n            !(this.component.calculateValue || this.component.calculateValueVariable) ||\n            (this.options.server && !this.component.calculateServer) ||\n            (flags.dataSourceInitialLoading && allowOverride)) {\n            return false;\n        }\n        const dataValue = this.dataValue;\n        // Calculate the new value.\n        let calculatedValue = this.doValueCalculation(dataValue, data, row, flags);\n        if (this.options.readOnly && dataValue && !calculatedValue) {\n            return false;\n        }\n        if (lodash_1.default.isNil(calculatedValue)) {\n            calculatedValue = this.emptyValue;\n        }\n        const changed = !lodash_1.default.isEqual(dataValue, calculatedValue);\n        // Do not override calculations on server if they have calculateServer set.\n        if (allowOverride) {\n            // The value is considered locked if it is not empty and comes from a submission value.\n            const fromSubmission = (flags.fromSubmission && this.component.persistent === true);\n            if (this.isEmpty(dataValue)) {\n                // Reset the calculation lock if ever the data is cleared.\n                this.calculationLocked = false;\n            }\n            else if (this.calculationLocked || fromSubmission) {\n                this.calculationLocked = true;\n                return false;\n            }\n            const firstPass = (this.calculatedValue === undefined) || flags.resetValue;\n            if (firstPass) {\n                this.calculatedValue = null;\n            }\n            const newCalculatedValue = this.normalizeValue(this.convertNumberOrBoolToString(calculatedValue));\n            const previousCalculatedValue = this.normalizeValue(this.convertNumberOrBoolToString(this.calculatedValue));\n            const normalizedDataValue = this.normalizeValue(this.convertNumberOrBoolToString(dataValue));\n            const calculationChanged = !lodash_1.default.isEqual(previousCalculatedValue, newCalculatedValue);\n            const previousChanged = !lodash_1.default.isEqual(normalizedDataValue, previousCalculatedValue);\n            if (calculationChanged && previousChanged && !firstPass) {\n                return false;\n            }\n            // Check to ensure that the calculated value is different than the previously calculated value.\n            if (previousCalculatedValue && previousChanged && !calculationChanged) {\n                this.calculatedValue = null;\n                return false;\n            }\n            if (flags.isReordered || !calculationChanged) {\n                return false;\n            }\n            if (fromSubmission) {\n                // If we set value from submission and it differs from calculated one, set the calculated value to prevent overriding dataValue in the next pass\n                this.calculatedValue = (0, utils_1.fastCloneDeep)(calculatedValue);\n                return false;\n            }\n            // If this is the firstPass, and the dataValue is different than to the calculatedValue.\n            if (firstPass && !this.isEmpty(dataValue) && changed && calculationChanged) {\n                // Return that we have a change so it will perform another pass.\n                return true;\n            }\n        }\n        this.calculatedValue = (0, utils_1.fastCloneDeep)(calculatedValue);\n        if (changed) {\n            if (!flags.noPristineChangeOnModified && this.root.initialized) {\n                this.pristine = false;\n            }\n            flags.triggeredComponentId = this.id;\n            return this.setValue(calculatedValue, flags);\n        }\n        return false;\n    }\n    /* eslint-enable max-statements */\n    /**\n     * Performs calculations in this component plus any child components.\n     * @param {*} data - The data to perform the calculation with.\n     * @param {*} flags - The flags to use when calculating the value.\n     * @param {*} row - The contextual row data to use when performing the calculation.\n     * @returns {boolean} - TRUE if the value changed.\n     */\n    calculateValue(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        return this.calculateComponentValue(data, flags, row);\n    }\n    /**\n     * Get this component's label text.\n     * @returns {string} - The label text for this component.\n     */\n    get label() {\n        return this.component.label;\n    }\n    /**\n     * Set this component's label text and render it.\n     * @param {string} value - The new label text.\n     */\n    set label(value) {\n        this.component.label = value;\n        if (this.labelElement) {\n            this.labelElement.innerText = value;\n        }\n    }\n    /**\n     * Get FormioForm element at the root of this component tree.\n     * @returns {*} root - The root component to search from.\n     */\n    getRoot() {\n        return this.root;\n    }\n    /**\n     * Returns the invalid message, or empty string if the component is valid.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {boolean} ignoreCondition - If conditions for the component should be ignored when checking validity.\n     * @param {*} row - Contextual row data for this component.\n     * @param {*} options - Additional options for validation.\n     * @returns {string} - The message to show when the component is invalid.\n     */\n    invalidMessage(data, dirty, ignoreCondition, row, options = {}) {\n        var _a;\n        const { local } = options;\n        if (!row) {\n            row = (0, utils_1.getContextualRowData)(this.component, data, this.paths);\n        }\n        if (!ignoreCondition && !this.checkCondition(row, data)) {\n            return '';\n        }\n        // See if this is forced invalid.\n        if (this.invalid) {\n            return this.invalid;\n        }\n        // No need to check for errors if there is no input or if it is pristine.\n        if (!this.hasInput || (!dirty && this.pristine)) {\n            return '';\n        }\n        const validationScope = { errors: [] };\n        (0, process_1.processOneSync)({\n            component: this.component,\n            data,\n            row,\n            local,\n            path: this.path || this.component.key,\n            parent: (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component,\n            paths: this.paths,\n            scope: validationScope,\n            instance: this,\n            processors: [\n                process_1.validateProcessInfo\n            ]\n        });\n        const errors = validationScope.errors;\n        const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));\n        return lodash_1.default.map(interpolatedErrors, 'message').join('\\n\\n');\n    }\n    /**\n     * Returns if the component is valid or not.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    isValid(data, dirty) {\n        return !this.invalidMessage(data, dirty);\n    }\n    setComponentValidity(errors, dirty, silentCheck) {\n        if (silentCheck) {\n            return [];\n        }\n        const messages = errors.filter(message => !message.fromServer);\n        if (errors.length && !!messages.length && (!this.isEmpty(this.defaultValue) || dirty || !this.pristine)) {\n            return this.setCustomValidity(messages, dirty);\n        }\n        else {\n            return this.setCustomValidity('');\n        }\n    }\n    /**\n     * Interpolate errors from the validation methods.\n     * @param {Array<any>} errors - An array of errors to interpolate.\n     * @returns {Array<any>} - The interpolated errors.\n     */\n    interpolateErrors(errors) {\n        var _a;\n        const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));\n        return ((_a = this.serverErrors) === null || _a === void 0 ? void 0 : _a.length) ? [...interpolatedErrors, ...this.serverErrors] : interpolatedErrors;\n    }\n    /**\n     * Show component validation errors.\n     * @param {*} errors - An array of errors that have occured.\n     * @param {*} data - The root submission data.\n     * @param {*} row - The contextual row data.\n     * @param {*} flags - The flags to perform validation.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    showValidationErrors(errors, data, row, flags) {\n        if (flags.silentCheck) {\n            return [];\n        }\n        let isDirty = (flags.dirty === false) ? false : (this.dirty || flags.dirty);\n        if (this.options.alwaysDirty) {\n            isDirty = true;\n        }\n        this.setDirty(isDirty);\n        return this.setComponentValidity(errors, isDirty, flags.silentCheck, flags.fromSubmission);\n    }\n    /**\n     * Perform a component validation.\n     * @param {*} data - The root data you wish to use for this component.\n     * @param {*} row - The contextual row data you wish to use for this component.\n     * @param {*} flags - The flags to control the behavior of the validation.\n     * @returns {Array<any>} - An array of errors if the component is invalid.\n     */\n    validateComponent(data = null, row = null, flags = {}) {\n        var _a;\n        data = data || this.rootValue;\n        row = row || this.data;\n        const { async = false } = flags;\n        if (this.shouldSkipValidation(data, row, flags)) {\n            return async ? Promise.resolve([]) : [];\n        }\n        const processContext = {\n            component: this.component,\n            data,\n            row,\n            local: !!flags.local,\n            value: this.validationValue,\n            parent: (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component,\n            paths: this.paths,\n            path: this.path || this.component.key,\n            instance: this,\n            form: this.root ? this.root._form : {},\n            scope: { errors: [] },\n            processors: [\n                process_1.validateProcessInfo\n            ]\n        };\n        if (async) {\n            return (0, process_1.processOne)(processContext).then(() => {\n                this._errors = this.interpolateErrors(processContext.scope.errors);\n                return this._errors;\n            });\n        }\n        (0, process_1.processOneSync)(processContext);\n        this._errors = this.interpolateErrors(processContext.scope.errors);\n        return this._errors;\n    }\n    /**\n     * Checks the validity of this component and sets the error message if it is invalid.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {*} row - The contextual row data for this component.\n     * @param {*} flags - The flags to use when checking the validity.\n     * @param {Array<any>} allErrors - An array of all errors that have occured so that it can be appended when another one occurs here.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    checkComponentValidity(data = null, dirty = false, row = null, flags = {}, allErrors = []) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        flags.dirty = dirty || false;\n        if (flags.async) {\n            return this.validateComponent(data, row, flags).then((errors) => {\n                allErrors.push(...errors);\n                if (this.parent && this.parent.childErrors) {\n                    if (errors.length) {\n                        this.parent.childErrors.push(...errors);\n                    }\n                    else {\n                        lodash_1.default.remove(this.parent.childErrors, (err) => { var _a, _b; return (((_a = err === null || err === void 0 ? void 0 : err.component) === null || _a === void 0 ? void 0 : _a.key) || ((_b = err === null || err === void 0 ? void 0 : err.context) === null || _b === void 0 ? void 0 : _b.key)) === this.component.key; });\n                    }\n                }\n                this.showValidationErrors(errors, data, row, flags);\n                return errors.length === 0;\n            });\n        }\n        else {\n            const errors = this.validateComponent(data, row, flags);\n            this.showValidationErrors(errors, data, row, flags);\n            allErrors.push(...errors);\n            if (this.parent && this.parent.childErrors) {\n                if (errors.length) {\n                    this.parent.childErrors.push(...errors);\n                }\n                else {\n                    lodash_1.default.remove(this.parent.childErrors, (err) => { var _a, _b; return (((_a = err === null || err === void 0 ? void 0 : err.component) === null || _a === void 0 ? void 0 : _a.key) || ((_b = err === null || err === void 0 ? void 0 : err.context) === null || _b === void 0 ? void 0 : _b.key)) === this.component.key; });\n                }\n            }\n            return errors.length === 0;\n        }\n    }\n    /**\n     * Checks the validity of the component.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {*} row - The contextual row data for this component.\n     * @param {boolean} silentCheck - If the check should be silent and not set the error messages.\n     * @param {Array<any>} errors - An array of all errors that have occured so that it can be appended when another one occurs here.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    checkValidity(data = null, dirty = false, row = null, silentCheck = false, errors = []) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        return this.checkComponentValidity(data, dirty, row, { silentCheck }, errors);\n    }\n    checkAsyncValidity(data = null, dirty = false, row = null, silentCheck = false, errors = []) {\n        return this.checkComponentValidity(data, dirty, row, { async: true, silentCheck }, errors);\n    }\n    /**\n     * Check the conditions, calculations, and validity of a single component and triggers an update if\n     * something changed.\n     * @param {*} data - The root data of the change event.\n     * @param {*} flags - The flags from this change event.\n     * @param {*} row - The contextual row data for this component.\n     * @returns {void|boolean} - TRUE if no check should be performed on the component.\n     */\n    checkData(data = null, flags = null, row = null) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        // Some components (for legacy reasons) have calls to \"checkData\" in inappropriate places such\n        // as setValue. Historically, this was bypassed by a series of cached states around the data model\n        // which caused its own problems. We need to ensure that premium and custom components do not fall into\n        // an infinite loop by only checking this component once.\n        if (this.checkingData) {\n            return;\n        }\n        this.checkingData = true;\n        // Needs for Nextgen Rules Engine\n        this.resetCaches();\n        // Do not trigger refresh if change was triggered on blur event since components with Refresh on Blur have their own listeners\n        if (!flags.fromBlur) {\n            this.checkRefreshOn(flags.changes, flags);\n        }\n        if (flags.noCheck) {\n            return true;\n        }\n        this.checkComponentConditions(data, flags, row);\n        if (this.id !== flags.triggeredComponentId) {\n            this.calculateComponentValue(data, flags, row);\n        }\n        // We are done checking data.\n        this.checkingData = false;\n    }\n    checkModal(errors = [], dirty = false) {\n        const messages = errors.filter(error => !error.fromServer);\n        const isValid = errors.length === 0;\n        if (!this.component.modalEdit || !this.componentModal) {\n            return;\n        }\n        if (dirty && !isValid) {\n            this.setErrorClasses([this.refs.openModal], dirty, !isValid, !!messages.length, this.refs.openModalWrapper);\n        }\n        else {\n            this.clearErrorClasses(this.refs.openModalWrapper);\n        }\n    }\n    get validationValue() {\n        return this.dataValue;\n    }\n    isEmpty(value = this.dataValue) {\n        const isEmptyArray = (lodash_1.default.isArray(value) && value.length === 1) ? lodash_1.default.isEqual(value[0], this.emptyValue) : false;\n        return value == null || value.length === 0 || lodash_1.default.isEqual(value, this.emptyValue) || isEmptyArray;\n    }\n    isEqual(valueA, valueB = this.dataValue) {\n        return (this.isEmpty(valueA) && this.isEmpty(valueB)) || lodash_1.default.isEqual(valueA, valueB);\n    }\n    /**\n     * Check if a component is eligible for multiple validation\n     * @returns {boolean} - TRUE if the component is eligible for multiple validation.\n     */\n    validateMultiple() {\n        return true;\n    }\n    clearErrorClasses(element = this.element) {\n        this.removeClass(element, this.options.componentErrorClass);\n        this.removeClass(element, 'alert alert-danger');\n        this.removeClass(element, 'has-error');\n        this.removeClass(element, 'has-message');\n    }\n    setInputWidgetErrorClasses(inputRefs, hasErrors) {\n        if (!this.isInputComponent || !this.component.widget || !(inputRefs === null || inputRefs === void 0 ? void 0 : inputRefs.length)) {\n            return;\n        }\n        inputRefs.forEach((input) => {\n            if ((input === null || input === void 0 ? void 0 : input.widget) && input.widget.setErrorClasses) {\n                input.widget.setErrorClasses(hasErrors);\n            }\n        });\n    }\n    addFocusBlurEvents(element) {\n        this.addEventListener(element, 'focus', () => {\n            if (this.root.focusedComponent !== this) {\n                if (this.root.pendingBlur) {\n                    this.root.pendingBlur();\n                }\n                this.root.focusedComponent = this;\n                this.emit('focus', this);\n            }\n            else if (this.root.focusedComponent === this && this.root.pendingBlur) {\n                this.root.pendingBlur.cancel();\n                this.root.pendingBlur = null;\n            }\n        });\n        this.addEventListener(element, 'blur', () => {\n            this.root.pendingBlur = FormioUtils.delay(() => {\n                this.emit('blur', this);\n                if (this.component.validateOn === 'blur') {\n                    this.root.triggerChange({ fromBlur: true }, {\n                        instance: this,\n                        component: this.component,\n                        value: this.dataValue,\n                        flags: { fromBlur: true }\n                    });\n                }\n                this.root.focusedComponent = null;\n                this.root.pendingBlur = null;\n            });\n        });\n    }\n    // eslint-disable-next-line max-statements\n    setCustomValidity(messages, dirty, external) {\n        const inputRefs = this.isInputComponent ? this.refs.input || [] : null;\n        if (typeof messages === 'string' && messages) {\n            messages = {\n                level: 'error',\n                message: messages,\n                component: this.component,\n            };\n        }\n        if (!Array.isArray(messages)) {\n            if (messages) {\n                messages = [messages];\n            }\n            else {\n                messages = [];\n            }\n        }\n        const errors = messages.filter(message => message.level === 'error');\n        let invalidInputRefs = inputRefs;\n        // Filter the invalid input refs in multiple components\n        if (this.component.multiple) {\n            const refsArray = Array.from(inputRefs);\n            refsArray.forEach((input) => {\n                this.setElementInvalid(this.performInputMapping(input), false);\n            });\n            this.setInputWidgetErrorClasses(refsArray, false);\n            invalidInputRefs = refsArray.filter((ref, index) => {\n                var _a;\n                return (_a = messages.some) === null || _a === void 0 ? void 0 : _a.call(messages, (msg) => {\n                    var _a;\n                    return ((_a = msg === null || msg === void 0 ? void 0 : msg.context) === null || _a === void 0 ? void 0 : _a.index) === index;\n                });\n            });\n        }\n        if (messages.length) {\n            if (this.refs.messageContainer) {\n                this.empty(this.refs.messageContainer);\n            }\n            this.emit('componentError', {\n                instance: this,\n                component: this.component,\n                message: messages[0].message,\n                messages,\n                external: !!external,\n            });\n            this.addMessages(messages, dirty, invalidInputRefs);\n            if (invalidInputRefs) {\n                this.setErrorClasses(invalidInputRefs, dirty, !!errors.length, !!messages.length);\n            }\n        }\n        else if (!errors.length || (errors[0].external === !!external)) {\n            if (this.refs.messageContainer) {\n                this.empty(this.refs.messageContainer);\n            }\n            if (this.refs.modalMessageContainer) {\n                this.empty(this.refs.modalMessageContainer);\n            }\n            if (invalidInputRefs) {\n                this.setErrorClasses(invalidInputRefs, dirty, !!errors.length, !!messages.length);\n            }\n            this.clearErrorClasses();\n        }\n        this._visibleErrors = messages;\n        return messages;\n    }\n    /**\n     * Determines if the value of this component is hidden from the user as if it is coming from the server, but is\n     * protected.\n     * @returns {boolean|*} - TRUE if the value is hidden.\n     */\n    isValueHidden() {\n        if (this.component.protected && this.root.editing) {\n            return false;\n        }\n        if (!this.root || !this.root.hasOwnProperty('editing')) {\n            return false;\n        }\n        if (!this.root || !this.root.editing) {\n            return false;\n        }\n        return (this.component.protected || !this.component.persistent || (this.component.persistent === 'client-only'));\n    }\n    shouldSkipValidation(data, row, flags = {}) {\n        const rules = [\n            // Do not validate if the flags say not too.\n            () => flags.noValidate,\n            // Force valid if component is read-only\n            () => this.options.readOnly,\n            // Do not check validations if component is not an input component.\n            () => !this.hasInput,\n            // Check to see if we are editing and if so, check component persistence.\n            () => this.isValueHidden(),\n            // Force valid if component is hidden.\n            () => {\n                if (!this.component.validateWhenHidden && (!this.visible || !this.checkCondition(row, data))) {\n                    // If this component is forced valid when it is hidden, then we also need to reset the errors for this component.\n                    this._errors = [];\n                    return true;\n                }\n                return false;\n            }\n        ];\n        return rules.some(pred => pred());\n    }\n    // Maintain reverse compatibility.\n    whenReady() {\n        console.warn('The whenReady() method has been deprecated. Please use the dataReady property instead.');\n        return this.dataReady;\n    }\n    get dataReady() {\n        return Promise.resolve();\n    }\n    /**\n     * Prints out the value of this component as a string value.\n     * @param {*} value - The value to print out.\n     * @returns {string} - The string representation of the value.\n     */\n    asString(value) {\n        value = value || this.getValue();\n        return (Array.isArray(value) ? value : [value]).map(lodash_1.default.toString).join(', ');\n    }\n    /**\n     * Return if the component is disabled.\n     * @returns {boolean} - TRUE if the component is disabled.\n     */\n    get disabled() {\n        return this._disabled || this.parentDisabled;\n    }\n    /**\n     * Disable this component.\n     * @param {boolean} disabled - TRUE to disable the component.\n     */\n    set disabled(disabled) {\n        this._disabled = disabled;\n    }\n    setDisabled(element, disabled) {\n        if (!element) {\n            return;\n        }\n        element.disabled = disabled;\n        if (disabled) {\n            element.setAttribute('disabled', 'disabled');\n        }\n        else {\n            element.removeAttribute('disabled');\n        }\n    }\n    setLoading(element, loading) {\n        if (!element || (element.loading === loading)) {\n            return;\n        }\n        element.loading = loading;\n        if (!element.loader && loading) {\n            element.loader = this.ce('i', {\n                class: `${this.iconClass('refresh', true)} button-icon-right`\n            });\n        }\n        if (element.loader) {\n            if (loading) {\n                this.appendTo(element.loader, element);\n            }\n            else {\n                this.removeChildFrom(element.loader, element);\n            }\n        }\n    }\n    selectOptions(select, tag, options, defaultValue) {\n        lodash_1.default.each(options, (option) => {\n            const attrs = {\n                value: option.value\n            };\n            if (defaultValue !== undefined && (option.value === defaultValue)) {\n                attrs.selected = 'selected';\n            }\n            const optionElement = this.ce('option', attrs);\n            optionElement.appendChild(this.text(option.label));\n            select.appendChild(optionElement);\n        });\n    }\n    setSelectValue(select, value) {\n        const options = select.querySelectorAll('option');\n        lodash_1.default.each(options, (option) => {\n            if (option.value === value) {\n                option.setAttribute('selected', 'selected');\n            }\n            else {\n                option.removeAttribute('selected');\n            }\n        });\n        if (select.onchange) {\n            select.onchange();\n        }\n        if (select.onselect) {\n            select.onselect();\n        }\n    }\n    getRelativePath(path) {\n        const keyPart = `.${this.key}`;\n        const thisPath = this.isInputComponent ? this.path\n            : this.path.slice(0).replace(keyPart, '');\n        return path.replace(thisPath, '');\n    }\n    clear() {\n        this.detach();\n        this.empty(this.getElement());\n    }\n    append(element) {\n        this.appendTo(element, this.element);\n    }\n    prepend(element) {\n        this.prependTo(element, this.element);\n    }\n    removeChild(element) {\n        this.removeChildFrom(element, this.element);\n    }\n    detachLogic() {\n        this.logic.forEach(logic => {\n            if (logic.trigger.type === 'event') {\n                const event = this.interpolate(logic.trigger.event);\n                this.off(event); // only applies to callbacks on this component\n            }\n        });\n    }\n    attachLogic() {\n        // Do not attach logic during builder mode.\n        if (this.builderMode) {\n            return;\n        }\n        this.logic.forEach((logic) => {\n            if (logic.trigger.type === 'event') {\n                const event = this.interpolate(logic.trigger.event);\n                this.on(event, (...args) => {\n                    const newComponent = (0, utils_1.fastCloneDeep)(this.originalComponent);\n                    if (this.applyActions(newComponent, logic.actions, args)) {\n                        // If component definition changed, replace it.\n                        if (!lodash_1.default.isEqual(this.component, newComponent)) {\n                            this.component = newComponent;\n                            const visible = this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden;\n                            const disabled = this.shouldDisabled;\n                            // Change states which won't be recalculated during redrawing\n                            if (this.visible !== visible) {\n                                this.visible = visible;\n                            }\n                            if (this.disabled !== disabled) {\n                                this.disabled = disabled;\n                            }\n                            this.redraw();\n                        }\n                    }\n                }, true);\n            }\n        });\n    }\n    /**\n     * Get the element information.\n     * @returns {*} - The components \"input\" DOM element information.\n     */\n    elementInfo() {\n        const attributes = {\n            name: this.options.name,\n            type: this.component.inputType || 'text',\n            class: 'form-control',\n            lang: this.options.language\n        };\n        if (this.component.placeholder) {\n            attributes.placeholder = this.t(this.component.placeholder, { _userInput: true });\n        }\n        if (this.component.tabindex) {\n            attributes.tabindex = this.component.tabindex;\n        }\n        if (this.disabled) {\n            attributes.disabled = 'disabled';\n        }\n        lodash_1.default.defaults(attributes, this.component.attributes);\n        return {\n            type: 'input',\n            component: this.component,\n            changeEvent: 'change',\n            attr: attributes\n        };\n    }\n    autofocus() {\n        const hasAutofocus = this.component.autofocus && !this.builderMode && !this.options.preview;\n        if (hasAutofocus) {\n            this.on('render', () => this.focus(), true);\n        }\n    }\n    scrollIntoView(element = this.element, verticalOnly) {\n        if (!element) {\n            return;\n        }\n        const { left, top } = element.getBoundingClientRect();\n        window.scrollTo(verticalOnly ? window.scrollX : left + window.scrollX, top + window.scrollY);\n    }\n    focus(index) {\n        var _a, _b, _c, _d;\n        if ('beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n        if (!index && !lodash_1.default.isNumber(index) && ((_b = (_a = this.refs) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.length)) {\n            index = this.refs.input.length - 1;\n        }\n        if ((_c = this.refs.input) === null || _c === void 0 ? void 0 : _c.length) {\n            const focusingInput = this.refs.input[index];\n            if (((_d = this.component.widget) === null || _d === void 0 ? void 0 : _d.type) === 'calendar') {\n                const sibling = focusingInput.nextSibling;\n                if (sibling) {\n                    sibling.focus();\n                }\n            }\n            else {\n                focusingInput.focus();\n            }\n        }\n        if (this.refs.openModal) {\n            this.refs.openModal.focus();\n        }\n        if (this.parent.refs.openModal) {\n            this.parent.refs.openModal.focus();\n        }\n    }\n    /**\n     * Get `Formio` instance for working with files\n     * @returns {import('@formio/core').Formio} - The Formio instance file service.\n     */\n    get fileService() {\n        if (this.options.fileService) {\n            return this.options.fileService;\n        }\n        if (this.options.formio) {\n            return this.options.formio;\n        }\n        if (this.root && this.root.formio) {\n            return this.root.formio;\n        }\n        const formio = new Formio_1.Formio();\n        // If a form is loaded, then make sure to set the correct formUrl.\n        if (this.root && this.root._form && this.root._form._id) {\n            formio.formUrl = `${formio.projectUrl}/form/${this.root._form._id}`;\n        }\n        return formio;\n    }\n    resetCaches() { }\n    get previewMode() {\n        return false;\n    }\n}\nexports[\"default\"] = Component;\nComponent.externalLibraries = {};\nComponent.requireLibrary = function (name, property, src, polling) {\n    if (!Component.externalLibraries.hasOwnProperty(name)) {\n        Component.externalLibraries[name] = {};\n        Component.externalLibraries[name].ready = new Promise((resolve, reject) => {\n            Component.externalLibraries[name].resolve = resolve;\n            Component.externalLibraries[name].reject = reject;\n        });\n        const callbackName = `${name}Callback`;\n        if (!polling && !window[callbackName]) {\n            window[callbackName] = function () {\n                this.resolve();\n            }.bind(Component.externalLibraries[name]);\n        }\n        // See if the plugin already exists.\n        const plugin = (0, utils_1.getScriptPlugin)(property);\n        if (plugin) {\n            Component.externalLibraries[name].resolve(plugin);\n        }\n        else {\n            src = Array.isArray(src) ? src : [src];\n            src.forEach((lib) => {\n                let attrs = {};\n                let elementType = '';\n                if (typeof lib === 'string') {\n                    lib = {\n                        type: 'script',\n                        src: lib\n                    };\n                }\n                switch (lib.type) {\n                    case 'script':\n                        elementType = 'script';\n                        attrs = {\n                            src: lib.src,\n                            type: 'text/javascript',\n                            defer: true,\n                            async: true\n                        };\n                        break;\n                    case 'styles':\n                        elementType = 'link';\n                        attrs = {\n                            href: lib.src,\n                            rel: 'stylesheet'\n                        };\n                        break;\n                }\n                // Add the script to the top page.\n                const script = document.createElement(elementType);\n                for (const attr in attrs) {\n                    script.setAttribute(attr, attrs[attr]);\n                }\n                document.getElementsByTagName('head')[0].appendChild(script);\n            });\n            // if no callback is provided, then check periodically for the script.\n            if (polling) {\n                setTimeout(function checkLibrary() {\n                    const plugin = (0, utils_1.getScriptPlugin)(property);\n                    if (plugin) {\n                        Component.externalLibraries[name].resolve(plugin);\n                    }\n                    else {\n                        // check again after 200 ms.\n                        setTimeout(checkLibrary, 200);\n                    }\n                }, 200);\n            }\n        }\n    }\n    return Component.externalLibraries[name].ready;\n};\nComponent.libraryReady = function (name) {\n    if (Component.externalLibraries.hasOwnProperty(name) &&\n        Component.externalLibraries[name].ready) {\n        return Component.externalLibraries[name].ready;\n    }\n    return Promise.reject(`${name} library was not required.`);\n};\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/component/Component.js?");
 
 /***/ }),
 
@@ -5103,7 +5103,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Field_1 = __importDefault(__webpack_require__(/*! ../field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst Components_1 = __importDefault(__webpack_require__(/*! ../../Components */ \"./lib/cjs/components/Components.js\"));\n'';\nconst utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst process_1 = __webpack_require__(/*! @formio/core/process */ \"./node_modules/@formio/core/lib/process/index.js\");\n/**\n * NestedComponent class.\n * @augments Field\n */\nclass NestedComponent extends Field_1.default {\n    static schema(...extend) {\n        return Field_1.default.schema({\n            tree: false,\n            lazyLoad: false,\n        }, ...extend);\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        this.type = 'components';\n        /**\n         * The collapsed state of this NestedComponent.\n         * @type {boolean}\n         * @default false\n         * @private\n         */\n        this._collapsed = !!this.component.collapsed;\n    }\n    get defaultSchema() {\n        return NestedComponent.schema();\n    }\n    /**\n     * Get the schema for the NestedComponent.\n     * @returns {object} The schema for the NestedComponent.\n     * @override\n     */\n    get schema() {\n        const schema = super.schema;\n        const components = lodash_1.default.uniqBy(this.getComponents(), 'component.key');\n        schema.components = lodash_1.default.map(components, 'schema');\n        return schema;\n    }\n    /**\n     * Get collapsed state.\n     * @returns {boolean} The collapsed state.\n     */\n    get collapsed() {\n        return this._collapsed;\n    }\n    /**\n     * Set collapsed state.\n     * @param {boolean} value - The collapsed state.\n     * @returns {void}\n     */\n    collapse(value) {\n        const promise = this.redraw();\n        if (!value) {\n            this.checkValidity(this.data, !this.pristine);\n        }\n        return promise;\n    }\n    /**\n     * Set collapsed state.\n     * @param {boolean} value - The collapsed state.\n     * @returns {void}\n     */\n    set collapsed(value) {\n        this._collapsed = value;\n        this.collapse(value);\n    }\n    /**\n     * Set visible state of parent and each child component.\n     * @param {boolean} value - The visible state.\n     * @returns {void}\n     */\n    set visible(value) {\n        // DO NOT CALL super here.  There is an issue where clearOnHide was getting triggered with\n        // subcomponents because the \"parentVisible\" flag was set to false when it should really be\n        // set to true.\n        const visibilityChanged = this._visible !== value;\n        this._visible = value;\n        const isVisible = this.visible;\n        const isConditionallyHidden = this.checkConditionallyHidden();\n        const forceShow = this.shouldForceShow();\n        const forceHide = this.shouldForceHide();\n        this.components.forEach((component) => {\n            // Set the parent visibility first since we may have nested components within nested components\n            // and they need to be able to determine their visibility based on the parent visibility.\n            component.parentVisible = isVisible;\n            component._parentConditionallyHidden = isConditionallyHidden;\n            let visible;\n            if (component.hasCondition()) {\n                component._conditionallyHidden = component.checkConditionallyHidden() || component._parentConditionallyHidden;\n                visible = !component.conditionallyHidden;\n            }\n            else {\n                visible = !component.component.hidden;\n            }\n            if (forceShow || visible) {\n                component.visible = true;\n            }\n            else if (forceHide || !isVisible || !visible) {\n                component.visible = false;\n            }\n            // If hiding a nested component, clear all errors below.\n            if (!component.visible) {\n                component.error = '';\n            }\n        });\n        if (visibilityChanged) {\n            this.redraw();\n        }\n    }\n    /**\n     * Get visible state.\n     * @returns {boolean} The visible state.\n     */\n    get visible() {\n        return super.visible;\n    }\n    /**\n     * Set parent visibility.\n     * @param {boolean} value - The parent visibility.\n     * @returns {void}\n     */\n    set parentVisible(value) {\n        super.parentVisible = value;\n        this.components.forEach(component => component.parentVisible = this.visible);\n    }\n    /**\n     * Get parent visibility.\n     * @returns {boolean} The parent visibility.\n     */\n    get parentVisible() {\n        return super.parentVisible;\n    }\n    /**\n     * Get the disabled state.\n     * @returns {boolean} - The disabled state.\n     */\n    get disabled() {\n        return super.disabled;\n    }\n    /**\n     * Set the disabled state.\n     * @param {boolean} disabled - The disabled state.\n     */\n    set disabled(disabled) {\n        super.disabled = disabled;\n        this.components.forEach((component) => component.parentDisabled = disabled);\n    }\n    /**\n     * Set parent disabled state.\n     * @param {boolean} value - The parent disabled state.\n     * @returns {void}\n     */\n    set parentDisabled(value) {\n        super.parentDisabled = value;\n        this.components.forEach(component => {\n            component.parentDisabled = this.disabled;\n        });\n    }\n    /**\n     * Get parent disabled state.\n     * @returns {boolean} The parent disabled state.\n     */\n    get parentDisabled() {\n        return super.parentDisabled;\n    }\n    /**\n     * Get ready state from all components.\n     * @returns {Promise<Array>} - The promise that resolves when all components are ready.\n     */\n    get ready() {\n        return Promise.all(this.getComponents().map(component => component.ready));\n    }\n    /**\n     * Get currentForm object.\n     * @returns {object} - The current form object.\n     */\n    get currentForm() {\n        return super.currentForm;\n    }\n    /**\n     * Set currentForm object.\n     * @param {object} instance - The current form object.\n     * @returns {void}\n     */\n    set currentForm(instance) {\n        super.currentForm = instance;\n        this.getComponents().forEach(component => {\n            component.currentForm = instance;\n        });\n    }\n    /**\n     * Get Row Index.\n     * @returns {number} - The row index.\n     */\n    get rowIndex() {\n        return this._rowIndex;\n    }\n    /**\n     * Set Row Index to row and update each component.\n     * @param {number} value - The row index.\n     * @returns {void}\n     */\n    set rowIndex(value) {\n        var _a, _b;\n        this._rowIndex = value;\n        this.paths = (0, utils_1.getComponentPaths)(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths) || {})), { dataIndex: value }));\n        this.eachComponent((component) => {\n            component.rowIndex = value;\n        });\n    }\n    /**\n     * Get Contextual data of the component.\n     * @returns {object} - The contextual data of the component.\n     * @override\n     */\n    componentContext() {\n        return this._data;\n    }\n    /**\n     * Get the data of the component.\n     * @returns {object} - The data of the component.\n     * @override\n     */\n    get data() {\n        return this._data;\n    }\n    /**\n     * Set the data of the component.\n     * @param {object} value - The data of the component.\n     * @returns {void}\n     */\n    set data(value) {\n        this._data = value;\n        this.eachComponent((component) => {\n            component.data = this.componentContext(component);\n        });\n    }\n    /**\n     * Get components array.\n     * @returns {Array} - The components array.\n     */\n    getComponents() {\n        return this.components || [];\n    }\n    /**\n     * Perform a deep iteration over every component, including those\n     * within other container based components.\n     * @param {Function} fn - Called for every component.\n     * @param {any} options - The options to include with this everyComponent call.\n     */\n    everyComponent(fn, options = {}) {\n        const components = this.getComponents();\n        lodash_1.default.each(components, (component, index) => {\n            if (fn(component, components, index) === false) {\n                return false;\n            }\n            if (typeof component.everyComponent === 'function') {\n                if (component.everyComponent(fn, options) === false) {\n                    return false;\n                }\n            }\n        });\n    }\n    /**\n     * Check if the component has a component.\n     * @param {import('@formio/core').Component} component - The component to check.\n     * @returns {boolean} - TRUE if the component has a component, FALSE otherwise.\n     */\n    hasComponent(component) {\n        let result = false;\n        this.everyComponent((comp) => {\n            if (comp === component) {\n                result = true;\n                return false;\n            }\n        });\n        return result;\n    }\n    /**\n     * Get the flattened components of this NestedComponent.\n     * @returns {object} - The flattened components of this NestedComponent.\n     */\n    flattenComponents() {\n        const result = {};\n        this.everyComponent((component) => {\n            result[component.component.flattenAs || component.key] = component;\n        });\n        return result;\n    }\n    /**\n     * Perform an iteration over each component within this container component.\n     * @param {Function} fn - Called for each component\n     */\n    eachComponent(fn) {\n        lodash_1.default.each(this.getComponents(), (component, index) => {\n            if (fn(component, index) === false) {\n                return false;\n            }\n        });\n    }\n    /**\n     * Returns a component provided a key. This performs a deep search within the component tree.\n     * @param {string} path - The path to the component.\n     * @returns {any} - The component that is located.\n     */\n    getComponent(path) {\n        var _a;\n        path = (0, utils_1.getStringFromComponentPath)(path);\n        const matches = {\n            path: undefined,\n            fullPath: undefined,\n            localPath: undefined,\n            fullLocalPath: undefined,\n            dataPath: undefined,\n            localDataPath: undefined,\n            key: undefined,\n        };\n        this.everyComponent((component) => {\n            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;\n            // All searches are relative to this component so replace this path from the child paths.\n            (0, utils_1.componentMatches)(component.component, {\n                path: (_b = (_a = component.paths) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.replace(new RegExp(`^${(_c = this.paths) === null || _c === void 0 ? void 0 : _c.path}\\\\.?`), ''),\n                fullPath: (_e = (_d = component.paths) === null || _d === void 0 ? void 0 : _d.fullPath) === null || _e === void 0 ? void 0 : _e.replace(new RegExp(`^${(_f = this.paths) === null || _f === void 0 ? void 0 : _f.fullPath}\\\\.?`), ''),\n                localPath: (_h = (_g = component.paths) === null || _g === void 0 ? void 0 : _g.localPath) === null || _h === void 0 ? void 0 : _h.replace(new RegExp(`^${(_j = this.paths) === null || _j === void 0 ? void 0 : _j.localPath}\\\\.?`), ''),\n                fullLocalPath: (_l = (_k = component.paths) === null || _k === void 0 ? void 0 : _k.fullLocalPath) === null || _l === void 0 ? void 0 : _l.replace(new RegExp(`^${(_m = this.paths) === null || _m === void 0 ? void 0 : _m.fullLocalPath}\\\\.?`), ''),\n                dataPath: (_p = (_o = component.paths) === null || _o === void 0 ? void 0 : _o.dataPath) === null || _p === void 0 ? void 0 : _p.replace(new RegExp(`^${(_q = this.paths) === null || _q === void 0 ? void 0 : _q.dataPath}\\\\.?`), ''),\n                localDataPath: (_s = (_r = component.paths) === null || _r === void 0 ? void 0 : _r.localDataPath) === null || _s === void 0 ? void 0 : _s.replace(new RegExp(`^${(_t = this.paths) === null || _t === void 0 ? void 0 : _t.localDataPath}\\\\.?`), ''),\n            }, path, this.rowIndex, matches, (type, match) => {\n                match.instance = component;\n                return match;\n            });\n        });\n        return (_a = (0, utils_1.getBestMatch)(matches)) === null || _a === void 0 ? void 0 : _a.instance;\n    }\n    /**\n     * Return a component provided the Id of the component.\n     * @param {string} id - The Id of the component.\n     * @param {Function} fn - Called with the component once it is retrieved.\n     * @returns {object} - The component retrieved.\n     */\n    getComponentById(id, fn = null) {\n        let comp = null;\n        this.everyComponent((component, components) => {\n            if (component.id === id) {\n                comp = component;\n                if (fn) {\n                    fn(component, components);\n                }\n                return false;\n            }\n        });\n        return comp;\n    }\n    /**\n     * Create a new component and add it to the components array.\n     * @param {import('@formio/core').Component} component - The component JSON schema to create.\n     * @param {object} options - The options to create the component with.\n     * @param {import('@formio/core').DataObject} data - The submission data object to house the data for this component.\n     * @param {import('@formio/core').Component} [before] - The component before which to add this component.\n     * @param {import('@formio/core').Component} [replacedComp] - The component to replace with this component.\n     * @returns {any} - The created component instance.\n     */\n    createComponent(component, options, data, before, replacedComp) {\n        if (!component) {\n            return;\n        }\n        options = options || this.options;\n        data = data || this.data;\n        options.parent = this;\n        options.parentVisible = this.visible;\n        options.parentConditionallyHidden = this.conditionallyHidden;\n        options.root = (options === null || options === void 0 ? void 0 : options.root) || this.root || this;\n        options.localRoot = this.localRoot;\n        options.skipInit = true;\n        if (!(options.display === 'pdf' && this.builderMode)) {\n            component.id = (0, utils_1.getRandomComponentId)();\n        }\n        const comp = Components_1.default.create(component, options, data, true);\n        comp.init();\n        if (component.internal) {\n            return comp;\n        }\n        if (before) {\n            const index = lodash_1.default.findIndex(this.components, { id: before.id });\n            if (index !== -1) {\n                this.components.splice(index, 0, comp);\n            }\n            else {\n                this.components.push(comp);\n            }\n        }\n        else if (replacedComp) {\n            const index = lodash_1.default.findIndex(this.components, { id: replacedComp.id });\n            if (index !== -1) {\n                this.components[index] = comp;\n            }\n            else {\n                this.components.push(comp);\n            }\n        }\n        else {\n            this.components.push(comp);\n        }\n        return comp;\n    }\n    getContainer() {\n        return this.element;\n    }\n    get componentComponents() {\n        return this.component.components || [];\n    }\n    get nestedKey() {\n        return `nested-${this.key}`;\n    }\n    get templateName() {\n        return 'container';\n    }\n    init() {\n        this.components = this.components || [];\n        this.addComponents();\n        return super.init();\n    }\n    /**\n     * Add a new component instance to the components array.\n     * @param {import('@formio/core').DataObject} [data] - The Submission data for this component.\n     * @param {object} [options] - The options for this component.\n     */\n    addComponents(data, options) {\n        data = data || this.data;\n        this.components = this.components || [];\n        options = options || this.options;\n        if (options.components) {\n            this.components = options.components;\n        }\n        else {\n            const components = this.hook('addComponents', this.componentComponents, this) || [];\n            components.forEach((component) => this.addComponent(component, data));\n        }\n    }\n    /**\n     * Add a new component to the components array.\n     * @param {import('@formio/core').Component} component - The component JSON schema to add.\n     * @param {object} data - The submission data object to house the data for this component.\n     * @param {HTMLElement} before - A DOM element to insert this element before.\n     * @param {boolean} [noAdd] - A possibly extraneous boolean flag.\n     * @returns {any} - The created component instance.\n     */\n    addComponent(component, data = null, before = null, noAdd = false) {\n        data = data || this.data;\n        this.components = this.components || [];\n        component = this.hook('addComponent', component, data, before, noAdd);\n        const comp = this.createComponent(component, this.options, data, before ? before : null);\n        if (noAdd) {\n            return comp;\n        }\n        return comp;\n    }\n    beforeFocus() {\n        if (this.parent && 'beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n    }\n    render(children) {\n        // If already rendering, don't re-render.\n        return super.render(children || this.renderTemplate(this.templateName, {\n            children: !this.visible ? '' : this.renderComponents(),\n            nestedKey: this.nestedKey,\n            collapsed: this.options.pdf ? false : this.collapsed,\n        }));\n    }\n    renderComponents(components) {\n        components = components || this.getComponents();\n        const children = components.map(component => component.render());\n        return this.renderTemplate('components', {\n            children,\n            components,\n        });\n    }\n    attach(element) {\n        const superPromise = super.attach(element);\n        this.loadRefs(element, {\n            header: 'single',\n            collapsed: this.collapsed,\n            [this.nestedKey]: 'single',\n            messageContainer: 'single-scope',\n        });\n        let childPromise = Promise.resolve();\n        if (this.refs[this.nestedKey]) {\n            childPromise = this.attachComponents(this.refs[this.nestedKey]);\n        }\n        if (!this.visible) {\n            this.attachComponentsLogic();\n        }\n        if (this.component.collapsible && this.refs.header) {\n            this.addEventListener(this.refs.header, 'click', () => {\n                this.collapsed = !this.collapsed;\n            });\n            this.addEventListener(this.refs.header, 'keydown', (e) => {\n                if (e.keyCode === 13 || e.keyCode === 32) {\n                    e.preventDefault();\n                    this.collapsed = !this.collapsed;\n                }\n            });\n        }\n        return Promise.all([\n            superPromise,\n            childPromise,\n        ]);\n    }\n    /**\n     * Attach the logic to the components.\n     * @param {import('@formio/core').Component[]} components - The components to attach logic to.\n     */\n    attachComponentsLogic(components) {\n        components = components || this.components;\n        lodash_1.default.each(components, (comp) => {\n            comp.attachLogic();\n            if (lodash_1.default.isFunction(comp.attachComponentsLogic)) {\n                comp.attachComponentsLogic();\n            }\n        });\n    }\n    attachComponents(element, components, container) {\n        components = components || this.components;\n        container = container || this.component.components;\n        element = this.hook('attachComponents', element, components, container, this);\n        if (!element) {\n            // Return a non-resolving promise.\n            return (new Promise(() => { }));\n        }\n        let index = 0;\n        const promises = [];\n        Array.prototype.slice.call(element.children).forEach(child => {\n            if (!child.getAttribute('data-noattach') && components[index]) {\n                promises.push(components[index].attach(child));\n                index++;\n            }\n        });\n        return Promise.all(promises);\n    }\n    /**\n     * Remove a component from the components array and from the children object\n     * @param {import('@formio/core').Component} component - The component to remove from the components.\n     * @param {import('@formio/core').Component[]} components - An array of components to remove this component from.\n     * @param {boolean} [all] - If set to TRUE will cascade remove all components.\n     */\n    removeComponent(component, components, all = false) {\n        components = components || this.components;\n        component.destroy(all);\n        lodash_1.default.remove(components, { id: component.id });\n        if (this.componentsMap[component.path]) {\n            delete this.componentsMap[component.path];\n        }\n    }\n    /**\n     * Removes a component provided the API key of that component.\n     * @param {string} key - The API key of the component to remove.\n     * @param {Function} fn - Called once the component is removed.\n     * @returns {null|void} - Returns nothing if the component is not found.\n     */\n    removeComponentByKey(key, fn = null) {\n        const comp = this.getComponent(key, (component, components) => {\n            this.removeComponent(component, components);\n            if (fn) {\n                fn(component, components);\n            }\n        });\n        if (!comp) {\n            if (fn) {\n                fn(null);\n            }\n            return null;\n        }\n    }\n    /**\n     * Removes a component provided the Id of the component.\n     * @param {string} id - The Id of the component to remove.\n     * @param {Function} fn - Called when the component is removed.\n     * @returns {null|void} - Returns nothing if the component is not found.\n     */\n    removeComponentById(id, fn = null) {\n        const comp = this.getComponentById(id, (component, components) => {\n            this.removeComponent(component, components);\n            if (fn) {\n                fn(component, components);\n            }\n        });\n        if (!comp) {\n            if (fn) {\n                fn(null);\n            }\n            return null;\n        }\n    }\n    updateValue(value, flags = {}) {\n        return this.components.reduce((changed, comp) => {\n            return comp.updateValue(null, flags) || changed;\n        }, super.updateValue(value, flags));\n    }\n    shouldSkipValidation(data, row, flags) {\n        // Nested components with no input should not be validated.\n        if (!this.component.input) {\n            return true;\n        }\n        else {\n            return super.shouldSkipValidation(data, row, flags);\n        }\n    }\n    checkData(data, flags, row, components) {\n        if (this.builderMode) {\n            return true;\n        }\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        components = components && lodash_1.default.isArray(components) ? components : this.getComponents();\n        super.checkData(data, Object.assign({}, flags), row);\n        components.forEach((comp) => comp.checkData(data, Object.assign({}, flags), row));\n    }\n    checkConditions(data, flags, row) {\n        // check conditions of parent component first, because it may influence on visibility of it's children\n        const check = super.checkConditions(data, flags, row);\n        //row data of parent component not always corresponds to row of nested components, use comp.data as row data for children instead\n        this.getComponents().forEach(comp => comp.checkConditions(data, flags, comp.data));\n        return check;\n    }\n    clearOnHide(show) {\n        super.clearOnHide(show);\n        if (this.component.clearOnHide) {\n            if (this.allowData && !this.hasValue() && !this.conditionallyHidden) {\n                this.dataValue = this.defaultValue;\n            }\n            if (this.hasValue()) {\n                this.restoreComponentsContext();\n            }\n        }\n        this.getComponents().forEach(component => component.clearOnHide(show));\n    }\n    restoreComponentsContext() {\n        this.getComponents().forEach((component) => component.data = this.dataValue);\n    }\n    /**\n     * Allow components to hook into the next page trigger to perform their own logic.\n     * @param {Function} next - The callback to continue to the next page.\n     * @returns {Promise} - A promise when the page has been processed.\n     */\n    beforePage(next) {\n        return Promise.all(this.getComponents().map((comp) => comp.beforePage(next)));\n    }\n    /**\n     * Allow components to hook into the submission to provide their own async data.\n     * @returns {Promise} - Returns a promise when the constituent beforeSubmit functions are complete.\n     */\n    beforeSubmit() {\n        return Promise.allSettled(this.getComponents().map((comp) => comp.beforeSubmit()));\n    }\n    calculateValue(data, flags, row) {\n        // Do not iterate into children and calculateValues if this nested component is conditionally hidden.\n        if (this.conditionallyHidden) {\n            return false;\n        }\n        return this.getComponents().reduce((changed, comp) => comp.calculateValue(data, flags, row) || changed, super.calculateValue(data, flags, row));\n    }\n    isLastPage() {\n        return this.pages.length - 1 === this.page;\n    }\n    isValid(data, dirty) {\n        return this.getComponents().reduce((valid, comp) => comp.isValid(data, dirty) && valid, super.isValid(data, dirty));\n    }\n    validationProcessor({ scope, data, row, instance, paths }, flags) {\n        var _a;\n        const { dirty } = flags;\n        if (this.root.hasExtraPages && this.page !== this.root.page) {\n            instance = ((_a = this.componentsMap) === null || _a === void 0 ? void 0 : _a.hasOwnProperty(paths.dataPath))\n                ? this.componentsMap[paths.dataPath]\n                : this.getComponent(paths.dataPath);\n        }\n        if (!instance) {\n            return;\n        }\n        instance.checkComponentValidity(data, dirty, row, flags, scope.errors);\n        if (instance.processOwnValidation) {\n            scope.noRecurse = true;\n        }\n    }\n    /**\n     * Perform a validation on all child components of this nested component.\n     * @param {import('@formio/core').Component[]} components - The components to validate.\n     * @param {import('@formio/core').DataObject} data - The data to validate.\n     * @param {object} flags - The flags to use when validating.\n     * @returns {Promise<Array>|Array} - The errors if any exist.\n     */\n    validateComponents(components = null, data = null, flags = {}) {\n        components = components || this.component.components;\n        data = data || this.rootValue;\n        const { async, dirty, process } = flags;\n        const validationProcessorProcess = (context) => this.validationProcessor(context, flags);\n        const checkModalProcessorProcess = ({ instance, component, components }) => {\n            // If we just validated the last component, and there are errors from our parent, then we need to show a model of those errors.\n            if (instance &&\n                instance.parent &&\n                (component === components[components.length - 1]) &&\n                instance.parent.componentModal) {\n                instance.parent.checkModal(instance.parent.childErrors, dirty);\n            }\n        };\n        const processorContext = {\n            process: process || 'unknown',\n            components,\n            instances: this.componentsMap,\n            data: data,\n            local: !!flags.local,\n            scope: { errors: [] },\n            parent: this.component,\n            parentPaths: this.paths,\n            processors: [\n                {\n                    process: validationProcessorProcess,\n                    processSync: validationProcessorProcess\n                },\n                {\n                    process: checkModalProcessorProcess,\n                    processSync: checkModalProcessorProcess\n                }\n            ]\n        };\n        return async ? (0, process_1.process)(processorContext).then((scope) => scope.errors) : (0, process_1.processSync)(processorContext).errors;\n    }\n    /**\n     * Validate a nested component with data, or its own internal data.\n     * @param {import('@formio/core').DataObject} data - The data to validate.\n     * @param {object} flags - The flags to use when validating.\n     * @returns {Array} - The errors if any exist.\n     */\n    validate(data = null, flags = {}) {\n        data = data || this.rootValue;\n        return this.validateComponents(this.getComponents().map((component) => component.component), data, flags);\n    }\n    checkComponentValidity(data = null, dirty = false, row = null, flags = {}, allErrors = []) {\n        this.childErrors = [];\n        return super.checkComponentValidity(data, dirty, row, flags, allErrors);\n    }\n    /**\n     * Checks the validity of the component.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {*} row - The contextual row data for this component.\n     * @param {boolean} silentCheck - If the check should be silent and not set the error messages.\n     * @param {Array<any>} childErrors - An array of all errors that have occured so that it can be appended when another one occurs here.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    checkValidity(data = null, dirty = false, row = null, silentCheck = false, childErrors = []) {\n        childErrors.push(...this.validate(data, { dirty, silentCheck }));\n        return this.checkComponentValidity(data, dirty, row, { dirty, silentCheck }, childErrors) && childErrors.length === 0;\n    }\n    checkAsyncValidity(data = null, dirty = false, row = null, silentCheck = false) {\n        return this.ready.then(() => {\n            return this.validate(data, { dirty, silentCheck, async: true }).then((childErrors) => {\n                return this.checkComponentValidity(data, dirty, row, { dirty, silentCheck, async: true }, childErrors).then((valid) => {\n                    return valid && childErrors.length === 0;\n                });\n            });\n        });\n    }\n    setPristine(pristine) {\n        super.setPristine(pristine);\n        this.getComponents().forEach((comp) => comp.setPristine(pristine));\n    }\n    get isPristine() {\n        return this.pristine && this.getComponents().every((c) => c.isPristine);\n    }\n    get isDirty() {\n        return this.dirty && this.getComponents().every((c) => c.isDirty);\n    }\n    detach() {\n        this.components.forEach(component => {\n            component.detach();\n        });\n        super.detach();\n    }\n    clear() {\n        this.components.forEach(component => {\n            component.clear();\n        });\n        super.clear();\n    }\n    destroy(all = false) {\n        this.destroyComponents(all);\n        super.destroy(all);\n    }\n    destroyComponents(all = false) {\n        const components = this.getComponents().slice();\n        components.forEach((comp) => this.removeComponent(comp, this.components, all));\n        this.components = [];\n    }\n    get visibleErrors() {\n        return this.getComponents().reduce((errors, comp) => errors.concat(comp.visibleErrors || []), super.visibleErrors);\n    }\n    get errors() {\n        const thisErrors = super.errors;\n        return this.getComponents()\n            .reduce((errors, comp) => errors.concat(comp.errors || []), thisErrors)\n            .filter(err => err.level !== 'hidden');\n    }\n    getValue() {\n        return this.data;\n    }\n    resetValue() {\n        super.resetValue();\n        this.getComponents().forEach((comp) => comp.resetValue());\n        this.setPristine(true);\n    }\n    get dataReady() {\n        return Promise.all(this.getComponents().map((component) => component.dataReady));\n    }\n    setNestedValue(component, value, flags = {}) {\n        component._data = this.componentContext(component);\n        if (component.type === 'button') {\n            return false;\n        }\n        if (component.type === 'components') {\n            if (component.tree && component.hasValue(value)) {\n                return component.setValue(lodash_1.default.get(value, component.key), flags);\n            }\n            return component.setValue(value, flags);\n        }\n        else if (value && component.hasValue(value)) {\n            return component.setValue(lodash_1.default.get(value, component.key), flags);\n        }\n        else if ((!this.rootPristine || component.visible) && component.shouldAddDefaultValue) {\n            flags.noValidate = !flags.dirty;\n            flags.resetValue = true;\n            return component.setValue(component.defaultValue, flags);\n        }\n    }\n    setValue(value, flags = {}) {\n        if (!value) {\n            return false;\n        }\n        return this.getComponents().reduce((changed, component) => {\n            return this.setNestedValue(component, value, flags, changed) || changed;\n        }, false);\n    }\n    get lazyLoad() {\n        var _a;\n        return (_a = this.component.lazyLoad) !== null && _a !== void 0 ? _a : false;\n    }\n}\nexports[\"default\"] = NestedComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/nested/NestedComponent.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Field_1 = __importDefault(__webpack_require__(/*! ../field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst Components_1 = __importDefault(__webpack_require__(/*! ../../Components */ \"./lib/cjs/components/Components.js\"));\n'';\nconst utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst process_1 = __webpack_require__(/*! @formio/core/process */ \"./node_modules/@formio/core/lib/process/index.js\");\n/**\n * NestedComponent class.\n * @augments Field\n */\nclass NestedComponent extends Field_1.default {\n    static schema(...extend) {\n        return Field_1.default.schema({\n            tree: false,\n            lazyLoad: false,\n        }, ...extend);\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        this.type = 'components';\n        /**\n         * The collapsed state of this NestedComponent.\n         * @type {boolean}\n         * @default false\n         * @private\n         */\n        this._collapsed = !!this.component.collapsed;\n    }\n    get defaultSchema() {\n        return NestedComponent.schema();\n    }\n    /**\n     * Get the schema for the NestedComponent.\n     * @returns {object} The schema for the NestedComponent.\n     * @override\n     */\n    get schema() {\n        const schema = super.schema;\n        const components = lodash_1.default.uniqBy(this.getComponents(), 'component.key');\n        schema.components = lodash_1.default.map(components, 'schema');\n        return schema;\n    }\n    /**\n     * Get collapsed state.\n     * @returns {boolean} The collapsed state.\n     */\n    get collapsed() {\n        return this._collapsed;\n    }\n    /**\n     * Set collapsed state.\n     * @param {boolean} value - The collapsed state.\n     * @returns {void}\n     */\n    collapse(value) {\n        const promise = this.redraw();\n        if (!value) {\n            this.checkValidity(this.data, !this.pristine);\n        }\n        return promise;\n    }\n    /**\n     * Set collapsed state.\n     * @param {boolean} value - The collapsed state.\n     * @returns {void}\n     */\n    set collapsed(value) {\n        this._collapsed = value;\n        this.collapse(value);\n    }\n    /**\n     * Set visible state of parent and each child component.\n     * @param {boolean} value - The visible state.\n     * @returns {void}\n     */\n    set visible(value) {\n        // DO NOT CALL super here.  There is an issue where clearOnHide was getting triggered with\n        // subcomponents because the \"parentVisible\" flag was set to false when it should really be\n        // set to true.\n        const visibilityChanged = this._visible !== value;\n        this._visible = value;\n        const isVisible = this.visible;\n        const forceShow = this.shouldForceShow();\n        const forceHide = this.shouldForceHide();\n        this.components.forEach((component) => {\n            // Set the parent visibility first since we may have nested components within nested components\n            // and they need to be able to determine their visibility based on the parent visibility.\n            component.parentVisible = isVisible;\n            let visible;\n            if (component.hasCondition()) {\n                visible = !component.conditionallyHidden();\n            }\n            else {\n                visible = !component.component.hidden;\n            }\n            if (forceShow || visible) {\n                component.visible = true;\n            }\n            else if (forceHide || !isVisible || !visible) {\n                component.visible = false;\n            }\n            // If hiding a nested component, clear all errors below.\n            if (!component.visible) {\n                component.error = '';\n            }\n        });\n        if (visibilityChanged) {\n            this.redraw();\n        }\n    }\n    /**\n     * Get visible state.\n     * @returns {boolean} The visible state.\n     */\n    get visible() {\n        return super.visible;\n    }\n    /**\n     * Set parent visibility.\n     * @param {boolean} value - The parent visibility.\n     * @returns {void}\n     */\n    set parentVisible(value) {\n        super.parentVisible = value;\n        this.components.forEach(component => component.parentVisible = this.visible);\n    }\n    /**\n     * Get parent visibility.\n     * @returns {boolean} The parent visibility.\n     */\n    get parentVisible() {\n        return super.parentVisible;\n    }\n    /**\n     * Get the disabled state.\n     * @returns {boolean} - The disabled state.\n     */\n    get disabled() {\n        return super.disabled;\n    }\n    /**\n     * Set the disabled state.\n     * @param {boolean} disabled - The disabled state.\n     */\n    set disabled(disabled) {\n        super.disabled = disabled;\n        this.components.forEach((component) => component.parentDisabled = disabled);\n    }\n    /**\n     * Set parent disabled state.\n     * @param {boolean} value - The parent disabled state.\n     * @returns {void}\n     */\n    set parentDisabled(value) {\n        super.parentDisabled = value;\n        this.components.forEach(component => {\n            component.parentDisabled = this.disabled;\n        });\n    }\n    /**\n     * Get parent disabled state.\n     * @returns {boolean} The parent disabled state.\n     */\n    get parentDisabled() {\n        return super.parentDisabled;\n    }\n    /**\n     * Get ready state from all components.\n     * @returns {Promise<Array>} - The promise that resolves when all components are ready.\n     */\n    get ready() {\n        return Promise.all(this.getComponents().map(component => component.ready));\n    }\n    /**\n     * Get currentForm object.\n     * @returns {object} - The current form object.\n     */\n    get currentForm() {\n        return super.currentForm;\n    }\n    /**\n     * Set currentForm object.\n     * @param {object} instance - The current form object.\n     * @returns {void}\n     */\n    set currentForm(instance) {\n        super.currentForm = instance;\n        this.getComponents().forEach(component => {\n            component.currentForm = instance;\n        });\n    }\n    /**\n     * Get Row Index.\n     * @returns {number} - The row index.\n     */\n    get rowIndex() {\n        return this._rowIndex;\n    }\n    /**\n     * Set Row Index to row and update each component.\n     * @param {number} value - The row index.\n     * @returns {void}\n     */\n    set rowIndex(value) {\n        var _a, _b;\n        this._rowIndex = value;\n        this.paths = (0, utils_1.getComponentPaths)(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths) || {})), { dataIndex: value }));\n        this.eachComponent((component) => {\n            component.rowIndex = value;\n        });\n    }\n    /**\n     * Get Contextual data of the component.\n     * @returns {object} - The contextual data of the component.\n     * @override\n     */\n    componentContext() {\n        return this._data;\n    }\n    /**\n     * Get the data of the component.\n     * @returns {object} - The data of the component.\n     * @override\n     */\n    get data() {\n        return this._data;\n    }\n    /**\n     * Set the data of the component.\n     * @param {object} value - The data of the component.\n     * @returns {void}\n     */\n    set data(value) {\n        this._data = value;\n        this.eachComponent((component) => {\n            component.data = this.componentContext(component);\n        });\n    }\n    /**\n     * Get components array.\n     * @returns {Array} - The components array.\n     */\n    getComponents() {\n        return this.components || [];\n    }\n    /**\n     * Perform a deep iteration over every component, including those\n     * within other container based components.\n     * @param {Function} fn - Called for every component.\n     * @param {any} options - The options to include with this everyComponent call.\n     */\n    everyComponent(fn, options = {}) {\n        const components = this.getComponents();\n        lodash_1.default.each(components, (component, index) => {\n            if (fn(component, components, index) === false) {\n                return false;\n            }\n            if (typeof component.everyComponent === 'function') {\n                if (component.everyComponent(fn, options) === false) {\n                    return false;\n                }\n            }\n        });\n    }\n    /**\n     * Check if the component has a component.\n     * @param {import('@formio/core').Component} component - The component to check.\n     * @returns {boolean} - TRUE if the component has a component, FALSE otherwise.\n     */\n    hasComponent(component) {\n        let result = false;\n        this.everyComponent((comp) => {\n            if (comp === component) {\n                result = true;\n                return false;\n            }\n        });\n        return result;\n    }\n    /**\n     * Get the flattened components of this NestedComponent.\n     * @returns {object} - The flattened components of this NestedComponent.\n     */\n    flattenComponents() {\n        const result = {};\n        this.everyComponent((component) => {\n            result[component.component.flattenAs || component.key] = component;\n        });\n        return result;\n    }\n    /**\n     * Perform an iteration over each component within this container component.\n     * @param {Function} fn - Called for each component\n     */\n    eachComponent(fn) {\n        lodash_1.default.each(this.getComponents(), (component, index) => {\n            if (fn(component, index) === false) {\n                return false;\n            }\n        });\n    }\n    /**\n     * Returns a component provided a key. This performs a deep search within the component tree.\n     * @param {string} path - The path to the component.\n     * @returns {any} - The component that is located.\n     */\n    getComponent(path) {\n        var _a;\n        path = (0, utils_1.getStringFromComponentPath)(path);\n        const matches = {\n            path: undefined,\n            fullPath: undefined,\n            localPath: undefined,\n            fullLocalPath: undefined,\n            dataPath: undefined,\n            localDataPath: undefined,\n            key: undefined,\n        };\n        this.everyComponent((component) => {\n            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;\n            // All searches are relative to this component so replace this path from the child paths.\n            (0, utils_1.componentMatches)(component.component, {\n                path: (_b = (_a = component.paths) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.replace(new RegExp(`^${(_c = this.paths) === null || _c === void 0 ? void 0 : _c.path}\\\\.?`), ''),\n                fullPath: (_e = (_d = component.paths) === null || _d === void 0 ? void 0 : _d.fullPath) === null || _e === void 0 ? void 0 : _e.replace(new RegExp(`^${(_f = this.paths) === null || _f === void 0 ? void 0 : _f.fullPath}\\\\.?`), ''),\n                localPath: (_h = (_g = component.paths) === null || _g === void 0 ? void 0 : _g.localPath) === null || _h === void 0 ? void 0 : _h.replace(new RegExp(`^${(_j = this.paths) === null || _j === void 0 ? void 0 : _j.localPath}\\\\.?`), ''),\n                fullLocalPath: (_l = (_k = component.paths) === null || _k === void 0 ? void 0 : _k.fullLocalPath) === null || _l === void 0 ? void 0 : _l.replace(new RegExp(`^${(_m = this.paths) === null || _m === void 0 ? void 0 : _m.fullLocalPath}\\\\.?`), ''),\n                dataPath: (_p = (_o = component.paths) === null || _o === void 0 ? void 0 : _o.dataPath) === null || _p === void 0 ? void 0 : _p.replace(new RegExp(`^${(_q = this.paths) === null || _q === void 0 ? void 0 : _q.dataPath}\\\\.?`), ''),\n                localDataPath: (_s = (_r = component.paths) === null || _r === void 0 ? void 0 : _r.localDataPath) === null || _s === void 0 ? void 0 : _s.replace(new RegExp(`^${(_t = this.paths) === null || _t === void 0 ? void 0 : _t.localDataPath}\\\\.?`), ''),\n            }, path, this.rowIndex, matches, (type, match) => {\n                match.instance = component;\n                return match;\n            });\n        });\n        return (_a = (0, utils_1.getBestMatch)(matches)) === null || _a === void 0 ? void 0 : _a.instance;\n    }\n    /**\n     * Return a component provided the Id of the component.\n     * @param {string} id - The Id of the component.\n     * @param {Function} fn - Called with the component once it is retrieved.\n     * @returns {object} - The component retrieved.\n     */\n    getComponentById(id, fn = null) {\n        let comp = null;\n        this.everyComponent((component, components) => {\n            if (component.id === id) {\n                comp = component;\n                if (fn) {\n                    fn(component, components);\n                }\n                return false;\n            }\n        });\n        return comp;\n    }\n    /**\n     * Create a new component and add it to the components array.\n     * @param {import('@formio/core').Component} component - The component JSON schema to create.\n     * @param {object} options - The options to create the component with.\n     * @param {import('@formio/core').DataObject} data - The submission data object to house the data for this component.\n     * @param {import('@formio/core').Component} [before] - The component before which to add this component.\n     * @param {import('@formio/core').Component} [replacedComp] - The component to replace with this component.\n     * @returns {any} - The created component instance.\n     */\n    createComponent(component, options, data, before, replacedComp) {\n        if (!component) {\n            return;\n        }\n        options = options || this.options;\n        data = data || this.data;\n        options.parent = this;\n        options.parentVisible = this.visible;\n        options.root = (options === null || options === void 0 ? void 0 : options.root) || this.root || this;\n        options.localRoot = this.localRoot;\n        options.skipInit = true;\n        if (!(options.display === 'pdf' && this.builderMode)) {\n            component.id = (0, utils_1.getRandomComponentId)();\n        }\n        const comp = Components_1.default.create(component, options, data, true);\n        comp.init();\n        if (component.internal) {\n            return comp;\n        }\n        if (before) {\n            const index = lodash_1.default.findIndex(this.components, { id: before.id });\n            if (index !== -1) {\n                this.components.splice(index, 0, comp);\n            }\n            else {\n                this.components.push(comp);\n            }\n        }\n        else if (replacedComp) {\n            const index = lodash_1.default.findIndex(this.components, { id: replacedComp.id });\n            if (index !== -1) {\n                this.components[index] = comp;\n            }\n            else {\n                this.components.push(comp);\n            }\n        }\n        else {\n            this.components.push(comp);\n        }\n        return comp;\n    }\n    getContainer() {\n        return this.element;\n    }\n    get componentComponents() {\n        return this.component.components || [];\n    }\n    get nestedKey() {\n        return `nested-${this.key}`;\n    }\n    get templateName() {\n        return 'container';\n    }\n    init() {\n        this.components = this.components || [];\n        this.addComponents();\n        return super.init();\n    }\n    /**\n     * Add a new component instance to the components array.\n     * @param {import('@formio/core').DataObject} [data] - The Submission data for this component.\n     * @param {object} [options] - The options for this component.\n     */\n    addComponents(data, options) {\n        data = data || this.data;\n        this.components = this.components || [];\n        options = options || this.options;\n        if (options.components) {\n            this.components = options.components;\n        }\n        else {\n            const components = this.hook('addComponents', this.componentComponents, this) || [];\n            components.forEach((component) => this.addComponent(component, data));\n        }\n    }\n    /**\n     * Add a new component to the components array.\n     * @param {import('@formio/core').Component} component - The component JSON schema to add.\n     * @param {object} data - The submission data object to house the data for this component.\n     * @param {HTMLElement} before - A DOM element to insert this element before.\n     * @param {boolean} [noAdd] - A possibly extraneous boolean flag.\n     * @returns {any} - The created component instance.\n     */\n    addComponent(component, data = null, before = null, noAdd = false) {\n        data = data || this.data;\n        this.components = this.components || [];\n        component = this.hook('addComponent', component, data, before, noAdd);\n        const comp = this.createComponent(component, this.options, data, before ? before : null);\n        if (noAdd) {\n            return comp;\n        }\n        return comp;\n    }\n    beforeFocus() {\n        if (this.parent && 'beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n    }\n    render(children) {\n        // If already rendering, don't re-render.\n        return super.render(children || this.renderTemplate(this.templateName, {\n            children: !this.visible ? '' : this.renderComponents(),\n            nestedKey: this.nestedKey,\n            collapsed: this.options.pdf ? false : this.collapsed,\n        }));\n    }\n    renderComponents(components) {\n        components = components || this.getComponents();\n        const children = components.map(component => component.render());\n        return this.renderTemplate('components', {\n            children,\n            components,\n        });\n    }\n    attach(element) {\n        const superPromise = super.attach(element);\n        this.loadRefs(element, {\n            header: 'single',\n            collapsed: this.collapsed,\n            [this.nestedKey]: 'single',\n            messageContainer: 'single-scope',\n        });\n        let childPromise = Promise.resolve();\n        if (this.refs[this.nestedKey]) {\n            childPromise = this.attachComponents(this.refs[this.nestedKey]);\n        }\n        if (!this.visible) {\n            this.attachComponentsLogic();\n        }\n        if (this.component.collapsible && this.refs.header) {\n            this.addEventListener(this.refs.header, 'click', () => {\n                this.collapsed = !this.collapsed;\n            });\n            this.addEventListener(this.refs.header, 'keydown', (e) => {\n                if (e.keyCode === 13 || e.keyCode === 32) {\n                    e.preventDefault();\n                    this.collapsed = !this.collapsed;\n                }\n            });\n        }\n        return Promise.all([\n            superPromise,\n            childPromise,\n        ]);\n    }\n    /**\n     * Attach the logic to the components.\n     * @param {import('@formio/core').Component[]} components - The components to attach logic to.\n     */\n    attachComponentsLogic(components) {\n        components = components || this.components;\n        lodash_1.default.each(components, (comp) => {\n            comp.attachLogic();\n            if (lodash_1.default.isFunction(comp.attachComponentsLogic)) {\n                comp.attachComponentsLogic();\n            }\n        });\n    }\n    attachComponents(element, components, container) {\n        components = components || this.components;\n        container = container || this.component.components;\n        element = this.hook('attachComponents', element, components, container, this);\n        if (!element) {\n            // Return a non-resolving promise.\n            return (new Promise(() => { }));\n        }\n        let index = 0;\n        const promises = [];\n        Array.prototype.slice.call(element.children).forEach(child => {\n            if (!child.getAttribute('data-noattach') && components[index]) {\n                promises.push(components[index].attach(child));\n                index++;\n            }\n        });\n        return Promise.all(promises);\n    }\n    /**\n     * Remove a component from the components array and from the children object\n     * @param {import('@formio/core').Component} component - The component to remove from the components.\n     * @param {import('@formio/core').Component[]} components - An array of components to remove this component from.\n     * @param {boolean} [all] - If set to TRUE will cascade remove all components.\n     */\n    removeComponent(component, components, all = false) {\n        components = components || this.components;\n        component.destroy(all);\n        lodash_1.default.remove(components, { id: component.id });\n        if (this.componentsMap[component.path]) {\n            delete this.componentsMap[component.path];\n        }\n    }\n    /**\n     * Removes a component provided the API key of that component.\n     * @param {string} key - The API key of the component to remove.\n     * @param {Function} fn - Called once the component is removed.\n     * @returns {null|void} - Returns nothing if the component is not found.\n     */\n    removeComponentByKey(key, fn = null) {\n        const comp = this.getComponent(key, (component, components) => {\n            this.removeComponent(component, components);\n            if (fn) {\n                fn(component, components);\n            }\n        });\n        if (!comp) {\n            if (fn) {\n                fn(null);\n            }\n            return null;\n        }\n    }\n    /**\n     * Removes a component provided the Id of the component.\n     * @param {string} id - The Id of the component to remove.\n     * @param {Function} fn - Called when the component is removed.\n     * @returns {null|void} - Returns nothing if the component is not found.\n     */\n    removeComponentById(id, fn = null) {\n        const comp = this.getComponentById(id, (component, components) => {\n            this.removeComponent(component, components);\n            if (fn) {\n                fn(component, components);\n            }\n        });\n        if (!comp) {\n            if (fn) {\n                fn(null);\n            }\n            return null;\n        }\n    }\n    updateValue(value, flags = {}) {\n        return this.components.reduce((changed, comp) => {\n            return comp.updateValue(null, flags) || changed;\n        }, super.updateValue(value, flags));\n    }\n    shouldSkipValidation(data, row, flags) {\n        // Nested components with no input should not be validated.\n        if (!this.component.input) {\n            return true;\n        }\n        else {\n            return super.shouldSkipValidation(data, row, flags);\n        }\n    }\n    checkData(data, flags, row, components) {\n        if (this.builderMode) {\n            return true;\n        }\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        components = components && lodash_1.default.isArray(components) ? components : this.getComponents();\n        super.checkData(data, Object.assign({}, flags), row);\n        components.forEach((comp) => comp.checkData(data, Object.assign({}, flags), row));\n    }\n    checkConditions(data, flags, row) {\n        // check conditions of parent component first, because it may influence on visibility of it's children\n        const check = super.checkConditions(data, flags, row);\n        //row data of parent component not always corresponds to row of nested components, use comp.data as row data for children instead\n        this.getComponents().forEach(comp => comp.checkConditions(data, flags, comp.data));\n        return check;\n    }\n    clearOnHide(show) {\n        super.clearOnHide(show);\n        this.getComponents().forEach(component => component.clearOnHide(show));\n    }\n    /**\n     * Allow components to hook into the next page trigger to perform their own logic.\n     * @param {Function} next - The callback to continue to the next page.\n     * @returns {Promise} - A promise when the page has been processed.\n     */\n    beforePage(next) {\n        return Promise.all(this.getComponents().map((comp) => comp.beforePage(next)));\n    }\n    /**\n     * Allow components to hook into the submission to provide their own async data.\n     * @returns {Promise} - Returns a promise when the constituent beforeSubmit functions are complete.\n     */\n    beforeSubmit() {\n        return Promise.allSettled(this.getComponents().map((comp) => comp.beforeSubmit()));\n    }\n    calculateValue(data, flags, row) {\n        // Do not iterate into children and calculateValues if this nested component is conditionally hidden.\n        if (this.conditionallyHidden()) {\n            return false;\n        }\n        return this.getComponents().reduce((changed, comp) => comp.calculateValue(data, flags, row) || changed, super.calculateValue(data, flags, row));\n    }\n    isLastPage() {\n        return this.pages.length - 1 === this.page;\n    }\n    isValid(data, dirty) {\n        return this.getComponents().reduce((valid, comp) => comp.isValid(data, dirty) && valid, super.isValid(data, dirty));\n    }\n    validationProcessor({ scope, data, row, instance, paths }, flags) {\n        var _a;\n        const { dirty } = flags;\n        if (this.root.hasExtraPages && this.page !== this.root.page) {\n            instance = ((_a = this.componentsMap) === null || _a === void 0 ? void 0 : _a.hasOwnProperty(paths.dataPath))\n                ? this.componentsMap[paths.dataPath]\n                : this.getComponent(paths.dataPath);\n        }\n        if (!instance) {\n            return;\n        }\n        instance.checkComponentValidity(data, dirty, row, flags, scope.errors);\n        if (instance.processOwnValidation) {\n            scope.noRecurse = true;\n        }\n    }\n    /**\n     * Perform a validation on all child components of this nested component.\n     * @param {import('@formio/core').Component[]} components - The components to validate.\n     * @param {import('@formio/core').DataObject} data - The data to validate.\n     * @param {object} flags - The flags to use when validating.\n     * @returns {Promise<Array>|Array} - The errors if any exist.\n     */\n    validateComponents(components = null, data = null, flags = {}) {\n        components = components || this.component.components;\n        data = data || this.rootValue;\n        const { async, dirty, process } = flags;\n        const validationProcessorProcess = (context) => this.validationProcessor(context, flags);\n        const checkModalProcessorProcess = ({ instance, component, components }) => {\n            // If we just validated the last component, and there are errors from our parent, then we need to show a model of those errors.\n            if (instance &&\n                instance.parent &&\n                (component === components[components.length - 1]) &&\n                instance.parent.componentModal) {\n                instance.parent.checkModal(instance.parent.childErrors, dirty);\n            }\n        };\n        const processorContext = {\n            process: process || 'unknown',\n            components,\n            instances: this.componentsMap,\n            data: data,\n            local: !!flags.local,\n            scope: { errors: [] },\n            parent: this.component,\n            parentPaths: this.paths,\n            processors: [\n                {\n                    process: validationProcessorProcess,\n                    processSync: validationProcessorProcess\n                },\n                {\n                    process: checkModalProcessorProcess,\n                    processSync: checkModalProcessorProcess\n                }\n            ]\n        };\n        return async ? (0, process_1.process)(processorContext).then((scope) => scope.errors) : (0, process_1.processSync)(processorContext).errors;\n    }\n    /**\n     * Validate a nested component with data, or its own internal data.\n     * @param {import('@formio/core').DataObject} data - The data to validate.\n     * @param {object} flags - The flags to use when validating.\n     * @returns {Array} - The errors if any exist.\n     */\n    validate(data = null, flags = {}) {\n        data = data || this.rootValue;\n        return this.validateComponents(this.getComponents().map((component) => component.component), data, flags);\n    }\n    checkComponentValidity(data = null, dirty = false, row = null, flags = {}, allErrors = []) {\n        this.childErrors = [];\n        return super.checkComponentValidity(data, dirty, row, flags, allErrors);\n    }\n    /**\n     * Checks the validity of the component.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {*} row - The contextual row data for this component.\n     * @param {boolean} silentCheck - If the check should be silent and not set the error messages.\n     * @param {Array<any>} childErrors - An array of all errors that have occured so that it can be appended when another one occurs here.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    checkValidity(data = null, dirty = false, row = null, silentCheck = false, childErrors = []) {\n        childErrors.push(...this.validate(data, { dirty, silentCheck }));\n        return this.checkComponentValidity(data, dirty, row, { dirty, silentCheck }, childErrors) && childErrors.length === 0;\n    }\n    checkAsyncValidity(data = null, dirty = false, row = null, silentCheck = false) {\n        return this.ready.then(() => {\n            return this.validate(data, { dirty, silentCheck, async: true }).then((childErrors) => {\n                return this.checkComponentValidity(data, dirty, row, { dirty, silentCheck, async: true }, childErrors).then((valid) => {\n                    return valid && childErrors.length === 0;\n                });\n            });\n        });\n    }\n    setPristine(pristine) {\n        super.setPristine(pristine);\n        this.getComponents().forEach((comp) => comp.setPristine(pristine));\n    }\n    get isPristine() {\n        return this.pristine && this.getComponents().every((c) => c.isPristine);\n    }\n    get isDirty() {\n        return this.dirty && this.getComponents().every((c) => c.isDirty);\n    }\n    detach() {\n        this.components.forEach(component => {\n            component.detach();\n        });\n        super.detach();\n    }\n    clear() {\n        this.components.forEach(component => {\n            component.clear();\n        });\n        super.clear();\n    }\n    destroy(all = false) {\n        this.destroyComponents(all);\n        super.destroy(all);\n    }\n    destroyComponents(all = false) {\n        const components = this.getComponents().slice();\n        components.forEach((comp) => this.removeComponent(comp, this.components, all));\n        this.components = [];\n    }\n    get visibleErrors() {\n        return this.getComponents().reduce((errors, comp) => errors.concat(comp.visibleErrors || []), super.visibleErrors);\n    }\n    get errors() {\n        const thisErrors = super.errors;\n        return this.getComponents()\n            .reduce((errors, comp) => errors.concat(comp.errors || []), thisErrors)\n            .filter(err => err.level !== 'hidden');\n    }\n    getValue() {\n        return this.data;\n    }\n    resetValue() {\n        super.resetValue();\n        this.getComponents().forEach((comp) => comp.resetValue());\n        this.setPristine(true);\n    }\n    get dataReady() {\n        return Promise.all(this.getComponents().map((component) => component.dataReady));\n    }\n    setNestedValue(component, value, flags = {}) {\n        component._data = this.componentContext(component);\n        if (component.type === 'button') {\n            return false;\n        }\n        if (component.type === 'components') {\n            if (component.tree && component.hasValue(value)) {\n                return component.setValue(lodash_1.default.get(value, component.key), flags);\n            }\n            return component.setValue(value, flags);\n        }\n        else if (value && component.hasValue(value)) {\n            return component.setValue(lodash_1.default.get(value, component.key), flags);\n        }\n        else if ((!this.rootPristine || component.visible) && (flags.resetValue || component.shouldAddDefaultValue)) {\n            flags.noValidate = !flags.dirty;\n            flags.resetValue = true;\n            return component.setValue(component.defaultValue, flags);\n        }\n    }\n    setValue(value, flags = {}) {\n        if (!value) {\n            return false;\n        }\n        // If the value is equal to the empty value, then this means we need to reset the values.\n        if (lodash_1.default.isEqual(value, this.emptyValue)) {\n            // TO-DO: For a future major release, we need to investigate removing the need for the\n            // \"resetValue\" flag. This seems like a hack that is no longer necessary and the renderer\n            // may behave more deterministically without it.\n            flags.resetValue = true;\n        }\n        return this.getComponents().reduce((changed, component) => {\n            return this.setNestedValue(component, value, flags, changed) || changed;\n        }, false);\n    }\n    get lazyLoad() {\n        var _a;\n        return (_a = this.component.lazyLoad) !== null && _a !== void 0 ? _a : false;\n    }\n}\nexports[\"default\"] = NestedComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/nested/NestedComponent.js?");
 
 /***/ }),
 
@@ -5125,7 +5125,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Component_1 = __importDefault(__webpack_require__(/*! ../component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst NestedComponent_1 = __importDefault(__webpack_require__(/*! ../nested/NestedComponent */ \"./lib/cjs/components/_classes/nested/NestedComponent.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass NestedDataComponent extends NestedComponent_1.default {\n    hasChanged(newValue, oldValue) {\n        // If we do not have a value and are getting set to anything other than undefined or null, then we changed.\n        if (newValue !== undefined &&\n            newValue !== null &&\n            !this.hasValue()) {\n            return true;\n        }\n        return !lodash_1.default.isEqual(newValue, oldValue);\n    }\n    static savedValueTypes(schema) {\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];\n    }\n    get allowData() {\n        return true;\n    }\n    get emptyValue() {\n        return {};\n    }\n    componentContext() {\n        return this.dataValue;\n    }\n    getValueAsString(value, options) {\n        if (options === null || options === void 0 ? void 0 : options.email) {\n            let result = (`\n        <table border=\"1\" style=\"width:100%\">\n          <tbody>\n      `);\n            this.everyComponent((component) => {\n                if (component.isInputComponent && component.visible && !component.skipInEmail) {\n                    result += (`\n            <tr>\n              <th style=\"padding: 5px 10px;\">${component.label}</th>\n              <td style=\"width:100%;padding:5px 10px;\">${component.getView(component.dataValue, options)}</td>\n            </tr>\n          `);\n                }\n            }, Object.assign(Object.assign({}, options), { fromRoot: true }));\n            result += (`\n          </tbody>\n        </table>\n      `);\n            return result;\n        }\n        if (lodash_1.default.isEmpty(value)) {\n            return '';\n        }\n        if (options === null || options === void 0 ? void 0 : options.modalPreview) {\n            delete options.modalPreview;\n            return this.getDataValueAsTable(value, options);\n        }\n        return '[Complex Data]';\n    }\n    getDataValueAsTable(value, options) {\n        let result = (`\n      <table border=\"1\" style=\"width:100%\">\n        <tbody>\n    `);\n        const htmlTagRegExp = new RegExp('<(.*?)>');\n        this.everyComponent((component) => {\n            if (component.isInputComponent && component.visible && !component.skipInEmail) {\n                const componentValue = component.getView(component.dataValue, options);\n                result += (`\n          <tr>\n            <th style=\"padding: 5px 10px;\">${component.label}</th>\n            <td style=\"width:100%;padding:5px 10px;\">${component.component && component.component.inputFormat === 'html' && htmlTagRegExp.test(componentValue)\n                    ? componentValue\n                    : `<input type=\"text\" value=\"${componentValue.replace(/\"/g, '&quot;')}\" readonly/>`}</td>\n          </tr>\n        `);\n            }\n        }, Object.assign(Object.assign({}, options), { fromRoot: true }));\n        result += (`\n        </tbody>\n      </table>\n    `);\n        return result;\n    }\n    everyComponent(fn, options = {}) {\n        if (options === null || options === void 0 ? void 0 : options.email) {\n            if (options.fromRoot) {\n                delete options.fromRoot;\n            }\n            else {\n                return;\n            }\n        }\n        return super.everyComponent(fn, options);\n    }\n    /**\n     * Get the value of this component.\n     * @returns {any} - Return the value of this component.\n     */\n    getValue() {\n        return this.dataValue;\n    }\n    updateValue(value, flags = {}) {\n        // Intentionally skip over nested component updateValue method to keep\n        // recursive update from occurring with sub components.\n        return Component_1.default.prototype.updateValue.call(this, value, flags);\n    }\n    setValue(value, flags = {}) {\n        let changed = false;\n        const hasValue = this.hasValue();\n        if (hasValue && lodash_1.default.isEmpty(this.dataValue)) {\n            flags.noValidate = true;\n        }\n        if (!value || !lodash_1.default.isObject(value) || !hasValue) {\n            changed = true;\n            this.dataValue = this.defaultValue;\n        }\n        changed = super.setValue(value, flags) || changed;\n        this.updateOnChange(flags, changed);\n        return changed;\n    }\n}\nexports[\"default\"] = NestedDataComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/nesteddata/NestedDataComponent.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Component_1 = __importDefault(__webpack_require__(/*! ../component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst NestedComponent_1 = __importDefault(__webpack_require__(/*! ../nested/NestedComponent */ \"./lib/cjs/components/_classes/nested/NestedComponent.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass NestedDataComponent extends NestedComponent_1.default {\n    hasChanged(newValue, oldValue) {\n        // If we do not have a value and are getting set to anything other than undefined or null, then we changed.\n        if (newValue !== undefined &&\n            newValue !== null &&\n            !this.hasValue()) {\n            return true;\n        }\n        return !lodash_1.default.isEqual(newValue, oldValue);\n    }\n    static savedValueTypes(schema) {\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];\n    }\n    get allowData() {\n        return true;\n    }\n    get emptyValue() {\n        return {};\n    }\n    get shouldAddDefaultValue() {\n        return !this.options.noDefaults || !this.options.server;\n    }\n    componentContext() {\n        return this.dataValue;\n    }\n    getValueAsString(value, options) {\n        if (options === null || options === void 0 ? void 0 : options.email) {\n            let result = (`\n        <table border=\"1\" style=\"width:100%\">\n          <tbody>\n      `);\n            this.everyComponent((component) => {\n                if (component.isInputComponent && component.visible && !component.skipInEmail) {\n                    result += (`\n            <tr>\n              <th style=\"padding: 5px 10px;\">${component.label}</th>\n              <td style=\"width:100%;padding:5px 10px;\">${component.getView(component.dataValue, options)}</td>\n            </tr>\n          `);\n                }\n            }, Object.assign(Object.assign({}, options), { fromRoot: true }));\n            result += (`\n          </tbody>\n        </table>\n      `);\n            return result;\n        }\n        if (lodash_1.default.isEmpty(value)) {\n            return '';\n        }\n        if (options === null || options === void 0 ? void 0 : options.modalPreview) {\n            delete options.modalPreview;\n            return this.getDataValueAsTable(value, options);\n        }\n        return '[Complex Data]';\n    }\n    getDataValueAsTable(value, options) {\n        let result = (`\n      <table border=\"1\" style=\"width:100%\">\n        <tbody>\n    `);\n        const htmlTagRegExp = new RegExp('<(.*?)>');\n        this.everyComponent((component) => {\n            if (component.isInputComponent && component.visible && !component.skipInEmail) {\n                const componentValue = component.getView(component.dataValue, options);\n                result += (`\n          <tr>\n            <th style=\"padding: 5px 10px;\">${component.label}</th>\n            <td style=\"width:100%;padding:5px 10px;\">${component.component && component.component.inputFormat === 'html' && htmlTagRegExp.test(componentValue)\n                    ? componentValue\n                    : `<input type=\"text\" value=\"${componentValue.replace(/\"/g, '&quot;')}\" readonly/>`}</td>\n          </tr>\n        `);\n            }\n        }, Object.assign(Object.assign({}, options), { fromRoot: true }));\n        result += (`\n        </tbody>\n      </table>\n    `);\n        return result;\n    }\n    /**\n     * Get the value of this component.\n     * @returns {any} - Return the value of this component.\n     */\n    getValue() {\n        return this.dataValue;\n    }\n    updateValue(value, flags = {}) {\n        // Intentionally skip over nested component updateValue method to keep\n        // recursive update from occurring with sub components.\n        return Component_1.default.prototype.updateValue.call(this, value, flags);\n    }\n    setValue(value, flags = {}) {\n        let changed = false;\n        const hasValue = this.hasValue();\n        if (hasValue && lodash_1.default.isEmpty(this.dataValue)) {\n            flags.noValidate = true;\n        }\n        if (!value || !lodash_1.default.isObject(value) || !hasValue) {\n            changed = true;\n            this.dataValue = this.defaultValue;\n        }\n        changed = super.setValue(value, flags) || changed;\n        this.updateOnChange(flags, changed);\n        return changed;\n    }\n}\nexports[\"default\"] = NestedDataComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/nesteddata/NestedDataComponent.js?");
 
 /***/ }),
 
@@ -5136,7 +5136,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    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    set dataValue(value) {\n        super.dataValue = value;\n    }\n    get dataValue() {\n        const resultValue = lodash_1.default.get(this._data, this.path);\n        if (!lodash_1.default.isArray(resultValue) && this.component.multiple) {\n            return [resultValue];\n        }\n        return super.dataValue;\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            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        // Added for backwards compatibility\n        if (this.component.providerOptions) {\n            const { params, url, queryProperty, responseProperty, displayValueProperty } = this.component.providerOptions;\n            const key = params === null || params === void 0 ? void 0 : params.key;\n            const autocompleteOptions = params === null || params === void 0 ? void 0 : params.autocompleteOptions;\n            delete this.component.providerOptions;\n            this.component.url = url;\n            this.component.queryProperty = queryProperty;\n            this.component.responseProperty = responseProperty;\n            this.component.displayValueProperty = displayValueProperty;\n            this.component.apiKey = key;\n            this.component.autocompleteOptions = autocompleteOptions;\n        }\n        let provider = this.component.provider;\n        const providerOptions = this.providerOptions;\n        const map = this.component.map;\n        if (!this.builderMode) {\n            if (provider) {\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 (map) {\n                // Fallback to legacy version where Google Maps was the only provider.\n                provider = this.component.provider = GoogleAddressProvider_1.GoogleAddressProvider.name;\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    set dataValue(value) {\n        super.dataValue = value;\n    }\n    get dataValue() {\n        const resultValue = lodash_1.default.get(this._data, this.path);\n        if (!lodash_1.default.isArray(resultValue) && this.component.multiple) {\n            return [resultValue];\n        }\n        return super.dataValue;\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 providerOptions() {\n        return {\n            params: Object.assign({ subscriptionKey: this.component.subscriptionKey, key: this.component.apiKey }, this.component.params),\n            url: this.component.url,\n            queryProperty: this.component.queryProperty,\n            responseProperty: this.component.responseProperty,\n            displayValueProperty: this.component.displayValueProperty,\n            autocompleteOptions: this.component.autocompleteOptions\n        };\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 = this.component.provider;\n                const providerOptions = this.providerOptions;\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?");
 
 /***/ }),
 
@@ -5224,7 +5224,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 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        });\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            options.rowIndex = rowIndex;\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    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 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({ modified: true });\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        });\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            options.rowIndex = rowIndex;\n            options.onChange = (flags, changed, modified) => {\n                this.triggerChange({ modified });\n            };\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    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?");
 
 /***/ }),
 
@@ -5235,7 +5235,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Component_1 = __importDefault(__webpack_require__(/*! ../_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst DataGrid_1 = __importDefault(__webpack_require__(/*! ../datagrid/DataGrid */ \"./lib/cjs/components/datagrid/DataGrid.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst eventemitter3_1 = __importDefault(__webpack_require__(/*! eventemitter3 */ \"./node_modules/eventemitter3/index.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass DataMapComponent extends DataGrid_1.default {\n    static schema(...extend) {\n        return Component_1.default.schema({\n            label: 'Data Map',\n            key: 'dataMap',\n            type: 'datamap',\n            clearOnHide: true,\n            addAnother: 'Add Another',\n            disableAddingRemovingRows: false,\n            keyBeforeValue: true,\n            valueComponent: {\n                type: 'textfield',\n                key: 'value',\n                label: 'Value',\n                input: true\n            },\n            input: true,\n            validate: {\n                maxLength: 0,\n                minLength: 0\n            }\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Data Map',\n            icon: 'th-list',\n            group: 'data',\n            documentation: '/userguide/form-building/data-components#data-map',\n            showPreview: false,\n            weight: 20,\n            schema: DataMapComponent.schema()\n        };\n    }\n    get schema() {\n        const schema = super.schema;\n        if (this.components && (this.components.length > 0)) {\n            schema.valueComponent = this.components[this.components.length - 1].schema;\n        }\n        return lodash_1.default.omit(schema, 'components');\n    }\n    static savedValueTypes(schema) {\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        this.type = 'datamap';\n    }\n    init() {\n        this.components = [];\n        this.rows = [];\n        this.createRows();\n        this.visibleColumns = {\n            key: true,\n            [this.valueKey]: true\n        };\n        this.component.valueComponent.hideLabel = true;\n    }\n    get defaultSchema() {\n        return DataMapComponent.schema();\n    }\n    get emptyValue() {\n        return {};\n    }\n    get dataValue() {\n        if (!this.key ||\n            (this.conditionallyHidden && this.component.clearOnHide)) {\n            return this.emptyValue;\n        }\n        if (!this.hasValue() && this.shouldAddDefaultValue) {\n            this.dataValue = this.emptyValue;\n        }\n        return lodash_1.default.get(this.data, this.key);\n    }\n    set dataValue(value) {\n        super.dataValue = value;\n    }\n    get defaultValue() {\n        const value = super.defaultValue;\n        if (Array.isArray(value)) {\n            return value[0];\n        }\n        return this.emptyValue;\n    }\n    get keySchema() {\n        return {\n            type: 'textfield',\n            input: true,\n            hideLabel: true,\n            label: this.component.keyLabel || 'Key',\n            key: '__key',\n            disableBuilderActions: true,\n        };\n    }\n    get valueKey() {\n        return this.component.valueComponent.key;\n    }\n    getRowValues() {\n        const dataValue = this.dataValue;\n        if (this.builderMode) {\n            return [dataValue];\n        }\n        if (lodash_1.default.isEmpty(dataValue)) {\n            return [];\n        }\n        return Object.keys(dataValue).map(() => dataValue);\n    }\n    getComponentsContainer() {\n        if (this.builderMode) {\n            return this.getComponents().map(comp => comp.component);\n        }\n        return super.getComponentsContainer();\n    }\n    get iteratableRows() {\n        return this.rows.map((row) => {\n            return Object.keys(row).map(key => ({\n                components: row[key],\n                data: row[key].dataValue,\n            }));\n        });\n    }\n    componentContext(component) {\n        return this.iteratableRows[component.row].find(comp => comp.components.key === component.key).data;\n    }\n    hasHeader() {\n        return true;\n    }\n    hasRemoveButtons() {\n        return !this.component.disableAddingRemovingRows &&\n            !this.options.readOnly &&\n            !this.disabled &&\n            this.fullMode;\n    }\n    getColumns() {\n        const keySchema = Object.assign({}, this.keySchema);\n        const valueSchema = Object.assign({}, this.component.valueComponent);\n        keySchema.hideLabel = false;\n        valueSchema.hideLabel = false;\n        return this.component.keyBeforeValue ?\n            [keySchema, valueSchema] :\n            [valueSchema, keySchema];\n    }\n    getRowKey(rowIndex) {\n        const keys = Object.keys(this.dataValue);\n        if (!keys[rowIndex]) {\n            keys[rowIndex] = (0, utils_1.uniqueKey)(this.dataValue, this.defaultRowKey);\n        }\n        return keys[rowIndex];\n    }\n    get defaultRowKey() {\n        return 'key';\n    }\n    setRowComponentsData(rowIndex, rowData) {\n        lodash_1.default.each(this.rows[rowIndex], (component) => {\n            if (component.key === '__key') {\n                component.data = {\n                    '__key': Object.keys(rowData)[rowIndex],\n                };\n            }\n            else {\n                component.data = rowData;\n            }\n        });\n    }\n    getValueAsString(value, options) {\n        if ((options === null || options === void 0 ? void 0 : options.email) && this.visible && !this.skipInEmail && lodash_1.default.isObject(value)) {\n            let result = (`\n        <table border=\"1\" style=\"width:100%\">\n          <tbody>\n      `);\n            result = Object.keys(value).reduce((result, key) => {\n                result += (`\n          <tr>\n            <th style=\"padding: 5px 10px;\">${key}</th>\n            <td style=\"width:100%;padding:5px 10px;\">${this.getView(value[key], options)}</td>\n          </tr>\n        `);\n                return result;\n            }, result);\n            result += (`\n          </tbody>\n        </table>\n      `);\n            return result;\n        }\n        if (lodash_1.default.isEmpty(value)) {\n            return '';\n        }\n        if (options === null || options === void 0 ? void 0 : options.modalPreview) {\n            delete options.modalPreview;\n            return this.getDataValueAsTable(value, options);\n        }\n        return typeof value === 'object' ? '[Complex Data]' : value;\n    }\n    getDataValueAsTable(value, options) {\n        let result = (`\n      <table border=\"1\" style=\"width:100%\">\n        <tbody>\n    `);\n        if (this.visible && lodash_1.default.isObject(value)) {\n            Object.keys(value).forEach((key) => {\n                result += (`\n          <tr>\n            <th style=\"padding: 5px 10px;\">${key}</th>\n            <td style=\"width:100%;padding:5px 10px;\">${this.getView(value[key], options)}</td>\n          </tr>\n        `);\n            });\n        }\n        result += (`\n        </tbody>\n      </table>\n    `);\n        return result;\n    }\n    createRowComponents(row, rowIndex) {\n        // Use original value component API key in builder mode to be able to edit value component\n        let key = this.builderMode ? this.valueKey : this.getRowKey(rowIndex);\n        // Create a new event emitter since fields are isolated.\n        const options = lodash_1.default.clone(this.options);\n        options.events = new eventemitter3_1.default();\n        options.name += `[${rowIndex}]`;\n        options.row = `${rowIndex}`;\n        options.rowIndex = rowIndex;\n        const components = {};\n        components['__key'] = this.createComponent(this.keySchema, options, { __key: this.builderMode ? this.defaultRowKey : key });\n        components['__key'].on('componentChange', (event) => {\n            const dataValue = this.dataValue;\n            const newKey = (0, utils_1.uniqueKey)(dataValue, event.value);\n            dataValue[newKey] = dataValue[key];\n            delete dataValue[key];\n            const comp = components[this.valueKey];\n            comp.component.key = newKey;\n            key = newKey;\n        });\n        const valueComponent = lodash_1.default.clone(this.component.valueComponent);\n        valueComponent.key = key;\n        const componentOptions = this.options;\n        componentOptions.row = options.row;\n        components[this.valueKey] = this.createComponent(valueComponent, componentOptions, this.dataValue);\n        return components;\n    }\n    get canAddColumn() {\n        return false;\n    }\n    addChildComponent(component) {\n        this.component.valueComponent = component;\n    }\n    saveChildComponent(component) {\n        // Update the Value Component, the Key Component is not allowed to edit\n        if (component.key !== this.keySchema.key) {\n            this.component.valueComponent = component;\n        }\n    }\n    removeChildComponent() {\n        const defaultSchema = DataMapComponent.schema();\n        this.component.valueComponent = defaultSchema.valueComponent;\n    }\n    addRow() {\n        const index = this.rows.length;\n        this.rows[index] = this.createRowComponents(this.dataValue, index);\n        this.redraw();\n        this.triggerChange();\n    }\n    removeRow(index) {\n        const keys = Object.keys(this.dataValue);\n        if (keys[index]) {\n            delete this.dataValue[keys[index]];\n        }\n        this.rows.splice(index, 1);\n        this.redraw();\n        this.triggerChange();\n    }\n    setValue(value, flags = {}) {\n        const changed = this.hasChanged(value, this.dataValue);\n        this.dataValue = value;\n        this.createRows();\n        this.updateOnChange(flags, changed);\n        return changed;\n    }\n    checkColumns() {\n        if (this.builderMode || (!this.dataValue || !Object.keys(this.dataValue).length)) {\n            return { rebuild: false, show: true };\n        }\n        if (Object.keys(this.dataValue).length > (this.rows || []).length) {\n            return { rebuild: true, show: true };\n        }\n        return { rebuild: false, show: true };\n    }\n}\nexports[\"default\"] = DataMapComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/datamap/DataMap.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Component_1 = __importDefault(__webpack_require__(/*! ../_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst DataGrid_1 = __importDefault(__webpack_require__(/*! ../datagrid/DataGrid */ \"./lib/cjs/components/datagrid/DataGrid.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst eventemitter3_1 = __importDefault(__webpack_require__(/*! eventemitter3 */ \"./node_modules/eventemitter3/index.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass DataMapComponent extends DataGrid_1.default {\n    static schema(...extend) {\n        return Component_1.default.schema({\n            label: 'Data Map',\n            key: 'dataMap',\n            type: 'datamap',\n            clearOnHide: true,\n            addAnother: 'Add Another',\n            disableAddingRemovingRows: false,\n            keyBeforeValue: true,\n            valueComponent: {\n                type: 'textfield',\n                key: 'value',\n                label: 'Value',\n                input: true\n            },\n            input: true,\n            validate: {\n                maxLength: 0,\n                minLength: 0\n            }\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Data Map',\n            icon: 'th-list',\n            group: 'data',\n            documentation: '/userguide/form-building/data-components#data-map',\n            showPreview: false,\n            weight: 20,\n            schema: DataMapComponent.schema()\n        };\n    }\n    get schema() {\n        const schema = super.schema;\n        if (this.components && (this.components.length > 0)) {\n            schema.valueComponent = this.components[this.components.length - 1].schema;\n        }\n        return lodash_1.default.omit(schema, 'components');\n    }\n    static savedValueTypes(schema) {\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        this.type = 'datamap';\n    }\n    init() {\n        this.components = [];\n        this.rows = [];\n        this.createRows();\n        this.visibleColumns = {\n            key: true,\n            [this.valueKey]: true\n        };\n        this.component.valueComponent.hideLabel = true;\n    }\n    get defaultSchema() {\n        return DataMapComponent.schema();\n    }\n    get emptyValue() {\n        return {};\n    }\n    get dataValue() {\n        if (!this.key) {\n            return this.emptyValue;\n        }\n        return lodash_1.default.get(this.data, this.key, this.emptyValue);\n    }\n    set dataValue(value) {\n        super.dataValue = value;\n    }\n    get defaultValue() {\n        const value = super.defaultValue;\n        if (Array.isArray(value)) {\n            return value[0];\n        }\n        return this.emptyValue;\n    }\n    get keySchema() {\n        return {\n            type: 'textfield',\n            input: true,\n            hideLabel: true,\n            label: this.component.keyLabel || 'Key',\n            key: '__key',\n            disableBuilderActions: true,\n        };\n    }\n    get valueKey() {\n        return this.component.valueComponent.key;\n    }\n    getRowValues() {\n        const dataValue = this.dataValue;\n        if (this.builderMode) {\n            return [dataValue];\n        }\n        if (lodash_1.default.isEmpty(dataValue)) {\n            return [];\n        }\n        return Object.keys(dataValue).map(() => dataValue);\n    }\n    getComponentsContainer() {\n        if (this.builderMode) {\n            return this.getComponents().map(comp => comp.component);\n        }\n        return super.getComponentsContainer();\n    }\n    get iteratableRows() {\n        return this.rows.map((row) => {\n            return Object.keys(row).map(key => ({\n                components: row[key],\n                data: row[key].dataValue,\n            }));\n        });\n    }\n    componentContext(component) {\n        return this.iteratableRows[component.row].find(comp => comp.components.key === component.key).data;\n    }\n    hasHeader() {\n        return true;\n    }\n    hasRemoveButtons() {\n        return !this.component.disableAddingRemovingRows &&\n            !this.options.readOnly &&\n            !this.disabled &&\n            this.fullMode;\n    }\n    getColumns() {\n        const keySchema = Object.assign({}, this.keySchema);\n        const valueSchema = Object.assign({}, this.component.valueComponent);\n        keySchema.hideLabel = false;\n        valueSchema.hideLabel = false;\n        return this.component.keyBeforeValue ?\n            [keySchema, valueSchema] :\n            [valueSchema, keySchema];\n    }\n    getRowKey(rowIndex) {\n        const keys = Object.keys(this.dataValue);\n        if (!keys[rowIndex]) {\n            keys[rowIndex] = (0, utils_1.uniqueKey)(this.dataValue, this.defaultRowKey);\n        }\n        return keys[rowIndex];\n    }\n    get defaultRowKey() {\n        return 'key';\n    }\n    setRowComponentsData(rowIndex, rowData) {\n        lodash_1.default.each(this.rows[rowIndex], (component) => {\n            if (component.key === '__key') {\n                component.data = {\n                    '__key': Object.keys(rowData)[rowIndex],\n                };\n            }\n            else {\n                component.data = rowData;\n            }\n        });\n    }\n    getValueAsString(value, options) {\n        if ((options === null || options === void 0 ? void 0 : options.email) && this.visible && !this.skipInEmail && lodash_1.default.isObject(value)) {\n            let result = (`\n        <table border=\"1\" style=\"width:100%\">\n          <tbody>\n      `);\n            result = Object.keys(value).reduce((result, key) => {\n                result += (`\n          <tr>\n            <th style=\"padding: 5px 10px;\">${key}</th>\n            <td style=\"width:100%;padding:5px 10px;\">${this.getView(value[key], options)}</td>\n          </tr>\n        `);\n                return result;\n            }, result);\n            result += (`\n          </tbody>\n        </table>\n      `);\n            return result;\n        }\n        if (lodash_1.default.isEmpty(value)) {\n            return '';\n        }\n        if (options === null || options === void 0 ? void 0 : options.modalPreview) {\n            delete options.modalPreview;\n            return this.getDataValueAsTable(value, options);\n        }\n        return typeof value === 'object' ? '[Complex Data]' : value;\n    }\n    getDataValueAsTable(value, options) {\n        let result = (`\n      <table border=\"1\" style=\"width:100%\">\n        <tbody>\n    `);\n        if (this.visible && lodash_1.default.isObject(value)) {\n            Object.keys(value).forEach((key) => {\n                result += (`\n          <tr>\n            <th style=\"padding: 5px 10px;\">${key}</th>\n            <td style=\"width:100%;padding:5px 10px;\">${this.getView(value[key], options)}</td>\n          </tr>\n        `);\n            });\n        }\n        result += (`\n        </tbody>\n      </table>\n    `);\n        return result;\n    }\n    createRowComponents(row, rowIndex) {\n        // Use original value component API key in builder mode to be able to edit value component\n        let key = this.builderMode ? this.valueKey : this.getRowKey(rowIndex);\n        // Create a new event emitter since fields are isolated.\n        const options = lodash_1.default.clone(this.options);\n        options.events = new eventemitter3_1.default();\n        options.name += `[${rowIndex}]`;\n        options.row = `${rowIndex}`;\n        options.rowIndex = rowIndex;\n        const components = {};\n        components['__key'] = this.createComponent(this.keySchema, options, { __key: this.builderMode ? this.defaultRowKey : key });\n        components['__key'].on('componentChange', (event) => {\n            const dataValue = this.dataValue;\n            const newKey = (0, utils_1.uniqueKey)(dataValue, event.value);\n            dataValue[newKey] = dataValue[key];\n            delete dataValue[key];\n            const comp = components[this.valueKey];\n            comp.component.key = newKey;\n            key = newKey;\n        });\n        const valueComponent = lodash_1.default.clone(this.component.valueComponent);\n        valueComponent.key = key;\n        const componentOptions = this.options;\n        componentOptions.row = options.row;\n        components[this.valueKey] = this.createComponent(valueComponent, componentOptions, this.dataValue);\n        return components;\n    }\n    get canAddColumn() {\n        return false;\n    }\n    addChildComponent(component) {\n        this.component.valueComponent = component;\n    }\n    saveChildComponent(component) {\n        // Update the Value Component, the Key Component is not allowed to edit\n        if (component.key !== this.keySchema.key) {\n            this.component.valueComponent = component;\n        }\n    }\n    removeChildComponent() {\n        const defaultSchema = DataMapComponent.schema();\n        this.component.valueComponent = defaultSchema.valueComponent;\n    }\n    addRow() {\n        const index = this.rows.length;\n        this.rows[index] = this.createRowComponents(this.dataValue, index);\n        this.redraw();\n        this.triggerChange();\n    }\n    removeRow(index) {\n        const keys = Object.keys(this.dataValue);\n        if (keys[index]) {\n            delete this.dataValue[keys[index]];\n        }\n        this.rows.splice(index, 1);\n        this.redraw();\n        this.triggerChange();\n    }\n    setValue(value, flags = {}) {\n        const changed = this.hasChanged(value, this.dataValue);\n        this.dataValue = value;\n        this.createRows();\n        this.updateOnChange(flags, changed);\n        return changed;\n    }\n    checkColumns() {\n        if (this.builderMode || (!this.dataValue || !Object.keys(this.dataValue).length)) {\n            return { rebuild: false, show: true };\n        }\n        if (Object.keys(this.dataValue).length > (this.rows || []).length) {\n            return { rebuild: true, show: true };\n        }\n        return { rebuild: false, show: true };\n    }\n}\nexports[\"default\"] = DataMapComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/datamap/DataMap.js?");
 
 /***/ }),
 
@@ -5246,7 +5246,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 utils_1 = __importDefault(__webpack_require__(/*! ../../utils */ \"./lib/cjs/utils/index.js\"));\nconst utils_2 = __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\"));\nclass DateTimeComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            type: 'datetime',\n            label: 'Date / Time',\n            key: 'dateTime',\n            format: 'yyyy-MM-dd hh:mm a',\n            useLocaleSettings: false,\n            allowInput: true,\n            enableDate: true,\n            enableTime: true,\n            defaultValue: '',\n            defaultDate: '',\n            displayInTimezone: 'viewer',\n            timezone: '',\n            datepickerMode: 'day',\n            datePicker: {\n                showWeeks: true,\n                startingDay: 0,\n                initDate: '',\n                minMode: 'day',\n                maxMode: 'year',\n                yearRows: 4,\n                yearColumns: 5,\n                minDate: null,\n                maxDate: null\n            },\n            timePicker: {\n                hourStep: 1,\n                minuteStep: 1,\n                showMeridian: true,\n                readonlyInput: false,\n                mousewheel: true,\n                arrowkeys: true\n            },\n            customOptions: {},\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Date / Time',\n            group: 'advanced',\n            icon: 'calendar',\n            documentation: '/userguide/form-building/advanced-components#date-and-time',\n            weight: 40,\n            schema: DateTimeComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return DateTimeComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isDateEqual', 'isNotDateEqual', 'isEmpty', 'isNotEmpty', 'dateLessThan', 'dateGreaterThan', 'dateLessThanOrEqual', 'dateGreaterThanOrEqual'], valueComponent(classComp) {\n                return Object.assign(Object.assign({}, classComp), { type: 'datetime' });\n            } });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_2.getComponentSavedTypes)(schema) || [utils_2.componentValueTypes.date];\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        const timezone = (this.component.timezone || this.options.timezone);\n        const time24hr = !lodash_1.default.get(this.component, 'timePicker.showMeridian', true);\n        // Change the format to map to the settings.\n        if (!this.component.enableDate) {\n            this.component.format = this.component.format.replace(/yyyy-MM-dd /g, '');\n        }\n        else if (this.component.enableDate && !/[yMd]/.test(this.component.format) && this.builderMode) {\n            this.component.format = `yyyy-MM-dd ${this.component.format}`;\n        }\n        if (!this.component.enableTime) {\n            this.component.format = this.component.format.replace(/ hh:mm a$/g, '');\n        }\n        else if (this.component.enableTime && !/[mhH]/.test(this.component.format) && this.builderMode) {\n            this.component.format = `${this.component.format} hh:mm a`;\n        }\n        else if (time24hr) {\n            this.component.format = this.component.format.replace(/hh:mm a$/g, 'HH:mm');\n        }\n        else {\n            this.component.format = this.component.format.replace(/HH:mm$/g, 'hh:mm a');\n        }\n        let customOptions = this.component.customOptions || {};\n        if (typeof customOptions === 'string') {\n            try {\n                customOptions = JSON.parse(customOptions);\n            }\n            catch (err) {\n                console.warn(err.message);\n                customOptions = {};\n            }\n        }\n        /* eslint-disable camelcase */\n        this.component.widget = Object.assign({ type: 'calendar', timezone, displayInTimezone: lodash_1.default.get(this.component, 'displayInTimezone', 'viewer'), locale: this.options.language, useLocaleSettings: lodash_1.default.get(this.component, 'useLocaleSettings', false), allowInput: lodash_1.default.get(this.component, 'allowInput', true), mode: 'single', enableTime: lodash_1.default.get(this.component, 'enableTime', true), noCalendar: !lodash_1.default.get(this.component, 'enableDate', true), format: this.component.format, hourIncrement: lodash_1.default.get(this.component, 'timePicker.hourStep', 1), minuteIncrement: lodash_1.default.get(this.component, 'timePicker.minuteStep', 5), time_24hr: time24hr, readOnly: this.options.readOnly, minDate: lodash_1.default.get(this.component, 'datePicker.minDate'), disabledDates: lodash_1.default.get(this.component, 'datePicker.disable'), disableWeekends: lodash_1.default.get(this.component, 'datePicker.disableWeekends'), disableWeekdays: lodash_1.default.get(this.component, 'datePicker.disableWeekdays'), disableFunction: lodash_1.default.get(this.component, 'datePicker.disableFunction'), maxDate: lodash_1.default.get(this.component, 'datePicker.maxDate') }, customOptions);\n        /* eslint-enable camelcase */\n    }\n    get defaultSchema() {\n        return DateTimeComponent.schema();\n    }\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (!defaultValue && this.component.defaultDate) {\n            defaultValue = utils_1.default.getDateSetting(this.component.defaultDate);\n            defaultValue = defaultValue ? defaultValue.toISOString() : '';\n        }\n        return defaultValue;\n    }\n    get emptyValue() {\n        return '';\n    }\n    get momentFormat() {\n        return utils_1.default.convertFormatToMoment(this.component.format);\n    }\n    isEmpty(value = this.dataValue) {\n        if (value && (value.toString() === 'Invalid Date')) {\n            return true;\n        }\n        return super.isEmpty(value);\n    }\n    formatValue(input) {\n        const result = moment_1.default.utc(input).toISOString();\n        return result === 'Invalid date' ? input : result;\n    }\n    isEqual(valueA, valueB = this.dataValue) {\n        return (this.isEmpty(valueA) && this.isEmpty(valueB))\n            || moment_1.default.utc(valueA).format(this.momentFormat) === moment_1.default.utc(valueB).format(this.momentFormat);\n    }\n    createWrapper() {\n        return false;\n    }\n    checkValidity(data, dirty, rowData) {\n        if (this.refs.input) {\n            this.refs.input.forEach((input) => {\n                if (input.widget && input.widget.enteredDate) {\n                    dirty = true;\n                }\n            });\n        }\n        return super.checkValidity(data, dirty, rowData);\n    }\n    getValueAsString(value) {\n        let format = utils_1.default.convertFormatToMoment(this.component.format);\n        format += format.match(/z$/) ? '' : ' z';\n        const timezone = this.timezone;\n        if (value && !this.attached && timezone) {\n            if (Array.isArray(value) && this.component.multiple) {\n                return value.map(item => lodash_1.default.trim(utils_1.default.momentDate(item, format, timezone).format(format))).join(', ');\n            }\n            return lodash_1.default.trim(utils_1.default.momentDate(value, format, timezone).format(format));\n        }\n        if (Array.isArray(value) && this.component.multiple) {\n            return value.map(item => lodash_1.default.trim((0, moment_1.default)(item).format(format))).join(', ');\n        }\n        return (value ? lodash_1.default.trim((0, moment_1.default)(value).format(format)) : value) || '';\n    }\n}\nexports[\"default\"] = DateTimeComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/datetime/DateTime.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 utils_1 = __importDefault(__webpack_require__(/*! ../../utils */ \"./lib/cjs/utils/index.js\"));\nconst utils_2 = __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\"));\nclass DateTimeComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            type: 'datetime',\n            label: 'Date / Time',\n            key: 'dateTime',\n            format: 'yyyy-MM-dd hh:mm a',\n            useLocaleSettings: false,\n            allowInput: true,\n            enableDate: true,\n            enableTime: true,\n            defaultValue: '',\n            defaultDate: '',\n            displayInTimezone: 'viewer',\n            timezone: '',\n            datepickerMode: 'day',\n            datePicker: {\n                showWeeks: true,\n                startingDay: 0,\n                initDate: '',\n                minMode: 'day',\n                maxMode: 'year',\n                yearRows: 4,\n                yearColumns: 5,\n                minDate: null,\n                maxDate: null\n            },\n            timePicker: {\n                hourStep: 1,\n                minuteStep: 1,\n                showMeridian: true,\n                readonlyInput: false,\n                mousewheel: true,\n                arrowkeys: true\n            },\n            customOptions: {},\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Date / Time',\n            group: 'advanced',\n            icon: 'calendar',\n            documentation: '/userguide/form-building/advanced-components#date-and-time',\n            weight: 40,\n            schema: DateTimeComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return DateTimeComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isDateEqual', 'isNotDateEqual', 'isEmpty', 'isNotEmpty', 'dateLessThan', 'dateGreaterThan', 'dateLessThanOrEqual', 'dateGreaterThanOrEqual'], valueComponent(classComp) {\n                return Object.assign(Object.assign({}, classComp), { type: 'datetime' });\n            } });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_2.getComponentSavedTypes)(schema) || [utils_2.componentValueTypes.date];\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        const timezone = (this.component.timezone || this.options.timezone);\n        const time24hr = !lodash_1.default.get(this.component, 'timePicker.showMeridian', true);\n        // Change the format to map to the settings.\n        if (!this.component.enableDate) {\n            this.component.format = this.component.format.replace(/yyyy-MM-dd /g, '');\n        }\n        else if (this.component.enableDate && !/[yMd]/.test(this.component.format) && this.builderMode) {\n            this.component.format = `yyyy-MM-dd ${this.component.format}`;\n        }\n        if (!this.component.enableTime) {\n            this.component.format = this.component.format.replace(/ hh:mm a$/g, '');\n        }\n        else if (this.component.enableTime && !/[mhH]/.test(this.component.format) && this.builderMode) {\n            this.component.format = `${this.component.format} hh:mm a`;\n        }\n        else if (time24hr) {\n            this.component.format = this.component.format.replace(/hh:mm a$/g, 'HH:mm');\n        }\n        else {\n            this.component.format = this.component.format.replace(/HH:mm$/g, 'hh:mm a');\n        }\n        let customOptions = this.component.customOptions || {};\n        if (typeof customOptions === 'string') {\n            try {\n                customOptions = JSON.parse(customOptions);\n            }\n            catch (err) {\n                console.warn(err.message);\n                customOptions = {};\n            }\n        }\n        /* eslint-disable camelcase */\n        this.component.widget = Object.assign({ type: 'calendar', timezone, displayInTimezone: lodash_1.default.get(this.component, 'displayInTimezone', 'viewer'), locale: this.options.language, useLocaleSettings: lodash_1.default.get(this.component, 'useLocaleSettings', false), allowInput: lodash_1.default.get(this.component, 'allowInput', true), mode: 'single', enableTime: lodash_1.default.get(this.component, 'enableTime', true), noCalendar: !lodash_1.default.get(this.component, 'enableDate', true), format: this.component.format, hourIncrement: lodash_1.default.get(this.component, 'timePicker.hourStep', 1), minuteIncrement: lodash_1.default.get(this.component, 'timePicker.minuteStep', 5), time_24hr: time24hr, readOnly: this.options.readOnly, minDate: lodash_1.default.get(this.component, 'datePicker.minDate'), disabledDates: lodash_1.default.get(this.component, 'datePicker.disable'), disableWeekends: lodash_1.default.get(this.component, 'datePicker.disableWeekends'), disableWeekdays: lodash_1.default.get(this.component, 'datePicker.disableWeekdays'), disableFunction: lodash_1.default.get(this.component, 'datePicker.disableFunction'), maxDate: lodash_1.default.get(this.component, 'datePicker.maxDate') }, customOptions);\n        // update originalComponent to include widget and other updated settings\n        // it is done here since these settings depend on properties present after the component is initialized\n        // originalComponent is used to restore the component (and widget) after evaluating field logic\n        this.originalComponent = (0, utils_2.fastCloneDeep)(this.component);\n        /* eslint-enable camelcase */\n    }\n    get defaultSchema() {\n        return DateTimeComponent.schema();\n    }\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (!defaultValue && this.component.defaultDate) {\n            defaultValue = utils_1.default.getDateSetting(this.component.defaultDate);\n            defaultValue = defaultValue ? defaultValue.toISOString() : '';\n        }\n        return defaultValue;\n    }\n    get emptyValue() {\n        return '';\n    }\n    get momentFormat() {\n        return utils_1.default.convertFormatToMoment(this.component.format);\n    }\n    isEmpty(value = this.dataValue) {\n        if (value && (value.toString() === 'Invalid Date')) {\n            return true;\n        }\n        return super.isEmpty(value);\n    }\n    formatValue(input) {\n        const result = moment_1.default.utc(input).toISOString();\n        return result === 'Invalid date' ? input : result;\n    }\n    isEqual(valueA, valueB = this.dataValue) {\n        return (this.isEmpty(valueA) && this.isEmpty(valueB))\n            || moment_1.default.utc(valueA).format(this.momentFormat) === moment_1.default.utc(valueB).format(this.momentFormat);\n    }\n    createWrapper() {\n        return false;\n    }\n    checkValidity(data, dirty, rowData) {\n        if (this.refs.input) {\n            this.refs.input.forEach((input) => {\n                if (input.widget && input.widget.enteredDate) {\n                    dirty = true;\n                }\n            });\n        }\n        return super.checkValidity(data, dirty, rowData);\n    }\n    getValueAsString(value, options) {\n        let format = utils_1.default.convertFormatToMoment(this.component.format);\n        format += format.match(/z$/) ? '' : ' z';\n        const timezone = this.timezone;\n        if (value && !this.attached && timezone) {\n            if (Array.isArray(value) && this.component.multiple) {\n                return value.map(item => lodash_1.default.trim(utils_1.default.momentDate(item, format, timezone, options).format(format))).join(', ');\n            }\n            return lodash_1.default.trim(utils_1.default.momentDate(value, format, timezone, options).format(format));\n        }\n        if (Array.isArray(value) && this.component.multiple) {\n            return value.map(item => lodash_1.default.trim((0, moment_1.default)(item).format(format))).join(', ');\n        }\n        return (value ? lodash_1.default.trim((0, moment_1.default)(value).format(format)) : value) || '';\n    }\n}\nexports[\"default\"] = DateTimeComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/datetime/DateTime.js?");
 
 /***/ }),
 
@@ -5257,7 +5257,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst Field_1 = __importDefault(__webpack_require__(/*! ../_classes/field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass DayComponent extends Field_1.default {\n    static schema(...extend) {\n        return Field_1.default.schema({\n            type: 'day',\n            label: 'Day',\n            key: 'day',\n            fields: {\n                day: {\n                    type: 'number',\n                    placeholder: '',\n                    required: false\n                },\n                month: {\n                    type: 'select',\n                    placeholder: '',\n                    required: false\n                },\n                year: {\n                    type: 'number',\n                    placeholder: '',\n                    required: false\n                }\n            },\n            dayFirst: false,\n            defaultValue: ''\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Day',\n            group: 'advanced',\n            icon: 'calendar',\n            documentation: '/userguide/form-building/advanced-components#day',\n            weight: 50,\n            schema: DayComponent.schema()\n        };\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isDateEqual', 'isNotDateEqual', 'isEmpty', 'isNotEmpty', 'dateLessThan', 'dateGreaterThan', 'dateLessThanOrEqual', 'dateGreaterThanOrEqual'] });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.string];\n    }\n    constructor(component, options, data) {\n        if (component.maxDate && component.maxDate.indexOf('moment(') === -1) {\n            component.maxDate = (0, moment_1.default)(component.maxDate, 'YYYY-MM-DD').toISOString();\n        }\n        if (component.minDate && component.minDate.indexOf('moment(') === -1) {\n            component.minDate = (0, moment_1.default)(component.minDate, 'YYYY-MM-DD').toISOString();\n        }\n        super(component, options, data);\n    }\n    static get serverConditionSettings() {\n        return DayComponent.conditionOperatorsSettings;\n    }\n    /**\n     * The empty value for day component.\n     * @returns {''} - The empty value of the day component.\n     */\n    get emptyValue() {\n        return '';\n    }\n    get valueMask() {\n        return /^\\d{2}\\/\\d{2}\\/\\d{4}$/;\n    }\n    get dayRequired() {\n        return this.showDay && lodash_1.default.get(this.component, 'fields.day.required', false);\n    }\n    get showDay() {\n        return !lodash_1.default.get(this.component, 'fields.day.hide', false);\n    }\n    get monthRequired() {\n        return this.showMonth && lodash_1.default.get(this.component, 'fields.month.required', false);\n    }\n    get showMonth() {\n        return !lodash_1.default.get(this.component, 'fields.month.hide', false);\n    }\n    get yearRequired() {\n        return this.showYear && lodash_1.default.get(this.component, 'fields.year.required', false);\n    }\n    get showYear() {\n        return !lodash_1.default.get(this.component, 'fields.year.hide', false);\n    }\n    get defaultSchema() {\n        return DayComponent.schema();\n    }\n    get shouldDisabled() {\n        return super.shouldDisabled || this.parentDisabled;\n    }\n    get inputInfo() {\n        const info = super.elementInfo();\n        info.type = 'input';\n        info.attr.type = 'hidden';\n        info.changeEvent = 'input';\n        return info;\n    }\n    isEmpty(value = this.dataValue) {\n        if (value === DayComponent.oldEmptyValue) {\n            return true;\n        }\n        return super.isEmpty(value);\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 && this.refs.day) {\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        // Adjust the value from old to new format\n        if (value === DayComponent.oldEmptyValue) {\n            value = '';\n        }\n        if (!value || this.valueMask.test(value)) {\n            return value;\n        }\n        const dateParts = [];\n        const valueParts = value.split('/');\n        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        const defaultValue = this.component.defaultValue ? this.component.defaultValue.split('/') : '';\n        let defaultDay = '';\n        let defaultMonth = '';\n        let defaultYear = '';\n        if (defaultValue) {\n            const hasHiddenFields = defaultValue.length !== 3;\n            defaultDay = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).day : defaultValue[DAY];\n            defaultMonth = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).month : defaultValue[MONTH];\n            defaultYear = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).year : defaultValue[YEAR];\n        }\n        if (this.options.building && defaultValue.length === 3) {\n            return this.component.defaultValue;\n        }\n        const getNextPart = (shouldTake, defaultValue) => {\n            // Only push the part if it's not an empty string\n            const part = shouldTake ? valueParts.shift() : defaultValue;\n            if (part !== '') {\n                dateParts.push(part);\n            }\n        };\n        if (this.dayFirst) {\n            getNextPart(this.showDay, defaultDay);\n        }\n        getNextPart(this.showMonth, defaultMonth);\n        if (!this.dayFirst) {\n            getNextPart(this.showDay, defaultDay);\n        }\n        getNextPart(this.showYear, defaultYear);\n        return dateParts.join('/');\n    }\n    /**\n     * Set the value at a specific index and updates the component's refs.\n     * @param {number} index - The index to set.\n     * @param {any} value - The value to set.\n     * @returns {null|void} - Returns null if the value is invalid, otherwise void.\n     */\n    setValueAt(index, value) {\n        // temporary solution to avoid input reset\n        // on invalid date.\n        if (value === 'Invalid date') {\n            return null;\n        }\n        let day, month, year;\n        const parts = value.split('/');\n        if (parts.length !== 3) {\n            day = this.getDayWithHiddenFields(parts).day;\n            month = this.getDayWithHiddenFields(parts).month;\n            year = this.getDayWithHiddenFields(parts).year;\n        }\n        else {\n            if (this.component.dayFirst) {\n                day = parts.shift();\n            }\n            month = parts.shift();\n            if (!this.component.dayFirst) {\n                day = parts.shift();\n            }\n            year = parts.shift();\n        }\n        if (this.refs.day && this.showDay) {\n            this.refs.day.value = day === '00' ? '' : parseInt(day, 10);\n        }\n        if (this.refs.month && this.showMonth) {\n            this.refs.month.value = month === '00' ? '' : parseInt(month, 10);\n        }\n        if (this.refs.year && this.showYear) {\n            this.refs.year.value = year === '0000' ? '' : parseInt(year, 10);\n        }\n    }\n    getDayWithHiddenFields(parts) {\n        let [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        if (!this.showDay) {\n            MONTH = MONTH === 0 ? 0 : MONTH - 1;\n            YEAR = YEAR - 1;\n            DAY = null;\n        }\n        if (!this.showMonth) {\n            if (!lodash_1.default.isNull(DAY)) {\n                DAY = DAY === 0 ? 0 : DAY - 1;\n            }\n            YEAR = YEAR - 1;\n            MONTH = null;\n        }\n        if (!this.showYear) {\n            YEAR = null;\n        }\n        return {\n            month: lodash_1.default.isNull(MONTH) ? '' : parts[MONTH],\n            day: lodash_1.default.isNull(DAY) ? '' : parts[DAY],\n            year: lodash_1.default.isNull(YEAR) ? '' : parts[YEAR],\n        };\n    }\n    getFieldValue(name) {\n        const parts = this.dataValue ? this.dataValue.split('/') : [];\n        let val = 0;\n        switch (name) {\n            case 'month':\n                val = parts[this.dayFirst ? 1 : 0];\n                break;\n            case 'day':\n                val = parts[this.dayFirst ? 0 : 1];\n                break;\n            case 'year':\n                val = parts[2];\n                break;\n        }\n        val = parseInt(val, 10);\n        return (!lodash_1.default.isNaN(val) && lodash_1.default.isNumber(val)) ? val : 0;\n    }\n    get parts() {\n        return {\n            day: this.getFieldValue('day'),\n            month: this.getFieldValue('month'),\n            year: this.getFieldValue('year'),\n        };\n    }\n    /**\n     * Get the format for the value string.\n     * @returns {string} - the format for the value string.\n     */\n    get format() {\n        let format = '';\n        if (this.component.dayFirst && this.showDay) {\n            format += 'D/';\n        }\n        if (this.showMonth) {\n            format += 'M/';\n        }\n        if (!this.component.dayFirst && this.showDay) {\n            format += 'D/';\n        }\n        if (this.showYear) {\n            format += 'YYYY';\n            return format;\n        }\n        else {\n            // Trim off the \"/\" from the end of the format string.\n            return format.length ? format.substring(0, format.length - 1) : format;\n        }\n    }\n    /**\n     * Return the date for this component.\n     * @param {any} value - The value to convert to a date.\n     * @returns {null|string} - The date string.\n     */\n    getDate(value) {\n        let defaults = [], day, month, year;\n        // Map positions to identifiers to get default values for each part of day\n        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        const defaultValue = value || this.component.defaultValue;\n        if (defaultValue) {\n            defaults = defaultValue.split('/').map(x => parseInt(x, 10));\n        }\n        const isModalEditClosed = this.component.modalEdit && !this.componentModal.isOpened;\n        if (this.showDay && this.refs.day) {\n            day = (this.refs.day.value === '' && !isModalEditClosed) ? '' : parseInt(this.refs.day.value, 10);\n        }\n        if (day === undefined || lodash_1.default.isNaN(day) || value) {\n            day = (defaults.length !== 3)\n                ? this.getDayWithHiddenFields(defaults).day\n                : (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 = (this.refs.month.value === '' && !isModalEditClosed) ? '' : parseInt(this.refs.month.value, 10);\n        }\n        if (month === undefined || lodash_1.default.isNaN(month) || value) {\n            month = (defaults.length !== 3)\n                ? this.getDayWithHiddenFields(defaults).month\n                : (defaults[MONTH] && !lodash_1.default.isNaN(defaults[MONTH]) ? defaults[MONTH] : 0);\n        }\n        if (this.showYear && this.refs.year) {\n            year = (this.refs.year.value === '' && !isModalEditClosed) ? '' : parseInt(this.refs.year.value);\n        }\n        if (year === undefined || lodash_1.default.isNaN(year) || value) {\n            year = (defaults.length !== 3)\n                ? this.getDayWithHiddenFields(defaults).year\n                : (defaults[YEAR] && !lodash_1.default.isNaN(defaults[YEAR]) ? defaults[YEAR] : 0);\n        }\n        let result;\n        if (!day && !month && !year) {\n            if (!isModalEditClosed) {\n                this.dataValue = this.emptyValue;\n                if (this.options.building) {\n                    this.triggerChange();\n                }\n            }\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        if (!value) {\n            return '';\n        }\n        return this.getDate(value) || '';\n    }\n    focus(field) {\n        var _a, _b, _c;\n        if (field && typeof field === 'string' && this.refs[field]) {\n            this.refs[field].focus();\n        }\n        else if (this.dayFirst && this.showDay || !this.dayFirst && !this.showMonth && this.showDay) {\n            (_a = this.refs.day) === null || _a === void 0 ? void 0 : _a.focus();\n        }\n        else if (this.dayFirst && !this.showDay && this.showMonth || !this.dayFirst && this.showMonth) {\n            (_b = this.refs.month) === null || _b === void 0 ? void 0 : _b.focus();\n        }\n        else if (!this.showDay && !this.showDay && this.showYear) {\n            (_c = this.refs.year) === null || _c === void 0 ? void 0 : _c.focus();\n        }\n    }\n    restoreCaretPosition() {\n        var _a;\n        if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.currentSelection) {\n            const { selection, index } = this.root.currentSelection;\n            if (this.refs[index]) {\n                const input = this.refs[index];\n                const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test((i === null || i === void 0 ? void 0 : i.type) || '');\n                if (isInputRangeSelectable(input)) {\n                    input.setSelectionRange(...selection);\n                }\n            }\n        }\n    }\n    isPartialDay(value) {\n        if (!value) {\n            return true;\n        }\n        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        const values = value.split('/');\n        if (values.length < 3) {\n            return true;\n        }\n        return (values[DAY] === '00' || values[MONTH] === '00' || values[YEAR] === '0000');\n    }\n    getValidationFormat() {\n        var _a, _b, _c, _d, _e, _f;\n        let validationFormat = this.dayFirst ? 'DD-MM-YYYY' : 'MM-DD-YYYY';\n        if ((_b = (_a = this.fields) === null || _a === void 0 ? void 0 : _a.day) === null || _b === void 0 ? void 0 : _b.hide) {\n            validationFormat = validationFormat.replace('DD-', '');\n        }\n        if ((_d = (_c = this.fields) === null || _c === void 0 ? void 0 : _c.month) === null || _d === void 0 ? void 0 : _d.hide) {\n            validationFormat = validationFormat.replace('MM-', '');\n        }\n        if ((_f = (_e = this.fields) === null || _e === void 0 ? void 0 : _e.year) === null || _f === void 0 ? void 0 : _f.hide) {\n            validationFormat = validationFormat.replace('-YYYY', '');\n        }\n        return validationFormat;\n    }\n}\n// Empty value used before 9.3.x\nDayComponent.oldEmptyValue = '00/00/0000';\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\");\nconst core_1 = __webpack_require__(/*! @formio/core */ \"./node_modules/@formio/core/lib/index.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    isEmpty(value = this.dataValue) {\n        if (value === DayComponent.oldEmptyValue) {\n            return true;\n        }\n        return super.isEmpty(value);\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 && this.refs.day) {\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        // Adjust the value from old to new format\n        if (value === DayComponent.oldEmptyValue) {\n            value = '';\n        }\n        if (!value || this.valueMask.test(value)) {\n            return value;\n        }\n        const dateParts = [];\n        const valueParts = value.split('/');\n        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        const defaultValue = this.component.defaultValue ? this.component.defaultValue.split('/') : '';\n        let defaultDay = '';\n        let defaultMonth = '';\n        let defaultYear = '';\n        if (defaultValue) {\n            const hasHiddenFields = defaultValue.length !== 3;\n            defaultDay = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).day : defaultValue[DAY];\n            defaultMonth = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).month : defaultValue[MONTH];\n            defaultYear = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).year : defaultValue[YEAR];\n        }\n        if (this.options.building && defaultValue.length === 3) {\n            return this.component.defaultValue;\n        }\n        const getNextPart = (shouldTake, defaultValue) => {\n            // Only push the part if it's not an empty string\n            const part = shouldTake ? valueParts.shift() : defaultValue;\n            if (part !== '') {\n                dateParts.push(part);\n            }\n        };\n        if (this.dayFirst) {\n            getNextPart(this.showDay, defaultDay);\n        }\n        getNextPart(this.showMonth, defaultMonth);\n        if (!this.dayFirst) {\n            getNextPart(this.showDay, defaultDay);\n        }\n        getNextPart(this.showYear, defaultYear);\n        return dateParts.join('/');\n    }\n    /**\n     * Set the value at a specific index and updates the component's refs.\n     * @param {number} index - The index to set.\n     * @param {any} value - The value to set.\n     * @returns {null|void} - Returns null if the value is invalid, otherwise void.\n     */\n    setValueAt(index, value) {\n        // temporary solution to avoid input reset\n        // on invalid date.\n        if (value === 'Invalid date') {\n            return null;\n        }\n        let day, month, year;\n        const parts = value.split('/');\n        if (parts.length !== 3) {\n            day = this.getDayWithHiddenFields(parts).day;\n            month = this.getDayWithHiddenFields(parts).month;\n            year = this.getDayWithHiddenFields(parts).year;\n        }\n        else {\n            if (this.component.dayFirst) {\n                day = parts.shift();\n            }\n            month = parts.shift();\n            if (!this.component.dayFirst) {\n                day = parts.shift();\n            }\n            year = parts.shift();\n        }\n        if (this.refs.day && this.showDay) {\n            this.refs.day.value = day === '00' ? '' : parseInt(day, 10);\n        }\n        if (this.refs.month && this.showMonth) {\n            this.refs.month.value = month === '00' ? '' : parseInt(month, 10);\n        }\n        if (this.refs.year && this.showYear) {\n            this.refs.year.value = year === '0000' ? '' : parseInt(year, 10);\n        }\n    }\n    getDayWithHiddenFields(parts) {\n        let [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        if (!this.showDay) {\n            MONTH = MONTH === 0 ? 0 : MONTH - 1;\n            YEAR = YEAR - 1;\n            DAY = null;\n        }\n        if (!this.showMonth) {\n            if (!lodash_1.default.isNull(DAY)) {\n                DAY = DAY === 0 ? 0 : DAY - 1;\n            }\n            YEAR = YEAR - 1;\n            MONTH = null;\n        }\n        if (!this.showYear) {\n            YEAR = null;\n        }\n        return {\n            month: lodash_1.default.isNull(MONTH) ? '' : parts[MONTH],\n            day: lodash_1.default.isNull(DAY) ? '' : parts[DAY],\n            year: lodash_1.default.isNull(YEAR) ? '' : parts[YEAR],\n        };\n    }\n    getFieldValue(name) {\n        const parts = this.dataValue ? this.dataValue.split('/') : [];\n        let val = 0;\n        switch (name) {\n            case 'month':\n                val = parts[this.dayFirst ? 1 : 0];\n                break;\n            case 'day':\n                val = parts[this.dayFirst ? 0 : 1];\n                break;\n            case 'year':\n                val = parts[2];\n                break;\n        }\n        val = parseInt(val, 10);\n        return (!lodash_1.default.isNaN(val) && lodash_1.default.isNumber(val)) ? val : 0;\n    }\n    get parts() {\n        return {\n            day: this.getFieldValue('day'),\n            month: this.getFieldValue('month'),\n            year: this.getFieldValue('year'),\n        };\n    }\n    /**\n     * Get the format for the value string.\n     * @returns {string} - the format for the value string.\n     */\n    get format() {\n        return (0, core_1.getDayFormat)(this.component);\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        const isModalEditClosed = this.component.modalEdit && !this.componentModal.isOpened;\n        if (this.showDay && this.refs.day) {\n            day = (this.refs.day.value === '' && !isModalEditClosed) ? '' : parseInt(this.refs.day.value, 10);\n        }\n        if (day === undefined || lodash_1.default.isNaN(day) || value) {\n            day = (defaults.length !== 3)\n                ? this.getDayWithHiddenFields(defaults).day\n                : (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 = (this.refs.month.value === '' && !isModalEditClosed) ? '' : parseInt(this.refs.month.value, 10);\n        }\n        if (month === undefined || lodash_1.default.isNaN(month) || value) {\n            month = (defaults.length !== 3)\n                ? this.getDayWithHiddenFields(defaults).month\n                : (defaults[MONTH] && !lodash_1.default.isNaN(defaults[MONTH]) ? defaults[MONTH] : 0);\n        }\n        if (this.showYear && this.refs.year) {\n            year = (this.refs.year.value === '' && !isModalEditClosed) ? '' : parseInt(this.refs.year.value);\n        }\n        if (year === undefined || lodash_1.default.isNaN(year) || value) {\n            year = (defaults.length !== 3)\n                ? this.getDayWithHiddenFields(defaults).year\n                : (defaults[YEAR] && !lodash_1.default.isNaN(defaults[YEAR]) ? defaults[YEAR] : 0);\n        }\n        let result;\n        if (!day && !month && !year) {\n            if (!isModalEditClosed) {\n                this.dataValue = this.emptyValue;\n                if (this.options.building) {\n                    this.triggerChange();\n                }\n            }\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        if (!value) {\n            return '';\n        }\n        return this.getDate(value) || '';\n    }\n    focus(field) {\n        var _a, _b, _c;\n        if (field && typeof field === 'string' && this.refs[field]) {\n            this.refs[field].focus();\n        }\n        else if (this.dayFirst && this.showDay || !this.dayFirst && !this.showMonth && this.showDay) {\n            (_a = this.refs.day) === null || _a === void 0 ? void 0 : _a.focus();\n        }\n        else if (this.dayFirst && !this.showDay && this.showMonth || !this.dayFirst && this.showMonth) {\n            (_b = this.refs.month) === null || _b === void 0 ? void 0 : _b.focus();\n        }\n        else if (!this.showDay && !this.showDay && this.showYear) {\n            (_c = this.refs.year) === null || _c === void 0 ? void 0 : _c.focus();\n        }\n    }\n    restoreCaretPosition() {\n        var _a;\n        if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.currentSelection) {\n            const { selection, index } = this.root.currentSelection;\n            if (this.refs[index]) {\n                const input = this.refs[index];\n                const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test((i === null || i === void 0 ? void 0 : i.type) || '');\n                if (isInputRangeSelectable(input)) {\n                    input.setSelectionRange(...selection);\n                }\n            }\n        }\n    }\n    isPartialDay(value) {\n        if (!value) {\n            return true;\n        }\n        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        const values = value.split('/');\n        if (values.length < 3) {\n            return true;\n        }\n        return (values[DAY] === '00' || values[MONTH] === '00' || values[YEAR] === '0000');\n    }\n    getValidationFormat() {\n        var _a, _b, _c, _d, _e, _f;\n        let validationFormat = this.dayFirst ? 'DD-MM-YYYY' : 'MM-DD-YYYY';\n        if ((_b = (_a = this.fields) === null || _a === void 0 ? void 0 : _a.day) === null || _b === void 0 ? void 0 : _b.hide) {\n            validationFormat = validationFormat.replace('DD-', '');\n        }\n        if ((_d = (_c = this.fields) === null || _c === void 0 ? void 0 : _c.month) === null || _d === void 0 ? void 0 : _d.hide) {\n            validationFormat = validationFormat.replace('MM-', '');\n        }\n        if ((_f = (_e = this.fields) === null || _e === void 0 ? void 0 : _e.year) === null || _f === void 0 ? void 0 : _f.hide) {\n            validationFormat = validationFormat.replace('-YYYY', '');\n        }\n        return validationFormat;\n    }\n}\n// Empty value used before 9.3.x\nDayComponent.oldEmptyValue = '00/00/0000';\nexports[\"default\"] = DayComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/day/Day.js?");
 
 /***/ }),
 
@@ -5268,7 +5268,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.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.rowIndex = rowIndex;\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, 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, fromSubmission) {\n        return this.shouldValidateDraft(editRow) ||\n            editRow.state === EditRowState.New ||\n            editRow.state === EditRowState.Editing ||\n            editRow.alerts ||\n            fromSubmission ||\n            dirty;\n    }\n    validateRow(editRow, dirty, forceSilentCheck, fromSubmission) {\n        var _a;\n        editRow.errors = [];\n        if (this.shouldValidateRow(editRow, dirty, fromSubmission)) {\n            const silentCheck = forceSilentCheck === false ? false : ((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            const errors = (0, process_1.processSync)({\n                components: this.component.components,\n                data: rootValue,\n                row: editRow.data,\n                process: 'validateRow',\n                instances: this.componentsMap,\n                scope: { errors: [] },\n                parent: this.component,\n                parentPaths: Object.assign(Object.assign({}, this.paths), { dataIndex: editRow.rowIndex }),\n                processors: [\n                    {\n                        process: validationProcessorProcess,\n                        processSync: validationProcessorProcess\n                    }\n                ]\n            }).errors;\n            editRow.errors = (this.component.modal || this.component.rowDrafts)\n                ? errors\n                : errors.filter((err) => lodash_1.default.find(this.visibleErrors, ['component.id', err.component.id]));\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, fromSubmission } = 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, fromSubmission);\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                        this.removeClass(errorContainer, 'help-block');\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) {\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        this.checkData();\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    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.rowIndex = rowIndex;\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, 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, fromSubmission) {\n        return this.shouldValidateDraft(editRow) ||\n            editRow.state === EditRowState.New ||\n            editRow.state === EditRowState.Editing ||\n            editRow.alerts ||\n            fromSubmission ||\n            dirty;\n    }\n    validateRow(editRow, dirty, forceSilentCheck, fromSubmission) {\n        var _a;\n        editRow.errors = [];\n        if (this.shouldValidateRow(editRow, dirty, fromSubmission)) {\n            const silentCheck = forceSilentCheck === false ? false : ((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            const errors = (0, process_1.processSync)({\n                components: this.component.components,\n                data: rootValue,\n                row: editRow.data,\n                process: 'validateRow',\n                instances: this.componentsMap,\n                scope: { errors: [] },\n                parent: this.component,\n                parentPaths: Object.assign(Object.assign({}, this.paths), { dataIndex: editRow.rowIndex }),\n                processors: [\n                    {\n                        process: validationProcessorProcess,\n                        processSync: validationProcessorProcess\n                    }\n                ]\n            }).errors;\n            editRow.errors = (this.component.modal || this.component.rowDrafts)\n                ? errors\n                : errors.filter((err) => lodash_1.default.find(this.visibleErrors, ['component.id', err.component.id]));\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, fromSubmission } = 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, fromSubmission);\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                        this.removeClass(errorContainer, 'help-block');\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        // TODO: this is the only place invalidMessage gets called, and it's not clear why it's needed - we already validate the editGrid\n        // component above with super.checkComponentValidity\n        const message = this.invalid || this.invalidMessage(data, dirty, false, row, options);\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        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        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?");
 
 /***/ }),
 
@@ -5312,7 +5312,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 }));\n/* eslint-disable max-statements */\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Component_1 = __importDefault(__webpack_require__(/*! ../_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst ComponentModal_1 = __importDefault(__webpack_require__(/*! ../_classes/componentModal/ComponentModal */ \"./lib/cjs/components/_classes/componentModal/ComponentModal.js\"));\nconst eventemitter3_1 = __importDefault(__webpack_require__(/*! eventemitter3 */ \"./node_modules/eventemitter3/index.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst Form_1 = __importDefault(__webpack_require__(/*! ../../Form */ \"./lib/cjs/Form.js\"));\nclass FormComponent extends Component_1.default {\n    static schema(...extend) {\n        return Component_1.default.schema({\n            label: 'Form',\n            type: 'form',\n            key: 'form',\n            src: '',\n            reference: true,\n            form: '',\n            path: '',\n            tableView: true,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Nested Form',\n            icon: 'wpforms',\n            group: 'premium',\n            documentation: '/userguide/form-building/premium-components#nested-form',\n            weight: 110,\n            schema: FormComponent.schema()\n        };\n    }\n    static savedValueTypes() {\n        return [utils_1.componentValueTypes.object];\n    }\n    init() {\n        super.init();\n        this.formObj = {\n            display: this.component.display,\n            settings: this.component.settings,\n            components: this.component.components\n        };\n        this.valueChanged = false;\n        this.subForm = null;\n        this.formSrc = '';\n        if (this.component.src) {\n            this.formSrc = this.component.src;\n        }\n        if (!this.component.src &&\n            !this.options.formio &&\n            (this.component.form || this.component.path)) {\n            if (this.component.project) {\n                this.formSrc = Formio_1.Formio.getBaseUrl();\n                // Check to see if it is a MongoID.\n                if ((0, utils_1.isMongoId)(this.component.project)) {\n                    this.formSrc += '/project';\n                }\n                this.formSrc += `/${this.component.project}`;\n                this.options.project = this.formSrc;\n            }\n            else {\n                this.formSrc = Formio_1.Formio.getProjectUrl();\n                this.options.project = this.formSrc;\n            }\n            if (this.component.form) {\n                if ((0, utils_1.isMongoId)(this.component.form)) {\n                    this.formSrc += `/form/${this.component.form}`;\n                }\n                else {\n                    this.formSrc += `/${this.component.form}`;\n                }\n            }\n            else if (this.component.path) {\n                this.formSrc += `/${this.component.path}`;\n            }\n        }\n        // Build the source based on the root src path.\n        if (!this.formSrc && this.options.formio) {\n            const rootSrc = this.options.formio.formsUrl;\n            if (this.component.form && (0, utils_1.isMongoId)(this.component.form)) {\n                this.formSrc = `${rootSrc}/${this.component.form}`;\n            }\n            else {\n                const formPath = this.component.path || this.component.form;\n                this.formSrc = `${rootSrc.replace(/\\/form$/, '')}/${formPath}`;\n            }\n        }\n        if (this.builderMode && this.component.hasOwnProperty('formRevision')) {\n            this.component.revision = this.component.formRevision;\n            delete this.component.formRevision;\n        }\n        // Add revision version if set.\n        if (this.component.revision || this.component.revision === 0 ||\n            this.component.formRevision || this.component.formRevision === 0\n            || this.component.revisionId) {\n            this.setFormRevision(this.component.revisionId || this.component.revision || this.component.formRevision);\n        }\n        return this.createSubForm();\n    }\n    get dataReady() {\n        return this.subFormReady || Promise.resolve();\n    }\n    get defaultValue() {\n        // Not not provide a default value unless the subform is ready so that it will initialize correctly.\n        return this.subForm ? super.defaultValue : null;\n    }\n    get defaultSchema() {\n        return FormComponent.schema();\n    }\n    get emptyValue() {\n        return { data: {} };\n    }\n    get ready() {\n        return this.subFormReady || Promise.resolve();\n    }\n    get useOriginalRevision() {\n        var _a, _b;\n        return ((_a = this.component) === null || _a === void 0 ? void 0 : _a.useOriginalRevision) && !!((_b = this.formObj) === null || _b === void 0 ? void 0 : _b.revisions);\n    }\n    setFormRevision(rev) {\n        // Remove current revisions from src if it is\n        this.formSrc = this.formSrc.replace(/\\/v\\/[0-9a-z]+/, '');\n        const revNumber = Number.parseInt(rev);\n        if (!isNaN(revNumber)) {\n            this.subFormRevision = rev;\n            this.formSrc += `/v/${rev}`;\n        }\n        else {\n            this.subFormRevision = undefined;\n        }\n    }\n    getComponent(path) {\n        if (!this.subForm) {\n            return null;\n        }\n        return this.subForm.getComponent(path);\n    }\n    /* eslint-disable max-statements */\n    getSubOptions(options = {}) {\n        options.events = this.createEmitter();\n        // Make sure to not show the submit button in wizards in the nested forms.\n        lodash_1.default.set(options, 'buttonSettings.showSubmit', false);\n        // Set the parent option to the subform so those references are stable when the subform is created\n        options.parent = this;\n        if (!this.options) {\n            return options;\n        }\n        if (this.options.base) {\n            options.base = this.options.base;\n        }\n        if (this.options.project) {\n            options.project = this.options.project;\n        }\n        if (this.options.readOnly || this.component.disabled) {\n            options.readOnly = this.options.readOnly || this.component.disabled;\n        }\n        if (this.options.breadcrumbSettings) {\n            options.breadcrumbSettings = this.options.breadcrumbSettings;\n        }\n        if (this.options.buttonSettings) {\n            options.buttonSettings = lodash_1.default.clone(this.options.buttonSettings);\n        }\n        if (this.options.viewAsHtml) {\n            options.viewAsHtml = this.options.viewAsHtml;\n        }\n        if (this.options.language) {\n            options.language = this.options.language;\n        }\n        if (this.options.template) {\n            options.template = this.options.template;\n        }\n        if (this.options.templates) {\n            options.templates = this.options.templates;\n        }\n        if (this.options.renderMode) {\n            options.renderMode = this.options.renderMode;\n        }\n        if (this.options.attachMode) {\n            options.attachMode = this.options.attachMode;\n        }\n        if (this.options.iconset) {\n            options.iconset = this.options.iconset;\n        }\n        if (this.options.fileService) {\n            options.fileService = this.options.fileService;\n        }\n        if (this.options.onChange) {\n            options.onChange = this.options.onChange;\n        }\n        if (this.options.preview) {\n            options.preview = this.options.preview;\n        }\n        if (this.options.inEditGrid) {\n            options.inEditGrid = this.options.inEditGrid;\n        }\n        if (this.options.saveDraft) {\n            options.saveDraft = this.options.saveDraft;\n            options.formio = new Formio_1.Formio(this.formSrc);\n        }\n        if (this.options.saveDraftThrottle) {\n            options.saveDraftThrottle = this.options.saveDraftThrottle;\n        }\n        if (this.options.skipDraftRestore) {\n            options.skipDraftRestore = this.options.skipDraftRestore;\n        }\n        options.parent = this;\n        return options;\n    }\n    /* eslint-enable max-statements */\n    render() {\n        if (this.builderMode) {\n            return super.render(this.component.label || 'Nested form');\n        }\n        const subform = this.subForm ? this.subForm.render() : this.renderTemplate('loading');\n        return super.render(subform);\n    }\n    asString(value) {\n        return this.getValueAsString(value);\n    }\n    /**\n     * Prints out the value of form components as a datagrid value.\n     */\n    getValueAsString(value, options) {\n        if (!value) {\n            return 'No data provided';\n        }\n        if (!value.data && value._id) {\n            return value._id;\n        }\n        if (!value.data || !Object.keys(value.data).length) {\n            return 'No data provided';\n        }\n        if (options === null || options === void 0 ? void 0 : options.email) {\n            let result = (`\n        <table border=\"1\" style=\"width:100%\">\n          <tbody>\n      `);\n            this.everyComponent((component) => {\n                if (component.isInputComponent && component.visible && !component.skipInEmail) {\n                    result += (`\n            <tr>\n              <th style=\"padding: 5px 10px;\">${component.label}</th>\n              <td style=\"width:100%;padding:5px 10px;\">${component.getView(component.dataValue, options)}</td>\n            </tr>\n          `);\n                }\n            }, Object.assign(Object.assign({}, options), { fromRoot: true }));\n            result += (`\n          </tbody>\n        </table>\n      `);\n            return result;\n        }\n        if (lodash_1.default.isEmpty(value)) {\n            return '';\n        }\n        return '[Complex Data]';\n    }\n    attach(element) {\n        // Don't attach in builder.\n        if (this.builderMode) {\n            return super.attach(element);\n        }\n        return super.attach(element)\n            .then(() => {\n            if (this.isSubFormLazyLoad() && !this.hasLoadedForm && !this.subFormLoading) {\n                this.createSubForm(true);\n            }\n            return this.subFormReady.then(() => {\n                this.empty(element);\n                if (this.options.builder) {\n                    this.setContent(element, this.ce('div', {\n                        class: 'text-muted text-center p-2'\n                    }, this.text(this.formObj.title)));\n                    return;\n                }\n                this.setContent(element, this.render());\n                if (this.subForm) {\n                    if (this.isNestedWizard) {\n                        element = this.root.element;\n                    }\n                    this.subForm.attach(element);\n                    this.valueChanged = this.hasSetValue;\n                    if (!this.valueChanged && this.dataValue.state !== 'submitted') {\n                        this.setDefaultValue();\n                    }\n                    else {\n                        this.restoreValue();\n                    }\n                }\n                if (!this.builderMode && this.component.modalEdit) {\n                    const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;\n                    const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;\n                    this.componentModal = new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);\n                    this.subForm.element = this.componentModal.refs.componentContent || this.subForm.element;\n                    this.setOpenModalElement();\n                }\n                this.calculateValue();\n            });\n        });\n    }\n    detach() {\n        if (this.subForm) {\n            this.subForm.detach();\n        }\n        super.detach();\n    }\n    get currentForm() {\n        return this._currentForm;\n    }\n    get hasLoadedForm() {\n        return this.formObj\n            && this.formObj.components\n            && Array.isArray(this.formObj.components)\n            && this.formObj.components.length;\n    }\n    set currentForm(instance) {\n        this._currentForm = instance;\n        if (!this.subForm) {\n            return;\n        }\n        this.subForm.getComponents().forEach(component => {\n            component.currentForm = this;\n        });\n    }\n    get isRevisionChanged() {\n        return lodash_1.default.isNumber(this.subFormRevision)\n            && lodash_1.default.isNumber(this.formObj._vid)\n            && this.formObj._vid !== this.subFormRevision;\n    }\n    destroy(all = false) {\n        if (this.subForm) {\n            this.subForm.destroy(all);\n            this.subForm = null;\n            this.subFormReady = null;\n        }\n        super.destroy(all);\n    }\n    redraw() {\n        if (this.subForm) {\n            this.subForm.form = this.formObj;\n            this.setSubFormDisabled(this.subForm);\n        }\n        return super.redraw();\n    }\n    /**\n     * Pass everyComponent to subform.\n     * @param {any[]} args - Arguments to pass through to the subform's everyComponent method.\n     * @returns {*} - The result of the subform's everyComponent method.\n     */\n    everyComponent(...args) {\n        if (this.subForm) {\n            this.subForm.everyComponent(...args);\n        }\n    }\n    setSubFormDisabled(subForm) {\n        subForm.disabled = this.disabled; // When the Nested Form is disabled make the subForm disabled\n    }\n    updateSubWizards(subForm) {\n        var _a, _b;\n        if (this.isNestedWizard && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.subWizards) && ((_b = subForm === null || subForm === void 0 ? void 0 : subForm._form) === null || _b === void 0 ? void 0 : _b.display) === 'wizard') {\n            const existedForm = this.root.subWizards.findIndex(form => form.component.form === this.component.form);\n            if (existedForm !== -1) {\n                this.root.subWizards[existedForm] = this;\n            }\n            else {\n                this.root.subWizards.push(this);\n            }\n            this.emit('subWizardsUpdated', subForm);\n        }\n    }\n    /**\n     * Create a subform instance.\n     * @param {boolean} [fromAttach] - This function is being called from an `attach` method.\n     * @returns {*} - The subform instance.\n     */\n    createSubForm(fromAttach) {\n        this.subFormReady = this.loadSubForm(fromAttach).then((form) => {\n            if (!form) {\n                return;\n            }\n            // Iterate through every component and hide the submit button.\n            (0, utils_1.eachComponent)(form.components, (component) => {\n                this.hideSubmitButton(component);\n            });\n            // If the subform is already created then destroy the old one.\n            if (this.subForm) {\n                this.subForm.destroy();\n            }\n            // Render the form.\n            return (new Form_1.default(form, this.getSubOptions())).ready.then((instance) => {\n                this.subForm = instance;\n                this.subForm.currentForm = this;\n                this.subForm.parentVisible = this.visible;\n                const componentsMap = this.componentsMap;\n                const formComponentsMap = this.subForm.componentsMap;\n                lodash_1.default.assign(componentsMap, formComponentsMap);\n                this.component.components = this.subForm.components.map((comp) => comp.component);\n                this.subForm.on('change', () => {\n                    if (this.subForm) {\n                        this.dataValue = this.subForm.getValue();\n                        this.triggerChange({\n                            noEmit: true\n                        });\n                    }\n                });\n                this.subForm.url = this.formSrc;\n                this.subForm.nosubmit = true;\n                this.subForm.root = this.root;\n                this.subForm.localRoot = this.isNestedWizard ? this.localRoot : this.subForm;\n                this.restoreValue();\n                this.valueChanged = this.hasSetValue;\n                this.onChange();\n                return this.subForm;\n            }).catch((err) => {\n                console.log(err);\n            });\n        }).then((subForm) => {\n            this.updateSubWizards(subForm);\n            return subForm;\n        });\n        return this.subFormReady;\n    }\n    hideSubmitButton(component) {\n        const isSubmitButton = component.type === 'button' && (component.action === 'submit' || !component.action);\n        if (isSubmitButton) {\n            component.hidden = true;\n            // clearOnHide no longer clears from the JSON `hidden` flag, so we make the button conditionally hidden to clear its data\n            component.customConditional = 'show = false';\n        }\n    }\n    /**\n     * Load the subform.\n     * @param {boolean} fromAttach - This function is being called from an `attach` method.\n     * @returns {Promise} - The promise that resolves when the subform is loaded.\n     */\n    loadSubForm(fromAttach) {\n        var _a, _b, _c, _d, _e;\n        if (this.builderMode || this.conditionallyHidden || (this.isSubFormLazyLoad() && !fromAttach)) {\n            return Promise.resolve();\n        }\n        if (this.hasLoadedForm && !this.isRevisionChanged &&\n            !(this.options.pdf && ((_a = this.component) === null || _a === void 0 ? void 0 : _a.useOriginalRevision) && lodash_1.default.isNull(this.subForm) && !this.subFormLoading)) {\n            // Pass config down to sub forms.\n            if (this.root && this.root.form && this.root.form.config && !this.formObj.config) {\n                this.formObj.config = this.root.form.config;\n            }\n            return Promise.resolve(this.formObj);\n        }\n        else if (this.formSrc) {\n            this.subFormLoading = true;\n            const options = ((_c = (_b = this.root) === null || _b === void 0 ? void 0 : _b.formio) === null || _c === void 0 ? void 0 : _c.base) && ((_e = (_d = this.root) === null || _d === void 0 ? void 0 : _d.formio) === null || _e === void 0 ? void 0 : _e.projectUrl)\n                ? {\n                    base: this.root.formio.base,\n                    project: this.root.formio.projectUrl,\n                }\n                : {};\n            return (new Formio_1.Formio(this.formSrc, options)).loadForm({ params: { live: 1 } })\n                .then((formObj) => {\n                this.formObj = formObj;\n                if (this.options.pdf && this.component.useOriginalRevision) {\n                    this.formObj.display = 'form';\n                }\n                this.subFormLoading = false;\n                return formObj;\n            })\n                .catch((err) => {\n                console.log(err);\n                return null;\n            });\n        }\n        return Promise.resolve();\n    }\n    checkComponentConditions(data, flags, row) {\n        const visible = super.checkComponentConditions(data, flags, row);\n        // Return if already hidden\n        if (!visible) {\n            return visible;\n        }\n        if (this.subForm) {\n            return this.subForm.checkConditions(data, flags, row);\n        }\n        // There are few cases when subForm is not loaded when a change is triggered,\n        // so we need to perform checkConditions after it is ready, or some conditional fields might be hidden in View mode\n        else if (this.subFormReady) {\n            this.subFormReady.then(() => {\n                if (this.subForm) {\n                    return this.subForm.checkConditions(data, flags, row);\n                }\n            });\n        }\n        return visible;\n    }\n    calculateValue(data, flags, row) {\n        if (this.subForm) {\n            return this.subForm.calculateValue(data, flags, row);\n        }\n        return super.calculateValue(data, flags, row);\n    }\n    setPristine(pristine) {\n        super.setPristine(pristine);\n        if (this.subForm) {\n            this.subForm.setPristine(pristine);\n        }\n    }\n    /**\n     * Determine if the subform should be submitted.\n     * @returns {*|boolean} - TRUE if the subform should be submitted, FALSE if it should not.\n     */\n    get shouldSubmit() {\n        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.conditionallyHidden;\n    }\n    /**\n     * Returns the data for the subform.\n     * @returns {*} - the data for the subform.\n     */\n    getSubFormData() {\n        if (lodash_1.default.get(this.subForm, 'form.display') === 'pdf') {\n            return this.subForm.getSubmission();\n        }\n        else {\n            return Promise.resolve(this.dataValue);\n        }\n    }\n    /**\n     * Submit the subform if configured to do so.\n     * @returns {Promise} - The promise that resolves when the subform is submitted.\n     */\n    submitSubForm() {\n        // If we wish to submit the form on next page, then do that here.\n        if (this.shouldSubmit) {\n            return this.subFormReady.then(() => {\n                if (!this.subForm) {\n                    return this.dataValue;\n                }\n                this.subForm.nosubmit = false;\n                this.subForm.submitted = true;\n                return this.subForm.submitForm({}, true).then(result => {\n                    this.subForm.loading = false;\n                    this.subForm.showAllErrors = false;\n                    this.dataValue = result.submission;\n                    return this.dataValue;\n                }).catch(err => {\n                    this.subForm.showAllErrors = true;\n                    this.subForm.onSubmissionError(err);\n                    return Promise.reject(err);\n                });\n            });\n        }\n        return this.getSubFormData();\n    }\n    /**\n     * Submit the form before the next page is triggered.\n     * @param {Function} next - The function to trigger the next page.\n     * @returns {Promise} - The promise that resolves when the subform submission is complete (if necessary) and the next page is triggered.\n     */\n    beforePage(next) {\n        // Should not submit child forms if we are going to the previous page\n        if (!next) {\n            return super.beforePage(next);\n        }\n        return this.submitSubForm(true).then(() => super.beforePage(next));\n    }\n    /**\n     * Submit the form before the whole form is triggered.\n     * @returns {Promise} - The promise that resolves when the subform submission is complete (if necessary) and the form is submitted.\n     */\n    beforeSubmit() {\n        var _a, _b, _c;\n        const submission = this.dataValue;\n        // Cancel triggered saveDraft\n        if (((_a = this.subForm) === null || _a === void 0 ? void 0 : _a.draftEnabled) && ((_b = this.subForm.triggerSaveDraft) === null || _b === void 0 ? void 0 : _b.cancel)) {\n            this.subForm.triggerSaveDraft.cancel();\n        }\n        const isAlreadySubmitted = submission && submission._id && submission.form;\n        const isDraftSubmission = this.options.saveDraft && submission.state === 'draft';\n        // This submission has already been submitted, so just return the reference data.\n        if (isAlreadySubmitted && !((_c = this.subForm) === null || _c === void 0 ? void 0 : _c.wizard) && !isDraftSubmission) {\n            this.dataValue = submission;\n            return Promise.resolve(this.dataValue);\n        }\n        if (this.isSubFormLazyLoad() && !this.subFormLoading) {\n            return this.createSubForm(true)\n                .then(this.submitSubForm(false))\n                .then(() => {\n                return this.dataValue;\n            })\n                .then(() => super.beforeSubmit());\n        }\n        else {\n            return this.submitSubForm(false)\n                .then(() => {\n                return this.dataValue;\n            })\n                .then(() => super.beforeSubmit());\n        }\n    }\n    isSubFormLazyLoad() {\n        var _a, _b;\n        return ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a._form) === null || _b === void 0 ? void 0 : _b.display) === 'wizard' && this.component.lazyLoad;\n    }\n    isHidden() {\n        if (!this.visible) {\n            return true;\n        }\n        return !super.checkConditions(this.rootValue);\n    }\n    setValue(submission, flags = {}) {\n        var _a;\n        const changed = super.setValue(submission, flags);\n        this.valueChanged = true;\n        if (this.subForm) {\n            const revisionPath = submission._frid ? '_frid' : '_vid';\n            const shouldLoadOriginalRevision = this.useOriginalRevision\n                && (lodash_1.default.isNumber(submission[revisionPath]) || lodash_1.default.isNumber(submission._fvid))\n                && lodash_1.default.isNumber((_a = this.subForm.form) === null || _a === void 0 ? void 0 : _a[revisionPath])\n                && submission._fvid !== this.subForm.form[revisionPath];\n            if (shouldLoadOriginalRevision) {\n                this.setFormRevision(submission._frid || submission._fvid);\n                this.createSubForm().then(() => {\n                    this.attach(this.element);\n                });\n            }\n            else {\n                this.setSubFormValue(submission, flags);\n            }\n        }\n        return changed;\n    }\n    setSubFormValue(submission, flags) {\n        var _a, _b, _c, _d;\n        const shouldLoadSubmissionById = submission\n            && submission._id\n            && this.subForm.formio\n            && lodash_1.default.isEmpty(submission.data);\n        const shouldLoadDraftById = this.options.saveDraft && lodash_1.default.isEmpty(submission.data) && lodash_1.default.get(this.subForm, 'submission._id');\n        if (shouldLoadSubmissionById || shouldLoadDraftById) {\n            const formId = submission.form || this.formObj.form || this.component.form;\n            const submissionUrl = `${this.subForm.formio.formsUrl}/${formId}/submission/${submission._id || this.subForm.submission._id}`;\n            const options = ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.formio) === null || _b === void 0 ? void 0 : _b.base) && ((_d = (_c = this.root) === null || _c === void 0 ? void 0 : _c.formio) === null || _d === void 0 ? void 0 : _d.projectUrl)\n                ? {\n                    base: this.root.formio.base,\n                    project: this.root.formio.projectUrl,\n                }\n                : {};\n            this.subForm.setUrl(submissionUrl, Object.assign(Object.assign({}, this.options), options));\n            this.subForm.loadSubmission().catch((err) => {\n                console.error(`Unable to load subform submission ${submission._id}:`, err);\n            });\n        }\n        else {\n            this.onSetSubFormValue(submission, flags);\n        }\n    }\n    /**\n     * Sets the subform value\n     * @param {object|null|undefined} submission - The submission to set.\n     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.\n     * @return {void}\n     */\n    onSetSubFormValue(submission, flags) {\n        this.subForm.setValue(submission, flags);\n    }\n    isEmpty(value = this.dataValue) {\n        return value === null || lodash_1.default.isEqual(value, this.emptyValue) || (this.areAllComponentsEmpty(value === null || value === void 0 ? void 0 : value.data) && !(value === null || value === void 0 ? void 0 : value._id));\n    }\n    areAllComponentsEmpty(data) {\n        let res = true;\n        if (this.subForm) {\n            this.subForm.everyComponent((comp) => {\n                const componentValue = lodash_1.default.get(data, comp.key);\n                res &= comp.isEmpty(componentValue);\n            });\n        }\n        else {\n            res = false;\n        }\n        return res;\n    }\n    getValue() {\n        if (this.subForm) {\n            return this.subForm.getValue();\n        }\n        return this.dataValue;\n    }\n    get errors() {\n        let errors = super.errors;\n        if (this.subForm) {\n            errors = errors.concat(this.subForm.errors);\n        }\n        return errors;\n    }\n    updateSubFormVisibility() {\n        if (this.subForm) {\n            this.subForm.parentVisible = this.visible;\n        }\n    }\n    /**\n     * Determines if this form is a Nested Wizard\n     * which means it should be a Wizard itself and should be a direct child of a Wizard's page\n     * @returns {boolean} - TRUE if this form is a Nested Wizard, FALSE otherwise\n     */\n    get isNestedWizard() {\n        var _a, _b, _c, _d, _e;\n        return ((_b = (_a = this.subForm) === null || _a === void 0 ? void 0 : _a._form) === null || _b === void 0 ? void 0 : _b.display) === 'wizard' && ((_e = (_d = (_c = this.parent) === null || _c === void 0 ? void 0 : _c.parent) === null || _d === void 0 ? void 0 : _d._form) === null || _e === void 0 ? void 0 : _e.display) === 'wizard';\n    }\n    get visible() {\n        return super.visible;\n    }\n    set visible(value) {\n        const isNestedWizard = this.isNestedWizard;\n        if (this._visible !== value) {\n            this._visible = value;\n            // Form doesn't load if hidden. If it becomes visible, create the form.\n            if (!this.subForm && value) {\n                this.createSubForm();\n                this.subFormReady.then(() => {\n                    this.updateSubFormVisibility();\n                    this.clearOnHide();\n                });\n                this.redraw();\n                return;\n            }\n            this.updateSubFormVisibility();\n            this.clearOnHide();\n            isNestedWizard ? this.rebuild() : this.redraw();\n        }\n        if (!value && isNestedWizard) {\n            this.root.redraw();\n        }\n    }\n    get parentVisible() {\n        return super.parentVisible;\n    }\n    set parentVisible(value) {\n        if (this._parentVisible !== value) {\n            this._parentVisible = value;\n            this.clearOnHide();\n            // Form doesn't load if hidden. If it becomes visible, create the form.\n            if (!this.subForm && value) {\n                this.createSubForm();\n                this.subFormReady.then(() => {\n                    this.updateSubFormVisibility();\n                });\n                this.redraw();\n                return;\n            }\n            this.updateSubFormVisibility();\n            this.redraw();\n        }\n    }\n    isInternalEvent(event) {\n        switch (event) {\n            case 'focus':\n            case 'blur':\n            case 'componentChange':\n            case 'componentError':\n            case 'error':\n            case 'formLoad':\n            case 'languageChanged':\n            case 'render':\n            case 'checkValidity':\n            case 'initialized':\n            case 'submit':\n            case 'submitButton':\n            case 'nosubmit':\n            case 'updateComponent':\n            case 'submitDone':\n            case 'submissionDeleted':\n            case 'requestDone':\n            case 'nextPage':\n            case 'prevPage':\n            case 'wizardNavigationClicked':\n            case 'updateWizardNav':\n            case 'restoreDraft':\n            case 'saveDraft':\n            case 'saveComponent':\n            case 'pdfUploaded':\n                return true;\n            default:\n                return false;\n        }\n    }\n    createEmitter() {\n        const emitter = new eventemitter3_1.default();\n        const nativeEmit = emitter.emit;\n        const that = this;\n        emitter.emit = function (event, ...args) {\n            const eventType = event.replace(`${that.options.namespace}.`, '');\n            nativeEmit.call(this, event, ...args);\n            if (!that.isInternalEvent(eventType)) {\n                that.emit(eventType, ...args);\n            }\n        };\n        return emitter;\n    }\n    deleteValue() {\n        super.setValue(null, {\n            noUpdateEvent: true,\n            noDefault: true\n        });\n        this.unset();\n    }\n}\nexports[\"default\"] = FormComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/form/Form.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n/* eslint-disable max-statements */\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Component_1 = __importDefault(__webpack_require__(/*! ../_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst ComponentModal_1 = __importDefault(__webpack_require__(/*! ../_classes/componentModal/ComponentModal */ \"./lib/cjs/components/_classes/componentModal/ComponentModal.js\"));\nconst eventemitter3_1 = __importDefault(__webpack_require__(/*! eventemitter3 */ \"./node_modules/eventemitter3/index.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst Form_1 = __importDefault(__webpack_require__(/*! ../../Form */ \"./lib/cjs/Form.js\"));\nclass FormComponent extends Component_1.default {\n    static schema(...extend) {\n        return Component_1.default.schema({\n            label: 'Form',\n            type: 'form',\n            key: 'form',\n            src: '',\n            reference: true,\n            form: '',\n            path: '',\n            tableView: true,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Nested Form',\n            icon: 'wpforms',\n            group: 'premium',\n            documentation: '/userguide/form-building/premium-components#nested-form',\n            weight: 110,\n            schema: FormComponent.schema()\n        };\n    }\n    static savedValueTypes() {\n        return [utils_1.componentValueTypes.object];\n    }\n    init() {\n        super.init();\n        this.formObj = {\n            display: this.component.display,\n            settings: this.component.settings,\n            components: this.component.components\n        };\n        this.valueChanged = false;\n        this.subForm = null;\n        this.formSrc = '';\n        if (this.component.src) {\n            this.formSrc = this.component.src;\n        }\n        if (!this.component.src &&\n            !this.options.formio &&\n            (this.component.form || this.component.path)) {\n            if (this.component.project) {\n                this.formSrc = Formio_1.Formio.getBaseUrl();\n                // Check to see if it is a MongoID.\n                if ((0, utils_1.isMongoId)(this.component.project)) {\n                    this.formSrc += '/project';\n                }\n                this.formSrc += `/${this.component.project}`;\n                this.options.project = this.formSrc;\n            }\n            else {\n                this.formSrc = Formio_1.Formio.getProjectUrl();\n                this.options.project = this.formSrc;\n            }\n            if (this.component.form) {\n                if ((0, utils_1.isMongoId)(this.component.form)) {\n                    this.formSrc += `/form/${this.component.form}`;\n                }\n                else {\n                    this.formSrc += `/${this.component.form}`;\n                }\n            }\n            else if (this.component.path) {\n                this.formSrc += `/${this.component.path}`;\n            }\n        }\n        // Build the source based on the root src path.\n        if (!this.formSrc && this.options.formio) {\n            const rootSrc = this.options.formio.formsUrl;\n            if (this.component.form && (0, utils_1.isMongoId)(this.component.form)) {\n                this.formSrc = `${rootSrc}/${this.component.form}`;\n            }\n            else {\n                const formPath = this.component.path || this.component.form;\n                this.formSrc = `${rootSrc.replace(/\\/form$/, '')}/${formPath}`;\n            }\n        }\n        if (this.builderMode && this.component.hasOwnProperty('formRevision')) {\n            this.component.revision = this.component.formRevision;\n            delete this.component.formRevision;\n        }\n        // Add revision version if set.\n        if (this.component.revision || this.component.revision === 0 ||\n            this.component.formRevision || this.component.formRevision === 0\n            || this.component.revisionId) {\n            this.setFormRevision(this.component.revisionId || this.component.revision || this.component.formRevision);\n        }\n        return this.createSubForm();\n    }\n    get dataReady() {\n        return this.subFormReady || Promise.resolve();\n    }\n    get defaultValue() {\n        // Not not provide a default value unless the subform is ready so that it will initialize correctly.\n        return this.subForm ? super.defaultValue : null;\n    }\n    get defaultSchema() {\n        return FormComponent.schema();\n    }\n    get emptyValue() {\n        return { data: {} };\n    }\n    // In order for the subform values to set properly, we must always say that nested forms have a default value.\n    get hasDefaultValue() {\n        return true;\n    }\n    get ready() {\n        return this.subFormReady || Promise.resolve();\n    }\n    get useOriginalRevision() {\n        var _a, _b;\n        return ((_a = this.component) === null || _a === void 0 ? void 0 : _a.useOriginalRevision) && !!((_b = this.formObj) === null || _b === void 0 ? void 0 : _b.revisions);\n    }\n    setFormRevision(rev) {\n        // Remove current revisions from src if it is\n        this.formSrc = this.formSrc.replace(/\\/v\\/[0-9a-z]+/, '');\n        const revNumber = Number.parseInt(rev);\n        if (!isNaN(revNumber)) {\n            this.subFormRevision = rev;\n            this.formSrc += `/v/${rev}`;\n        }\n        else {\n            this.subFormRevision = undefined;\n        }\n    }\n    getComponent(path) {\n        if (!this.subForm) {\n            return null;\n        }\n        return this.subForm.getComponent(path);\n    }\n    /* eslint-disable max-statements */\n    getSubOptions(options = {}) {\n        options.events = this.createEmitter();\n        // Make sure to not show the submit button in wizards in the nested forms.\n        lodash_1.default.set(options, 'buttonSettings.showSubmit', false);\n        // Set the parent option to the subform so those references are stable when the subform is created\n        options.parent = this;\n        if (!this.options) {\n            return options;\n        }\n        if (this.options.base) {\n            options.base = this.options.base;\n        }\n        if (this.options.project) {\n            options.project = this.options.project;\n        }\n        if (this.options.readOnly || this.component.disabled) {\n            options.readOnly = this.options.readOnly || this.component.disabled;\n        }\n        if (this.options.breadcrumbSettings) {\n            options.breadcrumbSettings = this.options.breadcrumbSettings;\n        }\n        if (this.options.buttonSettings) {\n            options.buttonSettings = lodash_1.default.clone(this.options.buttonSettings);\n        }\n        if (this.options.viewAsHtml) {\n            options.viewAsHtml = this.options.viewAsHtml;\n        }\n        if (this.options.language) {\n            options.language = this.options.language;\n        }\n        if (this.options.template) {\n            options.template = this.options.template;\n        }\n        if (this.options.templates) {\n            options.templates = this.options.templates;\n        }\n        if (this.options.renderMode) {\n            options.renderMode = this.options.renderMode;\n        }\n        if (this.options.attachMode) {\n            options.attachMode = this.options.attachMode;\n        }\n        if (this.options.iconset) {\n            options.iconset = this.options.iconset;\n        }\n        if (this.options.fileService) {\n            options.fileService = this.options.fileService;\n        }\n        if (this.options.onChange) {\n            options.onChange = this.options.onChange;\n        }\n        if (this.options.preview) {\n            options.preview = this.options.preview;\n        }\n        if (this.options.inEditGrid) {\n            options.inEditGrid = this.options.inEditGrid;\n        }\n        if (this.options.saveDraft) {\n            options.saveDraft = this.options.saveDraft;\n            options.formio = new Formio_1.Formio(this.formSrc);\n        }\n        if (this.options.saveDraftThrottle) {\n            options.saveDraftThrottle = this.options.saveDraftThrottle;\n        }\n        if (this.options.skipDraftRestore) {\n            options.skipDraftRestore = this.options.skipDraftRestore;\n        }\n        options.parent = this;\n        return options;\n    }\n    /* eslint-enable max-statements */\n    render() {\n        if (this.builderMode) {\n            return super.render(this.component.label || 'Nested form');\n        }\n        const subform = this.subForm ? this.subForm.render() : this.renderTemplate('loading');\n        return super.render(subform);\n    }\n    asString(value) {\n        return this.getValueAsString(value);\n    }\n    /**\n     * Prints out the value of form components as a datagrid value.\n     */\n    getValueAsString(value, options) {\n        if (!value) {\n            return 'No data provided';\n        }\n        if (!value.data && value._id) {\n            return value._id;\n        }\n        if (!value.data || !Object.keys(value.data).length) {\n            return 'No data provided';\n        }\n        if (options === null || options === void 0 ? void 0 : options.email) {\n            let result = (`\n        <table border=\"1\" style=\"width:100%\">\n          <tbody>\n      `);\n            this.everyComponent((component) => {\n                if (component.isInputComponent && component.visible && !component.skipInEmail) {\n                    result += (`\n            <tr>\n              <th style=\"padding: 5px 10px;\">${component.label}</th>\n              <td style=\"width:100%;padding:5px 10px;\">${component.getView(component.dataValue, options)}</td>\n            </tr>\n          `);\n                }\n            }, Object.assign(Object.assign({}, options), { fromRoot: true }));\n            result += (`\n          </tbody>\n        </table>\n      `);\n            return result;\n        }\n        if (lodash_1.default.isEmpty(value)) {\n            return '';\n        }\n        return '[Complex Data]';\n    }\n    attach(element) {\n        // Don't attach in builder.\n        if (this.builderMode) {\n            return super.attach(element);\n        }\n        return super.attach(element)\n            .then(() => {\n            if (this.isSubFormLazyLoad() && !this.hasLoadedForm && !this.subFormLoading) {\n                this.createSubForm(true);\n            }\n            return this.subFormReady.then(() => {\n                this.empty(element);\n                if (this.options.builder) {\n                    this.setContent(element, this.ce('div', {\n                        class: 'text-muted text-center p-2'\n                    }, this.text(this.formObj.title)));\n                    return;\n                }\n                this.setContent(element, this.render());\n                if (this.subForm) {\n                    if (this.isNestedWizard) {\n                        element = this.root.element;\n                    }\n                    this.subForm.attach(element);\n                    this.valueChanged = this.hasSetValue;\n                    if (!this.valueChanged && this.dataValue.state !== 'submitted') {\n                        this.setDefaultValue();\n                    }\n                    else {\n                        this.restoreValue();\n                    }\n                }\n                if (!this.builderMode && this.component.modalEdit) {\n                    const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;\n                    const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;\n                    this.componentModal = new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);\n                    this.subForm.element = this.componentModal.refs.componentContent || this.subForm.element;\n                    this.setOpenModalElement();\n                }\n                this.calculateValue();\n            });\n        });\n    }\n    detach() {\n        if (this.subForm) {\n            this.subForm.detach();\n        }\n        super.detach();\n    }\n    get currentForm() {\n        return this._currentForm;\n    }\n    get hasLoadedForm() {\n        return this.formObj\n            && this.formObj.components\n            && Array.isArray(this.formObj.components)\n            && this.formObj.components.length;\n    }\n    set currentForm(instance) {\n        this._currentForm = instance;\n        if (!this.subForm) {\n            return;\n        }\n        this.subForm.getComponents().forEach(component => {\n            component.currentForm = this;\n        });\n    }\n    get isRevisionChanged() {\n        return lodash_1.default.isNumber(this.subFormRevision)\n            && lodash_1.default.isNumber(this.formObj._vid)\n            && this.formObj._vid !== this.subFormRevision;\n    }\n    get subFormData() {\n        var _a;\n        return ((_a = this.dataValue) === null || _a === void 0 ? void 0 : _a.data) || {};\n    }\n    destroy(all = false) {\n        if (this.subForm) {\n            this.subForm.destroy(all);\n            this.subForm = null;\n            this.subFormReady = null;\n        }\n        super.destroy(all);\n    }\n    redraw() {\n        if (this.subForm) {\n            this.subForm.form = this.formObj;\n            this.setSubFormDisabled(this.subForm);\n        }\n        return super.redraw();\n    }\n    /**\n     * Pass everyComponent to subform.\n     * @param {any[]} args - Arguments to pass through to the subform's everyComponent method.\n     * @returns {*} - The result of the subform's everyComponent method.\n     */\n    everyComponent(...args) {\n        if (this.subForm) {\n            this.subForm.everyComponent(...args);\n        }\n    }\n    setSubFormDisabled(subForm) {\n        subForm.disabled = this.disabled; // When the Nested Form is disabled make the subForm disabled\n    }\n    updateSubWizards(subForm) {\n        var _a, _b;\n        if (this.isNestedWizard && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.subWizards) && ((_b = subForm === null || subForm === void 0 ? void 0 : subForm._form) === null || _b === void 0 ? void 0 : _b.display) === 'wizard') {\n            const existedForm = this.root.subWizards.findIndex(form => form.component.form === this.component.form);\n            if (existedForm !== -1) {\n                this.root.subWizards[existedForm] = this;\n            }\n            else {\n                this.root.subWizards.push(this);\n            }\n            this.emit('subWizardsUpdated', subForm);\n        }\n    }\n    /**\n     * Create a subform instance.\n     * @param {boolean} [fromAttach] - This function is being called from an `attach` method.\n     * @param {boolean} [beforeSubmit] - This function is being called from a `beforeSubmit` method.\n     * @returns {*} - The subform instance.\n     */\n    createSubForm(fromAttach, beforeSubmit) {\n        this.subFormReady = this.loadSubForm(fromAttach, beforeSubmit).then((form) => {\n            if (!form) {\n                return;\n            }\n            // Iterate through every component and hide the submit button.\n            (0, utils_1.eachComponent)(form.components, (component) => {\n                this.hideSubmitButton(component);\n            });\n            // If the subform is already created then destroy the old one.\n            if (this.subForm) {\n                this.subForm.destroy();\n            }\n            // Render the form.\n            return (new Form_1.default(form, this.getSubOptions())).ready.then((instance) => {\n                this.subForm = instance;\n                this.subForm.currentForm = this;\n                this.subForm.parentVisible = this.visible;\n                const componentsMap = this.componentsMap;\n                const formComponentsMap = this.subForm.componentsMap;\n                lodash_1.default.assign(componentsMap, formComponentsMap);\n                this.component.components = this.subForm.components.map((comp) => comp.component);\n                this.subForm.on('change', () => {\n                    if (this.subForm) {\n                        this.dataValue = this.subForm.getValue();\n                        this.triggerChange({\n                            noEmit: true\n                        });\n                    }\n                });\n                this.subForm.url = this.formSrc;\n                this.subForm.nosubmit = true;\n                this.subForm.root = this.root;\n                this.subForm.localRoot = this.isNestedWizard ? this.localRoot : this.subForm;\n                this.restoreValue();\n                this.valueChanged = this.hasSetValue;\n                this.onChange();\n                return this.subForm;\n            }).catch((err) => {\n                console.log(err);\n            });\n        }).then((subForm) => {\n            this.updateSubWizards(subForm);\n            return subForm;\n        });\n        return this.subFormReady;\n    }\n    hideSubmitButton(component) {\n        const isSubmitButton = component.type === 'button' && (component.action === 'submit' || !component.action);\n        if (isSubmitButton) {\n            component.hidden = true;\n            // clearOnHide no longer clears from the JSON `hidden` flag, so we make the button conditionally hidden to clear its data\n            component.customConditional = 'show = false';\n        }\n    }\n    /**\n     * Load the subform.\n     * @param {boolean} fromAttach - This function is being called from an `attach` method.\n     * @param {boolean} beforeSubmit - This function is being called from a `beforeSubmit` method.\n     * @returns {Promise} - The promise that resolves when the subform is loaded.\n     */\n    loadSubForm(fromAttach, beforeSubmit) {\n        var _a, _b, _c, _d, _e;\n        const loadHiddenForm = beforeSubmit && !this.component.clearOnHide;\n        if (this.builderMode || (this.conditionallyHidden() && !loadHiddenForm) || (this.isSubFormLazyLoad() && !fromAttach)) {\n            return Promise.resolve();\n        }\n        if (this.hasLoadedForm && !this.isRevisionChanged &&\n            !(this.options.pdf && ((_a = this.component) === null || _a === void 0 ? void 0 : _a.useOriginalRevision) && lodash_1.default.isNull(this.subForm) && !this.subFormLoading)) {\n            // Pass config down to sub forms.\n            if (this.root && this.root.form && this.root.form.config && !this.formObj.config) {\n                this.formObj.config = this.root.form.config;\n            }\n            return Promise.resolve(this.formObj);\n        }\n        else if (this.formSrc) {\n            this.subFormLoading = true;\n            const options = ((_c = (_b = this.root) === null || _b === void 0 ? void 0 : _b.formio) === null || _c === void 0 ? void 0 : _c.base) && ((_e = (_d = this.root) === null || _d === void 0 ? void 0 : _d.formio) === null || _e === void 0 ? void 0 : _e.projectUrl)\n                ? {\n                    base: this.root.formio.base,\n                    project: this.root.formio.projectUrl,\n                }\n                : {};\n            return (new Formio_1.Formio(this.formSrc, options)).loadForm({ params: { live: 1 } })\n                .then((formObj) => {\n                this.formObj = formObj;\n                if (this.options.pdf && this.component.useOriginalRevision) {\n                    this.formObj.display = 'form';\n                }\n                this.subFormLoading = false;\n                return formObj;\n            })\n                .catch((err) => {\n                console.log(err);\n                return null;\n            });\n        }\n        return Promise.resolve();\n    }\n    checkComponentConditions(data, flags, row) {\n        const visible = super.checkComponentConditions(data, flags, row);\n        // Return if already hidden\n        if (!visible) {\n            return visible;\n        }\n        if (this.subForm) {\n            return this.subForm.checkConditions(this.subFormData, flags);\n        }\n        // There are few cases when subForm is not loaded when a change is triggered,\n        // so we need to perform checkConditions after it is ready, or some conditional fields might be hidden in View mode\n        else if (this.subFormReady) {\n            this.subFormReady.then(() => {\n                if (this.subForm) {\n                    return this.subForm.checkConditions(this.subFormData, flags);\n                }\n            });\n        }\n        return visible;\n    }\n    calculateValue(data, flags, row) {\n        if (this.subForm) {\n            return this.subForm.calculateValue(this.subFormData, flags);\n        }\n        return super.calculateValue(data, flags, row);\n    }\n    setPristine(pristine) {\n        super.setPristine(pristine);\n        if (this.subForm) {\n            this.subForm.setPristine(pristine);\n        }\n    }\n    /**\n     * Determine if the subform should be submitted.\n     * @returns {*|boolean} - TRUE if the subform should be submitted, FALSE if it should not.\n     */\n    get shouldSubmit() {\n        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.shouldConditionallyClear();\n    }\n    /**\n     * Returns the data for the subform.\n     * @returns {*} - the data for the subform.\n     */\n    getSubFormData() {\n        if (lodash_1.default.get(this.subForm, 'form.display') === 'pdf') {\n            return this.subForm.getSubmission();\n        }\n        else {\n            return Promise.resolve(this.dataValue);\n        }\n    }\n    /**\n     * Submit the subform if configured to do so.\n     * @returns {Promise} - The promise that resolves when the subform is submitted.\n     */\n    submitSubForm() {\n        // If we wish to submit the form on next page, then do that here.\n        if (this.shouldSubmit) {\n            return this.subFormReady.then(() => {\n                if (!this.subForm) {\n                    return this.dataValue;\n                }\n                this.subForm.nosubmit = false;\n                this.subForm.submitted = true;\n                return this.subForm.submitForm({}, true).then(result => {\n                    this.subForm.loading = false;\n                    this.subForm.showAllErrors = false;\n                    this.dataValue = result.submission;\n                    return this.dataValue;\n                }).catch(err => {\n                    this.subForm.showAllErrors = true;\n                    this.subForm.onSubmissionError(err);\n                    return Promise.reject(err);\n                });\n            });\n        }\n        return this.getSubFormData();\n    }\n    /**\n     * Submit the form before the next page is triggered.\n     * @param {Function} next - The function to trigger the next page.\n     * @returns {Promise} - The promise that resolves when the subform submission is complete (if necessary) and the next page is triggered.\n     */\n    beforePage(next) {\n        // Should not submit child forms if we are going to the previous page\n        if (!next) {\n            return super.beforePage(next);\n        }\n        return this.submitSubForm(true).then(() => super.beforePage(next));\n    }\n    /**\n     * Submit the form before the whole form is triggered.\n     * @returns {Promise} - The promise that resolves when the subform submission is complete (if necessary) and the form is submitted.\n     */\n    beforeSubmit() {\n        var _a, _b, _c;\n        const submission = this.dataValue;\n        // Cancel triggered saveDraft\n        if (((_a = this.subForm) === null || _a === void 0 ? void 0 : _a.draftEnabled) && ((_b = this.subForm.triggerSaveDraft) === null || _b === void 0 ? void 0 : _b.cancel)) {\n            this.subForm.triggerSaveDraft.cancel();\n        }\n        const isAlreadySubmitted = submission && submission._id && submission.form;\n        const isDraftSubmission = this.options.saveDraft && submission.state === 'draft';\n        // This submission has already been submitted, so just return the reference data.\n        if (isAlreadySubmitted && !((_c = this.subForm) === null || _c === void 0 ? void 0 : _c.wizard) && !isDraftSubmission) {\n            this.dataValue = submission;\n            return Promise.resolve(this.dataValue);\n        }\n        // we need to load a hidden form (when clearOnHide is disabled) in order to get and submit (if needed) its data\n        const loadHiddenForm = !this.component.clearOnHide;\n        if ((this.isSubFormLazyLoad() || loadHiddenForm) && !this.subFormLoading && !this.subForm) {\n            return this.createSubForm(true, true)\n                .then(() => this.submitSubForm(false))\n                .then(() => this.dataValue)\n                .then(() => super.beforeSubmit());\n        }\n        else {\n            return this.submitSubForm(false)\n                .then(() => this.dataValue)\n                .then(() => super.beforeSubmit());\n        }\n    }\n    isSubFormLazyLoad() {\n        var _a, _b;\n        return ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a._form) === null || _b === void 0 ? void 0 : _b.display) === 'wizard' && this.component.lazyLoad;\n    }\n    isHidden() {\n        if (!this.visible) {\n            return true;\n        }\n        return !super.checkConditions(this.rootValue);\n    }\n    setValue(submission, flags = {}) {\n        var _a;\n        const changed = super.setValue(submission, flags);\n        this.valueChanged = true;\n        if (this.subForm) {\n            const revisionPath = submission._frid ? '_frid' : '_vid';\n            const shouldLoadOriginalRevision = this.useOriginalRevision\n                && (lodash_1.default.isNumber(submission[revisionPath]) || lodash_1.default.isNumber(submission._fvid))\n                && lodash_1.default.isNumber((_a = this.subForm.form) === null || _a === void 0 ? void 0 : _a[revisionPath])\n                && submission._fvid !== this.subForm.form[revisionPath];\n            if (shouldLoadOriginalRevision) {\n                this.setFormRevision(submission._frid || submission._fvid);\n                this.createSubForm().then(() => {\n                    this.attach(this.element);\n                });\n            }\n            else {\n                this.setSubFormValue(submission, flags);\n            }\n        }\n        return changed;\n    }\n    setSubFormValue(submission, flags) {\n        var _a, _b, _c, _d;\n        const shouldLoadSubmissionById = submission\n            && submission._id\n            && this.subForm.formio\n            && lodash_1.default.isEmpty(submission.data);\n        const shouldLoadDraftById = this.options.saveDraft && lodash_1.default.isEmpty(submission.data) && lodash_1.default.get(this.subForm, 'submission._id');\n        if (shouldLoadSubmissionById || shouldLoadDraftById) {\n            const formId = submission.form || this.formObj.form || this.component.form;\n            const submissionUrl = `${this.subForm.formio.formsUrl}/${formId}/submission/${submission._id || this.subForm.submission._id}`;\n            const options = ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.formio) === null || _b === void 0 ? void 0 : _b.base) && ((_d = (_c = this.root) === null || _c === void 0 ? void 0 : _c.formio) === null || _d === void 0 ? void 0 : _d.projectUrl)\n                ? {\n                    base: this.root.formio.base,\n                    project: this.root.formio.projectUrl,\n                }\n                : {};\n            this.subForm.setUrl(submissionUrl, Object.assign(Object.assign({}, this.options), options));\n            this.subForm.loadSubmission().catch((err) => {\n                console.error(`Unable to load subform submission ${submission._id}:`, err);\n            });\n        }\n        else {\n            this.onSetSubFormValue(submission, flags);\n        }\n    }\n    /**\n     * Sets the subform value\n     * @param {object|null|undefined} submission - The submission to set.\n     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.\n     * @returns {void}\n     */\n    onSetSubFormValue(submission, flags) {\n        this.subForm.setValue(submission, flags);\n    }\n    isEmpty(value = this.dataValue) {\n        return value === null || lodash_1.default.isEqual(value, this.emptyValue) || (this.areAllComponentsEmpty(value === null || value === void 0 ? void 0 : value.data) && !(value === null || value === void 0 ? void 0 : value._id));\n    }\n    areAllComponentsEmpty(data) {\n        let res = true;\n        if (this.subForm) {\n            this.subForm.everyComponent((comp) => {\n                const componentValue = lodash_1.default.get(data, comp.key);\n                res &= comp.isEmpty(componentValue);\n            });\n        }\n        else {\n            res = false;\n        }\n        return res;\n    }\n    getValue() {\n        if (this.subForm) {\n            return this.subForm.getValue();\n        }\n        return this.dataValue;\n    }\n    get errors() {\n        let errors = super.errors;\n        if (this.subForm) {\n            errors = errors.concat(this.subForm.errors);\n        }\n        return errors;\n    }\n    updateSubFormVisibility() {\n        if (this.subForm) {\n            this.subForm.parentVisible = this.visible;\n        }\n    }\n    /**\n     * Determines if this form is a Nested Wizard\n     * which means it should be a Wizard itself and should be a direct child of a Wizard's page\n     * @returns {boolean} - TRUE if this form is a Nested Wizard, FALSE otherwise\n     */\n    get isNestedWizard() {\n        var _a, _b, _c, _d, _e;\n        return ((_b = (_a = this.subForm) === null || _a === void 0 ? void 0 : _a._form) === null || _b === void 0 ? void 0 : _b.display) === 'wizard' && ((_e = (_d = (_c = this.parent) === null || _c === void 0 ? void 0 : _c.parent) === null || _d === void 0 ? void 0 : _d._form) === null || _e === void 0 ? void 0 : _e.display) === 'wizard';\n    }\n    get visible() {\n        return super.visible;\n    }\n    set visible(value) {\n        const isNestedWizard = this.isNestedWizard;\n        if (this._visible !== value) {\n            this._visible = value;\n            // Form doesn't load if hidden. If it becomes visible, create the form.\n            if (!this.subForm && value) {\n                this.createSubForm();\n                this.subFormReady.then(() => {\n                    this.updateSubFormVisibility();\n                    this.clearOnHide();\n                });\n                this.redraw();\n                return;\n            }\n            this.updateSubFormVisibility();\n            this.clearOnHide();\n            isNestedWizard ? this.rebuild() : this.redraw();\n        }\n        if (!value && isNestedWizard) {\n            this.root.redraw();\n        }\n    }\n    get parentVisible() {\n        return super.parentVisible;\n    }\n    set parentVisible(value) {\n        if (this._parentVisible !== value) {\n            this._parentVisible = value;\n            this.clearOnHide();\n            // Form doesn't load if hidden. If it becomes visible, create the form.\n            if (!this.subForm && value) {\n                this.createSubForm();\n                this.subFormReady.then(() => {\n                    this.updateSubFormVisibility();\n                });\n                this.redraw();\n                return;\n            }\n            this.updateSubFormVisibility();\n            this.redraw();\n        }\n    }\n    isInternalEvent(event) {\n        switch (event) {\n            case 'focus':\n            case 'blur':\n            case 'componentChange':\n            case 'componentError':\n            case 'error':\n            case 'formLoad':\n            case 'languageChanged':\n            case 'render':\n            case 'checkValidity':\n            case 'initialized':\n            case 'submit':\n            case 'submitButton':\n            case 'nosubmit':\n            case 'updateComponent':\n            case 'submitDone':\n            case 'submissionDeleted':\n            case 'requestDone':\n            case 'nextPage':\n            case 'prevPage':\n            case 'wizardNavigationClicked':\n            case 'updateWizardNav':\n            case 'restoreDraft':\n            case 'saveDraft':\n            case 'saveComponent':\n            case 'pdfUploaded':\n                return true;\n            default:\n                return false;\n        }\n    }\n    createEmitter() {\n        const emitter = new eventemitter3_1.default();\n        const nativeEmit = emitter.emit;\n        const that = this;\n        emitter.emit = function (event, ...args) {\n            const eventType = event.replace(`${that.options.namespace}.`, '');\n            nativeEmit.call(this, event, ...args);\n            if (!that.isInternalEvent(eventType)) {\n                that.emit(eventType, ...args);\n            }\n        };\n        return emitter;\n    }\n    deleteValue() {\n        super.setValue(null, {\n            noUpdateEvent: true,\n            noDefault: true\n        });\n        this.unset();\n    }\n}\nexports[\"default\"] = FormComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/form/Form.js?");
 
 /***/ }),
 
@@ -5334,7 +5334,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Component_1 = __importDefault(__webpack_require__(/*! ../_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nclass HTMLComponent extends Component_1.default {\n    static schema(...extend) {\n        return Component_1.default.schema({\n            label: 'HTML',\n            type: 'htmlelement',\n            tag: 'div',\n            attrs: [],\n            content: '',\n            input: false,\n            persistent: false\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'HTML Element',\n            group: 'layout',\n            icon: 'code',\n            weight: 0,\n            documentation: '/userguide/form-building/layout-components#html-element',\n            showPreview: false,\n            schema: HTMLComponent.schema()\n        };\n    }\n    static savedValueTypes() {\n        return [];\n    }\n    get defaultSchema() {\n        return HTMLComponent.schema();\n    }\n    get content() {\n        if (this.builderMode) {\n            return this.component.content;\n        }\n        // i18n returns error exactly with word 'select', spaces will be trimmed\n        if (this.component.content.replace(/(<(\\/?[^>]+)>)/g, '').trim() === 'select') {\n            return ` ${this.component.content} `;\n        }\n        const submission = lodash_1.default.get(this.root, 'submission', {});\n        const content = this.component.content ? this.interpolate(this.sanitize(this.component.content, this.shouldSanitizeValue), {\n            metadata: submission.metadata || {},\n            submission: submission,\n            data: this.rootValue,\n            row: this.data\n        }) : '';\n        return content;\n    }\n    get singleTags() {\n        return ['br', 'img', 'hr'];\n    }\n    checkRefreshOn(changed) {\n        super.checkRefreshOn(changed);\n        let visible;\n        if (this.hasCondition()) {\n            this._conditionallyHidden = this.checkConditionallyHidden();\n            visible = !this.conditionallyHidden;\n        }\n        else {\n            visible = !this.component.hidden;\n        }\n        const shouldSetContent = !this.builderMode\n            && this.component.refreshOnChange\n            && this.element\n            && !lodash_1.default.isUndefined(changed)\n            && ((lodash_1.default.isBoolean(changed) && changed) || !lodash_1.default.isEmpty(changed))\n            && visible;\n        if (shouldSetContent) {\n            this.setContent(this.element, this.renderContent());\n        }\n    }\n    renderContent() {\n        const submission = lodash_1.default.get(this.root, 'submission', {});\n        return this.renderTemplate('html', {\n            component: this.component,\n            tag: this.component.tag,\n            attrs: (this.component.attrs || []).map((attr) => {\n                return {\n                    attr: attr.attr,\n                    value: this.interpolate(attr.value, {\n                        metadata: submission.metadata || {},\n                        submission: submission,\n                        data: this.rootValue,\n                        row: this.data\n                    })\n                };\n            }),\n            content: this.content,\n            singleTags: this.singleTags,\n        });\n    }\n    render() {\n        return super.render(this.renderContent());\n    }\n    get dataReady() {\n        var _a;\n        return ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submissionReady) || Promise.resolve();\n    }\n    attach(element) {\n        this.loadRefs(element, { html: 'single' });\n        this.dataReady.then(() => {\n            if (this.refs.html) {\n                this.setContent(this.refs.html, this.content);\n            }\n        });\n        return super.attach(element);\n    }\n}\nexports[\"default\"] = HTMLComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/html/HTML.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Component_1 = __importDefault(__webpack_require__(/*! ../_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nclass HTMLComponent extends Component_1.default {\n    static schema(...extend) {\n        return Component_1.default.schema({\n            label: 'HTML',\n            type: 'htmlelement',\n            tag: 'div',\n            attrs: [],\n            content: '',\n            input: false,\n            persistent: false\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'HTML Element',\n            group: 'layout',\n            icon: 'code',\n            weight: 0,\n            documentation: '/userguide/form-building/layout-components#html-element',\n            showPreview: false,\n            schema: HTMLComponent.schema()\n        };\n    }\n    static savedValueTypes() {\n        return [];\n    }\n    get defaultSchema() {\n        return HTMLComponent.schema();\n    }\n    get content() {\n        if (this.builderMode) {\n            return this.component.content;\n        }\n        // i18n returns error exactly with word 'select', spaces will be trimmed\n        if (this.component.content.replace(/(<(\\/?[^>]+)>)/g, '').trim() === 'select') {\n            return ` ${this.component.content} `;\n        }\n        const submission = lodash_1.default.get(this.root, 'submission', {});\n        const content = this.component.content ? this.interpolate(this.sanitize(this.component.content, this.shouldSanitizeValue), {\n            metadata: submission.metadata || {},\n            submission: submission,\n            data: this.rootValue,\n            row: this.data\n        }) : '';\n        return content;\n    }\n    get singleTags() {\n        return ['br', 'img', 'hr'];\n    }\n    checkRefreshOn(changed) {\n        super.checkRefreshOn(changed);\n        let visible;\n        if (this.hasCondition()) {\n            visible = !this.conditionallyHidden();\n        }\n        else {\n            visible = !this.component.hidden;\n        }\n        const shouldSetContent = !this.builderMode\n            && this.component.refreshOnChange\n            && this.element\n            && !lodash_1.default.isUndefined(changed)\n            && ((lodash_1.default.isBoolean(changed) && changed) || !lodash_1.default.isEmpty(changed))\n            && visible;\n        if (shouldSetContent) {\n            this.setContent(this.element, this.renderContent());\n        }\n    }\n    renderContent() {\n        const submission = lodash_1.default.get(this.root, 'submission', {});\n        return this.renderTemplate('html', {\n            component: this.component,\n            tag: this.component.tag,\n            attrs: (this.component.attrs || []).map((attr) => {\n                return {\n                    attr: attr.attr,\n                    value: this.interpolate(attr.value, {\n                        metadata: submission.metadata || {},\n                        submission: submission,\n                        data: this.rootValue,\n                        row: this.data\n                    })\n                };\n            }),\n            content: this.content,\n            singleTags: this.singleTags,\n        });\n    }\n    render() {\n        return super.render(this.renderContent());\n    }\n    get dataReady() {\n        var _a;\n        return ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submissionReady) || Promise.resolve();\n    }\n    attach(element) {\n        this.loadRefs(element, { html: 'single' });\n        this.dataReady.then(() => {\n            if (this.refs.html) {\n                this.setContent(this.refs.html, this.content);\n            }\n        });\n        return super.attach(element);\n    }\n}\nexports[\"default\"] = HTMLComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/html/HTML.js?");
 
 /***/ }),
 
@@ -5400,7 +5400,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                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    resetValue() {\n        this.unset();\n        this.setValue(this.emptyValue, {\n            noUpdateEvent: true,\n            noValidate: true,\n            resetValue: true\n        });\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    get selectMetadata() {\n        return super.selectData;\n    }\n    get selectData() {\n        return this.selectMetadata || this.component.selectData;\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 = !this.component.dataSrc || this.component.dataSrc === 'values';\n        this.loadedOptions = [];\n        if (!this.visible) {\n            this.itemsLoadedResolve();\n        }\n        // Get the template keys for this radio component.\n        this.getTemplateKeys();\n    }\n    beforeSubmit() {\n        return new Promise(res => {\n            this.dataReady.then(() => res(true));\n        });\n    }\n    render() {\n        if (!this.optionsLoaded) {\n            return super.render(this.renderTemplate('loader'));\n        }\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.dataSrc === 'values' ? this.component.values : this.loadedOptions;\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 shouldUseSelectData = (options.modalPreview || this.inDataTable)\n            && this.component.dataSrc === 'url' && (this.loadedOptions.length || this.selectData);\n        if (this.component.dataSrc !== 'values' && !shouldUseSelectData) {\n            return value;\n        }\n        const values = shouldUseSelectData ? this.loadedOptions : this.component.values;\n        const option = !(values === null || values === void 0 ? void 0 : values.length) && shouldUseSelectData ? {\n            label: this.itemTemplate(this.selectData),\n        } : 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    get shouldLoad() {\n        // do not load options if the value is empty in readOnly and we have options available in metadata\n        if (this.options.readOnly && this.isEmpty() && this.listData) {\n            return false;\n        }\n        return super.shouldLoad;\n    }\n    loadItems(url, search, headers, options, method, body) {\n        if (this.optionsLoaded) {\n            this.itemsLoadedResolve();\n            return;\n        }\n        if (!this.shouldLoad && this.listData) {\n            this.loadItemsFromMetadata();\n            this.itemsLoadedResolve();\n            this.optionsLoaded = true;\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        })\n            .catch((err) => {\n            this.handleLoadingError(err);\n        })\n            .finally(() => {\n            this.optionsLoaded = true;\n            this.redraw();\n        });\n    }\n    loadItemsFromMetadata() {\n        this.listData.forEach((item, i) => {\n            this.loadedOptions[i] = {\n                label: this.itemTemplate(item)\n            };\n            if (lodash_1.default.isEqual(item, this.selectData || lodash_1.default.pick(this.dataValue, lodash_1.default.keys(item)))) {\n                this.loadedOptions[i].value = this.dataValue;\n            }\n        });\n        this.optionsLoaded = true;\n        this.redraw();\n    }\n    setItems(items) {\n        const listData = [];\n        items === null || items === void 0 ? void 0 : items.forEach((item, i) => {\n            const valueAtProperty = lodash_1.default.get(item, this.component.valueProperty);\n            this.loadedOptions[i] = {\n                value: this.component.valueProperty ? valueAtProperty : item,\n                label: this.component.valueProperty ? this.itemTemplate(item, valueAtProperty) : this.itemTemplate(item, item, i)\n            };\n            listData.push(this.templateData[this.component.valueProperty ? valueAtProperty : i]);\n            const value = this.loadedOptions[i].value;\n            if (!this.isRadio && (lodash_1.default.isObject(value) || lodash_1.default.isBoolean(value) || lodash_1.default.isUndefined(value))) {\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        this.itemsLoadedResolve();\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    resetValue() {\n        this.unset();\n        this.setValue(this.emptyValue, {\n            noUpdateEvent: true,\n            noValidate: true,\n            resetValue: true\n        });\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    get selectMetadata() {\n        return super.selectData;\n    }\n    get selectData() {\n        return this.selectMetadata || this.component.selectData;\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 = !this.component.dataSrc || this.component.dataSrc === 'values';\n        this.loadedOptions = [];\n        if (!this.visible) {\n            this.itemsLoadedResolve();\n        }\n        // Get the template keys for this radio component.\n        this.getTemplateKeys();\n    }\n    beforeSubmit() {\n        return new Promise(res => {\n            this.dataReady.then(() => res(true));\n        });\n    }\n    render() {\n        if (!this.optionsLoaded) {\n            return super.render(this.renderTemplate('loader'));\n        }\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.dataSrc === 'values' ? this.component.values : this.loadedOptions;\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 shouldUseSelectData = (options.modalPreview || this.inDataTable)\n            && this.component.dataSrc === 'url' && (this.loadedOptions.length || this.selectData);\n        if (this.component.dataSrc !== 'values' && !shouldUseSelectData) {\n            return value;\n        }\n        const values = shouldUseSelectData ? this.loadedOptions : this.component.values;\n        const option = !(values === null || values === void 0 ? void 0 : values.length) && shouldUseSelectData ? {\n            label: this.itemTemplate(this.selectData),\n        } : 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    get shouldLoad() {\n        // do not load options if the value is empty in readOnly and we have options available in metadata\n        if (this.options.readOnly && this.isEmpty() && this.listData) {\n            return false;\n        }\n        return super.shouldLoad;\n    }\n    loadItems(url, search, headers, options, method, body) {\n        if (this.optionsLoaded) {\n            this.itemsLoadedResolve();\n            return;\n        }\n        if (!this.shouldLoad && this.listData) {\n            this.loadItemsFromMetadata();\n            this.itemsLoadedResolve();\n            this.optionsLoaded = true;\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        })\n            .catch((err) => {\n            this.handleLoadingError(err);\n        })\n            .finally(() => {\n            this.optionsLoaded = true;\n            this.redraw();\n        });\n    }\n    loadItemsFromMetadata() {\n        this.listData.forEach((item, i) => {\n            this.loadedOptions[i] = {\n                label: this.itemTemplate(item)\n            };\n            if (lodash_1.default.isEqual(item, this.selectData || lodash_1.default.pick(this.dataValue, lodash_1.default.keys(item)))) {\n                this.loadedOptions[i].value = this.dataValue;\n            }\n        });\n        this.optionsLoaded = true;\n        this.redraw();\n    }\n    setItems(items) {\n        const listData = [];\n        items === null || items === void 0 ? void 0 : items.forEach((item, i) => {\n            const valueAtProperty = lodash_1.default.get(item, this.component.valueProperty);\n            this.loadedOptions[i] = {\n                value: this.component.valueProperty ? valueAtProperty : item,\n                label: this.component.valueProperty ? this.itemTemplate(item, valueAtProperty) : this.itemTemplate(item, item, i)\n            };\n            listData.push(this.templateData[this.component.valueProperty ? valueAtProperty : i]);\n            const value = this.loadedOptions[i].value;\n            if (!this.isRadio && (lodash_1.default.isObject(value) || lodash_1.default.isBoolean(value) || lodash_1.default.isUndefined(value))) {\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        this.itemsLoadedResolve();\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 = (value === undefined || value === null) ? false : (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?");
 
 /***/ }),
 
@@ -5433,7 +5433,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                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        // Ensure that for dataSrc == 'values' that there are not any other superfluous values.\n        if (this.component.dataSrc === 'values') {\n            for (const key in value) {\n                if (!this.component.values.find((val) => val.value === key)) {\n                    delete value[key];\n                }\n            }\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        var _a, _b;\n        if (!value) {\n            return '';\n        }\n        if (this.isSelectURL) {\n            if (options.modalPreview || this.options.readOnly || this.inDataTable) {\n                const checkedItems = lodash_1.default.keys(lodash_1.default.pickBy(value, (val) => val));\n                if (((_a = this.selectData) === null || _a === void 0 ? void 0 : _a.length) === checkedItems.length) {\n                    return this.selectData.map(item => this.itemTemplate(item)).join(', ');\n                }\n                else if ((_b = this.loadedOptions) === null || _b === void 0 ? void 0 : _b.length) {\n                    return this.loadedOptions.filter((option) => value[option.value]).map((option) => option.label).join(', ');\n                }\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    setCustomValidity(messages, dirty, external) {\n        if (this.options.building && lodash_1.default.find(messages, { ruleName: 'invalidValueProperty' })) {\n            setTimeout(() => {\n                this.root && (0, utils_1.getComponent)(this.root.components, 'valueProperty').setCustomValidity(messages, dirty);\n            }, 0);\n            return super.setCustomValidity(lodash_1.default.filter(messages, (message) => message.ruleName !== 'invalidValueProperty'), dirty, external);\n        }\n        else {\n            return super.setCustomValidity(messages, dirty, external);\n        }\n    }\n    validateValueAvailability(setting, value) {\n        if (!(0, utils_1.boolValue)(setting) || !value) {\n            return true;\n        }\n        const values = this.component.dataSrc === 'values' ? this.component.values : this.loadedOptions;\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 hasDefaultValue() {\n        return true;\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        // Ensure that for dataSrc == 'values' that there are not any other superfluous values.\n        if (this.component.dataSrc === 'values') {\n            for (const key in value) {\n                if (!this.component.values.find((val) => val.value === key)) {\n                    delete value[key];\n                }\n            }\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        var _a, _b;\n        if (!value) {\n            return '';\n        }\n        if (this.isSelectURL) {\n            if (options.modalPreview || this.options.readOnly || this.inDataTable) {\n                const checkedItems = lodash_1.default.keys(lodash_1.default.pickBy(value, (val) => val));\n                if (((_a = this.selectData) === null || _a === void 0 ? void 0 : _a.length) === checkedItems.length) {\n                    return this.selectData.map(item => this.itemTemplate(item)).join(', ');\n                }\n                else if ((_b = this.loadedOptions) === null || _b === void 0 ? void 0 : _b.length) {\n                    return this.loadedOptions.filter((option) => value[option.value]).map((option) => option.label).join(', ');\n                }\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    setCustomValidity(messages, dirty, external) {\n        if (this.options.building && lodash_1.default.find(messages, { ruleName: 'invalidValueProperty' })) {\n            setTimeout(() => {\n                this.root && (0, utils_1.getComponent)(this.root.components, 'valueProperty').setCustomValidity(messages, dirty);\n            }, 0);\n            return super.setCustomValidity(lodash_1.default.filter(messages, (message) => message.ruleName !== 'invalidValueProperty'), dirty, external);\n        }\n        else {\n            return super.setCustomValidity(messages, dirty, external);\n        }\n    }\n    validateValueAvailability(setting, value) {\n        if (!(0, utils_1.boolValue)(setting) || !value) {\n            return true;\n        }\n        const values = this.component.dataSrc === 'values' ? this.component.values : this.loadedOptions;\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?");
 
 /***/ }),
 
@@ -5477,7 +5477,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 NestedComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/nested/NestedComponent */ \"./lib/cjs/components/_classes/nested/NestedComponent.js\"));\nclass TabsComponent extends NestedComponent_1.default {\n    static schema(...extend) {\n        return NestedComponent_1.default.schema({\n            label: 'Tabs',\n            type: 'tabs',\n            input: false,\n            key: 'tabs',\n            persistent: false,\n            tableView: false,\n            components: [\n                {\n                    label: 'Tab 1',\n                    key: 'tab1',\n                    components: [],\n                },\n            ],\n            verticalLayout: false,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Tabs',\n            group: 'layout',\n            icon: 'folder-o',\n            weight: 50,\n            documentation: '/userguide/form-building/layout-components#tabs',\n            showPreview: false,\n            schema: TabsComponent.schema(),\n        };\n    }\n    static savedValueTypes() {\n        return [];\n    }\n    get defaultSchema() {\n        return TabsComponent.schema();\n    }\n    get schema() {\n        const schema = super.schema;\n        // We need to clone this because the builder uses the \"components\" reference and this would reset that reference.\n        const components = lodash_1.default.cloneDeep(this.component.components);\n        schema.components = components.map((tab, index) => {\n            tab.components = this.tabs[index].map((component) => component.schema);\n            return tab;\n        });\n        return schema;\n    }\n    get tabKey() {\n        return `tab-${this.key}`;\n    }\n    get tabLikey() {\n        return `tabLi-${this.key}`;\n    }\n    get tabLinkKey() {\n        return `tabLink-${this.key}`;\n    }\n    constructor(...args) {\n        super(...args);\n        this.currentTab = 0;\n        this.noField = true;\n    }\n    init() {\n        this.components = [];\n        this.tabs = [];\n        lodash_1.default.each(this.component.components, (tab, index) => {\n            this.tabs[index] = [];\n            // Initialize empty tabs.\n            tab.components = tab.components || [];\n            lodash_1.default.each(tab.components, (comp) => {\n                const component = this.createComponent(comp);\n                component.tab = index;\n                this.tabs[index].push(component);\n            });\n        });\n    }\n    render() {\n        return super.render(this.renderTemplate('tab', {\n            tabKey: this.tabKey,\n            tabLikey: this.tabLikey,\n            tabLinkKey: this.tabLinkKey,\n            currentTab: this.currentTab,\n            tabComponents: this.tabs.map(tab => this.renderComponents(tab)),\n        }, (this.options.flatten || this.options.pdf ? 'flat' : null)));\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            [this.tabLinkKey]: 'multiple',\n            [this.tabKey]: 'multiple',\n            [this.tabLikey]: 'multiple',\n        });\n        ['change', 'error'].forEach(event => this.on(event, this.handleTabsValidation.bind(this)));\n        const superAttach = super.attach(element);\n        this.refs[this.tabLinkKey].forEach((tabLink, index) => {\n            this.addEventListener(tabLink, 'click', (event) => {\n                event.preventDefault();\n                this.setTab(index);\n            });\n        });\n        this.refs[this.tabKey].forEach((tab, index) => {\n            this.attachComponents(tab, this.tabs[index], this.component.components[index].components);\n        });\n        return superAttach;\n    }\n    detach(all) {\n        super.detach(all);\n    }\n    /**\n     * Set the current tab.\n     * @param {number} index - The index of the tab to set.\n     */\n    setTab(index) {\n        if (!this.tabs || !this.tabs[index] || !this.refs[this.tabKey] || !this.refs[this.tabKey][index]) {\n            return;\n        }\n        this.currentTab = index;\n        lodash_1.default.each(this.refs[this.tabKey], (tab) => {\n            this.removeClass(tab, 'formio-tab-panel-active');\n            tab.style.display = 'none';\n        });\n        this.addClass(this.refs[this.tabKey][index], 'formio-tab-panel-active');\n        this.refs[this.tabKey][index].style.display = 'block';\n        lodash_1.default.each(this.refs[this.tabLinkKey], (tabLink, tabIndex) => {\n            if (this.refs[this.tabLinkKey][tabIndex]) {\n                this.removeClass(tabLink, 'active');\n                this.removeClass(tabLink, 'formio-tab-link-active');\n            }\n            if (this.refs[this.tabLikey][tabIndex]) {\n                this.removeClass(this.refs[this.tabLikey][tabIndex], 'active');\n                this.removeClass(this.refs[this.tabLikey][tabIndex], 'formio-tab-link-container-active');\n            }\n        });\n        if (this.refs[this.tabLikey][index]) {\n            this.addClass(this.refs[this.tabLikey][index], 'active');\n            this.addClass(this.refs[this.tabLikey][index], 'formio-tab-link-container-active');\n        }\n        if (this.refs[this.tabLinkKey][index]) {\n            this.addClass(this.refs[this.tabLinkKey][index], 'active');\n            this.addClass(this.refs[this.tabLinkKey][index], 'formio-tab-link-active');\n        }\n        this.triggerChange();\n    }\n    beforeFocus(component) {\n        if ('beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n        const tabIndex = this.tabs.findIndex((tab) => {\n            return tab.some((comp) => comp === component);\n        });\n        if (tabIndex !== -1 && this.currentTab !== tabIndex) {\n            this.setTab(tabIndex);\n        }\n    }\n    setErrorClasses(elements, dirty, hasErrors, hasMessages, element = this.element) {\n        if (this.component.modalEdit) {\n            super.setErrorClasses(elements, dirty, hasErrors, hasMessages, element);\n        }\n        elements.forEach((element) => {\n            this.addClass(element, 'is-invalid');\n            if (element.getAttribute('ref') !== 'openModal') {\n                if (this.options.highlightErrors) {\n                    this.addClass(element, 'tab-error');\n                }\n                else {\n                    this.addClass(element, 'has-error');\n                }\n            }\n        });\n    }\n    clearErrorClasses(elements) {\n        if (this.options.server || !this.rendered) {\n            return;\n        }\n        if (this.component.modalEdit) {\n            const element = Array.isArray(elements) || elements instanceof NodeList ? this.element : elements;\n            super.clearErrorClasses(element);\n        }\n        elements = Array.isArray(elements) || elements instanceof NodeList ? elements : [elements];\n        elements.forEach((element) => {\n            this.removeClass(element, 'is-invalid');\n            this.removeClass(element, 'tab-error');\n            this.removeClass(element, 'has-error');\n        });\n    }\n    handleTabsValidation() {\n        if (!this.refs[this.tabLinkKey] || !this.refs[this.tabLinkKey].length || !this.tabs.length) {\n            return;\n        }\n        this.clearErrorClasses(this.refs[this.tabLinkKey]);\n        const invalidTabsIndexes = this.tabs.reduce((invalidTabs, tab, tabIndex) => {\n            const hasComponentWithError = tab.some(comp => !!comp.error);\n            return hasComponentWithError ? [...invalidTabs, tabIndex] : invalidTabs;\n        }, []);\n        if (!invalidTabsIndexes.length) {\n            return;\n        }\n        const invalidTabs = [...this.refs[this.tabLinkKey]].filter((_, tabIndex) => invalidTabsIndexes.includes(tabIndex));\n        this.setErrorClasses(invalidTabs);\n    }\n}\nexports[\"default\"] = TabsComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/tabs/Tabs.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 NestedComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/nested/NestedComponent */ \"./lib/cjs/components/_classes/nested/NestedComponent.js\"));\nclass TabsComponent extends NestedComponent_1.default {\n    static schema(...extend) {\n        return NestedComponent_1.default.schema({\n            label: 'Tabs',\n            type: 'tabs',\n            input: false,\n            key: 'tabs',\n            persistent: false,\n            tableView: false,\n            components: [\n                {\n                    label: 'Tab 1',\n                    key: 'tab1',\n                    components: [],\n                },\n            ],\n            verticalLayout: false,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Tabs',\n            group: 'layout',\n            icon: 'folder-o',\n            weight: 50,\n            documentation: '/userguide/form-building/layout-components#tabs',\n            showPreview: false,\n            schema: TabsComponent.schema(),\n        };\n    }\n    static savedValueTypes() {\n        return [];\n    }\n    get defaultSchema() {\n        return TabsComponent.schema();\n    }\n    get schema() {\n        const schema = super.schema;\n        // We need to clone this because the builder uses the \"components\" reference and this would reset that reference.\n        const components = lodash_1.default.cloneDeep(this.component.components);\n        schema.components = components.map((tab, index) => {\n            tab.components = this.tabs[index].map((component) => component.schema);\n            return tab;\n        });\n        return schema;\n    }\n    get tabKey() {\n        return `tab-${this.key}`;\n    }\n    get tabLikey() {\n        return `tabLi-${this.key}`;\n    }\n    get tabLinkKey() {\n        return `tabLink-${this.key}`;\n    }\n    constructor(...args) {\n        super(...args);\n        this.currentTab = 0;\n        this.noField = true;\n    }\n    init() {\n        this.components = [];\n        this.tabs = [];\n        lodash_1.default.each(this.component.components, (tab, index) => {\n            this.tabs[index] = [];\n            // Initialize empty tabs.\n            tab.components = tab.components || [];\n            lodash_1.default.each(tab.components, (comp) => {\n                const component = this.createComponent(comp);\n                component.tab = index;\n                this.tabs[index].push(component);\n            });\n        });\n    }\n    render() {\n        return super.render(this.renderTemplate('tab', {\n            tabKey: this.tabKey,\n            tabLikey: this.tabLikey,\n            tabLinkKey: this.tabLinkKey,\n            currentTab: this.currentTab,\n            tabComponents: this.tabs.map(tab => this.renderComponents(tab)),\n        }, (this.options.flatten || this.options.pdf ? 'flat' : null)));\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            [this.tabLinkKey]: 'multiple',\n            [this.tabKey]: 'multiple',\n            [this.tabLikey]: 'multiple',\n        });\n        ['change', 'error'].forEach(event => this.on(event, this.handleTabsValidation.bind(this)));\n        const superAttach = super.attach(element);\n        this.refs[this.tabLinkKey].forEach((tabLink, index) => {\n            this.addEventListener(tabLink, 'click', (event) => {\n                event.preventDefault();\n                this.setTab(index);\n            });\n        });\n        this.refs[this.tabKey].forEach((tab, index) => {\n            this.attachComponents(tab, this.tabs[index], this.component.components[index].components);\n        });\n        return superAttach;\n    }\n    detach(all) {\n        super.detach(all);\n    }\n    /**\n     * Set the current tab.\n     * @param {number} index - The index of the tab to set.\n     */\n    setTab(index) {\n        if (!this.tabs || !this.tabs[index] || !this.refs[this.tabKey] || !this.refs[this.tabKey][index]) {\n            return;\n        }\n        this.currentTab = index;\n        lodash_1.default.each(this.refs[this.tabKey], (tab) => {\n            this.removeClass(tab, 'formio-tab-panel-active');\n            tab.style.display = 'none';\n        });\n        this.addClass(this.refs[this.tabKey][index], 'formio-tab-panel-active');\n        this.refs[this.tabKey][index].style.display = 'block';\n        lodash_1.default.each(this.refs[this.tabLinkKey], (tabLink, tabIndex) => {\n            if (this.refs[this.tabLinkKey][tabIndex]) {\n                this.removeClass(tabLink, 'active');\n                this.removeClass(tabLink, 'formio-tab-link-active');\n            }\n            if (this.refs[this.tabLikey][tabIndex]) {\n                this.removeClass(this.refs[this.tabLikey][tabIndex], 'active');\n                this.removeClass(this.refs[this.tabLikey][tabIndex], 'formio-tab-link-container-active');\n            }\n        });\n        if (this.refs[this.tabLikey][index]) {\n            this.addClass(this.refs[this.tabLikey][index], 'active');\n            this.addClass(this.refs[this.tabLikey][index], 'formio-tab-link-container-active');\n        }\n        if (this.refs[this.tabLinkKey][index]) {\n            this.addClass(this.refs[this.tabLinkKey][index], 'active');\n            this.addClass(this.refs[this.tabLinkKey][index], 'formio-tab-link-active');\n        }\n        this.setValue(this.data);\n        this.triggerChange();\n    }\n    beforeFocus(component) {\n        if ('beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n        const tabIndex = this.tabs.findIndex((tab) => {\n            return tab.some((comp) => comp === component);\n        });\n        if (tabIndex !== -1 && this.currentTab !== tabIndex) {\n            this.setTab(tabIndex);\n        }\n    }\n    setErrorClasses(elements, dirty, hasErrors, hasMessages, element = this.element) {\n        if (this.component.modalEdit) {\n            super.setErrorClasses(elements, dirty, hasErrors, hasMessages, element);\n        }\n        elements.forEach((element) => {\n            this.addClass(element, 'is-invalid');\n            if (element.getAttribute('ref') !== 'openModal') {\n                if (this.options.highlightErrors) {\n                    this.addClass(element, 'tab-error');\n                }\n                else {\n                    this.addClass(element, 'has-error');\n                }\n            }\n        });\n    }\n    clearErrorClasses(elements) {\n        if (this.options.server || !this.rendered) {\n            return;\n        }\n        if (this.component.modalEdit) {\n            const element = Array.isArray(elements) || elements instanceof NodeList ? this.element : elements;\n            super.clearErrorClasses(element);\n        }\n        elements = Array.isArray(elements) || elements instanceof NodeList ? elements : [elements];\n        elements.forEach((element) => {\n            this.removeClass(element, 'is-invalid');\n            this.removeClass(element, 'tab-error');\n            this.removeClass(element, 'has-error');\n        });\n    }\n    handleTabsValidation() {\n        if (!this.refs[this.tabLinkKey] || !this.refs[this.tabLinkKey].length || !this.tabs.length) {\n            return;\n        }\n        this.clearErrorClasses(this.refs[this.tabLinkKey]);\n        const invalidTabsIndexes = this.tabs.reduce((invalidTabs, tab, tabIndex) => {\n            const hasComponentWithError = tab.some(comp => !!comp.error);\n            return hasComponentWithError ? [...invalidTabs, tabIndex] : invalidTabs;\n        }, []);\n        if (!invalidTabsIndexes.length) {\n            return;\n        }\n        const invalidTabs = [...this.refs[this.tabLinkKey]].filter((_, tabIndex) => invalidTabsIndexes.includes(tabIndex));\n        this.setErrorClasses(invalidTabs);\n    }\n}\nexports[\"default\"] = TabsComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/tabs/Tabs.js?");
 
 /***/ }),
 
@@ -5510,7 +5510,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst vanilla_text_mask_1 = __webpack_require__(/*! @formio/vanilla-text-mask */ \"./node_modules/@formio/vanilla-text-mask/dist/vanillaTextMask.js\");\nconst inputmask_1 = __importDefault(__webpack_require__(/*! inputmask */ \"./node_modules/inputmask/dist/inputmask.js\"));\nconst FormioUtils = __importStar(__webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nclass TextFieldComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            label: 'Text Field',\n            key: 'textField',\n            type: 'textfield',\n            mask: false,\n            inputType: 'text',\n            inputFormat: 'plain',\n            inputMask: '',\n            displayMask: '',\n            tableView: true,\n            spellcheck: true,\n            truncateMultipleSpaces: false,\n            validate: {\n                minLength: '',\n                maxLength: '',\n                pattern: ''\n            }\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Text Field',\n            icon: 'terminal',\n            group: 'basic',\n            documentation: '/userguide/form-building/form-components#text-field',\n            weight: 0,\n            schema: TextFieldComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return TextFieldComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: [...super.conditionOperatorsSettings.operators, 'includes', 'notIncludes', 'endsWith', 'startsWith'], valueComponent(classComp) {\n                return Object.assign(Object.assign({}, classComp), { type: 'textfield' });\n            } });\n    }\n    static savedValueTypes(schema) {\n        return FormioUtils.getComponentSavedTypes(schema) || [FormioUtils.componentValueTypes.string];\n    }\n    get defaultSchema() {\n        return TextFieldComponent.schema();\n    }\n    get inputInfo() {\n        const info = super.inputInfo;\n        info.type = 'input';\n        if (this.component.hasOwnProperty('spellcheck')) {\n            info.attr.spellcheck = this.component.spellcheck;\n        }\n        if (this.component.mask) {\n            info.attr.type = 'password';\n        }\n        else {\n            info.attr.type = (this.component.inputType === 'password') ? 'password' : 'text';\n        }\n        info.changeEvent = (this.component.applyMaskOn === 'blur') ? 'blur' : 'input';\n        return info;\n    }\n    get emptyValue() {\n        return '';\n    }\n    constructor(component, options, data) {\n        var _a, _b, _c;\n        super(component, options, data);\n        const timezone = (((_a = this.component.widget) === null || _a === void 0 ? void 0 : _a.timezone) || this.options.timezone);\n        const displayInTimezone = (((_b = this.component.widget) === null || _b === void 0 ? void 0 : _b.displayInTimezone) || 'viewer');\n        if (((_c = this.component.widget) === null || _c === void 0 ? void 0 : _c.type) === 'calendar') {\n            this.component.widget = Object.assign(Object.assign({}, this.component.widget), { readOnly: this.options.readOnly, timezone,\n                displayInTimezone, locale: this.component.widget.locale || this.options.language, saveAs: 'text' });\n        }\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            valueMaskInput: 'single',\n        });\n        return super.attach(element);\n    }\n    /**\n     * Returns the mask value object (mutates value!).\n     * @param {any} [value] - The value to convert to a mask value.\n     * @param {any} [flags] - The flags to use when converting to a mask value.\n     * @returns {*} - The value as a mask value.\n     */\n    maskValue(value, flags = {}) {\n        // Convert it into the correct format.\n        if (!value || (typeof value !== 'object')) {\n            value = {\n                value,\n                maskName: this.component.inputMasks[0].label\n            };\n        }\n        // If no value is provided, then set the defaultValue.\n        if (!value.value) {\n            const defaultValue = flags.noDefault ? this.emptyValue : this.defaultValue;\n            value.value = Array.isArray(defaultValue) ? defaultValue[0] : defaultValue;\n        }\n        return value;\n    }\n    /**\n     * Normalize the value set in the data object.\n     * @param {any} value - The value to normalize.\n     * @param {any} flags - The flags to use when normalizing the value.\n     * @returns {*} - Returns the normalized value.\n     */\n    normalizeValue(value, flags = {}) {\n        if (!this.isMultipleMasksField) {\n            return super.normalizeValue(value);\n        }\n        if (Array.isArray(value)) {\n            return super.normalizeValue(value.map((val) => this.maskValue(val, flags)));\n        }\n        return super.normalizeValue(this.maskValue(value, flags));\n    }\n    /**\n     * Sets the value at this index.\n     * @param {number} index - The index to set the value at.\n     * @param {any} value - The value to set.\n     * @param {any} [flags] - The flags to use when setting the value.\n     * @returns {void}\n     */\n    setValueAt(index, value, flags = {}) {\n        if (!this.isMultipleMasksField) {\n            return super.setValueAt(index, value, flags);\n        }\n        value = this.maskValue(value, flags);\n        const textValue = value.value || '';\n        const textInput = this.refs.mask ? this.refs.mask[index] : null;\n        const maskInput = this.refs.select ? this.refs.select[index] : null;\n        const mask = this.getMaskPattern(value.maskName);\n        if (textInput && maskInput && mask) {\n            // We need to set the maskInput (select dropdown) value before calling inputmask.setValue because, this\n            // function will trigger a \"change\" event, which was calling updateValue setting the mask type to an incorrect value.\n            maskInput.value = value.maskName;\n            if (textInput.inputmask) {\n                this.setInputMask(textInput, mask);\n                textInput.inputmask.setValue(textValue);\n            }\n            else {\n                const placeholderChar = this.placeholderChar;\n                textInput.value = (0, vanilla_text_mask_1.conformToMask)(textValue, FormioUtils.getInputMask(mask), { placeholderChar }).conformedValue;\n            }\n        }\n        else {\n            return super.setValueAt(index, textValue, flags);\n        }\n    }\n    unmaskValue(value, format = this.component.displayMask) {\n        const mask = FormioUtils.getInputMask(format, this.placeholderChar);\n        return FormioUtils.unmaskValue(value, mask, this.placeholderChar);\n    }\n    /**\n     * Returns the value at this index.\n     * @param {number} index - The index to get the value from.\n     * @returns {*} - The value at the index.\n     */\n    getValueAt(index) {\n        var _a, _b;\n        if (!this.isMultipleMasksField) {\n            const value = super.getValueAt(index);\n            const valueMask = this.component.inputMask;\n            const displayMask = this.component.displayMask;\n            // If the input has only the valueMask or the displayMask is the same as the valueMask,\n            // just return the value which is already formatted\n            if (valueMask && !displayMask || displayMask === valueMask) {\n                return value;\n            }\n            // If there is only the displayMask, return the raw (unmasked) value\n            if (displayMask && !valueMask) {\n                return this.unmaskValue(value, displayMask);\n            }\n            if (displayMask && displayMask !== valueMask) {\n                return inputmask_1.default.format(inputmask_1.default.unmask(value, displayMask), valueMask);\n            }\n            if (((_a = this.refs.valueMaskInput) === null || _a === void 0 ? void 0 : _a.mask) && this.refs.valueMaskInput.mask.textMaskInputElement) {\n                this.refs.valueMaskInput.mask.textMaskInputElement.update(value);\n                return (_b = this.refs.valueMaskInput) === null || _b === void 0 ? void 0 : _b.value;\n            }\n            return value;\n        }\n        const textInput = this.refs.mask ? this.refs.mask[index] : null;\n        const maskInput = this.refs.select ? this.refs.select[index] : null;\n        return {\n            value: textInput ? textInput.value : undefined,\n            maskName: maskInput ? maskInput.value : undefined\n        };\n    }\n    checkInputMaskValue(inputMask) {\n        let valid = true;\n        const maskValues = lodash_1.default.values(inputMask.split('').reduce((acc, el, i, mask) => {\n            var _a;\n            if (el === '{' || el === '}') {\n                if (mask[i + 1] === '{' || mask[i + 1] === '}') {\n                    valid = false;\n                }\n                acc[el] = ((_a = acc[el]) !== null && _a !== void 0 ? _a : 0) + 1;\n            }\n            return acc;\n        }, {}));\n        if (maskValues[0] !== maskValues[1]) {\n            valid = false;\n        }\n        return valid;\n    }\n    setInputMask(input, inputMask, usePlaceholder) {\n        if (this.type !== 'textfield') {\n            super.setInputMask(input, inputMask, usePlaceholder);\n            return;\n        }\n        inputMask = inputMask || this.component.displayMask || this.component.inputMask;\n        const mask = FormioUtils.getInputMask(inputMask, this.placeholderChar);\n        this.defaultMask = mask;\n        if (input && inputMask) {\n            try {\n                //remove previous mask\n                if (input.mask) {\n                    input.mask.remove();\n                }\n                if (this.checkInputMaskValue(inputMask)) {\n                    input.mask = new inputmask_1.default(inputMask, {\n                        clearMaskOnLostFocus: !!this.component.placeholder,\n                        showMaskOnHover: !this.component.placeholder,\n                        placeholder: this.placeholderChar || '',\n                    }).mask(input);\n                }\n            }\n            catch (e) {\n                console.warn(e);\n            }\n            if (mask.numeric) {\n                input.setAttribute('pattern', '\\\\d*');\n            }\n            if (this.component.placeholder) {\n                input.setAttribute('placeholder', this.component.placeholder);\n            }\n        }\n    }\n    isHtmlRenderMode() {\n        return super.isHtmlRenderMode() ||\n            ((this.options.readOnly || this.disabled) &&\n                this.component.inputFormat === 'html' &&\n                this.type === 'textfield');\n    }\n    isEmpty(value = this.dataValue) {\n        if (!this.isMultipleMasksField) {\n            return super.isEmpty((value || '').toString().trim());\n        }\n        return super.isEmpty(value) || (this.component.multiple ? value.length === 0 : (!value.maskName || !value.value));\n    }\n    truncateMultipleSpaces(value) {\n        if (value) {\n            return value.trim().replace(/\\s{2,}/g, ' ');\n        }\n        return value;\n    }\n    get validationValue() {\n        const value = super.validationValue;\n        if (value && this.component.truncateMultipleSpaces) {\n            return this.truncateMultipleSpaces(value);\n        }\n        return value;\n    }\n    beforeSubmit() {\n        let value = this.dataValue;\n        if (!this.component.truncateMultipleSpaces || !value) {\n            return Promise.resolve(value);\n        }\n        value = this.truncateMultipleSpaces(value);\n        this.dataValue = value;\n        return Promise.resolve(value).then(() => super.beforeSubmit());\n    }\n    getValueAsString(value, options) {\n        if ((options === null || options === void 0 ? void 0 : options.email) && this.visible && !this.skipInEmail && lodash_1.default.isObject(value)) {\n            const result = (`\n        <table border=\"1\" style=\"width:100%\">\n          <tbody>\n          <tr>\n            <th style=\"padding: 5px 10px;\">${value.maskName}</th>\n            <td style=\"width:100%;padding:5px 10px;\">${value.value}</td>\n          </tr>\n          </tbody>\n        </table>\n      `);\n            return result;\n        }\n        if (value && this.component.inputFormat === 'plain' && /<[^<>]+>/g.test(value)) {\n            value = value.replaceAll('<', '&lt;').replaceAll('>', '&gt;');\n        }\n        return super.getValueAsString(value, options);\n    }\n}\nexports[\"default\"] = TextFieldComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/textfield/TextField.js?");
+eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst vanilla_text_mask_1 = __webpack_require__(/*! @formio/vanilla-text-mask */ \"./node_modules/@formio/vanilla-text-mask/dist/vanillaTextMask.js\");\nconst inputmask_1 = __importDefault(__webpack_require__(/*! inputmask */ \"./node_modules/inputmask/dist/inputmask.js\"));\nconst FormioUtils = __importStar(__webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nclass TextFieldComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            label: 'Text Field',\n            key: 'textField',\n            type: 'textfield',\n            mask: false,\n            inputType: 'text',\n            inputFormat: 'plain',\n            inputMask: '',\n            displayMask: '',\n            tableView: true,\n            spellcheck: true,\n            truncateMultipleSpaces: false,\n            validate: {\n                minLength: '',\n                maxLength: '',\n                pattern: ''\n            }\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Text Field',\n            icon: 'terminal',\n            group: 'basic',\n            documentation: '/userguide/form-building/form-components#text-field',\n            weight: 0,\n            schema: TextFieldComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return TextFieldComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: [...super.conditionOperatorsSettings.operators, 'includes', 'notIncludes', 'endsWith', 'startsWith'], valueComponent(classComp) {\n                return Object.assign(Object.assign({}, classComp), { type: 'textfield' });\n            } });\n    }\n    static savedValueTypes(schema) {\n        return FormioUtils.getComponentSavedTypes(schema) || [FormioUtils.componentValueTypes.string];\n    }\n    get defaultSchema() {\n        return TextFieldComponent.schema();\n    }\n    get inputInfo() {\n        const info = super.inputInfo;\n        info.type = 'input';\n        if (this.component.hasOwnProperty('spellcheck')) {\n            info.attr.spellcheck = this.component.spellcheck;\n        }\n        if (this.component.mask) {\n            info.attr.type = 'password';\n        }\n        else {\n            info.attr.type = (this.component.inputType === 'password') ? 'password' : 'text';\n        }\n        info.changeEvent = (this.component.applyMaskOn === 'blur') ? 'blur' : 'input';\n        return info;\n    }\n    get emptyValue() {\n        return '';\n    }\n    constructor(component, options, data) {\n        var _a, _b, _c;\n        super(component, options, data);\n        const timezone = (((_a = this.component.widget) === null || _a === void 0 ? void 0 : _a.timezone) || this.options.timezone);\n        const displayInTimezone = (((_b = this.component.widget) === null || _b === void 0 ? void 0 : _b.displayInTimezone) || 'viewer');\n        if (((_c = this.component.widget) === null || _c === void 0 ? void 0 : _c.type) === 'calendar') {\n            this.component.widget = Object.assign(Object.assign({}, this.component.widget), { readOnly: this.options.readOnly, timezone,\n                displayInTimezone, locale: this.component.widget.locale || this.options.language, saveAs: 'text' });\n            // update originalComponent to include widget settings after component initialization \n            // originalComponent is used to restore the component (and widget) after evaluating field logic \n            this.originalComponent = FormioUtils.fastCloneDeep(this.component);\n        }\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            valueMaskInput: 'single',\n        });\n        return super.attach(element);\n    }\n    /**\n     * Returns the mask value object (mutates value!).\n     * @param {any} [value] - The value to convert to a mask value.\n     * @param {any} [flags] - The flags to use when converting to a mask value.\n     * @returns {*} - The value as a mask value.\n     */\n    maskValue(value, flags = {}) {\n        // Convert it into the correct format.\n        if (!value || (typeof value !== 'object')) {\n            value = {\n                value,\n                maskName: this.component.inputMasks[0].label\n            };\n        }\n        // If no value is provided, then set the defaultValue.\n        if (!value.value) {\n            const defaultValue = flags.noDefault ? this.emptyValue : this.defaultValue;\n            value.value = Array.isArray(defaultValue) ? defaultValue[0] : defaultValue;\n        }\n        return value;\n    }\n    /**\n     * Normalize the value set in the data object.\n     * @param {any} value - The value to normalize.\n     * @param {any} flags - The flags to use when normalizing the value.\n     * @returns {*} - Returns the normalized value.\n     */\n    normalizeValue(value, flags = {}) {\n        if (!this.isMultipleMasksField) {\n            return super.normalizeValue(value);\n        }\n        if (Array.isArray(value)) {\n            return super.normalizeValue(value.map((val) => this.maskValue(val, flags)));\n        }\n        return super.normalizeValue(this.maskValue(value, flags));\n    }\n    /**\n     * Sets the value at this index.\n     * @param {number} index - The index to set the value at.\n     * @param {any} value - The value to set.\n     * @param {any} [flags] - The flags to use when setting the value.\n     * @returns {void}\n     */\n    setValueAt(index, value, flags = {}) {\n        if (!this.isMultipleMasksField) {\n            return super.setValueAt(index, value, flags);\n        }\n        value = this.maskValue(value, flags);\n        const textValue = value.value || '';\n        const textInput = this.refs.mask ? this.refs.mask[index] : null;\n        const maskInput = this.refs.select ? this.refs.select[index] : null;\n        const mask = this.getMaskPattern(value.maskName);\n        if (textInput && maskInput && mask) {\n            // We need to set the maskInput (select dropdown) value before calling inputmask.setValue because, this\n            // function will trigger a \"change\" event, which was calling updateValue setting the mask type to an incorrect value.\n            maskInput.value = value.maskName;\n            if (textInput.inputmask) {\n                this.setInputMask(textInput, mask);\n                textInput.inputmask.setValue(textValue);\n            }\n            else {\n                const placeholderChar = this.placeholderChar;\n                textInput.value = (0, vanilla_text_mask_1.conformToMask)(textValue, FormioUtils.getInputMask(mask), { placeholderChar }).conformedValue;\n            }\n        }\n        else {\n            return super.setValueAt(index, textValue, flags);\n        }\n    }\n    unmaskValue(value, format = this.component.displayMask) {\n        const mask = FormioUtils.getInputMask(format, this.placeholderChar);\n        return FormioUtils.unmaskValue(value, mask, this.placeholderChar);\n    }\n    /**\n     * Returns the value at this index.\n     * @param {number} index - The index to get the value from.\n     * @returns {*} - The value at the index.\n     */\n    getValueAt(index) {\n        var _a, _b;\n        if (!this.isMultipleMasksField) {\n            const value = super.getValueAt(index);\n            const valueMask = this.component.inputMask;\n            const displayMask = this.component.displayMask;\n            // If the input has only the valueMask or the displayMask is the same as the valueMask,\n            // just return the value which is already formatted\n            if (valueMask && !displayMask || displayMask === valueMask) {\n                return value;\n            }\n            // If there is only the displayMask, return the raw (unmasked) value\n            if (displayMask && !valueMask) {\n                return this.unmaskValue(value, displayMask);\n            }\n            if (displayMask && displayMask !== valueMask) {\n                return inputmask_1.default.format(inputmask_1.default.unmask(value, displayMask), valueMask);\n            }\n            if (((_a = this.refs.valueMaskInput) === null || _a === void 0 ? void 0 : _a.mask) && this.refs.valueMaskInput.mask.textMaskInputElement) {\n                this.refs.valueMaskInput.mask.textMaskInputElement.update(value);\n                return (_b = this.refs.valueMaskInput) === null || _b === void 0 ? void 0 : _b.value;\n            }\n            return value;\n        }\n        const textInput = this.refs.mask ? this.refs.mask[index] : null;\n        const maskInput = this.refs.select ? this.refs.select[index] : null;\n        return {\n            value: textInput ? textInput.value : undefined,\n            maskName: maskInput ? maskInput.value : undefined\n        };\n    }\n    checkInputMaskValue(inputMask) {\n        let valid = true;\n        const maskValues = lodash_1.default.values(inputMask.split('').reduce((acc, el, i, mask) => {\n            var _a;\n            if (el === '{' || el === '}') {\n                if (mask[i + 1] === '{' || mask[i + 1] === '}') {\n                    valid = false;\n                }\n                acc[el] = ((_a = acc[el]) !== null && _a !== void 0 ? _a : 0) + 1;\n            }\n            return acc;\n        }, {}));\n        if (maskValues[0] !== maskValues[1]) {\n            valid = false;\n        }\n        return valid;\n    }\n    setInputMask(input, inputMask, usePlaceholder) {\n        if (this.type !== 'textfield') {\n            super.setInputMask(input, inputMask, usePlaceholder);\n            return;\n        }\n        inputMask = inputMask || this.component.displayMask || this.component.inputMask;\n        const mask = FormioUtils.getInputMask(inputMask, this.placeholderChar);\n        this.defaultMask = mask;\n        if (input && inputMask) {\n            try {\n                //remove previous mask\n                if (input.mask) {\n                    input.mask.remove();\n                }\n                if (this.checkInputMaskValue(inputMask)) {\n                    input.mask = new inputmask_1.default(inputMask, {\n                        clearMaskOnLostFocus: !!this.component.placeholder,\n                        showMaskOnHover: !this.component.placeholder,\n                        placeholder: this.placeholderChar || '',\n                    }).mask(input);\n                }\n            }\n            catch (e) {\n                console.warn(e);\n            }\n            if (mask.numeric) {\n                input.setAttribute('pattern', '\\\\d*');\n            }\n            if (this.component.placeholder) {\n                input.setAttribute('placeholder', this.component.placeholder);\n            }\n        }\n    }\n    isHtmlRenderMode() {\n        return super.isHtmlRenderMode() ||\n            ((this.options.readOnly || this.disabled) &&\n                this.component.inputFormat === 'html' &&\n                this.type === 'textfield');\n    }\n    isEmpty(value = this.dataValue) {\n        if (!this.isMultipleMasksField) {\n            return super.isEmpty((value || '').toString().trim());\n        }\n        return super.isEmpty(value) || (this.component.multiple ? value.length === 0 : (!value.maskName || !value.value));\n    }\n    truncateMultipleSpaces(value) {\n        if (value) {\n            return value.trim().replace(/\\s{2,}/g, ' ');\n        }\n        return value;\n    }\n    get validationValue() {\n        const value = super.validationValue;\n        if (value && this.component.truncateMultipleSpaces) {\n            return this.truncateMultipleSpaces(value);\n        }\n        return value;\n    }\n    beforeSubmit() {\n        let value = this.dataValue;\n        if (!this.component.truncateMultipleSpaces || !value) {\n            return Promise.resolve(value);\n        }\n        value = this.truncateMultipleSpaces(value);\n        this.dataValue = value;\n        return Promise.resolve(value).then(() => super.beforeSubmit());\n    }\n    getValueAsString(value, options) {\n        if ((options === null || options === void 0 ? void 0 : options.email) && this.visible && !this.skipInEmail && lodash_1.default.isObject(value)) {\n            const result = (`\n        <table border=\"1\" style=\"width:100%\">\n          <tbody>\n          <tr>\n            <th style=\"padding: 5px 10px;\">${value.maskName}</th>\n            <td style=\"width:100%;padding:5px 10px;\">${value.value}</td>\n          </tr>\n          </tbody>\n        </table>\n      `);\n            return result;\n        }\n        if (value && this.component.inputFormat === 'plain' && /<[^<>]+>/g.test(value)) {\n            value = value.replaceAll('<', '&lt;').replaceAll('>', '&gt;');\n        }\n        return super.getValueAsString(value, options);\n    }\n}\nexports[\"default\"] = TextFieldComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/textfield/TextField.js?");
 
 /***/ }),
 
@@ -5873,7 +5873,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = {\n    unsavedRowsError: 'Please save all rows before proceeding.',\n    invalidRowsError: 'Please correct invalid rows before proceeding.',\n    invalidRowError: 'Invalid row. Please correct it or delete.',\n    invalidOption: '{{field}} is an invalid value.',\n    invalidDay: '{{field}} is not a valid day.',\n    alertMessageWithLabel: '{{label}}: {{message}}',\n    alertMessage: '{{message}}',\n    complete: 'Submission Complete',\n    error: 'Please fix the following errors before submitting.',\n    errorListHotkey: 'Press Ctrl + Alt + X to go back to the error list.',\n    errorsListNavigationMessage: 'Click to navigate to the field with following error.',\n    submitError: 'Please check the form and correct all errors before submitting.',\n    required: '{{field}} is required',\n    unique: '{{field}} must be unique',\n    array: '{{field}} must be an array',\n    array_nonempty: '{{field}} must be a non-empty array', // eslint-disable-line camelcase\n    nonarray: '{{field}} must not be an array',\n    select: '{{field}} contains an invalid selection',\n    pattern: '{{field}} does not match the pattern {{pattern}}',\n    minLength: '{{field}} must have at least {{length}} characters.',\n    maxLength: '{{field}} must have no more than {{length}} characters.',\n    minWords: '{{field}} must have at least {{length}} words.',\n    maxWords: '{{field}} must have no more than {{length}} words.',\n    min: '{{field}} cannot be less than {{min}}.',\n    max: '{{field}} cannot be greater than {{max}}.',\n    maxDate: '{{field}} should not contain date after {{- maxDate}}',\n    minDate: '{{field}} should not contain date before {{- minDate}}',\n    maxYear: '{{field}} should not contain year greater than {{maxYear}}',\n    minYear: '{{field}} should not contain year less than {{minYear}}',\n    minSelectedCount: 'You must select at least {{minCount}} items',\n    maxSelectedCount: 'You may only select up to {{maxCount}} items',\n    invalid_email: '{{field}} must be a valid email.', // eslint-disable-line camelcase\n    invalid_url: '{{field}} must be a valid url.', // eslint-disable-line camelcase\n    invalid_regex: '{{field}} does not match the pattern {{regex}}.', // eslint-disable-line camelcase\n    invalid_date: '{{field}} is not a valid date.', // eslint-disable-line camelcase\n    invalid_day: '{{field}} is not a valid day.', // eslint-disable-line camelcase\n    invalidValueProperty: 'Invalid Value Property',\n    mask: '{{field}} does not match the mask.',\n    valueIsNotAvailable: '{{ field }} is an invalid value.',\n    stripe: '{{stripe}}',\n    month: 'Month',\n    day: 'Day',\n    year: 'Year',\n    january: 'January',\n    february: 'February',\n    march: 'March',\n    april: 'April',\n    may: 'May',\n    june: 'June',\n    july: 'July',\n    august: 'August',\n    september: 'September',\n    october: 'October',\n    november: 'November',\n    december: 'December',\n    next: 'Next',\n    previous: 'Previous',\n    cancel: 'Cancel',\n    submit: 'Submit Form',\n    confirmCancel: 'Are you sure you want to cancel?',\n    saveDraftInstanceError: 'Cannot save draft because there is no formio instance.',\n    saveDraftAuthError: 'Cannot save draft unless a user is authenticated.',\n    restoreDraftInstanceError: 'Cannot restore draft because there is no formio instance.',\n    saveDraftError: 'Unable to save draft.',\n    restoreDraftError: 'Unable to restore draft.',\n    time: 'Invalid time',\n    cancelButtonAriaLabel: 'Cancel button. Click to reset the form',\n    previousButtonAriaLabel: 'Previous button. Click to go back to the previous tab',\n    nextButtonAriaLabel: 'Next button. Click to go to the next tab',\n    submitButtonAriaLabel: 'Submit Form button. Click to submit the form',\n    reCaptchaTokenValidationError: 'ReCAPTCHA: Token validation error',\n    reCaptchaTokenNotSpecifiedError: 'ReCAPTCHA: Token is not specified in submission',\n    apiKey: 'API Key is not unique: {{key}}',\n    typeRemaining: '{{ remaining }} {{ type }} remaining.',\n    typeCount: '{{ count }} {{ type }}',\n    requiredDayField: '{{ field }} is required',\n    requiredDayEmpty: '{{ field }} is required',\n    requiredMonthField: '{{ field }} is required',\n    requiredYearField: '{{ field }} is required'\n};\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/translations/en.js?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = {\n    unsavedRowsError: 'Please save all rows before proceeding.',\n    invalidRowsError: 'Please correct invalid rows before proceeding.',\n    invalidRowError: 'Invalid row. Please correct it or delete.',\n    invalidOption: '{{field}} is an invalid value.',\n    invalidDay: '{{field}} is not a valid day.',\n    alertMessageWithLabel: '{{label}}: {{message}}',\n    alertMessage: '{{message}}',\n    complete: 'Submission Complete',\n    error: 'Please fix the following errors before submitting.',\n    errorListHotkey: 'Press Ctrl + Alt + X to go back to the error list.',\n    errorsListNavigationMessage: 'Click to navigate to the field with following error.',\n    submitError: 'Please check the form and correct all errors before submitting.',\n    required: '{{field}} is required',\n    unique: '{{field}} must be unique',\n    array: '{{field}} must be an array',\n    array_nonempty: '{{field}} must be a non-empty array', // eslint-disable-line camelcase\n    nonarray: '{{field}} must not be an array',\n    select: '{{field}} contains an invalid selection',\n    pattern: '{{field}} does not match the pattern {{pattern}}',\n    minLength: '{{field}} must have at least {{length}} characters.',\n    maxLength: '{{field}} must have no more than {{length}} characters.',\n    minWords: '{{field}} must have at least {{length}} words.',\n    maxWords: '{{field}} must have no more than {{length}} words.',\n    min: '{{field}} cannot be less than {{min}}.',\n    max: '{{field}} cannot be greater than {{max}}.',\n    maxDate: '{{field}} should not contain date after {{maxDate}}',\n    minDate: '{{field}} should not contain date before {{minDate}}',\n    maxYear: '{{field}} should not contain year greater than {{maxYear}}',\n    minYear: '{{field}} should not contain year less than {{minYear}}',\n    minSelectedCount: 'You must select at least {{minCount}} items',\n    maxSelectedCount: 'You may only select up to {{maxCount}} items',\n    invalid_email: '{{field}} must be a valid email.', // eslint-disable-line camelcase\n    invalid_url: '{{field}} must be a valid url.', // eslint-disable-line camelcase\n    invalid_regex: '{{field}} does not match the pattern {{regex}}.', // eslint-disable-line camelcase\n    invalid_date: '{{field}} is not a valid date.', // eslint-disable-line camelcase\n    invalid_day: '{{field}} is not a valid day.', // eslint-disable-line camelcase\n    invalidValueProperty: 'Invalid Value Property',\n    mask: '{{field}} does not match the mask.',\n    valueIsNotAvailable: '{{ field }} is an invalid value.',\n    stripe: '{{stripe}}',\n    month: 'Month',\n    day: 'Day',\n    year: 'Year',\n    january: 'January',\n    february: 'February',\n    march: 'March',\n    april: 'April',\n    may: 'May',\n    june: 'June',\n    july: 'July',\n    august: 'August',\n    september: 'September',\n    october: 'October',\n    november: 'November',\n    december: 'December',\n    next: 'Next',\n    previous: 'Previous',\n    cancel: 'Cancel',\n    submit: 'Submit Form',\n    confirmCancel: 'Are you sure you want to cancel?',\n    saveDraftInstanceError: 'Cannot save draft because there is no formio instance.',\n    saveDraftAuthError: 'Cannot save draft unless a user is authenticated.',\n    restoreDraftInstanceError: 'Cannot restore draft because there is no formio instance.',\n    saveDraftError: 'Unable to save draft.',\n    restoreDraftError: 'Unable to restore draft.',\n    time: 'Invalid time',\n    cancelButtonAriaLabel: 'Cancel button. Click to reset the form',\n    previousButtonAriaLabel: 'Previous button. Click to go back to the previous tab',\n    nextButtonAriaLabel: 'Next button. Click to go to the next tab',\n    submitButtonAriaLabel: 'Submit Form button. Click to submit the form',\n    reCaptchaTokenValidationError: 'ReCAPTCHA: Token validation error',\n    reCaptchaTokenNotSpecifiedError: 'ReCAPTCHA: Token is not specified in submission',\n    apiKey: 'API Key is not unique: {{key}}',\n    typeRemaining: '{{ remaining }} {{ type }} remaining.',\n    typeCount: '{{ count }} {{ type }}',\n    requiredDayField: '{{ field }} is required',\n    requiredDayEmpty: '{{ field }} is required',\n    requiredMonthField: '{{ field }} is required',\n    requiredYearField: '{{ field }} is required'\n};\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/translations/en.js?");
 
 /***/ }),
 
@@ -6181,7 +6181,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n/* global jQuery */\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __exportStar = (this && this.__exportStar) || function(m, exports) {\n    for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.removeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = exports.moment = exports.ConditionOperators = exports.jsonLogic = void 0;\nexports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isInsideScopingComponent = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = exports.observeOverload = exports.withSwitch = void 0;\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nexports._ = lodash_1.default;\nconst json_logic_js_1 = __importDefault(__webpack_require__(/*! json-logic-js */ \"./node_modules/json-logic-js/logic.js\"));\nexports.jsonLogic = json_logic_js_1.default;\nconst moment_timezone_1 = __importDefault(__webpack_require__(/*! moment-timezone/moment-timezone */ \"./node_modules/moment-timezone/moment-timezone.js\"));\nexports.moment = moment_timezone_1.default;\nconst jstimezonedetect_1 = __importDefault(__webpack_require__(/*! jstimezonedetect */ \"./node_modules/jstimezonedetect/dist/jstz.min.js\"));\nconst operators_1 = __webpack_require__(/*! ./jsonlogic/operators */ \"./lib/cjs/utils/jsonlogic/operators.js\");\nconst dompurify_1 = __importDefault(__webpack_require__(/*! dompurify */ \"./node_modules/dompurify/dist/purify.cjs.js\"));\nconst formUtils_1 = __webpack_require__(/*! ./formUtils */ \"./lib/cjs/utils/formUtils.js\");\nconst Evaluator_1 = __webpack_require__(/*! ./Evaluator */ \"./lib/cjs/utils/Evaluator.js\");\nObject.defineProperty(exports, \"Evaluator\", ({ enumerable: true, get: function () { return Evaluator_1.Evaluator; } }));\nconst conditionOperators_1 = __importDefault(__webpack_require__(/*! ./conditionOperators */ \"./lib/cjs/utils/conditionOperators/index.js\"));\nexports.ConditionOperators = conditionOperators_1.default;\nconst interpolate = Evaluator_1.Evaluator.interpolate;\nexports.interpolate = interpolate;\n__exportStar(__webpack_require__(/*! ./formUtils */ \"./lib/cjs/utils/formUtils.js\"), exports);\n// Configure JsonLogic\noperators_1.lodashOperators.forEach((name) => json_logic_js_1.default.add_operation(`_${name}`, lodash_1.default[name]));\n// Retrieve Any Date\njson_logic_js_1.default.add_operation('getDate', (date) => {\n    return (0, moment_timezone_1.default)(date).toISOString();\n});\n// Set Relative Minimum Date\njson_logic_js_1.default.add_operation('relativeMinDate', (relativeMinDate) => {\n    return (0, moment_timezone_1.default)().subtract(relativeMinDate, 'days').toISOString();\n});\n// Set Relative Maximum Date\njson_logic_js_1.default.add_operation('relativeMaxDate', (relativeMaxDate) => {\n    return (0, moment_timezone_1.default)().add(relativeMaxDate, 'days').toISOString();\n});\n/**\n * Evaluate a method.\n * @param {Function|string|object} func - The function to evaluate.\n * @param {*} args - A map of arguments to pass to the function.\n * @param {string} ret - The name of the \"return\" variable in the script.\n * @param {boolean} interpolate - True if the script should be interpolated before being executed.\n * @param {import('@formio/core').EvaluatorOptions} options - The evaluator options.\n * @returns {*} - The result of the evaluation.\n */\nfunction evaluate(func, args, ret, interpolate, options = {}) {\n    return Evaluator_1.Evaluator.evaluate(func, args, ret, interpolate, undefined, options);\n}\nexports.evaluate = evaluate;\n/**\n * Returns a random compoennt ID.\n * @returns {string} - A random component ID.\n */\nfunction getRandomComponentId() {\n    return `e${Math.random().toString(36).substring(7)}`;\n}\nexports.getRandomComponentId = getRandomComponentId;\n/**\n * Get a property value of an element.\n * @param {CSSStyleDeclaration} style - The style element to get the property value from.\n * @param {string} prop - The property to get the value for.\n * @returns {number} - The value of the property.\n */\nfunction getPropertyValue(style, prop) {\n    let value = style.getPropertyValue(prop);\n    value = value ? value.replace(/[^0-9.]/g, '') : '0';\n    return parseFloat(value);\n}\nexports.getPropertyValue = getPropertyValue;\n/**\n * Get an elements bounding rectagle.\n * @param {HTMLElement} element - A DOM element to get the bounding rectangle for.\n * @returns {{x: number, y: number, width: number, height: number}} - The bounding rectangle.\n */\nfunction getElementRect(element) {\n    const style = window.getComputedStyle(element, null);\n    return {\n        x: getPropertyValue(style, 'left'),\n        y: getPropertyValue(style, 'top'),\n        width: getPropertyValue(style, 'width'),\n        height: getPropertyValue(style, 'height')\n    };\n}\nexports.getElementRect = getElementRect;\n/**\n * Get non HTMLElement property in the window object\n * @param {string} property - The window property to fetch the script plugin from.\n * @returns {any | undefined} - The HTML Element property on the window object.\n */\nfunction getScriptPlugin(property) {\n    const obj = window[property];\n    if (typeof HTMLElement === 'object' ? obj instanceof HTMLElement : //DOM2\n        obj && typeof obj === 'object' && true && obj.nodeType === 1 && typeof obj.nodeName === 'string') {\n        return undefined;\n    }\n    return obj;\n}\nexports.getScriptPlugin = getScriptPlugin;\n/**\n * Determines the boolean value of a setting.\n * @param {string|boolean} value - A string or boolean value to convert to boolean.\n * @returns {boolean} - The boolean value of the setting.\n */\nfunction boolValue(value) {\n    if (lodash_1.default.isBoolean(value)) {\n        return value;\n    }\n    else if (lodash_1.default.isString(value)) {\n        return (value.toLowerCase() === 'true');\n    }\n    else {\n        return !!value;\n    }\n}\nexports.boolValue = boolValue;\n/**\n * Check to see if an ID is a mongoID.\n * @param {string} text - The text to check if it is a mongoID.\n * @returns {boolean} - TRUE if the text is a mongoID; FALSE otherwise.\n */\nfunction isMongoId(text) {\n    return !!text.toString().match(/^[0-9a-fA-F]{24}$/);\n}\nexports.isMongoId = isMongoId;\n/**\n * Checks the calculated value for a provided component and data.\n * @param {import('@formio/core').Component} component - The component to check for the calculated value.\n * @param {import('@formio/core').Submission} submission - A submission object.\n * @param {*} rowData - The contextual row data for the component.\n */\nfunction checkCalculated(component, submission, rowData) {\n    // Process calculated value stuff if present.\n    if (component.calculateValue) {\n        lodash_1.default.set(rowData, component.key, evaluate(component.calculateValue, {\n            value: undefined,\n            data: submission ? submission.data : rowData,\n            row: rowData,\n            util: this,\n            component\n        }, 'value'));\n    }\n}\nexports.checkCalculated = checkCalculated;\n/**\n * Check if a simple conditional evaluates to true.\n * @param {import('@formio/core').Component} component - The component to check for the conditional.\n * @param {import('@formio/core').SimpleConditional} condition - The condition to check.\n * @param {*} row - The row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The instance of the component.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\n/**\n *\n * @param conditionPaths\n * @param data\n */\nfunction getConditionalPathsRecursive(conditionPaths, data) {\n    let currentGlobalIndex = 0;\n    const conditionalPathsArray = [];\n    const getConditionalPaths = (data, currentPath = '', localIndex = 0) => {\n        currentPath = currentPath.replace(/^\\.+|\\.+$/g, '');\n        const currentLocalIndex = localIndex;\n        const currentData = lodash_1.default.get(data, currentPath);\n        if (Array.isArray(currentData) && currentData.filter(Boolean).length > 0) {\n            if (currentData.some(element => typeof element !== 'object')) {\n                return;\n            }\n            const hasInnerDataArray = currentData.find(x => Array.isArray(x[conditionPaths[currentLocalIndex]]));\n            if (hasInnerDataArray) {\n                currentData.forEach((_, indexOutside) => {\n                    const innerCompDataPath = `${currentPath}[${indexOutside}].${conditionPaths[currentLocalIndex]}`;\n                    getConditionalPaths(data, innerCompDataPath, currentLocalIndex + 1);\n                });\n            }\n            else {\n                currentData.forEach((x, index) => {\n                    if (!lodash_1.default.isNil(x[conditionPaths[currentLocalIndex]])) {\n                        const compDataPath = `${currentPath}[${index}].${conditionPaths[currentLocalIndex]}`;\n                        conditionalPathsArray.push(compDataPath);\n                    }\n                });\n            }\n        }\n        else {\n            if (!conditionPaths[currentGlobalIndex]) {\n                return;\n            }\n            currentGlobalIndex = currentGlobalIndex + 1;\n            getConditionalPaths(data, `${currentPath}.${conditionPaths[currentGlobalIndex - 1]}`, currentGlobalIndex);\n        }\n    };\n    getConditionalPaths(data);\n    return conditionalPathsArray;\n}\n/**\n *\n * @param component\n * @param condition\n * @param row\n * @param data\n * @param instance\n */\nfunction checkSimpleConditional(component, condition, row, data, instance) {\n    if (condition.when) {\n        const value = getComponentActualValue(condition.when, data, row);\n        const eq = String(condition.eq);\n        const show = String(condition.show);\n        // Special check for selectboxes component.\n        if (lodash_1.default.isObject(value) && lodash_1.default.has(value, condition.eq)) {\n            return String(value[condition.eq]) === show;\n        }\n        // FOR-179 - Check for multiple values.\n        if (Array.isArray(value) && value.map(String).includes(eq)) {\n            return show === 'true';\n        }\n        return (String(value) === eq) === (show === 'true');\n    }\n    else {\n        const { conditions = [], conjunction = 'all', show = true } = condition;\n        if (!conditions.length) {\n            return true;\n        }\n        const conditionsResult = lodash_1.default.map(conditions, (cond) => {\n            var _a, _b;\n            const { value: comparedValue, operator, component: conditionComponentPath } = cond;\n            if (!conditionComponentPath) {\n                return true;\n            }\n            const splittedConditionPath = conditionComponentPath.split('.');\n            const conditionalPaths = ((_a = instance === null || instance === void 0 ? void 0 : instance.parent) === null || _a === void 0 ? void 0 : _a.type) === 'datagrid' || ((_b = instance === null || instance === void 0 ? void 0 : instance.parent) === null || _b === void 0 ? void 0 : _b.type) === 'editgrid' ? [] : getConditionalPathsRecursive(splittedConditionPath, data);\n            if (conditionalPaths.length > 0) {\n                return conditionalPaths.map((path) => {\n                    const value = getComponentActualValue(path, data, row);\n                    const ConditionOperator = conditionOperators_1.default[operator];\n                    return ConditionOperator\n                        ? new ConditionOperator().getResult({ value, comparedValue, instance, component, path })\n                        : true;\n                });\n            }\n            else {\n                const value = getComponentActualValue(conditionComponentPath, data, row);\n                const СonditionOperator = conditionOperators_1.default[operator];\n                return СonditionOperator\n                    ? new СonditionOperator().getResult({ value, comparedValue, instance, component, path: conditionComponentPath })\n                    : true;\n            }\n        });\n        let result = false;\n        switch (conjunction) {\n            case 'any':\n                result = lodash_1.default.some(conditionsResult.flat(), res => !!res);\n                break;\n            default:\n                result = lodash_1.default.every(conditionsResult.flat(), res => !!res);\n        }\n        return show ? result : !result;\n    }\n}\nexports.checkSimpleConditional = checkSimpleConditional;\n/**\n * Returns a components normalized value.\n * @param {string} compPath - The full path to the component.\n * @param {*} data - The data object to get the value from.\n * @param {*} row - The contextual row data for the component.\n * @returns {*} - The normalized value of the component.\n */\nfunction getComponentActualValue(compPath, data, row) {\n    let value = null;\n    if (data) {\n        value = (0, formUtils_1.getValue)({ data }, compPath);\n    }\n    if (row && lodash_1.default.isNil(value)) {\n        value = (0, formUtils_1.getValue)({ data: row }, compPath);\n    }\n    // FOR-400 - Fix issue where falsey values were being evaluated as show=true\n    if (lodash_1.default.isNil(value) || (lodash_1.default.isObject(value) && lodash_1.default.isEmpty(value))) {\n        value = '';\n    }\n    return value;\n}\nexports.getComponentActualValue = getComponentActualValue;\n/**\n * Check custom javascript conditional.\n * @param {import('@formio/core').Component} component - The component to check for the conditional.\n * @param {string} custom - The custom conditional string to evaluate.\n * @param {*} row - The row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {string} variable - The variable name for the result of the custom conditional.\n * @param {*} onError - A custom return if there is an error or the value is null from the evaluation.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @returns {*} - The result of the evaulation.\n */\nfunction checkCustomConditional(component, custom, row, data, form, variable, onError, instance) {\n    if (typeof custom === 'string') {\n        custom = `var ${variable} = true; ${custom}; return ${variable};`;\n    }\n    const value = (instance && instance.evaluate) ?\n        instance.evaluate(custom, { row, data, form }) :\n        evaluate(custom, { row, data, form });\n    if (value === null) {\n        return onError;\n    }\n    return value;\n}\nexports.checkCustomConditional = checkCustomConditional;\n/**\n * Check a component for JSON conditionals.\n * @param {import('@formio/core').Component} component - The component\n * @param {import('@formio/core').JSONConditional} json - The json conditional to check.\n * @param {*} row - The contextual row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The Form JSON of the form.\n * @param {*} onError - Custom return value if there is an error.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\nfunction checkJsonConditional(component, json, row, data, form, onError) {\n    try {\n        return json_logic_js_1.default.apply(json, {\n            data,\n            row,\n            form,\n            _: lodash_1.default,\n        });\n    }\n    catch (err) {\n        console.warn(`An error occurred in jsonLogic advanced condition for ${component.key}`, err);\n        return onError;\n    }\n}\nexports.checkJsonConditional = checkJsonConditional;\n/**\n * Returns the contextual row data for a component.\n * @param {import('@formio/core').Component} component - The component to get the row data for.\n * @param {*} row - The row data for the component.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @param {*} conditional - The component conditional.\n * @returns {*} - The contextual row data for the component.\n */\nfunction getRow(component, row, instance, conditional) {\n    var _a, _b, _c;\n    const condition = conditional || component.conditional;\n    // If no component's instance passed (happens only in 6.x server), calculate its path based on the schema\n    if (!instance) {\n        instance = lodash_1.default.cloneDeep(component);\n    }\n    const dataParent = getDataParentComponent(instance);\n    if (dataParent) {\n        const parentPath = (_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localDataPath;\n        const isTriggerCondtionComponentPath = condition.when || !condition.conditions\n            ? (_b = condition.when) === null || _b === void 0 ? void 0 : _b.startsWith((_c = dataParent.paths) === null || _c === void 0 ? void 0 : _c.localPath)\n            : lodash_1.default.some(condition.conditions, cond => { var _a; return cond.component.startsWith((_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localPath); });\n        if (isTriggerCondtionComponentPath) {\n            const newRow = {};\n            lodash_1.default.set(newRow, parentPath, row);\n            row = newRow;\n        }\n    }\n    return row;\n}\n/**\n * Checks the conditions for a provided component and data.\n * @param {import('@formio/core').Component} component - The component to check for the condition.\n * @param {*} row - The data within a row\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\nfunction checkCondition(component, row, data, form, instance) {\n    const { customConditional, conditional } = component;\n    if (customConditional) {\n        return checkCustomConditional(component, customConditional, row, data, form, 'show', true, instance);\n    }\n    else if (conditional && (conditional.when || lodash_1.default.some(conditional.conditions || [], condition => condition.component && condition.operator))) {\n        row = getRow(component, row, instance);\n        return checkSimpleConditional(component, conditional, row, data, instance);\n    }\n    else if (conditional && conditional.json) {\n        return checkJsonConditional(component, conditional.json, row, data, form, true);\n    }\n    // Default to show.\n    return true;\n}\nexports.checkCondition = checkCondition;\n/**\n * Test a trigger on a component.\n * @param {import('@formio/core').Component} component - The component to test the trigger against.\n * @param {import('@formio/core').LogicTrigger} trigger - The trigger configuration.\n * @param {import('@formio/core').DataObject} row - The contextual row data.\n * @param {import('@formio/core').DataObject} data - The root data object.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {any} instance - The component that is performing the trigger.\n * @returns {boolean} - TRUE if the trigger should fire; FALSE otherwise.\n */\nfunction checkTrigger(component, trigger, row, data, form, instance) {\n    // If trigger is empty, don't fire it\n    if (!trigger || !trigger[trigger.type]) {\n        return false;\n    }\n    switch (trigger.type) {\n        case 'simple':\n            row = getRow(component, row, instance, trigger.simple);\n            return checkSimpleConditional(component, trigger.simple, row, data, instance);\n        case 'javascript':\n            return checkCustomConditional(component, trigger.javascript, row, data, form, 'result', false, instance);\n        case 'json':\n            return checkJsonConditional(component, trigger.json, row, data, form, false);\n    }\n    // If none of the types matched, don't fire the trigger.\n    return false;\n}\nexports.checkTrigger = checkTrigger;\n/**\n * Sets a property on a component via an executed Logic action.\n * @param {import('@formio/core').Component} component - The component to set the property on.\n * @param {import('@formio/core').LogicAction} action - The action to perform on the component.\n * @param {string} result - The name of the variable in the evaulation to use as the result.\n * @param {import('@formio/core').DataObject} row - The contextual row data.\n * @param {import('@formio/core').DataObject} data - The full submission data.\n * @param {any} instance - The component instance.\n * @returns {import('@formio/core').Component} - The modified component.\n */\nfunction setActionProperty(component, action, result, row, data, instance) {\n    const property = action.property.value;\n    switch (action.property.type) {\n        case 'boolean': {\n            const currentValue = lodash_1.default.get(component, property, false).toString();\n            const newValue = action.state.toString();\n            if (currentValue !== newValue) {\n                lodash_1.default.set(component, property, newValue === 'true');\n            }\n            break;\n        }\n        case 'string': {\n            const evalData = {\n                data,\n                row,\n                component,\n                result,\n            };\n            const textValue = action.property.component ? action[action.property.component] : action.text;\n            const currentValue = lodash_1.default.get(component, property, '');\n            const newValue = (instance && instance.interpolate)\n                ? instance.interpolate(textValue, evalData)\n                : Evaluator_1.Evaluator.interpolate(textValue, evalData);\n            if (newValue !== currentValue) {\n                lodash_1.default.set(component, property, newValue);\n            }\n            break;\n        }\n    }\n    return component;\n}\nexports.setActionProperty = setActionProperty;\n/**\n * Removes HTML tags from string e.g. <div>Hello World</div> => Hello World\n * @param {string} str - The string to remove HTML tags from.\n * @returns {string} - The string without HTML tags.\n */\nfunction removeHTML(str) {\n    const doc = new window.DOMParser().parseFromString(str, 'text/html');\n    return (doc.body.textContent || '').trim();\n}\nexports.removeHTML = removeHTML;\n/**\n * Unescape HTML characters like &lt, &gt, &amp and etc.\n * @param {string} str - The string to unescape.\n * @returns {string} - The unescaped string.\n */\nfunction unescapeHTML(str) {\n    if (typeof window === 'undefined' || !('DOMParser' in window)) {\n        return str;\n    }\n    const elem = document.createElement('textarea');\n    elem.innerHTML = str;\n    return elem.value;\n}\nexports.unescapeHTML = unescapeHTML;\n/**\n * Make HTML element from string\n * @param {string} str - The string to convert to an HTML element.\n * @param {string} selector - The selector to use to get the element once it is created.\n * @returns {HTMLElement} - The HTML element that was created.\n */\nfunction convertStringToHTMLElement(str, selector) {\n    const doc = new window.DOMParser().parseFromString(str, 'text/html');\n    return doc.body.querySelector(selector);\n}\nexports.convertStringToHTMLElement = convertStringToHTMLElement;\n/**\n * Make a filename guaranteed to be unique.\n * @param {string} name - The original name of the file.\n * @param {string} template - The template to use for the unique name.\n * @param {object} evalContext - The context to use for the evaluation.\n * @returns {string} - A unique filename.\n */\nfunction uniqueName(name, template, evalContext) {\n    template = template || '{{fileName}}-{{guid}}';\n    //include guid in template anyway, to prevent overwriting issue if filename matches existing file\n    if (!template.includes('{{guid}}')) {\n        template = `${template}-{{guid}}`;\n    }\n    const parts = name.split('.');\n    let fileName = parts.slice(0, parts.length - 1).join('.');\n    const extension = parts.length > 1\n        ? `.${lodash_1.default.last(parts)}`\n        : '';\n    //allow only 100 characters from original name to avoid issues with filename length restrictions\n    fileName = fileName.substr(0, 100);\n    evalContext = Object.assign(evalContext || {}, {\n        fileName,\n        guid: guid()\n    });\n    //only letters, numbers, dots, dashes, underscores and spaces are allowed. Anything else will be replaced with dash\n    const uniqueName = `${Evaluator_1.Evaluator.interpolate(template, evalContext)}${extension}`.replace(/[^0-9a-zA-Z.\\-_ ]/g, '-');\n    return uniqueName;\n}\nexports.uniqueName = uniqueName;\n/**\n * Returns a GUID\n * @returns {string} - A GUID.\n */\nfunction guid() {\n    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {\n        const r = Math.random() * 16 | 0;\n        const v = c === 'x'\n            ? r\n            : (r & 0x3 | 0x8);\n        return v.toString(16);\n    });\n}\nexports.guid = guid;\n/**\n * Return a translated date setting.\n * @param {string|Date} date - The date to translate.\n * @returns {(null|Date)} - The translated date.\n */\nfunction getDateSetting(date) {\n    if (lodash_1.default.isNil(date) || lodash_1.default.isNaN(date) || date === '') {\n        return null;\n    }\n    if (date instanceof Date) {\n        return date;\n    }\n    else if (typeof date.toDate === 'function') {\n        return date.isValid() ? date.toDate() : null;\n    }\n    let dateSetting = ((typeof date !== 'string') || (date.indexOf('moment(') === -1)) ? (0, moment_timezone_1.default)(date) : null;\n    if (dateSetting && dateSetting.isValid()) {\n        return dateSetting.toDate();\n    }\n    dateSetting = null;\n    try {\n        const value = Evaluator_1.Evaluator.evaluator(`return ${date};`, 'moment')(moment_timezone_1.default);\n        if (typeof value === 'string') {\n            dateSetting = (0, moment_timezone_1.default)(value);\n        }\n        else if (typeof value.toDate === 'function') {\n            dateSetting = (0, moment_timezone_1.default)(value.toDate().toUTCString());\n        }\n        else if (value instanceof Date) {\n            dateSetting = (0, moment_timezone_1.default)(value);\n        }\n    }\n    catch (e) {\n        return null;\n    }\n    if (!dateSetting) {\n        return null;\n    }\n    // Ensure this is a date.\n    if (!dateSetting.isValid()) {\n        return null;\n    }\n    return dateSetting.toDate();\n}\nexports.getDateSetting = getDateSetting;\n/**\n * Returns true if the date is a valid date. False otherwise.\n * @param {Date|string} date - The date to check for validity.\n * @returns {boolean} - TRUE if the date is valid; FALSE otherwise.\n */\nfunction isValidDate(date) {\n    return lodash_1.default.isDate(date) && !lodash_1.default.isNaN(date.getDate());\n}\nexports.isValidDate = isValidDate;\n/**\n * Get the current timezone string.\n * @returns {string} - The current timezone.\n */\nfunction currentTimezone() {\n    if (moment_timezone_1.default.currentTimezone) {\n        return moment_timezone_1.default.currentTimezone;\n    }\n    moment_timezone_1.default.currentTimezone = jstimezonedetect_1.default.determine().name();\n    return moment_timezone_1.default.currentTimezone;\n}\nexports.currentTimezone = currentTimezone;\n/**\n * Get an offset date provided a date object and timezone object.\n * @param {Date} date - The date to offset.\n * @param {string} timezone - The timezone to offset the date to.\n * @returns {Date} - The offset date.\n */\nfunction offsetDate(date, timezone) {\n    if (timezone === 'UTC') {\n        return {\n            date: new Date(date.getTime() + (date.getTimezoneOffset() * 60000)),\n            abbr: 'UTC'\n        };\n    }\n    const dateMoment = (0, moment_timezone_1.default)(date).tz(timezone);\n    return {\n        date: new Date(date.getTime() + ((dateMoment.utcOffset() + date.getTimezoneOffset()) * 60000)),\n        abbr: dateMoment.format('z')\n    };\n}\nexports.offsetDate = offsetDate;\n/**\n * Returns if the zones are loaded.\n * @returns {boolean} - TRUE if the zones are loaded; FALSE otherwise.\n */\nfunction zonesLoaded() {\n    return moment_timezone_1.default.zonesLoaded;\n}\nexports.zonesLoaded = zonesLoaded;\n/**\n * Returns if we should load the zones.\n * @param {string} timezone - The timezone to check if we should load the zones.\n * @returns {boolean} - TRUE if we should load the zones; FALSE otherwise.\n */\nfunction shouldLoadZones(timezone) {\n    if (timezone === currentTimezone() || timezone === 'UTC') {\n        return false;\n    }\n    return true;\n}\nexports.shouldLoadZones = shouldLoadZones;\n/**\n * Externally load the timezone data.\n * @param {string} url - The URL to load the timezone data from.\n * @param {string} timezone - The timezone to load.\n * @returns {Promise<any> | *} - Resolves when the zones for this timezone are loaded.\n */\nfunction loadZones(url, timezone) {\n    if (timezone && !shouldLoadZones(timezone)) {\n        // Return non-resolving promise.\n        return new Promise(lodash_1.default.noop);\n    }\n    if (moment_timezone_1.default.zonesPromise) {\n        return moment_timezone_1.default.zonesPromise;\n    }\n    return moment_timezone_1.default.zonesPromise = fetch(url)\n        .then(resp => resp.json().then(zones => {\n        moment_timezone_1.default.tz.load(zones);\n        moment_timezone_1.default.zonesLoaded = true;\n        // Trigger a global event that the timezones have finished loading.\n        if (document && document.createEvent && document.body && document.body.dispatchEvent) {\n            var event = document.createEvent('Event');\n            event.initEvent('zonesLoaded', true, true);\n            document.body.dispatchEvent(event);\n        }\n    }));\n}\nexports.loadZones = loadZones;\n/**\n * Get the moment date object for translating dates with timezones.\n * @param {string|Date} value - The value to convert into a moment date.\n * @param {string} format - The format to convert the date to.\n * @param {string} timezone - The timezone to convert the date to.\n * @returns {Date} - The moment date object.\n */\nfunction momentDate(value, format, timezone) {\n    const momentDate = (0, moment_timezone_1.default)(value);\n    if (!timezone) {\n        return momentDate;\n    }\n    if (timezone === 'UTC') {\n        timezone = 'Etc/UTC';\n    }\n    if ((timezone !== currentTimezone() || (format && format.match(/\\s(z$|z\\s)/))) && moment_timezone_1.default.zonesLoaded) {\n        return momentDate.tz(timezone);\n    }\n    return momentDate;\n}\nexports.momentDate = momentDate;\n/**\n * Format a date provided a value, format, and timezone object.\n * @param {string} timezonesUrl - The URL to load the timezone data from.\n * @param {string|Date} value - The value to format.\n * @param {string} format - The format to format the date to.\n * @param {string} timezone - The timezone to format the date to.\n * @param {string} flatPickrInputFormat - The format to use for flatpickr input.\n * @returns {string} - The formatted date.\n */\nfunction formatDate(timezonesUrl, value, format, timezone, flatPickrInputFormat) {\n    const momentDate = (0, moment_timezone_1.default)(value, flatPickrInputFormat || undefined);\n    if (timezone === currentTimezone()) {\n        // See if our format contains a \"z\" timezone character.\n        if (format.match(/\\s(z$|z\\s)/)) {\n            loadZones(timezonesUrl);\n            if (moment_timezone_1.default.zonesLoaded) {\n                return momentDate.tz(timezone).format(convertFormatToMoment(format));\n            }\n            else {\n                return momentDate.format(convertFormatToMoment(format.replace(/\\s(z$|z\\s)/, '')));\n            }\n        }\n        // Return the standard format.\n        return momentDate.format(convertFormatToMoment(format));\n    }\n    if (timezone === 'UTC') {\n        const offset = offsetDate(momentDate.toDate(), 'UTC');\n        return `${(0, moment_timezone_1.default)(offset.date).format(convertFormatToMoment(format))} UTC`;\n    }\n    // Load the zones since we need timezone information.\n    loadZones(timezonesUrl);\n    if (moment_timezone_1.default.zonesLoaded && timezone) {\n        return momentDate.tz(timezone).format(`${convertFormatToMoment(format)} z`);\n    }\n    else {\n        return momentDate.format(convertFormatToMoment(format));\n    }\n}\nexports.formatDate = formatDate;\n/**\n * Pass a format function to format within a timezone.\n * @param {string} timezonesUrl - The URL to load the timezone data from.\n * @param {Function} formatFn - The format function to use.\n * @param {Date|string} date - The date to format.\n * @param {string} format - The format to format the date to.\n * @param {string} timezone - The timezone to format the date to.\n * @returns {string} - The formatted date.\n */\nfunction formatOffset(timezonesUrl, formatFn, date, format, timezone) {\n    if (timezone === currentTimezone()) {\n        return formatFn(date, format);\n    }\n    if (timezone === 'UTC') {\n        return `${formatFn(offsetDate(date, 'UTC').date, format)} UTC`;\n    }\n    // Load the zones since we need timezone information.\n    loadZones(timezonesUrl);\n    if (moment_timezone_1.default.zonesLoaded) {\n        const offset = offsetDate(date, timezone);\n        return `${formatFn(offset.date, format)} ${offset.abbr}`;\n    }\n    else {\n        return formatFn(date, format);\n    }\n}\nexports.formatOffset = formatOffset;\n/**\n * Returns the local date format information.\n * @param {Intl.LocalesArgument} locale - The locale to get the date format for.\n * @returns {object} - The local date format information.\n */\nfunction getLocaleDateFormatInfo(locale) {\n    const formatInfo = {};\n    const day = 21;\n    const exampleDate = new Date(2017, 11, day);\n    const localDateString = exampleDate.toLocaleDateString(locale);\n    formatInfo.dayFirst = localDateString.slice(0, 2) === day.toString();\n    return formatInfo;\n}\nexports.getLocaleDateFormatInfo = getLocaleDateFormatInfo;\n/**\n * Convert the format from the angular-datepicker module to flatpickr format.\n * @param {string} format - The format to convert.\n * @returns {string} - The converted format.\n */\nfunction convertFormatToFlatpickr(format) {\n    return format\n        // Remove the Z timezone offset, not supported by flatpickr.\n        .replace(/Z/g, '')\n        // Year conversion.\n        .replace(/y/g, 'Y')\n        .replace('YYYY', 'Y')\n        .replace('YY', 'y')\n        // Month conversion.\n        .replace('MMMM', 'F')\n        .replace(/M/g, 'n')\n        .replace('nnn', 'M')\n        .replace('nn', 'm')\n        // Day in month.\n        .replace(/d/g, 'j')\n        .replace(/jj/g, 'd')\n        // Day in week.\n        .replace('EEEE', 'l')\n        .replace('EEE', 'D')\n        // Hours, minutes, seconds\n        .replace('HH', 'H')\n        .replace('hh', 'G')\n        .replace('mm', 'i')\n        .replace('ss', 'S')\n        .replace(/a/g, 'K');\n}\nexports.convertFormatToFlatpickr = convertFormatToFlatpickr;\n/**\n * Convert the format from the angular-datepicker module to moment format.\n * @param {string} format - The format to convert.\n * @returns {string} - The converted format.\n */\nfunction convertFormatToMoment(format) {\n    return format\n        // Year conversion.\n        .replace(/y/g, 'Y')\n        // Day in month.\n        .replace(/d/g, 'D')\n        // Day in week.\n        .replace(/E/g, 'd')\n        // AM/PM marker\n        .replace(/a/g, 'A')\n        // Unix Timestamp\n        .replace(/U/g, 'X');\n}\nexports.convertFormatToMoment = convertFormatToMoment;\n/**\n * Convert the format from the angular-datepicker module to mask format.\n * @param {string} format - The format to convert.\n * @returns {string} - The converted format.\n */\nfunction convertFormatToMask(format) {\n    return format\n        // Long month replacement.\n        .replace(/M{4}/g, 'MM')\n        // Initial short month conversion.\n        .replace(/M{3}/g, '***')\n        // Short month conversion if input as text.\n        .replace(/e/g, 'Q')\n        // Month number conversion.\n        .replace(/W/g, '99')\n        // Year conversion.\n        .replace(/[ydhmswHMG]/g, '9')\n        // AM/PM conversion.\n        .replace(/a/g, 'AA');\n}\nexports.convertFormatToMask = convertFormatToMask;\n/**\n * Returns an input mask that is compatible with the input mask library.\n * @param {string} mask - The Form.io input mask.\n * @param {string} placeholderChar - Char which is used as a placeholder.\n * @returns {Array} - The input mask for the mask library.\n */\nfunction getInputMask(mask, placeholderChar) {\n    if (mask instanceof Array) {\n        return mask;\n    }\n    const maskArray = [];\n    maskArray.numeric = true;\n    for (let i = 0; i < mask.length; i++) {\n        switch (mask[i]) {\n            case '9':\n                maskArray.push(/\\d/);\n                break;\n            case 'A':\n                maskArray.numeric = false;\n                maskArray.push(/[a-zA-Z]/);\n                break;\n            case 'a':\n                maskArray.numeric = false;\n                maskArray.push(/[a-z]/);\n                break;\n            case '*':\n                maskArray.numeric = false;\n                maskArray.push(/[a-zA-Z0-9]/);\n                break;\n            // If char which is used inside mask placeholder was used in the mask, replace it with space to prevent errors\n            case placeholderChar:\n                maskArray.numeric = false;\n                maskArray.push(' ');\n                break;\n            default:\n                maskArray.numeric = false;\n                maskArray.push(mask[i]);\n                break;\n        }\n    }\n    return maskArray;\n}\nexports.getInputMask = getInputMask;\n/**\n * Unmasks a value using the provided mask and placeholder characters.\n * @param {string} value - The value to unmask.\n * @param {string} mask - The mask to use for unmasking.\n * @param {string} placeholderChar - The placeholder character to use for unmasking.\n * @returns {string} - The unmasked value.\n */\nfunction unmaskValue(value, mask, placeholderChar) {\n    if (!mask || !value || value.length > mask.length) {\n        return value;\n    }\n    let unmaskedValue = value.split('');\n    for (let i = 0; i < mask.length; i++) {\n        const char = value[i] || '';\n        const charPart = mask[i];\n        if (!lodash_1.default.isRegExp(charPart) && char === charPart) {\n            unmaskedValue[i] = '';\n        }\n    }\n    unmaskedValue = unmaskedValue.join('').replace(placeholderChar, '');\n    return unmaskedValue;\n}\nexports.unmaskValue = unmaskValue;\n/**\n * Returns true if the value matches the input mask format.\n * @param {string} value - The value to check.\n * @param {string} inputMask - The input mask to check against.\n * @returns {boolean} - TRUE if the value matches the input mask; FALSE otherwise.\n */\nfunction matchInputMask(value, inputMask) {\n    if (!inputMask) {\n        return true;\n    }\n    // If value is longer than mask, it isn't valid.\n    if (value.length > inputMask.length) {\n        return false;\n    }\n    for (let i = 0; i < inputMask.length; i++) {\n        const char = value[i] || '';\n        const charPart = inputMask[i];\n        if (!(lodash_1.default.isRegExp(charPart) && charPart.test(char) || charPart === char)) {\n            return false;\n        }\n    }\n    return true;\n}\nexports.matchInputMask = matchInputMask;\n/**\n * Returns the number separators (i.e. 1,000) for the provided language.\n * @param {string} lang - The language code to get the number separators for.\n * @returns {{delimiter: string, decimalSeparator: string}} - The number separators.\n */\nfunction getNumberSeparators(lang = 'en') {\n    const formattedNumberString = (12345.6789).toLocaleString(lang);\n    const delimeters = formattedNumberString.match(/..(.)...(.)../);\n    if (!delimeters) {\n        return {\n            delimiter: ',',\n            decimalSeparator: '.'\n        };\n    }\n    return {\n        delimiter: (delimeters.length > 1) ? delimeters[1] : ',',\n        decimalSeparator: (delimeters.length > 2) ? delimeters[2] : '.',\n    };\n}\nexports.getNumberSeparators = getNumberSeparators;\n/**\n * Returns the number for the maximum amount of decimal places for a number.\n * @param {import('@formio/core').Component} component - The component to check for decimal limits.\n * @param {number} defaultLimit - The default limit to use if none is provided in the component.\n * @returns {number} - The number of decimal places allowed.\n */\nfunction getNumberDecimalLimit(component, defaultLimit) {\n    if (lodash_1.default.has(component, 'decimalLimit')) {\n        return lodash_1.default.get(component, 'decimalLimit');\n    }\n    // Determine the decimal limit. Defaults to 20 but can be overridden by validate.step or decimalLimit settings.\n    let decimalLimit = defaultLimit || 20;\n    const step = lodash_1.default.get(component, 'validate.step', 'any');\n    if (step !== 'any') {\n        const parts = step.toString().split('.');\n        if (parts.length > 1) {\n            decimalLimit = parts[1].length;\n        }\n    }\n    return decimalLimit;\n}\nexports.getNumberDecimalLimit = getNumberDecimalLimit;\n/**\n * Returns the currency affixes for a specific language.\n * @param {object} arg0 - The arguments object.\n * @param {string} arg0.currency - The currency code to get the affixes for.\n * @param {number} arg0.decimalLimit - The number of decimal places to use.\n * @param {string} arg0.decimalSeparator - The decimal separator to use.\n * @param {string} arg0.lang - The language code to use.\n * @returns {{prefix: string, suffix: string}} - The currency affixes.\n */\nfunction getCurrencyAffixes({ currency, decimalLimit, decimalSeparator, lang, }) {\n    // Get the prefix and suffix from the localized string.\n    let regex = `(.*)?${(100).toLocaleString(lang)}`;\n    if (decimalLimit) {\n        regex += `${decimalSeparator === '.' ? '\\\\.' : decimalSeparator}${(0).toLocaleString(lang)}{${decimalLimit}}`;\n    }\n    regex += '(.*)?';\n    const parts = (100).toLocaleString(lang, {\n        style: 'currency',\n        currency: currency ? currency : 'USD',\n        useGrouping: true,\n        maximumFractionDigits: decimalLimit || 0,\n        minimumFractionDigits: decimalLimit || 0\n    }).replace('.', decimalSeparator).match(new RegExp(regex));\n    return {\n        prefix: (parts === null || parts === void 0 ? void 0 : parts[1]) || '',\n        suffix: (parts === null || parts === void 0 ? void 0 : parts[2]) || ''\n    };\n}\nexports.getCurrencyAffixes = getCurrencyAffixes;\n/**\n * Fetch the field data provided a component.\n * @param {import('@formio/core').DataObject} data - The data object to fetch the field data from.\n * @param {import('@formio/core').Component} component - The component to fetch the field data for.\n * @returns {*} - The field data.\n */\nfunction fieldData(data, component) {\n    if (!data) {\n        return '';\n    }\n    if (!component || !component.key) {\n        return data;\n    }\n    if (component.key.includes('.')) {\n        let value = data;\n        const parts = component.key.split('.');\n        let key = '';\n        for (let i = 0; i < parts.length; i++) {\n            key = parts[i];\n            // Handle nested resources\n            if (value.hasOwnProperty('_id')) {\n                value = value.data;\n            }\n            // Return if the key is not found on the value.\n            if (!value.hasOwnProperty(key)) {\n                return;\n            }\n            // Convert old single field data in submissions to multiple\n            if (key === parts[parts.length - 1] && component.multiple && !Array.isArray(value[key])) {\n                value[key] = [value[key]];\n            }\n            // Set the value of this key.\n            value = value[key];\n        }\n        return value;\n    }\n    else {\n        // Convert old single field data in submissions to multiple\n        if (component.multiple && !Array.isArray(data[component.key])) {\n            data[component.key] = [data[component.key]];\n        }\n        // Fix for checkbox type radio submission values in tableView\n        if (component.type === 'checkbox' && component.inputType === 'radio') {\n            return data[component.name] === component.value;\n        }\n        return data[component.key];\n    }\n}\nexports.fieldData = fieldData;\n/**\n * Delays function execution with possibility to execute function synchronously or cancel it.\n * @param {Function} fn - Function to delay\n * @param {number} delay - Delay time\n * @param {...any} args - Arguments to pass to the function\n * @returns {*} - Function to cancel the delay\n */\nfunction delay(fn, delay = 0, ...args) {\n    const timer = setTimeout(fn, delay, ...args);\n    /**\n     *\n     */\n    function cancel() {\n        clearTimeout(timer);\n    }\n    /**\n     * Execute the function early.\n     * @returns {*} - The result of the function.\n     */\n    function earlyCall() {\n        cancel();\n        return fn(...args);\n    }\n    earlyCall.timer = timer;\n    earlyCall.cancel = cancel;\n    return earlyCall;\n}\nexports.delay = delay;\n/**\n * Iterate the given key to make it unique.\n * @param {string} key\n *   Modify the component key to be unique.\n * @returns {string}\n *   The new component key.\n */\nfunction iterateKey(key) {\n    if (!key.match(/(\\d+)$/)) {\n        return `${key}1`;\n    }\n    return key.replace(/(\\d+)$/, function (suffix) {\n        return Number(suffix) + 1;\n    });\n}\nexports.iterateKey = iterateKey;\n/**\n * Determines a unique key within a map provided the base key.\n * @param {Record<string, string>} map - The map to check for uniqueness.\n * @param {string} base - The base path of the key.\n * @returns {string} - The unique key.\n */\nfunction uniqueKey(map, base) {\n    let newKey = base;\n    while (map.hasOwnProperty(newKey)) {\n        newKey = iterateKey(newKey);\n    }\n    return newKey;\n}\nexports.uniqueKey = uniqueKey;\n/**\n * Determines the major version number of bootstrap.\n * @param {object} options - The options to check for bootstrap version.\n * @param {string} options.bootstrap - The bootstrap version to use.\n * @returns {number} - The bootstrap version.\n */\nfunction bootstrapVersion(options) {\n    if (options.bootstrap) {\n        return options.bootstrap;\n    }\n    if ((typeof jQuery === 'function') && (typeof jQuery().collapse === 'function')) {\n        return parseInt(jQuery.fn.collapse.Constructor.VERSION.split('.')[0], 10);\n    }\n    if (window.bootstrap && window.bootstrap.Collapse) {\n        return parseInt(window.bootstrap.Collapse.VERSION.split('.')[0], 10);\n    }\n    return 0;\n}\nexports.bootstrapVersion = bootstrapVersion;\n/**\n * Retrun provided argument.\n * If argument is a function, returns the result of a function call.\n * @param {Function|any} e - The argument to check if a function and call if so.\n * @returns {any} - Either the result of the function call (e) or e if it is not a function.\n */\nfunction unfold(e) {\n    if (typeof e === 'function') {\n        return e();\n    }\n    return e;\n}\nexports.unfold = unfold;\n/**\n * Map values through unfold and return first non-nil value.\n * @param {Array<T>} collection - The collection to map through unfold.;\n * @returns {T} - The first non-nil value.\n */\nexports.firstNonNil = lodash_1.default.flow([\n    lodash_1.default.partialRight(lodash_1.default.map, unfold),\n    lodash_1.default.partialRight(lodash_1.default.find, v => !lodash_1.default.isUndefined(v))\n]);\n/**\n * Create enclosed state. Returns functions to getting and cycling between states.\n * @param {*} a - initial state.\n * @param {*} b - next state.\n * @returns {Functions[]} -- [get, toggle];\n */\nfunction withSwitch(a, b) {\n    let state = a;\n    let next = b;\n    /**\n     * Returns the state of the switch.\n     * @returns {*} - The current state.\n     */\n    function get() {\n        return state;\n    }\n    /**\n     * Toggles the state of the switch.\n     */\n    function toggle() {\n        const prev = state;\n        state = next;\n        next = prev;\n    }\n    return [get, toggle];\n}\nexports.withSwitch = withSwitch;\n/**\n * Create a function that will call the provided function only the provided limit.\n * @param {Function} callback - The callback to call.\n * @param {object} options - The options to use.\n * @param {number} options.limit - The limit to call the callback.\n * @param {number} options.delay - The delay to wait before resetting the call count.\n * @returns {Function} - The function that will call the callback only the provided limit.\n */\nfunction observeOverload(callback, options = {}) {\n    const { limit = 50, delay = 500 } = options;\n    let callCount = 0;\n    let timeoutID = 0;\n    const reset = () => callCount = 0;\n    return () => {\n        if (timeoutID !== 0) {\n            clearTimeout(timeoutID);\n            timeoutID = 0;\n        }\n        timeoutID = setTimeout(reset, delay);\n        callCount += 1;\n        if (callCount >= limit) {\n            clearTimeout(timeoutID);\n            reset();\n            return callback();\n        }\n    };\n}\nexports.observeOverload = observeOverload;\n/**\n * Returns the components that are provided within an evaluation context.\n * @param {any} context - The evaluation context to get the components from.\n * @param {boolean} excludeNested - Exclude nested components.\n * @param {Array<string>} excludedTypes - The types of components to exclude.\n * @returns {Array} - The components within the evaluation context.\n */\nfunction getContextComponents(context, excludeNested, excludedTypes = []) {\n    const values = [];\n    context.utils.eachComponent(context.instance.options.editForm.components, (component, path) => {\n        const addToContextComponents = excludeNested ? !component.tree : true;\n        if (component.key !== context.data.key && addToContextComponents && !lodash_1.default.includes(excludedTypes, component.type)) {\n            values.push({\n                label: `${component.label || component.key} (${path})`,\n                value: path,\n            });\n        }\n    });\n    return values;\n}\nexports.getContextComponents = getContextComponents;\n/**\n * Returns the button components that are within an evaluation context.\n * @param {any} context - The evaluation context to get the components from.\n * @returns {Array} - The button components within the evaluation context.\n */\nfunction getContextButtons(context) {\n    const values = [];\n    context.utils.eachComponent(context.instance.options.editForm.components, (component) => {\n        if (component.type === 'button') {\n            values.push({\n                label: `${component.key} (${component.label})`,\n                value: component.key,\n            });\n        }\n    });\n    return values;\n}\nexports.getContextButtons = getContextButtons;\n// Tags that could be in text, that should be ommited or handled in a special way\nconst inTextTags = ['#text', 'A', 'B', 'EM', 'I', 'SMALL', 'STRONG', 'SUB', 'SUP', 'INS', 'DEL', 'MARK', 'CODE'];\n/**\n * Helper function for 'translateHTMLTemplate'. Translates text value of the passed html element.\n * @param {HTMLElement} elem - The element to translate.\n * @param {Function} translate - The translation function.\n * @returns {string} - Translated element template.\n */\nfunction translateElemValue(elem, translate) {\n    if (!elem.innerText) {\n        return elem.innerHTML;\n    }\n    const elemValue = elem.innerText.replace(Evaluator_1.Evaluator.templateSettings.interpolate, '').replace(/\\s\\s+/g, ' ').trim();\n    const translatedValue = translate(elemValue);\n    if (elemValue !== translatedValue) {\n        const links = elem.innerHTML.match(/<a[^>]*>(.*?)<\\/a>/g);\n        if (links && links.length) {\n            if (links.length === 1 && links[0].length === elem.innerHTML.length) {\n                return elem.innerHTML.replace(elemValue, translatedValue);\n            }\n            const translatedLinks = links.map(link => {\n                const linkElem = document.createElement('a');\n                linkElem.innerHTML = link;\n                return translateElemValue(linkElem, translate);\n            });\n            return `${translatedValue} (${translatedLinks.join(', ')})`;\n        }\n        else {\n            return elem.innerText.replace(elemValue, translatedValue);\n        }\n    }\n    else {\n        return elem.innerHTML;\n    }\n}\n/**\n * Helper function for 'translateHTMLTemplate'. Goes deep through html tag children and calls function to translate their text values.\n * @param {HTMLElement} tag - The tag to translate.\n * @param {Function} translate - The translation function.\n * @returns {void}\n */\nfunction translateDeepTag(tag, translate) {\n    const children = tag.children.length && [...tag.children];\n    const shouldTranslateEntireContent = children && children.every(child => child.children.length === 0\n        && inTextTags.some(tag => child.nodeName === tag));\n    if (!children || shouldTranslateEntireContent) {\n        tag.innerHTML = translateElemValue(tag, translate);\n    }\n    else {\n        children.forEach(child => translateDeepTag(child, translate));\n    }\n}\n/**\n * Translates text values in html template.\n * @param {string} template - The template to translate.\n * @param {Function} translate - The translation function.\n * @returns {string} - Html template with translated values.\n */\nfunction translateHTMLTemplate(template, translate) {\n    const isHTML = /<[^>]*>/.test(template);\n    if (!isHTML) {\n        return translate(template);\n    }\n    const tempElem = document.createElement('div');\n    tempElem.innerHTML = template;\n    if (tempElem.innerText && tempElem.children.length) {\n        translateDeepTag(tempElem, translate);\n        return tempElem.innerHTML;\n    }\n    return template;\n}\nexports.translateHTMLTemplate = translateHTMLTemplate;\n/**\n * Sanitize an html string.\n * @param {string} string - The string to sanitize.\n * @param {any} options - The options to use for sanitization.\n * @returns {string} - The sanitized html string.\n */\nfunction sanitize(string, options) {\n    if (typeof dompurify_1.default.sanitize !== 'function') {\n        return string;\n    }\n    // Dompurify configuration\n    const sanitizeOptions = {\n        ADD_ATTR: ['ref', 'target'],\n        USE_PROFILES: { html: true }\n    };\n    // Use profiles\n    if (options.sanitizeConfig && options.sanitizeConfig.useProfiles) {\n        Object.keys(options.sanitizeConfig.useProfiles).forEach(key => {\n            sanitizeOptions.USE_PROFILES[key] = options.sanitizeConfig.useProfiles[key];\n        });\n    }\n    // Add attrs\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addAttr) && options.sanitizeConfig.addAttr.length > 0) {\n        options.sanitizeConfig.addAttr.forEach((attr) => {\n            sanitizeOptions.ADD_ATTR.push(attr);\n        });\n    }\n    // Add tags\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addTags) && options.sanitizeConfig.addTags.length > 0) {\n        sanitizeOptions.ADD_TAGS = options.sanitizeConfig.addTags;\n    }\n    // Allow tags\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.allowedTags) && options.sanitizeConfig.allowedTags.length > 0) {\n        sanitizeOptions.ALLOWED_TAGS = options.sanitizeConfig.allowedTags;\n    }\n    // Allow attributes\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.allowedAttrs) && options.sanitizeConfig.allowedAttrs.length > 0) {\n        sanitizeOptions.ALLOWED_ATTR = options.sanitizeConfig.allowedAttrs;\n    }\n    // Allowd URI Regex\n    if (options.sanitizeConfig && options.sanitizeConfig.allowedUriRegex) {\n        const allowedUriRegex = options.sanitizeConfig.allowedUriRegex;\n        sanitizeOptions.ALLOWED_URI_REGEXP = lodash_1.default.isString(allowedUriRegex) ? new RegExp(allowedUriRegex) : allowedUriRegex;\n    }\n    // Allow to extend the existing array of elements that are safe for URI-like values\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addUriSafeAttr) && options.sanitizeConfig.addUriSafeAttr.length > 0) {\n        sanitizeOptions.ADD_URI_SAFE_ATTR = options.sanitizeConfig.addUriSafeAttr;\n    }\n    return dompurify_1.default.sanitize(string, sanitizeOptions);\n}\nexports.sanitize = sanitize;\n/**\n * Fast cloneDeep for JSON objects only.\n * @param {any} obj - The object to perform a fast clone deep against.\n * @returns {any} - The cloned object.\n */\nfunction fastCloneDeep(obj) {\n    return obj ? JSON.parse(JSON.stringify(obj)) : obj;\n}\nexports.fastCloneDeep = fastCloneDeep;\n/**\n * Returns if the component is an input component.\n * @param {import('@formio/core').Component} componentJson - The JSON of a component.\n * @returns {bool} - TRUE if the component is an input component; FALSE otherwise.\n */\nfunction isInputComponent(componentJson) {\n    if (componentJson.input === false || componentJson.input === true) {\n        return componentJson.input;\n    }\n    switch (componentJson.type) {\n        case 'htmlelement':\n        case 'content':\n        case 'columns':\n        case 'fieldset':\n        case 'panel':\n        case 'table':\n        case 'tabs':\n        case 'well':\n        case 'button':\n            return false;\n        default:\n            return true;\n    }\n}\nexports.isInputComponent = isInputComponent;\n/**\n * Takes a component path, and returns a component path array.\n * @param {string} pathStr - The path string to convert to an array.\n * @returns {Arryay<number>} - The array of paths.\n */\nfunction getArrayFromComponentPath(pathStr) {\n    if (!pathStr || !lodash_1.default.isString(pathStr)) {\n        if (!lodash_1.default.isArray(pathStr)) {\n            return [pathStr];\n        }\n        return pathStr;\n    }\n    return pathStr.replace(/[[\\]]/g, '.')\n        .replace(/\\.\\./g, '.')\n        .replace(/(^\\.)|(\\.$)/g, '')\n        .split('.')\n        .map(part => lodash_1.default.defaultTo(lodash_1.default.toNumber(part), part));\n}\nexports.getArrayFromComponentPath = getArrayFromComponentPath;\n/**\n * Returns true if the component is a child of the parent.\n * @param {any} child - The child component to check.\n * @param {any} parent - The parent component to check.\n * @returns {boolean} - TRUE if the child is a child of the parent; FALSE otherwise.\n */\nfunction isChildOf(child, parent) {\n    while (child && child.parent) {\n        if (child.parent === parent) {\n            return true;\n        }\n        child = child.parent;\n    }\n    return false;\n}\nexports.isChildOf = isChildOf;\n/**\n * Takes an array of component path indexes, and returns a string version of that array.\n * @param {Array<number>} path - The path array to convert to a string.\n * @returns {string} - The string version of the path.\n */\nfunction getStringFromComponentPath(path) {\n    if (!lodash_1.default.isArray(path)) {\n        return path;\n    }\n    let strPath = '';\n    path.forEach((part, i) => {\n        if (lodash_1.default.isNumber(part)) {\n            strPath += `[${part}]`;\n        }\n        else {\n            strPath += i === 0 ? part : `.${part}`;\n        }\n    });\n    return strPath;\n}\nexports.getStringFromComponentPath = getStringFromComponentPath;\n/**\n * Takes a number and rounds it to the provided precision amount.\n * @param {number} number - The number to round.\n * @param {number} precision - The precision to round the number to.\n * @returns {string} - The rounded number.\n */\nfunction round(number, precision) {\n    if (lodash_1.default.isNumber(number)) {\n        return number.toFixed(precision);\n    }\n    return number.toString();\n}\nexports.round = round;\n/**\n * Check for Internet Explorer browser version\n * @returns {(number|null)} - The IE browser version or null if not IE\n */\nfunction getIEBrowserVersion() {\n    const { ie, version } = getBrowserInfo();\n    return ie ? version : null;\n}\nexports.getIEBrowserVersion = getIEBrowserVersion;\n/**\n * Get browser name and version (modified from 'jquery-browser-plugin')\n * @returns {object} -- {{browser name, version, isWebkit?}}\n * Possible browser names: chrome, safari, ie, edge, opera, mozilla, yabrowser\n */\nfunction getBrowserInfo() {\n    const browser = {};\n    if (typeof window === 'undefined') {\n        return browser;\n    }\n    const ua = window.navigator.userAgent.toLowerCase();\n    const match = /(edge|edg)\\/([\\w.]+)/.exec(ua) ||\n        /(opr)[/]([\\w.]+)/.exec(ua) ||\n        /(yabrowser)[ /]([\\w.]+)/.exec(ua) ||\n        /(chrome)[ /]([\\w.]+)/.exec(ua) ||\n        /(iemobile)[/]([\\w.]+)/.exec(ua) ||\n        /(version)(applewebkit)[ /]([\\w.]+).*(safari)[ /]([\\w.]+)/.exec(ua) ||\n        /(webkit)[ /]([\\w.]+).*(version)[ /]([\\w.]+).*(safari)[ /]([\\w.]+)/.exec(ua) ||\n        /(webkit)[ /]([\\w.]+)/.exec(ua) ||\n        /(opera)(?:.*version|)[ /]([\\w.]+)/.exec(ua) ||\n        /(msie) ([\\w.]+)/.exec(ua) ||\n        ua.indexOf('trident') >= 0 && /(rv)(?::| )([\\w.]+)/.exec(ua) ||\n        ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\\w.]+)|)/.exec(ua) ||\n        [];\n    const matched = {\n        browser: match[5] || match[3] || match[1] || '',\n        version: match[4] || match[2] || '0'\n    };\n    if (matched.browser) {\n        browser[matched.browser] = true;\n        browser.version = parseInt(matched.version, 10);\n    }\n    // Chrome, Opera 15+, Safari and Yandex.Browser are webkit based browsers\n    if (browser.chrome || browser.opr || browser.safari || browser.edg || browser.yabrowser) {\n        browser.isWebkit = true;\n    }\n    // IE11 has a new token so we will assign it ie to avoid breaking changes\n    if (browser.rv || browser.iemobile) {\n        browser.ie = true;\n    }\n    // Edge has a new token since it became webkit based\n    if (browser.edg) {\n        browser.edge = true;\n    }\n    // Opera 15+ are identified as opr\n    if (browser.opr) {\n        browser.opera = true;\n    }\n    return browser;\n}\nexports.getBrowserInfo = getBrowserInfo;\n/**\n * Takes a component path, which may include array indicies (i.e. [0][1]), and returns the compoennt path without the indicies.\n * @param {string} path - The path to remove the indicies from.\n * @returns {string} - The path without the indicies.\n */\nfunction getComponentPathWithoutIndicies(path = '') {\n    return path.replace(/\\[\\d+\\]/, '');\n}\nexports.getComponentPathWithoutIndicies = getComponentPathWithoutIndicies;\n/**\n * Returns a path to the component which based on its schema\n * @param {import('@formio/core').Component} component - Component containing link to its parent's schema in the 'parent' property\n * @returns {string} - Path to the component\n */\nfunction getComponentPath(component) {\n    return component.paths.localDataPath;\n}\nexports.getComponentPath = getComponentPath;\n/**\n * Returns a parent component of the passed component instance skipping all the Layout components\n * @param {Component} componentInstance - The component to check for the parent.\n * @returns {Component|undefined} - The parent data component.\n */\nfunction getDataParentComponent(componentInstance) {\n    if (!componentInstance) {\n        return;\n    }\n    const { parent } = componentInstance;\n    if (parent && (parent.isInputComponent || parent.input)) {\n        return parent;\n    }\n    else {\n        return getDataParentComponent(parent);\n    }\n}\nexports.getDataParentComponent = getDataParentComponent;\n/**\n * Returns whether the value is a promise\n * @param {any} value - The value to check\n * @returns {boolean} - TRUE if the value is a promise; FALSE otherwise\n */\nfunction isPromise(value) {\n    return value\n        && value.then\n        && typeof value.then === 'function'\n        && Object.prototype.toString.call(value) === '[object Promise]';\n}\nexports.isPromise = isPromise;\n/**\n * Determines if the component has a scoping parent in tree (a component which scopes its children and manages its\n * changes by itself, e.g. EditGrid)\n * @param {Component} componentInstance - The component to check for the scoping parent.\n * @param {boolean} firstPass - Whether it is the first pass of the function\n * @returns {boolean|*} - TRUE if the component has a scoping parent; FALSE otherwise\n */\nfunction isInsideScopingComponent(componentInstance, firstPass = true) {\n    if (!firstPass && (componentInstance === null || componentInstance === void 0 ? void 0 : componentInstance.hasScopedChildren)) {\n        return true;\n    }\n    const dataParent = getDataParentComponent(componentInstance);\n    if (dataParent === null || dataParent === void 0 ? void 0 : dataParent.hasScopedChildren) {\n        return true;\n    }\n    else if (dataParent === null || dataParent === void 0 ? void 0 : dataParent.parent) {\n        return isInsideScopingComponent(dataParent.parent, false);\n    }\n    return false;\n}\nexports.isInsideScopingComponent = isInsideScopingComponent;\n/**\n * Returns all the focusable elements within the provided dom element.\n * @param {HTMLElement} element - The element to get the focusable elements from.\n * @returns {NodeList<HTMLElement>} - The focusable elements within the provided element.\n */\nfunction getFocusableElements(element) {\n    const focusableSelector = `button:not([disabled]), input:not([disabled]), select:not([disabled]),\n    textarea:not([disabled]), button:not([disabled]), [href]`;\n    return element.querySelectorAll(focusableSelector);\n}\nexports.getFocusableElements = getFocusableElements;\nexports.componentValueTypes = {\n    number: 'number',\n    string: 'string',\n    boolean: 'boolean',\n    array: 'array',\n    object: 'object',\n    date: 'date',\n    any: 'any',\n};\n/**\n * Returns the saved types for the component\n * @param {import('@formio/core').Component} fullSchema - The component schema\n * @returns {Array<string>|null} - The saved types for the component\n */\nfunction getComponentSavedTypes(fullSchema) {\n    const schema = fullSchema || {};\n    if (schema.persistent !== true) {\n        return [];\n    }\n    if (schema.multiple) {\n        return [exports.componentValueTypes.array];\n    }\n    return null;\n}\nexports.getComponentSavedTypes = getComponentSavedTypes;\n/**\n * Interpolates @formio/core errors so that they are compatible with the renderer\n * @param {Component} component - The component to interpolate the errors for\n * @param {FieldError[]} errors - The errors to interpolate\n * @param {Function} interpolateFn - The interpolation function\n * @returns {[]} - The interpolated errors\n */\nconst interpolateErrors = (component, errors, interpolateFn) => {\n    return errors.map((error) => {\n        error.component = component;\n        const { errorKeyOrMessage, context } = error;\n        const toInterpolate = component.errors && component.errors[errorKeyOrMessage] ? component.errors[errorKeyOrMessage] : errorKeyOrMessage;\n        return Object.assign(Object.assign({}, error), { message: unescapeHTML(interpolateFn(toInterpolate, context)), context: Object.assign({}, context) });\n    });\n};\nexports.interpolateErrors = interpolateErrors;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/utils/utils.js?");
+eval("\n/* global jQuery */\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __exportStar = (this && this.__exportStar) || function(m, exports) {\n    for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.removeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = exports.moment = exports.ConditionOperators = exports.jsonLogic = void 0;\nexports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = exports.observeOverload = exports.withSwitch = void 0;\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nexports._ = lodash_1.default;\nconst json_logic_js_1 = __importDefault(__webpack_require__(/*! json-logic-js */ \"./node_modules/json-logic-js/logic.js\"));\nexports.jsonLogic = json_logic_js_1.default;\nconst moment_timezone_1 = __importDefault(__webpack_require__(/*! moment-timezone/moment-timezone */ \"./node_modules/moment-timezone/moment-timezone.js\"));\nexports.moment = moment_timezone_1.default;\nconst jstimezonedetect_1 = __importDefault(__webpack_require__(/*! jstimezonedetect */ \"./node_modules/jstimezonedetect/dist/jstz.min.js\"));\nconst operators_1 = __webpack_require__(/*! ./jsonlogic/operators */ \"./lib/cjs/utils/jsonlogic/operators.js\");\nconst dompurify_1 = __importDefault(__webpack_require__(/*! dompurify */ \"./node_modules/dompurify/dist/purify.cjs.js\"));\nconst formUtils_1 = __webpack_require__(/*! ./formUtils */ \"./lib/cjs/utils/formUtils.js\");\nconst Evaluator_1 = __webpack_require__(/*! ./Evaluator */ \"./lib/cjs/utils/Evaluator.js\");\nObject.defineProperty(exports, \"Evaluator\", ({ enumerable: true, get: function () { return Evaluator_1.Evaluator; } }));\nconst conditionOperators_1 = __importDefault(__webpack_require__(/*! ./conditionOperators */ \"./lib/cjs/utils/conditionOperators/index.js\"));\nexports.ConditionOperators = conditionOperators_1.default;\nconst interpolate = Evaluator_1.Evaluator.interpolate;\nexports.interpolate = interpolate;\n__exportStar(__webpack_require__(/*! ./formUtils */ \"./lib/cjs/utils/formUtils.js\"), exports);\n// Configure JsonLogic\noperators_1.lodashOperators.forEach((name) => json_logic_js_1.default.add_operation(`_${name}`, lodash_1.default[name]));\n// Retrieve Any Date\njson_logic_js_1.default.add_operation('getDate', (date) => {\n    return (0, moment_timezone_1.default)(date).toISOString();\n});\n// Set Relative Minimum Date\njson_logic_js_1.default.add_operation('relativeMinDate', (relativeMinDate) => {\n    return (0, moment_timezone_1.default)().subtract(relativeMinDate, 'days').toISOString();\n});\n// Set Relative Maximum Date\njson_logic_js_1.default.add_operation('relativeMaxDate', (relativeMaxDate) => {\n    return (0, moment_timezone_1.default)().add(relativeMaxDate, 'days').toISOString();\n});\n/**\n * Evaluate a method.\n * @param {Function|string|object} func - The function to evaluate.\n * @param {*} args - A map of arguments to pass to the function.\n * @param {string} ret - The name of the \"return\" variable in the script.\n * @param {boolean} interpolate - True if the script should be interpolated before being executed.\n * @param {import('@formio/core').EvaluatorOptions} options - The evaluator options.\n * @returns {*} - The result of the evaluation.\n */\nfunction evaluate(func, args, ret, interpolate, options = {}) {\n    return Evaluator_1.Evaluator.evaluate(func, args, ret, interpolate, undefined, options);\n}\nexports.evaluate = evaluate;\n/**\n * Returns a random compoennt ID.\n * @returns {string} - A random component ID.\n */\nfunction getRandomComponentId() {\n    return `e${Math.random().toString(36).substring(7)}`;\n}\nexports.getRandomComponentId = getRandomComponentId;\n/**\n * Get a property value of an element.\n * @param {CSSStyleDeclaration} style - The style element to get the property value from.\n * @param {string} prop - The property to get the value for.\n * @returns {number} - The value of the property.\n */\nfunction getPropertyValue(style, prop) {\n    let value = style.getPropertyValue(prop);\n    value = value ? value.replace(/[^0-9.]/g, '') : '0';\n    return parseFloat(value);\n}\nexports.getPropertyValue = getPropertyValue;\n/**\n * Get an elements bounding rectagle.\n * @param {HTMLElement} element - A DOM element to get the bounding rectangle for.\n * @returns {{x: number, y: number, width: number, height: number}} - The bounding rectangle.\n */\nfunction getElementRect(element) {\n    const style = window.getComputedStyle(element, null);\n    return {\n        x: getPropertyValue(style, 'left'),\n        y: getPropertyValue(style, 'top'),\n        width: getPropertyValue(style, 'width'),\n        height: getPropertyValue(style, 'height')\n    };\n}\nexports.getElementRect = getElementRect;\n/**\n * Get non HTMLElement property in the window object\n * @param {string} property - The window property to fetch the script plugin from.\n * @returns {any | undefined} - The HTML Element property on the window object.\n */\nfunction getScriptPlugin(property) {\n    const obj = window[property];\n    if (typeof HTMLElement === 'object' ? obj instanceof HTMLElement : //DOM2\n        obj && typeof obj === 'object' && true && obj.nodeType === 1 && typeof obj.nodeName === 'string') {\n        return undefined;\n    }\n    return obj;\n}\nexports.getScriptPlugin = getScriptPlugin;\n/**\n * Determines the boolean value of a setting.\n * @param {string|boolean} value - A string or boolean value to convert to boolean.\n * @returns {boolean} - The boolean value of the setting.\n */\nfunction boolValue(value) {\n    if (lodash_1.default.isBoolean(value)) {\n        return value;\n    }\n    else if (lodash_1.default.isString(value)) {\n        return (value.toLowerCase() === 'true');\n    }\n    else {\n        return !!value;\n    }\n}\nexports.boolValue = boolValue;\n/**\n * Check to see if an ID is a mongoID.\n * @param {string} text - The text to check if it is a mongoID.\n * @returns {boolean} - TRUE if the text is a mongoID; FALSE otherwise.\n */\nfunction isMongoId(text) {\n    return !!text.toString().match(/^[0-9a-fA-F]{24}$/);\n}\nexports.isMongoId = isMongoId;\n/**\n * Checks the calculated value for a provided component and data.\n * @param {import('@formio/core').Component} component - The component to check for the calculated value.\n * @param {import('@formio/core').Submission} submission - A submission object.\n * @param {*} rowData - The contextual row data for the component.\n */\nfunction checkCalculated(component, submission, rowData) {\n    // Process calculated value stuff if present.\n    if (component.calculateValue) {\n        lodash_1.default.set(rowData, component.key, evaluate(component.calculateValue, {\n            value: undefined,\n            data: submission ? submission.data : rowData,\n            row: rowData,\n            util: this,\n            component\n        }, 'value'));\n    }\n}\nexports.checkCalculated = checkCalculated;\n/**\n * Check if a simple conditional evaluates to true.\n * @param {import('@formio/core').Component} component - The component to check for the conditional.\n * @param {import('@formio/core').SimpleConditional} condition - The condition to check.\n * @param {*} row - The row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The instance of the component.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\n/**\n *\n * @param conditionPaths\n * @param data\n */\nfunction getConditionalPathsRecursive(conditionPaths, data) {\n    let currentGlobalIndex = 0;\n    const conditionalPathsArray = [];\n    const getConditionalPaths = (data, currentPath = '', localIndex = 0) => {\n        currentPath = currentPath.replace(/^\\.+|\\.+$/g, '');\n        const currentLocalIndex = localIndex;\n        const currentData = lodash_1.default.get(data, currentPath);\n        if (Array.isArray(currentData) && currentData.filter(Boolean).length > 0) {\n            if (currentData.some(element => typeof element !== 'object')) {\n                return;\n            }\n            const hasInnerDataArray = currentData.find(x => Array.isArray(x[conditionPaths[currentLocalIndex]]));\n            if (hasInnerDataArray) {\n                currentData.forEach((_, indexOutside) => {\n                    const innerCompDataPath = `${currentPath}[${indexOutside}].${conditionPaths[currentLocalIndex]}`;\n                    getConditionalPaths(data, innerCompDataPath, currentLocalIndex + 1);\n                });\n            }\n            else {\n                currentData.forEach((x, index) => {\n                    if (!lodash_1.default.isNil(x[conditionPaths[currentLocalIndex]])) {\n                        const compDataPath = `${currentPath}[${index}].${conditionPaths[currentLocalIndex]}`;\n                        conditionalPathsArray.push(compDataPath);\n                    }\n                });\n            }\n        }\n        else {\n            if (!conditionPaths[currentGlobalIndex]) {\n                return;\n            }\n            currentGlobalIndex = currentGlobalIndex + 1;\n            getConditionalPaths(data, `${currentPath}.${conditionPaths[currentGlobalIndex - 1]}`, currentGlobalIndex);\n        }\n    };\n    getConditionalPaths(data);\n    return conditionalPathsArray;\n}\n/**\n *\n * @param component\n * @param condition\n * @param row\n * @param data\n * @param instance\n */\nfunction checkSimpleConditional(component, condition, row, data, instance) {\n    if (condition.when) {\n        const value = getComponentActualValue(condition.when, data, row);\n        const eq = String(condition.eq);\n        const show = String(condition.show);\n        // Special check for selectboxes component.\n        if (lodash_1.default.isObject(value) && lodash_1.default.has(value, condition.eq)) {\n            return String(value[condition.eq]) === show;\n        }\n        // FOR-179 - Check for multiple values.\n        if (Array.isArray(value) && value.map(String).includes(eq)) {\n            return show === 'true';\n        }\n        return (String(value) === eq) === (show === 'true');\n    }\n    else {\n        const { conditions = [], conjunction = 'all', show = true } = condition;\n        if (!conditions.length) {\n            return true;\n        }\n        const conditionsResult = lodash_1.default.map(conditions, (cond) => {\n            var _a, _b;\n            const { value: comparedValue, operator, component: conditionComponentPath } = cond;\n            if (!conditionComponentPath) {\n                return true;\n            }\n            const splittedConditionPath = conditionComponentPath.split('.');\n            const conditionalPaths = ((_a = instance === null || instance === void 0 ? void 0 : instance.parent) === null || _a === void 0 ? void 0 : _a.type) === 'datagrid' || ((_b = instance === null || instance === void 0 ? void 0 : instance.parent) === null || _b === void 0 ? void 0 : _b.type) === 'editgrid' ? [] : getConditionalPathsRecursive(splittedConditionPath, data);\n            if (conditionalPaths.length > 0) {\n                return conditionalPaths.map((path) => {\n                    const value = getComponentActualValue(path, data, row);\n                    const ConditionOperator = conditionOperators_1.default[operator];\n                    return ConditionOperator\n                        ? new ConditionOperator().getResult({ value, comparedValue, instance, component, path })\n                        : true;\n                });\n            }\n            else {\n                const value = getComponentActualValue(conditionComponentPath, data, row);\n                const СonditionOperator = conditionOperators_1.default[operator];\n                return СonditionOperator\n                    ? new СonditionOperator().getResult({ value, comparedValue, instance, component, path: conditionComponentPath })\n                    : true;\n            }\n        });\n        let result = false;\n        switch (conjunction) {\n            case 'any':\n                result = lodash_1.default.some(conditionsResult.flat(), res => !!res);\n                break;\n            default:\n                result = lodash_1.default.every(conditionsResult.flat(), res => !!res);\n        }\n        return show ? result : !result;\n    }\n}\nexports.checkSimpleConditional = checkSimpleConditional;\n/**\n * Returns a components normalized value.\n * @param {string} compPath - The full path to the component.\n * @param {*} data - The data object to get the value from.\n * @param {*} row - The contextual row data for the component.\n * @returns {*} - The normalized value of the component.\n */\nfunction getComponentActualValue(compPath, data, row) {\n    let value = null;\n    if (data) {\n        value = (0, formUtils_1.getValue)({ data }, compPath);\n    }\n    if (row && lodash_1.default.isNil(value)) {\n        value = (0, formUtils_1.getValue)({ data: row }, compPath);\n    }\n    // FOR-400 - Fix issue where falsey values were being evaluated as show=true\n    if (lodash_1.default.isNil(value) || (lodash_1.default.isObject(value) && lodash_1.default.isEmpty(value))) {\n        value = '';\n    }\n    return value;\n}\nexports.getComponentActualValue = getComponentActualValue;\n/**\n * Check custom javascript conditional.\n * @param {import('@formio/core').Component} component - The component to check for the conditional.\n * @param {string} custom - The custom conditional string to evaluate.\n * @param {*} row - The row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {string} variable - The variable name for the result of the custom conditional.\n * @param {*} onError - A custom return if there is an error or the value is null from the evaluation.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @returns {*} - The result of the evaulation.\n */\nfunction checkCustomConditional(component, custom, row, data, form, variable, onError, instance) {\n    if (typeof custom === 'string') {\n        custom = `var ${variable} = true; ${custom}; return ${variable};`;\n    }\n    const value = (instance && instance.evaluate) ?\n        instance.evaluate(custom, { row, data, form }) :\n        evaluate(custom, { row, data, form });\n    if (value === null) {\n        return onError;\n    }\n    return value;\n}\nexports.checkCustomConditional = checkCustomConditional;\n/**\n * Check a component for JSON conditionals.\n * @param {import('@formio/core').Component} component - The component\n * @param {import('@formio/core').JSONConditional} json - The json conditional to check.\n * @param {*} row - The contextual row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The Form JSON of the form.\n * @param {*} onError - Custom return value if there is an error.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\nfunction checkJsonConditional(component, json, row, data, form, onError) {\n    try {\n        return json_logic_js_1.default.apply(json, {\n            data,\n            row,\n            form,\n            _: lodash_1.default,\n        });\n    }\n    catch (err) {\n        console.warn(`An error occurred in jsonLogic advanced condition for ${component.key}`, err);\n        return onError;\n    }\n}\nexports.checkJsonConditional = checkJsonConditional;\n/**\n * Returns the contextual row data for a component.\n * @param {import('@formio/core').Component} component - The component to get the row data for.\n * @param {*} row - The row data for the component.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @param {*} conditional - The component conditional.\n * @returns {*} - The contextual row data for the component.\n */\nfunction getRow(component, row, instance, conditional) {\n    var _a, _b, _c;\n    const condition = conditional || component.conditional;\n    // If no component's instance passed (happens only in 6.x server), calculate its path based on the schema\n    if (!instance) {\n        instance = lodash_1.default.cloneDeep(component);\n    }\n    const dataParent = getDataParentComponent(instance);\n    if (dataParent) {\n        const parentPath = (_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localDataPath;\n        const isTriggerCondtionComponentPath = condition.when || !condition.conditions\n            ? (_b = condition.when) === null || _b === void 0 ? void 0 : _b.startsWith((_c = dataParent.paths) === null || _c === void 0 ? void 0 : _c.localPath)\n            : lodash_1.default.some(condition.conditions, cond => { var _a; return cond.component.startsWith((_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localPath); });\n        if (isTriggerCondtionComponentPath) {\n            const newRow = {};\n            lodash_1.default.set(newRow, parentPath, row);\n            row = newRow;\n        }\n    }\n    return row;\n}\n/**\n * Checks the conditions for a provided component and data.\n * @param {import('@formio/core').Component} component - The component to check for the condition.\n * @param {*} row - The data within a row\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\nfunction checkCondition(component, row, data, form, instance) {\n    const { customConditional, conditional } = component;\n    if (customConditional) {\n        return checkCustomConditional(component, customConditional, row, data, form, 'show', true, instance);\n    }\n    else if (conditional && (conditional.when || lodash_1.default.some(conditional.conditions || [], condition => condition.component && condition.operator))) {\n        row = getRow(component, row, instance);\n        return checkSimpleConditional(component, conditional, row, data, instance);\n    }\n    else if (conditional && conditional.json) {\n        return checkJsonConditional(component, conditional.json, row, data, form, true);\n    }\n    // Default to show.\n    return true;\n}\nexports.checkCondition = checkCondition;\n/**\n * Test a trigger on a component.\n * @param {import('@formio/core').Component} component - The component to test the trigger against.\n * @param {import('@formio/core').LogicTrigger} trigger - The trigger configuration.\n * @param {import('@formio/core').DataObject} row - The contextual row data.\n * @param {import('@formio/core').DataObject} data - The root data object.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {any} instance - The component that is performing the trigger.\n * @returns {boolean} - TRUE if the trigger should fire; FALSE otherwise.\n */\nfunction checkTrigger(component, trigger, row, data, form, instance) {\n    // If trigger is empty, don't fire it\n    if (!trigger || !trigger[trigger.type]) {\n        return false;\n    }\n    switch (trigger.type) {\n        case 'simple':\n            row = getRow(component, row, instance, trigger.simple);\n            return checkSimpleConditional(component, trigger.simple, row, data, instance);\n        case 'javascript':\n            return checkCustomConditional(component, trigger.javascript, row, data, form, 'result', false, instance);\n        case 'json':\n            return checkJsonConditional(component, trigger.json, row, data, form, false);\n    }\n    // If none of the types matched, don't fire the trigger.\n    return false;\n}\nexports.checkTrigger = checkTrigger;\n/**\n * Sets a property on a component via an executed Logic action.\n * @param {import('@formio/core').Component} component - The component to set the property on.\n * @param {import('@formio/core').LogicAction} action - The action to perform on the component.\n * @param {string} result - The name of the variable in the evaulation to use as the result.\n * @param {import('@formio/core').DataObject} row - The contextual row data.\n * @param {import('@formio/core').DataObject} data - The full submission data.\n * @param {any} instance - The component instance.\n * @returns {import('@formio/core').Component} - The modified component.\n */\nfunction setActionProperty(component, action, result, row, data, instance) {\n    const property = action.property.value;\n    switch (action.property.type) {\n        case 'boolean': {\n            const currentValue = lodash_1.default.get(component, property, false).toString();\n            const newValue = action.state.toString();\n            if (currentValue !== newValue) {\n                lodash_1.default.set(component, property, newValue === 'true');\n            }\n            break;\n        }\n        case 'string': {\n            const evalData = {\n                data,\n                row,\n                component,\n                result,\n            };\n            const textValue = action.property.component ? action[action.property.component] : action.text;\n            const currentValue = lodash_1.default.get(component, property, '');\n            const newValue = (instance && instance.interpolate)\n                ? instance.interpolate(textValue, evalData)\n                : Evaluator_1.Evaluator.interpolate(textValue, evalData);\n            if (newValue !== currentValue) {\n                lodash_1.default.set(component, property, newValue);\n            }\n            break;\n        }\n    }\n    return component;\n}\nexports.setActionProperty = setActionProperty;\n/**\n * Removes HTML tags from string e.g. <div>Hello World</div> => Hello World\n * @param {string} str - The string to remove HTML tags from.\n * @returns {string} - The string without HTML tags.\n */\nfunction removeHTML(str) {\n    const doc = new window.DOMParser().parseFromString(str, 'text/html');\n    return (doc.body.textContent || '').trim();\n}\nexports.removeHTML = removeHTML;\n/**\n * Unescape HTML characters like &lt, &gt, &amp and etc.\n * @param {string} str - The string to unescape.\n * @returns {string} - The unescaped string.\n */\nfunction unescapeHTML(str) {\n    if (typeof window === 'undefined' || !('DOMParser' in window)) {\n        return str;\n    }\n    const elem = document.createElement('textarea');\n    elem.innerHTML = str;\n    return elem.value;\n}\nexports.unescapeHTML = unescapeHTML;\n/**\n * Make HTML element from string\n * @param {string} str - The string to convert to an HTML element.\n * @param {string} selector - The selector to use to get the element once it is created.\n * @returns {HTMLElement} - The HTML element that was created.\n */\nfunction convertStringToHTMLElement(str, selector) {\n    const doc = new window.DOMParser().parseFromString(str, 'text/html');\n    return doc.body.querySelector(selector);\n}\nexports.convertStringToHTMLElement = convertStringToHTMLElement;\n/**\n * Make a filename guaranteed to be unique.\n * @param {string} name - The original name of the file.\n * @param {string} template - The template to use for the unique name.\n * @param {object} evalContext - The context to use for the evaluation.\n * @returns {string} - A unique filename.\n */\nfunction uniqueName(name, template, evalContext) {\n    template = template || '{{fileName}}-{{guid}}';\n    //include guid in template anyway, to prevent overwriting issue if filename matches existing file\n    if (!template.includes('{{guid}}')) {\n        template = `${template}-{{guid}}`;\n    }\n    const parts = name.split('.');\n    let fileName = parts.slice(0, parts.length - 1).join('.');\n    const extension = parts.length > 1\n        ? `.${lodash_1.default.last(parts)}`\n        : '';\n    //allow only 100 characters from original name to avoid issues with filename length restrictions\n    fileName = fileName.substr(0, 100);\n    evalContext = Object.assign(evalContext || {}, {\n        fileName,\n        guid: guid()\n    });\n    //only letters, numbers, dots, dashes, underscores and spaces are allowed. Anything else will be replaced with dash\n    const uniqueName = `${Evaluator_1.Evaluator.interpolate(template, evalContext)}${extension}`.replace(/[^0-9a-zA-Z.\\-_ ]/g, '-');\n    return uniqueName;\n}\nexports.uniqueName = uniqueName;\n/**\n * Returns a GUID\n * @returns {string} - A GUID.\n */\nfunction guid() {\n    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {\n        const r = Math.random() * 16 | 0;\n        const v = c === 'x'\n            ? r\n            : (r & 0x3 | 0x8);\n        return v.toString(16);\n    });\n}\nexports.guid = guid;\n/**\n * Return a translated date setting.\n * @param {string|Date} date - The date to translate.\n * @returns {(null|Date)} - The translated date.\n */\nfunction getDateSetting(date) {\n    if (lodash_1.default.isNil(date) || lodash_1.default.isNaN(date) || date === '') {\n        return null;\n    }\n    if (date instanceof Date) {\n        return date;\n    }\n    else if (typeof date.toDate === 'function') {\n        return date.isValid() ? date.toDate() : null;\n    }\n    let dateSetting = ((typeof date !== 'string') || (date.indexOf('moment(') === -1)) ? (0, moment_timezone_1.default)(date) : null;\n    if (dateSetting && dateSetting.isValid()) {\n        return dateSetting.toDate();\n    }\n    dateSetting = null;\n    try {\n        const value = Evaluator_1.Evaluator.evaluator(`return ${date};`, 'moment')(moment_timezone_1.default);\n        if (typeof value === 'string') {\n            dateSetting = (0, moment_timezone_1.default)(value);\n        }\n        else if (typeof value.toDate === 'function') {\n            dateSetting = (0, moment_timezone_1.default)(value.toDate().toUTCString());\n        }\n        else if (value instanceof Date) {\n            dateSetting = (0, moment_timezone_1.default)(value);\n        }\n    }\n    catch (e) {\n        return null;\n    }\n    if (!dateSetting) {\n        return null;\n    }\n    // Ensure this is a date.\n    if (!dateSetting.isValid()) {\n        return null;\n    }\n    return dateSetting.toDate();\n}\nexports.getDateSetting = getDateSetting;\n/**\n * Returns true if the date is a valid date. False otherwise.\n * @param {Date|string} date - The date to check for validity.\n * @returns {boolean} - TRUE if the date is valid; FALSE otherwise.\n */\nfunction isValidDate(date) {\n    return lodash_1.default.isDate(date) && !lodash_1.default.isNaN(date.getDate());\n}\nexports.isValidDate = isValidDate;\n/**\n * Get the current timezone string.\n * @returns {string} - The current timezone.\n */\nfunction currentTimezone() {\n    if (moment_timezone_1.default.currentTimezone) {\n        return moment_timezone_1.default.currentTimezone;\n    }\n    moment_timezone_1.default.currentTimezone = jstimezonedetect_1.default.determine().name();\n    return moment_timezone_1.default.currentTimezone;\n}\nexports.currentTimezone = currentTimezone;\n/**\n * Get an offset date provided a date object and timezone object.\n * @param {Date} date - The date to offset.\n * @param {string} timezone - The timezone to offset the date to.\n * @returns {Date} - The offset date.\n */\nfunction offsetDate(date, timezone) {\n    if (timezone === 'UTC') {\n        return {\n            date: new Date(date.getTime() + (date.getTimezoneOffset() * 60000)),\n            abbr: 'UTC'\n        };\n    }\n    const dateMoment = (0, moment_timezone_1.default)(date).tz(timezone);\n    return {\n        date: new Date(date.getTime() + ((dateMoment.utcOffset() + date.getTimezoneOffset()) * 60000)),\n        abbr: dateMoment.format('z')\n    };\n}\nexports.offsetDate = offsetDate;\n/**\n * Returns if the zones are loaded.\n * @returns {boolean} - TRUE if the zones are loaded; FALSE otherwise.\n */\nfunction zonesLoaded() {\n    return moment_timezone_1.default.zonesLoaded;\n}\nexports.zonesLoaded = zonesLoaded;\n/**\n * Returns if we should load the zones.\n * @param {string} timezone - The timezone to check if we should load the zones.\n * @returns {boolean} - TRUE if we should load the zones; FALSE otherwise.\n */\nfunction shouldLoadZones(timezone) {\n    if (timezone === currentTimezone() || timezone === 'UTC') {\n        return false;\n    }\n    return true;\n}\nexports.shouldLoadZones = shouldLoadZones;\n/**\n * Externally load the timezone data.\n * @param {string} url - The URL to load the timezone data from.\n * @param {string} timezone - The timezone to load.\n * @returns {Promise<any> | *} - Resolves when the zones for this timezone are loaded.\n */\nfunction loadZones(url, timezone) {\n    if (timezone && !shouldLoadZones(timezone)) {\n        // Return non-resolving promise.\n        return new Promise(lodash_1.default.noop);\n    }\n    if (moment_timezone_1.default.zonesPromise) {\n        return moment_timezone_1.default.zonesPromise;\n    }\n    return moment_timezone_1.default.zonesPromise = fetch(url)\n        .then(resp => resp.json().then(zones => {\n        moment_timezone_1.default.tz.load(zones);\n        moment_timezone_1.default.zonesLoaded = true;\n        // Trigger a global event that the timezones have finished loading.\n        if (document && document.createEvent && document.body && document.body.dispatchEvent) {\n            var event = document.createEvent('Event');\n            event.initEvent('zonesLoaded', true, true);\n            document.body.dispatchEvent(event);\n        }\n    }));\n}\nexports.loadZones = loadZones;\n/**\n * Get the moment date object for translating dates with timezones.\n * @param {string|Date} value - The value to convert into a moment date.\n * @param {string} format - The format to convert the date to.\n * @param {string} timezone - The timezone to convert the date to.\n * @param {object} options - The options object\n * @returns {Date} - The moment date object.\n */\nfunction momentDate(value, format, timezone, options) {\n    const momentDate = (0, moment_timezone_1.default)(value);\n    if (!timezone) {\n        return momentDate;\n    }\n    if (timezone === 'UTC') {\n        timezone = 'Etc/UTC';\n    }\n    if ((timezone !== currentTimezone() || (format && format.match(/\\s(z$|z\\s)/))) && (moment_timezone_1.default.zonesLoaded || (options === null || options === void 0 ? void 0 : options.email))) {\n        return momentDate.tz(timezone);\n    }\n    return momentDate;\n}\nexports.momentDate = momentDate;\n/**\n * Format a date provided a value, format, and timezone object.\n * @param {string} timezonesUrl - The URL to load the timezone data from.\n * @param {string|Date} value - The value to format.\n * @param {string} format - The format to format the date to.\n * @param {string} timezone - The timezone to format the date to.\n * @param {string} flatPickrInputFormat - The format to use for flatpickr input.\n * @returns {string} - The formatted date.\n */\nfunction formatDate(timezonesUrl, value, format, timezone, flatPickrInputFormat) {\n    const momentDate = (0, moment_timezone_1.default)(value, flatPickrInputFormat || undefined);\n    if (timezone === currentTimezone()) {\n        // See if our format contains a \"z\" timezone character.\n        if (format.match(/\\s(z$|z\\s)/)) {\n            loadZones(timezonesUrl);\n            if (moment_timezone_1.default.zonesLoaded) {\n                return momentDate.tz(timezone).format(convertFormatToMoment(format));\n            }\n            else {\n                return momentDate.format(convertFormatToMoment(format.replace(/\\s(z$|z\\s)/, '')));\n            }\n        }\n        // Return the standard format.\n        return momentDate.format(convertFormatToMoment(format));\n    }\n    if (timezone === 'UTC') {\n        const offset = offsetDate(momentDate.toDate(), 'UTC');\n        return `${(0, moment_timezone_1.default)(offset.date).format(convertFormatToMoment(format))} UTC`;\n    }\n    // Load the zones since we need timezone information.\n    loadZones(timezonesUrl);\n    if (moment_timezone_1.default.zonesLoaded && timezone) {\n        return momentDate.tz(timezone).format(`${convertFormatToMoment(format)} z`);\n    }\n    else {\n        return momentDate.format(convertFormatToMoment(format));\n    }\n}\nexports.formatDate = formatDate;\n/**\n * Pass a format function to format within a timezone.\n * @param {string} timezonesUrl - The URL to load the timezone data from.\n * @param {Function} formatFn - The format function to use.\n * @param {Date|string} date - The date to format.\n * @param {string} format - The format to format the date to.\n * @param {string} timezone - The timezone to format the date to.\n * @returns {string} - The formatted date.\n */\nfunction formatOffset(timezonesUrl, formatFn, date, format, timezone) {\n    if (timezone === currentTimezone()) {\n        return formatFn(date, format);\n    }\n    if (timezone === 'UTC') {\n        return `${formatFn(offsetDate(date, 'UTC').date, format)} UTC`;\n    }\n    // Load the zones since we need timezone information.\n    loadZones(timezonesUrl);\n    if (moment_timezone_1.default.zonesLoaded) {\n        const offset = offsetDate(date, timezone);\n        return `${formatFn(offset.date, format)} ${offset.abbr}`;\n    }\n    else {\n        return formatFn(date, format);\n    }\n}\nexports.formatOffset = formatOffset;\n/**\n * Returns the local date format information.\n * @param {Intl.LocalesArgument} locale - The locale to get the date format for.\n * @returns {object} - The local date format information.\n */\nfunction getLocaleDateFormatInfo(locale) {\n    const formatInfo = {};\n    const day = 21;\n    const exampleDate = new Date(2017, 11, day);\n    const localDateString = exampleDate.toLocaleDateString(locale);\n    formatInfo.dayFirst = localDateString.slice(0, 2) === day.toString();\n    return formatInfo;\n}\nexports.getLocaleDateFormatInfo = getLocaleDateFormatInfo;\n/**\n * Convert the format from the angular-datepicker module to flatpickr format.\n * @param {string} format - The format to convert.\n * @returns {string} - The converted format.\n */\nfunction convertFormatToFlatpickr(format) {\n    return format\n        // Remove the Z timezone offset, not supported by flatpickr.\n        .replace(/Z/g, '')\n        // Year conversion.\n        .replace(/y/g, 'Y')\n        .replace('YYYY', 'Y')\n        .replace('YY', 'y')\n        // Month conversion.\n        .replace('MMMM', 'F')\n        .replace(/M/g, 'n')\n        .replace('nnn', 'M')\n        .replace('nn', 'm')\n        // Day in month.\n        .replace(/d/g, 'j')\n        .replace(/jj/g, 'd')\n        // Day in week.\n        .replace('EEEE', 'l')\n        .replace('EEE', 'D')\n        // Hours, minutes, seconds\n        .replace('HH', 'H')\n        .replace('hh', 'G')\n        .replace('mm', 'i')\n        .replace('ss', 'S')\n        .replace(/a/g, 'K');\n}\nexports.convertFormatToFlatpickr = convertFormatToFlatpickr;\n/**\n * Convert the format from the angular-datepicker module to moment format.\n * @param {string} format - The format to convert.\n * @returns {string} - The converted format.\n */\nfunction convertFormatToMoment(format) {\n    return format\n        // Year conversion.\n        .replace(/y/g, 'Y')\n        // Day in month.\n        .replace(/d/g, 'D')\n        // Day in week.\n        .replace(/E/g, 'd')\n        // AM/PM marker\n        .replace(/a/g, 'A')\n        // Unix Timestamp\n        .replace(/U/g, 'X');\n}\nexports.convertFormatToMoment = convertFormatToMoment;\n/**\n * Convert the format from the angular-datepicker module to mask format.\n * @param {string} format - The format to convert.\n * @returns {string} - The converted format.\n */\nfunction convertFormatToMask(format) {\n    return format\n        // Long month replacement.\n        .replace(/M{4}/g, 'MM')\n        // Initial short month conversion.\n        .replace(/M{3}/g, '***')\n        // Short month conversion if input as text.\n        .replace(/e/g, 'Q')\n        // Month number conversion.\n        .replace(/W/g, '99')\n        // Year conversion.\n        .replace(/[ydhmswHMG]/g, '9')\n        // AM/PM conversion.\n        .replace(/a/g, 'AA');\n}\nexports.convertFormatToMask = convertFormatToMask;\n/**\n * Returns an input mask that is compatible with the input mask library.\n * @param {string} mask - The Form.io input mask.\n * @param {string} placeholderChar - Char which is used as a placeholder.\n * @returns {Array} - The input mask for the mask library.\n */\nfunction getInputMask(mask, placeholderChar) {\n    if (mask instanceof Array) {\n        return mask;\n    }\n    const maskArray = [];\n    maskArray.numeric = true;\n    for (let i = 0; i < mask.length; i++) {\n        switch (mask[i]) {\n            case '9':\n                maskArray.push(/\\d/);\n                break;\n            case 'A':\n                maskArray.numeric = false;\n                maskArray.push(/[a-zA-Z]/);\n                break;\n            case 'a':\n                maskArray.numeric = false;\n                maskArray.push(/[a-z]/);\n                break;\n            case '*':\n                maskArray.numeric = false;\n                maskArray.push(/[a-zA-Z0-9]/);\n                break;\n            // If char which is used inside mask placeholder was used in the mask, replace it with space to prevent errors\n            case placeholderChar:\n                maskArray.numeric = false;\n                maskArray.push(' ');\n                break;\n            default:\n                maskArray.numeric = false;\n                maskArray.push(mask[i]);\n                break;\n        }\n    }\n    return maskArray;\n}\nexports.getInputMask = getInputMask;\n/**\n * Unmasks a value using the provided mask and placeholder characters.\n * @param {string} value - The value to unmask.\n * @param {string} mask - The mask to use for unmasking.\n * @param {string} placeholderChar - The placeholder character to use for unmasking.\n * @returns {string} - The unmasked value.\n */\nfunction unmaskValue(value, mask, placeholderChar) {\n    if (!mask || !value || value.length > mask.length) {\n        return value;\n    }\n    let unmaskedValue = value.split('');\n    for (let i = 0; i < mask.length; i++) {\n        const char = value[i] || '';\n        const charPart = mask[i];\n        if (!lodash_1.default.isRegExp(charPart) && char === charPart) {\n            unmaskedValue[i] = '';\n        }\n    }\n    unmaskedValue = unmaskedValue.join('').replace(placeholderChar, '');\n    return unmaskedValue;\n}\nexports.unmaskValue = unmaskValue;\n/**\n * Returns true if the value matches the input mask format.\n * @param {string} value - The value to check.\n * @param {string} inputMask - The input mask to check against.\n * @returns {boolean} - TRUE if the value matches the input mask; FALSE otherwise.\n */\nfunction matchInputMask(value, inputMask) {\n    if (!inputMask) {\n        return true;\n    }\n    // If value is longer than mask, it isn't valid.\n    if (value.length > inputMask.length) {\n        return false;\n    }\n    for (let i = 0; i < inputMask.length; i++) {\n        const char = value[i] || '';\n        const charPart = inputMask[i];\n        if (!(lodash_1.default.isRegExp(charPart) && charPart.test(char) || charPart === char)) {\n            return false;\n        }\n    }\n    return true;\n}\nexports.matchInputMask = matchInputMask;\n/**\n * Returns the number separators (i.e. 1,000) for the provided language.\n * @param {string} lang - The language code to get the number separators for.\n * @returns {{delimiter: string, decimalSeparator: string}} - The number separators.\n */\nfunction getNumberSeparators(lang = 'en') {\n    const formattedNumberString = (12345.6789).toLocaleString(lang);\n    const delimeters = formattedNumberString.match(/..(.)...(.)../);\n    if (!delimeters) {\n        return {\n            delimiter: ',',\n            decimalSeparator: '.'\n        };\n    }\n    return {\n        delimiter: (delimeters.length > 1) ? delimeters[1] : ',',\n        decimalSeparator: (delimeters.length > 2) ? delimeters[2] : '.',\n    };\n}\nexports.getNumberSeparators = getNumberSeparators;\n/**\n * Returns the number for the maximum amount of decimal places for a number.\n * @param {import('@formio/core').Component} component - The component to check for decimal limits.\n * @param {number} defaultLimit - The default limit to use if none is provided in the component.\n * @returns {number} - The number of decimal places allowed.\n */\nfunction getNumberDecimalLimit(component, defaultLimit) {\n    if (lodash_1.default.has(component, 'decimalLimit')) {\n        return lodash_1.default.get(component, 'decimalLimit');\n    }\n    // Determine the decimal limit. Defaults to 20 but can be overridden by validate.step or decimalLimit settings.\n    let decimalLimit = defaultLimit || 20;\n    const step = lodash_1.default.get(component, 'validate.step', 'any');\n    if (step !== 'any') {\n        const parts = step.toString().split('.');\n        if (parts.length > 1) {\n            decimalLimit = parts[1].length;\n        }\n    }\n    return decimalLimit;\n}\nexports.getNumberDecimalLimit = getNumberDecimalLimit;\n/**\n * Returns the currency affixes for a specific language.\n * @param {object} arg0 - The arguments object.\n * @param {string} arg0.currency - The currency code to get the affixes for.\n * @param {number} arg0.decimalLimit - The number of decimal places to use.\n * @param {string} arg0.decimalSeparator - The decimal separator to use.\n * @param {string} arg0.lang - The language code to use.\n * @returns {{prefix: string, suffix: string}} - The currency affixes.\n */\nfunction getCurrencyAffixes({ currency, decimalLimit, decimalSeparator, lang, }) {\n    // Get the prefix and suffix from the localized string.\n    let regex = `(.*)?${(100).toLocaleString(lang)}`;\n    if (decimalLimit) {\n        regex += `${decimalSeparator === '.' ? '\\\\.' : decimalSeparator}${(0).toLocaleString(lang)}{${decimalLimit}}`;\n    }\n    regex += '(.*)?';\n    const parts = (100).toLocaleString(lang, {\n        style: 'currency',\n        currency: currency ? currency : 'USD',\n        useGrouping: true,\n        maximumFractionDigits: decimalLimit || 0,\n        minimumFractionDigits: decimalLimit || 0\n    }).replace('.', decimalSeparator).match(new RegExp(regex));\n    return {\n        prefix: (parts === null || parts === void 0 ? void 0 : parts[1]) || '',\n        suffix: (parts === null || parts === void 0 ? void 0 : parts[2]) || ''\n    };\n}\nexports.getCurrencyAffixes = getCurrencyAffixes;\n/**\n * Fetch the field data provided a component.\n * @param {import('@formio/core').DataObject} data - The data object to fetch the field data from.\n * @param {import('@formio/core').Component} component - The component to fetch the field data for.\n * @returns {*} - The field data.\n */\nfunction fieldData(data, component) {\n    if (!data) {\n        return '';\n    }\n    if (!component || !component.key) {\n        return data;\n    }\n    if (component.key.includes('.')) {\n        let value = data;\n        const parts = component.key.split('.');\n        let key = '';\n        for (let i = 0; i < parts.length; i++) {\n            key = parts[i];\n            // Handle nested resources\n            if (value.hasOwnProperty('_id')) {\n                value = value.data;\n            }\n            // Return if the key is not found on the value.\n            if (!value.hasOwnProperty(key)) {\n                return;\n            }\n            // Convert old single field data in submissions to multiple\n            if (key === parts[parts.length - 1] && component.multiple && !Array.isArray(value[key])) {\n                value[key] = [value[key]];\n            }\n            // Set the value of this key.\n            value = value[key];\n        }\n        return value;\n    }\n    else {\n        // Convert old single field data in submissions to multiple\n        if (component.multiple && !Array.isArray(data[component.key])) {\n            data[component.key] = [data[component.key]];\n        }\n        // Fix for checkbox type radio submission values in tableView\n        if (component.type === 'checkbox' && component.inputType === 'radio') {\n            return data[component.name] === component.value;\n        }\n        return data[component.key];\n    }\n}\nexports.fieldData = fieldData;\n/**\n * Delays function execution with possibility to execute function synchronously or cancel it.\n * @param {Function} fn - Function to delay\n * @param {number} delay - Delay time\n * @param {...any} args - Arguments to pass to the function\n * @returns {*} - Function to cancel the delay\n */\nfunction delay(fn, delay = 0, ...args) {\n    const timer = setTimeout(fn, delay, ...args);\n    /**\n     *\n     */\n    function cancel() {\n        clearTimeout(timer);\n    }\n    /**\n     * Execute the function early.\n     * @returns {*} - The result of the function.\n     */\n    function earlyCall() {\n        cancel();\n        return fn(...args);\n    }\n    earlyCall.timer = timer;\n    earlyCall.cancel = cancel;\n    return earlyCall;\n}\nexports.delay = delay;\n/**\n * Iterate the given key to make it unique.\n * @param {string} key\n *   Modify the component key to be unique.\n * @returns {string}\n *   The new component key.\n */\nfunction iterateKey(key) {\n    if (!key.match(/(\\d+)$/)) {\n        return `${key}1`;\n    }\n    return key.replace(/(\\d+)$/, function (suffix) {\n        return Number(suffix) + 1;\n    });\n}\nexports.iterateKey = iterateKey;\n/**\n * Determines a unique key within a map provided the base key.\n * @param {Record<string, string>} map - The map to check for uniqueness.\n * @param {string} base - The base path of the key.\n * @returns {string} - The unique key.\n */\nfunction uniqueKey(map, base) {\n    let newKey = base;\n    while (map.hasOwnProperty(newKey)) {\n        newKey = iterateKey(newKey);\n    }\n    return newKey;\n}\nexports.uniqueKey = uniqueKey;\n/**\n * Determines the major version number of bootstrap.\n * @param {object} options - The options to check for bootstrap version.\n * @param {string} options.bootstrap - The bootstrap version to use.\n * @returns {number} - The bootstrap version.\n */\nfunction bootstrapVersion(options) {\n    if (options.bootstrap) {\n        return options.bootstrap;\n    }\n    if ((typeof jQuery === 'function') && (typeof jQuery().collapse === 'function')) {\n        return parseInt(jQuery.fn.collapse.Constructor.VERSION.split('.')[0], 10);\n    }\n    if (window.bootstrap && window.bootstrap.Collapse) {\n        return parseInt(window.bootstrap.Collapse.VERSION.split('.')[0], 10);\n    }\n    return 0;\n}\nexports.bootstrapVersion = bootstrapVersion;\n/**\n * Retrun provided argument.\n * If argument is a function, returns the result of a function call.\n * @param {Function|any} e - The argument to check if a function and call if so.\n * @returns {any} - Either the result of the function call (e) or e if it is not a function.\n */\nfunction unfold(e) {\n    if (typeof e === 'function') {\n        return e();\n    }\n    return e;\n}\nexports.unfold = unfold;\n/**\n * Map values through unfold and return first non-nil value.\n * @param {Array<T>} collection - The collection to map through unfold.;\n * @returns {T} - The first non-nil value.\n */\nexports.firstNonNil = lodash_1.default.flow([\n    lodash_1.default.partialRight(lodash_1.default.map, unfold),\n    lodash_1.default.partialRight(lodash_1.default.find, v => !lodash_1.default.isUndefined(v))\n]);\n/**\n * Create enclosed state. Returns functions to getting and cycling between states.\n * @param {*} a - initial state.\n * @param {*} b - next state.\n * @returns {Functions[]} -- [get, toggle];\n */\nfunction withSwitch(a, b) {\n    let state = a;\n    let next = b;\n    /**\n     * Returns the state of the switch.\n     * @returns {*} - The current state.\n     */\n    function get() {\n        return state;\n    }\n    /**\n     * Toggles the state of the switch.\n     */\n    function toggle() {\n        const prev = state;\n        state = next;\n        next = prev;\n    }\n    return [get, toggle];\n}\nexports.withSwitch = withSwitch;\n/**\n * Create a function that will call the provided function only the provided limit.\n * @param {Function} callback - The callback to call.\n * @param {object} options - The options to use.\n * @param {number} options.limit - The limit to call the callback.\n * @param {number} options.delay - The delay to wait before resetting the call count.\n * @returns {Function} - The function that will call the callback only the provided limit.\n */\nfunction observeOverload(callback, options = {}) {\n    const { limit = 50, delay = 500 } = options;\n    let callCount = 0;\n    let timeoutID = 0;\n    const reset = () => callCount = 0;\n    return () => {\n        if (timeoutID !== 0) {\n            clearTimeout(timeoutID);\n            timeoutID = 0;\n        }\n        timeoutID = setTimeout(reset, delay);\n        callCount += 1;\n        if (callCount >= limit) {\n            clearTimeout(timeoutID);\n            reset();\n            return callback();\n        }\n    };\n}\nexports.observeOverload = observeOverload;\n/**\n * Returns the components that are provided within an evaluation context.\n * @param {any} context - The evaluation context to get the components from.\n * @param {boolean} excludeNested - Exclude nested components.\n * @param {Array<string>} excludedTypes - The types of components to exclude.\n * @returns {Array} - The components within the evaluation context.\n */\nfunction getContextComponents(context, excludeNested, excludedTypes = []) {\n    const values = [];\n    context.utils.eachComponent(context.instance.options.editForm.components, (component, path) => {\n        const addToContextComponents = excludeNested ? !component.tree : true;\n        if (component.key !== context.data.key && addToContextComponents && !lodash_1.default.includes(excludedTypes, component.type)) {\n            values.push({\n                label: `${component.label || component.key} (${path})`,\n                value: path,\n            });\n        }\n    });\n    return values;\n}\nexports.getContextComponents = getContextComponents;\n/**\n * Returns the button components that are within an evaluation context.\n * @param {any} context - The evaluation context to get the components from.\n * @returns {Array} - The button components within the evaluation context.\n */\nfunction getContextButtons(context) {\n    const values = [];\n    context.utils.eachComponent(context.instance.options.editForm.components, (component) => {\n        if (component.type === 'button') {\n            values.push({\n                label: `${component.key} (${component.label})`,\n                value: component.key,\n            });\n        }\n    });\n    return values;\n}\nexports.getContextButtons = getContextButtons;\n// Tags that could be in text, that should be ommited or handled in a special way\nconst inTextTags = ['#text', 'A', 'B', 'EM', 'I', 'SMALL', 'STRONG', 'SUB', 'SUP', 'INS', 'DEL', 'MARK', 'CODE'];\n/**\n * Helper function for 'translateHTMLTemplate'. Translates text value of the passed html element.\n * @param {HTMLElement} elem - The element to translate.\n * @param {Function} translate - The translation function.\n * @returns {string} - Translated element template.\n */\nfunction translateElemValue(elem, translate) {\n    if (!elem.innerText) {\n        return elem.innerHTML;\n    }\n    const elemValue = elem.innerText.replace(Evaluator_1.Evaluator.templateSettings.interpolate, '').replace(/\\s\\s+/g, ' ').trim();\n    const translatedValue = translate(elemValue);\n    if (elemValue !== translatedValue) {\n        const links = elem.innerHTML.match(/<a[^>]*>(.*?)<\\/a>/g);\n        if (links && links.length) {\n            if (links.length === 1 && links[0].length === elem.innerHTML.length) {\n                return elem.innerHTML.replace(elemValue, translatedValue);\n            }\n            const translatedLinks = links.map(link => {\n                const linkElem = document.createElement('a');\n                linkElem.innerHTML = link;\n                return translateElemValue(linkElem, translate);\n            });\n            return `${translatedValue} (${translatedLinks.join(', ')})`;\n        }\n        else {\n            return elem.innerText.replace(elemValue, translatedValue);\n        }\n    }\n    else {\n        return elem.innerHTML;\n    }\n}\n/**\n * Helper function for 'translateHTMLTemplate'. Goes deep through html tag children and calls function to translate their text values.\n * @param {HTMLElement} tag - The tag to translate.\n * @param {Function} translate - The translation function.\n * @returns {void}\n */\nfunction translateDeepTag(tag, translate) {\n    const children = tag.children.length && [...tag.children];\n    const shouldTranslateEntireContent = children && children.every(child => child.children.length === 0\n        && inTextTags.some(tag => child.nodeName === tag));\n    if (!children || shouldTranslateEntireContent) {\n        tag.innerHTML = translateElemValue(tag, translate);\n    }\n    else {\n        children.forEach(child => translateDeepTag(child, translate));\n    }\n}\n/**\n * Translates text values in html template.\n * @param {string} template - The template to translate.\n * @param {Function} translate - The translation function.\n * @returns {string} - Html template with translated values.\n */\nfunction translateHTMLTemplate(template, translate) {\n    const isHTML = /<[^>]*>/.test(template);\n    if (!isHTML) {\n        return translate(template);\n    }\n    const tempElem = document.createElement('div');\n    tempElem.innerHTML = template;\n    if (tempElem.innerText && tempElem.children.length) {\n        translateDeepTag(tempElem, translate);\n        return tempElem.innerHTML;\n    }\n    return template;\n}\nexports.translateHTMLTemplate = translateHTMLTemplate;\n/**\n * Sanitize an html string.\n * @param {string} string - The string to sanitize.\n * @param {any} options - The options to use for sanitization.\n * @returns {string} - The sanitized html string.\n */\nfunction sanitize(string, options) {\n    if (typeof dompurify_1.default.sanitize !== 'function') {\n        return string;\n    }\n    // Dompurify configuration\n    const sanitizeOptions = {\n        ADD_ATTR: ['ref', 'target'],\n        USE_PROFILES: { html: true }\n    };\n    // Use profiles\n    if (options.sanitizeConfig && options.sanitizeConfig.useProfiles) {\n        Object.keys(options.sanitizeConfig.useProfiles).forEach(key => {\n            sanitizeOptions.USE_PROFILES[key] = options.sanitizeConfig.useProfiles[key];\n        });\n    }\n    // Add attrs\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addAttr) && options.sanitizeConfig.addAttr.length > 0) {\n        options.sanitizeConfig.addAttr.forEach((attr) => {\n            sanitizeOptions.ADD_ATTR.push(attr);\n        });\n    }\n    // Add tags\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addTags) && options.sanitizeConfig.addTags.length > 0) {\n        sanitizeOptions.ADD_TAGS = options.sanitizeConfig.addTags;\n    }\n    // Allow tags\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.allowedTags) && options.sanitizeConfig.allowedTags.length > 0) {\n        sanitizeOptions.ALLOWED_TAGS = options.sanitizeConfig.allowedTags;\n    }\n    // Allow attributes\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.allowedAttrs) && options.sanitizeConfig.allowedAttrs.length > 0) {\n        sanitizeOptions.ALLOWED_ATTR = options.sanitizeConfig.allowedAttrs;\n    }\n    // Allowd URI Regex\n    if (options.sanitizeConfig && options.sanitizeConfig.allowedUriRegex) {\n        const allowedUriRegex = options.sanitizeConfig.allowedUriRegex;\n        sanitizeOptions.ALLOWED_URI_REGEXP = lodash_1.default.isString(allowedUriRegex) ? new RegExp(allowedUriRegex) : allowedUriRegex;\n    }\n    // Allow to extend the existing array of elements that are safe for URI-like values\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addUriSafeAttr) && options.sanitizeConfig.addUriSafeAttr.length > 0) {\n        sanitizeOptions.ADD_URI_SAFE_ATTR = options.sanitizeConfig.addUriSafeAttr;\n    }\n    return dompurify_1.default.sanitize(string, sanitizeOptions);\n}\nexports.sanitize = sanitize;\n/**\n * Fast cloneDeep for JSON objects only.\n * @param {any} obj - The object to perform a fast clone deep against.\n * @returns {any} - The cloned object.\n */\nfunction fastCloneDeep(obj) {\n    return obj ? JSON.parse(JSON.stringify(obj)) : obj;\n}\nexports.fastCloneDeep = fastCloneDeep;\n/**\n * Returns if the component is an input component.\n * @param {import('@formio/core').Component} componentJson - The JSON of a component.\n * @returns {bool} - TRUE if the component is an input component; FALSE otherwise.\n */\nfunction isInputComponent(componentJson) {\n    if (componentJson.input === false || componentJson.input === true) {\n        return componentJson.input;\n    }\n    switch (componentJson.type) {\n        case 'htmlelement':\n        case 'content':\n        case 'columns':\n        case 'fieldset':\n        case 'panel':\n        case 'table':\n        case 'tabs':\n        case 'well':\n        case 'button':\n            return false;\n        default:\n            return true;\n    }\n}\nexports.isInputComponent = isInputComponent;\n/**\n * Takes a component path, and returns a component path array.\n * @param {string} pathStr - The path string to convert to an array.\n * @returns {Arryay<number>} - The array of paths.\n */\nfunction getArrayFromComponentPath(pathStr) {\n    if (!pathStr || !lodash_1.default.isString(pathStr)) {\n        if (!lodash_1.default.isArray(pathStr)) {\n            return [pathStr];\n        }\n        return pathStr;\n    }\n    return pathStr.replace(/[[\\]]/g, '.')\n        .replace(/\\.\\./g, '.')\n        .replace(/(^\\.)|(\\.$)/g, '')\n        .split('.')\n        .map(part => lodash_1.default.defaultTo(lodash_1.default.toNumber(part), part));\n}\nexports.getArrayFromComponentPath = getArrayFromComponentPath;\n/**\n * Returns true if the component is a child of the parent.\n * @param {any} child - The child component to check.\n * @param {any} parent - The parent component to check.\n * @returns {boolean} - TRUE if the child is a child of the parent; FALSE otherwise.\n */\nfunction isChildOf(child, parent) {\n    while (child && child.parent) {\n        if (child.parent === parent) {\n            return true;\n        }\n        child = child.parent;\n    }\n    return false;\n}\nexports.isChildOf = isChildOf;\n/**\n * Takes an array of component path indexes, and returns a string version of that array.\n * @param {Array<number>} path - The path array to convert to a string.\n * @returns {string} - The string version of the path.\n */\nfunction getStringFromComponentPath(path) {\n    if (!lodash_1.default.isArray(path)) {\n        return path;\n    }\n    let strPath = '';\n    path.forEach((part, i) => {\n        if (lodash_1.default.isNumber(part)) {\n            strPath += `[${part}]`;\n        }\n        else {\n            strPath += i === 0 ? part : `.${part}`;\n        }\n    });\n    return strPath;\n}\nexports.getStringFromComponentPath = getStringFromComponentPath;\n/**\n * Takes a number and rounds it to the provided precision amount.\n * @param {number} number - The number to round.\n * @param {number} precision - The precision to round the number to.\n * @returns {string} - The rounded number.\n */\nfunction round(number, precision) {\n    if (lodash_1.default.isNumber(number)) {\n        return number.toFixed(precision);\n    }\n    return number.toString();\n}\nexports.round = round;\n/**\n * Check for Internet Explorer browser version\n * @returns {(number|null)} - The IE browser version or null if not IE\n */\nfunction getIEBrowserVersion() {\n    const { ie, version } = getBrowserInfo();\n    return ie ? version : null;\n}\nexports.getIEBrowserVersion = getIEBrowserVersion;\n/**\n * Get browser name and version (modified from 'jquery-browser-plugin')\n * @returns {object} -- {{browser name, version, isWebkit?}}\n * Possible browser names: chrome, safari, ie, edge, opera, mozilla, yabrowser\n */\nfunction getBrowserInfo() {\n    const browser = {};\n    if (typeof window === 'undefined') {\n        return browser;\n    }\n    const ua = window.navigator.userAgent.toLowerCase();\n    const match = /(edge|edg)\\/([\\w.]+)/.exec(ua) ||\n        /(opr)[/]([\\w.]+)/.exec(ua) ||\n        /(yabrowser)[ /]([\\w.]+)/.exec(ua) ||\n        /(chrome)[ /]([\\w.]+)/.exec(ua) ||\n        /(iemobile)[/]([\\w.]+)/.exec(ua) ||\n        /(version)(applewebkit)[ /]([\\w.]+).*(safari)[ /]([\\w.]+)/.exec(ua) ||\n        /(webkit)[ /]([\\w.]+).*(version)[ /]([\\w.]+).*(safari)[ /]([\\w.]+)/.exec(ua) ||\n        /(webkit)[ /]([\\w.]+)/.exec(ua) ||\n        /(opera)(?:.*version|)[ /]([\\w.]+)/.exec(ua) ||\n        /(msie) ([\\w.]+)/.exec(ua) ||\n        ua.indexOf('trident') >= 0 && /(rv)(?::| )([\\w.]+)/.exec(ua) ||\n        ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\\w.]+)|)/.exec(ua) ||\n        [];\n    const matched = {\n        browser: match[5] || match[3] || match[1] || '',\n        version: match[4] || match[2] || '0'\n    };\n    if (matched.browser) {\n        browser[matched.browser] = true;\n        browser.version = parseInt(matched.version, 10);\n    }\n    // Chrome, Opera 15+, Safari and Yandex.Browser are webkit based browsers\n    if (browser.chrome || browser.opr || browser.safari || browser.edg || browser.yabrowser) {\n        browser.isWebkit = true;\n    }\n    // IE11 has a new token so we will assign it ie to avoid breaking changes\n    if (browser.rv || browser.iemobile) {\n        browser.ie = true;\n    }\n    // Edge has a new token since it became webkit based\n    if (browser.edg) {\n        browser.edge = true;\n    }\n    // Opera 15+ are identified as opr\n    if (browser.opr) {\n        browser.opera = true;\n    }\n    return browser;\n}\nexports.getBrowserInfo = getBrowserInfo;\n/**\n * Takes a component path, which may include array indicies (i.e. [0][1]), and returns the compoennt path without the indicies.\n * @param {string} path - The path to remove the indicies from.\n * @returns {string} - The path without the indicies.\n */\nfunction getComponentPathWithoutIndicies(path = '') {\n    return path.replace(/\\[\\d+\\]/, '');\n}\nexports.getComponentPathWithoutIndicies = getComponentPathWithoutIndicies;\n/**\n * Returns a path to the component which based on its schema\n * @param {import('@formio/core').Component} component - Component containing link to its parent's schema in the 'parent' property\n * @returns {string} - Path to the component\n */\nfunction getComponentPath(component) {\n    return component.paths.localDataPath;\n}\nexports.getComponentPath = getComponentPath;\n/**\n * Returns a parent component of the passed component instance skipping all the Layout components\n * @param {Component} componentInstance - The component to check for the parent.\n * @returns {Component|undefined} - The parent data component.\n */\nfunction getDataParentComponent(componentInstance) {\n    if (!componentInstance) {\n        return;\n    }\n    const { parent } = componentInstance;\n    if (parent && (parent.isInputComponent || parent.input)) {\n        return parent;\n    }\n    else {\n        return getDataParentComponent(parent);\n    }\n}\nexports.getDataParentComponent = getDataParentComponent;\n/**\n * Returns whether the value is a promise\n * @param {any} value - The value to check\n * @returns {boolean} - TRUE if the value is a promise; FALSE otherwise\n */\nfunction isPromise(value) {\n    return value\n        && value.then\n        && typeof value.then === 'function'\n        && Object.prototype.toString.call(value) === '[object Promise]';\n}\nexports.isPromise = isPromise;\n/**\n * Returns all the focusable elements within the provided dom element.\n * @param {HTMLElement} element - The element to get the focusable elements from.\n * @returns {NodeList<HTMLElement>} - The focusable elements within the provided element.\n */\nfunction getFocusableElements(element) {\n    const focusableSelector = `button:not([disabled]), input:not([disabled]), select:not([disabled]),\n    textarea:not([disabled]), button:not([disabled]), [href]`;\n    return element.querySelectorAll(focusableSelector);\n}\nexports.getFocusableElements = getFocusableElements;\nexports.componentValueTypes = {\n    number: 'number',\n    string: 'string',\n    boolean: 'boolean',\n    array: 'array',\n    object: 'object',\n    date: 'date',\n    any: 'any',\n};\n/**\n * Returns the saved types for the component\n * @param {import('@formio/core').Component} fullSchema - The component schema\n * @returns {Array<string>|null} - The saved types for the component\n */\nfunction getComponentSavedTypes(fullSchema) {\n    const schema = fullSchema || {};\n    if (schema.persistent !== true) {\n        return [];\n    }\n    if (schema.multiple) {\n        return [exports.componentValueTypes.array];\n    }\n    return null;\n}\nexports.getComponentSavedTypes = getComponentSavedTypes;\n/**\n * Interpolates @formio/core errors so that they are compatible with the renderer\n * @param {Component} component - The component to interpolate the errors for\n * @param {FieldError[]} errors - The errors to interpolate\n * @param {Function} interpolateFn - The interpolation function\n * @returns {[]} - The interpolated errors\n */\nconst interpolateErrors = (component, errors, interpolateFn) => {\n    return errors.map((error) => {\n        error.component = component;\n        const { errorKeyOrMessage, context } = error;\n        const toInterpolate = component.errors && component.errors[errorKeyOrMessage] ? component.errors[errorKeyOrMessage] : errorKeyOrMessage;\n        return Object.assign(Object.assign({}, error), { message: unescapeHTML(interpolateFn(toInterpolate, context)), context: Object.assign({}, context) });\n    });\n};\nexports.interpolateErrors = interpolateErrors;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/utils/utils.js?");
 
 /***/ }),
 
@@ -6308,7 +6308,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\ncons
   \**************************************************************************************************/
 /***/ (function(__unused_webpack_module, exports) {
 
-eval("Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports[\"default\"]=function(ctx) {\nvar __t, __p = '', __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n__p += '<div class=\"builder-component\" ref=\"dragComponent\" tabindex=\"-1\">\\n  ';\n if (!ctx.disableBuilderActions) { ;\n__p += '\\n    <div class=\"component-btn-group\" data-noattach=\"true\">\\n      <div\\n        role=\"button\"\\n        aria-label=\"Remove button. Click to remove component from the form\"\\n        tabindex=\"-1\"\\n        class=\"btn btn-xxs btn-danger component-settings-button component-settings-button-remove\"\\n        ref=\"removeComponent\"\\n      >\\n        <i class=\"' +\n((__t = (ctx.iconClass('remove'))) == null ? '' : __t) +\n'\"></i>\\n      </div>\\n      ';\n if (!ctx.design) { ;\n__p += '\\n        <div\\n          role=\"button\"\\n          aria-label=\"Copy button. Click to copy component\"\\n          tabindex=\"-1\"\\n          class=\"btn btn-xxs btn-default component-settings-button component-settings-button-copy\"\\n          ref=\"copyComponent\"\\n        >\\n          <i class=\"' +\n((__t = (ctx.iconClass('copy'))) == null ? '' : __t) +\n'\"></i>\\n        </div>\\n        <div\\n          role=\"button\"\\n          aria-label=\"Paste below button. Click to paste component below the current component\"\\n          tabindex=\"-1\"\\n          class=\"btn btn-xxs btn-default component-settings-button component-settings-button-paste\"\\n          ref=\"pasteComponent\"\\n        >\\n          <i class=\"' +\n((__t = (ctx.iconClass('save'))) == null ? '' : __t) +\n'\"></i>\\n        </div>\\n        <div\\n          role=\"button\"\\n          aria-label=\"Edit json button. Click to edit json of the current component\"\\n          tabindex=\"-1\"\\n          class=\"btn btn-xxs btn-default component-settings-button component-settings-button-edit-json\" \\n          ref=\"editJson\"\\n        >\\n          <i class=\"' +\n((__t = (ctx.iconClass('wrench'))) == null ? '' : __t) +\n'\"></i>\\n        </div>\\n      ';\n } ;\n__p += '\\n      <div\\n        role=\"button\"\\n        aria-label=\"Move button\"\\n        tabindex=\"-1\"\\n        class=\"btn btn-xxs btn-default component-settings-button component-settings-button-move\"\\n        ref=\"moveComponent\"\\n      >\\n        <i class=\"' +\n((__t = (ctx.iconClass('move'))) == null ? '' : __t) +\n'\"></i>\\n      </div>\\n      ';\n if (!(ctx.design && ctx.childComponent.type === 'reviewpage')) { ;\n__p += '\\n        <div\\n          role=\"button\"\\n          aria-label=\"Edit button. Click to open component settings modal window\"\\n          tabindex=\"-1\"\\n          class=\"btn btn-xxs btn-secondary component-settings-button component-settings-button-edit\"\\n          ref=\"editComponent\"\\n        >\\n          <i class=\"' +\n((__t = (ctx.iconClass('cog'))) == null ? '' : __t) +\n'\"></i>\\n        </div>\\n      ';\n } ;\n__p += '\\n    </div>\\n  ';\n } ;\n__p += '\\n  ' +\n((__t = (ctx.html)) == null ? '' : __t) +\n'\\n</div>\\n';\nreturn __p\n}\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/bootstrap/lib/cjs/templates/bootstrap5/builderComponent/form.ejs.js?");
+eval("Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports[\"default\"]=function(ctx) {\nvar __t, __p = '', __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n__p += '<div class=\"builder-component\" ref=\"dragComponent\" tabindex=\"-1\">\\n  ';\n if (!ctx.disableBuilderActions) { ;\n__p += '\\n    <div class=\"component-btn-group\" data-noattach=\"true\">\\n      <div\\n        role=\"button\"\\n        aria-label=\"Remove button. Click to remove component from the form\"\\n        tabindex=\"-1\"\\n        class=\"btn btn-xxs btn-danger component-settings-button component-settings-button-remove\"\\n        ref=\"removeComponent\"\\n      >\\n        <i class=\"' +\n((__t = (ctx.iconClass('remove'))) == null ? '' : __t) +\n'\"></i>\\n      </div>\\n      ';\n if (!ctx.design) { ;\n__p += '\\n        <div\\n          role=\"button\"\\n          aria-label=\"Copy button. Click to copy component\"\\n          tabindex=\"-1\"\\n          class=\"btn btn-xxs btn-default component-settings-button component-settings-button-copy\"\\n          ref=\"copyComponent\"\\n        >\\n          <i class=\"' +\n((__t = (ctx.iconClass('copy'))) == null ? '' : __t) +\n'\"></i>\\n        </div>\\n        <div\\n          role=\"button\"\\n          aria-label=\"Paste below button. Click to paste component below the current component\"\\n          tabindex=\"-1\"\\n          class=\"btn btn-xxs btn-default component-settings-button component-settings-button-paste\"\\n          ref=\"pasteComponent\"\\n        >\\n          <i class=\"' +\n((__t = (ctx.iconClass('save'))) == null ? '' : __t) +\n'\"></i>\\n        </div>\\n        ';\n if (ctx.editJson !== false) { ;\n__p += '\\n          <div\\n            role=\"button\"\\n            aria-label=\"Edit json button. Click to edit json of the current component\"\\n            tabindex=\"-1\"\\n            class=\"btn btn-xxs btn-default component-settings-button component-settings-button-edit-json\" \\n            ref=\"editJson\"\\n          >\\n            <i class=\"' +\n((__t = (ctx.iconClass('wrench'))) == null ? '' : __t) +\n'\"></i>\\n          </div>\\n        ';\n } ;\n__p += '\\n      ';\n } ;\n__p += '\\n      <div\\n        role=\"button\"\\n        aria-label=\"Move button\"\\n        tabindex=\"-1\"\\n        class=\"btn btn-xxs btn-default component-settings-button component-settings-button-move\"\\n        ref=\"moveComponent\"\\n      >\\n        <i class=\"' +\n((__t = (ctx.iconClass('move'))) == null ? '' : __t) +\n'\"></i>\\n      </div>\\n      ';\n if (!(ctx.design && ctx.childComponent.type === 'reviewpage') && ctx.editComponent) { ;\n__p += '\\n        <div\\n          role=\"button\"\\n          aria-label=\"Edit button. Click to open component settings modal window\"\\n          tabindex=\"-1\"\\n          class=\"btn btn-xxs btn-secondary component-settings-button component-settings-button-edit\"\\n          ref=\"editComponent\"\\n        >\\n          <i class=\"' +\n((__t = (ctx.iconClass('cog'))) == null ? '' : __t) +\n'\"></i>\\n        </div>\\n      ';\n } ;\n__p += '\\n    </div>\\n  ';\n } ;\n__p += '\\n  ' +\n((__t = (ctx.html)) == null ? '' : __t) +\n'\\n</div>\\n';\nreturn __p\n}\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/bootstrap/lib/cjs/templates/bootstrap5/builderComponent/form.ejs.js?");
 
 /***/ }),
 
@@ -8916,7 +8916,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.1.0-rc.8';\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.1.0';\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?");
 
 /***/ }),
 
@@ -8927,7 +8927,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.1.0-rc.8';\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.1.0';\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?");
 
 /***/ }),