@formio/js 5.0.0-dev.5749.8f49547 → 5.0.0-dev.5754.c86e9f5

package/dist/formio.form.js

@@ -387,7 +387,7 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.jsonLogic = void 0;\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 date_1 = __webpack_require__(/*! ../../utils/date */ \"./node_modules/@formio/core/lib/utils/date.js\");\nconst operators_1 = __webpack_require__(/*! ./operators */ \"./node_modules/@formio/core/lib/modules/jsonlogic/operators.js\");\n// Configure JsonLogic\nfor (let operator in operators_1._) {\n    json_logic_js_1.default.add_operation(`_${operator}`, operators_1._[operator]);\n}\n// Retrieve Any Date\njson_logic_js_1.default.add_operation('getDate', (date) => {\n    return (0, date_1.dayjs)(date).toISOString();\n});\n// Set Relative Minimum Date\njson_logic_js_1.default.add_operation('relativeMinDate', (relativeMinDate) => {\n    return (0, date_1.dayjs)().subtract(relativeMinDate, 'days').toISOString();\n});\n// Set Relative Maximum Date\njson_logic_js_1.default.add_operation('relativeMaxDate', (relativeMaxDate) => {\n    return (0, date_1.dayjs)().add(relativeMaxDate, 'days').toISOString();\n});\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/modules/jsonlogic/jsonLogic.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.jsonLogic = void 0;\nconst json_logic_js_1 = __importDefault(__webpack_require__(/*! json-logic-js */ \"./node_modules/@formio/core/node_modules/json-logic-js/logic.js\"));\nexports.jsonLogic = json_logic_js_1.default;\nconst date_1 = __webpack_require__(/*! ../../utils/date */ \"./node_modules/@formio/core/lib/utils/date.js\");\nconst operators_1 = __webpack_require__(/*! ./operators */ \"./node_modules/@formio/core/lib/modules/jsonlogic/operators.js\");\n// Configure JsonLogic\nfor (let operator in operators_1._) {\n    json_logic_js_1.default.add_operation(`_${operator}`, operators_1._[operator]);\n}\n// Retrieve Any Date\njson_logic_js_1.default.add_operation('getDate', (date) => {\n    return (0, date_1.dayjs)(date).toISOString();\n});\n// Set Relative Minimum Date\njson_logic_js_1.default.add_operation('relativeMinDate', (relativeMinDate) => {\n    return (0, date_1.dayjs)().subtract(relativeMinDate, 'days').toISOString();\n});\n// Set Relative Maximum Date\njson_logic_js_1.default.add_operation('relativeMaxDate', (relativeMaxDate) => {\n    return (0, date_1.dayjs)().add(relativeMaxDate, 'days').toISOString();\n});\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/modules/jsonlogic/jsonLogic.js?");
 
 /***/ }),
 
@@ -1905,7 +1905,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.sanitize = void 0;\nconst dompurify_1 = __importDefault(__webpack_require__(/*! dompurify */ \"./node_modules/dompurify/dist/purify.js\"));\nlet DOMPurify = null;\nconst getDOMPurify = () => {\n    if (DOMPurify) {\n        return DOMPurify;\n    }\n    if (window) {\n        DOMPurify = (0, dompurify_1.default)(window);\n        return DOMPurify;\n    }\n    return null;\n};\n/**\n * Sanitize an html string.\n *\n * @param string\n * @returns {*}\n */\nfunction sanitize(string, options) {\n    const dompurify = getDOMPurify();\n    if (!dompurify) {\n        console.log('DOMPurify unable to sanitize the contents.');\n        return string;\n    }\n    // Dompurify configuration\n    const sanitizeOptions = {\n        ADD_ATTR: ['ref', 'target', 'within'],\n        USE_PROFILES: { html: true }\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        sanitizeOptions.ALLOWED_URI_REGEXP = options.sanitizeConfig.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.sanitize(string, sanitizeOptions);\n}\nexports.sanitize = sanitize;\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/utils/sanitize.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.sanitize = void 0;\nconst dompurify_1 = __importDefault(__webpack_require__(/*! dompurify */ \"./node_modules/@formio/core/node_modules/dompurify/dist/purify.js\"));\nlet DOMPurify = null;\nconst getDOMPurify = () => {\n    if (DOMPurify) {\n        return DOMPurify;\n    }\n    if (window) {\n        DOMPurify = (0, dompurify_1.default)(window);\n        return DOMPurify;\n    }\n    return null;\n};\n/**\n * Sanitize an html string.\n *\n * @param string\n * @returns {*}\n */\nfunction sanitize(string, options) {\n    const dompurify = getDOMPurify();\n    if (!dompurify) {\n        console.log('DOMPurify unable to sanitize the contents.');\n        return string;\n    }\n    // Dompurify configuration\n    const sanitizeOptions = {\n        ADD_ATTR: ['ref', 'target', 'within'],\n        USE_PROFILES: { html: true }\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        sanitizeOptions.ALLOWED_URI_REGEXP = options.sanitizeConfig.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.sanitize(string, sanitizeOptions);\n}\nexports.sanitize = sanitize;\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/utils/sanitize.js?");
 
 /***/ }),
 
@@ -1931,6 +1931,16 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 
 /***/ }),
 
+/***/ "./node_modules/@formio/core/node_modules/dompurify/dist/purify.js":
+/*!*************************************************************************!*\
+  !*** ./node_modules/@formio/core/node_modules/dompurify/dist/purify.js ***!
+  \*************************************************************************/
+/***/ (function(module) {
+
+eval("/*! @license DOMPurify 3.1.5 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.1.5/LICENSE */\n\n(function (global, factory) {\n   true ? module.exports = factory() :\n  0;\n})(this, (function () { 'use strict';\n\n  const {\n    entries,\n    setPrototypeOf,\n    isFrozen,\n    getPrototypeOf,\n    getOwnPropertyDescriptor\n  } = Object;\n  let {\n    freeze,\n    seal,\n    create\n  } = Object; // eslint-disable-line import/no-mutable-exports\n  let {\n    apply,\n    construct\n  } = typeof Reflect !== 'undefined' && Reflect;\n  if (!freeze) {\n    freeze = function freeze(x) {\n      return x;\n    };\n  }\n  if (!seal) {\n    seal = function seal(x) {\n      return x;\n    };\n  }\n  if (!apply) {\n    apply = function apply(fun, thisValue, args) {\n      return fun.apply(thisValue, args);\n    };\n  }\n  if (!construct) {\n    construct = function construct(Func, args) {\n      return new Func(...args);\n    };\n  }\n  const arrayForEach = unapply(Array.prototype.forEach);\n  const arrayPop = unapply(Array.prototype.pop);\n  const arrayPush = unapply(Array.prototype.push);\n  const stringToLowerCase = unapply(String.prototype.toLowerCase);\n  const stringToString = unapply(String.prototype.toString);\n  const stringMatch = unapply(String.prototype.match);\n  const stringReplace = unapply(String.prototype.replace);\n  const stringIndexOf = unapply(String.prototype.indexOf);\n  const stringTrim = unapply(String.prototype.trim);\n  const objectHasOwnProperty = unapply(Object.prototype.hasOwnProperty);\n  const regExpTest = unapply(RegExp.prototype.test);\n  const typeErrorCreate = unconstruct(TypeError);\n\n  /**\n   * Creates a new function that calls the given function with a specified thisArg and arguments.\n   *\n   * @param {Function} func - The function to be wrapped and called.\n   * @returns {Function} A new function that calls the given function with a specified thisArg and arguments.\n   */\n  function 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  /**\n   * Creates a new function that constructs an instance of the given constructor function with the provided arguments.\n   *\n   * @param {Function} func - The constructor function to be wrapped and called.\n   * @returns {Function} A new function that constructs an instance of the given constructor function with the provided arguments.\n   */\n  function 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  /**\n   * Add properties to a lookup table\n   *\n   * @param {Object} set - The set to which elements will be added.\n   * @param {Array} array - The array containing elements to be added to the set.\n   * @param {Function} transformCaseFunc - An optional function to transform the case of each element before adding to the set.\n   * @returns {Object} The modified set with added elements.\n   */\n  function 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  /**\n   * Clean up an array to harden against CSPP\n   *\n   * @param {Array} array - The array to be cleaned.\n   * @returns {Array} The cleaned version of the array\n   */\n  function 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  /**\n   * Shallow clone an object\n   *\n   * @param {Object} object - The object to be cloned.\n   * @returns {Object} A new object that copies the original.\n   */\n  function 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  /**\n   * This method automatically checks if the prop is function or getter and behaves accordingly.\n   *\n   * @param {Object} object - The object to look up the getter function in its prototype chain.\n   * @param {String} prop - The property name for which to find the getter function.\n   * @returns {Function} The getter function found in the prototype chain or a fallback function.\n   */\n  function 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\n  const 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']);\n\n  // SVG\n  const 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']);\n  const 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\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.\n  const 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']);\n  const 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\n  // Similarly to SVG, we want to know all MathML elements,\n  // even those that we disallow by default.\n  const mathMlDisallowed = freeze(['maction', 'maligngroup', 'malignmark', 'mlongdiv', 'mscarries', 'mscarry', 'msgroup', 'mstack', 'msline', 'msrow', 'semantics', 'annotation', 'annotation-xml', 'mprescripts', 'none']);\n  const text = freeze(['#text']);\n\n  const 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']);\n  const svg = freeze(['accent-height', 'accumulate', 'additive', 'alignment-baseline', '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', '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', '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', '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', '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']);\n  const 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']);\n  const xml = freeze(['xlink:href', 'xml:id', 'xlink:title', 'xml:space', 'xmlns:xlink']);\n\n  // eslint-disable-next-line unicorn/better-regex\n  const MUSTACHE_EXPR = seal(/\\{\\{[\\w\\W]*|[\\w\\W]*\\}\\}/gm); // Specify template detection regex for SAFE_FOR_TEMPLATES mode\n  const ERB_EXPR = seal(/<%[\\w\\W]*|[\\w\\W]*%>/gm);\n  const TMPLIT_EXPR = seal(/\\${[\\w\\W]*}/gm);\n  const DATA_ATTR = seal(/^data-[\\-\\w.\\u00B7-\\uFFFF]/); // eslint-disable-line no-useless-escape\n  const ARIA_ATTR = seal(/^aria-[\\-\\w]+$/); // eslint-disable-line no-useless-escape\n  const 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  );\n\n  const IS_SCRIPT_OR_DATA = seal(/^(?:\\w+script|data):/i);\n  const ATTR_WHITESPACE = seal(/[\\u0000-\\u0020\\u00A0\\u1680\\u180E\\u2000-\\u2029\\u205F\\u3000]/g // eslint-disable-line no-control-regex\n  );\n\n  const DOCTYPE_NAME = seal(/^html$/i);\n  const CUSTOM_ELEMENT = seal(/^[a-z][.\\w]*(-[.\\w]+)+$/i);\n\n  var EXPRESSIONS = /*#__PURE__*/Object.freeze({\n    __proto__: null,\n    MUSTACHE_EXPR: MUSTACHE_EXPR,\n    ERB_EXPR: ERB_EXPR,\n    TMPLIT_EXPR: TMPLIT_EXPR,\n    DATA_ATTR: DATA_ATTR,\n    ARIA_ATTR: ARIA_ATTR,\n    IS_ALLOWED_URI: IS_ALLOWED_URI,\n    IS_SCRIPT_OR_DATA: IS_SCRIPT_OR_DATA,\n    ATTR_WHITESPACE: ATTR_WHITESPACE,\n    DOCTYPE_NAME: DOCTYPE_NAME,\n    CUSTOM_ELEMENT: CUSTOM_ELEMENT\n  });\n\n  // https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType\n  const 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  };\n\n  const getGlobal = function getGlobal() {\n    return typeof window === 'undefined' ? null : window;\n  };\n\n  /**\n   * Creates a no-op policy for internal use only.\n   * Don't export this function outside this module!\n   * @param {TrustedTypePolicyFactory} trustedTypes The policy factory.\n   * @param {HTMLScriptElement} purifyHostElement The Script element used to load DOMPurify (to determine policy name suffix).\n   * @return {TrustedTypePolicy} The policy created (or null, if Trusted Types\n   * are not supported or creating the policy failed).\n   */\n  const _createTrustedTypesPolicy = function _createTrustedTypesPolicy(trustedTypes, purifyHostElement) {\n    if (typeof trustedTypes !== 'object' || typeof trustedTypes.createPolicy !== 'function') {\n      return null;\n    }\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  };\n  function createDOMPurify() {\n    let window = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getGlobal();\n    const DOMPurify = root => createDOMPurify(root);\n\n    /**\n     * Version label, exposed for easier checks\n     * if DOMPurify is up to date or not\n     */\n    DOMPurify.version = '3.1.5';\n\n    /**\n     * Array of elements that DOMPurify removed during sanitation.\n     * Empty if nothing was removed.\n     */\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 getNextSibling = lookupGetter(ElementPrototype, 'nextSibling');\n    const getChildNodes = lookupGetter(ElementPrototype, 'childNodes');\n    const getParentNode = lookupGetter(ElementPrototype, 'parentNode');\n\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 = {};\n\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    /**\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\n    /* allowed element names */\n    let ALLOWED_TAGS = null;\n    const DEFAULT_ALLOWED_TAGS = addToSet({}, [...html$1, ...svg$1, ...svgFilters, ...mathMl$1, ...text]);\n\n    /* Allowed attribute names */\n    let ALLOWED_ATTR = null;\n    const DEFAULT_ALLOWED_ATTR = addToSet({}, [...html, ...svg, ...mathMl, ...xml]);\n\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\n    /* Explicitly forbidden tags (overrides ALLOWED_TAGS/ADD_TAGS) */\n    let FORBID_TAGS = null;\n\n    /* Explicitly forbidden attributes (overrides ALLOWED_ATTR/ADD_ATTR) */\n    let FORBID_ATTR = null;\n\n    /* Decide if ARIA attributes are okay */\n    let ALLOW_ARIA_ATTR = true;\n\n    /* Decide if custom data attributes are okay */\n    let ALLOW_DATA_ATTR = true;\n\n    /* Decide if unknown protocols are okay */\n    let ALLOW_UNKNOWN_PROTOCOLS = false;\n\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\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\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\n    /* Decide if document with <html>... should be returned */\n    let WHOLE_DOCUMENT = false;\n\n    /* Track whether config is already set on this instance of DOMPurify. */\n    let SET_CONFIG = false;\n\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\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\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\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\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\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\n    /* Keep element content when removing element? */\n    let KEEP_CONTENT = true;\n\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\n    /* Allow usage of profiles like html, svg and mathMl */\n    let USE_PROFILES = {};\n\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\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\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\n    /* Allowed XHTML+XML namespaces */\n    let ALLOWED_NAMESPACES = null;\n    const DEFAULT_ALLOWED_NAMESPACES = addToSet({}, [MATHML_NAMESPACE, SVG_NAMESPACE, HTML_NAMESPACE], stringToString);\n\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\n    /* Keep a reference to config to pass to hooks */\n    let CONFIG = null;\n\n    /* Ideally, do not touch anything below this line */\n    /* ______________________________________________ */\n\n    const formElement = document.createElement('form');\n    const isRegexOrFunction = function isRegexOrFunction(testValue) {\n      return testValue instanceof RegExp || testValue instanceof Function;\n    };\n\n    /**\n     * _parseConfig\n     *\n     * @param  {Object} 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\n      /* Shield configuration object from tampering */\n      if (!cfg || typeof cfg !== 'object') {\n        cfg = {};\n      }\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\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\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),\n      // eslint-disable-line indent\n      cfg.ADD_URI_SAFE_ATTR,\n      // eslint-disable-line indent\n      transformCaseFunc // eslint-disable-line indent\n      ) // eslint-disable-line indent\n      : DEFAULT_URI_SAFE_ATTRIBUTES;\n      DATA_URI_TAGS = objectHasOwnProperty(cfg, 'ADD_DATA_URI_TAGS') ? addToSet(clone(DEFAULT_DATA_URI_TAGS),\n      // eslint-disable-line indent\n      cfg.ADD_DATA_URI_TAGS,\n      // eslint-disable-line indent\n      transformCaseFunc // eslint-disable-line indent\n      ) // eslint-disable-line indent\n      : 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      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\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\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\n      /* Add #text in case KEEP_CONTENT is set to true */\n      if (KEEP_CONTENT) {\n        ALLOWED_TAGS['#text'] = true;\n      }\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\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\n        // Overwrite existing TrustedTypes policy.\n        trustedTypesPolicy = cfg.TRUSTED_TYPES_POLICY;\n\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\n        // If creating the internal policy succeeded sign internal variables.\n        if (trustedTypesPolicy !== null && typeof emptyHTML === 'string') {\n          emptyHTML = trustedTypesPolicy.createHTML('');\n        }\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    const MATHML_TEXT_INTEGRATION_POINTS = addToSet({}, ['mi', 'mo', 'mn', 'ms', 'mtext']);\n    const HTML_INTEGRATION_POINTS = addToSet({}, ['foreignobject', 'annotation-xml']);\n\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\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    /**\n     * @param  {Element} element a DOM element whose namespace is being checked\n     * @returns {boolean} 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\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\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\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\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\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\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\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\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    /**\n     * _forceRemove\n     *\n     * @param  {Node} 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        node.parentNode.removeChild(node);\n      } catch (_) {\n        node.remove();\n      }\n    };\n\n    /**\n     * _removeAttribute\n     *\n     * @param  {String} name an Attribute name\n     * @param  {Node} node a DOM node\n     */\n    const _removeAttribute = function _removeAttribute(name, node) {\n      try {\n        arrayPush(DOMPurify.removed, {\n          attribute: node.getAttributeNode(name),\n          from: node\n        });\n      } catch (_) {\n        arrayPush(DOMPurify.removed, {\n          attribute: null,\n          from: node\n        });\n      }\n      node.removeAttribute(name);\n\n      // We void attribute values for unremovable \"is\"\" attributes\n      if (name === 'is' && !ALLOWED_ATTR[name]) {\n        if (RETURN_DOM || RETURN_DOM_FRAGMENT) {\n          try {\n            _forceRemove(node);\n          } catch (_) {}\n        } else {\n          try {\n            node.setAttribute(name, '');\n          } catch (_) {}\n        }\n      }\n    };\n\n    /**\n     * _initDocument\n     *\n     * @param  {String} dirty a string of dirty markup\n     * @return {Document} 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\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\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    /**\n     * Creates a NodeIterator object that you can use to traverse filtered lists of nodes or elements in a document.\n     *\n     * @param  {Node} root The root element or node to start traversing on.\n     * @return {NodeIterator} 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    /**\n     * _isClobbered\n     *\n     * @param  {Node} elm element to check for clobbering attacks\n     * @return {Boolean} true if clobbered, false if safe\n     */\n    const _isClobbered = function _isClobbered(elm) {\n      return elm instanceof HTMLFormElement && (typeof elm.nodeName !== 'string' || typeof elm.textContent !== 'string' || typeof elm.removeChild !== 'function' || !(elm.attributes instanceof NamedNodeMap) || typeof elm.removeAttribute !== 'function' || typeof elm.setAttribute !== 'function' || typeof elm.namespaceURI !== 'string' || typeof elm.insertBefore !== 'function' || typeof elm.hasChildNodes !== 'function');\n    };\n\n    /**\n     * Checks whether the given object is a DOM node.\n     *\n     * @param  {Node} object object to check whether it's a DOM node\n     * @return {Boolean} true is object is a DOM node\n     */\n    const _isNode = function _isNode(object) {\n      return typeof Node === 'function' && object instanceof Node;\n    };\n\n    /**\n     * _executeHook\n     * Execute user configurable hooks\n     *\n     * @param  {String} entryPoint  Name of the hook's entry point\n     * @param  {Node} currentNode node to work on with the hook\n     * @param  {Object} data additional hook parameters\n     */\n    const _executeHook = function _executeHook(entryPoint, currentNode, data) {\n      if (!hooks[entryPoint]) {\n        return;\n      }\n      arrayForEach(hooks[entryPoint], hook => {\n        hook.call(DOMPurify, currentNode, data, CONFIG);\n      });\n    };\n\n    /**\n     * _sanitizeElements\n     *\n     * @protect nodeName\n     * @protect textContent\n     * @protect removeChild\n     *\n     * @param   {Node} currentNode to check for permission to exist\n     * @return  {Boolean} true if node was killed, false if left alive\n     */\n    const _sanitizeElements = function _sanitizeElements(currentNode) {\n      let content = null;\n\n      /* Execute a hook if present */\n      _executeHook('beforeSanitizeElements', currentNode, null);\n\n      /* Check if element is clobbered or can clobber */\n      if (_isClobbered(currentNode)) {\n        _forceRemove(currentNode);\n        return true;\n      }\n\n      /* Now let's check the element's type and name */\n      const tagName = transformCaseFunc(currentNode.nodeName);\n\n      /* Execute a hook if present */\n      _executeHook('uponSanitizeElement', currentNode, {\n        tagName,\n        allowedTags: ALLOWED_TAGS\n      });\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\n      /* Remove any ocurrence of processing instructions */\n      if (currentNode.nodeType === NODE_TYPE.progressingInstruction) {\n        _forceRemove(currentNode);\n        return true;\n      }\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\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\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\n      /* Check whether element has a valid namespace */\n      if (currentNode instanceof Element && !_checkValidNamespace(currentNode)) {\n        _forceRemove(currentNode);\n        return true;\n      }\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\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\n      /* Execute a hook if present */\n      _executeHook('afterSanitizeElements', currentNode, null);\n      return false;\n    };\n\n    /**\n     * _isValidAttribute\n     *\n     * @param  {string} lcTag Lowercase tag name of containing element.\n     * @param  {string} lcName Lowercase attribute name.\n     * @param  {string} value Attribute value.\n     * @return {Boolean} 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\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    /**\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 {string} tagName name of the tag of the node to sanitize\n     * @returns {boolean} 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    /**\n     * _sanitizeAttributes\n     *\n     * @protect attributes\n     * @protect nodeName\n     * @protect removeAttribute\n     * @protect setAttribute\n     *\n     * @param  {Node} currentNode to sanitize\n     */\n    const _sanitizeAttributes = function _sanitizeAttributes(currentNode) {\n      /* Execute a hook if present */\n      _executeHook('beforeSanitizeAttributes', currentNode, null);\n      const {\n        attributes\n      } = currentNode;\n\n      /* Check if we have attributes; if not we might have a text node */\n      if (!attributes) {\n        return;\n      }\n      const hookEvent = {\n        attrName: '',\n        attrValue: '',\n        keepAttr: true,\n        allowedAttributes: ALLOWED_ATTR\n      };\n      let l = attributes.length;\n\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\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        _executeHook('uponSanitizeAttribute', currentNode, hookEvent);\n        value = hookEvent.attrValue;\n        /* Did the hooks approve of the attribute? */\n        if (hookEvent.forceKeepAttr) {\n          continue;\n        }\n\n        /* Remove attribute */\n        _removeAttribute(name, currentNode);\n\n        /* Did the hooks approve of the attribute? */\n        if (!hookEvent.keepAttr) {\n          continue;\n        }\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\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\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\n        /* Is `value` valid for this attribute? */\n        const lcTag = transformCaseFunc(currentNode.nodeName);\n        if (!_isValidAttribute(lcTag, lcName, value)) {\n          continue;\n        }\n\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\n          // Prefix the value and later re-create the attribute with the sanitized value\n          value = SANITIZE_NAMED_PROPS_PREFIX + value;\n        }\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\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\n      /* Execute a hook if present */\n      _executeHook('afterSanitizeAttributes', currentNode, null);\n    };\n\n    /**\n     * _sanitizeShadowDOM\n     *\n     * @param  {DocumentFragment} fragment to iterate over recursively\n     */\n    const _sanitizeShadowDOM = function _sanitizeShadowDOM(fragment) {\n      let shadowNode = null;\n      const shadowIterator = _createNodeIterator(fragment);\n\n      /* Execute a hook if present */\n      _executeHook('beforeSanitizeShadowDOM', fragment, null);\n      while (shadowNode = shadowIterator.nextNode()) {\n        /* Execute a hook if present */\n        _executeHook('uponSanitizeShadowNode', shadowNode, null);\n\n        /* Sanitize tags and elements */\n        if (_sanitizeElements(shadowNode)) {\n          continue;\n        }\n\n        /* Deep shadow DOM detected */\n        if (shadowNode.content instanceof DocumentFragment) {\n          _sanitizeShadowDOM(shadowNode.content);\n        }\n\n        /* Check attributes, sanitize if necessary */\n        _sanitizeAttributes(shadowNode);\n      }\n\n      /* Execute a hook if present */\n      _executeHook('afterSanitizeShadowDOM', fragment, null);\n    };\n\n    /**\n     * Sanitize\n     * Public method providing core sanitation functionality\n     *\n     * @param {String|Node} dirty string or DOM node\n     * @param {Object} cfg object\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\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\n      /* Return dirty HTML if DOMPurify cannot run */\n      if (!DOMPurify.isSupported) {\n        return dirty;\n      }\n\n      /* Assign config vars */\n      if (!SET_CONFIG) {\n        _parseConfig(cfg);\n      }\n\n      /* Clean up removed elements */\n      DOMPurify.removed = [];\n\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\n        /* Initialize the document to work on */\n        body = _initDocument(dirty);\n\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\n      /* Remove first element node (ours) if FORCE_BODY is set */\n      if (body && FORCE_BODY) {\n        _forceRemove(body.firstChild);\n      }\n\n      /* Get node iterator */\n      const nodeIterator = _createNodeIterator(IN_PLACE ? dirty : body);\n\n      /* Now start iterating over the created document */\n      while (currentNode = nodeIterator.nextNode()) {\n        /* Sanitize tags and elements */\n        if (_sanitizeElements(currentNode)) {\n          continue;\n        }\n\n        /* Shadow DOM detected, sanitize it */\n        if (currentNode.content instanceof DocumentFragment) {\n          _sanitizeShadowDOM(currentNode.content);\n        }\n\n        /* Check attributes, sanitize if necessary */\n        _sanitizeAttributes(currentNode);\n      }\n\n      /* If we sanitized `dirty` in-place, return it. */\n      if (IN_PLACE) {\n        return dirty;\n      }\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\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\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\n    /**\n     * Public method to set the configuration once\n     * setConfig\n     *\n     * @param {Object} cfg configuration object\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\n    /**\n     * Public method to remove the configuration\n     * clearConfig\n     *\n     */\n    DOMPurify.clearConfig = function () {\n      CONFIG = null;\n      SET_CONFIG = false;\n    };\n\n    /**\n     * Public method to check if an attribute value is valid.\n     * Uses last set config, if any. Otherwise, uses config defaults.\n     * isValidAttribute\n     *\n     * @param  {String} tag Tag name of containing element.\n     * @param  {String} attr Attribute name.\n     * @param  {String} value Attribute value.\n     * @return {Boolean} Returns true if `value` is valid. Otherwise, returns 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\n    /**\n     * AddHook\n     * Public method to add DOMPurify hooks\n     *\n     * @param {String} entryPoint entry point for the hook to add\n     * @param {Function} hookFunction function to execute\n     */\n    DOMPurify.addHook = function (entryPoint, hookFunction) {\n      if (typeof hookFunction !== 'function') {\n        return;\n      }\n      hooks[entryPoint] = hooks[entryPoint] || [];\n      arrayPush(hooks[entryPoint], hookFunction);\n    };\n\n    /**\n     * RemoveHook\n     * Public method to remove a DOMPurify hook at a given entryPoint\n     * (pops it from the stack of hooks if more are present)\n     *\n     * @param {String} entryPoint entry point for the hook to remove\n     * @return {Function} removed(popped) hook\n     */\n    DOMPurify.removeHook = function (entryPoint) {\n      if (hooks[entryPoint]) {\n        return arrayPop(hooks[entryPoint]);\n      }\n    };\n\n    /**\n     * RemoveHooks\n     * Public method to remove all DOMPurify hooks at a given entryPoint\n     *\n     * @param  {String} entryPoint entry point for the hooks to remove\n     */\n    DOMPurify.removeHooks = function (entryPoint) {\n      if (hooks[entryPoint]) {\n        hooks[entryPoint] = [];\n      }\n    };\n\n    /**\n     * RemoveAllHooks\n     * Public method to remove all DOMPurify hooks\n     */\n    DOMPurify.removeAllHooks = function () {\n      hooks = {};\n    };\n    return DOMPurify;\n  }\n  var purify = createDOMPurify();\n\n  return purify;\n\n}));\n//# sourceMappingURL=purify.js.map\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/node_modules/dompurify/dist/purify.js?");
+
+/***/ }),
+
 /***/ "./node_modules/@formio/core/node_modules/inputmask/dist/inputmask.js":
 /*!****************************************************************************!*\
   !*** ./node_modules/@formio/core/node_modules/inputmask/dist/inputmask.js ***!
@@ -1941,6 +1951,16 @@ eval("/*!\n * dist/inputmask\n * https://github.com/RobinHerbots/Inputmask\n * C
 
 /***/ }),
 
+/***/ "./node_modules/@formio/core/node_modules/json-logic-js/logic.js":
+/*!***********************************************************************!*\
+  !*** ./node_modules/@formio/core/node_modules/json-logic-js/logic.js ***!
+  \***********************************************************************/
+/***/ (function(module, exports, __webpack_require__) {
+
+eval("var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;/* globals define,module */\n/*\nUsing a Universal Module Loader that should be browser, require, and AMD friendly\nhttp://ricostacruz.com/cheatsheets/umdjs.html\n*/\n;(function(root, factory) {\n  if (true) {\n    !(__WEBPACK_AMD_DEFINE_FACTORY__ = (factory),\n\t\t__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?\n\t\t(__WEBPACK_AMD_DEFINE_FACTORY__.call(exports, __webpack_require__, exports, module)) :\n\t\t__WEBPACK_AMD_DEFINE_FACTORY__),\n\t\t__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));\n  } else {}\n}(this, function() {\n  \"use strict\";\n  /* globals console:false */\n\n  if ( ! Array.isArray) {\n    Array.isArray = function(arg) {\n      return Object.prototype.toString.call(arg) === \"[object Array]\";\n    };\n  }\n\n  /**\n   * Return an array that contains no duplicates (original not modified)\n   * @param  {array} array   Original reference array\n   * @return {array}         New array with no duplicates\n   */\n  function arrayUnique(array) {\n    var a = [];\n    for (var i=0, l=array.length; i<l; i++) {\n      if (a.indexOf(array[i]) === -1) {\n        a.push(array[i]);\n      }\n    }\n    return a;\n  }\n\n  var jsonLogic = {};\n  var operations = {\n    \"==\": function(a, b) {\n      return a == b;\n    },\n    \"===\": function(a, b) {\n      return a === b;\n    },\n    \"!=\": function(a, b) {\n      return a != b;\n    },\n    \"!==\": function(a, b) {\n      return a !== b;\n    },\n    \">\": function(a, b) {\n      return a > b;\n    },\n    \">=\": function(a, b) {\n      return a >= b;\n    },\n    \"<\": function(a, b, c) {\n      return (c === undefined) ? a < b : (a < b) && (b < c);\n    },\n    \"<=\": function(a, b, c) {\n      return (c === undefined) ? a <= b : (a <= b) && (b <= c);\n    },\n    \"!!\": function(a) {\n      return jsonLogic.truthy(a);\n    },\n    \"!\": function(a) {\n      return !jsonLogic.truthy(a);\n    },\n    \"%\": function(a, b) {\n      return a % b;\n    },\n    \"log\": function(a) {\n      console.log(a); return a;\n    },\n    \"in\": function(a, b) {\n      if (!b || typeof b.indexOf === \"undefined\") return false;\n      return (b.indexOf(a) !== -1);\n    },\n    \"cat\": function() {\n      return Array.prototype.join.call(arguments, \"\");\n    },\n    \"substr\": function(source, start, end) {\n      if (end < 0) {\n        // JavaScript doesn't support negative end, this emulates PHP behavior\n        var temp = String(source).substr(start);\n        return temp.substr(0, temp.length + end);\n      }\n      return String(source).substr(start, end);\n    },\n    \"+\": function() {\n      return Array.prototype.reduce.call(arguments, function(a, b) {\n        return parseFloat(a, 10) + parseFloat(b, 10);\n      }, 0);\n    },\n    \"*\": function() {\n      return Array.prototype.reduce.call(arguments, function(a, b) {\n        return parseFloat(a, 10) * parseFloat(b, 10);\n      });\n    },\n    \"-\": function(a, b) {\n      if (b === undefined) {\n        return -a;\n      } else {\n        return a - b;\n      }\n    },\n    \"/\": function(a, b) {\n      return a / b;\n    },\n    \"min\": function() {\n      return Math.min.apply(this, arguments);\n    },\n    \"max\": function() {\n      return Math.max.apply(this, arguments);\n    },\n    \"merge\": function() {\n      return Array.prototype.reduce.call(arguments, function(a, b) {\n        return a.concat(b);\n      }, []);\n    },\n    \"var\": function(a, b) {\n      var not_found = (b === undefined) ? null : b;\n      var data = this;\n      if (typeof a === \"undefined\" || a===\"\" || a===null) {\n        return data;\n      }\n      var sub_props = String(a).split(\".\");\n      for (var i = 0; i < sub_props.length; i++) {\n        if (data === null || data === undefined) {\n          return not_found;\n        }\n        // Descending into data\n        data = data[sub_props[i]];\n        if (data === undefined) {\n          return not_found;\n        }\n      }\n      return data;\n    },\n    \"missing\": function() {\n      /*\n      Missing can receive many keys as many arguments, like {\"missing:[1,2]}\n      Missing can also receive *one* argument that is an array of keys,\n      which typically happens if it's actually acting on the output of another command\n      (like 'if' or 'merge')\n      */\n\n      var missing = [];\n      var keys = Array.isArray(arguments[0]) ? arguments[0] : arguments;\n\n      for (var i = 0; i < keys.length; i++) {\n        var key = keys[i];\n        var value = jsonLogic.apply({\"var\": key}, this);\n        if (value === null || value === \"\") {\n          missing.push(key);\n        }\n      }\n\n      return missing;\n    },\n    \"missing_some\": function(need_count, options) {\n      // missing_some takes two arguments, how many (minimum) items must be present, and an array of keys (just like 'missing') to check for presence.\n      var are_missing = jsonLogic.apply({\"missing\": options}, this);\n\n      if (options.length - are_missing.length >= need_count) {\n        return [];\n      } else {\n        return are_missing;\n      }\n    },\n  };\n\n  jsonLogic.is_logic = function(logic) {\n    return (\n      typeof logic === \"object\" && // An object\n      logic !== null && // but not null\n      ! Array.isArray(logic) && // and not an array\n      Object.keys(logic).length === 1 // with exactly one key\n    );\n  };\n\n  /*\n  This helper will defer to the JsonLogic spec as a tie-breaker when different language interpreters define different behavior for the truthiness of primitives.  E.g., PHP considers empty arrays to be falsy, but Javascript considers them to be truthy. JsonLogic, as an ecosystem, needs one consistent answer.\n\n  Spec and rationale here: http://jsonlogic.com/truthy\n  */\n  jsonLogic.truthy = function(value) {\n    if (Array.isArray(value) && value.length === 0) {\n      return false;\n    }\n    return !! value;\n  };\n\n\n  jsonLogic.get_operator = function(logic) {\n    return Object.keys(logic)[0];\n  };\n\n  jsonLogic.get_values = function(logic) {\n    return logic[jsonLogic.get_operator(logic)];\n  };\n\n  jsonLogic.apply = function(logic, data) {\n    // Does this array contain logic? Only one way to find out.\n    if (Array.isArray(logic)) {\n      return logic.map(function(l) {\n        return jsonLogic.apply(l, data);\n      });\n    }\n    // You've recursed to a primitive, stop!\n    if ( ! jsonLogic.is_logic(logic) ) {\n      return logic;\n    }\n\n    var op = jsonLogic.get_operator(logic);\n    var values = logic[op];\n    var i;\n    var current;\n    var scopedLogic;\n    var scopedData;\n    var initial;\n\n    // easy syntax for unary operators, like {\"var\" : \"x\"} instead of strict {\"var\" : [\"x\"]}\n    if ( ! Array.isArray(values)) {\n      values = [values];\n    }\n\n    // 'if', 'and', and 'or' violate the normal rule of depth-first calculating consequents, let each manage recursion as needed.\n    if (op === \"if\" || op == \"?:\") {\n      /* 'if' should be called with a odd number of parameters, 3 or greater\n      This works on the pattern:\n      if( 0 ){ 1 }else{ 2 };\n      if( 0 ){ 1 }else if( 2 ){ 3 }else{ 4 };\n      if( 0 ){ 1 }else if( 2 ){ 3 }else if( 4 ){ 5 }else{ 6 };\n\n      The implementation is:\n      For pairs of values (0,1 then 2,3 then 4,5 etc)\n      If the first evaluates truthy, evaluate and return the second\n      If the first evaluates falsy, jump to the next pair (e.g, 0,1 to 2,3)\n      given one parameter, evaluate and return it. (it's an Else and all the If/ElseIf were false)\n      given 0 parameters, return NULL (not great practice, but there was no Else)\n      */\n      for (i = 0; i < values.length - 1; i += 2) {\n        if ( jsonLogic.truthy( jsonLogic.apply(values[i], data) ) ) {\n          return jsonLogic.apply(values[i+1], data);\n        }\n      }\n      if (values.length === i+1) {\n        return jsonLogic.apply(values[i], data);\n      }\n      return null;\n    } else if (op === \"and\") { // Return first falsy, or last\n      for (i=0; i < values.length; i+=1) {\n        current = jsonLogic.apply(values[i], data);\n        if ( ! jsonLogic.truthy(current)) {\n          return current;\n        }\n      }\n      return current; // Last\n    } else if (op === \"or\") {// Return first truthy, or last\n      for (i=0; i < values.length; i+=1) {\n        current = jsonLogic.apply(values[i], data);\n        if ( jsonLogic.truthy(current) ) {\n          return current;\n        }\n      }\n      return current; // Last\n    } else if (op === \"filter\") {\n      scopedData = jsonLogic.apply(values[0], data);\n      scopedLogic = values[1];\n\n      if ( ! Array.isArray(scopedData)) {\n        return [];\n      }\n      // Return only the elements from the array in the first argument,\n      // that return truthy when passed to the logic in the second argument.\n      // For parity with JavaScript, reindex the returned array\n      return scopedData.filter(function(datum) {\n        return jsonLogic.truthy( jsonLogic.apply(scopedLogic, datum));\n      });\n    } else if (op === \"map\") {\n      scopedData = jsonLogic.apply(values[0], data);\n      scopedLogic = values[1];\n\n      if ( ! Array.isArray(scopedData)) {\n        return [];\n      }\n\n      return scopedData.map(function(datum) {\n        return jsonLogic.apply(scopedLogic, datum);\n      });\n    } else if (op === \"reduce\") {\n      scopedData = jsonLogic.apply(values[0], data);\n      scopedLogic = values[1];\n      initial = typeof values[2] !== \"undefined\" ? values[2] : null;\n\n      if ( ! Array.isArray(scopedData)) {\n        return initial;\n      }\n\n      return scopedData.reduce(\n        function(accumulator, current) {\n          return jsonLogic.apply(\n            scopedLogic,\n            {current: current, accumulator: accumulator}\n          );\n        },\n        initial\n      );\n    } else if (op === \"all\") {\n      scopedData = jsonLogic.apply(values[0], data);\n      scopedLogic = values[1];\n      // All of an empty set is false. Note, some and none have correct fallback after the for loop\n      if ( ! Array.isArray(scopedData) || ! scopedData.length) {\n        return false;\n      }\n      for (i=0; i < scopedData.length; i+=1) {\n        if ( ! jsonLogic.truthy( jsonLogic.apply(scopedLogic, scopedData[i]) )) {\n          return false; // First falsy, short circuit\n        }\n      }\n      return true; // All were truthy\n    } else if (op === \"none\") {\n      scopedData = jsonLogic.apply(values[0], data);\n      scopedLogic = values[1];\n\n      if ( ! Array.isArray(scopedData) || ! scopedData.length) {\n        return true;\n      }\n      for (i=0; i < scopedData.length; i+=1) {\n        if ( jsonLogic.truthy( jsonLogic.apply(scopedLogic, scopedData[i]) )) {\n          return false; // First truthy, short circuit\n        }\n      }\n      return true; // None were truthy\n    } else if (op === \"some\") {\n      scopedData = jsonLogic.apply(values[0], data);\n      scopedLogic = values[1];\n\n      if ( ! Array.isArray(scopedData) || ! scopedData.length) {\n        return false;\n      }\n      for (i=0; i < scopedData.length; i+=1) {\n        if ( jsonLogic.truthy( jsonLogic.apply(scopedLogic, scopedData[i]) )) {\n          return true; // First truthy, short circuit\n        }\n      }\n      return false; // None were truthy\n    }\n\n    // Everyone else gets immediate depth-first recursion\n    values = values.map(function(val) {\n      return jsonLogic.apply(val, data);\n    });\n\n\n    // The operation is called with \"data\" bound to its \"this\" and \"values\" passed as arguments.\n    // Structured commands like % or > can name formal arguments while flexible commands (like missing or merge) can operate on the pseudo-array arguments\n    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments\n    if (operations.hasOwnProperty(op) && typeof operations[op] === \"function\") {\n      return operations[op].apply(data, values);\n    } else if (op.indexOf(\".\") > 0) { // Contains a dot, and not in the 0th position\n      var sub_ops = String(op).split(\".\");\n      var operation = operations;\n      for (i = 0; i < sub_ops.length; i++) {\n        if (!operation.hasOwnProperty(sub_ops[i])) {\n          throw new Error(\"Unrecognized operation \" + op +\n            \" (failed at \" + sub_ops.slice(0, i+1).join(\".\") + \")\");\n        }\n        // Descending into operations\n        operation = operation[sub_ops[i]];\n      }\n\n      return operation.apply(data, values);\n    }\n\n    throw new Error(\"Unrecognized operation \" + op );\n  };\n\n  jsonLogic.uses_data = function(logic) {\n    var collection = [];\n\n    if (jsonLogic.is_logic(logic)) {\n      var op = jsonLogic.get_operator(logic);\n      var values = logic[op];\n\n      if ( ! Array.isArray(values)) {\n        values = [values];\n      }\n\n      if (op === \"var\") {\n        // This doesn't cover the case where the arg to var is itself a rule.\n        collection.push(values[0]);\n      } else {\n        // Recursion!\n        values.forEach(function(val) {\n          collection.push.apply(collection, jsonLogic.uses_data(val) );\n        });\n      }\n    }\n\n    return arrayUnique(collection);\n  };\n\n  jsonLogic.add_operation = function(name, code) {\n    operations[name] = code;\n  };\n\n  jsonLogic.rm_operation = function(name) {\n    delete operations[name];\n  };\n\n  jsonLogic.rule_like = function(rule, pattern) {\n    // console.log(\"Is \". JSON.stringify(rule) . \" like \" . JSON.stringify(pattern) . \"?\");\n    if (pattern === rule) {\n      return true;\n    } // TODO : Deep object equivalency?\n    if (pattern === \"@\") {\n      return true;\n    } // Wildcard!\n    if (pattern === \"number\") {\n      return (typeof rule === \"number\");\n    }\n    if (pattern === \"string\") {\n      return (typeof rule === \"string\");\n    }\n    if (pattern === \"array\") {\n      // !logic test might be superfluous in JavaScript\n      return Array.isArray(rule) && ! jsonLogic.is_logic(rule);\n    }\n\n    if (jsonLogic.is_logic(pattern)) {\n      if (jsonLogic.is_logic(rule)) {\n        var pattern_op = jsonLogic.get_operator(pattern);\n        var rule_op = jsonLogic.get_operator(rule);\n\n        if (pattern_op === \"@\" || pattern_op === rule_op) {\n          // echo \"\\nOperators match, go deeper\\n\";\n          return jsonLogic.rule_like(\n            jsonLogic.get_values(rule, false),\n            jsonLogic.get_values(pattern, false)\n          );\n        }\n      }\n      return false; // pattern is logic, rule isn't, can't be eq\n    }\n\n    if (Array.isArray(pattern)) {\n      if (Array.isArray(rule)) {\n        if (pattern.length !== rule.length) {\n          return false;\n        }\n        /*\n          Note, array order MATTERS, because we're using this array test logic to consider arguments, where order can matter. (e.g., + is commutative, but '-' or 'if' or 'var' are NOT)\n        */\n        for (var i = 0; i < pattern.length; i += 1) {\n          // If any fail, we fail\n          if ( ! jsonLogic.rule_like(rule[i], pattern[i])) {\n            return false;\n          }\n        }\n        return true; // If they *all* passed, we pass\n      } else {\n        return false; // Pattern is array, rule isn't\n      }\n    }\n\n    // Not logic, not array, not a === match for rule.\n    return false;\n  };\n\n  return jsonLogic;\n}));\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/node_modules/json-logic-js/logic.js?");
+
+/***/ }),
+
 /***/ "./node_modules/@formio/text-mask-addons/dist/textMaskAddons.js":
 /*!**********************************************************************!*\
   !*** ./node_modules/@formio/text-mask-addons/dist/textMaskAddons.js ***!
@@ -2624,7 +2644,7 @@ eval("(function (global, factory) {\n\t true ? module.exports = factory() :\n\t0
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   compare: function() { return /* binding */ compare; }\n/* harmony export */ });\n/* harmony import */ var _compareVersions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./compareVersions */ \"./node_modules/compare-versions/lib/esm/compareVersions.js\");\n\n/**\n * Compare [semver](https://semver.org/) version strings using the specified operator.\n *\n * @param v1 First version to compare\n * @param v2 Second version to compare\n * @param operator Allowed arithmetic operator to use\n * @returns `true` if the comparison between the firstVersion and the secondVersion satisfies the operator, `false` otherwise.\n *\n * @example\n * ```\n * compare('10.1.8', '10.0.4', '>'); // return true\n * compare('10.0.1', '10.0.1', '='); // return true\n * compare('10.1.1', '10.2.2', '<'); // return true\n * compare('10.1.1', '10.2.2', '<='); // return true\n * compare('10.1.1', '10.2.2', '>='); // return false\n * ```\n */\nconst compare = (v1, v2, operator) => {\n    // validate input operator\n    assertValidOperator(operator);\n    // since result of compareVersions can only be -1 or 0 or 1\n    // a simple map can be used to replace switch\n    const res = (0,_compareVersions__WEBPACK_IMPORTED_MODULE_0__.compareVersions)(v1, v2);\n    return operatorResMap[operator].includes(res);\n};\nconst operatorResMap = {\n    '>': [1],\n    '>=': [0, 1],\n    '=': [0],\n    '<=': [-1, 0],\n    '<': [-1],\n    '!=': [-1, 1],\n};\nconst allowedOperators = Object.keys(operatorResMap);\nconst assertValidOperator = (op) => {\n    if (typeof op !== 'string') {\n        throw new TypeError(`Invalid operator type, expected string but got ${typeof op}`);\n    }\n    if (allowedOperators.indexOf(op) === -1) {\n        throw new Error(`Invalid operator, expected one of ${allowedOperators.join('|')}`);\n    }\n};\n//# sourceMappingURL=compare.js.map\n\n//# sourceURL=webpack://Formio/./node_modules/compare-versions/lib/esm/compare.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   compare: function() { return /* binding */ compare; }\n/* harmony export */ });\n/* harmony import */ var _compareVersions_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./compareVersions.js */ \"./node_modules/compare-versions/lib/esm/compareVersions.js\");\n\n/**\n * Compare [semver](https://semver.org/) version strings using the specified operator.\n *\n * @param v1 First version to compare\n * @param v2 Second version to compare\n * @param operator Allowed arithmetic operator to use\n * @returns `true` if the comparison between the firstVersion and the secondVersion satisfies the operator, `false` otherwise.\n *\n * @example\n * ```\n * compare('10.1.8', '10.0.4', '>'); // return true\n * compare('10.0.1', '10.0.1', '='); // return true\n * compare('10.1.1', '10.2.2', '<'); // return true\n * compare('10.1.1', '10.2.2', '<='); // return true\n * compare('10.1.1', '10.2.2', '>='); // return false\n * ```\n */\nconst compare = (v1, v2, operator) => {\n    // validate input operator\n    assertValidOperator(operator);\n    // since result of compareVersions can only be -1 or 0 or 1\n    // a simple map can be used to replace switch\n    const res = (0,_compareVersions_js__WEBPACK_IMPORTED_MODULE_0__.compareVersions)(v1, v2);\n    return operatorResMap[operator].includes(res);\n};\nconst operatorResMap = {\n    '>': [1],\n    '>=': [0, 1],\n    '=': [0],\n    '<=': [-1, 0],\n    '<': [-1],\n    '!=': [-1, 1],\n};\nconst allowedOperators = Object.keys(operatorResMap);\nconst assertValidOperator = (op) => {\n    if (typeof op !== 'string') {\n        throw new TypeError(`Invalid operator type, expected string but got ${typeof op}`);\n    }\n    if (allowedOperators.indexOf(op) === -1) {\n        throw new Error(`Invalid operator, expected one of ${allowedOperators.join('|')}`);\n    }\n};\n//# sourceMappingURL=compare.js.map\n\n//# sourceURL=webpack://Formio/./node_modules/compare-versions/lib/esm/compare.js?");
 
 /***/ }),
 
@@ -2635,7 +2655,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   compareVersions: function() { return /* binding */ compareVersions; }\n/* harmony export */ });\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils */ \"./node_modules/compare-versions/lib/esm/utils.js\");\n\n/**\n * Compare [semver](https://semver.org/) version strings to find greater, equal or lesser.\n * This library supports the full semver specification, including comparing versions with different number of digits like `1.0.0`, `1.0`, `1`, and pre-release versions like `1.0.0-alpha`.\n * @param v1 - First version to compare\n * @param v2 - Second version to compare\n * @returns Numeric value compatible with the [Array.sort(fn) interface](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Parameters).\n */\nconst compareVersions = (v1, v2) => {\n    // validate input and split into segments\n    const n1 = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.validateAndParse)(v1);\n    const n2 = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.validateAndParse)(v2);\n    // pop off the patch\n    const p1 = n1.pop();\n    const p2 = n2.pop();\n    // validate numbers\n    const r = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.compareSegments)(n1, n2);\n    if (r !== 0)\n        return r;\n    // validate pre-release\n    if (p1 && p2) {\n        return (0,_utils__WEBPACK_IMPORTED_MODULE_0__.compareSegments)(p1.split('.'), p2.split('.'));\n    }\n    else if (p1 || p2) {\n        return p1 ? -1 : 1;\n    }\n    return 0;\n};\n//# sourceMappingURL=compareVersions.js.map\n\n//# sourceURL=webpack://Formio/./node_modules/compare-versions/lib/esm/compareVersions.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   compareVersions: function() { return /* binding */ compareVersions; }\n/* harmony export */ });\n/* harmony import */ var _utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils.js */ \"./node_modules/compare-versions/lib/esm/utils.js\");\n\n/**\n * Compare [semver](https://semver.org/) version strings to find greater, equal or lesser.\n * This library supports the full semver specification, including comparing versions with different number of digits like `1.0.0`, `1.0`, `1`, and pre-release versions like `1.0.0-alpha`.\n * @param v1 - First version to compare\n * @param v2 - Second version to compare\n * @returns Numeric value compatible with the [Array.sort(fn) interface](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Parameters).\n */\nconst compareVersions = (v1, v2) => {\n    // validate input and split into segments\n    const n1 = (0,_utils_js__WEBPACK_IMPORTED_MODULE_0__.validateAndParse)(v1);\n    const n2 = (0,_utils_js__WEBPACK_IMPORTED_MODULE_0__.validateAndParse)(v2);\n    // pop off the patch\n    const p1 = n1.pop();\n    const p2 = n2.pop();\n    // validate numbers\n    const r = (0,_utils_js__WEBPACK_IMPORTED_MODULE_0__.compareSegments)(n1, n2);\n    if (r !== 0)\n        return r;\n    // validate pre-release\n    if (p1 && p2) {\n        return (0,_utils_js__WEBPACK_IMPORTED_MODULE_0__.compareSegments)(p1.split('.'), p2.split('.'));\n    }\n    else if (p1 || p2) {\n        return p1 ? -1 : 1;\n    }\n    return 0;\n};\n//# sourceMappingURL=compareVersions.js.map\n\n//# sourceURL=webpack://Formio/./node_modules/compare-versions/lib/esm/compareVersions.js?");
 
 /***/ }),
 
@@ -2646,7 +2666,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   compare: function() { return /* reexport safe */ _compare__WEBPACK_IMPORTED_MODULE_0__.compare; },\n/* harmony export */   compareVersions: function() { return /* reexport safe */ _compareVersions__WEBPACK_IMPORTED_MODULE_1__.compareVersions; },\n/* harmony export */   satisfies: function() { return /* reexport safe */ _satisfies__WEBPACK_IMPORTED_MODULE_2__.satisfies; },\n/* harmony export */   validate: function() { return /* reexport safe */ _validate__WEBPACK_IMPORTED_MODULE_3__.validate; },\n/* harmony export */   validateStrict: function() { return /* reexport safe */ _validate__WEBPACK_IMPORTED_MODULE_3__.validateStrict; }\n/* harmony export */ });\n/* harmony import */ var _compare__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./compare */ \"./node_modules/compare-versions/lib/esm/compare.js\");\n/* harmony import */ var _compareVersions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./compareVersions */ \"./node_modules/compare-versions/lib/esm/compareVersions.js\");\n/* harmony import */ var _satisfies__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./satisfies */ \"./node_modules/compare-versions/lib/esm/satisfies.js\");\n/* harmony import */ var _validate__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./validate */ \"./node_modules/compare-versions/lib/esm/validate.js\");\n\n\n\n\n//# sourceMappingURL=index.js.map\n\n//# sourceURL=webpack://Formio/./node_modules/compare-versions/lib/esm/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   compare: function() { return /* reexport safe */ _compare_js__WEBPACK_IMPORTED_MODULE_0__.compare; },\n/* harmony export */   compareVersions: function() { return /* reexport safe */ _compareVersions_js__WEBPACK_IMPORTED_MODULE_1__.compareVersions; },\n/* harmony export */   satisfies: function() { return /* reexport safe */ _satisfies_js__WEBPACK_IMPORTED_MODULE_2__.satisfies; },\n/* harmony export */   validate: function() { return /* reexport safe */ _validate_js__WEBPACK_IMPORTED_MODULE_3__.validate; },\n/* harmony export */   validateStrict: function() { return /* reexport safe */ _validate_js__WEBPACK_IMPORTED_MODULE_3__.validateStrict; }\n/* harmony export */ });\n/* harmony import */ var _compare_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./compare.js */ \"./node_modules/compare-versions/lib/esm/compare.js\");\n/* harmony import */ var _compareVersions_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./compareVersions.js */ \"./node_modules/compare-versions/lib/esm/compareVersions.js\");\n/* harmony import */ var _satisfies_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./satisfies.js */ \"./node_modules/compare-versions/lib/esm/satisfies.js\");\n/* harmony import */ var _validate_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./validate.js */ \"./node_modules/compare-versions/lib/esm/validate.js\");\n\n\n\n\n//# sourceMappingURL=index.js.map\n\n//# sourceURL=webpack://Formio/./node_modules/compare-versions/lib/esm/index.js?");
 
 /***/ }),
 
@@ -2657,7 +2677,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   satisfies: function() { return /* binding */ satisfies; }\n/* harmony export */ });\n/* harmony import */ var _compare__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./compare */ \"./node_modules/compare-versions/lib/esm/compare.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils */ \"./node_modules/compare-versions/lib/esm/utils.js\");\n\n\n/**\n * Match [npm semver](https://docs.npmjs.com/cli/v6/using-npm/semver) version range.\n *\n * @param version Version number to match\n * @param range Range pattern for version\n * @returns `true` if the version number is within the range, `false` otherwise.\n *\n * @example\n * ```\n * satisfies('1.1.0', '^1.0.0'); // return true\n * satisfies('1.1.0', '~1.0.0'); // return false\n * ```\n */\nconst satisfies = (version, range) => {\n    // clean input\n    range = range.replace(/([><=]+)\\s+/g, '$1');\n    // handle multiple comparators\n    if (range.includes('||')) {\n        return range.split('||').some((r) => satisfies(version, r));\n    }\n    else if (range.includes(' - ')) {\n        const [a, b] = range.split(' - ', 2);\n        return satisfies(version, `>=${a} <=${b}`);\n    }\n    else if (range.includes(' ')) {\n        return range\n            .trim()\n            .replace(/\\s{2,}/g, ' ')\n            .split(' ')\n            .every((r) => satisfies(version, r));\n    }\n    // if no range operator then \"=\"\n    const m = range.match(/^([<>=~^]+)/);\n    const op = m ? m[1] : '=';\n    // if gt/lt/eq then operator compare\n    if (op !== '^' && op !== '~')\n        return (0,_compare__WEBPACK_IMPORTED_MODULE_0__.compare)(version, range, op);\n    // else range of either \"~\" or \"^\" is assumed\n    const [v1, v2, v3, , vp] = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.validateAndParse)(version);\n    const [r1, r2, r3, , rp] = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.validateAndParse)(range);\n    const v = [v1, v2, v3];\n    const r = [r1, r2 !== null && r2 !== void 0 ? r2 : 'x', r3 !== null && r3 !== void 0 ? r3 : 'x'];\n    // validate pre-release\n    if (rp) {\n        if (!vp)\n            return false;\n        if ((0,_utils__WEBPACK_IMPORTED_MODULE_1__.compareSegments)(v, r) !== 0)\n            return false;\n        if ((0,_utils__WEBPACK_IMPORTED_MODULE_1__.compareSegments)(vp.split('.'), rp.split('.')) === -1)\n            return false;\n    }\n    // first non-zero number\n    const nonZero = r.findIndex((v) => v !== '0') + 1;\n    // pointer to where segments can be >=\n    const i = op === '~' ? 2 : nonZero > 1 ? nonZero : 1;\n    // before pointer must be equal\n    if ((0,_utils__WEBPACK_IMPORTED_MODULE_1__.compareSegments)(v.slice(0, i), r.slice(0, i)) !== 0)\n        return false;\n    // after pointer must be >=\n    if ((0,_utils__WEBPACK_IMPORTED_MODULE_1__.compareSegments)(v.slice(i), r.slice(i)) === -1)\n        return false;\n    return true;\n};\n//# sourceMappingURL=satisfies.js.map\n\n//# sourceURL=webpack://Formio/./node_modules/compare-versions/lib/esm/satisfies.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   satisfies: function() { return /* binding */ satisfies; }\n/* harmony export */ });\n/* harmony import */ var _compare_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./compare.js */ \"./node_modules/compare-versions/lib/esm/compare.js\");\n/* harmony import */ var _utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils.js */ \"./node_modules/compare-versions/lib/esm/utils.js\");\n\n\n/**\n * Match [npm semver](https://docs.npmjs.com/cli/v6/using-npm/semver) version range.\n *\n * @param version Version number to match\n * @param range Range pattern for version\n * @returns `true` if the version number is within the range, `false` otherwise.\n *\n * @example\n * ```\n * satisfies('1.1.0', '^1.0.0'); // return true\n * satisfies('1.1.0', '~1.0.0'); // return false\n * ```\n */\nconst satisfies = (version, range) => {\n    // clean input\n    range = range.replace(/([><=]+)\\s+/g, '$1');\n    // handle multiple comparators\n    if (range.includes('||')) {\n        return range.split('||').some((r) => satisfies(version, r));\n    }\n    else if (range.includes(' - ')) {\n        const [a, b] = range.split(' - ', 2);\n        return satisfies(version, `>=${a} <=${b}`);\n    }\n    else if (range.includes(' ')) {\n        return range\n            .trim()\n            .replace(/\\s{2,}/g, ' ')\n            .split(' ')\n            .every((r) => satisfies(version, r));\n    }\n    // if no range operator then \"=\"\n    const m = range.match(/^([<>=~^]+)/);\n    const op = m ? m[1] : '=';\n    // if gt/lt/eq then operator compare\n    if (op !== '^' && op !== '~')\n        return (0,_compare_js__WEBPACK_IMPORTED_MODULE_0__.compare)(version, range, op);\n    // else range of either \"~\" or \"^\" is assumed\n    const [v1, v2, v3, , vp] = (0,_utils_js__WEBPACK_IMPORTED_MODULE_1__.validateAndParse)(version);\n    const [r1, r2, r3, , rp] = (0,_utils_js__WEBPACK_IMPORTED_MODULE_1__.validateAndParse)(range);\n    const v = [v1, v2, v3];\n    const r = [r1, r2 !== null && r2 !== void 0 ? r2 : 'x', r3 !== null && r3 !== void 0 ? r3 : 'x'];\n    // validate pre-release\n    if (rp) {\n        if (!vp)\n            return false;\n        if ((0,_utils_js__WEBPACK_IMPORTED_MODULE_1__.compareSegments)(v, r) !== 0)\n            return false;\n        if ((0,_utils_js__WEBPACK_IMPORTED_MODULE_1__.compareSegments)(vp.split('.'), rp.split('.')) === -1)\n            return false;\n    }\n    // first non-zero number\n    const nonZero = r.findIndex((v) => v !== '0') + 1;\n    // pointer to where segments can be >=\n    const i = op === '~' ? 2 : nonZero > 1 ? nonZero : 1;\n    // before pointer must be equal\n    if ((0,_utils_js__WEBPACK_IMPORTED_MODULE_1__.compareSegments)(v.slice(0, i), r.slice(0, i)) !== 0)\n        return false;\n    // after pointer must be >=\n    if ((0,_utils_js__WEBPACK_IMPORTED_MODULE_1__.compareSegments)(v.slice(i), r.slice(i)) === -1)\n        return false;\n    return true;\n};\n//# sourceMappingURL=satisfies.js.map\n\n//# sourceURL=webpack://Formio/./node_modules/compare-versions/lib/esm/satisfies.js?");
 
 /***/ }),
 
@@ -2679,7 +2699,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   validate: function() { return /* binding */ validate; },\n/* harmony export */   validateStrict: function() { return /* binding */ validateStrict; }\n/* harmony export */ });\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils */ \"./node_modules/compare-versions/lib/esm/utils.js\");\n\n/**\n * Validate [semver](https://semver.org/) version strings.\n *\n * @param version Version number to validate\n * @returns `true` if the version number is a valid semver version number, `false` otherwise.\n *\n * @example\n * ```\n * validate('1.0.0-rc.1'); // return true\n * validate('1.0-rc.1'); // return false\n * validate('foo'); // return false\n * ```\n */\nconst validate = (version) => typeof version === 'string' && /^[v\\d]/.test(version) && _utils__WEBPACK_IMPORTED_MODULE_0__.semver.test(version);\n/**\n * Validate [semver](https://semver.org/) version strings strictly. Will not accept wildcards and version ranges.\n *\n * @param version Version number to validate\n * @returns `true` if the version number is a valid semver version number `false` otherwise\n *\n * @example\n * ```\n * validate('1.0.0-rc.1'); // return true\n * validate('1.0-rc.1'); // return false\n * validate('foo'); // return false\n * ```\n */\nconst validateStrict = (version) => typeof version === 'string' &&\n    /^(0|[1-9]\\d*)\\.(0|[1-9]\\d*)\\.(0|[1-9]\\d*)(?:-((?:0|[1-9]\\d*|\\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\\.(?:0|[1-9]\\d*|\\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\\+([0-9a-zA-Z-]+(?:\\.[0-9a-zA-Z-]+)*))?$/.test(version);\n//# sourceMappingURL=validate.js.map\n\n//# sourceURL=webpack://Formio/./node_modules/compare-versions/lib/esm/validate.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   validate: function() { return /* binding */ validate; },\n/* harmony export */   validateStrict: function() { return /* binding */ validateStrict; }\n/* harmony export */ });\n/* harmony import */ var _utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils.js */ \"./node_modules/compare-versions/lib/esm/utils.js\");\n\n/**\n * Validate [semver](https://semver.org/) version strings.\n *\n * @param version Version number to validate\n * @returns `true` if the version number is a valid semver version number, `false` otherwise.\n *\n * @example\n * ```\n * validate('1.0.0-rc.1'); // return true\n * validate('1.0-rc.1'); // return false\n * validate('foo'); // return false\n * ```\n */\nconst validate = (version) => typeof version === 'string' && /^[v\\d]/.test(version) && _utils_js__WEBPACK_IMPORTED_MODULE_0__.semver.test(version);\n/**\n * Validate [semver](https://semver.org/) version strings strictly. Will not accept wildcards and version ranges.\n *\n * @param version Version number to validate\n * @returns `true` if the version number is a valid semver version number `false` otherwise\n *\n * @example\n * ```\n * validate('1.0.0-rc.1'); // return true\n * validate('1.0-rc.1'); // return false\n * validate('foo'); // return false\n * ```\n */\nconst validateStrict = (version) => typeof version === 'string' &&\n    /^(0|[1-9]\\d*)\\.(0|[1-9]\\d*)\\.(0|[1-9]\\d*)(?:-((?:0|[1-9]\\d*|\\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\\.(?:0|[1-9]\\d*|\\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\\+([0-9a-zA-Z-]+(?:\\.[0-9a-zA-Z-]+)*))?$/.test(version);\n//# sourceMappingURL=validate.js.map\n\n//# sourceURL=webpack://Formio/./node_modules/compare-versions/lib/esm/validate.js?");
 
 /***/ }),
 
@@ -2739,7 +2759,7 @@ eval("!function(t,i){ true?module.exports=i():0}(this,(function(){\"use strict\"
   \***********************************************/
 /***/ (function(module) {
 
-eval("/*! @license DOMPurify 3.1.5 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.1.5/LICENSE */\n\n(function (global, factory) {\n   true ? module.exports = factory() :\n  0;\n})(this, (function () { 'use strict';\n\n  const {\n    entries,\n    setPrototypeOf,\n    isFrozen,\n    getPrototypeOf,\n    getOwnPropertyDescriptor\n  } = Object;\n  let {\n    freeze,\n    seal,\n    create\n  } = Object; // eslint-disable-line import/no-mutable-exports\n  let {\n    apply,\n    construct\n  } = typeof Reflect !== 'undefined' && Reflect;\n  if (!freeze) {\n    freeze = function freeze(x) {\n      return x;\n    };\n  }\n  if (!seal) {\n    seal = function seal(x) {\n      return x;\n    };\n  }\n  if (!apply) {\n    apply = function apply(fun, thisValue, args) {\n      return fun.apply(thisValue, args);\n    };\n  }\n  if (!construct) {\n    construct = function construct(Func, args) {\n      return new Func(...args);\n    };\n  }\n  const arrayForEach = unapply(Array.prototype.forEach);\n  const arrayPop = unapply(Array.prototype.pop);\n  const arrayPush = unapply(Array.prototype.push);\n  const stringToLowerCase = unapply(String.prototype.toLowerCase);\n  const stringToString = unapply(String.prototype.toString);\n  const stringMatch = unapply(String.prototype.match);\n  const stringReplace = unapply(String.prototype.replace);\n  const stringIndexOf = unapply(String.prototype.indexOf);\n  const stringTrim = unapply(String.prototype.trim);\n  const objectHasOwnProperty = unapply(Object.prototype.hasOwnProperty);\n  const regExpTest = unapply(RegExp.prototype.test);\n  const typeErrorCreate = unconstruct(TypeError);\n\n  /**\n   * Creates a new function that calls the given function with a specified thisArg and arguments.\n   *\n   * @param {Function} func - The function to be wrapped and called.\n   * @returns {Function} A new function that calls the given function with a specified thisArg and arguments.\n   */\n  function 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  /**\n   * Creates a new function that constructs an instance of the given constructor function with the provided arguments.\n   *\n   * @param {Function} func - The constructor function to be wrapped and called.\n   * @returns {Function} A new function that constructs an instance of the given constructor function with the provided arguments.\n   */\n  function 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  /**\n   * Add properties to a lookup table\n   *\n   * @param {Object} set - The set to which elements will be added.\n   * @param {Array} array - The array containing elements to be added to the set.\n   * @param {Function} transformCaseFunc - An optional function to transform the case of each element before adding to the set.\n   * @returns {Object} The modified set with added elements.\n   */\n  function 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  /**\n   * Clean up an array to harden against CSPP\n   *\n   * @param {Array} array - The array to be cleaned.\n   * @returns {Array} The cleaned version of the array\n   */\n  function 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  /**\n   * Shallow clone an object\n   *\n   * @param {Object} object - The object to be cloned.\n   * @returns {Object} A new object that copies the original.\n   */\n  function 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  /**\n   * This method automatically checks if the prop is function or getter and behaves accordingly.\n   *\n   * @param {Object} object - The object to look up the getter function in its prototype chain.\n   * @param {String} prop - The property name for which to find the getter function.\n   * @returns {Function} The getter function found in the prototype chain or a fallback function.\n   */\n  function 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\n  const 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']);\n\n  // SVG\n  const 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']);\n  const 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\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.\n  const 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']);\n  const 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\n  // Similarly to SVG, we want to know all MathML elements,\n  // even those that we disallow by default.\n  const mathMlDisallowed = freeze(['maction', 'maligngroup', 'malignmark', 'mlongdiv', 'mscarries', 'mscarry', 'msgroup', 'mstack', 'msline', 'msrow', 'semantics', 'annotation', 'annotation-xml', 'mprescripts', 'none']);\n  const text = freeze(['#text']);\n\n  const 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']);\n  const svg = freeze(['accent-height', 'accumulate', 'additive', 'alignment-baseline', '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', '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', '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', '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', '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']);\n  const 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']);\n  const xml = freeze(['xlink:href', 'xml:id', 'xlink:title', 'xml:space', 'xmlns:xlink']);\n\n  // eslint-disable-next-line unicorn/better-regex\n  const MUSTACHE_EXPR = seal(/\\{\\{[\\w\\W]*|[\\w\\W]*\\}\\}/gm); // Specify template detection regex for SAFE_FOR_TEMPLATES mode\n  const ERB_EXPR = seal(/<%[\\w\\W]*|[\\w\\W]*%>/gm);\n  const TMPLIT_EXPR = seal(/\\${[\\w\\W]*}/gm);\n  const DATA_ATTR = seal(/^data-[\\-\\w.\\u00B7-\\uFFFF]/); // eslint-disable-line no-useless-escape\n  const ARIA_ATTR = seal(/^aria-[\\-\\w]+$/); // eslint-disable-line no-useless-escape\n  const 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  );\n\n  const IS_SCRIPT_OR_DATA = seal(/^(?:\\w+script|data):/i);\n  const ATTR_WHITESPACE = seal(/[\\u0000-\\u0020\\u00A0\\u1680\\u180E\\u2000-\\u2029\\u205F\\u3000]/g // eslint-disable-line no-control-regex\n  );\n\n  const DOCTYPE_NAME = seal(/^html$/i);\n  const CUSTOM_ELEMENT = seal(/^[a-z][.\\w]*(-[.\\w]+)+$/i);\n\n  var EXPRESSIONS = /*#__PURE__*/Object.freeze({\n    __proto__: null,\n    MUSTACHE_EXPR: MUSTACHE_EXPR,\n    ERB_EXPR: ERB_EXPR,\n    TMPLIT_EXPR: TMPLIT_EXPR,\n    DATA_ATTR: DATA_ATTR,\n    ARIA_ATTR: ARIA_ATTR,\n    IS_ALLOWED_URI: IS_ALLOWED_URI,\n    IS_SCRIPT_OR_DATA: IS_SCRIPT_OR_DATA,\n    ATTR_WHITESPACE: ATTR_WHITESPACE,\n    DOCTYPE_NAME: DOCTYPE_NAME,\n    CUSTOM_ELEMENT: CUSTOM_ELEMENT\n  });\n\n  // https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType\n  const 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  };\n\n  const getGlobal = function getGlobal() {\n    return typeof window === 'undefined' ? null : window;\n  };\n\n  /**\n   * Creates a no-op policy for internal use only.\n   * Don't export this function outside this module!\n   * @param {TrustedTypePolicyFactory} trustedTypes The policy factory.\n   * @param {HTMLScriptElement} purifyHostElement The Script element used to load DOMPurify (to determine policy name suffix).\n   * @return {TrustedTypePolicy} The policy created (or null, if Trusted Types\n   * are not supported or creating the policy failed).\n   */\n  const _createTrustedTypesPolicy = function _createTrustedTypesPolicy(trustedTypes, purifyHostElement) {\n    if (typeof trustedTypes !== 'object' || typeof trustedTypes.createPolicy !== 'function') {\n      return null;\n    }\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  };\n  function createDOMPurify() {\n    let window = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getGlobal();\n    const DOMPurify = root => createDOMPurify(root);\n\n    /**\n     * Version label, exposed for easier checks\n     * if DOMPurify is up to date or not\n     */\n    DOMPurify.version = '3.1.5';\n\n    /**\n     * Array of elements that DOMPurify removed during sanitation.\n     * Empty if nothing was removed.\n     */\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 getNextSibling = lookupGetter(ElementPrototype, 'nextSibling');\n    const getChildNodes = lookupGetter(ElementPrototype, 'childNodes');\n    const getParentNode = lookupGetter(ElementPrototype, 'parentNode');\n\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 = {};\n\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    /**\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\n    /* allowed element names */\n    let ALLOWED_TAGS = null;\n    const DEFAULT_ALLOWED_TAGS = addToSet({}, [...html$1, ...svg$1, ...svgFilters, ...mathMl$1, ...text]);\n\n    /* Allowed attribute names */\n    let ALLOWED_ATTR = null;\n    const DEFAULT_ALLOWED_ATTR = addToSet({}, [...html, ...svg, ...mathMl, ...xml]);\n\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\n    /* Explicitly forbidden tags (overrides ALLOWED_TAGS/ADD_TAGS) */\n    let FORBID_TAGS = null;\n\n    /* Explicitly forbidden attributes (overrides ALLOWED_ATTR/ADD_ATTR) */\n    let FORBID_ATTR = null;\n\n    /* Decide if ARIA attributes are okay */\n    let ALLOW_ARIA_ATTR = true;\n\n    /* Decide if custom data attributes are okay */\n    let ALLOW_DATA_ATTR = true;\n\n    /* Decide if unknown protocols are okay */\n    let ALLOW_UNKNOWN_PROTOCOLS = false;\n\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\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\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\n    /* Decide if document with <html>... should be returned */\n    let WHOLE_DOCUMENT = false;\n\n    /* Track whether config is already set on this instance of DOMPurify. */\n    let SET_CONFIG = false;\n\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\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\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\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\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\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\n    /* Keep element content when removing element? */\n    let KEEP_CONTENT = true;\n\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\n    /* Allow usage of profiles like html, svg and mathMl */\n    let USE_PROFILES = {};\n\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\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\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\n    /* Allowed XHTML+XML namespaces */\n    let ALLOWED_NAMESPACES = null;\n    const DEFAULT_ALLOWED_NAMESPACES = addToSet({}, [MATHML_NAMESPACE, SVG_NAMESPACE, HTML_NAMESPACE], stringToString);\n\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\n    /* Keep a reference to config to pass to hooks */\n    let CONFIG = null;\n\n    /* Ideally, do not touch anything below this line */\n    /* ______________________________________________ */\n\n    const formElement = document.createElement('form');\n    const isRegexOrFunction = function isRegexOrFunction(testValue) {\n      return testValue instanceof RegExp || testValue instanceof Function;\n    };\n\n    /**\n     * _parseConfig\n     *\n     * @param  {Object} 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\n      /* Shield configuration object from tampering */\n      if (!cfg || typeof cfg !== 'object') {\n        cfg = {};\n      }\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\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\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),\n      // eslint-disable-line indent\n      cfg.ADD_URI_SAFE_ATTR,\n      // eslint-disable-line indent\n      transformCaseFunc // eslint-disable-line indent\n      ) // eslint-disable-line indent\n      : DEFAULT_URI_SAFE_ATTRIBUTES;\n      DATA_URI_TAGS = objectHasOwnProperty(cfg, 'ADD_DATA_URI_TAGS') ? addToSet(clone(DEFAULT_DATA_URI_TAGS),\n      // eslint-disable-line indent\n      cfg.ADD_DATA_URI_TAGS,\n      // eslint-disable-line indent\n      transformCaseFunc // eslint-disable-line indent\n      ) // eslint-disable-line indent\n      : 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      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\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\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\n      /* Add #text in case KEEP_CONTENT is set to true */\n      if (KEEP_CONTENT) {\n        ALLOWED_TAGS['#text'] = true;\n      }\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\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\n        // Overwrite existing TrustedTypes policy.\n        trustedTypesPolicy = cfg.TRUSTED_TYPES_POLICY;\n\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\n        // If creating the internal policy succeeded sign internal variables.\n        if (trustedTypesPolicy !== null && typeof emptyHTML === 'string') {\n          emptyHTML = trustedTypesPolicy.createHTML('');\n        }\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    const MATHML_TEXT_INTEGRATION_POINTS = addToSet({}, ['mi', 'mo', 'mn', 'ms', 'mtext']);\n    const HTML_INTEGRATION_POINTS = addToSet({}, ['foreignobject', 'annotation-xml']);\n\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\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    /**\n     * @param  {Element} element a DOM element whose namespace is being checked\n     * @returns {boolean} 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\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\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\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\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\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\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\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\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    /**\n     * _forceRemove\n     *\n     * @param  {Node} 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        node.parentNode.removeChild(node);\n      } catch (_) {\n        node.remove();\n      }\n    };\n\n    /**\n     * _removeAttribute\n     *\n     * @param  {String} name an Attribute name\n     * @param  {Node} node a DOM node\n     */\n    const _removeAttribute = function _removeAttribute(name, node) {\n      try {\n        arrayPush(DOMPurify.removed, {\n          attribute: node.getAttributeNode(name),\n          from: node\n        });\n      } catch (_) {\n        arrayPush(DOMPurify.removed, {\n          attribute: null,\n          from: node\n        });\n      }\n      node.removeAttribute(name);\n\n      // We void attribute values for unremovable \"is\"\" attributes\n      if (name === 'is' && !ALLOWED_ATTR[name]) {\n        if (RETURN_DOM || RETURN_DOM_FRAGMENT) {\n          try {\n            _forceRemove(node);\n          } catch (_) {}\n        } else {\n          try {\n            node.setAttribute(name, '');\n          } catch (_) {}\n        }\n      }\n    };\n\n    /**\n     * _initDocument\n     *\n     * @param  {String} dirty a string of dirty markup\n     * @return {Document} 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\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\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    /**\n     * Creates a NodeIterator object that you can use to traverse filtered lists of nodes or elements in a document.\n     *\n     * @param  {Node} root The root element or node to start traversing on.\n     * @return {NodeIterator} 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    /**\n     * _isClobbered\n     *\n     * @param  {Node} elm element to check for clobbering attacks\n     * @return {Boolean} true if clobbered, false if safe\n     */\n    const _isClobbered = function _isClobbered(elm) {\n      return elm instanceof HTMLFormElement && (typeof elm.nodeName !== 'string' || typeof elm.textContent !== 'string' || typeof elm.removeChild !== 'function' || !(elm.attributes instanceof NamedNodeMap) || typeof elm.removeAttribute !== 'function' || typeof elm.setAttribute !== 'function' || typeof elm.namespaceURI !== 'string' || typeof elm.insertBefore !== 'function' || typeof elm.hasChildNodes !== 'function');\n    };\n\n    /**\n     * Checks whether the given object is a DOM node.\n     *\n     * @param  {Node} object object to check whether it's a DOM node\n     * @return {Boolean} true is object is a DOM node\n     */\n    const _isNode = function _isNode(object) {\n      return typeof Node === 'function' && object instanceof Node;\n    };\n\n    /**\n     * _executeHook\n     * Execute user configurable hooks\n     *\n     * @param  {String} entryPoint  Name of the hook's entry point\n     * @param  {Node} currentNode node to work on with the hook\n     * @param  {Object} data additional hook parameters\n     */\n    const _executeHook = function _executeHook(entryPoint, currentNode, data) {\n      if (!hooks[entryPoint]) {\n        return;\n      }\n      arrayForEach(hooks[entryPoint], hook => {\n        hook.call(DOMPurify, currentNode, data, CONFIG);\n      });\n    };\n\n    /**\n     * _sanitizeElements\n     *\n     * @protect nodeName\n     * @protect textContent\n     * @protect removeChild\n     *\n     * @param   {Node} currentNode to check for permission to exist\n     * @return  {Boolean} true if node was killed, false if left alive\n     */\n    const _sanitizeElements = function _sanitizeElements(currentNode) {\n      let content = null;\n\n      /* Execute a hook if present */\n      _executeHook('beforeSanitizeElements', currentNode, null);\n\n      /* Check if element is clobbered or can clobber */\n      if (_isClobbered(currentNode)) {\n        _forceRemove(currentNode);\n        return true;\n      }\n\n      /* Now let's check the element's type and name */\n      const tagName = transformCaseFunc(currentNode.nodeName);\n\n      /* Execute a hook if present */\n      _executeHook('uponSanitizeElement', currentNode, {\n        tagName,\n        allowedTags: ALLOWED_TAGS\n      });\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\n      /* Remove any ocurrence of processing instructions */\n      if (currentNode.nodeType === NODE_TYPE.progressingInstruction) {\n        _forceRemove(currentNode);\n        return true;\n      }\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\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\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\n      /* Check whether element has a valid namespace */\n      if (currentNode instanceof Element && !_checkValidNamespace(currentNode)) {\n        _forceRemove(currentNode);\n        return true;\n      }\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\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\n      /* Execute a hook if present */\n      _executeHook('afterSanitizeElements', currentNode, null);\n      return false;\n    };\n\n    /**\n     * _isValidAttribute\n     *\n     * @param  {string} lcTag Lowercase tag name of containing element.\n     * @param  {string} lcName Lowercase attribute name.\n     * @param  {string} value Attribute value.\n     * @return {Boolean} 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\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    /**\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 {string} tagName name of the tag of the node to sanitize\n     * @returns {boolean} 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    /**\n     * _sanitizeAttributes\n     *\n     * @protect attributes\n     * @protect nodeName\n     * @protect removeAttribute\n     * @protect setAttribute\n     *\n     * @param  {Node} currentNode to sanitize\n     */\n    const _sanitizeAttributes = function _sanitizeAttributes(currentNode) {\n      /* Execute a hook if present */\n      _executeHook('beforeSanitizeAttributes', currentNode, null);\n      const {\n        attributes\n      } = currentNode;\n\n      /* Check if we have attributes; if not we might have a text node */\n      if (!attributes) {\n        return;\n      }\n      const hookEvent = {\n        attrName: '',\n        attrValue: '',\n        keepAttr: true,\n        allowedAttributes: ALLOWED_ATTR\n      };\n      let l = attributes.length;\n\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\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        _executeHook('uponSanitizeAttribute', currentNode, hookEvent);\n        value = hookEvent.attrValue;\n        /* Did the hooks approve of the attribute? */\n        if (hookEvent.forceKeepAttr) {\n          continue;\n        }\n\n        /* Remove attribute */\n        _removeAttribute(name, currentNode);\n\n        /* Did the hooks approve of the attribute? */\n        if (!hookEvent.keepAttr) {\n          continue;\n        }\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\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\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\n        /* Is `value` valid for this attribute? */\n        const lcTag = transformCaseFunc(currentNode.nodeName);\n        if (!_isValidAttribute(lcTag, lcName, value)) {\n          continue;\n        }\n\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\n          // Prefix the value and later re-create the attribute with the sanitized value\n          value = SANITIZE_NAMED_PROPS_PREFIX + value;\n        }\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\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\n      /* Execute a hook if present */\n      _executeHook('afterSanitizeAttributes', currentNode, null);\n    };\n\n    /**\n     * _sanitizeShadowDOM\n     *\n     * @param  {DocumentFragment} fragment to iterate over recursively\n     */\n    const _sanitizeShadowDOM = function _sanitizeShadowDOM(fragment) {\n      let shadowNode = null;\n      const shadowIterator = _createNodeIterator(fragment);\n\n      /* Execute a hook if present */\n      _executeHook('beforeSanitizeShadowDOM', fragment, null);\n      while (shadowNode = shadowIterator.nextNode()) {\n        /* Execute a hook if present */\n        _executeHook('uponSanitizeShadowNode', shadowNode, null);\n\n        /* Sanitize tags and elements */\n        if (_sanitizeElements(shadowNode)) {\n          continue;\n        }\n\n        /* Deep shadow DOM detected */\n        if (shadowNode.content instanceof DocumentFragment) {\n          _sanitizeShadowDOM(shadowNode.content);\n        }\n\n        /* Check attributes, sanitize if necessary */\n        _sanitizeAttributes(shadowNode);\n      }\n\n      /* Execute a hook if present */\n      _executeHook('afterSanitizeShadowDOM', fragment, null);\n    };\n\n    /**\n     * Sanitize\n     * Public method providing core sanitation functionality\n     *\n     * @param {String|Node} dirty string or DOM node\n     * @param {Object} cfg object\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\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\n      /* Return dirty HTML if DOMPurify cannot run */\n      if (!DOMPurify.isSupported) {\n        return dirty;\n      }\n\n      /* Assign config vars */\n      if (!SET_CONFIG) {\n        _parseConfig(cfg);\n      }\n\n      /* Clean up removed elements */\n      DOMPurify.removed = [];\n\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\n        /* Initialize the document to work on */\n        body = _initDocument(dirty);\n\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\n      /* Remove first element node (ours) if FORCE_BODY is set */\n      if (body && FORCE_BODY) {\n        _forceRemove(body.firstChild);\n      }\n\n      /* Get node iterator */\n      const nodeIterator = _createNodeIterator(IN_PLACE ? dirty : body);\n\n      /* Now start iterating over the created document */\n      while (currentNode = nodeIterator.nextNode()) {\n        /* Sanitize tags and elements */\n        if (_sanitizeElements(currentNode)) {\n          continue;\n        }\n\n        /* Shadow DOM detected, sanitize it */\n        if (currentNode.content instanceof DocumentFragment) {\n          _sanitizeShadowDOM(currentNode.content);\n        }\n\n        /* Check attributes, sanitize if necessary */\n        _sanitizeAttributes(currentNode);\n      }\n\n      /* If we sanitized `dirty` in-place, return it. */\n      if (IN_PLACE) {\n        return dirty;\n      }\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\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\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\n    /**\n     * Public method to set the configuration once\n     * setConfig\n     *\n     * @param {Object} cfg configuration object\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\n    /**\n     * Public method to remove the configuration\n     * clearConfig\n     *\n     */\n    DOMPurify.clearConfig = function () {\n      CONFIG = null;\n      SET_CONFIG = false;\n    };\n\n    /**\n     * Public method to check if an attribute value is valid.\n     * Uses last set config, if any. Otherwise, uses config defaults.\n     * isValidAttribute\n     *\n     * @param  {String} tag Tag name of containing element.\n     * @param  {String} attr Attribute name.\n     * @param  {String} value Attribute value.\n     * @return {Boolean} Returns true if `value` is valid. Otherwise, returns 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\n    /**\n     * AddHook\n     * Public method to add DOMPurify hooks\n     *\n     * @param {String} entryPoint entry point for the hook to add\n     * @param {Function} hookFunction function to execute\n     */\n    DOMPurify.addHook = function (entryPoint, hookFunction) {\n      if (typeof hookFunction !== 'function') {\n        return;\n      }\n      hooks[entryPoint] = hooks[entryPoint] || [];\n      arrayPush(hooks[entryPoint], hookFunction);\n    };\n\n    /**\n     * RemoveHook\n     * Public method to remove a DOMPurify hook at a given entryPoint\n     * (pops it from the stack of hooks if more are present)\n     *\n     * @param {String} entryPoint entry point for the hook to remove\n     * @return {Function} removed(popped) hook\n     */\n    DOMPurify.removeHook = function (entryPoint) {\n      if (hooks[entryPoint]) {\n        return arrayPop(hooks[entryPoint]);\n      }\n    };\n\n    /**\n     * RemoveHooks\n     * Public method to remove all DOMPurify hooks at a given entryPoint\n     *\n     * @param  {String} entryPoint entry point for the hooks to remove\n     */\n    DOMPurify.removeHooks = function (entryPoint) {\n      if (hooks[entryPoint]) {\n        hooks[entryPoint] = [];\n      }\n    };\n\n    /**\n     * RemoveAllHooks\n     * Public method to remove all DOMPurify hooks\n     */\n    DOMPurify.removeAllHooks = function () {\n      hooks = {};\n    };\n    return DOMPurify;\n  }\n  var purify = createDOMPurify();\n\n  return purify;\n\n}));\n//# sourceMappingURL=purify.js.map\n\n\n//# sourceURL=webpack://Formio/./node_modules/dompurify/dist/purify.js?");
+eval("/*! @license DOMPurify 3.1.6 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.1.6/LICENSE */\n\n(function (global, factory) {\n   true ? module.exports = factory() :\n  0;\n})(this, (function () { 'use strict';\n\n  const {\n    entries,\n    setPrototypeOf,\n    isFrozen,\n    getPrototypeOf,\n    getOwnPropertyDescriptor\n  } = Object;\n  let {\n    freeze,\n    seal,\n    create\n  } = Object; // eslint-disable-line import/no-mutable-exports\n  let {\n    apply,\n    construct\n  } = typeof Reflect !== 'undefined' && Reflect;\n  if (!freeze) {\n    freeze = function freeze(x) {\n      return x;\n    };\n  }\n  if (!seal) {\n    seal = function seal(x) {\n      return x;\n    };\n  }\n  if (!apply) {\n    apply = function apply(fun, thisValue, args) {\n      return fun.apply(thisValue, args);\n    };\n  }\n  if (!construct) {\n    construct = function construct(Func, args) {\n      return new Func(...args);\n    };\n  }\n  const arrayForEach = unapply(Array.prototype.forEach);\n  const arrayPop = unapply(Array.prototype.pop);\n  const arrayPush = unapply(Array.prototype.push);\n  const stringToLowerCase = unapply(String.prototype.toLowerCase);\n  const stringToString = unapply(String.prototype.toString);\n  const stringMatch = unapply(String.prototype.match);\n  const stringReplace = unapply(String.prototype.replace);\n  const stringIndexOf = unapply(String.prototype.indexOf);\n  const stringTrim = unapply(String.prototype.trim);\n  const objectHasOwnProperty = unapply(Object.prototype.hasOwnProperty);\n  const regExpTest = unapply(RegExp.prototype.test);\n  const typeErrorCreate = unconstruct(TypeError);\n\n  /**\n   * Creates a new function that calls the given function with a specified thisArg and arguments.\n   *\n   * @param {Function} func - The function to be wrapped and called.\n   * @returns {Function} A new function that calls the given function with a specified thisArg and arguments.\n   */\n  function 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  /**\n   * Creates a new function that constructs an instance of the given constructor function with the provided arguments.\n   *\n   * @param {Function} func - The constructor function to be wrapped and called.\n   * @returns {Function} A new function that constructs an instance of the given constructor function with the provided arguments.\n   */\n  function 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  /**\n   * Add properties to a lookup table\n   *\n   * @param {Object} set - The set to which elements will be added.\n   * @param {Array} array - The array containing elements to be added to the set.\n   * @param {Function} transformCaseFunc - An optional function to transform the case of each element before adding to the set.\n   * @returns {Object} The modified set with added elements.\n   */\n  function 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  /**\n   * Clean up an array to harden against CSPP\n   *\n   * @param {Array} array - The array to be cleaned.\n   * @returns {Array} The cleaned version of the array\n   */\n  function 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  /**\n   * Shallow clone an object\n   *\n   * @param {Object} object - The object to be cloned.\n   * @returns {Object} A new object that copies the original.\n   */\n  function 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  /**\n   * This method automatically checks if the prop is function or getter and behaves accordingly.\n   *\n   * @param {Object} object - The object to look up the getter function in its prototype chain.\n   * @param {String} prop - The property name for which to find the getter function.\n   * @returns {Function} The getter function found in the prototype chain or a fallback function.\n   */\n  function 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\n  const 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']);\n\n  // SVG\n  const 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']);\n  const 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\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.\n  const 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']);\n  const 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\n  // Similarly to SVG, we want to know all MathML elements,\n  // even those that we disallow by default.\n  const mathMlDisallowed = freeze(['maction', 'maligngroup', 'malignmark', 'mlongdiv', 'mscarries', 'mscarry', 'msgroup', 'mstack', 'msline', 'msrow', 'semantics', 'annotation', 'annotation-xml', 'mprescripts', 'none']);\n  const text = freeze(['#text']);\n\n  const 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']);\n  const svg = freeze(['accent-height', 'accumulate', 'additive', 'alignment-baseline', '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', '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', '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', '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', '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']);\n  const 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']);\n  const xml = freeze(['xlink:href', 'xml:id', 'xlink:title', 'xml:space', 'xmlns:xlink']);\n\n  // eslint-disable-next-line unicorn/better-regex\n  const MUSTACHE_EXPR = seal(/\\{\\{[\\w\\W]*|[\\w\\W]*\\}\\}/gm); // Specify template detection regex for SAFE_FOR_TEMPLATES mode\n  const ERB_EXPR = seal(/<%[\\w\\W]*|[\\w\\W]*%>/gm);\n  const TMPLIT_EXPR = seal(/\\${[\\w\\W]*}/gm);\n  const DATA_ATTR = seal(/^data-[\\-\\w.\\u00B7-\\uFFFF]/); // eslint-disable-line no-useless-escape\n  const ARIA_ATTR = seal(/^aria-[\\-\\w]+$/); // eslint-disable-line no-useless-escape\n  const 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  );\n  const IS_SCRIPT_OR_DATA = seal(/^(?:\\w+script|data):/i);\n  const ATTR_WHITESPACE = seal(/[\\u0000-\\u0020\\u00A0\\u1680\\u180E\\u2000-\\u2029\\u205F\\u3000]/g // eslint-disable-line no-control-regex\n  );\n  const DOCTYPE_NAME = seal(/^html$/i);\n  const CUSTOM_ELEMENT = seal(/^[a-z][.\\w]*(-[.\\w]+)+$/i);\n\n  var EXPRESSIONS = /*#__PURE__*/Object.freeze({\n    __proto__: null,\n    MUSTACHE_EXPR: MUSTACHE_EXPR,\n    ERB_EXPR: ERB_EXPR,\n    TMPLIT_EXPR: TMPLIT_EXPR,\n    DATA_ATTR: DATA_ATTR,\n    ARIA_ATTR: ARIA_ATTR,\n    IS_ALLOWED_URI: IS_ALLOWED_URI,\n    IS_SCRIPT_OR_DATA: IS_SCRIPT_OR_DATA,\n    ATTR_WHITESPACE: ATTR_WHITESPACE,\n    DOCTYPE_NAME: DOCTYPE_NAME,\n    CUSTOM_ELEMENT: CUSTOM_ELEMENT\n  });\n\n  // https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType\n  const 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  };\n  const getGlobal = function getGlobal() {\n    return typeof window === 'undefined' ? null : window;\n  };\n\n  /**\n   * Creates a no-op policy for internal use only.\n   * Don't export this function outside this module!\n   * @param {TrustedTypePolicyFactory} trustedTypes The policy factory.\n   * @param {HTMLScriptElement} purifyHostElement The Script element used to load DOMPurify (to determine policy name suffix).\n   * @return {TrustedTypePolicy} The policy created (or null, if Trusted Types\n   * are not supported or creating the policy failed).\n   */\n  const _createTrustedTypesPolicy = function _createTrustedTypesPolicy(trustedTypes, purifyHostElement) {\n    if (typeof trustedTypes !== 'object' || typeof trustedTypes.createPolicy !== 'function') {\n      return null;\n    }\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  };\n  function createDOMPurify() {\n    let window = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getGlobal();\n    const DOMPurify = root => createDOMPurify(root);\n\n    /**\n     * Version label, exposed for easier checks\n     * if DOMPurify is up to date or not\n     */\n    DOMPurify.version = '3.1.6';\n\n    /**\n     * Array of elements that DOMPurify removed during sanitation.\n     * Empty if nothing was removed.\n     */\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\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 = {};\n\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    /**\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\n    /* allowed element names */\n    let ALLOWED_TAGS = null;\n    const DEFAULT_ALLOWED_TAGS = addToSet({}, [...html$1, ...svg$1, ...svgFilters, ...mathMl$1, ...text]);\n\n    /* Allowed attribute names */\n    let ALLOWED_ATTR = null;\n    const DEFAULT_ALLOWED_ATTR = addToSet({}, [...html, ...svg, ...mathMl, ...xml]);\n\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\n    /* Explicitly forbidden tags (overrides ALLOWED_TAGS/ADD_TAGS) */\n    let FORBID_TAGS = null;\n\n    /* Explicitly forbidden attributes (overrides ALLOWED_ATTR/ADD_ATTR) */\n    let FORBID_ATTR = null;\n\n    /* Decide if ARIA attributes are okay */\n    let ALLOW_ARIA_ATTR = true;\n\n    /* Decide if custom data attributes are okay */\n    let ALLOW_DATA_ATTR = true;\n\n    /* Decide if unknown protocols are okay */\n    let ALLOW_UNKNOWN_PROTOCOLS = false;\n\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\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\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\n    /* Decide if document with <html>... should be returned */\n    let WHOLE_DOCUMENT = false;\n\n    /* Track whether config is already set on this instance of DOMPurify. */\n    let SET_CONFIG = false;\n\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\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\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\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\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\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\n    /* Keep element content when removing element? */\n    let KEEP_CONTENT = true;\n\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\n    /* Allow usage of profiles like html, svg and mathMl */\n    let USE_PROFILES = {};\n\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\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\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\n    /* Allowed XHTML+XML namespaces */\n    let ALLOWED_NAMESPACES = null;\n    const DEFAULT_ALLOWED_NAMESPACES = addToSet({}, [MATHML_NAMESPACE, SVG_NAMESPACE, HTML_NAMESPACE], stringToString);\n\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\n    /* Keep a reference to config to pass to hooks */\n    let CONFIG = null;\n\n    /* Ideally, do not touch anything below this line */\n    /* ______________________________________________ */\n\n    const formElement = document.createElement('form');\n    const isRegexOrFunction = function isRegexOrFunction(testValue) {\n      return testValue instanceof RegExp || testValue instanceof Function;\n    };\n\n    /**\n     * _parseConfig\n     *\n     * @param  {Object} 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\n      /* Shield configuration object from tampering */\n      if (!cfg || typeof cfg !== 'object') {\n        cfg = {};\n      }\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\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\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),\n      // eslint-disable-line indent\n      cfg.ADD_URI_SAFE_ATTR,\n      // eslint-disable-line indent\n      transformCaseFunc // eslint-disable-line indent\n      ) // eslint-disable-line indent\n      : DEFAULT_URI_SAFE_ATTRIBUTES;\n      DATA_URI_TAGS = objectHasOwnProperty(cfg, 'ADD_DATA_URI_TAGS') ? addToSet(clone(DEFAULT_DATA_URI_TAGS),\n      // eslint-disable-line indent\n      cfg.ADD_DATA_URI_TAGS,\n      // eslint-disable-line indent\n      transformCaseFunc // eslint-disable-line indent\n      ) // eslint-disable-line indent\n      : 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      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\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\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\n      /* Add #text in case KEEP_CONTENT is set to true */\n      if (KEEP_CONTENT) {\n        ALLOWED_TAGS['#text'] = true;\n      }\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\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\n        // Overwrite existing TrustedTypes policy.\n        trustedTypesPolicy = cfg.TRUSTED_TYPES_POLICY;\n\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\n        // If creating the internal policy succeeded sign internal variables.\n        if (trustedTypesPolicy !== null && typeof emptyHTML === 'string') {\n          emptyHTML = trustedTypesPolicy.createHTML('');\n        }\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    const MATHML_TEXT_INTEGRATION_POINTS = addToSet({}, ['mi', 'mo', 'mn', 'ms', 'mtext']);\n    const HTML_INTEGRATION_POINTS = addToSet({}, ['foreignobject', 'annotation-xml']);\n\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\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    /**\n     * @param  {Element} element a DOM element whose namespace is being checked\n     * @returns {boolean} 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\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\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\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\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\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\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\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\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    /**\n     * _forceRemove\n     *\n     * @param  {Node} 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    /**\n     * _removeAttribute\n     *\n     * @param  {String} name an Attribute name\n     * @param  {Node} node a DOM node\n     */\n    const _removeAttribute = function _removeAttribute(name, node) {\n      try {\n        arrayPush(DOMPurify.removed, {\n          attribute: node.getAttributeNode(name),\n          from: node\n        });\n      } catch (_) {\n        arrayPush(DOMPurify.removed, {\n          attribute: null,\n          from: node\n        });\n      }\n      node.removeAttribute(name);\n\n      // We void attribute values for unremovable \"is\"\" attributes\n      if (name === 'is' && !ALLOWED_ATTR[name]) {\n        if (RETURN_DOM || RETURN_DOM_FRAGMENT) {\n          try {\n            _forceRemove(node);\n          } catch (_) {}\n        } else {\n          try {\n            node.setAttribute(name, '');\n          } catch (_) {}\n        }\n      }\n    };\n\n    /**\n     * _initDocument\n     *\n     * @param  {String} dirty a string of dirty markup\n     * @return {Document} 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\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\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    /**\n     * Creates a NodeIterator object that you can use to traverse filtered lists of nodes or elements in a document.\n     *\n     * @param  {Node} root The root element or node to start traversing on.\n     * @return {NodeIterator} 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    /**\n     * _isClobbered\n     *\n     * @param  {Node} elm element to check for clobbering attacks\n     * @return {Boolean} true if clobbered, false if safe\n     */\n    const _isClobbered = function _isClobbered(elm) {\n      return elm instanceof HTMLFormElement && (typeof elm.nodeName !== 'string' || typeof elm.textContent !== 'string' || typeof elm.removeChild !== 'function' || !(elm.attributes instanceof NamedNodeMap) || typeof elm.removeAttribute !== 'function' || typeof elm.setAttribute !== 'function' || typeof elm.namespaceURI !== 'string' || typeof elm.insertBefore !== 'function' || typeof elm.hasChildNodes !== 'function');\n    };\n\n    /**\n     * Checks whether the given object is a DOM node.\n     *\n     * @param  {Node} object object to check whether it's a DOM node\n     * @return {Boolean} true is object is a DOM node\n     */\n    const _isNode = function _isNode(object) {\n      return typeof Node === 'function' && object instanceof Node;\n    };\n\n    /**\n     * _executeHook\n     * Execute user configurable hooks\n     *\n     * @param  {String} entryPoint  Name of the hook's entry point\n     * @param  {Node} currentNode node to work on with the hook\n     * @param  {Object} data additional hook parameters\n     */\n    const _executeHook = function _executeHook(entryPoint, currentNode, data) {\n      if (!hooks[entryPoint]) {\n        return;\n      }\n      arrayForEach(hooks[entryPoint], hook => {\n        hook.call(DOMPurify, currentNode, data, CONFIG);\n      });\n    };\n\n    /**\n     * _sanitizeElements\n     *\n     * @protect nodeName\n     * @protect textContent\n     * @protect removeChild\n     *\n     * @param   {Node} currentNode to check for permission to exist\n     * @return  {Boolean} true if node was killed, false if left alive\n     */\n    const _sanitizeElements = function _sanitizeElements(currentNode) {\n      let content = null;\n\n      /* Execute a hook if present */\n      _executeHook('beforeSanitizeElements', currentNode, null);\n\n      /* Check if element is clobbered or can clobber */\n      if (_isClobbered(currentNode)) {\n        _forceRemove(currentNode);\n        return true;\n      }\n\n      /* Now let's check the element's type and name */\n      const tagName = transformCaseFunc(currentNode.nodeName);\n\n      /* Execute a hook if present */\n      _executeHook('uponSanitizeElement', currentNode, {\n        tagName,\n        allowedTags: ALLOWED_TAGS\n      });\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\n      /* Remove any occurrence of processing instructions */\n      if (currentNode.nodeType === NODE_TYPE.progressingInstruction) {\n        _forceRemove(currentNode);\n        return true;\n      }\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\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\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\n      /* Check whether element has a valid namespace */\n      if (currentNode instanceof Element && !_checkValidNamespace(currentNode)) {\n        _forceRemove(currentNode);\n        return true;\n      }\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\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\n      /* Execute a hook if present */\n      _executeHook('afterSanitizeElements', currentNode, null);\n      return false;\n    };\n\n    /**\n     * _isValidAttribute\n     *\n     * @param  {string} lcTag Lowercase tag name of containing element.\n     * @param  {string} lcName Lowercase attribute name.\n     * @param  {string} value Attribute value.\n     * @return {Boolean} 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\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    /**\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 {string} tagName name of the tag of the node to sanitize\n     * @returns {boolean} 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    /**\n     * _sanitizeAttributes\n     *\n     * @protect attributes\n     * @protect nodeName\n     * @protect removeAttribute\n     * @protect setAttribute\n     *\n     * @param  {Node} currentNode to sanitize\n     */\n    const _sanitizeAttributes = function _sanitizeAttributes(currentNode) {\n      /* Execute a hook if present */\n      _executeHook('beforeSanitizeAttributes', currentNode, null);\n      const {\n        attributes\n      } = currentNode;\n\n      /* Check if we have attributes; if not we might have a text node */\n      if (!attributes) {\n        return;\n      }\n      const hookEvent = {\n        attrName: '',\n        attrValue: '',\n        keepAttr: true,\n        allowedAttributes: ALLOWED_ATTR\n      };\n      let l = attributes.length;\n\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\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        _executeHook('uponSanitizeAttribute', currentNode, hookEvent);\n        value = hookEvent.attrValue;\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\n        /* Did the hooks approve of the attribute? */\n        if (hookEvent.forceKeepAttr) {\n          continue;\n        }\n\n        /* Remove attribute */\n        _removeAttribute(name, currentNode);\n\n        /* Did the hooks approve of the attribute? */\n        if (!hookEvent.keepAttr) {\n          continue;\n        }\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\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\n        /* Is `value` valid for this attribute? */\n        const lcTag = transformCaseFunc(currentNode.nodeName);\n        if (!_isValidAttribute(lcTag, lcName, value)) {\n          continue;\n        }\n\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\n          // Prefix the value and later re-create the attribute with the sanitized value\n          value = SANITIZE_NAMED_PROPS_PREFIX + value;\n        }\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\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\n      /* Execute a hook if present */\n      _executeHook('afterSanitizeAttributes', currentNode, null);\n    };\n\n    /**\n     * _sanitizeShadowDOM\n     *\n     * @param  {DocumentFragment} fragment to iterate over recursively\n     */\n    const _sanitizeShadowDOM = function _sanitizeShadowDOM(fragment) {\n      let shadowNode = null;\n      const shadowIterator = _createNodeIterator(fragment);\n\n      /* Execute a hook if present */\n      _executeHook('beforeSanitizeShadowDOM', fragment, null);\n      while (shadowNode = shadowIterator.nextNode()) {\n        /* Execute a hook if present */\n        _executeHook('uponSanitizeShadowNode', shadowNode, null);\n\n        /* Sanitize tags and elements */\n        if (_sanitizeElements(shadowNode)) {\n          continue;\n        }\n\n        /* Deep shadow DOM detected */\n        if (shadowNode.content instanceof DocumentFragment) {\n          _sanitizeShadowDOM(shadowNode.content);\n        }\n\n        /* Check attributes, sanitize if necessary */\n        _sanitizeAttributes(shadowNode);\n      }\n\n      /* Execute a hook if present */\n      _executeHook('afterSanitizeShadowDOM', fragment, null);\n    };\n\n    /**\n     * Sanitize\n     * Public method providing core sanitation functionality\n     *\n     * @param {String|Node} dirty string or DOM node\n     * @param {Object} cfg object\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\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\n      /* Return dirty HTML if DOMPurify cannot run */\n      if (!DOMPurify.isSupported) {\n        return dirty;\n      }\n\n      /* Assign config vars */\n      if (!SET_CONFIG) {\n        _parseConfig(cfg);\n      }\n\n      /* Clean up removed elements */\n      DOMPurify.removed = [];\n\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\n        /* Initialize the document to work on */\n        body = _initDocument(dirty);\n\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\n      /* Remove first element node (ours) if FORCE_BODY is set */\n      if (body && FORCE_BODY) {\n        _forceRemove(body.firstChild);\n      }\n\n      /* Get node iterator */\n      const nodeIterator = _createNodeIterator(IN_PLACE ? dirty : body);\n\n      /* Now start iterating over the created document */\n      while (currentNode = nodeIterator.nextNode()) {\n        /* Sanitize tags and elements */\n        if (_sanitizeElements(currentNode)) {\n          continue;\n        }\n\n        /* Shadow DOM detected, sanitize it */\n        if (currentNode.content instanceof DocumentFragment) {\n          _sanitizeShadowDOM(currentNode.content);\n        }\n\n        /* Check attributes, sanitize if necessary */\n        _sanitizeAttributes(currentNode);\n      }\n\n      /* If we sanitized `dirty` in-place, return it. */\n      if (IN_PLACE) {\n        return dirty;\n      }\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\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\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\n    /**\n     * Public method to set the configuration once\n     * setConfig\n     *\n     * @param {Object} cfg configuration object\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\n    /**\n     * Public method to remove the configuration\n     * clearConfig\n     *\n     */\n    DOMPurify.clearConfig = function () {\n      CONFIG = null;\n      SET_CONFIG = false;\n    };\n\n    /**\n     * Public method to check if an attribute value is valid.\n     * Uses last set config, if any. Otherwise, uses config defaults.\n     * isValidAttribute\n     *\n     * @param  {String} tag Tag name of containing element.\n     * @param  {String} attr Attribute name.\n     * @param  {String} value Attribute value.\n     * @return {Boolean} Returns true if `value` is valid. Otherwise, returns 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\n    /**\n     * AddHook\n     * Public method to add DOMPurify hooks\n     *\n     * @param {String} entryPoint entry point for the hook to add\n     * @param {Function} hookFunction function to execute\n     */\n    DOMPurify.addHook = function (entryPoint, hookFunction) {\n      if (typeof hookFunction !== 'function') {\n        return;\n      }\n      hooks[entryPoint] = hooks[entryPoint] || [];\n      arrayPush(hooks[entryPoint], hookFunction);\n    };\n\n    /**\n     * RemoveHook\n     * Public method to remove a DOMPurify hook at a given entryPoint\n     * (pops it from the stack of hooks if more are present)\n     *\n     * @param {String} entryPoint entry point for the hook to remove\n     * @return {Function} removed(popped) hook\n     */\n    DOMPurify.removeHook = function (entryPoint) {\n      if (hooks[entryPoint]) {\n        return arrayPop(hooks[entryPoint]);\n      }\n    };\n\n    /**\n     * RemoveHooks\n     * Public method to remove all DOMPurify hooks at a given entryPoint\n     *\n     * @param  {String} entryPoint entry point for the hooks to remove\n     */\n    DOMPurify.removeHooks = function (entryPoint) {\n      if (hooks[entryPoint]) {\n        hooks[entryPoint] = [];\n      }\n    };\n\n    /**\n     * RemoveAllHooks\n     * Public method to remove all DOMPurify hooks\n     */\n    DOMPurify.removeAllHooks = function () {\n      hooks = {};\n    };\n    return DOMPurify;\n  }\n  var purify = createDOMPurify();\n\n  return purify;\n\n}));\n//# sourceMappingURL=purify.js.map\n\n\n//# sourceURL=webpack://Formio/./node_modules/dompurify/dist/purify.js?");
 
 /***/ }),
 
@@ -2812,7 +2832,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \*********************************************/
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;/* globals define,module */\n/*\nUsing a Universal Module Loader that should be browser, require, and AMD friendly\nhttp://ricostacruz.com/cheatsheets/umdjs.html\n*/\n;(function(root, factory) {\n  if (true) {\n    !(__WEBPACK_AMD_DEFINE_FACTORY__ = (factory),\n\t\t__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?\n\t\t(__WEBPACK_AMD_DEFINE_FACTORY__.call(exports, __webpack_require__, exports, module)) :\n\t\t__WEBPACK_AMD_DEFINE_FACTORY__),\n\t\t__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));\n  } else {}\n}(this, function() {\n  \"use strict\";\n  /* globals console:false */\n\n  if ( ! Array.isArray) {\n    Array.isArray = function(arg) {\n      return Object.prototype.toString.call(arg) === \"[object Array]\";\n    };\n  }\n\n  /**\n   * Return an array that contains no duplicates (original not modified)\n   * @param  {array} array   Original reference array\n   * @return {array}         New array with no duplicates\n   */\n  function arrayUnique(array) {\n    var a = [];\n    for (var i=0, l=array.length; i<l; i++) {\n      if (a.indexOf(array[i]) === -1) {\n        a.push(array[i]);\n      }\n    }\n    return a;\n  }\n\n  var jsonLogic = {};\n  var operations = {\n    \"==\": function(a, b) {\n      return a == b;\n    },\n    \"===\": function(a, b) {\n      return a === b;\n    },\n    \"!=\": function(a, b) {\n      return a != b;\n    },\n    \"!==\": function(a, b) {\n      return a !== b;\n    },\n    \">\": function(a, b) {\n      return a > b;\n    },\n    \">=\": function(a, b) {\n      return a >= b;\n    },\n    \"<\": function(a, b, c) {\n      return (c === undefined) ? a < b : (a < b) && (b < c);\n    },\n    \"<=\": function(a, b, c) {\n      return (c === undefined) ? a <= b : (a <= b) && (b <= c);\n    },\n    \"!!\": function(a) {\n      return jsonLogic.truthy(a);\n    },\n    \"!\": function(a) {\n      return !jsonLogic.truthy(a);\n    },\n    \"%\": function(a, b) {\n      return a % b;\n    },\n    \"log\": function(a) {\n      console.log(a); return a;\n    },\n    \"in\": function(a, b) {\n      if (!b || typeof b.indexOf === \"undefined\") return false;\n      return (b.indexOf(a) !== -1);\n    },\n    \"cat\": function() {\n      return Array.prototype.join.call(arguments, \"\");\n    },\n    \"substr\": function(source, start, end) {\n      if (end < 0) {\n        // JavaScript doesn't support negative end, this emulates PHP behavior\n        var temp = String(source).substr(start);\n        return temp.substr(0, temp.length + end);\n      }\n      return String(source).substr(start, end);\n    },\n    \"+\": function() {\n      return Array.prototype.reduce.call(arguments, function(a, b) {\n        return parseFloat(a, 10) + parseFloat(b, 10);\n      }, 0);\n    },\n    \"*\": function() {\n      return Array.prototype.reduce.call(arguments, function(a, b) {\n        return parseFloat(a, 10) * parseFloat(b, 10);\n      });\n    },\n    \"-\": function(a, b) {\n      if (b === undefined) {\n        return -a;\n      } else {\n        return a - b;\n      }\n    },\n    \"/\": function(a, b) {\n      return a / b;\n    },\n    \"min\": function() {\n      return Math.min.apply(this, arguments);\n    },\n    \"max\": function() {\n      return Math.max.apply(this, arguments);\n    },\n    \"merge\": function() {\n      return Array.prototype.reduce.call(arguments, function(a, b) {\n        return a.concat(b);\n      }, []);\n    },\n    \"var\": function(a, b) {\n      var not_found = (b === undefined) ? null : b;\n      var data = this;\n      if (typeof a === \"undefined\" || a===\"\" || a===null) {\n        return data;\n      }\n      var sub_props = String(a).split(\".\");\n      for (var i = 0; i < sub_props.length; i++) {\n        if (data === null || data === undefined) {\n          return not_found;\n        }\n        // Descending into data\n        data = data[sub_props[i]];\n        if (data === undefined) {\n          return not_found;\n        }\n      }\n      return data;\n    },\n    \"missing\": function() {\n      /*\n      Missing can receive many keys as many arguments, like {\"missing:[1,2]}\n      Missing can also receive *one* argument that is an array of keys,\n      which typically happens if it's actually acting on the output of another command\n      (like 'if' or 'merge')\n      */\n\n      var missing = [];\n      var keys = Array.isArray(arguments[0]) ? arguments[0] : arguments;\n\n      for (var i = 0; i < keys.length; i++) {\n        var key = keys[i];\n        var value = jsonLogic.apply({\"var\": key}, this);\n        if (value === null || value === \"\") {\n          missing.push(key);\n        }\n      }\n\n      return missing;\n    },\n    \"missing_some\": function(need_count, options) {\n      // missing_some takes two arguments, how many (minimum) items must be present, and an array of keys (just like 'missing') to check for presence.\n      var are_missing = jsonLogic.apply({\"missing\": options}, this);\n\n      if (options.length - are_missing.length >= need_count) {\n        return [];\n      } else {\n        return are_missing;\n      }\n    },\n  };\n\n  jsonLogic.is_logic = function(logic) {\n    return (\n      typeof logic === \"object\" && // An object\n      logic !== null && // but not null\n      ! Array.isArray(logic) && // and not an array\n      Object.keys(logic).length === 1 // with exactly one key\n    );\n  };\n\n  /*\n  This helper will defer to the JsonLogic spec as a tie-breaker when different language interpreters define different behavior for the truthiness of primitives.  E.g., PHP considers empty arrays to be falsy, but Javascript considers them to be truthy. JsonLogic, as an ecosystem, needs one consistent answer.\n\n  Spec and rationale here: http://jsonlogic.com/truthy\n  */\n  jsonLogic.truthy = function(value) {\n    if (Array.isArray(value) && value.length === 0) {\n      return false;\n    }\n    return !! value;\n  };\n\n\n  jsonLogic.get_operator = function(logic) {\n    return Object.keys(logic)[0];\n  };\n\n  jsonLogic.get_values = function(logic) {\n    return logic[jsonLogic.get_operator(logic)];\n  };\n\n  jsonLogic.apply = function(logic, data) {\n    // Does this array contain logic? Only one way to find out.\n    if (Array.isArray(logic)) {\n      return logic.map(function(l) {\n        return jsonLogic.apply(l, data);\n      });\n    }\n    // You've recursed to a primitive, stop!\n    if ( ! jsonLogic.is_logic(logic) ) {\n      return logic;\n    }\n\n    var op = jsonLogic.get_operator(logic);\n    var values = logic[op];\n    var i;\n    var current;\n    var scopedLogic;\n    var scopedData;\n    var initial;\n\n    // easy syntax for unary operators, like {\"var\" : \"x\"} instead of strict {\"var\" : [\"x\"]}\n    if ( ! Array.isArray(values)) {\n      values = [values];\n    }\n\n    // 'if', 'and', and 'or' violate the normal rule of depth-first calculating consequents, let each manage recursion as needed.\n    if (op === \"if\" || op == \"?:\") {\n      /* 'if' should be called with a odd number of parameters, 3 or greater\n      This works on the pattern:\n      if( 0 ){ 1 }else{ 2 };\n      if( 0 ){ 1 }else if( 2 ){ 3 }else{ 4 };\n      if( 0 ){ 1 }else if( 2 ){ 3 }else if( 4 ){ 5 }else{ 6 };\n\n      The implementation is:\n      For pairs of values (0,1 then 2,3 then 4,5 etc)\n      If the first evaluates truthy, evaluate and return the second\n      If the first evaluates falsy, jump to the next pair (e.g, 0,1 to 2,3)\n      given one parameter, evaluate and return it. (it's an Else and all the If/ElseIf were false)\n      given 0 parameters, return NULL (not great practice, but there was no Else)\n      */\n      for (i = 0; i < values.length - 1; i += 2) {\n        if ( jsonLogic.truthy( jsonLogic.apply(values[i], data) ) ) {\n          return jsonLogic.apply(values[i+1], data);\n        }\n      }\n      if (values.length === i+1) {\n        return jsonLogic.apply(values[i], data);\n      }\n      return null;\n    } else if (op === \"and\") { // Return first falsy, or last\n      for (i=0; i < values.length; i+=1) {\n        current = jsonLogic.apply(values[i], data);\n        if ( ! jsonLogic.truthy(current)) {\n          return current;\n        }\n      }\n      return current; // Last\n    } else if (op === \"or\") {// Return first truthy, or last\n      for (i=0; i < values.length; i+=1) {\n        current = jsonLogic.apply(values[i], data);\n        if ( jsonLogic.truthy(current) ) {\n          return current;\n        }\n      }\n      return current; // Last\n    } else if (op === \"filter\") {\n      scopedData = jsonLogic.apply(values[0], data);\n      scopedLogic = values[1];\n\n      if ( ! Array.isArray(scopedData)) {\n        return [];\n      }\n      // Return only the elements from the array in the first argument,\n      // that return truthy when passed to the logic in the second argument.\n      // For parity with JavaScript, reindex the returned array\n      return scopedData.filter(function(datum) {\n        return jsonLogic.truthy( jsonLogic.apply(scopedLogic, datum));\n      });\n    } else if (op === \"map\") {\n      scopedData = jsonLogic.apply(values[0], data);\n      scopedLogic = values[1];\n\n      if ( ! Array.isArray(scopedData)) {\n        return [];\n      }\n\n      return scopedData.map(function(datum) {\n        return jsonLogic.apply(scopedLogic, datum);\n      });\n    } else if (op === \"reduce\") {\n      scopedData = jsonLogic.apply(values[0], data);\n      scopedLogic = values[1];\n      initial = typeof values[2] !== \"undefined\" ? values[2] : null;\n\n      if ( ! Array.isArray(scopedData)) {\n        return initial;\n      }\n\n      return scopedData.reduce(\n        function(accumulator, current) {\n          return jsonLogic.apply(\n            scopedLogic,\n            {current: current, accumulator: accumulator}\n          );\n        },\n        initial\n      );\n    } else if (op === \"all\") {\n      scopedData = jsonLogic.apply(values[0], data);\n      scopedLogic = values[1];\n      // All of an empty set is false. Note, some and none have correct fallback after the for loop\n      if ( ! Array.isArray(scopedData) || ! scopedData.length) {\n        return false;\n      }\n      for (i=0; i < scopedData.length; i+=1) {\n        if ( ! jsonLogic.truthy( jsonLogic.apply(scopedLogic, scopedData[i]) )) {\n          return false; // First falsy, short circuit\n        }\n      }\n      return true; // All were truthy\n    } else if (op === \"none\") {\n      scopedData = jsonLogic.apply(values[0], data);\n      scopedLogic = values[1];\n\n      if ( ! Array.isArray(scopedData) || ! scopedData.length) {\n        return true;\n      }\n      for (i=0; i < scopedData.length; i+=1) {\n        if ( jsonLogic.truthy( jsonLogic.apply(scopedLogic, scopedData[i]) )) {\n          return false; // First truthy, short circuit\n        }\n      }\n      return true; // None were truthy\n    } else if (op === \"some\") {\n      scopedData = jsonLogic.apply(values[0], data);\n      scopedLogic = values[1];\n\n      if ( ! Array.isArray(scopedData) || ! scopedData.length) {\n        return false;\n      }\n      for (i=0; i < scopedData.length; i+=1) {\n        if ( jsonLogic.truthy( jsonLogic.apply(scopedLogic, scopedData[i]) )) {\n          return true; // First truthy, short circuit\n        }\n      }\n      return false; // None were truthy\n    }\n\n    // Everyone else gets immediate depth-first recursion\n    values = values.map(function(val) {\n      return jsonLogic.apply(val, data);\n    });\n\n\n    // The operation is called with \"data\" bound to its \"this\" and \"values\" passed as arguments.\n    // Structured commands like % or > can name formal arguments while flexible commands (like missing or merge) can operate on the pseudo-array arguments\n    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments\n    if (operations.hasOwnProperty(op) && typeof operations[op] === \"function\") {\n      return operations[op].apply(data, values);\n    } else if (op.indexOf(\".\") > 0) { // Contains a dot, and not in the 0th position\n      var sub_ops = String(op).split(\".\");\n      var operation = operations;\n      for (i = 0; i < sub_ops.length; i++) {\n        if (!operation.hasOwnProperty(sub_ops[i])) {\n          throw new Error(\"Unrecognized operation \" + op +\n            \" (failed at \" + sub_ops.slice(0, i+1).join(\".\") + \")\");\n        }\n        // Descending into operations\n        operation = operation[sub_ops[i]];\n      }\n\n      return operation.apply(data, values);\n    }\n\n    throw new Error(\"Unrecognized operation \" + op );\n  };\n\n  jsonLogic.uses_data = function(logic) {\n    var collection = [];\n\n    if (jsonLogic.is_logic(logic)) {\n      var op = jsonLogic.get_operator(logic);\n      var values = logic[op];\n\n      if ( ! Array.isArray(values)) {\n        values = [values];\n      }\n\n      if (op === \"var\") {\n        // This doesn't cover the case where the arg to var is itself a rule.\n        collection.push(values[0]);\n      } else {\n        // Recursion!\n        values.forEach(function(val) {\n          collection.push.apply(collection, jsonLogic.uses_data(val) );\n        });\n      }\n    }\n\n    return arrayUnique(collection);\n  };\n\n  jsonLogic.add_operation = function(name, code) {\n    operations[name] = code;\n  };\n\n  jsonLogic.rm_operation = function(name) {\n    delete operations[name];\n  };\n\n  jsonLogic.rule_like = function(rule, pattern) {\n    // console.log(\"Is \". JSON.stringify(rule) . \" like \" . JSON.stringify(pattern) . \"?\");\n    if (pattern === rule) {\n      return true;\n    } // TODO : Deep object equivalency?\n    if (pattern === \"@\") {\n      return true;\n    } // Wildcard!\n    if (pattern === \"number\") {\n      return (typeof rule === \"number\");\n    }\n    if (pattern === \"string\") {\n      return (typeof rule === \"string\");\n    }\n    if (pattern === \"array\") {\n      // !logic test might be superfluous in JavaScript\n      return Array.isArray(rule) && ! jsonLogic.is_logic(rule);\n    }\n\n    if (jsonLogic.is_logic(pattern)) {\n      if (jsonLogic.is_logic(rule)) {\n        var pattern_op = jsonLogic.get_operator(pattern);\n        var rule_op = jsonLogic.get_operator(rule);\n\n        if (pattern_op === \"@\" || pattern_op === rule_op) {\n          // echo \"\\nOperators match, go deeper\\n\";\n          return jsonLogic.rule_like(\n            jsonLogic.get_values(rule, false),\n            jsonLogic.get_values(pattern, false)\n          );\n        }\n      }\n      return false; // pattern is logic, rule isn't, can't be eq\n    }\n\n    if (Array.isArray(pattern)) {\n      if (Array.isArray(rule)) {\n        if (pattern.length !== rule.length) {\n          return false;\n        }\n        /*\n          Note, array order MATTERS, because we're using this array test logic to consider arguments, where order can matter. (e.g., + is commutative, but '-' or 'if' or 'var' are NOT)\n        */\n        for (var i = 0; i < pattern.length; i += 1) {\n          // If any fail, we fail\n          if ( ! jsonLogic.rule_like(rule[i], pattern[i])) {\n            return false;\n          }\n        }\n        return true; // If they *all* passed, we pass\n      } else {\n        return false; // Pattern is array, rule isn't\n      }\n    }\n\n    // Not logic, not array, not a === match for rule.\n    return false;\n  };\n\n  return jsonLogic;\n}));\n\n\n//# sourceURL=webpack://Formio/./node_modules/json-logic-js/logic.js?");
+eval("var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;/* globals define,module */\n/*\nUsing a Universal Module Loader that should be browser, require, and AMD friendly\nhttp://ricostacruz.com/cheatsheets/umdjs.html\n*/\n;(function(root, factory) {\n  if (true) {\n    !(__WEBPACK_AMD_DEFINE_FACTORY__ = (factory),\n\t\t__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?\n\t\t(__WEBPACK_AMD_DEFINE_FACTORY__.call(exports, __webpack_require__, exports, module)) :\n\t\t__WEBPACK_AMD_DEFINE_FACTORY__),\n\t\t__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));\n  } else {}\n}(this, function() {\n  \"use strict\";\n  /* globals console:false */\n\n  if ( ! Array.isArray) {\n    Array.isArray = function(arg) {\n      return Object.prototype.toString.call(arg) === \"[object Array]\";\n    };\n  }\n\n  /**\n   * Return an array that contains no duplicates (original not modified)\n   * @param  {array} array   Original reference array\n   * @return {array}         New array with no duplicates\n   */\n  function arrayUnique(array) {\n    var a = [];\n    for (var i=0, l=array.length; i<l; i++) {\n      if (a.indexOf(array[i]) === -1) {\n        a.push(array[i]);\n      }\n    }\n    return a;\n  }\n\n  var jsonLogic = {};\n  var operations = {\n    \"==\": function(a, b) {\n      return a == b;\n    },\n    \"===\": function(a, b) {\n      return a === b;\n    },\n    \"!=\": function(a, b) {\n      return a != b;\n    },\n    \"!==\": function(a, b) {\n      return a !== b;\n    },\n    \">\": function(a, b) {\n      return a > b;\n    },\n    \">=\": function(a, b) {\n      return a >= b;\n    },\n    \"<\": function(a, b, c) {\n      return (c === undefined) ? a < b : (a < b) && (b < c);\n    },\n    \"<=\": function(a, b, c) {\n      return (c === undefined) ? a <= b : (a <= b) && (b <= c);\n    },\n    \"!!\": function(a) {\n      return jsonLogic.truthy(a);\n    },\n    \"!\": function(a) {\n      return !jsonLogic.truthy(a);\n    },\n    \"%\": function(a, b) {\n      return a % b;\n    },\n    \"log\": function(a) {\n      console.log(a); return a;\n    },\n    \"in\": function(a, b) {\n      if (!b || typeof b.indexOf === \"undefined\") return false;\n      return (b.indexOf(a) !== -1);\n    },\n    \"cat\": function() {\n      return Array.prototype.join.call(arguments, \"\");\n    },\n    \"substr\": function(source, start, end) {\n      if (end < 0) {\n        // JavaScript doesn't support negative end, this emulates PHP behavior\n        var temp = String(source).substr(start);\n        return temp.substr(0, temp.length + end);\n      }\n      return String(source).substr(start, end);\n    },\n    \"+\": function() {\n      return Array.prototype.reduce.call(arguments, function(a, b) {\n        return parseFloat(a, 10) + parseFloat(b, 10);\n      }, 0);\n    },\n    \"*\": function() {\n      return Array.prototype.reduce.call(arguments, function(a, b) {\n        return parseFloat(a, 10) * parseFloat(b, 10);\n      });\n    },\n    \"-\": function(a, b) {\n      if (b === undefined) {\n        return -a;\n      } else {\n        return a - b;\n      }\n    },\n    \"/\": function(a, b) {\n      return a / b;\n    },\n    \"min\": function() {\n      return Math.min.apply(this, arguments);\n    },\n    \"max\": function() {\n      return Math.max.apply(this, arguments);\n    },\n    \"merge\": function() {\n      return Array.prototype.reduce.call(arguments, function(a, b) {\n        return a.concat(b);\n      }, []);\n    },\n    \"var\": function(a, b) {\n      var not_found = (b === undefined) ? null : b;\n      var data = this;\n      if (typeof a === \"undefined\" || a===\"\" || a===null) {\n        return data;\n      }\n      var sub_props = String(a).split(\".\");\n      for (var i = 0; i < sub_props.length; i++) {\n        if (data === null || data === undefined) {\n          return not_found;\n        }\n        // Descending into data\n        data = data[sub_props[i]];\n        if (data === undefined) {\n          return not_found;\n        }\n      }\n      return data;\n    },\n    \"missing\": function() {\n      /*\n      Missing can receive many keys as many arguments, like {\"missing:[1,2]}\n      Missing can also receive *one* argument that is an array of keys,\n      which typically happens if it's actually acting on the output of another command\n      (like 'if' or 'merge')\n      */\n\n      var missing = [];\n      var keys = Array.isArray(arguments[0]) ? arguments[0] : arguments;\n\n      for (var i = 0; i < keys.length; i++) {\n        var key = keys[i];\n        var value = jsonLogic.apply({\"var\": key}, this);\n        if (value === null || value === \"\") {\n          missing.push(key);\n        }\n      }\n\n      return missing;\n    },\n    \"missing_some\": function(need_count, options) {\n      // missing_some takes two arguments, how many (minimum) items must be present, and an array of keys (just like 'missing') to check for presence.\n      var are_missing = jsonLogic.apply({\"missing\": options}, this);\n\n      if (options.length - are_missing.length >= need_count) {\n        return [];\n      } else {\n        return are_missing;\n      }\n    },\n  };\n\n  jsonLogic.is_logic = function(logic) {\n    return (\n      typeof logic === \"object\" && // An object\n      logic !== null && // but not null\n      ! Array.isArray(logic) && // and not an array\n      Object.keys(logic).length === 1 // with exactly one key\n    );\n  };\n\n  /*\n  This helper will defer to the JsonLogic spec as a tie-breaker when different language interpreters define different behavior for the truthiness of primitives.  E.g., PHP considers empty arrays to be falsy, but Javascript considers them to be truthy. JsonLogic, as an ecosystem, needs one consistent answer.\n\n  Spec and rationale here: http://jsonlogic.com/truthy\n  */\n  jsonLogic.truthy = function(value) {\n    if (Array.isArray(value) && value.length === 0) {\n      return false;\n    }\n    return !! value;\n  };\n\n\n  jsonLogic.get_operator = function(logic) {\n    return Object.keys(logic)[0];\n  };\n\n  jsonLogic.get_values = function(logic) {\n    return logic[jsonLogic.get_operator(logic)];\n  };\n\n  jsonLogic.apply = function(logic, data) {\n    // Does this array contain logic? Only one way to find out.\n    if (Array.isArray(logic)) {\n      return logic.map(function(l) {\n        return jsonLogic.apply(l, data);\n      });\n    }\n    // You've recursed to a primitive, stop!\n    if ( ! jsonLogic.is_logic(logic) ) {\n      return logic;\n    }\n\n    var op = jsonLogic.get_operator(logic);\n    var values = logic[op];\n    var i;\n    var current;\n    var scopedLogic;\n    var scopedData;\n    var initial;\n\n    // easy syntax for unary operators, like {\"var\" : \"x\"} instead of strict {\"var\" : [\"x\"]}\n    if ( ! Array.isArray(values)) {\n      values = [values];\n    }\n\n    // 'if', 'and', and 'or' violate the normal rule of depth-first calculating consequents, let each manage recursion as needed.\n    if (op === \"if\" || op == \"?:\") {\n      /* 'if' should be called with a odd number of parameters, 3 or greater\n      This works on the pattern:\n      if( 0 ){ 1 }else{ 2 };\n      if( 0 ){ 1 }else if( 2 ){ 3 }else{ 4 };\n      if( 0 ){ 1 }else if( 2 ){ 3 }else if( 4 ){ 5 }else{ 6 };\n\n      The implementation is:\n      For pairs of values (0,1 then 2,3 then 4,5 etc)\n      If the first evaluates truthy, evaluate and return the second\n      If the first evaluates falsy, jump to the next pair (e.g, 0,1 to 2,3)\n      given one parameter, evaluate and return it. (it's an Else and all the If/ElseIf were false)\n      given 0 parameters, return NULL (not great practice, but there was no Else)\n      */\n      for (i = 0; i < values.length - 1; i += 2) {\n        if ( jsonLogic.truthy( jsonLogic.apply(values[i], data) ) ) {\n          return jsonLogic.apply(values[i+1], data);\n        }\n      }\n      if (values.length === i+1) {\n        return jsonLogic.apply(values[i], data);\n      }\n      return null;\n    } else if (op === \"and\") { // Return first falsy, or last\n      for (i=0; i < values.length; i+=1) {\n        current = jsonLogic.apply(values[i], data);\n        if ( ! jsonLogic.truthy(current)) {\n          return current;\n        }\n      }\n      return current; // Last\n    } else if (op === \"or\") {// Return first truthy, or last\n      for (i=0; i < values.length; i+=1) {\n        current = jsonLogic.apply(values[i], data);\n        if ( jsonLogic.truthy(current) ) {\n          return current;\n        }\n      }\n      return current; // Last\n    } else if (op === \"filter\") {\n      scopedData = jsonLogic.apply(values[0], data);\n      scopedLogic = values[1];\n\n      if ( ! Array.isArray(scopedData)) {\n        return [];\n      }\n      // Return only the elements from the array in the first argument,\n      // that return truthy when passed to the logic in the second argument.\n      // For parity with JavaScript, reindex the returned array\n      return scopedData.filter(function(datum) {\n        return jsonLogic.truthy( jsonLogic.apply(scopedLogic, datum));\n      });\n    } else if (op === \"map\") {\n      scopedData = jsonLogic.apply(values[0], data);\n      scopedLogic = values[1];\n\n      if ( ! Array.isArray(scopedData)) {\n        return [];\n      }\n\n      return scopedData.map(function(datum) {\n        return jsonLogic.apply(scopedLogic, datum);\n      });\n    } else if (op === \"reduce\") {\n      scopedData = jsonLogic.apply(values[0], data);\n      scopedLogic = values[1];\n      initial = typeof values[2] !== \"undefined\" ? jsonLogic.apply(values[2], data) : null;\n\n      if ( ! Array.isArray(scopedData)) {\n        return initial;\n      }\n\n      return scopedData.reduce(\n        function(accumulator, current) {\n          return jsonLogic.apply(\n            scopedLogic,\n            {current: current, accumulator: accumulator}\n          );\n        },\n        initial\n      );\n    } else if (op === \"all\") {\n      scopedData = jsonLogic.apply(values[0], data);\n      scopedLogic = values[1];\n      // All of an empty set is false. Note, some and none have correct fallback after the for loop\n      if ( ! Array.isArray(scopedData) || ! scopedData.length) {\n        return false;\n      }\n      for (i=0; i < scopedData.length; i+=1) {\n        if ( ! jsonLogic.truthy( jsonLogic.apply(scopedLogic, scopedData[i]) )) {\n          return false; // First falsy, short circuit\n        }\n      }\n      return true; // All were truthy\n    } else if (op === \"none\") {\n      scopedData = jsonLogic.apply(values[0], data);\n      scopedLogic = values[1];\n\n      if ( ! Array.isArray(scopedData) || ! scopedData.length) {\n        return true;\n      }\n      for (i=0; i < scopedData.length; i+=1) {\n        if ( jsonLogic.truthy( jsonLogic.apply(scopedLogic, scopedData[i]) )) {\n          return false; // First truthy, short circuit\n        }\n      }\n      return true; // None were truthy\n    } else if (op === \"some\") {\n      scopedData = jsonLogic.apply(values[0], data);\n      scopedLogic = values[1];\n\n      if ( ! Array.isArray(scopedData) || ! scopedData.length) {\n        return false;\n      }\n      for (i=0; i < scopedData.length; i+=1) {\n        if ( jsonLogic.truthy( jsonLogic.apply(scopedLogic, scopedData[i]) )) {\n          return true; // First truthy, short circuit\n        }\n      }\n      return false; // None were truthy\n    }\n\n    // Everyone else gets immediate depth-first recursion\n    values = values.map(function(val) {\n      return jsonLogic.apply(val, data);\n    });\n\n\n    // The operation is called with \"data\" bound to its \"this\" and \"values\" passed as arguments.\n    // Structured commands like % or > can name formal arguments while flexible commands (like missing or merge) can operate on the pseudo-array arguments\n    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments\n    if (operations.hasOwnProperty(op) && typeof operations[op] === \"function\") {\n      return operations[op].apply(data, values);\n    } else if (op.indexOf(\".\") > 0) { // Contains a dot, and not in the 0th position\n      var sub_ops = String(op).split(\".\");\n      var operation = operations;\n      for (i = 0; i < sub_ops.length; i++) {\n        if (!operation.hasOwnProperty(sub_ops[i])) {\n          throw new Error(\"Unrecognized operation \" + op +\n            \" (failed at \" + sub_ops.slice(0, i+1).join(\".\") + \")\");\n        }\n        // Descending into operations\n        operation = operation[sub_ops[i]];\n      }\n\n      return operation.apply(data, values);\n    }\n\n    throw new Error(\"Unrecognized operation \" + op );\n  };\n\n  jsonLogic.uses_data = function(logic) {\n    var collection = [];\n\n    if (jsonLogic.is_logic(logic)) {\n      var op = jsonLogic.get_operator(logic);\n      var values = logic[op];\n\n      if ( ! Array.isArray(values)) {\n        values = [values];\n      }\n\n      if (op === \"var\") {\n        // This doesn't cover the case where the arg to var is itself a rule.\n        collection.push(values[0]);\n      } else {\n        // Recursion!\n        values.forEach(function(val) {\n          collection.push.apply(collection, jsonLogic.uses_data(val) );\n        });\n      }\n    }\n\n    return arrayUnique(collection);\n  };\n\n  jsonLogic.add_operation = function(name, code) {\n    operations[name] = code;\n  };\n\n  jsonLogic.rm_operation = function(name) {\n    delete operations[name];\n  };\n\n  jsonLogic.rule_like = function(rule, pattern) {\n    // console.log(\"Is \". JSON.stringify(rule) . \" like \" . JSON.stringify(pattern) . \"?\");\n    if (pattern === rule) {\n      return true;\n    } // TODO : Deep object equivalency?\n    if (pattern === \"@\") {\n      return true;\n    } // Wildcard!\n    if (pattern === \"number\") {\n      return (typeof rule === \"number\");\n    }\n    if (pattern === \"string\") {\n      return (typeof rule === \"string\");\n    }\n    if (pattern === \"array\") {\n      // !logic test might be superfluous in JavaScript\n      return Array.isArray(rule) && ! jsonLogic.is_logic(rule);\n    }\n\n    if (jsonLogic.is_logic(pattern)) {\n      if (jsonLogic.is_logic(rule)) {\n        var pattern_op = jsonLogic.get_operator(pattern);\n        var rule_op = jsonLogic.get_operator(rule);\n\n        if (pattern_op === \"@\" || pattern_op === rule_op) {\n          // echo \"\\nOperators match, go deeper\\n\";\n          return jsonLogic.rule_like(\n            jsonLogic.get_values(rule, false),\n            jsonLogic.get_values(pattern, false)\n          );\n        }\n      }\n      return false; // pattern is logic, rule isn't, can't be eq\n    }\n\n    if (Array.isArray(pattern)) {\n      if (Array.isArray(rule)) {\n        if (pattern.length !== rule.length) {\n          return false;\n        }\n        /*\n          Note, array order MATTERS, because we're using this array test logic to consider arguments, where order can matter. (e.g., + is commutative, but '-' or 'if' or 'var' are NOT)\n        */\n        for (var i = 0; i < pattern.length; i += 1) {\n          // If any fail, we fail\n          if ( ! jsonLogic.rule_like(rule[i], pattern[i])) {\n            return false;\n          }\n        }\n        return true; // If they *all* passed, we pass\n      } else {\n        return false; // Pattern is array, rule isn't\n      }\n    }\n\n    // Not logic, not array, not a === match for rule.\n    return false;\n  };\n\n  return jsonLogic;\n}));\n\n\n//# sourceURL=webpack://Formio/./node_modules/json-logic-js/logic.js?");
 
 /***/ }),
 
@@ -4686,7 +4706,7 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Element_1 = __importDefault(__webpack_require__(/*! ./Element */ \"./lib/cjs/Element.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst displays_1 = __importDefault(__webpack_require__(/*! ./displays */ \"./lib/cjs/displays/index.js\"));\nconst templates_1 = __importDefault(__webpack_require__(/*! ./templates */ \"./lib/cjs/templates/index.js\"));\nconst FormioUtils = __importStar(__webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\"));\nclass Form extends Element_1.default {\n    constructor(elementOrForm, formOrOptions, options = {}) {\n        let element, form, formOptions;\n        if (elementOrForm instanceof HTMLElement) {\n            element = elementOrForm;\n            form = formOrOptions;\n            formOptions = options;\n        }\n        else {\n            element = null;\n            form = elementOrForm;\n            formOptions = formOrOptions || {};\n        }\n        if (Formio_1.Formio.options && Formio_1.Formio.options.form) {\n            formOptions = Object.assign(formOptions, Formio_1.Formio.options.form);\n        }\n        super(formOptions);\n        if (this.options.useSessionToken) {\n            Formio_1.Formio.useSessionToken(this.options);\n        }\n        this.ready = new Promise((resolve, reject) => {\n            this.readyResolve = resolve;\n            this.readyReject = reject;\n        });\n        this.instance = null;\n        if (element) {\n            if (this.element) {\n                delete this.element.component;\n            }\n            this.element = element;\n        }\n        else {\n            this.element = null;\n        }\n        if (form) {\n            this.setForm(form)\n                .then(() => this.readyResolve(this.instance))\n                .catch(this.readyReject);\n        }\n        this.options = formOptions;\n        this.options.events = this.events;\n        this.display = '';\n    }\n    createElement(tag, attrs, children) {\n        const element = document.createElement(tag);\n        for (const attr in attrs) {\n            if (attrs.hasOwnProperty(attr)) {\n                element.setAttribute(attr, attrs[attr]);\n            }\n        }\n        (children || []).forEach(child => {\n            element.appendChild(this.createElement(child.tag, child.attrs, child.children));\n        });\n        return element;\n    }\n    set loading(load) {\n        if (!this.element || this.options.noLoader) {\n            return;\n        }\n        if (load) {\n            if (this.loader) {\n                return;\n            }\n            this.loader = this.createElement('div', {\n                'class': 'formio-loader'\n            }, [{\n                    tag: 'div',\n                    attrs: {\n                        class: 'loader-wrapper'\n                    },\n                    children: [{\n                            tag: 'div',\n                            attrs: {\n                                class: 'loader text-center'\n                            }\n                        }]\n                }]);\n            this.element.appendChild(this.loader);\n        }\n        else if (this.loader) {\n            if (this.element.contains(this.loader)) {\n                this.element.removeChild(this.loader);\n            }\n            this.loader = null;\n        }\n    }\n    /**\n     * Create a new form instance provided the display of the form.\n     * @param {string} display - The display of the form, either \"wizard\", \"form\", or \"pdf\"\n     * @returns {Webform|Wizard|PDF} - The new form instance for the display.\n     */\n    create(display) {\n        if (this.options && (this.options.flatten || this.options.renderMode === 'flat')) {\n            display = 'form';\n        }\n        this.display = display;\n        if (displays_1.default.displays[display]) {\n            return new displays_1.default.displays[display](this.element, this.options);\n        }\n        else {\n            // eslint-disable-next-line new-cap\n            return new displays_1.default.displays['webform'](this.element, this.options);\n        }\n    }\n    /**\n     * Sets the form. Either as JSON or a URL to a form JSON schema.\n     * @param {string|object} formParam - Either the form JSON or the URL of the form json.\n     * @returns {void}\n     */\n    set form(formParam) {\n        this.setForm(formParam);\n    }\n    errorForm(err) {\n        return {\n            components: [\n                {\n                    'label': 'HTML',\n                    'tag': 'div',\n                    'className': 'error error-message alert alert-danger ui red message',\n                    'attrs': [\n                        {\n                            'attr': 'role',\n                            'value': 'alert'\n                        }\n                    ],\n                    'key': 'errorMessage',\n                    'type': 'htmlelement',\n                    'input': false,\n                    'content': typeof err === 'string' ? err : err.message,\n                }\n            ]\n        };\n    }\n    /**\n     * Check Subdirectories path and provide correct options\n     * @param {string} url - The the URL of the form json.\n     * @param {import('@formio/core').Form} form - The form json.\n     * @returns {object} The initial options with base and project.\n     */\n    getFormInitOptions(url, form) {\n        const options = {};\n        const index = url.indexOf(form === null || form === void 0 ? void 0 : form.path);\n        // form url doesn't include form path\n        if (index === -1) {\n            return options;\n        }\n        const projectUrl = url.substring(0, index - 1);\n        const urlParts = Formio_1.Formio.getUrlParts(projectUrl);\n        // project url doesn't include subdirectories path\n        if (!urlParts || urlParts.filter(part => !!part).length < 4) {\n            return options;\n        }\n        const baseUrl = `${urlParts[1]}${urlParts[2]}`;\n        // Skip if baseUrl has already been set\n        if (baseUrl !== Formio_1.Formio.baseUrl) {\n            return {\n                base: baseUrl,\n                project: projectUrl,\n            };\n        }\n        return {};\n    }\n    /**\n     * Sets the form to the JSON schema of a form.\n     * @param {import('@formio/core').Form | string} formParam - The form JSON to set this form to.\n     * @returns {Promise<Webform|Wizard|PDF>} - The webform instance that was created.\n     */\n    setForm(formParam) {\n        let result;\n        formParam = formParam || this.form;\n        if (typeof formParam === 'string') {\n            const formio = new Formio_1.Formio(formParam);\n            let error;\n            this.loading = true;\n            result = this.getSubmission(formio, this.options)\n                .catch((err) => {\n                error = err;\n            })\n                .then((submission) => {\n                return formio.loadForm()\n                    // If the form returned an error, show it instead of the form.\n                    .catch(err => {\n                    error = err;\n                })\n                    .then((form) => {\n                    // If the submission returned an error, show it instead of the form.\n                    if (error) {\n                        form = this.errorForm(error);\n                    }\n                    this.loading = false;\n                    this.instance = this.instance || this.create(form.display);\n                    // If we're in builder mode, instance.setUrl is not a function, so just manually set the URL.\n                    if (this.instance.setUrl) {\n                        const options = this.getFormInitOptions(formParam, form);\n                        this.instance.setUrl(formParam, options);\n                    }\n                    else {\n                        this.instance.url = formParam;\n                    }\n                    this.instance.nosubmit = false;\n                    this._form = this.instance.form = form;\n                    if (submission) {\n                        this.instance.submission = submission;\n                    }\n                    if (error) {\n                        throw error;\n                    }\n                    return this.instance;\n                });\n            });\n        }\n        else {\n            this.instance = this.instance || this.create(formParam.display);\n            this._form = this.instance.form = formParam;\n            result = this.instance.ready;\n        }\n        // A redraw has occurred so save off the new element in case of a setDisplay causing a rebuild.\n        return result.then(() => {\n            if (this.element) {\n                delete this.element.component;\n            }\n            this.element = this.instance.element;\n            return this.instance;\n        });\n    }\n    getSubmission(formio, opts) {\n        if (formio.submissionId) {\n            return formio.loadSubmission(null, opts);\n        }\n        return Promise.resolve();\n    }\n    /**\n     * Returns the loaded forms JSON.\n     * @returns {object} - The loaded form's JSON\n     */\n    get form() {\n        return this._form;\n    }\n    /**\n     * Changes the display of the form.\n     * @param {string} display - The display to set this form. Either \"wizard\", \"form\", or \"pdf\"\n     * @returns {Promise<Webform|Wizard|PDF>} - The form instance that was created after changing the display.\n     */\n    setDisplay(display) {\n        if ((this.display === display) && this.instance) {\n            return Promise.resolve(this.instance);\n        }\n        this.form.display = display;\n        this.instance.destroy();\n        this.instance = this.create(display);\n        return this.setForm(this.form);\n    }\n    empty() {\n        if (this.element) {\n            while (this.element.firstChild) {\n                this.element.removeChild(this.element.firstChild);\n            }\n        }\n    }\n    static embed(embed) {\n        return new Promise((resolve) => {\n            if (!embed || !embed.src) {\n                resolve();\n            }\n            const id = this.id || `formio-${Math.random().toString(36).substring(7)}`;\n            const className = embed.class || 'formio-form-wrapper';\n            let code = embed.styles ? `<link rel=\"stylesheet\" href=\"${embed.styles}\">` : '';\n            code += `<div id=\"${id}\" class=\"${className}\"></div>`;\n            document.write(code);\n            let attempts = 0;\n            const wait = setInterval(() => {\n                attempts++;\n                const formElement = document.getElementById(id);\n                if (formElement || attempts > 10) {\n                    resolve(new Form(formElement, embed.src).ready);\n                    clearInterval(wait);\n                }\n            }, 10);\n        });\n    }\n    /**\n     * Sanitize an html string.\n     * @param {string} dirty - The dirty html string to sanitize.\n     * @param {boolean} forceSanitize - If the string should be force sanitized.\n     * @returns {string} - The sanitized html string.\n     */\n    sanitize(dirty, forceSanitize) {\n        // If Sanitize is turned off\n        if (this.options.sanitize === false && !forceSanitize) {\n            return dirty;\n        }\n        return FormioUtils.sanitize(dirty, this.options);\n    }\n    setContent(element, content, forceSanitize) {\n        if (element instanceof HTMLElement) {\n            element.innerHTML = this.sanitize(content, forceSanitize);\n            return true;\n        }\n        return false;\n    }\n    /**\n     * Build a new form.\n     * @returns {Promise<Webform|Wizard|PDF>} - The form instance that was created.\n     */\n    build() {\n        if (!this.instance) {\n            return Promise.reject('Form not ready. Use form.ready promise');\n        }\n        if (!this.element) {\n            return Promise.reject('No DOM element for form.');\n        }\n        // Add temporary loader.\n        const template = (this.options && this.options.template) ? this.options.template : 'bootstrap';\n        const loader = templates_1.default[template].loader || templates_1.default.bootstrap.loader;\n        this.setContent(this.element, loader.form);\n        return this.render().then(html => {\n            this.setContent(this.element, html);\n            return this.attach(this.element).then(() => this.instance);\n        })\n            .then((param) => {\n            this.emit('build', param);\n            return param;\n        });\n    }\n    render() {\n        if (!this.instance) {\n            return Promise.reject('Form not ready. Use form.ready promise');\n        }\n        return Promise.resolve(this.instance.render())\n            .then((param) => {\n            this.emit('render', param);\n            return param;\n        });\n    }\n    attach(element) {\n        if (!this.instance) {\n            return Promise.reject('Form not ready. Use form.ready promise');\n        }\n        if (this.element) {\n            delete this.element.component;\n        }\n        this.element = element;\n        return this.instance.attach(this.element)\n            .then((param) => {\n            this.emit('attach', param);\n            return param;\n        });\n    }\n    teardown() {\n        super.teardown();\n        delete this.instance;\n        delete this.ready;\n    }\n}\nexports[\"default\"] = Form;\n// Allow simple embedding.\nFormio_1.Formio.embedForm = (embed) => Form.embed(embed);\n/**\n * Creates an easy to use interface for embedding webforms, pdfs, and wizards into your application.\n * @param {object} elementOrForm - The DOM element you wish to render this form within, or the form definition.\n * @param {object | string | FormOptions} formOrOptions - A Form JSON schema, the URL of a hosted form, or the form options.\n * @param {FormOptions} [options] - The options to create a new form instance.\n * @returns {Promise<Webform|Wizard|PDF>} - The form instance that was created.\n * @example\n * import { Formio } from '@formio/js';\n * Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example');\n */\nFormio_1.Formio.createForm = (elementOrForm, formOrOptions, options) => {\n    return (new Form(elementOrForm, formOrOptions, options)).ready;\n};\nFormio_1.Formio.Form = Form;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Form.js?");
+eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Element_1 = __importDefault(__webpack_require__(/*! ./Element */ \"./lib/cjs/Element.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst displays_1 = __importDefault(__webpack_require__(/*! ./displays */ \"./lib/cjs/displays/index.js\"));\nconst templates_1 = __importDefault(__webpack_require__(/*! ./templates */ \"./lib/cjs/templates/index.js\"));\nconst FormioUtils = __importStar(__webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\"));\nclass Form extends Element_1.default {\n    constructor(elementOrForm, formOrOptions, options = {}) {\n        let element, form, formOptions;\n        if (elementOrForm instanceof HTMLElement) {\n            element = elementOrForm;\n            form = formOrOptions;\n            formOptions = options;\n        }\n        else {\n            element = null;\n            form = elementOrForm;\n            formOptions = formOrOptions || {};\n        }\n        if (Formio_1.Formio.options && Formio_1.Formio.options.form) {\n            formOptions = Object.assign(formOptions, Formio_1.Formio.options.form);\n        }\n        super(formOptions);\n        if (this.options.useSessionToken) {\n            Formio_1.Formio.useSessionToken(this.options);\n        }\n        this.ready = new Promise((resolve, reject) => {\n            this.readyResolve = resolve;\n            this.readyReject = reject;\n        });\n        this.instance = null;\n        if (element) {\n            if (this.element) {\n                delete this.element.component;\n            }\n            this.element = element;\n        }\n        else {\n            this.element = null;\n        }\n        this.options = formOptions;\n        this.options.events = this.events;\n        if (form) {\n            this.setForm(form)\n                .then(() => this.readyResolve(this.instance))\n                .catch(this.readyReject);\n        }\n        this.display = '';\n    }\n    createElement(tag, attrs, children) {\n        const element = document.createElement(tag);\n        for (const attr in attrs) {\n            if (attrs.hasOwnProperty(attr)) {\n                element.setAttribute(attr, attrs[attr]);\n            }\n        }\n        (children || []).forEach(child => {\n            element.appendChild(this.createElement(child.tag, child.attrs, child.children));\n        });\n        return element;\n    }\n    set loading(load) {\n        if (!this.element || this.options.noLoader) {\n            return;\n        }\n        if (load) {\n            if (this.loader) {\n                return;\n            }\n            this.loader = this.createElement('div', {\n                'class': 'formio-loader'\n            }, [{\n                    tag: 'div',\n                    attrs: {\n                        class: 'loader-wrapper'\n                    },\n                    children: [{\n                            tag: 'div',\n                            attrs: {\n                                class: 'loader text-center'\n                            }\n                        }]\n                }]);\n            this.element.appendChild(this.loader);\n        }\n        else if (this.loader) {\n            if (this.element.contains(this.loader)) {\n                this.element.removeChild(this.loader);\n            }\n            this.loader = null;\n        }\n    }\n    /**\n     * Create a new form instance provided the display of the form.\n     * @param {string} display - The display of the form, either \"wizard\", \"form\", or \"pdf\"\n     * @returns {Webform|Wizard|PDF} - The new form instance for the display.\n     */\n    create(display) {\n        if (this.options && (this.options.flatten || this.options.renderMode === 'flat')) {\n            display = 'form';\n        }\n        this.display = display;\n        if (displays_1.default.displays[display]) {\n            return new displays_1.default.displays[display](this.element, this.options);\n        }\n        else {\n            // eslint-disable-next-line new-cap\n            return new displays_1.default.displays['webform'](this.element, this.options);\n        }\n    }\n    /**\n     * Sets the form. Either as JSON or a URL to a form JSON schema.\n     * @param {string|object} formParam - Either the form JSON or the URL of the form json.\n     * @returns {void}\n     */\n    set form(formParam) {\n        this.setForm(formParam);\n    }\n    errorForm(err) {\n        return {\n            components: [\n                {\n                    'label': 'HTML',\n                    'tag': 'div',\n                    'className': 'error error-message alert alert-danger ui red message',\n                    'attrs': [\n                        {\n                            'attr': 'role',\n                            'value': 'alert'\n                        }\n                    ],\n                    'key': 'errorMessage',\n                    'type': 'htmlelement',\n                    'input': false,\n                    'content': typeof err === 'string' ? err : err.message,\n                }\n            ]\n        };\n    }\n    /**\n     * Check Subdirectories path and provide correct options\n     * @param {string} url - The the URL of the form json.\n     * @param {import('@formio/core').Form} form - The form json.\n     * @returns {object} The initial options with base and project.\n     */\n    getFormInitOptions(url, form) {\n        const options = {};\n        const index = url.indexOf(form === null || form === void 0 ? void 0 : form.path);\n        // form url doesn't include form path\n        if (index === -1) {\n            return options;\n        }\n        const projectUrl = url.substring(0, index - 1);\n        const urlParts = Formio_1.Formio.getUrlParts(projectUrl);\n        // project url doesn't include subdirectories path\n        if (!urlParts || urlParts.filter(part => !!part).length < 4) {\n            return options;\n        }\n        const baseUrl = `${urlParts[1]}${urlParts[2]}`;\n        // Skip if baseUrl has already been set\n        if (baseUrl !== Formio_1.Formio.baseUrl) {\n            return {\n                base: baseUrl,\n                project: projectUrl,\n            };\n        }\n        return {};\n    }\n    /**\n     * Sets the form to the JSON schema of a form.\n     * @param {import('@formio/core').Form | string} formParam - The form JSON to set this form to.\n     * @returns {Promise<Webform|Wizard|PDF>} - The webform instance that was created.\n     */\n    setForm(formParam) {\n        let result;\n        formParam = formParam || this.form;\n        if (typeof formParam === 'string') {\n            const formio = new Formio_1.Formio(formParam);\n            let error;\n            this.loading = true;\n            result = this.getSubmission(formio, this.options)\n                .catch((err) => {\n                error = err;\n            })\n                .then((submission) => {\n                return formio.loadForm()\n                    // If the form returned an error, show it instead of the form.\n                    .catch(err => {\n                    error = err;\n                })\n                    .then((form) => {\n                    // If the submission returned an error, show it instead of the form.\n                    if (error) {\n                        form = this.errorForm(error);\n                    }\n                    this.loading = false;\n                    this.instance = this.instance || this.create(form.display);\n                    // If we're in builder mode, instance.setUrl is not a function, so just manually set the URL.\n                    if (this.instance.setUrl) {\n                        const options = this.getFormInitOptions(formParam, form);\n                        this.instance.setUrl(formParam, options);\n                    }\n                    else {\n                        this.instance.url = formParam;\n                    }\n                    this.instance.nosubmit = false;\n                    this._form = this.instance.form = form;\n                    if (submission) {\n                        this.instance.submission = submission;\n                    }\n                    if (error) {\n                        throw error;\n                    }\n                    return this.instance;\n                });\n            });\n        }\n        else {\n            this.instance = this.instance || this.create(formParam.display);\n            this._form = this.instance.form = formParam;\n            result = this.instance.ready;\n        }\n        // A redraw has occurred so save off the new element in case of a setDisplay causing a rebuild.\n        return result.then(() => {\n            if (this.element) {\n                delete this.element.component;\n            }\n            this.element = this.instance.element;\n            return this.instance;\n        });\n    }\n    getSubmission(formio, opts) {\n        if (formio.submissionId) {\n            return formio.loadSubmission(null, opts);\n        }\n        return Promise.resolve();\n    }\n    /**\n     * Returns the loaded forms JSON.\n     * @returns {object} - The loaded form's JSON\n     */\n    get form() {\n        return this._form;\n    }\n    /**\n     * Changes the display of the form.\n     * @param {string} display - The display to set this form. Either \"wizard\", \"form\", or \"pdf\"\n     * @returns {Promise<Webform|Wizard|PDF>} - The form instance that was created after changing the display.\n     */\n    setDisplay(display) {\n        if ((this.display === display) && this.instance) {\n            return Promise.resolve(this.instance);\n        }\n        this.form.display = display;\n        this.instance.destroy();\n        this.instance = this.create(display);\n        return this.setForm(this.form);\n    }\n    empty() {\n        if (this.element) {\n            while (this.element.firstChild) {\n                this.element.removeChild(this.element.firstChild);\n            }\n        }\n    }\n    static embed(embed) {\n        return new Promise((resolve) => {\n            if (!embed || !embed.src) {\n                resolve();\n            }\n            const id = this.id || `formio-${Math.random().toString(36).substring(7)}`;\n            const className = embed.class || 'formio-form-wrapper';\n            let code = embed.styles ? `<link rel=\"stylesheet\" href=\"${embed.styles}\">` : '';\n            code += `<div id=\"${id}\" class=\"${className}\"></div>`;\n            document.write(code);\n            let attempts = 0;\n            const wait = setInterval(() => {\n                attempts++;\n                const formElement = document.getElementById(id);\n                if (formElement || attempts > 10) {\n                    resolve(new Form(formElement, embed.src).ready);\n                    clearInterval(wait);\n                }\n            }, 10);\n        });\n    }\n    /**\n     * Sanitize an html string.\n     * @param {string} dirty - The dirty html string to sanitize.\n     * @param {boolean} forceSanitize - If the string should be force sanitized.\n     * @returns {string} - The sanitized html string.\n     */\n    sanitize(dirty, forceSanitize) {\n        // If Sanitize is turned off\n        if (this.options.sanitize === false && !forceSanitize) {\n            return dirty;\n        }\n        return FormioUtils.sanitize(dirty, this.options);\n    }\n    setContent(element, content, forceSanitize) {\n        if (element instanceof HTMLElement) {\n            element.innerHTML = this.sanitize(content, forceSanitize);\n            return true;\n        }\n        return false;\n    }\n    /**\n     * Build a new form.\n     * @returns {Promise<Webform|Wizard|PDF>} - The form instance that was created.\n     */\n    build() {\n        if (!this.instance) {\n            return Promise.reject('Form not ready. Use form.ready promise');\n        }\n        if (!this.element) {\n            return Promise.reject('No DOM element for form.');\n        }\n        // Add temporary loader.\n        const template = (this.options && this.options.template) ? this.options.template : 'bootstrap';\n        const loader = templates_1.default[template].loader || templates_1.default.bootstrap.loader;\n        this.setContent(this.element, loader.form);\n        return this.render().then(html => {\n            this.setContent(this.element, html);\n            return this.attach(this.element).then(() => this.instance);\n        })\n            .then((param) => {\n            this.emit('build', param);\n            return param;\n        });\n    }\n    render() {\n        if (!this.instance) {\n            return Promise.reject('Form not ready. Use form.ready promise');\n        }\n        return Promise.resolve(this.instance.render())\n            .then((param) => {\n            this.emit('render', param);\n            return param;\n        });\n    }\n    attach(element) {\n        if (!this.instance) {\n            return Promise.reject('Form not ready. Use form.ready promise');\n        }\n        if (this.element) {\n            delete this.element.component;\n        }\n        this.element = element;\n        return this.instance.attach(this.element)\n            .then((param) => {\n            this.emit('attach', param);\n            return param;\n        });\n    }\n    teardown() {\n        super.teardown();\n        delete this.instance;\n        delete this.ready;\n    }\n}\nexports[\"default\"] = Form;\n// Allow simple embedding.\nFormio_1.Formio.embedForm = (embed) => Form.embed(embed);\n/**\n * Creates an easy to use interface for embedding webforms, pdfs, and wizards into your application.\n * @param {object} elementOrForm - The DOM element you wish to render this form within, or the form definition.\n * @param {object | string | FormOptions} formOrOptions - A Form JSON schema, the URL of a hosted form, or the form options.\n * @param {FormOptions} [options] - The options to create a new form instance.\n * @returns {Promise<Webform|Wizard|PDF>} - The form instance that was created.\n * @example\n * import { Formio } from '@formio/js';\n * Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example');\n */\nFormio_1.Formio.createForm = (elementOrForm, formOrOptions, options) => {\n    return (new Form(elementOrForm, formOrOptions, options)).ready;\n};\nFormio_1.Formio.Form = Form;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Form.js?");
 
 /***/ }),
 
@@ -4719,7 +4739,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;\n        const isAllowPrevious = this.isAllowPrevious();\n        this.attachTooltips(this.refs[`${this.wizardKey}-tooltip`], this.currentPanel.tooltip);\n        if (this.isBreadcrumbClickable() || isAllowPrevious) {\n            (_a = this.refs[`${this.wizardKey}-link`]) === null || _a === void 0 ? void 0 : _a.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.validateCurrentPage();\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();\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 go to the next page\n        const errors = this.validateCurrentPage({ dirty: true });\n        if (errors.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);\n            return Promise.reject(this.showErrors(errors, true));\n        }\n    }\n    validateCurrentPage(flags = {}) {\n        var _a;\n        // Accessing the parent ensures the right instance (whether it's the parent Wizard or a nested Wizard) performs its validation\n        return (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.parent.validateComponents(this.currentPage.component.components, this.currentPage.parent.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        const errors = this.validate(this.localData, { dirty: false });\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    redraw() {\n        var _a, _b;\n        if ((_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.modalEdit) {\n            return this.parent.redraw();\n        }\n        return super.redraw();\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, childErrors) && check, true);\n    }\n    get errors() {\n        if (!this.isLastPage()) {\n            return this.currentPage.errors;\n        }\n        return 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 === topPanel);\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;\n        const isAllowPrevious = this.isAllowPrevious();\n        this.attachTooltips(this.refs[`${this.wizardKey}-tooltip`], this.currentPanel.tooltip);\n        if (this.isBreadcrumbClickable() || isAllowPrevious) {\n            (_a = this.refs[`${this.wizardKey}-link`]) === null || _a === void 0 ? void 0 : _a.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.validateCurrentPage();\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();\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 go to the next page\n        const errors = this.validateCurrentPage({ dirty: true });\n        if (errors.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);\n            return Promise.reject(this.showErrors(errors, true));\n        }\n    }\n    validateCurrentPage(flags = {}) {\n        var _a;\n        // Accessing the parent ensures the right instance (whether it's the parent Wizard or a nested Wizard) performs its validation\n        return (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.parent.validateComponents(this.currentPage.component.components, this.currentPage.parent.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        const errors = this.validate(this.localData, { dirty: false });\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    redraw() {\n        var _a, _b;\n        if ((_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.modalEdit) {\n            return this.parent.redraw();\n        }\n        return super.redraw();\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, childErrors) && check, true);\n    }\n    get errors() {\n        if (!this.isLastPage()) {\n            return this.currentPage.errors;\n        }\n        return 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 === topPanel);\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?");
 
 /***/ }),
 
@@ -4961,7 +4981,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Component_1 = __importDefault(__webpack_require__(/*! ../component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst NestedDataComponent_1 = __importDefault(__webpack_require__(/*! ../nesteddata/NestedDataComponent */ \"./lib/cjs/components/_classes/nesteddata/NestedDataComponent.js\"));\nclass NestedArrayComponent extends NestedDataComponent_1.default {\n    static schema(...extend) {\n        return NestedDataComponent_1.default.schema({\n            disableAddingRemovingRows: false\n        }, ...extend);\n    }\n    static savedValueTypes() {\n        return [utils_1.componentValueTypes.array];\n    }\n    componentContext(component) {\n        return this.iteratableRows[component.rowIndex].data;\n    }\n    get iteratableRows() {\n        throw new Error('Getter #iteratableRows() is not implemented');\n    }\n    get rowIndex() {\n        return super.rowIndex;\n    }\n    set rowIndex(value) {\n        this._rowIndex = value;\n    }\n    init() {\n        super.init();\n        this.prevHasAddButton = this.hasAddButton();\n    }\n    checkAddButtonChanged() {\n        const isAddButton = this.hasAddButton();\n        if (isAddButton !== this.prevHasAddButton) {\n            this.prevHasAddButton = isAddButton;\n            this.redraw();\n        }\n    }\n    checkData(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        this.checkAddButtonChanged();\n        return this.processRows('checkData', data, flags, Component_1.default.prototype.checkData.call(this, data, flags, row));\n    }\n    processRows(method, data, opts, defaultValue, silentCheck) {\n        return this.iteratableRows.reduce((valid, row, rowIndex) => {\n            if (!(opts === null || opts === void 0 ? void 0 : opts.rowIndex) || (opts === null || opts === void 0 ? void 0 : opts.rowIndex) === rowIndex) {\n                return this.processRow(method, data, opts, row.data, row.components, silentCheck) && valid;\n            }\n            else {\n                return valid;\n            }\n        }, defaultValue);\n    }\n    validate(data, flags = {}) {\n        data = data || this.data;\n        return this.validateComponents([this.component], data, flags);\n    }\n    checkRow(...args) {\n        console.log('Deprecation Warning: checkRow method has been replaced with processRow');\n        return this.processRow.call(this, ...args);\n    }\n    processRow(method, data, opts, row, components, silentCheck) {\n        if (opts === null || opts === void 0 ? void 0 : opts.isolateRow) {\n            silentCheck = true;\n            opts.noRefresh = true;\n        }\n        const valid = lodash_1.default.reduce(components, (valid, component) => component[method](data, opts, row, silentCheck) && valid, true);\n        if (opts === null || opts === void 0 ? void 0 : opts.noRefresh) {\n            delete opts.noRefresh;\n        }\n        return valid;\n    }\n    hasAddButton() {\n        const maxLength = lodash_1.default.get(this.component, 'validate.maxLength');\n        const conditionalAddButton = lodash_1.default.get(this.component, 'conditionalAddButton');\n        return !this.component.disableAddingRemovingRows &&\n            !this.options.readOnly &&\n            !this.disabled &&\n            this.fullMode &&\n            !this.options.preview &&\n            (!maxLength || (this.iteratableRows.length < maxLength)) &&\n            (!conditionalAddButton || this.evaluate(conditionalAddButton, {\n                value: this.dataValue,\n            }, 'show'));\n    }\n    getComponent(path, fn, originalPath) {\n        originalPath = originalPath || (0, utils_1.getStringFromComponentPath)(path);\n        if (this.componentsMap.hasOwnProperty(originalPath)) {\n            if (fn) {\n                return fn(this.componentsMap[originalPath]);\n            }\n            else {\n                return this.componentsMap[originalPath];\n            }\n        }\n        path = Array.isArray(path) ? path : [path];\n        let key = path.shift();\n        const remainingPath = path;\n        let result = [];\n        let possibleComp = null;\n        let comp = null;\n        let rowIndex = null;\n        if (lodash_1.default.isNumber(key)) {\n            rowIndex = key;\n            key = remainingPath.shift();\n        }\n        if (!lodash_1.default.isString(key)) {\n            return result;\n        }\n        this.everyComponent((component, components) => {\n            if (component.component.key === key) {\n                possibleComp = component;\n                if (remainingPath.length > 0 && 'getComponent' in component) {\n                    comp = component.getComponent(remainingPath, fn, originalPath);\n                }\n                else if (fn) {\n                    fn(component, components);\n                }\n                result = rowIndex !== null ? comp : result.concat(comp || possibleComp);\n            }\n        }, rowIndex);\n        if ((!result || result.length === 0) && possibleComp) {\n            result = rowIndex !== null ? possibleComp : [possibleComp];\n        }\n        return result;\n    }\n    everyComponent(fn, rowIndex, options = {}) {\n        if (lodash_1.default.isObject(rowIndex)) {\n            options = rowIndex;\n            rowIndex = null;\n        }\n        if (options === null || options === void 0 ? void 0 : options.email) {\n            return;\n        }\n        const components = this.getComponents(rowIndex);\n        lodash_1.default.each(components, (component, index) => {\n            if (fn(component, components, index) === false) {\n                return false;\n            }\n            if (typeof component.everyComponent === 'function') {\n                if (component.everyComponent(fn, options) === false) {\n                    return false;\n                }\n            }\n        });\n    }\n    _getEmailTableHeader(options) {\n        let row = '';\n        const getHeaderCell = (component) => {\n            if (!component.isInputComponent || !component.visible || component.skipInEmail) {\n                return '';\n            }\n            const label = component.label || component.key;\n            return `<th style=\"padding: 5px 10px;\">${label}</th>`;\n        };\n        const components = this.getComponents(0);\n        for (const component of components) {\n            if (component.isInputComponent) {\n                row += getHeaderCell(component);\n            }\n            else if ((0, utils_1.isLayoutComponent)(component) && typeof component.everyComponent === 'function') {\n                component.everyComponent((comp) => {\n                    row += getHeaderCell(comp);\n                }, options);\n            }\n        }\n        return `<thead><tr>${row}</tr></thead>`;\n    }\n    _getEmailTableBody(options) {\n        const getBodyCell = (component) => {\n            if (!component.isInputComponent || !component.visible || component.skipInEmail) {\n                return '';\n            }\n            return `<td style=\"padding: 5px 10px;\">${component.getView(component.dataValue, options)}</td>`;\n        };\n        const rows = [];\n        for (const { components } of this.iteratableRows) {\n            let row = '';\n            for (const component of components) {\n                if (component.isInputComponent) {\n                    row += getBodyCell(component);\n                }\n                else if ((0, utils_1.isLayoutComponent)(component) && typeof component.everyComponent === 'function') {\n                    component.everyComponent((comp) => {\n                        row += getBodyCell(comp);\n                    }, options);\n                }\n            }\n            rows.push(`<tr>${row}</tr>`);\n        }\n        return `<tbody>${rows.join('')}</tbody>`;\n    }\n    getValueAsString(value, options) {\n        if (options === null || options === void 0 ? void 0 : options.email) {\n            return `\n        <table border=\"1\" style=\"width:100%\">\n          ${this._getEmailTableHeader(options)}\n          ${this._getEmailTableBody(options)}\n        </table>\n      `;\n        }\n        if (!value || !value.length) {\n            return '';\n        }\n        return super.getValueAsString(value, options);\n    }\n    getComponents(rowIndex) {\n        if (rowIndex !== undefined && rowIndex !== null) {\n            if (!this.iteratableRows[rowIndex]) {\n                return [];\n            }\n            return this.iteratableRows[rowIndex].components;\n        }\n        return super.getComponents();\n    }\n}\nexports[\"default\"] = NestedArrayComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Component_1 = __importDefault(__webpack_require__(/*! ../component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst NestedDataComponent_1 = __importDefault(__webpack_require__(/*! ../nesteddata/NestedDataComponent */ \"./lib/cjs/components/_classes/nesteddata/NestedDataComponent.js\"));\nclass NestedArrayComponent extends NestedDataComponent_1.default {\n    static schema(...extend) {\n        return NestedDataComponent_1.default.schema({\n            disableAddingRemovingRows: false\n        }, ...extend);\n    }\n    static savedValueTypes() {\n        return [utils_1.componentValueTypes.array];\n    }\n    componentContext(component) {\n        return this.iteratableRows[component.rowIndex].data;\n    }\n    get iteratableRows() {\n        throw new Error('Getter #iteratableRows() is not implemented');\n    }\n    get rowIndex() {\n        return super.rowIndex;\n    }\n    set rowIndex(value) {\n        this._rowIndex = value;\n    }\n    init() {\n        super.init();\n        this.prevHasAddButton = this.hasAddButton();\n    }\n    checkAddButtonChanged() {\n        const isAddButton = this.hasAddButton();\n        if (isAddButton !== this.prevHasAddButton) {\n            this.prevHasAddButton = isAddButton;\n            this.redraw();\n        }\n    }\n    checkData(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        this.checkAddButtonChanged();\n        return this.processRows('checkData', data, flags, Component_1.default.prototype.checkData.call(this, data, flags, row));\n    }\n    processRows(method, data, opts, defaultValue, silentCheck) {\n        return this.iteratableRows.reduce((valid, row, rowIndex) => {\n            if (!(opts === null || opts === void 0 ? void 0 : opts.rowIndex) || (opts === null || opts === void 0 ? void 0 : opts.rowIndex) === rowIndex) {\n                return this.processRow(method, data, opts, row.data, row.components, silentCheck) && valid;\n            }\n            else {\n                return valid;\n            }\n        }, defaultValue);\n    }\n    validate(data, flags = {}) {\n        data = data || this.data;\n        return this.validateComponents([this.component], data, flags);\n    }\n    checkRow(...args) {\n        console.log('Deprecation Warning: checkRow method has been replaced with processRow');\n        return this.processRow.call(this, ...args);\n    }\n    processRow(method, data, opts, row, components, silentCheck) {\n        if (opts === null || opts === void 0 ? void 0 : opts.isolateRow) {\n            silentCheck = true;\n            opts.noRefresh = true;\n        }\n        const valid = lodash_1.default.reduce(components, (valid, component) => component[method](data, opts, row, silentCheck) && valid, true);\n        if (opts === null || opts === void 0 ? void 0 : opts.noRefresh) {\n            delete opts.noRefresh;\n        }\n        return valid;\n    }\n    hasAddButton() {\n        const maxLength = lodash_1.default.get(this.component, 'validate.maxLength');\n        const conditionalAddButton = lodash_1.default.get(this.component, 'conditionalAddButton');\n        return !this.component.disableAddingRemovingRows &&\n            !this.options.readOnly &&\n            !this.disabled &&\n            this.fullMode &&\n            !this.options.preview &&\n            (!maxLength || (this.iteratableRows.length < maxLength)) &&\n            (!conditionalAddButton || this.evaluate(conditionalAddButton, {\n                value: this.dataValue,\n            }, 'show'));\n    }\n    getComponent(path, fn, originalPath) {\n        originalPath = originalPath || (0, utils_1.getStringFromComponentPath)(path);\n        if (this.componentsMap.hasOwnProperty(originalPath)) {\n            if (fn) {\n                return fn(this.componentsMap[originalPath]);\n            }\n            else {\n                return this.componentsMap[originalPath];\n            }\n        }\n        path = Array.isArray(path) ? path : [path];\n        let key = path.shift();\n        const remainingPath = path;\n        let result = [];\n        let possibleComp = null;\n        let comp = null;\n        let rowIndex = null;\n        if (lodash_1.default.isNumber(key)) {\n            rowIndex = key;\n            key = remainingPath.shift();\n        }\n        if (!lodash_1.default.isString(key)) {\n            return result;\n        }\n        this.everyComponent((component, components) => {\n            if (component.component.key === key) {\n                possibleComp = component;\n                if (remainingPath.length > 0 && 'getComponent' in component) {\n                    comp = component.getComponent(remainingPath, fn, originalPath);\n                }\n                else if (fn) {\n                    fn(component, components);\n                }\n                result = rowIndex !== null ? comp : result.concat(comp || possibleComp);\n            }\n        }, rowIndex);\n        if ((!result || result.length === 0) && possibleComp) {\n            result = rowIndex !== null ? possibleComp : [possibleComp];\n        }\n        return result;\n    }\n    everyComponent(fn, rowIndex, options = {}) {\n        if (lodash_1.default.isObject(rowIndex)) {\n            options = rowIndex;\n            rowIndex = null;\n        }\n        if (options === null || options === void 0 ? void 0 : options.email) {\n            return;\n        }\n        const components = this.getComponents(rowIndex);\n        lodash_1.default.each(components, (component, index) => {\n            if (fn(component, components, index) === false) {\n                return false;\n            }\n            if (typeof component.everyComponent === 'function') {\n                if (component.everyComponent(fn, options) === false) {\n                    return false;\n                }\n            }\n        });\n    }\n    _getEmailTableHeader(options) {\n        let row = '';\n        const getHeaderCell = (component) => {\n            if (!component.isInputComponent || !component.visible || component.skipInEmail) {\n                return '';\n            }\n            const label = component.label || component.key;\n            return `<th style=\"padding: 5px 10px;\">${label}</th>`;\n        };\n        const components = this.getComponents(0);\n        for (const component of components) {\n            if (component.isInputComponent) {\n                row += getHeaderCell(component);\n            }\n            else if ((0, utils_1.isLayoutComponent)(component) && typeof component.everyComponent === 'function') {\n                component.everyComponent((comp) => {\n                    row += getHeaderCell(comp);\n                }, options);\n            }\n        }\n        return `<thead><tr>${row}</tr></thead>`;\n    }\n    _getEmailTableBody(options) {\n        const getBodyCell = (component) => {\n            if (!component.isInputComponent || !component.visible || component.skipInEmail) {\n                return '';\n            }\n            return `<td style=\"padding: 5px 10px;\">${component.getView(component.dataValue, options)}</td>`;\n        };\n        const rows = [];\n        for (const { components } of this.iteratableRows) {\n            let row = '';\n            for (const component of components) {\n                if (component.isInputComponent) {\n                    row += getBodyCell(component);\n                }\n                else if ((0, utils_1.isLayoutComponent)(component) && typeof component.everyComponent === 'function') {\n                    component.everyComponent((comp) => {\n                        row += getBodyCell(comp);\n                    }, options);\n                }\n            }\n            rows.push(`<tr>${row}</tr>`);\n        }\n        return `<tbody>${rows.join('')}</tbody>`;\n    }\n    getValueAsString(value, options) {\n        if (options === null || options === void 0 ? void 0 : options.email) {\n            return `\n        <table border=\"1\" style=\"width:100%\">\n          ${this._getEmailTableHeader(options)}\n          ${this._getEmailTableBody(options)}\n        </table>\n      `;\n        }\n        if (!value || !value.length) {\n            return '';\n        }\n        return super.getValueAsString(value, options);\n    }\n    getComponents(rowIndex) {\n        if (rowIndex !== undefined && rowIndex !== null) {\n            if (!this.iteratableRows[rowIndex]) {\n                return [];\n            }\n            return this.iteratableRows[rowIndex].components;\n        }\n        return super.getComponents();\n    }\n    removeSubmissionMetadataRow(index) {\n        const componentMetadata = lodash_1.default.get(this.root, `submission.metadata.selectData.${this.path}`, null);\n        if (lodash_1.default.isArray(componentMetadata)) {\n            componentMetadata.splice(index, 1);\n        }\n    }\n}\nexports[\"default\"] = NestedArrayComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js?");
 
 /***/ }),
 
@@ -5071,7 +5091,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst NestedArrayComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/nestedarray/NestedArrayComponent */ \"./lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Components_1 = __importDefault(__webpack_require__(/*! ../Components */ \"./lib/cjs/components/Components.js\"));\nclass DataGridComponent extends NestedArrayComponent_1.default {\n    static schema(...extend) {\n        return NestedArrayComponent_1.default.schema({\n            label: 'Data Grid',\n            key: 'dataGrid',\n            type: 'datagrid',\n            clearOnHide: true,\n            input: true,\n            tree: true,\n            components: []\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Data Grid',\n            icon: 'th',\n            group: 'data',\n            documentation: '/userguide/form-building/data-components#data-grid',\n            showPreview: false,\n            weight: 30,\n            schema: DataGridComponent.schema()\n        };\n    }\n    constructor(...args) {\n        super(...args);\n        this.type = 'datagrid';\n        this.tabIndex = 0;\n    }\n    init() {\n        this.components = this.components || [];\n        // Add new values based on minLength.\n        this.rows = [];\n        this.columns = [...this.component.components];\n        if (this.initRows || !lodash_1.default.isEqual(this.dataValue, this.emptyValue)) {\n            this.createRows(true);\n        }\n        if (this.allowReorder) {\n            this.dragulaReady = this.getDragula();\n        }\n        this.visibleColumns = {};\n        this.prevHasAddButton = this.hasAddButton();\n        this.checkColumns();\n    }\n    get dataValue() {\n        const dataValue = super.dataValue;\n        if (!dataValue || !Array.isArray(dataValue)) {\n            return this.emptyValue;\n        }\n        return dataValue;\n    }\n    set dataValue(value) {\n        super.dataValue = value;\n    }\n    get defaultSchema() {\n        return DataGridComponent.schema();\n    }\n    get initEmpty() {\n        return this.component.initEmpty || this.component.noFirstRow;\n    }\n    get initRows() {\n        return this.builderMode || this.path === 'defaultValue' || !this.initEmpty;\n    }\n    get emptyValue() {\n        return this.initEmpty ? [] : [{}];\n    }\n    get addAnotherPosition() {\n        return lodash_1.default.get(this.component, 'addAnotherPosition', 'bottom');\n    }\n    get minLength() {\n        if (this.hasRowGroups()) {\n            return lodash_1.default.sum(this.getGroupSizes());\n        }\n        else {\n            return lodash_1.default.get(this.component, 'validate.minLength', 0);\n        }\n    }\n    get defaultValue() {\n        const isBuilderMode = this.builderMode;\n        const isEmptyInit = this.initEmpty;\n        // Ensure we have one and only one row in builder mode.\n        if (isBuilderMode || (isEmptyInit && !this.dataValue.length)) {\n            return isEmptyInit && !isBuilderMode ? [] : [{}];\n        }\n        const value = super.defaultValue;\n        let defaultValue;\n        if (Array.isArray(value)) {\n            defaultValue = value;\n        }\n        else if (value && (typeof value === 'object')) {\n            defaultValue = [value];\n        }\n        else {\n            defaultValue = this.emptyValue;\n        }\n        for (let dIndex = defaultValue.length; dIndex < this.minLength; dIndex++) {\n            defaultValue.push({});\n        }\n        return defaultValue;\n    }\n    set disabled(disabled) {\n        super.disabled = disabled;\n        lodash_1.default.each(this.refs[`${this.datagridKey}-addRow`], (button) => {\n            button.disabled = disabled;\n        });\n        lodash_1.default.each(this.refs[`${this.datagridKey}-removeRow`], (button) => {\n            button.disabled = disabled;\n        });\n    }\n    get disabled() {\n        return super.disabled;\n    }\n    get datagridKey() {\n        return `datagrid-${this.key}`;\n    }\n    get allowReorder() {\n        return !this.options.readOnly && lodash_1.default.get(this.component, 'reorder', false);\n    }\n    get iteratableRows() {\n        return this.rows.map((row, index) => ({\n            components: row,\n            data: this.dataValue[index],\n        }));\n    }\n    isEmpty(value = this.dataValue) {\n        var _a;\n        const isEmpty = super.isEmpty(value);\n        if ((_a = this.components) === null || _a === void 0 ? void 0 : _a.length) {\n            return this.components.reduce((isEmpty, component) => {\n                return isEmpty && component.isEmpty();\n            }, true);\n        }\n        return isEmpty;\n    }\n    /**\n     * Split rows into chunks.\n     * @param {number[]} groups - array of numbers where each item is size of group\n     * @param {Array<T>} rows - rows collection\n     * @returns {Array<T[]>} - The chunked rows\n     */\n    getRowChunks(groups, rows) {\n        const [, chunks] = groups.reduce(([startIndex, acc], size) => {\n            const endIndex = startIndex + size;\n            return [endIndex, [...acc, [startIndex, endIndex]]];\n        }, [0, []]);\n        return chunks.map(range => lodash_1.default.slice(rows, ...range));\n    }\n    /**\n     * Create groups object.\n     * Each key in object represents index of first row in group.\n     * @returns {object} - The groups object.\n     */\n    getGroups() {\n        const groups = lodash_1.default.get(this.component, 'rowGroups', []);\n        const sizes = lodash_1.default.map(groups, 'numberOfRows').slice(0, -1);\n        const indexes = sizes.reduce((groupIndexes, size) => {\n            const last = groupIndexes[groupIndexes.length - 1];\n            return groupIndexes.concat(last + size);\n        }, [0]);\n        return groups.reduce((gidxs, group, idx) => {\n            return Object.assign(Object.assign({}, gidxs), { [indexes[idx]]: group });\n        }, {});\n    }\n    /**\n     * Get group sizes.\n     * @returns {number[]} - The array of group sizes.\n     */\n    getGroupSizes() {\n        return lodash_1.default.map(lodash_1.default.get(this.component, 'rowGroups', []), 'numberOfRows');\n    }\n    hasRowGroups() {\n        return lodash_1.default.get(this, 'component.enableRowGroups', false) && !this.builderMode;\n    }\n    totalRowsNumber(groups) {\n        return lodash_1.default.sum(lodash_1.default.map(groups, 'numberOfRows'));\n    }\n    setStaticValue(n) {\n        this.dataValue = lodash_1.default.range(n).map(() => ({}));\n    }\n    hasExtraColumn() {\n        return (this.hasRemoveButtons() || this.canAddColumn);\n    }\n    hasRemoveButtons() {\n        return !this.builderMode && !this.component.disableAddingRemovingRows &&\n            !this.options.readOnly &&\n            !this.disabled &&\n            this.fullMode &&\n            (this.dataValue.length > lodash_1.default.get(this.component, 'validate.minLength', 0));\n    }\n    hasTopSubmit() {\n        return this.hasAddButton() && ['top', 'both'].includes(this.addAnotherPosition);\n    }\n    hasBottomSubmit() {\n        return this.hasAddButton() && ['bottom', 'both'].includes(this.addAnotherPosition);\n    }\n    get canAddColumn() {\n        return this.builderMode && !this.options.design;\n    }\n    render() {\n        const columns = this.getColumns();\n        let columnExtra = 0;\n        const hasRemoveButtons = this.hasRemoveButtons();\n        if (this.component.reorder) {\n            columnExtra++;\n        }\n        if (hasRemoveButtons) {\n            columnExtra++;\n        }\n        if (this.canAddColumn) {\n            columnExtra++;\n        }\n        const colWidth = Math.floor(12 / (columns.length + columnExtra));\n        return super.render(this.renderTemplate('datagrid', {\n            rows: this.getRows(),\n            columns: columns,\n            groups: this.hasRowGroups() ? this.getGroups() : [],\n            visibleColumns: this.visibleColumns,\n            hasToggle: lodash_1.default.get(this, 'component.groupToggle', false),\n            hasHeader: this.hasHeader(),\n            hasExtraColumn: this.hasExtraColumn(),\n            hasAddButton: this.hasAddButton(),\n            hasRemoveButtons,\n            hasTopSubmit: this.hasTopSubmit(),\n            hasBottomSubmit: this.hasBottomSubmit(),\n            hasGroups: this.hasRowGroups(),\n            numColumns: columns.length + (this.hasExtraColumn() ? 1 : 0),\n            datagridKey: this.datagridKey,\n            allowReorder: this.allowReorder,\n            builder: this.builderMode,\n            canAddColumn: this.canAddColumn,\n            tabIndex: this.tabIndex,\n            placeholder: this.renderTemplate('builderPlaceholder', {\n                position: this.componentComponents.length,\n            }),\n            colWidth: colWidth.toString()\n        }));\n    }\n    getRows() {\n        return this.rows.map(row => {\n            const components = {};\n            lodash_1.default.each(row, (col, key) => {\n                components[key] = col.render();\n            });\n            return components;\n        });\n    }\n    getColumns() {\n        return this.columns.filter((comp) => {\n            return (!this.visibleColumns.hasOwnProperty(comp.key) || this.visibleColumns[comp.key]);\n        });\n    }\n    hasHeader() {\n        return this.component.components.reduce((hasHeader, col) => {\n            // If any of the components has a title and it isn't hidden, display the header.\n            return hasHeader || ((col.label || col.title) && !col.hideLabel);\n        }, false);\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            [`${this.datagridKey}-row`]: 'multiple',\n            [`${this.datagridKey}-tbody`]: 'single',\n            [`${this.datagridKey}-addRow`]: 'multiple',\n            [`${this.datagridKey}-removeRow`]: 'multiple',\n            [`${this.datagridKey}-group-header`]: 'multiple',\n            [this.datagridKey]: 'multiple',\n        });\n        if (this.allowReorder) {\n            this.refs[`${this.datagridKey}-row`].forEach((row, index) => {\n                row.dragInfo = { index };\n            });\n            this.dragulaReady.then((dragula) => {\n                // The drop event may call redraw twice which calls attach twice and because this block of code is asynchronous\n                // BOTH redraws may be called before this block of code runs (which causes this block of code to run twice sequentially).\n                // This causes two dragula() calls on the same container which breaks dragula. To fix this the return value must\n                // be saved in this.dragula and have its container contents reset if it exists\n                if (this.dragula && this.dragula.containers) {\n                    this.dragula.containers = [];\n                }\n                this.dragula = dragula([this.refs[`${this.datagridKey}-tbody`]], {\n                    moves: (_draggedElement, _oldParent, clickedElement) => {\n                        const clickedElementKey = clickedElement.getAttribute('data-key');\n                        const oldParentKey = _oldParent.getAttribute('data-key');\n                        //Check if the clicked button belongs to that container, if false, it belongs to the nested container\n                        if (oldParentKey === clickedElementKey) {\n                            return clickedElement.classList.contains('formio-drag-button');\n                        }\n                    }\n                }).on('drop', this.onReorder.bind(this))\n                    .on('cloned', this.onCloned.bind(this));\n            });\n        }\n        this.refs[`${this.datagridKey}-addRow`].forEach((addButton) => {\n            this.addEventListener(addButton, 'click', this.addRow.bind(this));\n        });\n        this.refs[`${this.datagridKey}-removeRow`].forEach((removeButton, index) => {\n            this.addEventListener(removeButton, 'click', this.removeRow.bind(this, index));\n        });\n        if (this.hasRowGroups()) {\n            this.refs.chunks = this.getRowChunks(this.getGroupSizes(), this.refs[`${this.datagridKey}-row`]);\n            this.refs[`${this.datagridKey}-group-header`].forEach((header, index) => {\n                this.addEventListener(header, 'click', () => this.toggleGroup(header, index));\n            });\n        }\n        const columns = this.getColumns();\n        const rowLength = columns.length;\n        this.rows.forEach((row, rowIndex) => {\n            let columnIndex = 0;\n            columns.forEach((col) => {\n                this.attachComponents(this.refs[this.datagridKey][(rowIndex * rowLength) + columnIndex], [this.rows[rowIndex][col.key]], this.getComponentsContainer());\n                columnIndex++;\n            });\n        });\n        return super.attach(element);\n    }\n    getComponentsContainer() {\n        return this.component.components;\n    }\n    /**\n     * Reorder values in array based on the old and new position\n     * @param {any} valuesArr - An array of values.\n     * @param {number} oldPosition - The index of the value in array before reordering.\n     * @param {number} newPosition - The index of the value in array after reordering.\n     * @param {boolean|any} movedBelow - Whether or not the value is moved below.\n     * @returns {void}\n     */\n    reorderValues(valuesArr, oldPosition, newPosition, movedBelow) {\n        if (!lodash_1.default.isArray(valuesArr) || lodash_1.default.isEmpty(valuesArr)) {\n            return;\n        }\n        const draggedRowData = valuesArr[oldPosition];\n        //insert element at new position\n        valuesArr.splice(newPosition, 0, draggedRowData);\n        //remove element from old position (if was moved above, after insertion it's at +1 index)\n        valuesArr.splice(movedBelow ? oldPosition : oldPosition + 1, 1);\n    }\n    onReorder(element, _target, _source, sibling) {\n        if (!element.dragInfo || (sibling && !sibling.dragInfo)) {\n            console.warn('There is no Drag Info available for either dragged or sibling element');\n            return;\n        }\n        const oldPosition = element.dragInfo.index;\n        //should drop at next sibling position; no next sibling means drop to last position\n        const newPosition = sibling ? sibling.dragInfo.index : this.dataValue.length;\n        const movedBelow = newPosition > oldPosition;\n        const dataValue = (0, utils_1.fastCloneDeep)(this.dataValue);\n        this.reorderValues(dataValue, oldPosition, newPosition, movedBelow);\n        //reorder select data\n        this.reorderValues(lodash_1.default.get(this.root, `submission.metadata.selectData.${this.path}`, []), oldPosition, newPosition, movedBelow);\n        // When components are reordered we need to set the dataGrid and form pristine properties to false\n        this.root.pristine = false;\n        this.pristine = false;\n        //need to re-build rows to re-calculate indexes and other indexed fields for component instance (like rows for ex.)\n        this.setValue(dataValue, { isReordered: true });\n        this.rebuild();\n    }\n    onCloned(el, original) {\n        if (el && el.children && original && original.children) {\n            lodash_1.default.each(original.children, (child, index) => {\n                const styles = getComputedStyle(child, null);\n                if (styles.cssText !== '') {\n                    el.children[index].style.cssText = styles.cssText;\n                }\n                else {\n                    const cssText = Object.values(styles).reduce((css, propertyName) => {\n                        return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;\n                    }, '');\n                    el.children[index].style.cssText = cssText;\n                }\n            });\n        }\n    }\n    focusOnNewRowElement(row) {\n        Object.keys(row).find((key) => {\n            const element = row[key].element;\n            if (element) {\n                const focusableElements = (0, utils_1.getFocusableElements)(element);\n                if (focusableElements && focusableElements[0]) {\n                    focusableElements[0].focus();\n                    return true;\n                }\n            }\n            return false;\n        });\n    }\n    addRow() {\n        const index = this.rows.length;\n        // Handle length mismatch between rows and dataValue\n        if (this.dataValue.length === index) {\n            this.dataValue.push({});\n        }\n        let row;\n        const dataValue = this.dataValue;\n        const defaultValue = this.defaultValue;\n        if (this.initEmpty && defaultValue[index]) {\n            row = defaultValue[index];\n            dataValue[index] = row;\n        }\n        else {\n            row = dataValue[index];\n        }\n        this.rows[index] = this.createRowComponents(row, index);\n        this.emit('dataGridAddRow', {\n            component: this.component,\n            row\n        });\n        this.checkConditions();\n        this.triggerChange();\n        this.redraw().then(() => {\n            this.focusOnNewRowElement(this.rows[index]);\n        });\n    }\n    updateComponentsRowIndex(components, rowIndex) {\n        components.forEach((component, colIndex) => {\n            var _a;\n            if ((_a = component.options) === null || _a === void 0 ? void 0 : _a.name) {\n                const newName = `[${this.key}][${rowIndex}]`;\n                component.options.name = component.options.name.replace(`[${this.key}][${component.rowIndex}]`, newName);\n            }\n            component.rowIndex = rowIndex;\n            component.row = `${rowIndex}-${colIndex}`;\n            component.path = Components_1.default.getComponentPath(component);\n        });\n    }\n    updateRowsComponents(rowIndex) {\n        this.rows.slice(rowIndex).forEach((row, index) => {\n            this.updateComponentsRowIndex(Object.values(row), rowIndex + index);\n        });\n    }\n    removeRow(index) {\n        const makeEmpty = index === 0 && this.rows.length === 1;\n        const flags = { isReordered: !makeEmpty, resetValue: makeEmpty };\n        this.splice(index, flags);\n        this.emit('dataGridDeleteRow', { index });\n        const [row] = this.rows.splice(index, 1);\n        this.removeRowComponents(row);\n        this.updateRowsComponents(index);\n        this.setValue(this.dataValue, flags);\n        this.redraw();\n    }\n    removeRowComponents(row) {\n        lodash_1.default.each(row, (component) => this.removeComponent(component));\n    }\n    getRowValues() {\n        return this.dataValue;\n    }\n    setRowComponentsData(rowIndex, rowData) {\n        lodash_1.default.each(this.rows[rowIndex], (component) => {\n            component.data = rowData;\n        });\n    }\n    createRows(init, rebuild) {\n        let added = false;\n        const rowValues = this.getRowValues();\n        // Create any missing rows.\n        rowValues.forEach((row, index) => {\n            if (!rebuild && this.rows[index]) {\n                this.setRowComponentsData(index, row);\n            }\n            else {\n                if (this.rows[index]) {\n                    this.removeRowComponents(this.rows[index]);\n                }\n                this.rows[index] = this.createRowComponents(row, index);\n                added = true;\n            }\n        });\n        // Delete any extra rows.\n        const removedRows = this.rows.splice(rowValues.length);\n        const removed = !!removedRows.length;\n        // Delete components of extra rows (to make sure that this.components contain only components of exisiting rows)\n        if (removed) {\n            removedRows.forEach(row => this.removeRowComponents(row));\n        }\n        if (!init && (added || removed)) {\n            this.redraw();\n        }\n        return added;\n    }\n    createRowComponents(row, rowIndex) {\n        const components = {};\n        this.tabIndex = 0;\n        this.component.components.map((col, colIndex) => {\n            const options = lodash_1.default.clone(this.options);\n            options.name += `[${rowIndex}]`;\n            options.row = `${rowIndex}-${colIndex}`;\n            let columnComponent;\n            if (this.builderMode) {\n                col.id = col.id + rowIndex;\n                columnComponent = col;\n            }\n            else {\n                columnComponent = Object.assign(Object.assign({}, col), { id: (col.id + rowIndex) });\n            }\n            const component = this.createComponent(columnComponent, options, row);\n            component.parentDisabled = !!this.disabled;\n            component.rowIndex = rowIndex;\n            component.inDataGrid = true;\n            if (columnComponent.tabindex &&\n                parseInt(columnComponent.tabindex) > this.tabIndex) {\n                this.tabIndex = parseInt(columnComponent.tabindex);\n            }\n            components[col.key] = component;\n        });\n        return components;\n    }\n    checkColumns(data, flags = {}) {\n        data = data || this.rootValue;\n        let show = false;\n        if (!this.rows || !this.rows.length) {\n            return { rebuild: false, show: false };\n        }\n        if (this.builderMode) {\n            return { rebuild: false, show: true };\n        }\n        const visibility = {};\n        let logicRebuild = false;\n        const dataValue = this.dataValue;\n        this.rows.forEach((row, rowIndex) => {\n            lodash_1.default.each(row, (col, key) => {\n                if (col && (typeof col.checkConditions === 'function')) {\n                    const firstRowCheck = visibility[key] === undefined;\n                    visibility[key] = !!visibility[key] ||\n                        (col.checkConditions(data, flags, dataValue[rowIndex]) && col.type !== 'hidden');\n                    if (col.component.logic && firstRowCheck) {\n                        const compIndex = lodash_1.default.findIndex(this.columns, ['key', key]);\n                        const equalColumns = lodash_1.default.isEqualWith(this.columns[compIndex], col.component, (col1, col2, key) => {\n                            // Don't compare columns by their auto-generated ids.\n                            if (key === 'id') {\n                                return true;\n                            }\n                        });\n                        if (!equalColumns) {\n                            logicRebuild = true;\n                            this.columns[compIndex] = col.component;\n                        }\n                    }\n                }\n            });\n        });\n        const rebuild = !lodash_1.default.isEqual(visibility, this.visibleColumns) || logicRebuild;\n        lodash_1.default.each(visibility, (col) => {\n            show |= col;\n        });\n        this.visibleColumns = visibility;\n        return { rebuild, show };\n    }\n    checkComponentConditions(data, flags, row) {\n        const isVisible = this.visible;\n        // If table isn't visible, don't bother calculating columns.\n        if (!super.checkComponentConditions(data, flags, row)) {\n            return false;\n        }\n        const { rebuild, show } = this.checkColumns(data, flags);\n        // Check if a rebuild is needed or the visibility changes.\n        if (rebuild || !isVisible) {\n            this.createRows(false, rebuild);\n        }\n        // Return if this table should show.\n        return show;\n    }\n    setValue(value, flags = {}) {\n        if (!value) {\n            this.dataValue = this.defaultValue;\n            this.createRows();\n            return false;\n        }\n        if (!Array.isArray(value)) {\n            if (typeof value === 'object') {\n                value = [value];\n            }\n            else {\n                this.createRows();\n                value = [{}];\n            }\n        }\n        // Make sure we always have at least one row.\n        // NOTE: Removing this will break \"Public Configurations\" in portal. ;)\n        if (value && !value.length && !this.initEmpty) {\n            value.push({});\n        }\n        const isSettingSubmission = flags.fromSubmission && !lodash_1.default.isEqual(value, this.emptyValue);\n        const changed = this.hasChanged(value, this.dataValue);\n        this.dataValue = value;\n        if (this.initRows || isSettingSubmission ||\n            (Array.isArray(this.dataValue) && this.dataValue.length !== this.rows.length)) {\n            if (!this.createRows() && changed) {\n                this.redraw();\n            }\n        }\n        if (this.componentModal && isSettingSubmission) {\n            this.componentModal.setValue(value);\n        }\n        this.rows.forEach((row, rowIndex) => {\n            if (value.length <= rowIndex) {\n                return;\n            }\n            lodash_1.default.each(row, (col) => {\n                col.rowIndex = rowIndex;\n                this.setNestedValue(col, value[rowIndex], flags);\n            });\n        });\n        this.updateOnChange(flags, changed);\n        return changed;\n    }\n    restoreComponentsContext() {\n        this.rows.forEach((row, index) => lodash_1.default.forIn(row, (component) => component.data = this.dataValue[index]));\n    }\n    getComponent(path, fn) {\n        path = Array.isArray(path) ? path : [path];\n        const [key, ...remainingPath] = path;\n        let result = [];\n        if (lodash_1.default.isNumber(key) && remainingPath.length) {\n            const compKey = remainingPath.pop();\n            result = this.rows[key][compKey];\n            // If the component is inside a Layout Component, try to find it among all the row's components\n            if (!result) {\n                Object.entries(this.rows[key]).forEach(([, comp]) => {\n                    if ('getComponent' in comp) {\n                        const possibleResult = comp.getComponent([compKey], fn);\n                        if (possibleResult) {\n                            result = possibleResult;\n                        }\n                    }\n                });\n            }\n            if (result && lodash_1.default.isFunction(fn)) {\n                fn(result, this.getComponents());\n            }\n            if (remainingPath.length && 'getComponent' in result) {\n                return result.getComponent(remainingPath, fn);\n            }\n            return result;\n        }\n        if (!lodash_1.default.isString(key)) {\n            return result;\n        }\n        this.everyComponent((component, components) => {\n            if (component.component.key === key) {\n                let comp = component;\n                if (remainingPath.length > 0 && 'getComponent' in component) {\n                    comp = component.getComponent(remainingPath, fn);\n                }\n                else if (fn) {\n                    fn(component, components);\n                }\n                result = result.concat(comp);\n            }\n        });\n        return result.length > 0 ? result : null;\n    }\n    toggleGroup(element, index) {\n        element.classList.toggle('collapsed');\n        lodash_1.default.each(this.refs.chunks[index], row => {\n            row.classList.toggle('hidden');\n        });\n    }\n}\nexports[\"default\"] = DataGridComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/datagrid/DataGrid.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst NestedArrayComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/nestedarray/NestedArrayComponent */ \"./lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Components_1 = __importDefault(__webpack_require__(/*! ../Components */ \"./lib/cjs/components/Components.js\"));\nclass DataGridComponent extends NestedArrayComponent_1.default {\n    static schema(...extend) {\n        return NestedArrayComponent_1.default.schema({\n            label: 'Data Grid',\n            key: 'dataGrid',\n            type: 'datagrid',\n            clearOnHide: true,\n            input: true,\n            tree: true,\n            components: []\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Data Grid',\n            icon: 'th',\n            group: 'data',\n            documentation: '/userguide/form-building/data-components#data-grid',\n            showPreview: false,\n            weight: 30,\n            schema: DataGridComponent.schema()\n        };\n    }\n    constructor(...args) {\n        super(...args);\n        this.type = 'datagrid';\n        this.tabIndex = 0;\n    }\n    init() {\n        this.components = this.components || [];\n        // Add new values based on minLength.\n        this.rows = [];\n        this.columns = [...this.component.components];\n        if (this.initRows || !lodash_1.default.isEqual(this.dataValue, this.emptyValue)) {\n            this.createRows(true);\n        }\n        if (this.allowReorder) {\n            this.dragulaReady = this.getDragula();\n        }\n        this.visibleColumns = {};\n        this.prevHasAddButton = this.hasAddButton();\n        this.checkColumns();\n    }\n    get dataValue() {\n        const dataValue = super.dataValue;\n        if (!dataValue || !Array.isArray(dataValue)) {\n            return this.emptyValue;\n        }\n        return dataValue;\n    }\n    set dataValue(value) {\n        super.dataValue = value;\n    }\n    get defaultSchema() {\n        return DataGridComponent.schema();\n    }\n    get initEmpty() {\n        return this.component.initEmpty || this.component.noFirstRow;\n    }\n    get initRows() {\n        return this.builderMode || this.path === 'defaultValue' || !this.initEmpty;\n    }\n    get emptyValue() {\n        return this.initEmpty ? [] : [{}];\n    }\n    get addAnotherPosition() {\n        return lodash_1.default.get(this.component, 'addAnotherPosition', 'bottom');\n    }\n    get minLength() {\n        if (this.hasRowGroups()) {\n            return lodash_1.default.sum(this.getGroupSizes());\n        }\n        else {\n            return lodash_1.default.get(this.component, 'validate.minLength', 0);\n        }\n    }\n    get defaultValue() {\n        const isBuilderMode = this.builderMode;\n        const isEmptyInit = this.initEmpty;\n        // Ensure we have one and only one row in builder mode.\n        if (isBuilderMode || (isEmptyInit && !this.dataValue.length)) {\n            return isEmptyInit && !isBuilderMode ? [] : [{}];\n        }\n        const value = super.defaultValue;\n        let defaultValue;\n        if (Array.isArray(value)) {\n            defaultValue = value;\n        }\n        else if (value && (typeof value === 'object')) {\n            defaultValue = [value];\n        }\n        else {\n            defaultValue = this.emptyValue;\n        }\n        for (let dIndex = defaultValue.length; dIndex < this.minLength; dIndex++) {\n            defaultValue.push({});\n        }\n        return defaultValue;\n    }\n    set disabled(disabled) {\n        super.disabled = disabled;\n        lodash_1.default.each(this.refs[`${this.datagridKey}-addRow`], (button) => {\n            button.disabled = disabled;\n        });\n        lodash_1.default.each(this.refs[`${this.datagridKey}-removeRow`], (button) => {\n            button.disabled = disabled;\n        });\n    }\n    get disabled() {\n        return super.disabled;\n    }\n    get datagridKey() {\n        return `datagrid-${this.key}`;\n    }\n    get allowReorder() {\n        return !this.options.readOnly && lodash_1.default.get(this.component, 'reorder', false);\n    }\n    get iteratableRows() {\n        return this.rows.map((row, index) => ({\n            components: row,\n            data: this.dataValue[index],\n        }));\n    }\n    isEmpty(value = this.dataValue) {\n        var _a;\n        const isEmpty = super.isEmpty(value);\n        if ((_a = this.components) === null || _a === void 0 ? void 0 : _a.length) {\n            return this.components.reduce((isEmpty, component) => {\n                return isEmpty && component.isEmpty();\n            }, true);\n        }\n        return isEmpty;\n    }\n    /**\n     * Split rows into chunks.\n     * @param {number[]} groups - array of numbers where each item is size of group\n     * @param {Array<T>} rows - rows collection\n     * @returns {Array<T[]>} - The chunked rows\n     */\n    getRowChunks(groups, rows) {\n        const [, chunks] = groups.reduce(([startIndex, acc], size) => {\n            const endIndex = startIndex + size;\n            return [endIndex, [...acc, [startIndex, endIndex]]];\n        }, [0, []]);\n        return chunks.map(range => lodash_1.default.slice(rows, ...range));\n    }\n    /**\n     * Create groups object.\n     * Each key in object represents index of first row in group.\n     * @returns {object} - The groups object.\n     */\n    getGroups() {\n        const groups = lodash_1.default.get(this.component, 'rowGroups', []);\n        const sizes = lodash_1.default.map(groups, 'numberOfRows').slice(0, -1);\n        const indexes = sizes.reduce((groupIndexes, size) => {\n            const last = groupIndexes[groupIndexes.length - 1];\n            return groupIndexes.concat(last + size);\n        }, [0]);\n        return groups.reduce((gidxs, group, idx) => {\n            return Object.assign(Object.assign({}, gidxs), { [indexes[idx]]: group });\n        }, {});\n    }\n    /**\n     * Get group sizes.\n     * @returns {number[]} - The array of group sizes.\n     */\n    getGroupSizes() {\n        return lodash_1.default.map(lodash_1.default.get(this.component, 'rowGroups', []), 'numberOfRows');\n    }\n    hasRowGroups() {\n        return lodash_1.default.get(this, 'component.enableRowGroups', false) && !this.builderMode;\n    }\n    totalRowsNumber(groups) {\n        return lodash_1.default.sum(lodash_1.default.map(groups, 'numberOfRows'));\n    }\n    setStaticValue(n) {\n        this.dataValue = lodash_1.default.range(n).map(() => ({}));\n    }\n    hasExtraColumn() {\n        return (this.hasRemoveButtons() || this.canAddColumn);\n    }\n    hasRemoveButtons() {\n        return !this.builderMode && !this.component.disableAddingRemovingRows &&\n            !this.options.readOnly &&\n            !this.disabled &&\n            this.fullMode &&\n            (this.dataValue.length > lodash_1.default.get(this.component, 'validate.minLength', 0));\n    }\n    hasTopSubmit() {\n        return this.hasAddButton() && ['top', 'both'].includes(this.addAnotherPosition);\n    }\n    hasBottomSubmit() {\n        return this.hasAddButton() && ['bottom', 'both'].includes(this.addAnotherPosition);\n    }\n    get canAddColumn() {\n        return this.builderMode && !this.options.design;\n    }\n    render() {\n        const columns = this.getColumns();\n        let columnExtra = 0;\n        const hasRemoveButtons = this.hasRemoveButtons();\n        if (this.component.reorder) {\n            columnExtra++;\n        }\n        if (hasRemoveButtons) {\n            columnExtra++;\n        }\n        if (this.canAddColumn) {\n            columnExtra++;\n        }\n        const colWidth = Math.floor(12 / (columns.length + columnExtra));\n        return super.render(this.renderTemplate('datagrid', {\n            rows: this.getRows(),\n            columns: columns,\n            groups: this.hasRowGroups() ? this.getGroups() : [],\n            visibleColumns: this.visibleColumns,\n            hasToggle: lodash_1.default.get(this, 'component.groupToggle', false),\n            hasHeader: this.hasHeader(),\n            hasExtraColumn: this.hasExtraColumn(),\n            hasAddButton: this.hasAddButton(),\n            hasRemoveButtons,\n            hasTopSubmit: this.hasTopSubmit(),\n            hasBottomSubmit: this.hasBottomSubmit(),\n            hasGroups: this.hasRowGroups(),\n            numColumns: columns.length + (this.hasExtraColumn() ? 1 : 0),\n            datagridKey: this.datagridKey,\n            allowReorder: this.allowReorder,\n            builder: this.builderMode,\n            canAddColumn: this.canAddColumn,\n            tabIndex: this.tabIndex,\n            placeholder: this.renderTemplate('builderPlaceholder', {\n                position: this.componentComponents.length,\n            }),\n            colWidth: colWidth.toString()\n        }));\n    }\n    getRows() {\n        return this.rows.map(row => {\n            const components = {};\n            lodash_1.default.each(row, (col, key) => {\n                components[key] = col.render();\n            });\n            return components;\n        });\n    }\n    getColumns() {\n        return this.columns.filter((comp) => {\n            return (!this.visibleColumns.hasOwnProperty(comp.key) || this.visibleColumns[comp.key]);\n        });\n    }\n    hasHeader() {\n        return this.component.components.reduce((hasHeader, col) => {\n            // If any of the components has a title and it isn't hidden, display the header.\n            return hasHeader || ((col.label || col.title) && !col.hideLabel);\n        }, false);\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            [`${this.datagridKey}-row`]: 'multiple',\n            [`${this.datagridKey}-tbody`]: 'single',\n            [`${this.datagridKey}-addRow`]: 'multiple',\n            [`${this.datagridKey}-removeRow`]: 'multiple',\n            [`${this.datagridKey}-group-header`]: 'multiple',\n            [this.datagridKey]: 'multiple',\n        });\n        if (this.allowReorder) {\n            this.refs[`${this.datagridKey}-row`].forEach((row, index) => {\n                row.dragInfo = { index };\n            });\n            this.dragulaReady.then((dragula) => {\n                // The drop event may call redraw twice which calls attach twice and because this block of code is asynchronous\n                // BOTH redraws may be called before this block of code runs (which causes this block of code to run twice sequentially).\n                // This causes two dragula() calls on the same container which breaks dragula. To fix this the return value must\n                // be saved in this.dragula and have its container contents reset if it exists\n                if (this.dragula && this.dragula.containers) {\n                    this.dragula.containers = [];\n                }\n                this.dragula = dragula([this.refs[`${this.datagridKey}-tbody`]], {\n                    moves: (_draggedElement, _oldParent, clickedElement) => {\n                        const clickedElementKey = clickedElement.getAttribute('data-key');\n                        const oldParentKey = _oldParent.getAttribute('data-key');\n                        //Check if the clicked button belongs to that container, if false, it belongs to the nested container\n                        if (oldParentKey === clickedElementKey) {\n                            return clickedElement.classList.contains('formio-drag-button');\n                        }\n                    }\n                }).on('drop', this.onReorder.bind(this))\n                    .on('cloned', this.onCloned.bind(this));\n            });\n        }\n        this.refs[`${this.datagridKey}-addRow`].forEach((addButton) => {\n            this.addEventListener(addButton, 'click', this.addRow.bind(this));\n        });\n        this.refs[`${this.datagridKey}-removeRow`].forEach((removeButton, index) => {\n            this.addEventListener(removeButton, 'click', this.removeRow.bind(this, index));\n        });\n        if (this.hasRowGroups()) {\n            this.refs.chunks = this.getRowChunks(this.getGroupSizes(), this.refs[`${this.datagridKey}-row`]);\n            this.refs[`${this.datagridKey}-group-header`].forEach((header, index) => {\n                this.addEventListener(header, 'click', () => this.toggleGroup(header, index));\n            });\n        }\n        const columns = this.getColumns();\n        const rowLength = columns.length;\n        this.rows.forEach((row, rowIndex) => {\n            let columnIndex = 0;\n            columns.forEach((col) => {\n                this.attachComponents(this.refs[this.datagridKey][(rowIndex * rowLength) + columnIndex], [this.rows[rowIndex][col.key]], this.getComponentsContainer());\n                columnIndex++;\n            });\n        });\n        return super.attach(element);\n    }\n    getComponentsContainer() {\n        return this.component.components;\n    }\n    /**\n     * Reorder values in array based on the old and new position\n     * @param {any} valuesArr - An array of values.\n     * @param {number} oldPosition - The index of the value in array before reordering.\n     * @param {number} newPosition - The index of the value in array after reordering.\n     * @param {boolean|any} movedBelow - Whether or not the value is moved below.\n     * @returns {void}\n     */\n    reorderValues(valuesArr, oldPosition, newPosition, movedBelow) {\n        if (!lodash_1.default.isArray(valuesArr) || lodash_1.default.isEmpty(valuesArr)) {\n            return;\n        }\n        const draggedRowData = valuesArr[oldPosition];\n        //insert element at new position\n        valuesArr.splice(newPosition, 0, draggedRowData);\n        //remove element from old position (if was moved above, after insertion it's at +1 index)\n        valuesArr.splice(movedBelow ? oldPosition : oldPosition + 1, 1);\n    }\n    onReorder(element, _target, _source, sibling) {\n        if (!element.dragInfo || (sibling && !sibling.dragInfo)) {\n            console.warn('There is no Drag Info available for either dragged or sibling element');\n            return;\n        }\n        const oldPosition = element.dragInfo.index;\n        //should drop at next sibling position; no next sibling means drop to last position\n        const newPosition = sibling ? sibling.dragInfo.index : this.dataValue.length;\n        const movedBelow = newPosition > oldPosition;\n        const dataValue = (0, utils_1.fastCloneDeep)(this.dataValue);\n        this.reorderValues(dataValue, oldPosition, newPosition, movedBelow);\n        //reorder select data\n        this.reorderValues(lodash_1.default.get(this.root, `submission.metadata.selectData.${this.path}`, []), oldPosition, newPosition, movedBelow);\n        // When components are reordered we need to set the dataGrid and form pristine properties to false\n        this.root.pristine = false;\n        this.pristine = false;\n        //need to re-build rows to re-calculate indexes and other indexed fields for component instance (like rows for ex.)\n        this.setValue(dataValue, { isReordered: true });\n        this.rebuild();\n    }\n    onCloned(el, original) {\n        if (el && el.children && original && original.children) {\n            lodash_1.default.each(original.children, (child, index) => {\n                const styles = getComputedStyle(child, null);\n                if (styles.cssText !== '') {\n                    el.children[index].style.cssText = styles.cssText;\n                }\n                else {\n                    const cssText = Object.values(styles).reduce((css, propertyName) => {\n                        return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;\n                    }, '');\n                    el.children[index].style.cssText = cssText;\n                }\n            });\n        }\n    }\n    focusOnNewRowElement(row) {\n        Object.keys(row).find((key) => {\n            const element = row[key].element;\n            if (element) {\n                const focusableElements = (0, utils_1.getFocusableElements)(element);\n                if (focusableElements && focusableElements[0]) {\n                    focusableElements[0].focus();\n                    return true;\n                }\n            }\n            return false;\n        });\n    }\n    addRow() {\n        const index = this.rows.length;\n        // Handle length mismatch between rows and dataValue\n        if (this.dataValue.length === index) {\n            this.dataValue.push({});\n        }\n        let row;\n        const dataValue = this.dataValue;\n        const defaultValue = this.defaultValue;\n        if (this.initEmpty && defaultValue[index]) {\n            row = defaultValue[index];\n            dataValue[index] = row;\n        }\n        else {\n            row = dataValue[index];\n        }\n        this.rows[index] = this.createRowComponents(row, index);\n        this.emit('dataGridAddRow', {\n            component: this.component,\n            row\n        });\n        this.checkConditions();\n        this.triggerChange();\n        this.redraw().then(() => {\n            this.focusOnNewRowElement(this.rows[index]);\n        });\n    }\n    updateComponentsRowIndex(components, rowIndex) {\n        components.forEach((component, colIndex) => {\n            var _a;\n            if ((_a = component.options) === null || _a === void 0 ? void 0 : _a.name) {\n                const newName = `[${this.key}][${rowIndex}]`;\n                component.options.name = component.options.name.replace(`[${this.key}][${component.rowIndex}]`, newName);\n            }\n            component.rowIndex = rowIndex;\n            component.row = `${rowIndex}-${colIndex}`;\n            component.path = Components_1.default.getComponentPath(component);\n        });\n    }\n    updateRowsComponents(rowIndex) {\n        this.rows.slice(rowIndex).forEach((row, index) => {\n            this.updateComponentsRowIndex(Object.values(row), rowIndex + index);\n        });\n    }\n    removeRow(index) {\n        const makeEmpty = index === 0 && this.rows.length === 1;\n        const flags = { isReordered: !makeEmpty, resetValue: makeEmpty };\n        this.splice(index, flags);\n        this.emit('dataGridDeleteRow', { index });\n        const [row] = this.rows.splice(index, 1);\n        this.removeSubmissionMetadataRow(index);\n        this.removeRowComponents(row);\n        this.updateRowsComponents(index);\n        this.setValue(this.dataValue, flags);\n        this.redraw();\n    }\n    removeRowComponents(row) {\n        lodash_1.default.each(row, (component) => this.removeComponent(component));\n    }\n    getRowValues() {\n        return this.dataValue;\n    }\n    setRowComponentsData(rowIndex, rowData) {\n        lodash_1.default.each(this.rows[rowIndex], (component) => {\n            component.data = rowData;\n        });\n    }\n    createRows(init, rebuild) {\n        let added = false;\n        const rowValues = this.getRowValues();\n        // Create any missing rows.\n        rowValues.forEach((row, index) => {\n            if (!rebuild && this.rows[index]) {\n                this.setRowComponentsData(index, row);\n            }\n            else {\n                if (this.rows[index]) {\n                    this.removeRowComponents(this.rows[index]);\n                }\n                this.rows[index] = this.createRowComponents(row, index);\n                added = true;\n            }\n        });\n        // Delete any extra rows.\n        const removedRows = this.rows.splice(rowValues.length);\n        const removed = !!removedRows.length;\n        // Delete components of extra rows (to make sure that this.components contain only components of exisiting rows)\n        if (removed) {\n            removedRows.forEach(row => this.removeRowComponents(row));\n        }\n        if (!init && (added || removed)) {\n            this.redraw();\n        }\n        return added;\n    }\n    createRowComponents(row, rowIndex) {\n        const components = {};\n        this.tabIndex = 0;\n        this.component.components.map((col, colIndex) => {\n            const options = lodash_1.default.clone(this.options);\n            options.name += `[${rowIndex}]`;\n            options.row = `${rowIndex}-${colIndex}`;\n            let columnComponent;\n            if (this.builderMode) {\n                col.id = col.id + rowIndex;\n                columnComponent = col;\n            }\n            else {\n                columnComponent = Object.assign(Object.assign({}, col), { id: (col.id + rowIndex) });\n            }\n            const component = this.createComponent(columnComponent, options, row);\n            component.parentDisabled = !!this.disabled;\n            component.rowIndex = rowIndex;\n            component.inDataGrid = true;\n            if (columnComponent.tabindex &&\n                parseInt(columnComponent.tabindex) > this.tabIndex) {\n                this.tabIndex = parseInt(columnComponent.tabindex);\n            }\n            components[col.key] = component;\n        });\n        return components;\n    }\n    checkColumns(data, flags = {}) {\n        data = data || this.rootValue;\n        let show = false;\n        if (!this.rows || !this.rows.length) {\n            return { rebuild: false, show: false };\n        }\n        if (this.builderMode) {\n            return { rebuild: false, show: true };\n        }\n        const visibility = {};\n        let logicRebuild = false;\n        const dataValue = this.dataValue;\n        this.rows.forEach((row, rowIndex) => {\n            lodash_1.default.each(row, (col, key) => {\n                if (col && (typeof col.checkConditions === 'function')) {\n                    const firstRowCheck = visibility[key] === undefined;\n                    visibility[key] = !!visibility[key] ||\n                        (col.checkConditions(data, flags, dataValue[rowIndex]) && col.type !== 'hidden');\n                    if (col.component.logic && firstRowCheck) {\n                        const compIndex = lodash_1.default.findIndex(this.columns, ['key', key]);\n                        const equalColumns = lodash_1.default.isEqualWith(this.columns[compIndex], col.component, (col1, col2, key) => {\n                            // Don't compare columns by their auto-generated ids.\n                            if (key === 'id') {\n                                return true;\n                            }\n                        });\n                        if (!equalColumns) {\n                            logicRebuild = true;\n                            this.columns[compIndex] = col.component;\n                        }\n                    }\n                }\n            });\n        });\n        const rebuild = !lodash_1.default.isEqual(visibility, this.visibleColumns) || logicRebuild;\n        lodash_1.default.each(visibility, (col) => {\n            show |= col;\n        });\n        this.visibleColumns = visibility;\n        return { rebuild, show };\n    }\n    checkComponentConditions(data, flags, row) {\n        const isVisible = this.visible;\n        // If table isn't visible, don't bother calculating columns.\n        if (!super.checkComponentConditions(data, flags, row)) {\n            return false;\n        }\n        const { rebuild, show } = this.checkColumns(data, flags);\n        // Check if a rebuild is needed or the visibility changes.\n        if (rebuild || !isVisible) {\n            this.createRows(false, rebuild);\n        }\n        // Return if this table should show.\n        return show;\n    }\n    setValue(value, flags = {}) {\n        if (!value) {\n            this.dataValue = this.defaultValue;\n            this.createRows();\n            return false;\n        }\n        if (!Array.isArray(value)) {\n            if (typeof value === 'object') {\n                value = [value];\n            }\n            else {\n                this.createRows();\n                value = [{}];\n            }\n        }\n        // Make sure we always have at least one row.\n        // NOTE: Removing this will break \"Public Configurations\" in portal. ;)\n        if (value && !value.length && !this.initEmpty) {\n            value.push({});\n        }\n        const isSettingSubmission = flags.fromSubmission && !lodash_1.default.isEqual(value, this.emptyValue);\n        const changed = this.hasChanged(value, this.dataValue);\n        this.dataValue = value;\n        if (this.initRows || isSettingSubmission ||\n            (Array.isArray(this.dataValue) && this.dataValue.length !== this.rows.length)) {\n            if (!this.createRows() && changed) {\n                this.redraw();\n            }\n        }\n        if (this.componentModal && isSettingSubmission) {\n            this.componentModal.setValue(value);\n        }\n        this.rows.forEach((row, rowIndex) => {\n            if (value.length <= rowIndex) {\n                return;\n            }\n            lodash_1.default.each(row, (col) => {\n                col.rowIndex = rowIndex;\n                this.setNestedValue(col, value[rowIndex], flags);\n            });\n        });\n        this.updateOnChange(flags, changed);\n        return changed;\n    }\n    restoreComponentsContext() {\n        this.rows.forEach((row, index) => lodash_1.default.forIn(row, (component) => component.data = this.dataValue[index]));\n    }\n    getComponent(path, fn) {\n        path = Array.isArray(path) ? path : [path];\n        const [key, ...remainingPath] = path;\n        let result = [];\n        if (lodash_1.default.isNumber(key) && remainingPath.length) {\n            const compKey = remainingPath.pop();\n            result = this.rows[key][compKey];\n            // If the component is inside a Layout Component, try to find it among all the row's components\n            if (!result) {\n                Object.entries(this.rows[key]).forEach(([, comp]) => {\n                    if ('getComponent' in comp) {\n                        const possibleResult = comp.getComponent([compKey], fn);\n                        if (possibleResult) {\n                            result = possibleResult;\n                        }\n                    }\n                });\n            }\n            if (result && lodash_1.default.isFunction(fn)) {\n                fn(result, this.getComponents());\n            }\n            if (remainingPath.length && 'getComponent' in result) {\n                return result.getComponent(remainingPath, fn);\n            }\n            return result;\n        }\n        if (!lodash_1.default.isString(key)) {\n            return result;\n        }\n        this.everyComponent((component, components) => {\n            if (component.component.key === key) {\n                let comp = component;\n                if (remainingPath.length > 0 && 'getComponent' in component) {\n                    comp = component.getComponent(remainingPath, fn);\n                }\n                else if (fn) {\n                    fn(component, components);\n                }\n                result = result.concat(comp);\n            }\n        });\n        return result.length > 0 ? result : null;\n    }\n    toggleGroup(element, index) {\n        element.classList.toggle('collapsed');\n        lodash_1.default.each(this.refs.chunks[index], row => {\n            row.classList.toggle('hidden');\n        });\n    }\n}\nexports[\"default\"] = DataGridComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/datagrid/DataGrid.js?");
 
 /***/ }),
 
@@ -5115,7 +5135,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        this.emit('editGridOpenModal', {\n            component: this.component,\n            row: editRow,\n            instance: this,\n        });\n        return this.attachComponents(modalContent, components);\n    }\n    showDialog(rowIndex) {\n        const editRow = this.editRows[rowIndex];\n        if (editRow.state === EditRowState.New ? lodash_1.default.isEqual(this.emptyRow, editRow.data) : lodash_1.default.isEqual(editRow.backup, editRow.data)) {\n            return Promise.resolve();\n        }\n        const wrapper = this.ce('div', { ref: 'confirmationDialog' });\n        const dialogContent = this.component.dialogTemplate || this.defaultDialogTemplate;\n        wrapper.innerHTML = dialogContent;\n        wrapper.refs = {};\n        this.loadRefs.call(wrapper, wrapper, {\n            dialogHeader: 'single',\n            dialogCancelButton: 'single',\n            dialogYesButton: 'single',\n        });\n        const dialog = this.createModal(wrapper);\n        dialog.classList.add(`editgrid-row-modal-confirmation-${this.id}`);\n        const close = (event) => {\n            event.preventDefault();\n            dialog.close();\n        };\n        let dialogResult;\n        const promise = new Promise((resolve, reject) => {\n            dialogResult = { resolve, reject };\n        });\n        this.addEventListener(wrapper.refs.dialogYesButton, 'click', (event) => {\n            close(event);\n            dialogResult.resolve();\n        });\n        this.addEventListener(wrapper.refs.dialogCancelButton, 'click', (event) => {\n            close(event);\n            dialogResult.reject();\n        });\n        editRow.confirmationDialog = dialog;\n        return promise;\n    }\n    editRow(rowIndex) {\n        const editRow = this.editRows[rowIndex];\n        const isAlreadyEditing = editRow.state === EditRowState.Editing || editRow.state === EditRowState.New;\n        if (!editRow || isAlreadyEditing) {\n            return Promise.resolve();\n        }\n        editRow.prevState = editRow.state;\n        editRow.state = this.options.readOnly ? EditRowState.Viewing : EditRowState.Editing;\n        if (this.lazyLoad && (editRow.components.length === 0)) {\n            editRow.components = this.createRowComponents(editRow.data, rowIndex);\n        }\n        const dataSnapshot = (0, utils_1.fastCloneDeep)(editRow.data);\n        if (this.inlineEditMode) {\n            editRow.backup = dataSnapshot;\n        }\n        else {\n            editRow.backup = (0, utils_1.fastCloneDeep)(editRow.data);\n            editRow.data = dataSnapshot;\n            this.restoreRowContext(editRow);\n        }\n        this.emit('editGridEditRow', {\n            component: this.component,\n            row: editRow,\n            instance: this,\n        });\n        if (this.component.modal) {\n            return this.addRowModal(rowIndex);\n        }\n        return this.redraw();\n    }\n    clearErrors(rowIndex) {\n        const editRow = this.editRows[rowIndex];\n        if (editRow && Array.isArray(editRow.components)) {\n            editRow.components.forEach((comp) => {\n                comp.setPristine(true);\n                comp.setCustomValidity('');\n            });\n        }\n    }\n    cancelRow(rowIndex) {\n        if (this.options.readOnly) {\n            return;\n        }\n        const editRow = this.editRows[rowIndex];\n        switch (editRow.state) {\n            case EditRowState.New: {\n                editRow.state = EditRowState.Removed;\n                this.clearErrors(rowIndex);\n                this.destroyComponents(false, rowIndex);\n                if (this.inlineEditMode) {\n                    this.splice(rowIndex);\n                }\n                this.editRows.splice(rowIndex, 1);\n                this.openWhenEmpty();\n                break;\n            }\n            case EditRowState.Editing: {\n                editRow.state = editRow.prevState;\n                if (this.inlineEditMode) {\n                    this.dataValue[rowIndex] = editRow.backup;\n                }\n                editRow.data = editRow.backup;\n                editRow.backup = null;\n                this.restoreRowContext(editRow);\n                this.clearErrors(rowIndex);\n                break;\n            }\n        }\n        this.emit('editGridCancelRow', {\n            instance: this,\n            component: this.component,\n            editRow,\n        });\n        this.checkValidity(null, true);\n        this.redraw();\n        if (this.component.rowDrafts) {\n            this.checkValidity(this.data, false);\n        }\n    }\n    saveRow(rowIndex, modified) {\n        var _a, _b;\n        const editRow = this.editRows[rowIndex];\n        if (this.options.readOnly) {\n            return;\n        }\n        // After an attempt to save, all the components inside the row should become not pristine\n        if (!this.component.rowDrafts) {\n            editRow.components.forEach((comp) => comp.setPristine(false));\n        }\n        const errors = this.validateRow(editRow, true);\n        if (!this.component.rowDrafts) {\n            if (errors.length) {\n                return false;\n            }\n        }\n        if (this.saveEditMode) {\n            const dataValue = this.dataValue;\n            if ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.focusedComponent) === null || _b === void 0 ? void 0 : _b.component.typeChangeEnabled) {\n                this.root.focusedComponent = null;\n            }\n            switch (editRow.state) {\n                case EditRowState.New: {\n                    const newIndex = dataValue.length;\n                    dataValue.push(editRow.data);\n                    editRow.components.forEach(component => component.rowIndex = newIndex);\n                    if (rowIndex !== newIndex) {\n                        this.editRows.splice(rowIndex, 1);\n                        this.editRows.splice(newIndex, 0, editRow);\n                    }\n                    break;\n                }\n                case EditRowState.Editing: {\n                    dataValue[rowIndex] = editRow.data;\n                    break;\n                }\n            }\n        }\n        editRow.state = this.component.rowDrafts && errors.length ? EditRowState.Draft : EditRowState.Saved;\n        editRow.backup = null;\n        this.updateValue();\n        this.emit('editGridSaveRow', {\n            component: this.component,\n            row: editRow.data,\n            instance: this\n        });\n        this.triggerChange({ modified, noPristineChangeOnModified: modified && this.component.rowDrafts, isolateRow: true });\n        if (this.component.rowDrafts) {\n            editRow.components.forEach(comp => comp.setPristine(this.pristine));\n        }\n        this.checkValidity(null, true);\n        this.redraw();\n        if (editRow.alerts) {\n            editRow.alerts = false;\n        }\n        return true;\n    }\n    beforeFocus(component) {\n        if ('beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n        const relativePath = this.getRelativePath(component.path);\n        const arrayPath = (0, utils_1.getArrayFromComponentPath)(relativePath);\n        const rowIndex = arrayPath[0];\n        let rowToEditIndex = arrayPath[0];\n        this.editRows.forEach((row, indexInArray) => {\n            if (row.rowIndex === rowIndex) {\n                rowToEditIndex = indexInArray;\n            }\n        });\n        if (lodash_1.default.isNumber(rowToEditIndex)) {\n            this.editRow(rowToEditIndex);\n        }\n    }\n    updateComponentsRowIndex(components, rowIndex) {\n        components.forEach((component, colIndex) => {\n            component.rowIndex = rowIndex;\n            component.row = `${rowIndex}-${colIndex}`;\n        });\n    }\n    updateRowsComponents(rowIndex) {\n        this.editRows.slice(rowIndex).forEach((row, index) => {\n            this.updateComponentsRowIndex(row.components, rowIndex + index);\n        });\n    }\n    baseRemoveRow(rowIndex) {\n        const editRow = this.editRows[rowIndex];\n        editRow.state = EditRowState.Removed;\n        this.destroyComponents(false, rowIndex);\n        return editRow;\n    }\n    removeRow(rowIndex, modified) {\n        if (this.options.readOnly) {\n            return;\n        }\n        this.clearErrors(rowIndex);\n        this.baseRemoveRow(rowIndex);\n        this.splice(rowIndex);\n        this.emit('editGridDeleteRow', {\n            index: rowIndex\n        });\n        this.editRows.splice(rowIndex, 1);\n        this.openWhenEmpty();\n        this.updateRowsComponents(rowIndex);\n        this.updateValue();\n        this.triggerChange({ modified, noPristineChangeOnModified: modified && this.component.rowDrafts, isolateRow: true });\n        this.checkValidity(null, true);\n        this.checkData();\n        this.redraw();\n    }\n    createRowComponents(row, rowIndex, recreatePartially) {\n        // Iterate through existing components and destroy the ones with the same rowIndex.\n        if (this.components) {\n            for (let i = 0; i < this.components.length; i++) {\n                if (this.components[i].rowIndex === rowIndex) {\n                    this.components[i].destroy();\n                    this.components.splice(i, 1);\n                }\n            }\n        }\n        const currentRowComponents = lodash_1.default.get(this.editRows, `[${rowIndex}].components`, null);\n        return this.component.components.map((col, colIndex) => {\n            var _a;\n            if (recreatePartially && currentRowComponents && this.variableTypeComponentsIndexes.length) {\n                const currentComp = currentRowComponents[colIndex];\n                const shouldRecreate = lodash_1.default.includes(this.variableTypeComponentsIndexes, colIndex) && (currentComp === null || currentComp === void 0 ? void 0 : currentComp.type) !== ((_a = currentComp === null || currentComp === void 0 ? void 0 : currentComp.component) === null || _a === void 0 ? void 0 : _a.type);\n                if (!shouldRecreate) {\n                    return currentComp;\n                }\n                col = currentComp.component;\n            }\n            const column = lodash_1.default.clone(col);\n            const options = lodash_1.default.clone(this.options);\n            options.name += `[${rowIndex}]`;\n            options.row = `${rowIndex}-${colIndex}`;\n            options.onChange = (flags = {}, changed, modified) => {\n                var _a, _b;\n                if (((_a = changed.instance.root) === null || _a === void 0 ? void 0 : _a.id) && (((_b = this.root) === null || _b === void 0 ? void 0 : _b.id) !== changed.instance.root.id)) {\n                    changed.instance.root.triggerChange(flags, changed, modified);\n                }\n                else if (!this.component.modal) {\n                    this.triggerRootChange(flags, changed, modified);\n                }\n                if (this.inlineEditMode) {\n                    return;\n                }\n                const editRow = this.editRows[rowIndex];\n                if (editRow) {\n                    this.processRow('checkData', null, Object.assign(Object.assign({}, flags), { changed }), editRow.data, editRow.components);\n                    this.validateRow(editRow, false);\n                }\n                if (this.variableTypeComponentsIndexes.length) {\n                    this.checkRowVariableTypeComponents(editRow, rowIndex);\n                    this.redraw();\n                }\n            };\n            const comp = this.createComponent(lodash_1.default.assign({}, column, { row: options.row }), options, row, null, recreatePartially && currentRowComponents ? currentRowComponents[colIndex] : null);\n            comp.rowIndex = rowIndex;\n            comp.inEditGrid = true;\n            return comp;\n        });\n    }\n    hasOpenRows() {\n        return this.editRows.some(row => this.isOpen(row));\n    }\n    getAttachedData(data = null) {\n        const ourData = (0, utils_1.fastCloneDeep)(data || this._data || this.rootValue);\n        lodash_1.default.set(ourData, this.key, this.editRows.map((row) => row.data));\n        return ourData;\n    }\n    shouldValidateDraft(editRow) {\n        var _a, _b;\n        // Draft rows should be validated only when there was an attempt to submit a form\n        return (editRow.state === EditRowState.Draft &&\n            !this.pristine &&\n            !((_a = this.root) === null || _a === void 0 ? void 0 : _a.pristine) &&\n            !this.hasOpenRows()) ||\n            ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submitted);\n    }\n    shouldValidateRow(editRow, dirty) {\n        return this.shouldValidateDraft(editRow) ||\n            editRow.state === EditRowState.New ||\n            editRow.state === EditRowState.Editing ||\n            editRow.alerts ||\n            dirty;\n    }\n    validateRow(editRow, dirty, forceSilentCheck) {\n        var _a;\n        editRow.errors = [];\n        if (this.shouldValidateRow(editRow, dirty)) {\n            const silentCheck = (this.component.rowDrafts && !this.shouldValidateDraft(editRow)) || forceSilentCheck;\n            const rootValue = (0, utils_1.fastCloneDeep)(this.rootValue);\n            const editGridValue = lodash_1.default.get(rootValue, this.path, []);\n            editGridValue[editRow.rowIndex] = editRow.data;\n            lodash_1.default.set(rootValue, this.path, editGridValue);\n            const validationProcessorProcess = (context) => this.validationProcessor(context, { dirty, silentCheck });\n            editRow.errors = (0, process_1.processSync)({\n                components: (0, utils_1.fastCloneDeep)(this.component.components).map((component) => {\n                    component.parentPath = `${this.path}[${editRow.rowIndex}]`;\n                    return component;\n                }),\n                data: rootValue,\n                row: editRow.data,\n                process: 'validateRow',\n                instances: this.componentsMap,\n                scope: { errors: [] },\n                processors: [\n                    {\n                        process: validationProcessorProcess,\n                        processSync: validationProcessorProcess\n                    }\n                ]\n            }).errors;\n        }\n        // TODO: this is essentially running its own custom validation and should be moved into a validation rule\n        if (this.component.validate && this.component.validate.row) {\n            const valid = this.evaluate(this.component.validate.row, {\n                valid: (editRow.length === 0),\n                row: editRow.data\n            }, 'valid', true);\n            if (valid.toString() !== 'true') {\n                editRow.errors.push({\n                    type: 'error',\n                    rowError: true,\n                    message: valid.toString()\n                });\n            }\n            if (valid === null) {\n                editRow.errors.push({\n                    type: 'error',\n                    message: `Invalid row validation for ${this.key}`\n                });\n            }\n        }\n        if (!this.component.rowDrafts || ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted)) {\n            this.showRowErrorAlerts(editRow, editRow.errors);\n        }\n        return editRow.errors;\n    }\n    showRowErrorAlerts(editRow, errors) {\n        if (editRow.alerts) {\n            if (this.alert) {\n                if (errors.length) {\n                    this.alert.showErrors(errors, false);\n                    editRow.alerts = true;\n                }\n                else {\n                    this.alert.clear();\n                    this.alert = null;\n                }\n            }\n        }\n    }\n    /**\n     * @returns {boolean} - Return that this component processes its own validation.\n     */\n    get processOwnValidation() {\n        return true;\n    }\n    checkComponentValidity(data, dirty, row, options = {}, errors = []) {\n        var _a, _b;\n        const { silentCheck } = options;\n        const superValid = super.checkComponentValidity(data, dirty, row, options, errors);\n        // If super tells us that component invalid and there is no need to update alerts, just return false\n        if (!superValid && (!this.alert && !this.hasOpenRows())) {\n            return false;\n        }\n        let rowsEditing = false;\n        const allRowErrors = [];\n        this.editRows.forEach((editRow, index) => {\n            // Trigger all errors on the row.\n            const rowErrors = this.validateRow(editRow, dirty, silentCheck);\n            errors.push(...rowErrors);\n            allRowErrors.push(...rowErrors);\n            if (this.rowRefs) {\n                const rowContainer = this.rowRefs[index];\n                if (rowContainer) {\n                    const errorContainer = rowContainer.querySelector('.editgrid-row-error');\n                    if (rowErrors.length && errorContainer && (!this.component.rowDrafts || this.shouldValidateDraft(editRow))) {\n                        const rowError = rowErrors.find(error => error.rowError);\n                        this.addClass(errorContainer, 'help-block');\n                        errorContainer.textContent = this.t(rowError ? rowError.message : this.errorMessage('invalidRowError'));\n                    }\n                    else if (errorContainer) {\n                        errorContainer.textContent = '';\n                    }\n                }\n            }\n            // If this is a dirty check, and any rows are still editing, we need to throw validation error.\n            rowsEditing |= (dirty && this.isOpen(editRow));\n        });\n        if (allRowErrors.length) {\n            if (!silentCheck && (dirty || this.dirty) && (!this.component.rowDrafts || ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted))) {\n                this.setCustomValidity(this.t(this.errorMessage('invalidRowsError')), dirty);\n                this.removeClass(this.element, 'has-error');\n            }\n            return false;\n        }\n        else if (rowsEditing && this.saveEditMode && !this.component.openWhenEmpty) {\n            this._errors = this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);\n            errors.push(...this._errors);\n            return false;\n        }\n        const message = this.invalid || this.invalidMessage(data, dirty, false, row);\n        if (allRowErrors.length && ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submitted) && !message) {\n            this._errors = this.setCustomValidity(message, dirty);\n            errors.push(...this._errors);\n            this.root.showErrors([message]);\n        }\n        else {\n            this._errors = this.setCustomValidity(message, dirty);\n            errors.push(...this._errors);\n        }\n        return superValid;\n    }\n    setRowInvalid(ref, index) {\n        const editRow = this.editRows[index];\n        const errorContainer = ref.querySelector('.editgrid-row-error');\n        if (errorContainer && (!this.component.rowDrafts || this.shouldValidateDraft(editRow))) {\n            this.addClass(errorContainer, 'help-block');\n            errorContainer.textContent = this.t(this.errorMessage('invalidRowError'));\n        }\n        else if (errorContainer) {\n            errorContainer.textContent = '';\n        }\n    }\n    changeState(changed, flags) {\n        if (this.visible && (changed || (flags.resetValue && this.component.modalEdit))) {\n            this.rebuild();\n        }\n        else {\n            this.redraw();\n        }\n    }\n    setValue(value, flags = {}) {\n        if (!value) {\n            value = this.defaultValue;\n        }\n        if (!Array.isArray(value)) {\n            if (typeof value === 'object') {\n                value = [value];\n            }\n            else {\n                return false;\n            }\n        }\n        const changed = this.hasChanged(value, this.dataValue);\n        if (this.parent && !this.options.server) {\n            this.parent.checkComponentConditions();\n        }\n        this.dataValue = value;\n        // Refresh editRow data when data changes.\n        this.dataValue.forEach((row, rowIndex) => {\n            const editRow = this.editRows[rowIndex];\n            if (editRow) {\n                editRow.data = row;\n                this.restoreRowContext(editRow, flags);\n                editRow.state = EditRowState.Saved;\n                editRow.backup = null;\n                editRow.errors = [];\n            }\n            else {\n                this.editRows[rowIndex] = {\n                    components: this.lazyLoad ? [] : this.createRowComponents(row, rowIndex),\n                    data: row,\n                    state: EditRowState.Saved,\n                    backup: null,\n                    errors: [],\n                };\n            }\n        });\n        let { length: dataLength } = this.dataValue;\n        // If the last row is a new row, then do not remove it.\n        if (this.editRows[dataLength] && (this.editRows[dataLength].state === EditRowState.New)) {\n            dataLength = (dataLength + 1);\n        }\n        this.editRows.slice(dataLength).forEach((editRow, index) => this.baseRemoveRow(dataLength + index));\n        this.editRows = this.editRows.slice(0, dataLength);\n        this.openWhenEmpty();\n        this.updateOnChange(flags, changed);\n        // do not call checkData with server option, it is called when change is triggered in updateOnChange\n        if (!this.options.server) {\n            this.checkData();\n        }\n        this.changeState(changed, flags);\n        return changed;\n    }\n    openWhenEmpty() {\n        const shouldBeOpened = !this.dataValue.length && this.component.openWhenEmpty;\n        const hasNoRows = !this.editRows.length;\n        if (hasNoRows && shouldBeOpened && !this.builderMode) {\n            const dataObj = {};\n            this.createRow(dataObj, 0);\n        }\n    }\n    restoreRowContext(editRow, flags = {}) {\n        editRow.components.forEach((component) => {\n            component.data = editRow.data;\n            this.setNestedValue(component, editRow.data, flags);\n        });\n    }\n    emptyRows() {\n        this.editRows.forEach((editRow, index) => this.destroyComponents(false, index));\n        this.editRows = [];\n    }\n    resetValue() {\n        super.resetValue();\n        this.emptyRows();\n    }\n}\nexports[\"default\"] = EditGridComponent;\nEditGridComponent.prototype.hasChanged = Component_1.default.prototype.hasChanged;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/editgrid/EditGrid.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst process_1 = __webpack_require__(/*! @formio/core/process */ \"./node_modules/@formio/core/lib/process/index.js\");\nconst components_1 = __webpack_require__(/*! @formio/bootstrap/components */ \"./node_modules/@formio/bootstrap/lib/cjs/templates/components/index.js\");\nconst NestedArrayComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/nestedarray/NestedArrayComponent */ \"./lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js\"));\nconst Component_1 = __importDefault(__webpack_require__(/*! ../_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst Alert_1 = __importDefault(__webpack_require__(/*! ../alert/Alert */ \"./lib/cjs/components/alert/Alert.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst EditRowState = {\n    New: 'new',\n    Editing: 'editing',\n    Saved: 'saved',\n    Viewing: 'viewing',\n    Removed: 'removed',\n    Draft: 'draft',\n};\nclass EditGridComponent extends NestedArrayComponent_1.default {\n    static schema(...extend) {\n        return NestedArrayComponent_1.default.schema({\n            type: 'editgrid',\n            label: 'Edit Grid',\n            key: 'editGrid',\n            clearOnHide: true,\n            input: true,\n            tree: true,\n            removeRow: 'Cancel',\n            defaultOpen: false,\n            openWhenEmpty: false,\n            modal: false,\n            components: [],\n            inlineEdit: false,\n            templates: {\n                header: EditGridComponent.defaultHeaderTemplate,\n                row: EditGridComponent.defaultRowTemplate,\n                tableHeader: EditGridComponent.defaultTableHeaderTemplate,\n                tableRow: EditGridComponent.defaultTableRowTemplate,\n                footer: '',\n            },\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Edit Grid',\n            icon: 'tasks',\n            group: 'data',\n            documentation: '/userguide/form-building/data-components#edit-grid',\n            showPreview: false,\n            weight: 30,\n            schema: EditGridComponent.schema(),\n        };\n    }\n    static get defaultHeaderTemplate() {\n        return `<div class=\"row\">\n      {% util.eachComponent(components, function(component) { %}\n        {% if (displayValue(component)) { %}\n          <div class=\"col-sm-2\">{{ t(component.label) }}</div>\n        {% } %}\n      {% }) %}\n    </div>`;\n    }\n    static get defaultTableHeaderTemplate() {\n        return `\n      <tr>\n        {% util.eachComponent(components, function(component) { %}\n          {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}\n            <td class=\"editgrid-table-column\">{{ component.label }}</td>\n          {% } %}\n        {% }) %}\n        {% if (!instance.options.readOnly && !instance.disabled) { %}\n          <td class=\"editgrid-table-column\">Actions</td>\n        {% } %}\n      </tr>\n    `;\n    }\n    static get defaultRowTemplate() {\n        return `<div class=\"row\">\n      {% util.eachComponent(components, function(component) { %}\n        {% if (displayValue(component)) { %}\n          <div class=\"col-sm-2\">\n            {{ isVisibleInRow(component) ? getView(component, row[component.key]) : ''}}\n          </div>\n        {% } %}\n      {% }) %}\n      {% if (!instance.options.readOnly && !instance.disabled) { %}\n        <div class=\"col-sm-2\">\n          <div class=\"btn-group pull-right\">\n            <button class=\"btn btn-default btn-light btn-sm editRow\"><i class=\"{{ iconClass('edit') }}\"></i></button>\n            {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}\n              <button class=\"btn btn-danger btn-sm removeRow\"><i class=\"{{ iconClass('trash') }}\"></i></button>\n            {% } %}\n          </div>\n        </div>\n      {% } %}\n    </div>`;\n    }\n    static get defaultTableRowTemplate() {\n        return `\n      {% util.eachComponent(components, function(component) { %}\n          {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}\n            <td class=\"editgrid-table-column\">\n              {{ getView(component, row[component.key]) }}\n            </td>\n          {% } %}\n        {% }) %}\n        {% if (!instance.options.readOnly && !instance.disabled) { %}\n          <td class=\"editgrid-table-column\">\n            <div class=\"btn-group\">\n              <button class=\"btn btn-default btn-light btn-sm editRow\" aria-label=\"{{ t('Edit row') }}\"><i class=\"{{ iconClass('edit') }}\"></i></button>\n              {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}\n              <button class=\"btn btn-danger btn-sm removeRow\" aria-label=\"{{ t('Remove row') }}\"><i class=\"{{ iconClass('trash') }}\"></i></button>\n              {% } %}\n            </div>\n          </td>\n        {% } %}\n    `;\n    }\n    get defaultDialogTemplate() {\n        return `\n    <h3 ${this._referenceAttributeName}=\"dialogHeader\">${this.t('Do you want to clear data?')}</h3>\n    <div style=\"display:flex; justify-content: flex-end;\">\n      <button ${this._referenceAttributeName}=\"dialogCancelButton\" class=\"btn btn-secondary\" aria-label=\"${this.t('Cancel')}\">${this.t('Cancel')}</button>\n      <button ${this._referenceAttributeName}=\"dialogYesButton\" class=\"btn btn-danger\" aria-label=\"${this.t('Yes, delete it')}\">${this.t('Yes, delete it')}</button>\n    </div>\n  `;\n    }\n    get defaultRowTemplate() {\n        return this.displayAsTable\n            ? EditGridComponent.defaultTableRowTemplate\n            : EditGridComponent.defaultRowTemplate;\n    }\n    get defaultHeaderTemplate() {\n        return this.displayAsTable\n            ? EditGridComponent.defaultTableHeaderTemplate\n            : EditGridComponent.defaultHeaderTemplate;\n    }\n    get rowTemplate() {\n        let rowTemplate;\n        if (utils_1.Evaluator.noeval) {\n            rowTemplate = this.displayAsTable ?\n                components_1.editgrid.tableRow\n                : components_1.editgrid.row;\n        }\n        else {\n            rowTemplate = this.displayAsTable ?\n                lodash_1.default.get(this.component, 'templates.tableRow', this.defaultRowTemplate)\n                : lodash_1.default.get(this.component, 'templates.row', this.defaultRowTemplate);\n        }\n        return rowTemplate;\n    }\n    get headerTemplate() {\n        let headerTemplate;\n        if (utils_1.Evaluator.noeval) {\n            headerTemplate = this.displayAsTable ?\n                components_1.editgrid.tableHeader\n                : components_1.editgrid.header;\n        }\n        else {\n            headerTemplate = this.displayAsTable ?\n                lodash_1.default.get(this.component, 'templates.tableHeader', this.defaultHeaderTemplate)\n                : lodash_1.default.get(this.component, 'templates.header', this.defaultHeaderTemplate);\n        }\n        return headerTemplate;\n    }\n    /**\n     * @returns {boolean} - Returns true if the component has nested components which don't trigger changes on the root level\n     */\n    get hasScopedChildren() {\n        return !this.inlineEditMode;\n    }\n    get defaultSchema() {\n        return EditGridComponent.schema();\n    }\n    get emptyValue() {\n        return [];\n    }\n    get editgridKey() {\n        return `editgrid-${this.key}`;\n    }\n    get rowRef() {\n        return `${this.editgridKey}-row`;\n    }\n    get rowElements() {\n        return this.refs[this.rowRef];\n    }\n    get rowRefs() {\n        return this.refs[`editgrid-${this.component.key}-row`];\n    }\n    get addRowRef() {\n        return `${this.editgridKey}-addRow`;\n    }\n    get addRowElements() {\n        return this.refs[this.addRowRef];\n    }\n    get saveRowRef() {\n        return `${this.editgridKey}-saveRow`;\n    }\n    get saveRowElements() {\n        return this.refs[this.saveRowRef];\n    }\n    get cancelRowRef() {\n        return `${this.editgridKey}-cancelRow`;\n    }\n    get cancelRowElements() {\n        return this.refs[this.cancelRowRef];\n    }\n    get inlineEditMode() {\n        return this.component.inlineEdit;\n    }\n    get saveEditMode() {\n        return !this.inlineEditMode;\n    }\n    get minLength() {\n        return this.builderMode ? 0 : lodash_1.default.get(this.component, 'validate.minLength', 0);\n    }\n    get data() {\n        return this._data;\n    }\n    get dataValue() {\n        return super.dataValue || [];\n    }\n    set dataValue(value) {\n        super.dataValue = value;\n    }\n    get displayAsTable() {\n        return this.component.displayAsTable;\n    }\n    set data(value) {\n        this._data = value;\n        const data = this.dataValue;\n        (this.editRows || []).forEach((row, index) => {\n            if (!data[index] && row.state !== EditRowState.New) {\n                data[index] = {};\n            }\n            const rowData = data[index] || {};\n            row.data = rowData;\n            row.components.forEach((component) => {\n                component.data = rowData;\n            });\n        });\n    }\n    get iteratableRows() {\n        return this.editRows;\n    }\n    get defaultValue() {\n        const value = super.defaultValue;\n        const defaultValue = Array.isArray(value) ? value : [];\n        lodash_1.default.times(this.minLength - defaultValue.length, () => defaultValue.push({}));\n        return defaultValue;\n    }\n    constructor(...args) {\n        super(...args);\n        this.type = 'editgrid';\n    }\n    hasRemoveButtons() {\n        return !this.component.disableAddingRemovingRows &&\n            !this.options.readOnly &&\n            !this.disabled &&\n            this.fullMode &&\n            (this.dataValue.length > lodash_1.default.get(this.component, 'validate.minLength', 0));\n    }\n    init() {\n        if (this.builderMode) {\n            this.editRows = [];\n            return super.init();\n        }\n        this.components = this.components || [];\n        const dataValue = this.dataValue;\n        const openWhenEmpty = !dataValue.length && this.component.openWhenEmpty;\n        if (openWhenEmpty) {\n            const dataObj = {};\n            this.editRows = [];\n            this.createRow(dataObj, 0);\n        }\n        else {\n            this.editRows = dataValue.map((row, rowIndex) => ({\n                components: this.lazyLoad ? [] : this.createRowComponents(row, rowIndex),\n                data: row,\n                state: EditRowState.Saved,\n                backup: null,\n                error: null,\n                rowIndex,\n            }));\n        }\n        this.prevHasAddButton = this.hasAddButton();\n        this.checkData();\n        this.setVariableTypeComponents();\n        if (this.variableTypeComponentsIndexes.length) {\n            lodash_1.default.each(this.editRows || [], (editRow, rowIndex) => this.checkRowVariableTypeComponents(editRow, rowIndex));\n        }\n    }\n    checkRowVariableTypeComponents(editRow, rowIndex) {\n        const rowComponents = editRow.components;\n        if (lodash_1.default.some(this.variableTypeComponentsIndexes, (compIndex) => {\n            const variableTypeComp = rowComponents[compIndex];\n            return variableTypeComp.type !== variableTypeComp.component.type;\n        })) {\n            editRow.components = this.createRowComponents(editRow.data, rowIndex, true);\n        }\n    }\n    setVariableTypeComponents() {\n        //set components which type is changing within a row (e.g.,by mergeComponentSchema action)\n        this.variableTypeComponentsIndexes = [];\n        lodash_1.default.each(this.component.components, (comp, index) => {\n            if (comp.typeChangeEnabled) {\n                this.variableTypeComponentsIndexes.push(index);\n            }\n        });\n    }\n    isOpen(editRow) {\n        return [EditRowState.New, EditRowState.Editing, EditRowState.Viewing].includes(editRow.state);\n    }\n    isComponentVisibleInSomeRow(component) {\n        const rows = this.editRows;\n        const savedStates = [EditRowState.Saved, EditRowState.Editing, EditRowState.Draft];\n        const savedRows = rows.filter(row => lodash_1.default.includes(savedStates, row.state));\n        this.visibleInHeader = this.visibleInHeader || [];\n        const changeVisibleInHeader = (component, isVisible) => {\n            if (!isVisible) {\n                lodash_1.default.remove(this.visibleInHeader, (key) => key === component.key);\n            }\n            if (isVisible && !lodash_1.default.includes(this.visibleInHeader, component.key)) {\n                this.visibleInHeader.push(component.key);\n            }\n        };\n        if (lodash_1.default.isEmpty(rows)) {\n            const rowComponents = this.createRowComponents({}, 0);\n            let checkComponent;\n            (0, utils_1.eachComponent)(rowComponents, (comp) => {\n                if (comp.component.key === component.key) {\n                    checkComponent = comp;\n                }\n                comp.checkConditions();\n            });\n            const isVisible = checkComponent ? checkComponent.visible : true;\n            [...this.components].forEach((comp) => this.removeComponent(comp, this.components));\n            changeVisibleInHeader(component, isVisible);\n            return isVisible;\n        }\n        const isOpenRowWhenEmpty = lodash_1.default.get(this.component, 'openWhenEmpty') && rows.length === 1 && rows[0].state === EditRowState.New;\n        if (!lodash_1.default.isEmpty(rows) && lodash_1.default.isEmpty(savedRows) && !isOpenRowWhenEmpty) {\n            return lodash_1.default.includes(this.visibleInHeader, component.key);\n        }\n        return lodash_1.default.some(isOpenRowWhenEmpty ? rows : savedRows, (row, index) => {\n            const editingRow = row.state === EditRowState.Editing;\n            let isVisible;\n            if (!editingRow) {\n                const flattenedComponents = this.flattenComponents(index);\n                const instance = flattenedComponents[component.key];\n                isVisible = instance ? instance.visible : true;\n                changeVisibleInHeader(component, isVisible);\n            }\n            else {\n                isVisible = lodash_1.default.includes(this.visibleInHeader, component.key);\n            }\n            return isVisible;\n        });\n    }\n    render(children) {\n        if (this.builderMode) {\n            return super.render();\n        }\n        const dataValue = this.dataValue;\n        const headerTemplate = this.headerTemplate;\n        const t = this.t.bind(this);\n        const templateName = this.displayAsTable ? 'editgridTable' : 'editgrid';\n        return super.render(children || this.renderTemplate(templateName, {\n            ref: {\n                row: this.rowRef,\n                addRow: this.addRowRef,\n                saveRow: this.saveRowRef,\n                cancelRow: this.cancelRowRef,\n            },\n            header: this.renderString(headerTemplate, {\n                displayValue: (component) => this.displayComponentValue(component, true),\n                components: this.component.components,\n                value: dataValue,\n                t\n            }),\n            footer: this.renderString(lodash_1.default.get(this.component, 'templates.footer'), {\n                components: this.component.components,\n                value: dataValue,\n                t\n            }),\n            rows: this.editRows.map(this.renderRow.bind(this)),\n            openRows: this.editRows.map((row) => this.isOpen(row)),\n            errors: this.editRows.map((row) => row.error),\n            hasAddButton: this.hasAddButton(),\n            hasRemoveButtons: this.hasRemoveButtons(),\n        }));\n    }\n    renderComponents(components) {\n        components = components || this.getComponents();\n        const children = components.map(component => component.render());\n        const templateName = this.displayAsTable && this.prevHasAddButton ? 'tableComponents' : 'components';\n        return this.renderTemplate(templateName, {\n            children,\n            components,\n        });\n    }\n    attach(element) {\n        if (this.builderMode) {\n            return super.attach(element);\n        }\n        this.loadRefs(element, {\n            [this.addRowRef]: 'multiple',\n            [this.saveRowRef]: 'multiple',\n            [this.cancelRowRef]: 'multiple',\n            [this.rowRef]: 'multiple',\n        });\n        this.addRowElements.forEach((addButton) => {\n            this.addEventListener(addButton, 'click', () => this.addRow());\n        });\n        let openRowCount = 0;\n        this.rowElements.forEach((row, rowIndex) => {\n            const editRow = this.editRows[rowIndex];\n            if (editRow === null || editRow === void 0 ? void 0 : editRow.isRowSelected) {\n                row.classList.add('selected');\n            }\n            if (this.isOpen(editRow)) {\n                this.attachComponents(row, editRow.components);\n                this.addEventListener(this.saveRowElements[openRowCount], 'click', () => this.saveRow(rowIndex, true));\n                this.addEventListener(this.cancelRowElements[openRowCount], 'click', () => this.cancelRow(rowIndex));\n                openRowCount++;\n            }\n            else {\n                // Attach edit and remove button events.\n                [\n                    {\n                        className: 'removeRow',\n                        event: 'click',\n                        action: () => this.removeRow(rowIndex, true),\n                    },\n                    {\n                        className: 'editRow',\n                        event: 'click',\n                        action: () => {\n                            this.editRow(rowIndex).then(() => {\n                                var _a;\n                                if (this.component.rowDrafts) {\n                                    const errors = this.validateRow(editRow, false);\n                                    const shouldShowRowErrorsAlert = this.component.modal && errors.length && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted);\n                                    if (shouldShowRowErrorsAlert) {\n                                        this.alert.showErrors(errors, false);\n                                        editRow.alerts = true;\n                                    }\n                                }\n                            });\n                        },\n                    },\n                    {\n                        className: 'row',\n                        event: 'click',\n                        action: () => {\n                            row.classList.toggle('selected');\n                            let eventName = 'editGridSelectRow';\n                            if (Array.from(row.classList).includes('selected')) {\n                                editRow.isRowSelected = true;\n                            }\n                            else {\n                                delete editRow.isRowSelected;\n                                eventName = 'editGridUnSelectRow';\n                            }\n                            this.emit(eventName, {\n                                component: this.component,\n                                data: this.dataValue[rowIndex]\n                            });\n                        },\n                    }\n                ].forEach(({ className, event, action, }) => {\n                    const elements = row.getElementsByClassName(className);\n                    Array.prototype.forEach.call(elements, (element) => {\n                        if (this.options.pdf && lodash_1.default.intersection(element.classList, ['editRow', 'removeRow']).length) {\n                            element.style.display = 'none';\n                        }\n                        else {\n                            this.addEventListener(element, event, action);\n                        }\n                    });\n                });\n            }\n        });\n        // Add open class to the element if any edit grid row is open\n        if (openRowCount) {\n            this.addClass(this.refs.component, `formio-component-${this.component.type}-row-open`);\n        }\n        else {\n            this.removeClass(this.refs.component, `formio-component-${this.component.type}-row-open`);\n        }\n        return super.attach(element);\n    }\n    flattenRowDataValue(dataValue) {\n        const flattened = {};\n        Object.keys(dataValue).forEach((key) => {\n            if (lodash_1.default.isObject(dataValue[key]) && !lodash_1.default.isNil(dataValue[key])) {\n                Object.assign(flattened, this.flattenRowDataValue(dataValue[key]));\n            }\n            else {\n                flattened[key] = dataValue[key];\n            }\n        });\n        return flattened;\n    }\n    isComponentVisibleInRow(component, flattenedComponents) {\n        const instance = flattenedComponents[component.key];\n        return instance ? instance.visible : true;\n    }\n    displayComponentValue(component, header) {\n        return !!((!component.hasOwnProperty('tableView') || component.tableView)\n            && header ? this.isComponentVisibleInSomeRow(component) : lodash_1.default.includes(this.visibleInHeader, component.key));\n    }\n    renderRow(row, rowIndex) {\n        const dataValue = this.dataValue;\n        if (this.isOpen(row)) {\n            return this.renderComponents(row.components);\n        }\n        else {\n            const flattenedComponents = this.flattenComponents(rowIndex);\n            const rowTemplate = this.rowTemplate;\n            return this.renderString(rowTemplate, {\n                row: dataValue[rowIndex] || {},\n                data: this.data,\n                rowIndex,\n                components: this.component.components,\n                flattenedComponents,\n                displayValue: (component) => this.displayComponentValue(component),\n                isVisibleInRow: (component) => this.isComponentVisibleInRow(component, flattenedComponents),\n                getView: (component, data) => {\n                    var _a, _b;\n                    const instance = flattenedComponents[component.key];\n                    const view = instance ? instance.getView(data || instance.dataValue) : '';\n                    // If there is an html tag in view, don't allow it to be injected in template\n                    const htmlTagRegExp = new RegExp('<(.*?)>');\n                    return typeof view === 'string' && view.length && !((_a = instance.component) === null || _a === void 0 ? void 0 : _a.template) && htmlTagRegExp.test(view) && ((_b = instance.component) === null || _b === void 0 ? void 0 : _b.inputFormat) !== 'html'\n                        ? `<input type=\"text\" value=\"${view.replace(/\"/g, '&quot;')}\" readonly/>`\n                        : view;\n                },\n                state: this.editRows[rowIndex].state,\n                t: this.t.bind(this)\n            });\n        }\n    }\n    eachComponent(fn, rowIndex) {\n        lodash_1.default.each(this.getComponents(rowIndex), (component, index) => {\n            if (fn(component, index) === false) {\n                return false;\n            }\n        });\n    }\n    restoreComponentsContext() {\n        this.getComponents().forEach((component) => {\n            var _a;\n            const rowData = this.dataValue[component.rowIndex];\n            const editRowData = (_a = this.editRows[component.rowIndex]) === null || _a === void 0 ? void 0 : _a.data;\n            component.data = rowData || editRowData;\n        });\n    }\n    flattenComponents(rowIndex) {\n        const result = {};\n        this.everyComponent((component) => {\n            result[component.component.flattenAs || component.key] = component;\n        }, rowIndex);\n        return result;\n    }\n    getComponents(rowIndex) {\n        var _a;\n        // Ensure editrows is set.\n        this.editRows = this.editRows || [];\n        return this.builderMode\n            ? super.getComponents()\n            : lodash_1.default.isNumber(rowIndex)\n                ? (((_a = this.editRows[rowIndex]) === null || _a === void 0 ? void 0 : _a.components) || [])\n                : this.editRows.reduce((result, row) => result.concat(row.components || []), []);\n    }\n    destroy(all = false) {\n        this.calculatedValue = undefined;\n        super.destroy(all);\n    }\n    destroyComponents(all = false, rowIndex = 0) {\n        if (this.builderMode) {\n            return super.destroyComponents(all);\n        }\n        const components = this.getComponents(rowIndex).slice();\n        components.forEach((comp) => this.removeComponent(comp, this.components, all));\n    }\n    createRow(dataObj, rowIndex) {\n        const editRow = {\n            components: this.createRowComponents(dataObj, rowIndex),\n            data: dataObj,\n            state: EditRowState.New,\n            backup: null,\n            error: null,\n            rowIndex,\n        };\n        this.editRows.push(editRow);\n        if (this.inlineEditMode) {\n            this.dataValue.push(dataObj);\n        }\n        return editRow;\n    }\n    addRow() {\n        if (this.options.readOnly) {\n            return;\n        }\n        const dataObj = {};\n        const rowIndex = this.editRows.length;\n        const editRow = this.createRow(dataObj, rowIndex);\n        if (editRow.state === EditRowState.New) {\n            this.emptyRow = (0, utils_1.fastCloneDeep)(editRow.data);\n        }\n        if (this.inlineEditMode) {\n            this.triggerChange();\n        }\n        this.emit('editGridAddRow', {\n            component: this.component,\n            row: editRow,\n        });\n        this.processRow('checkData', null, {}, editRow.data, editRow.components);\n        if (this.component.modal) {\n            this.addRowModal(rowIndex);\n        }\n        else {\n            this.redraw();\n        }\n        return editRow;\n    }\n    addRowModal(rowIndex) {\n        const modalContent = this.ce('div');\n        const editRow = this.editRows[rowIndex];\n        editRow.willBeSaved = false;\n        const { components } = editRow;\n        modalContent.innerHTML = this.renderComponents(components);\n        const dialog = this.component.modal ? this.createModal(modalContent, {}, () => this.showDialog(rowIndex)) : undefined;\n        dialog.classList.add(`editgrid-row-modal-${this.id}`);\n        editRow.dialog = dialog;\n        if (this.alert) {\n            this.alert.clear();\n            this.alert = null;\n        }\n        this.alert = new Alert_1.default(dialog.refs.dialogContents, this);\n        this.addEventListener(dialog, 'close', () => {\n            if (!editRow.willBeSaved) {\n                if (this.editRows[rowIndex] && this.editRows[rowIndex].state !== EditRowState.New) {\n                    this.editRows[rowIndex].components.forEach((comp) => {\n                        comp.setPristine(true);\n                    });\n                }\n                this.cancelRow(rowIndex);\n            }\n            if (this.alert) {\n                this.alert.clear();\n                this.alert = null;\n            }\n            // Remove references to dialog elements to prevent possible in some cases memory leaks\n            delete editRow.confirmationDialog;\n            delete editRow.dialog;\n        });\n        dialog.refs.dialogContents.appendChild(this.ce('button', {\n            class: 'btn btn-primary',\n            onClick: () => {\n                // After an attempt to save, all the components inside the row should become not pristine\n                if (!this.component.rowDrafts) {\n                    editRow.components.forEach((comp) => comp.setPristine(false));\n                }\n                const errors = this.validateRow(editRow, true);\n                if (!errors.length || this.component.rowDrafts) {\n                    editRow.willBeSaved = true;\n                    dialog.close();\n                    this.saveRow(rowIndex, true);\n                }\n                else {\n                    this.alert.showErrors(errors, false);\n                    editRow.alerts = true;\n                }\n            },\n        }, this.component.saveRow || 'Save'));\n        this.emit('editGridOpenModal', {\n            component: this.component,\n            row: editRow,\n            instance: this,\n        });\n        return this.attachComponents(modalContent, components);\n    }\n    showDialog(rowIndex) {\n        const editRow = this.editRows[rowIndex];\n        if (editRow.state === EditRowState.New ? lodash_1.default.isEqual(this.emptyRow, editRow.data) : lodash_1.default.isEqual(editRow.backup, editRow.data)) {\n            return Promise.resolve();\n        }\n        const wrapper = this.ce('div', { ref: 'confirmationDialog' });\n        const dialogContent = this.component.dialogTemplate || this.defaultDialogTemplate;\n        wrapper.innerHTML = dialogContent;\n        wrapper.refs = {};\n        this.loadRefs.call(wrapper, wrapper, {\n            dialogHeader: 'single',\n            dialogCancelButton: 'single',\n            dialogYesButton: 'single',\n        });\n        const dialog = this.createModal(wrapper);\n        dialog.classList.add(`editgrid-row-modal-confirmation-${this.id}`);\n        const close = (event) => {\n            event.preventDefault();\n            dialog.close();\n        };\n        let dialogResult;\n        const promise = new Promise((resolve, reject) => {\n            dialogResult = { resolve, reject };\n        });\n        this.addEventListener(wrapper.refs.dialogYesButton, 'click', (event) => {\n            close(event);\n            dialogResult.resolve();\n        });\n        this.addEventListener(wrapper.refs.dialogCancelButton, 'click', (event) => {\n            close(event);\n            dialogResult.reject();\n        });\n        editRow.confirmationDialog = dialog;\n        return promise;\n    }\n    editRow(rowIndex) {\n        const editRow = this.editRows[rowIndex];\n        const isAlreadyEditing = editRow.state === EditRowState.Editing || editRow.state === EditRowState.New;\n        if (!editRow || isAlreadyEditing) {\n            return Promise.resolve();\n        }\n        editRow.prevState = editRow.state;\n        editRow.state = this.options.readOnly ? EditRowState.Viewing : EditRowState.Editing;\n        if (this.lazyLoad && (editRow.components.length === 0)) {\n            editRow.components = this.createRowComponents(editRow.data, rowIndex);\n        }\n        const dataSnapshot = (0, utils_1.fastCloneDeep)(editRow.data);\n        if (this.inlineEditMode) {\n            editRow.backup = dataSnapshot;\n        }\n        else {\n            editRow.backup = (0, utils_1.fastCloneDeep)(editRow.data);\n            editRow.data = dataSnapshot;\n            this.restoreRowContext(editRow);\n        }\n        this.emit('editGridEditRow', {\n            component: this.component,\n            row: editRow,\n            instance: this,\n        });\n        if (this.component.modal) {\n            return this.addRowModal(rowIndex);\n        }\n        return this.redraw();\n    }\n    clearErrors(rowIndex) {\n        const editRow = this.editRows[rowIndex];\n        if (editRow && Array.isArray(editRow.components)) {\n            editRow.components.forEach((comp) => {\n                comp.setPristine(true);\n                comp.setCustomValidity('');\n            });\n        }\n    }\n    cancelRow(rowIndex) {\n        if (this.options.readOnly) {\n            return;\n        }\n        const editRow = this.editRows[rowIndex];\n        switch (editRow.state) {\n            case EditRowState.New: {\n                editRow.state = EditRowState.Removed;\n                this.clearErrors(rowIndex);\n                this.destroyComponents(false, rowIndex);\n                if (this.inlineEditMode) {\n                    this.splice(rowIndex);\n                }\n                this.editRows.splice(rowIndex, 1);\n                this.openWhenEmpty();\n                break;\n            }\n            case EditRowState.Editing: {\n                editRow.state = editRow.prevState;\n                if (this.inlineEditMode) {\n                    this.dataValue[rowIndex] = editRow.backup;\n                }\n                editRow.data = editRow.backup;\n                editRow.backup = null;\n                this.restoreRowContext(editRow);\n                this.clearErrors(rowIndex);\n                break;\n            }\n        }\n        this.emit('editGridCancelRow', {\n            instance: this,\n            component: this.component,\n            editRow,\n        });\n        this.checkValidity(null, true);\n        this.redraw();\n        if (this.component.rowDrafts) {\n            this.checkValidity(this.data, false);\n        }\n    }\n    saveRow(rowIndex, modified) {\n        var _a, _b;\n        const editRow = this.editRows[rowIndex];\n        if (this.options.readOnly) {\n            return;\n        }\n        // After an attempt to save, all the components inside the row should become not pristine\n        if (!this.component.rowDrafts) {\n            editRow.components.forEach((comp) => comp.setPristine(false));\n        }\n        const errors = this.validateRow(editRow, true);\n        if (!this.component.rowDrafts) {\n            if (errors.length) {\n                return false;\n            }\n        }\n        if (this.saveEditMode) {\n            const dataValue = this.dataValue;\n            if ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.focusedComponent) === null || _b === void 0 ? void 0 : _b.component.typeChangeEnabled) {\n                this.root.focusedComponent = null;\n            }\n            switch (editRow.state) {\n                case EditRowState.New: {\n                    const newIndex = dataValue.length;\n                    dataValue.push(editRow.data);\n                    editRow.components.forEach(component => component.rowIndex = newIndex);\n                    if (rowIndex !== newIndex) {\n                        this.editRows.splice(rowIndex, 1);\n                        this.editRows.splice(newIndex, 0, editRow);\n                    }\n                    break;\n                }\n                case EditRowState.Editing: {\n                    dataValue[rowIndex] = editRow.data;\n                    break;\n                }\n            }\n        }\n        editRow.state = this.component.rowDrafts && errors.length ? EditRowState.Draft : EditRowState.Saved;\n        editRow.backup = null;\n        this.updateValue();\n        this.emit('editGridSaveRow', {\n            component: this.component,\n            row: editRow.data,\n            instance: this\n        });\n        this.triggerChange({ modified, noPristineChangeOnModified: modified && this.component.rowDrafts, isolateRow: true });\n        if (this.component.rowDrafts) {\n            editRow.components.forEach(comp => comp.setPristine(this.pristine));\n        }\n        this.checkValidity(null, true);\n        this.redraw();\n        if (editRow.alerts) {\n            editRow.alerts = false;\n        }\n        return true;\n    }\n    beforeFocus(component) {\n        if ('beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n        const relativePath = this.getRelativePath(component.path);\n        const arrayPath = (0, utils_1.getArrayFromComponentPath)(relativePath);\n        const rowIndex = arrayPath[0];\n        let rowToEditIndex = arrayPath[0];\n        this.editRows.forEach((row, indexInArray) => {\n            if (row.rowIndex === rowIndex) {\n                rowToEditIndex = indexInArray;\n            }\n        });\n        if (lodash_1.default.isNumber(rowToEditIndex)) {\n            this.editRow(rowToEditIndex);\n        }\n    }\n    updateComponentsRowIndex(components, rowIndex) {\n        components.forEach((component, colIndex) => {\n            component.rowIndex = rowIndex;\n            component.row = `${rowIndex}-${colIndex}`;\n        });\n    }\n    updateRowsComponents(rowIndex) {\n        this.editRows.slice(rowIndex).forEach((row, index) => {\n            this.updateComponentsRowIndex(row.components, rowIndex + index);\n        });\n    }\n    baseRemoveRow(rowIndex) {\n        const editRow = this.editRows[rowIndex];\n        editRow.state = EditRowState.Removed;\n        this.destroyComponents(false, rowIndex);\n        return editRow;\n    }\n    removeRow(rowIndex, modified) {\n        if (this.options.readOnly) {\n            return;\n        }\n        this.clearErrors(rowIndex);\n        this.baseRemoveRow(rowIndex);\n        this.removeSubmissionMetadataRow(rowIndex);\n        this.splice(rowIndex);\n        this.emit('editGridDeleteRow', {\n            index: rowIndex\n        });\n        this.editRows.splice(rowIndex, 1);\n        this.openWhenEmpty();\n        this.updateRowsComponents(rowIndex);\n        this.updateValue();\n        this.triggerChange({ modified, noPristineChangeOnModified: modified && this.component.rowDrafts, isolateRow: true });\n        this.checkValidity(null, true);\n        this.checkData();\n        this.redraw();\n    }\n    createRowComponents(row, rowIndex, recreatePartially) {\n        // Iterate through existing components and destroy the ones with the same rowIndex.\n        if (this.components) {\n            for (let i = 0; i < this.components.length; i++) {\n                if (this.components[i].rowIndex === rowIndex) {\n                    this.components[i].destroy();\n                    this.components.splice(i, 1);\n                }\n            }\n        }\n        const currentRowComponents = lodash_1.default.get(this.editRows, `[${rowIndex}].components`, null);\n        return this.component.components.map((col, colIndex) => {\n            var _a;\n            if (recreatePartially && currentRowComponents && this.variableTypeComponentsIndexes.length) {\n                const currentComp = currentRowComponents[colIndex];\n                const shouldRecreate = lodash_1.default.includes(this.variableTypeComponentsIndexes, colIndex) && (currentComp === null || currentComp === void 0 ? void 0 : currentComp.type) !== ((_a = currentComp === null || currentComp === void 0 ? void 0 : currentComp.component) === null || _a === void 0 ? void 0 : _a.type);\n                if (!shouldRecreate) {\n                    return currentComp;\n                }\n                col = currentComp.component;\n            }\n            const column = lodash_1.default.clone(col);\n            const options = lodash_1.default.clone(this.options);\n            options.name += `[${rowIndex}]`;\n            options.row = `${rowIndex}-${colIndex}`;\n            options.onChange = (flags = {}, changed, modified) => {\n                var _a, _b;\n                if (((_a = changed.instance.root) === null || _a === void 0 ? void 0 : _a.id) && (((_b = this.root) === null || _b === void 0 ? void 0 : _b.id) !== changed.instance.root.id)) {\n                    changed.instance.root.triggerChange(flags, changed, modified);\n                }\n                else if (!this.component.modal) {\n                    this.triggerRootChange(flags, changed, modified);\n                }\n                if (this.inlineEditMode) {\n                    return;\n                }\n                const editRow = this.editRows[rowIndex];\n                if (editRow) {\n                    this.processRow('checkData', null, Object.assign(Object.assign({}, flags), { changed }), editRow.data, editRow.components);\n                    this.validateRow(editRow, false);\n                }\n                if (this.variableTypeComponentsIndexes.length) {\n                    this.checkRowVariableTypeComponents(editRow, rowIndex);\n                    this.redraw();\n                }\n            };\n            const comp = this.createComponent(lodash_1.default.assign({}, column, { row: options.row }), options, row, null, recreatePartially && currentRowComponents ? currentRowComponents[colIndex] : null);\n            comp.rowIndex = rowIndex;\n            comp.inEditGrid = true;\n            return comp;\n        });\n    }\n    hasOpenRows() {\n        return this.editRows.some(row => this.isOpen(row));\n    }\n    getAttachedData(data = null) {\n        const ourData = (0, utils_1.fastCloneDeep)(data || this._data || this.rootValue);\n        lodash_1.default.set(ourData, this.key, this.editRows.map((row) => row.data));\n        return ourData;\n    }\n    shouldValidateDraft(editRow) {\n        var _a, _b;\n        // Draft rows should be validated only when there was an attempt to submit a form\n        return (editRow.state === EditRowState.Draft &&\n            !this.pristine &&\n            !((_a = this.root) === null || _a === void 0 ? void 0 : _a.pristine) &&\n            !this.hasOpenRows()) ||\n            ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submitted);\n    }\n    shouldValidateRow(editRow, dirty) {\n        return this.shouldValidateDraft(editRow) ||\n            editRow.state === EditRowState.New ||\n            editRow.state === EditRowState.Editing ||\n            editRow.alerts ||\n            dirty;\n    }\n    validateRow(editRow, dirty, forceSilentCheck) {\n        var _a;\n        editRow.errors = [];\n        if (this.shouldValidateRow(editRow, dirty)) {\n            const silentCheck = (this.component.rowDrafts && !this.shouldValidateDraft(editRow)) || forceSilentCheck;\n            const rootValue = (0, utils_1.fastCloneDeep)(this.rootValue);\n            const editGridValue = lodash_1.default.get(rootValue, this.path, []);\n            editGridValue[editRow.rowIndex] = editRow.data;\n            lodash_1.default.set(rootValue, this.path, editGridValue);\n            const validationProcessorProcess = (context) => this.validationProcessor(context, { dirty, silentCheck });\n            editRow.errors = (0, process_1.processSync)({\n                components: (0, utils_1.fastCloneDeep)(this.component.components).map((component) => {\n                    component.parentPath = `${this.path}[${editRow.rowIndex}]`;\n                    return component;\n                }),\n                data: rootValue,\n                row: editRow.data,\n                process: 'validateRow',\n                instances: this.componentsMap,\n                scope: { errors: [] },\n                processors: [\n                    {\n                        process: validationProcessorProcess,\n                        processSync: validationProcessorProcess\n                    }\n                ]\n            }).errors;\n        }\n        // TODO: this is essentially running its own custom validation and should be moved into a validation rule\n        if (this.component.validate && this.component.validate.row) {\n            const valid = this.evaluate(this.component.validate.row, {\n                valid: (editRow.length === 0),\n                row: editRow.data\n            }, 'valid', true);\n            if (valid.toString() !== 'true') {\n                editRow.errors.push({\n                    type: 'error',\n                    rowError: true,\n                    message: valid.toString()\n                });\n            }\n            if (valid === null) {\n                editRow.errors.push({\n                    type: 'error',\n                    message: `Invalid row validation for ${this.key}`\n                });\n            }\n        }\n        if (!this.component.rowDrafts || ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted)) {\n            this.showRowErrorAlerts(editRow, editRow.errors);\n        }\n        return editRow.errors;\n    }\n    showRowErrorAlerts(editRow, errors) {\n        if (editRow.alerts) {\n            if (this.alert) {\n                if (errors.length) {\n                    this.alert.showErrors(errors, false);\n                    editRow.alerts = true;\n                }\n                else {\n                    this.alert.clear();\n                    this.alert = null;\n                }\n            }\n        }\n    }\n    /**\n     * @returns {boolean} - Return that this component processes its own validation.\n     */\n    get processOwnValidation() {\n        return true;\n    }\n    checkComponentValidity(data, dirty, row, options = {}, errors = []) {\n        var _a, _b;\n        const { silentCheck } = options;\n        const superValid = super.checkComponentValidity(data, dirty, row, options, errors);\n        // If super tells us that component invalid and there is no need to update alerts, just return false\n        if (!superValid && (!this.alert && !this.hasOpenRows())) {\n            return false;\n        }\n        let rowsEditing = false;\n        const allRowErrors = [];\n        this.editRows.forEach((editRow, index) => {\n            // Trigger all errors on the row.\n            const rowErrors = this.validateRow(editRow, dirty, silentCheck);\n            errors.push(...rowErrors);\n            allRowErrors.push(...rowErrors);\n            if (this.rowRefs) {\n                const rowContainer = this.rowRefs[index];\n                if (rowContainer) {\n                    const errorContainer = rowContainer.querySelector('.editgrid-row-error');\n                    if (rowErrors.length && errorContainer && (!this.component.rowDrafts || this.shouldValidateDraft(editRow))) {\n                        const rowError = rowErrors.find(error => error.rowError);\n                        this.addClass(errorContainer, 'help-block');\n                        errorContainer.textContent = this.t(rowError ? rowError.message : this.errorMessage('invalidRowError'));\n                    }\n                    else if (errorContainer) {\n                        errorContainer.textContent = '';\n                    }\n                }\n            }\n            // If this is a dirty check, and any rows are still editing, we need to throw validation error.\n            rowsEditing |= (dirty && this.isOpen(editRow));\n        });\n        if (allRowErrors.length) {\n            if (!silentCheck && (dirty || this.dirty) && (!this.component.rowDrafts || ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted))) {\n                this.setCustomValidity(this.t(this.errorMessage('invalidRowsError')), dirty);\n                this.removeClass(this.element, 'has-error');\n            }\n            return false;\n        }\n        else if (rowsEditing && this.saveEditMode && !this.component.openWhenEmpty) {\n            this._errors = this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);\n            errors.push(...this._errors);\n            return false;\n        }\n        const message = this.invalid || this.invalidMessage(data, dirty, false, row);\n        if (allRowErrors.length && ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submitted) && !message) {\n            this._errors = this.setCustomValidity(message, dirty);\n            errors.push(...this._errors);\n            this.root.showErrors([message]);\n        }\n        else {\n            this._errors = this.setCustomValidity(message, dirty);\n            errors.push(...this._errors);\n        }\n        return superValid;\n    }\n    setRowInvalid(ref, index) {\n        const editRow = this.editRows[index];\n        const errorContainer = ref.querySelector('.editgrid-row-error');\n        if (errorContainer && (!this.component.rowDrafts || this.shouldValidateDraft(editRow))) {\n            this.addClass(errorContainer, 'help-block');\n            errorContainer.textContent = this.t(this.errorMessage('invalidRowError'));\n        }\n        else if (errorContainer) {\n            errorContainer.textContent = '';\n        }\n    }\n    changeState(changed, flags) {\n        if (this.visible && (changed || (flags.resetValue && this.component.modalEdit))) {\n            this.rebuild();\n        }\n        else {\n            this.redraw();\n        }\n    }\n    setValue(value, flags = {}) {\n        if (!value) {\n            value = this.defaultValue;\n        }\n        if (!Array.isArray(value)) {\n            if (typeof value === 'object') {\n                value = [value];\n            }\n            else {\n                return false;\n            }\n        }\n        const changed = this.hasChanged(value, this.dataValue);\n        if (this.parent && !this.options.server) {\n            this.parent.checkComponentConditions();\n        }\n        this.dataValue = value;\n        // Refresh editRow data when data changes.\n        this.dataValue.forEach((row, rowIndex) => {\n            const editRow = this.editRows[rowIndex];\n            if (editRow) {\n                editRow.data = row;\n                this.restoreRowContext(editRow, flags);\n                editRow.state = EditRowState.Saved;\n                editRow.backup = null;\n                editRow.errors = [];\n            }\n            else {\n                this.editRows[rowIndex] = {\n                    components: this.lazyLoad ? [] : this.createRowComponents(row, rowIndex),\n                    data: row,\n                    state: EditRowState.Saved,\n                    backup: null,\n                    errors: [],\n                };\n            }\n        });\n        let { length: dataLength } = this.dataValue;\n        // If the last row is a new row, then do not remove it.\n        if (this.editRows[dataLength] && (this.editRows[dataLength].state === EditRowState.New)) {\n            dataLength = (dataLength + 1);\n        }\n        this.editRows.slice(dataLength).forEach((editRow, index) => this.baseRemoveRow(dataLength + index));\n        this.editRows = this.editRows.slice(0, dataLength);\n        this.openWhenEmpty();\n        this.updateOnChange(flags, changed);\n        // do not call checkData with server option, it is called when change is triggered in updateOnChange\n        if (!this.options.server) {\n            this.checkData();\n        }\n        this.changeState(changed, flags);\n        return changed;\n    }\n    openWhenEmpty() {\n        const shouldBeOpened = !this.dataValue.length && this.component.openWhenEmpty;\n        const hasNoRows = !this.editRows.length;\n        if (hasNoRows && shouldBeOpened && !this.builderMode) {\n            const dataObj = {};\n            this.createRow(dataObj, 0);\n        }\n    }\n    restoreRowContext(editRow, flags = {}) {\n        editRow.components.forEach((component) => {\n            component.data = editRow.data;\n            this.setNestedValue(component, editRow.data, flags);\n        });\n    }\n    emptyRows() {\n        this.editRows.forEach((editRow, index) => this.destroyComponents(false, index));\n        this.editRows = [];\n    }\n    resetValue() {\n        super.resetValue();\n        this.emptyRows();\n    }\n}\nexports[\"default\"] = EditGridComponent;\nEditGridComponent.prototype.hasChanged = Component_1.default.prototype.hasChanged;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/editgrid/EditGrid.js?");
 
 /***/ }),
 
@@ -5148,7 +5168,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Field_1 = __importDefault(__webpack_require__(/*! ../_classes/field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst downloadjs_1 = __importDefault(__webpack_require__(/*! downloadjs */ \"./node_modules/downloadjs/download.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst fileProcessor_1 = __importDefault(__webpack_require__(/*! ../../providers/processor/fileProcessor */ \"./lib/cjs/providers/processor/fileProcessor.js\"));\nconst browser_md5_file_1 = __importDefault(__webpack_require__(/*! browser-md5-file */ \"./node_modules/browser-md5-file/dist/index.umd.js\"));\nlet Camera;\nlet webViewCamera = 'undefined' !== typeof window ? navigator.camera : Camera;\n// canvas.toBlob polyfill.\nlet htmlCanvasElement;\nif (typeof window !== 'undefined') {\n    htmlCanvasElement = window.HTMLCanvasElement;\n}\nelse if (typeof __webpack_require__.g !== 'undefined') {\n    htmlCanvasElement = __webpack_require__.g.HTMLCanvasElement;\n}\nif (htmlCanvasElement && !htmlCanvasElement.prototype.toBlob) {\n    Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {\n        value: function (callback, type, quality) {\n            var canvas = this;\n            setTimeout(function () {\n                var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]), len = binStr.length, arr = new Uint8Array(len);\n                for (var i = 0; i < len; i++) {\n                    arr[i] = binStr.charCodeAt(i);\n                }\n                callback(new Blob([arr], { type: type || 'image/png' }));\n            });\n        }\n    });\n}\nconst createRandomString = () => Math.random().toString(36).substring(2, 15);\nclass FileComponent extends Field_1.default {\n    static schema(...extend) {\n        return Field_1.default.schema({\n            type: 'file',\n            label: 'Upload',\n            key: 'file',\n            image: false,\n            privateDownload: false,\n            imageSize: '200',\n            filePattern: '*',\n            fileMinSize: '0KB',\n            fileMaxSize: '1GB',\n            uploadOnly: false,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'File',\n            group: 'premium',\n            icon: 'file',\n            documentation: '/userguide/form-building/premium-components#file',\n            weight: 100,\n            schema: FileComponent.schema(),\n        };\n    }\n    static get serverConditionSettings() {\n        return FileComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEmpty', 'isNotEmpty'] });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];\n    }\n    init() {\n        super.init();\n        webViewCamera = navigator.camera || Camera;\n        const fileReaderSupported = (typeof FileReader !== 'undefined');\n        const formDataSupported = typeof window !== 'undefined' ? Boolean(window.FormData) : false;\n        const progressSupported = (typeof window !== 'undefined' && window.XMLHttpRequest) ? ('upload' in new XMLHttpRequest) : false;\n        this.support = {\n            filereader: fileReaderSupported,\n            formdata: formDataSupported,\n            hasWarning: !fileReaderSupported || !formDataSupported || !progressSupported,\n            progress: progressSupported,\n        };\n        this.cameraMode = false;\n        this.fileDropHidden = false;\n        this.filesToSync = {\n            filesToUpload: [],\n            filesToDelete: [],\n        };\n        this.isSyncing = false;\n        this.abortUploads = [];\n    }\n    get dataReady() {\n        return this.filesReady || Promise.resolve();\n    }\n    get defaultSchema() {\n        return FileComponent.schema();\n    }\n    loadImage(fileInfo) {\n        if (this.component.privateDownload) {\n            fileInfo.private = true;\n        }\n        return this.fileService.downloadFile(fileInfo).then((result) => result.url);\n    }\n    get emptyValue() {\n        return [];\n    }\n    getValueAsString(value) {\n        if (lodash_1.default.isArray(value)) {\n            return lodash_1.default.map(value, 'originalName').join(', ');\n        }\n        return lodash_1.default.get(value, 'originalName', '');\n    }\n    getValue() {\n        return this.dataValue;\n    }\n    get defaultValue() {\n        const value = super.defaultValue;\n        return Array.isArray(value) ? value : [];\n    }\n    get hasTypes() {\n        return this.component.fileTypes &&\n            Array.isArray(this.component.fileTypes) &&\n            this.component.fileTypes.length !== 0 &&\n            (this.component.fileTypes[0].label !== '' || this.component.fileTypes[0].value !== '');\n    }\n    get fileDropHidden() {\n        return this._fileBrowseHidden;\n    }\n    set fileDropHidden(value) {\n        if (typeof value !== 'boolean' || this.component.multiple) {\n            return;\n        }\n        this._fileBrowseHidden = value;\n    }\n    get shouldSyncFiles() {\n        return Boolean(this.filesToSync.filesToDelete.length || this.filesToSync.filesToUpload.length);\n    }\n    get autoSync() {\n        return lodash_1.default.get(this, 'component.autoSync', false);\n    }\n    get columnsSize() {\n        const actionsColumn = this.disabled ? 0 : this.autoSync ? 2 : 1;\n        const typeColumn = this.hasTypes ? 2 : 0;\n        const sizeColumn = 2;\n        const nameColumn = 12 - actionsColumn - typeColumn - sizeColumn;\n        return {\n            name: nameColumn,\n            size: sizeColumn,\n            type: typeColumn,\n            actions: actionsColumn,\n        };\n    }\n    render() {\n        const { filesToDelete, filesToUpload } = this.filesToSync;\n        return super.render(this.renderTemplate('file', {\n            fileSize: this.fileSize,\n            files: this.dataValue || [],\n            filesToDelete,\n            filesToUpload,\n            disabled: this.disabled,\n            support: this.support,\n            fileDropHidden: this.fileDropHidden,\n            showSyncButton: this.autoSync && (filesToDelete.length || filesToUpload.length),\n            isSyncing: this.isSyncing,\n            columns: this.columnsSize,\n        }));\n    }\n    getVideoStream(constraints) {\n        return navigator.mediaDevices.getUserMedia({\n            video: Object.assign({ width: { min: 640, ideal: 1920 }, height: { min: 360, ideal: 1080 }, aspectRatio: { ideal: 16 / 9 } }, constraints),\n            audio: false,\n        });\n    }\n    stopVideoStream(videoStream) {\n        videoStream.getVideoTracks().forEach((track) => track.stop());\n    }\n    getFrame(videoPlayer) {\n        return new Promise((resolve) => {\n            const canvas = document.createElement('canvas');\n            canvas.height = videoPlayer.videoHeight;\n            canvas.width = videoPlayer.videoWidth;\n            const context = canvas.getContext('2d');\n            context.drawImage(videoPlayer, 0, 0);\n            canvas.toBlob(resolve);\n        });\n    }\n    startVideo() {\n        this.getVideoStream()\n            .then((stream) => {\n            this.videoStream = stream;\n            const { videoPlayer } = this.refs;\n            if (!videoPlayer) {\n                console.warn('Video player not found in template.');\n                this.cameraMode = false;\n                this.redraw();\n                return;\n            }\n            videoPlayer.srcObject = stream;\n            const width = parseInt(this.component.webcamSize) || 320;\n            videoPlayer.setAttribute('width', width);\n            videoPlayer.play();\n        })\n            .catch((err) => {\n            console.error(err);\n            this.cameraMode = false;\n            this.redraw();\n        });\n    }\n    stopVideo() {\n        if (this.videoStream) {\n            this.stopVideoStream(this.videoStream);\n            this.videoStream = null;\n        }\n    }\n    takePicture() {\n        const { videoPlayer } = this.refs;\n        if (!videoPlayer) {\n            console.warn('Video player not found in template.');\n            this.cameraMode = false;\n            this.redraw();\n            return;\n        }\n        this.getFrame(videoPlayer)\n            .then((frame) => {\n            frame.name = `photo-${Date.now()}.png`;\n            this.handleFilesToUpload([frame]);\n            this.cameraMode = false;\n            this.redraw();\n        });\n    }\n    browseFiles(attrs = {}) {\n        return new Promise((resolve) => {\n            const fileInput = this.ce('input', Object.assign({ type: 'file', style: 'height: 0; width: 0; visibility: hidden;', tabindex: '-1' }, attrs));\n            document.body.appendChild(fileInput);\n            fileInput.addEventListener('change', () => {\n                resolve(fileInput.files);\n                document.body.removeChild(fileInput);\n            }, true);\n            // There is no direct way to trigger a file dialog. To work around this, create an input of type file and trigger\n            // a click event on it.\n            if (typeof fileInput.trigger === 'function') {\n                fileInput.trigger('click');\n            }\n            else {\n                fileInput.click();\n            }\n        });\n    }\n    set cameraMode(value) {\n        this._cameraMode = value;\n        if (value) {\n            this.startVideo();\n        }\n        else {\n            this.stopVideo();\n        }\n    }\n    get cameraMode() {\n        return this._cameraMode;\n    }\n    get useWebViewCamera() {\n        return this.imageUpload && webViewCamera;\n    }\n    get imageUpload() {\n        return Boolean(this.component.image);\n    }\n    get browseOptions() {\n        const options = {};\n        if (this.component.multiple) {\n            options.multiple = true;\n        }\n        if (this.component.capture) {\n            options.capture = this.component.capture;\n        }\n        //use \"accept\" attribute only for desktop devices because of its limited support by mobile browsers\n        const filePattern = this.component.filePattern.trim() || '';\n        if (!this.isMobile.any) {\n            const imagesPattern = 'image/*';\n            if (this.imageUpload && (!filePattern || filePattern === '*')) {\n                options.accept = imagesPattern;\n            }\n            else if (this.imageUpload && !filePattern.includes(imagesPattern)) {\n                options.accept = `${imagesPattern},${filePattern}`;\n            }\n            else {\n                options.accept = filePattern;\n            }\n        }\n        // if input capture is set, we need the \"accept\" attribute to determine which device to launch\n        else if (this.component.capture) {\n            if (filePattern.includes('video')) {\n                options.accept = 'video/*';\n            }\n            else if (filePattern.includes('audio')) {\n                options.accept = 'audio/*';\n            }\n            else {\n                options.accept = 'image/*';\n            }\n        }\n        return options;\n    }\n    get actions() {\n        return {\n            abort: this.abortRequest.bind(this),\n        };\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            fileDrop: 'single',\n            fileBrowse: 'single',\n            galleryButton: 'single',\n            cameraButton: 'single',\n            takePictureButton: 'single',\n            toggleCameraMode: 'single',\n            videoPlayer: 'single',\n            fileLink: 'multiple',\n            removeLink: 'multiple',\n            fileToSyncRemove: 'multiple',\n            fileImage: 'multiple',\n            fileType: 'multiple',\n            fileProcessingLoader: 'single',\n            syncNow: 'single',\n            restoreFile: 'multiple',\n            progress: 'multiple',\n        });\n        // Ensure we have an empty input refs. We need this for the setValue method to redraw the control when it is set.\n        this.refs.input = [];\n        const superAttach = super.attach(element);\n        if (this.refs.fileDrop) {\n            // if (!this.statuses.length) {\n            //   this.refs.fileDrop.removeAttribute('hidden');\n            // }\n            const _this = this;\n            this.addEventListener(this.refs.fileDrop, 'dragover', function (event) {\n                this.className = 'fileSelector fileDragOver';\n                event.preventDefault();\n            });\n            this.addEventListener(this.refs.fileDrop, 'dragleave', function (event) {\n                this.className = 'fileSelector';\n                event.preventDefault();\n            });\n            this.addEventListener(this.refs.fileDrop, 'drop', function (event) {\n                this.className = 'fileSelector';\n                event.preventDefault();\n                _this.handleFilesToUpload(event.dataTransfer.files);\n            });\n        }\n        this.addEventListener(element, 'click', (event) => {\n            this.handleAction(event);\n        });\n        if (this.refs.fileBrowse) {\n            this.addEventListener(this.refs.fileBrowse, 'click', (event) => {\n                event.preventDefault();\n                this.browseFiles(this.browseOptions)\n                    .then((files) => {\n                    this.handleFilesToUpload(files);\n                });\n            });\n        }\n        this.refs.fileLink.forEach((fileLink, index) => {\n            this.addEventListener(fileLink, 'click', (event) => {\n                event.preventDefault();\n                this.getFile(this.dataValue[index]);\n            });\n        });\n        this.refs.removeLink.forEach((removeLink, index) => {\n            this.addEventListener(removeLink, 'click', (event) => {\n                event.preventDefault();\n                const fileInfo = this.dataValue[index];\n                this.handleFileToRemove(fileInfo);\n            });\n        });\n        this.refs.fileToSyncRemove.forEach((fileToSyncRemove, index) => {\n            this.addEventListener(fileToSyncRemove, 'click', (event) => {\n                event.preventDefault();\n                this.filesToSync.filesToUpload.splice(index, 1);\n                this.redraw();\n            });\n        });\n        this.refs.restoreFile.forEach((fileToRestore, index) => {\n            this.addEventListener(fileToRestore, 'click', (event) => {\n                event.preventDefault();\n                const fileInfo = this.filesToSync.filesToDelete[index];\n                delete fileInfo.status;\n                delete fileInfo.message;\n                this.filesToSync.filesToDelete.splice(index, 1);\n                this.dataValue.push(fileInfo);\n                this.triggerChange();\n                this.redraw();\n            });\n        });\n        if (this.refs.galleryButton && webViewCamera) {\n            this.addEventListener(this.refs.galleryButton, 'click', (event) => {\n                event.preventDefault();\n                webViewCamera.getPicture((success) => {\n                    window.resolveLocalFileSystemURL(success, (fileEntry) => {\n                        fileEntry.file((file) => {\n                            const reader = new FileReader();\n                            reader.onloadend = (evt) => {\n                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });\n                                blob.name = file.name;\n                                this.handleFilesToUpload([blob]);\n                            };\n                            reader.readAsArrayBuffer(file);\n                        });\n                    });\n                }, (err) => {\n                    console.error(err);\n                }, {\n                    sourceType: webViewCamera.PictureSourceType.PHOTOLIBRARY,\n                });\n            });\n        }\n        if (this.refs.cameraButton && webViewCamera) {\n            this.addEventListener(this.refs.cameraButton, 'click', (event) => {\n                event.preventDefault();\n                webViewCamera.getPicture((success) => {\n                    window.resolveLocalFileSystemURL(success, (fileEntry) => {\n                        fileEntry.file((file) => {\n                            const reader = new FileReader();\n                            reader.onloadend = (evt) => {\n                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });\n                                blob.name = file.name;\n                                this.handleFilesToUpload([blob]);\n                            };\n                            reader.readAsArrayBuffer(file);\n                        });\n                    });\n                }, (err) => {\n                    console.error(err);\n                }, {\n                    sourceType: webViewCamera.PictureSourceType.CAMERA,\n                    encodingType: webViewCamera.EncodingType.PNG,\n                    mediaType: webViewCamera.MediaType.PICTURE,\n                    saveToPhotoAlbum: true,\n                    correctOrientation: false,\n                });\n            });\n        }\n        if (this.refs.takePictureButton) {\n            this.addEventListener(this.refs.takePictureButton, 'click', (event) => {\n                event.preventDefault();\n                this.takePicture();\n            });\n        }\n        if (this.refs.toggleCameraMode) {\n            this.addEventListener(this.refs.toggleCameraMode, 'click', (event) => {\n                event.preventDefault();\n                this.cameraMode = !this.cameraMode;\n                this.redraw();\n            });\n        }\n        this.refs.fileType.forEach((fileType, index) => {\n            if (!this.dataValue[index]) {\n                return;\n            }\n            this.dataValue[index].fileType = this.dataValue[index].fileType || this.component.fileTypes[0].label;\n            this.addEventListener(fileType, 'change', (event) => {\n                event.preventDefault();\n                const fileType = this.component.fileTypes.find((typeObj) => typeObj.value === event.target.value);\n                this.dataValue[index].fileType = fileType.label;\n            });\n        });\n        this.addEventListener(this.refs.syncNow, 'click', (event) => {\n            event.preventDefault();\n            this.syncFiles();\n        });\n        const fileService = this.fileService;\n        if (fileService) {\n            const loadingImages = [];\n            this.filesReady = new Promise((resolve, reject) => {\n                this.filesReadyResolve = resolve;\n                this.filesReadyReject = reject;\n            });\n            this.refs.fileImage.forEach((image, index) => {\n                loadingImages.push(this.loadImage(this.dataValue[index]).then((url) => (image.src = url)));\n            });\n            if (loadingImages.length) {\n                Promise.all(loadingImages).then(() => {\n                    this.filesReadyResolve();\n                }).catch(() => this.filesReadyReject());\n            }\n            else {\n                this.filesReadyResolve();\n            }\n        }\n        return superAttach;\n    }\n    /* eslint-disable max-len */\n    fileSize(a, b, c, d, e) {\n        return `${(b = Math, c = b.log, d = 1024, e = c(a) / c(d) | 0, a / b.pow(d, e)).toFixed(2)} ${e ? `${'kMGTPEZY'[--e]}B` : 'Bytes'}`;\n    }\n    /* eslint-enable max-len */\n    /* eslint-disable max-depth */\n    globStringToRegex(str) {\n        str = str.replace(/\\s/g, '');\n        let regexp = '', excludes = [];\n        if (str.length > 2 && str[0] === '/' && str[str.length - 1] === '/') {\n            regexp = str.substring(1, str.length - 1);\n        }\n        else {\n            const split = str.split(',');\n            if (split.length > 1) {\n                for (let i = 0; i < split.length; i++) {\n                    const r = this.globStringToRegex(split[i]);\n                    if (r.regexp) {\n                        regexp += `(${r.regexp})`;\n                        if (i < split.length - 1) {\n                            regexp += '|';\n                        }\n                    }\n                    else {\n                        excludes = excludes.concat(r.excludes);\n                    }\n                }\n            }\n            else {\n                if (str.startsWith('!')) {\n                    excludes.push(`^((?!${this.globStringToRegex(str.substring(1)).regexp}).)*$`);\n                }\n                else {\n                    if (str.startsWith('.')) {\n                        str = `*${str}`;\n                    }\n                    regexp = `^${str.replace(new RegExp('[.\\\\\\\\+*?\\\\[\\\\^\\\\]$(){}=!<>|:\\\\-]', 'g'), '\\\\$&')}$`;\n                    regexp = regexp.replace(/\\\\\\*/g, '.*').replace(/\\\\\\?/g, '.');\n                }\n            }\n        }\n        return { regexp, excludes };\n    }\n    /* eslint-enable max-depth */\n    translateScalars(str) {\n        if (typeof str === 'string') {\n            if (str.search(/kb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024);\n            }\n            if (str.search(/mb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024 * 1024);\n            }\n            if (str.search(/gb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024 * 1024 * 1024);\n            }\n            if (str.search(/b/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1));\n            }\n            if (str.search(/s/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1));\n            }\n            if (str.search(/m/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1) * 60);\n            }\n            if (str.search(/h/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1) * 3600);\n            }\n        }\n        return str;\n    }\n    validatePattern(file, val) {\n        if (!val) {\n            return true;\n        }\n        const pattern = this.globStringToRegex(val);\n        let valid = true;\n        if (pattern.regexp && pattern.regexp.length) {\n            const regexp = new RegExp(pattern.regexp, 'i');\n            valid = (!lodash_1.default.isNil(file.type) && regexp.test(file.type)) ||\n                (!lodash_1.default.isNil(file.name) && regexp.test(file.name));\n        }\n        valid = pattern.excludes.reduce((result, excludePattern) => {\n            const exclude = new RegExp(excludePattern, 'i');\n            return result && (lodash_1.default.isNil(file.type) || exclude.test(file.type)) &&\n                (lodash_1.default.isNil(file.name) || exclude.test(file.name));\n        }, valid);\n        return valid;\n    }\n    validateMinSize(file, val) {\n        return file.size + 0.1 >= this.translateScalars(val);\n    }\n    validateMaxSize(file, val) {\n        return file.size - 0.1 <= this.translateScalars(val);\n    }\n    abortRequest(id) {\n        const abortUpload = this.abortUploads.find(abortUpload => abortUpload.id === id);\n        if (abortUpload) {\n            abortUpload.abort();\n        }\n    }\n    handleAction(event) {\n        const target = event.target;\n        if (!target.id) {\n            return;\n        }\n        const [action, id] = target.id.split('-');\n        if (!action || !id || !this.actions[action]) {\n            return;\n        }\n        this.actions[action](id);\n    }\n    getFileName(file) {\n        return (0, utils_1.uniqueName)(file.name, this.component.fileNameTemplate, this.evalContext());\n    }\n    getInitFileToSync(file) {\n        const escapedFileName = file.name ? file.name.replaceAll('<', '&lt;').replaceAll('>', '&gt;') : file.name;\n        return {\n            id: createRandomString(),\n            // Get a unique name for this file to keep file collisions from occurring.\n            dir: this.interpolate(this.component.dir || ''),\n            name: this.getFileName(file),\n            originalName: escapedFileName,\n            fileKey: this.component.fileKey || 'file',\n            storage: this.component.storage,\n            options: this.component.options,\n            file,\n            size: file.size,\n            status: 'info',\n            message: this.t('Processing file. Please wait...'),\n            hash: '',\n        };\n    }\n    handleSubmissionRevisions(file) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (this.root.form.submissionRevisions !== 'true') {\n                return '';\n            }\n            const bmf = new browser_md5_file_1.default();\n            const hash = yield new Promise((resolve, reject) => {\n                this.emit('fileUploadingStart');\n                bmf.md5(file, (err, md5) => {\n                    if (err) {\n                        return reject(err);\n                    }\n                    return resolve(md5);\n                });\n            });\n            this.emit('fileUploadingEnd');\n            return hash;\n        });\n    }\n    validateFileName(file) {\n        // Check if file with the same name is being uploaded\n        const fileWithSameNameUploading = this.filesToSync.filesToUpload\n            .some(fileToSync => { var _a; return ((_a = fileToSync.file) === null || _a === void 0 ? void 0 : _a.name) === file.name; });\n        const fileWithSameNameUploaded = lodash_1.default.some(this.dataValue, fileStatus => fileStatus.originalName === file.name);\n        return fileWithSameNameUploaded || fileWithSameNameUploading\n            ? {\n                status: 'error',\n                message: this.t(`File with the same name is already ${fileWithSameNameUploading ? 'being ' : ''}uploaded`),\n            }\n            : {};\n    }\n    validateFileSettings(file) {\n        // Check file pattern\n        if (this.component.filePattern && !this.validatePattern(file, this.component.filePattern)) {\n            return {\n                status: 'error',\n                message: this.t('File is the wrong type; it must be {{ pattern }}', {\n                    pattern: this.component.filePattern,\n                }),\n            };\n        }\n        // Check file minimum size\n        if (this.component.fileMinSize && !this.validateMinSize(file, this.component.fileMinSize)) {\n            return {\n                status: 'error',\n                message: this.t('File is too small; it must be at least {{ size }}', {\n                    size: this.component.fileMinSize,\n                }),\n            };\n        }\n        // Check file maximum size\n        if (this.component.fileMaxSize && !this.validateMaxSize(file, this.component.fileMaxSize)) {\n            return {\n                status: 'error',\n                message: this.t('File is too big; it must be at most {{ size }}', {\n                    size: this.component.fileMaxSize,\n                }),\n            };\n        }\n        return {};\n    }\n    validateFileService() {\n        const { fileService } = this;\n        return !fileService\n            ? {\n                status: 'error',\n                message: this.t('File Service not provided.'),\n            }\n            : {};\n    }\n    validateFile(file) {\n        const fileServiceValidation = this.validateFileService();\n        if (fileServiceValidation.status === 'error') {\n            return fileServiceValidation;\n        }\n        const fileNameValidation = this.validateFileName(file);\n        if (fileNameValidation.status === 'error') {\n            return fileNameValidation;\n        }\n        return this.validateFileSettings(file);\n    }\n    getGroupPermissions() {\n        let groupKey = null;\n        let groupPermissions = null;\n        //Iterate through form components to find group resource if one exists\n        this.root.everyComponent((element) => {\n            var _a, _b;\n            if (((_a = element.component) === null || _a === void 0 ? void 0 : _a.submissionAccess) || ((_b = element.component) === null || _b === void 0 ? void 0 : _b.defaultPermission)) {\n                groupPermissions = !element.component.submissionAccess ? [\n                    {\n                        type: element.component.defaultPermission,\n                        roles: [],\n                    },\n                ] : element.component.submissionAccess;\n                groupPermissions.forEach((permission) => {\n                    groupKey = ['admin', 'write', 'create'].includes(permission.type) ? element.component.key : null;\n                });\n            }\n        });\n        return { groupKey, groupPermissions };\n    }\n    triggerFileProcessor(file) {\n        return __awaiter(this, void 0, void 0, function* () {\n            let processedFile = null;\n            if (this.root.options.fileProcessor) {\n                try {\n                    if (this.refs.fileProcessingLoader) {\n                        this.refs.fileProcessingLoader.style.display = 'block';\n                    }\n                    const fileProcessorHandler = (0, fileProcessor_1.default)(this.fileService, this.root.options.fileProcessor);\n                    processedFile = yield fileProcessorHandler(file, this.component.properties);\n                }\n                catch (err) {\n                    this.fileDropHidden = false;\n                    return {\n                        status: 'error',\n                        message: this.t('File processing has been failed.'),\n                    };\n                }\n                finally {\n                    if (this.refs.fileProcessingLoader) {\n                        this.refs.fileProcessingLoader.style.display = 'none';\n                    }\n                }\n            }\n            return {\n                file: processedFile,\n            };\n        });\n    }\n    prepareFileToUpload(file) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const fileToSync = this.getInitFileToSync(file);\n            fileToSync.hash = yield this.handleSubmissionRevisions(file);\n            const { status, message } = this.validateFile(file);\n            if (status === 'error') {\n                fileToSync.isValidationError = true;\n                fileToSync.status = status;\n                fileToSync.message = message;\n                return this.filesToSync.filesToUpload.push(fileToSync);\n            }\n            if (this.component.privateDownload) {\n                file.private = true;\n            }\n            const { groupKey, groupPermissions } = this.getGroupPermissions();\n            const processedFile = yield this.triggerFileProcessor(file);\n            if (processedFile.status === 'error') {\n                fileToSync.status === 'error';\n                fileToSync.message = processedFile.message;\n                return this.filesToSync.filesToUpload.push(fileToSync);\n            }\n            if (this.autoSync) {\n                fileToSync.message = this.t('Ready to be uploaded into storage');\n            }\n            this.filesToSync.filesToUpload.push(Object.assign(Object.assign({}, fileToSync), { message: fileToSync.message, file: processedFile.file || file, url: this.interpolate(this.component.url, { file: fileToSync }), groupPermissions, groupResourceId: groupKey ? this.currentForm.submission.data[groupKey]._id : null }));\n        });\n    }\n    prepareFilesToUpload(files) {\n        return __awaiter(this, void 0, void 0, function* () {\n            // Only allow one upload if not multiple.\n            if (!this.component.multiple) {\n                files = Array.prototype.slice.call(files, 0, 1);\n            }\n            if (this.component.storage && files && files.length) {\n                this.fileDropHidden = true;\n                return Promise.all([...files].map((file) => __awaiter(this, void 0, void 0, function* () {\n                    yield this.prepareFileToUpload(file);\n                    this.redraw();\n                })));\n            }\n            else {\n                return Promise.resolve();\n            }\n        });\n    }\n    handleFilesToUpload(files) {\n        return __awaiter(this, void 0, void 0, function* () {\n            yield this.prepareFilesToUpload(files);\n            if (!this.autoSync) {\n                yield this.syncFiles();\n            }\n        });\n    }\n    prepareFileToDelete(fileInfo) {\n        this.filesToSync.filesToDelete.push(Object.assign(Object.assign({}, fileInfo), { status: 'info', message: this.autoSync\n                ? this.t('Ready to be removed from storage')\n                : this.t('Preparing file to remove') }));\n        const index = this.dataValue.findIndex(file => file.name === fileInfo.name);\n        this.splice(index);\n        this.redraw();\n    }\n    handleFileToRemove(fileInfo) {\n        this.prepareFileToDelete(fileInfo);\n        if (!this.autoSync) {\n            this.syncFiles();\n        }\n    }\n    deleteFile(fileInfo) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const { options = {} } = this.component;\n            if (fileInfo && (['url', 'indexeddb', 's3', 'azure', 'googledrive'].includes(this.component.storage))) {\n                const { fileService } = this;\n                if (fileService && typeof fileService.deleteFile === 'function') {\n                    return yield fileService.deleteFile(fileInfo, options);\n                }\n                else {\n                    const formio = this.options.formio || (this.root && this.root.formio);\n                    if (formio) {\n                        return yield formio.makeRequest('', fileInfo.url, 'delete');\n                    }\n                }\n            }\n        });\n    }\n    delete() {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!this.filesToSync.filesToDelete.length) {\n                return Promise.resolve();\n            }\n            return yield Promise.all(this.filesToSync.filesToDelete.map((fileToSync) => __awaiter(this, void 0, void 0, function* () {\n                try {\n                    if (fileToSync.isValidationError) {\n                        return { fileToSync };\n                    }\n                    yield this.deleteFile(fileToSync);\n                    fileToSync.status = 'success';\n                    fileToSync.message = this.t('Succefully removed');\n                }\n                catch (response) {\n                    fileToSync.status = 'error';\n                    fileToSync.message = typeof response === 'string' ? response : response.toString();\n                }\n                finally {\n                    this.redraw();\n                }\n                return { fileToSync };\n            })));\n        });\n    }\n    updateProgress(fileInfo, progressEvent) {\n        fileInfo.progress = parseInt(100.0 * progressEvent.loaded / progressEvent.total);\n        if (fileInfo.status !== 'progress') {\n            fileInfo.status = 'progress';\n            delete fileInfo.message;\n            this.redraw();\n        }\n        else {\n            const progress = Array.prototype.find.call(this.refs.progress, progressElement => progressElement.id === fileInfo.id);\n            progress.innerHTML = `<span class=\"visually-hidden\">${fileInfo.progress}% ${this.t('Complete')}</span>`;\n            progress.style.width = `${fileInfo.progress}%`;\n            progress.ariaValueNow = fileInfo.progress.toString();\n        }\n    }\n    getMultipartOptions(fileToSync) {\n        let count = 0;\n        return this.component.useMultipartUpload && this.component.multipart ? Object.assign(Object.assign({}, this.component.multipart), { progressCallback: (total) => {\n                count++;\n                fileToSync.status = 'progress';\n                fileToSync.progress = parseInt(100 * count / total);\n                delete fileToSync.message;\n                this.redraw();\n            }, changeMessage: (message) => {\n                fileToSync.message = message;\n                this.redraw();\n            } }) : false;\n    }\n    uploadFile(fileToSync) {\n        return __awaiter(this, void 0, void 0, function* () {\n            return yield this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, \n            // Progress callback\n            this.updateProgress.bind(this, fileToSync), fileToSync.url, fileToSync.options, fileToSync.fileKey, fileToSync.groupPermissions, fileToSync.groupResourceId, () => { }, \n            // Abort upload callback\n            (abort) => this.abortUploads.push({\n                id: fileToSync.id,\n                abort,\n            }), this.getMultipartOptions(fileToSync));\n        });\n    }\n    upload() {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!this.filesToSync.filesToUpload.length) {\n                return Promise.resolve();\n            }\n            return yield Promise.all(this.filesToSync.filesToUpload.map((fileToSync) => __awaiter(this, void 0, void 0, function* () {\n                let fileInfo = null;\n                try {\n                    if (fileToSync.isValidationError) {\n                        return {\n                            fileToSync,\n                            fileInfo,\n                        };\n                    }\n                    fileInfo = yield this.uploadFile(fileToSync);\n                    fileToSync.status = 'success';\n                    fileToSync.message = this.t('Succefully uploaded');\n                    fileInfo.originalName = fileToSync.originalName;\n                    fileInfo.hash = fileToSync.hash;\n                }\n                catch (response) {\n                    fileToSync.status = 'error';\n                    delete fileToSync.progress;\n                    fileToSync.message = typeof response === 'string'\n                        ? response\n                        : response.type === 'abort'\n                            ? this.t('Request was aborted')\n                            : response.toString();\n                    this.emit('fileUploadError', {\n                        fileToSync,\n                        response,\n                    });\n                }\n                finally {\n                    delete fileToSync.progress;\n                    this.redraw();\n                }\n                return {\n                    fileToSync,\n                    fileInfo,\n                };\n            })));\n        });\n    }\n    syncFiles() {\n        return __awaiter(this, void 0, void 0, function* () {\n            this.isSyncing = true;\n            this.fileDropHidden = true;\n            this.redraw();\n            try {\n                const [filesToDelete = [], filesToUpload = []] = yield Promise.all([this.delete(), this.upload()]);\n                this.filesToSync.filesToDelete = filesToDelete\n                    .filter(file => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'error'; })\n                    .map(file => file.fileToSync);\n                this.filesToSync.filesToUpload = filesToUpload\n                    .filter(file => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'error'; })\n                    .map(file => file.fileToSync);\n                if (!this.hasValue()) {\n                    this.dataValue = [];\n                }\n                const data = filesToUpload\n                    .filter(file => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'success'; })\n                    .map(file => file.fileInfo);\n                this.dataValue.push(...data);\n                this.triggerChange();\n                return Promise.resolve();\n            }\n            catch (err) {\n                return Promise.reject();\n            }\n            finally {\n                this.isSyncing = false;\n                this.fileDropHidden = false;\n                this.abortUploads = [];\n                this.redraw();\n            }\n        });\n    }\n    getFile(fileInfo) {\n        const { options = {} } = this.component;\n        const { fileService } = this;\n        if (!fileService) {\n            return alert('File Service not provided');\n        }\n        if (this.component.privateDownload) {\n            fileInfo.private = true;\n        }\n        fileService.downloadFile(fileInfo, options).then((file) => {\n            if (file) {\n                if (['base64', 'indexeddb'].includes(file.storage)) {\n                    (0, downloadjs_1.default)(file.url, file.originalName || file.name, file.type);\n                }\n                else {\n                    window.open(file.url, '_blank');\n                }\n            }\n        })\n            .catch((response) => {\n            // Is alert the best way to do this?\n            // User is expecting an immediate notification due to attempting to download a file.\n            alert(response);\n        });\n    }\n    focus() {\n        if ('beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n        if (this.refs.fileBrowse) {\n            this.refs.fileBrowse.focus();\n        }\n    }\n    beforeSubmit() {\n        return __awaiter(this, void 0, void 0, function* () {\n            try {\n                if (!this.autoSync) {\n                    return Promise.resolve();\n                }\n                yield this.syncFiles();\n                return this.shouldSyncFiles\n                    ? Promise.reject('Synchronization is failed')\n                    : Promise.resolve();\n            }\n            catch (error) {\n                return Promise.reject(error.message);\n            }\n        });\n    }\n    destroy(all) {\n        this.stopVideo();\n        super.destroy(all);\n    }\n}\nexports[\"default\"] = FileComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/file/File.js?");
+eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Field_1 = __importDefault(__webpack_require__(/*! ../_classes/field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst downloadjs_1 = __importDefault(__webpack_require__(/*! downloadjs */ \"./node_modules/downloadjs/download.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst fileProcessor_1 = __importDefault(__webpack_require__(/*! ../../providers/processor/fileProcessor */ \"./lib/cjs/providers/processor/fileProcessor.js\"));\nconst browser_md5_file_1 = __importDefault(__webpack_require__(/*! browser-md5-file */ \"./node_modules/browser-md5-file/dist/index.umd.js\"));\nlet Camera;\nlet webViewCamera = 'undefined' !== typeof window ? navigator.camera : Camera;\n// canvas.toBlob polyfill.\nlet htmlCanvasElement;\nif (typeof window !== 'undefined') {\n    htmlCanvasElement = window.HTMLCanvasElement;\n}\nelse if (typeof __webpack_require__.g !== 'undefined') {\n    htmlCanvasElement = __webpack_require__.g.HTMLCanvasElement;\n}\nif (htmlCanvasElement && !htmlCanvasElement.prototype.toBlob) {\n    Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {\n        value: function (callback, type, quality) {\n            var canvas = this;\n            setTimeout(function () {\n                var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]), len = binStr.length, arr = new Uint8Array(len);\n                for (var i = 0; i < len; i++) {\n                    arr[i] = binStr.charCodeAt(i);\n                }\n                callback(new Blob([arr], { type: type || 'image/png' }));\n            });\n        }\n    });\n}\nconst createRandomString = () => Math.random().toString(36).substring(2, 15);\nclass FileComponent extends Field_1.default {\n    static schema(...extend) {\n        return Field_1.default.schema({\n            type: 'file',\n            label: 'Upload',\n            key: 'file',\n            image: false,\n            privateDownload: false,\n            imageSize: '200',\n            filePattern: '*',\n            fileMinSize: '0KB',\n            fileMaxSize: '1GB',\n            uploadOnly: false,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'File',\n            group: 'premium',\n            icon: 'file',\n            documentation: '/userguide/form-building/premium-components#file',\n            weight: 100,\n            schema: FileComponent.schema(),\n        };\n    }\n    static get serverConditionSettings() {\n        return FileComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEmpty', 'isNotEmpty'] });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];\n    }\n    init() {\n        super.init();\n        webViewCamera = navigator.camera || Camera;\n        const fileReaderSupported = (typeof FileReader !== 'undefined');\n        const formDataSupported = typeof window !== 'undefined' ? Boolean(window.FormData) : false;\n        const progressSupported = (typeof window !== 'undefined' && window.XMLHttpRequest) ? ('upload' in new XMLHttpRequest) : false;\n        this.support = {\n            filereader: fileReaderSupported,\n            formdata: formDataSupported,\n            hasWarning: !fileReaderSupported || !formDataSupported || !progressSupported,\n            progress: progressSupported,\n        };\n        this.cameraMode = false;\n        this.fileDropHidden = false;\n        this.filesToSync = {\n            filesToUpload: [],\n            filesToDelete: [],\n        };\n        this.isSyncing = false;\n        this.abortUploads = [];\n    }\n    get dataReady() {\n        return this.filesReady || Promise.resolve();\n    }\n    get defaultSchema() {\n        return FileComponent.schema();\n    }\n    loadImage(fileInfo) {\n        if (this.component.privateDownload) {\n            fileInfo.private = true;\n        }\n        return this.fileService.downloadFile(fileInfo).then((result) => result.url);\n    }\n    get emptyValue() {\n        return [];\n    }\n    getValueAsString(value, options) {\n        if ((options === null || options === void 0 ? void 0 : options.review) && !this.component.uploadOnly) {\n            return lodash_1.default.map(value, (val, index) => {\n                return `<a href=\"${val.url || '#'}\" target=\"_blank\" data-path='${this.path}' data-fileindex='${index}'>${val.originalName}</a>`;\n            }).join(', ');\n        }\n        if (lodash_1.default.isArray(value)) {\n            return lodash_1.default.map(value, 'originalName').join(', ');\n        }\n        return lodash_1.default.get(value, 'originalName', '');\n    }\n    getValue() {\n        return this.dataValue;\n    }\n    get defaultValue() {\n        const value = super.defaultValue;\n        return Array.isArray(value) ? value : [];\n    }\n    get hasTypes() {\n        return this.component.fileTypes &&\n            Array.isArray(this.component.fileTypes) &&\n            this.component.fileTypes.length !== 0 &&\n            (this.component.fileTypes[0].label !== '' || this.component.fileTypes[0].value !== '');\n    }\n    get fileDropHidden() {\n        return this._fileBrowseHidden;\n    }\n    set fileDropHidden(value) {\n        if (typeof value !== 'boolean' || this.component.multiple) {\n            return;\n        }\n        this._fileBrowseHidden = value;\n    }\n    get shouldSyncFiles() {\n        return Boolean(this.filesToSync.filesToDelete.length || this.filesToSync.filesToUpload.length);\n    }\n    get autoSync() {\n        return lodash_1.default.get(this, 'component.autoSync', false);\n    }\n    get columnsSize() {\n        const actionsColumn = this.disabled ? 0 : this.autoSync ? 2 : 1;\n        const typeColumn = this.hasTypes ? 2 : 0;\n        const sizeColumn = 2;\n        const nameColumn = 12 - actionsColumn - typeColumn - sizeColumn;\n        return {\n            name: nameColumn,\n            size: sizeColumn,\n            type: typeColumn,\n            actions: actionsColumn,\n        };\n    }\n    render() {\n        const { filesToDelete, filesToUpload } = this.filesToSync;\n        return super.render(this.renderTemplate('file', {\n            fileSize: this.fileSize,\n            files: this.dataValue || [],\n            filesToDelete,\n            filesToUpload,\n            disabled: this.disabled,\n            support: this.support,\n            fileDropHidden: this.fileDropHidden,\n            showSyncButton: this.autoSync && (filesToDelete.length || filesToUpload.length),\n            isSyncing: this.isSyncing,\n            columns: this.columnsSize,\n        }));\n    }\n    getVideoStream(constraints) {\n        return navigator.mediaDevices.getUserMedia({\n            video: Object.assign({ width: { min: 640, ideal: 1920 }, height: { min: 360, ideal: 1080 }, aspectRatio: { ideal: 16 / 9 } }, constraints),\n            audio: false,\n        });\n    }\n    stopVideoStream(videoStream) {\n        videoStream.getVideoTracks().forEach((track) => track.stop());\n    }\n    getFrame(videoPlayer) {\n        return new Promise((resolve) => {\n            const canvas = document.createElement('canvas');\n            canvas.height = videoPlayer.videoHeight;\n            canvas.width = videoPlayer.videoWidth;\n            const context = canvas.getContext('2d');\n            context.drawImage(videoPlayer, 0, 0);\n            canvas.toBlob(resolve);\n        });\n    }\n    startVideo() {\n        this.getVideoStream()\n            .then((stream) => {\n            this.videoStream = stream;\n            const { videoPlayer } = this.refs;\n            if (!videoPlayer) {\n                console.warn('Video player not found in template.');\n                this.cameraMode = false;\n                this.redraw();\n                return;\n            }\n            videoPlayer.srcObject = stream;\n            const width = parseInt(this.component.webcamSize) || 320;\n            videoPlayer.setAttribute('width', width);\n            videoPlayer.play();\n        })\n            .catch((err) => {\n            console.error(err);\n            this.cameraMode = false;\n            this.redraw();\n        });\n    }\n    stopVideo() {\n        if (this.videoStream) {\n            this.stopVideoStream(this.videoStream);\n            this.videoStream = null;\n        }\n    }\n    takePicture() {\n        const { videoPlayer } = this.refs;\n        if (!videoPlayer) {\n            console.warn('Video player not found in template.');\n            this.cameraMode = false;\n            this.redraw();\n            return;\n        }\n        this.getFrame(videoPlayer)\n            .then((frame) => {\n            frame.name = `photo-${Date.now()}.png`;\n            this.handleFilesToUpload([frame]);\n            this.cameraMode = false;\n            this.redraw();\n        });\n    }\n    browseFiles(attrs = {}) {\n        return new Promise((resolve) => {\n            const fileInput = this.ce('input', Object.assign({ type: 'file', style: 'height: 0; width: 0; visibility: hidden;', tabindex: '-1' }, attrs));\n            document.body.appendChild(fileInput);\n            fileInput.addEventListener('change', () => {\n                resolve(fileInput.files);\n                document.body.removeChild(fileInput);\n            }, true);\n            // There is no direct way to trigger a file dialog. To work around this, create an input of type file and trigger\n            // a click event on it.\n            if (typeof fileInput.trigger === 'function') {\n                fileInput.trigger('click');\n            }\n            else {\n                fileInput.click();\n            }\n        });\n    }\n    set cameraMode(value) {\n        this._cameraMode = value;\n        if (value) {\n            this.startVideo();\n        }\n        else {\n            this.stopVideo();\n        }\n    }\n    get cameraMode() {\n        return this._cameraMode;\n    }\n    get useWebViewCamera() {\n        return this.imageUpload && webViewCamera;\n    }\n    get imageUpload() {\n        return Boolean(this.component.image);\n    }\n    get browseOptions() {\n        const options = {};\n        if (this.component.multiple) {\n            options.multiple = true;\n        }\n        if (this.component.capture) {\n            options.capture = this.component.capture;\n        }\n        //use \"accept\" attribute only for desktop devices because of its limited support by mobile browsers\n        const filePattern = this.component.filePattern.trim() || '';\n        if (!this.isMobile.any) {\n            const imagesPattern = 'image/*';\n            if (this.imageUpload && (!filePattern || filePattern === '*')) {\n                options.accept = imagesPattern;\n            }\n            else if (this.imageUpload && !filePattern.includes(imagesPattern)) {\n                options.accept = `${imagesPattern},${filePattern}`;\n            }\n            else {\n                options.accept = filePattern;\n            }\n        }\n        // if input capture is set, we need the \"accept\" attribute to determine which device to launch\n        else if (this.component.capture) {\n            if (filePattern.includes('video')) {\n                options.accept = 'video/*';\n            }\n            else if (filePattern.includes('audio')) {\n                options.accept = 'audio/*';\n            }\n            else {\n                options.accept = 'image/*';\n            }\n        }\n        return options;\n    }\n    get actions() {\n        return {\n            abort: this.abortRequest.bind(this),\n        };\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            fileDrop: 'single',\n            fileBrowse: 'single',\n            galleryButton: 'single',\n            cameraButton: 'single',\n            takePictureButton: 'single',\n            toggleCameraMode: 'single',\n            videoPlayer: 'single',\n            fileLink: 'multiple',\n            removeLink: 'multiple',\n            fileToSyncRemove: 'multiple',\n            fileImage: 'multiple',\n            fileType: 'multiple',\n            fileProcessingLoader: 'single',\n            syncNow: 'single',\n            restoreFile: 'multiple',\n            progress: 'multiple',\n        });\n        // Ensure we have an empty input refs. We need this for the setValue method to redraw the control when it is set.\n        this.refs.input = [];\n        const superAttach = super.attach(element);\n        if (this.refs.fileDrop) {\n            // if (!this.statuses.length) {\n            //   this.refs.fileDrop.removeAttribute('hidden');\n            // }\n            const _this = this;\n            this.addEventListener(this.refs.fileDrop, 'dragover', function (event) {\n                this.className = 'fileSelector fileDragOver';\n                event.preventDefault();\n            });\n            this.addEventListener(this.refs.fileDrop, 'dragleave', function (event) {\n                this.className = 'fileSelector';\n                event.preventDefault();\n            });\n            this.addEventListener(this.refs.fileDrop, 'drop', function (event) {\n                this.className = 'fileSelector';\n                event.preventDefault();\n                _this.handleFilesToUpload(event.dataTransfer.files);\n            });\n        }\n        this.addEventListener(element, 'click', (event) => {\n            this.handleAction(event);\n        });\n        if (this.refs.fileBrowse) {\n            this.addEventListener(this.refs.fileBrowse, 'click', (event) => {\n                event.preventDefault();\n                this.browseFiles(this.browseOptions)\n                    .then((files) => {\n                    this.handleFilesToUpload(files);\n                });\n            });\n        }\n        this.refs.fileLink.forEach((fileLink, index) => {\n            this.addEventListener(fileLink, 'click', (event) => {\n                event.preventDefault();\n                this.getFile(this.dataValue[index]);\n            });\n        });\n        this.refs.removeLink.forEach((removeLink, index) => {\n            this.addEventListener(removeLink, 'click', (event) => {\n                event.preventDefault();\n                const fileInfo = this.dataValue[index];\n                this.handleFileToRemove(fileInfo);\n            });\n        });\n        this.refs.fileToSyncRemove.forEach((fileToSyncRemove, index) => {\n            this.addEventListener(fileToSyncRemove, 'click', (event) => {\n                event.preventDefault();\n                this.filesToSync.filesToUpload.splice(index, 1);\n                this.redraw();\n            });\n        });\n        this.refs.restoreFile.forEach((fileToRestore, index) => {\n            this.addEventListener(fileToRestore, 'click', (event) => {\n                event.preventDefault();\n                const fileInfo = this.filesToSync.filesToDelete[index];\n                delete fileInfo.status;\n                delete fileInfo.message;\n                this.filesToSync.filesToDelete.splice(index, 1);\n                this.dataValue.push(fileInfo);\n                this.triggerChange();\n                this.redraw();\n            });\n        });\n        if (this.refs.galleryButton && webViewCamera) {\n            this.addEventListener(this.refs.galleryButton, 'click', (event) => {\n                event.preventDefault();\n                webViewCamera.getPicture((success) => {\n                    window.resolveLocalFileSystemURL(success, (fileEntry) => {\n                        fileEntry.file((file) => {\n                            const reader = new FileReader();\n                            reader.onloadend = (evt) => {\n                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });\n                                blob.name = file.name;\n                                this.handleFilesToUpload([blob]);\n                            };\n                            reader.readAsArrayBuffer(file);\n                        });\n                    });\n                }, (err) => {\n                    console.error(err);\n                }, {\n                    sourceType: webViewCamera.PictureSourceType.PHOTOLIBRARY,\n                });\n            });\n        }\n        if (this.refs.cameraButton && webViewCamera) {\n            this.addEventListener(this.refs.cameraButton, 'click', (event) => {\n                event.preventDefault();\n                webViewCamera.getPicture((success) => {\n                    window.resolveLocalFileSystemURL(success, (fileEntry) => {\n                        fileEntry.file((file) => {\n                            const reader = new FileReader();\n                            reader.onloadend = (evt) => {\n                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });\n                                blob.name = file.name;\n                                this.handleFilesToUpload([blob]);\n                            };\n                            reader.readAsArrayBuffer(file);\n                        });\n                    });\n                }, (err) => {\n                    console.error(err);\n                }, {\n                    sourceType: webViewCamera.PictureSourceType.CAMERA,\n                    encodingType: webViewCamera.EncodingType.PNG,\n                    mediaType: webViewCamera.MediaType.PICTURE,\n                    saveToPhotoAlbum: true,\n                    correctOrientation: false,\n                });\n            });\n        }\n        if (this.refs.takePictureButton) {\n            this.addEventListener(this.refs.takePictureButton, 'click', (event) => {\n                event.preventDefault();\n                this.takePicture();\n            });\n        }\n        if (this.refs.toggleCameraMode) {\n            this.addEventListener(this.refs.toggleCameraMode, 'click', (event) => {\n                event.preventDefault();\n                this.cameraMode = !this.cameraMode;\n                this.redraw();\n            });\n        }\n        this.refs.fileType.forEach((fileType, index) => {\n            if (!this.dataValue[index]) {\n                return;\n            }\n            this.dataValue[index].fileType = this.dataValue[index].fileType || this.component.fileTypes[0].label;\n            this.addEventListener(fileType, 'change', (event) => {\n                event.preventDefault();\n                const fileType = this.component.fileTypes.find((typeObj) => typeObj.value === event.target.value);\n                this.dataValue[index].fileType = fileType.label;\n            });\n        });\n        this.addEventListener(this.refs.syncNow, 'click', (event) => {\n            event.preventDefault();\n            this.syncFiles();\n        });\n        const fileService = this.fileService;\n        if (fileService) {\n            const loadingImages = [];\n            this.filesReady = new Promise((resolve, reject) => {\n                this.filesReadyResolve = resolve;\n                this.filesReadyReject = reject;\n            });\n            this.refs.fileImage.forEach((image, index) => {\n                loadingImages.push(this.loadImage(this.dataValue[index]).then((url) => (image.src = url)));\n            });\n            if (loadingImages.length) {\n                Promise.all(loadingImages).then(() => {\n                    this.filesReadyResolve();\n                }).catch(() => this.filesReadyReject());\n            }\n            else {\n                this.filesReadyResolve();\n            }\n        }\n        return superAttach;\n    }\n    /* eslint-disable max-len */\n    fileSize(a, b, c, d, e) {\n        return `${(b = Math, c = b.log, d = 1024, e = c(a) / c(d) | 0, a / b.pow(d, e)).toFixed(2)} ${e ? `${'kMGTPEZY'[--e]}B` : 'Bytes'}`;\n    }\n    /* eslint-enable max-len */\n    /* eslint-disable max-depth */\n    globStringToRegex(str) {\n        str = str.replace(/\\s/g, '');\n        let regexp = '', excludes = [];\n        if (str.length > 2 && str[0] === '/' && str[str.length - 1] === '/') {\n            regexp = str.substring(1, str.length - 1);\n        }\n        else {\n            const split = str.split(',');\n            if (split.length > 1) {\n                for (let i = 0; i < split.length; i++) {\n                    const r = this.globStringToRegex(split[i]);\n                    if (r.regexp) {\n                        regexp += `(${r.regexp})`;\n                        if (i < split.length - 1) {\n                            regexp += '|';\n                        }\n                    }\n                    else {\n                        excludes = excludes.concat(r.excludes);\n                    }\n                }\n            }\n            else {\n                if (str.startsWith('!')) {\n                    excludes.push(`^((?!${this.globStringToRegex(str.substring(1)).regexp}).)*$`);\n                }\n                else {\n                    if (str.startsWith('.')) {\n                        str = `*${str}`;\n                    }\n                    regexp = `^${str.replace(new RegExp('[.\\\\\\\\+*?\\\\[\\\\^\\\\]$(){}=!<>|:\\\\-]', 'g'), '\\\\$&')}$`;\n                    regexp = regexp.replace(/\\\\\\*/g, '.*').replace(/\\\\\\?/g, '.');\n                }\n            }\n        }\n        return { regexp, excludes };\n    }\n    /* eslint-enable max-depth */\n    translateScalars(str) {\n        if (typeof str === 'string') {\n            if (str.search(/kb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024);\n            }\n            if (str.search(/mb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024 * 1024);\n            }\n            if (str.search(/gb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024 * 1024 * 1024);\n            }\n            if (str.search(/b/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1));\n            }\n            if (str.search(/s/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1));\n            }\n            if (str.search(/m/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1) * 60);\n            }\n            if (str.search(/h/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1) * 3600);\n            }\n        }\n        return str;\n    }\n    validatePattern(file, val) {\n        if (!val) {\n            return true;\n        }\n        const pattern = this.globStringToRegex(val);\n        let valid = true;\n        if (pattern.regexp && pattern.regexp.length) {\n            const regexp = new RegExp(pattern.regexp, 'i');\n            valid = (!lodash_1.default.isNil(file.type) && regexp.test(file.type)) ||\n                (!lodash_1.default.isNil(file.name) && regexp.test(file.name));\n        }\n        valid = pattern.excludes.reduce((result, excludePattern) => {\n            const exclude = new RegExp(excludePattern, 'i');\n            return result && (lodash_1.default.isNil(file.type) || exclude.test(file.type)) &&\n                (lodash_1.default.isNil(file.name) || exclude.test(file.name));\n        }, valid);\n        return valid;\n    }\n    validateMinSize(file, val) {\n        return file.size + 0.1 >= this.translateScalars(val);\n    }\n    validateMaxSize(file, val) {\n        return file.size - 0.1 <= this.translateScalars(val);\n    }\n    abortRequest(id) {\n        const abortUpload = this.abortUploads.find(abortUpload => abortUpload.id === id);\n        if (abortUpload) {\n            abortUpload.abort();\n        }\n    }\n    handleAction(event) {\n        const target = event.target;\n        if (!target.id) {\n            return;\n        }\n        const [action, id] = target.id.split('-');\n        if (!action || !id || !this.actions[action]) {\n            return;\n        }\n        this.actions[action](id);\n    }\n    getFileName(file) {\n        return (0, utils_1.uniqueName)(file.name, this.component.fileNameTemplate, this.evalContext());\n    }\n    getInitFileToSync(file) {\n        const escapedFileName = file.name ? file.name.replaceAll('<', '&lt;').replaceAll('>', '&gt;') : file.name;\n        return {\n            id: createRandomString(),\n            // Get a unique name for this file to keep file collisions from occurring.\n            dir: this.interpolate(this.component.dir || ''),\n            name: this.getFileName(file),\n            originalName: escapedFileName,\n            fileKey: this.component.fileKey || 'file',\n            storage: this.component.storage,\n            options: this.component.options,\n            file,\n            size: file.size,\n            status: 'info',\n            message: this.t('Processing file. Please wait...'),\n            hash: '',\n        };\n    }\n    handleSubmissionRevisions(file) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (this.root.form.submissionRevisions !== 'true') {\n                return '';\n            }\n            const bmf = new browser_md5_file_1.default();\n            const hash = yield new Promise((resolve, reject) => {\n                this.emit('fileUploadingStart');\n                bmf.md5(file, (err, md5) => {\n                    if (err) {\n                        return reject(err);\n                    }\n                    return resolve(md5);\n                });\n            });\n            this.emit('fileUploadingEnd');\n            return hash;\n        });\n    }\n    validateFileName(file) {\n        // Check if file with the same name is being uploaded\n        const fileWithSameNameUploading = this.filesToSync.filesToUpload\n            .some(fileToSync => { var _a; return ((_a = fileToSync.file) === null || _a === void 0 ? void 0 : _a.name) === file.name; });\n        const fileWithSameNameUploaded = lodash_1.default.some(this.dataValue, fileStatus => fileStatus.originalName === file.name);\n        return fileWithSameNameUploaded || fileWithSameNameUploading\n            ? {\n                status: 'error',\n                message: this.t(`File with the same name is already ${fileWithSameNameUploading ? 'being ' : ''}uploaded`),\n            }\n            : {};\n    }\n    validateFileSettings(file) {\n        // Check file pattern\n        if (this.component.filePattern && !this.validatePattern(file, this.component.filePattern)) {\n            return {\n                status: 'error',\n                message: this.t('File is the wrong type; it must be {{ pattern }}', {\n                    pattern: this.component.filePattern,\n                }),\n            };\n        }\n        // Check file minimum size\n        if (this.component.fileMinSize && !this.validateMinSize(file, this.component.fileMinSize)) {\n            return {\n                status: 'error',\n                message: this.t('File is too small; it must be at least {{ size }}', {\n                    size: this.component.fileMinSize,\n                }),\n            };\n        }\n        // Check file maximum size\n        if (this.component.fileMaxSize && !this.validateMaxSize(file, this.component.fileMaxSize)) {\n            return {\n                status: 'error',\n                message: this.t('File is too big; it must be at most {{ size }}', {\n                    size: this.component.fileMaxSize,\n                }),\n            };\n        }\n        return {};\n    }\n    validateFileService() {\n        const { fileService } = this;\n        return !fileService\n            ? {\n                status: 'error',\n                message: this.t('File Service not provided.'),\n            }\n            : {};\n    }\n    validateFile(file) {\n        const fileServiceValidation = this.validateFileService();\n        if (fileServiceValidation.status === 'error') {\n            return fileServiceValidation;\n        }\n        const fileNameValidation = this.validateFileName(file);\n        if (fileNameValidation.status === 'error') {\n            return fileNameValidation;\n        }\n        return this.validateFileSettings(file);\n    }\n    getGroupPermissions() {\n        let groupKey = null;\n        let groupPermissions = null;\n        //Iterate through form components to find group resource if one exists\n        this.root.everyComponent((element) => {\n            var _a, _b;\n            if (((_a = element.component) === null || _a === void 0 ? void 0 : _a.submissionAccess) || ((_b = element.component) === null || _b === void 0 ? void 0 : _b.defaultPermission)) {\n                groupPermissions = !element.component.submissionAccess ? [\n                    {\n                        type: element.component.defaultPermission,\n                        roles: [],\n                    },\n                ] : element.component.submissionAccess;\n                groupPermissions.forEach((permission) => {\n                    groupKey = ['admin', 'write', 'create'].includes(permission.type) ? element.component.key : null;\n                });\n            }\n        });\n        return { groupKey, groupPermissions };\n    }\n    triggerFileProcessor(file) {\n        return __awaiter(this, void 0, void 0, function* () {\n            let processedFile = null;\n            if (this.root.options.fileProcessor) {\n                try {\n                    if (this.refs.fileProcessingLoader) {\n                        this.refs.fileProcessingLoader.style.display = 'block';\n                    }\n                    const fileProcessorHandler = (0, fileProcessor_1.default)(this.fileService, this.root.options.fileProcessor);\n                    processedFile = yield fileProcessorHandler(file, this.component.properties);\n                }\n                catch (err) {\n                    this.fileDropHidden = false;\n                    return {\n                        status: 'error',\n                        message: this.t('File processing has been failed.'),\n                    };\n                }\n                finally {\n                    if (this.refs.fileProcessingLoader) {\n                        this.refs.fileProcessingLoader.style.display = 'none';\n                    }\n                }\n            }\n            return {\n                file: processedFile,\n            };\n        });\n    }\n    prepareFileToUpload(file) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const fileToSync = this.getInitFileToSync(file);\n            fileToSync.hash = yield this.handleSubmissionRevisions(file);\n            const { status, message } = this.validateFile(file);\n            if (status === 'error') {\n                fileToSync.isValidationError = true;\n                fileToSync.status = status;\n                fileToSync.message = message;\n                return this.filesToSync.filesToUpload.push(fileToSync);\n            }\n            if (this.component.privateDownload) {\n                file.private = true;\n            }\n            const { groupKey, groupPermissions } = this.getGroupPermissions();\n            const processedFile = yield this.triggerFileProcessor(file);\n            if (processedFile.status === 'error') {\n                fileToSync.status === 'error';\n                fileToSync.message = processedFile.message;\n                return this.filesToSync.filesToUpload.push(fileToSync);\n            }\n            if (this.autoSync) {\n                fileToSync.message = this.t('Ready to be uploaded into storage');\n            }\n            this.filesToSync.filesToUpload.push(Object.assign(Object.assign({}, fileToSync), { message: fileToSync.message, file: processedFile.file || file, url: this.interpolate(this.component.url, { file: fileToSync }), groupPermissions, groupResourceId: groupKey ? this.currentForm.submission.data[groupKey]._id : null }));\n        });\n    }\n    prepareFilesToUpload(files) {\n        return __awaiter(this, void 0, void 0, function* () {\n            // Only allow one upload if not multiple.\n            if (!this.component.multiple) {\n                files = Array.prototype.slice.call(files, 0, 1);\n            }\n            if (this.component.storage && files && files.length) {\n                this.fileDropHidden = true;\n                return Promise.all([...files].map((file) => __awaiter(this, void 0, void 0, function* () {\n                    yield this.prepareFileToUpload(file);\n                    this.redraw();\n                })));\n            }\n            else {\n                return Promise.resolve();\n            }\n        });\n    }\n    handleFilesToUpload(files) {\n        return __awaiter(this, void 0, void 0, function* () {\n            yield this.prepareFilesToUpload(files);\n            if (!this.autoSync) {\n                yield this.syncFiles();\n            }\n        });\n    }\n    prepareFileToDelete(fileInfo) {\n        this.filesToSync.filesToDelete.push(Object.assign(Object.assign({}, fileInfo), { status: 'info', message: this.autoSync\n                ? this.t('Ready to be removed from storage')\n                : this.t('Preparing file to remove') }));\n        const index = this.dataValue.findIndex(file => file.name === fileInfo.name);\n        this.splice(index);\n        this.redraw();\n    }\n    handleFileToRemove(fileInfo) {\n        this.prepareFileToDelete(fileInfo);\n        if (!this.autoSync) {\n            this.syncFiles();\n        }\n    }\n    deleteFile(fileInfo) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const { options = {} } = this.component;\n            if (fileInfo && (['url', 'indexeddb', 's3', 'azure', 'googledrive'].includes(this.component.storage))) {\n                const { fileService } = this;\n                if (fileService && typeof fileService.deleteFile === 'function') {\n                    return yield fileService.deleteFile(fileInfo, options);\n                }\n                else {\n                    const formio = this.options.formio || (this.root && this.root.formio);\n                    if (formio) {\n                        return yield formio.makeRequest('', fileInfo.url, 'delete');\n                    }\n                }\n            }\n        });\n    }\n    delete() {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!this.filesToSync.filesToDelete.length) {\n                return Promise.resolve();\n            }\n            return yield Promise.all(this.filesToSync.filesToDelete.map((fileToSync) => __awaiter(this, void 0, void 0, function* () {\n                try {\n                    if (fileToSync.isValidationError) {\n                        return { fileToSync };\n                    }\n                    yield this.deleteFile(fileToSync);\n                    fileToSync.status = 'success';\n                    fileToSync.message = this.t('Succefully removed');\n                }\n                catch (response) {\n                    fileToSync.status = 'error';\n                    fileToSync.message = typeof response === 'string' ? response : response.toString();\n                }\n                finally {\n                    this.redraw();\n                }\n                return { fileToSync };\n            })));\n        });\n    }\n    updateProgress(fileInfo, progressEvent) {\n        fileInfo.progress = parseInt(100.0 * progressEvent.loaded / progressEvent.total);\n        if (fileInfo.status !== 'progress') {\n            fileInfo.status = 'progress';\n            delete fileInfo.message;\n            this.redraw();\n        }\n        else {\n            const progress = Array.prototype.find.call(this.refs.progress, progressElement => progressElement.id === fileInfo.id);\n            progress.innerHTML = `<span class=\"visually-hidden\">${fileInfo.progress}% ${this.t('Complete')}</span>`;\n            progress.style.width = `${fileInfo.progress}%`;\n            progress.ariaValueNow = fileInfo.progress.toString();\n        }\n    }\n    getMultipartOptions(fileToSync) {\n        let count = 0;\n        return this.component.useMultipartUpload && this.component.multipart ? Object.assign(Object.assign({}, this.component.multipart), { progressCallback: (total) => {\n                count++;\n                fileToSync.status = 'progress';\n                fileToSync.progress = parseInt(100 * count / total);\n                delete fileToSync.message;\n                this.redraw();\n            }, changeMessage: (message) => {\n                fileToSync.message = message;\n                this.redraw();\n            } }) : false;\n    }\n    uploadFile(fileToSync) {\n        return __awaiter(this, void 0, void 0, function* () {\n            return yield this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, \n            // Progress callback\n            this.updateProgress.bind(this, fileToSync), fileToSync.url, fileToSync.options, fileToSync.fileKey, fileToSync.groupPermissions, fileToSync.groupResourceId, () => { }, \n            // Abort upload callback\n            (abort) => this.abortUploads.push({\n                id: fileToSync.id,\n                abort,\n            }), this.getMultipartOptions(fileToSync));\n        });\n    }\n    upload() {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!this.filesToSync.filesToUpload.length) {\n                return Promise.resolve();\n            }\n            return yield Promise.all(this.filesToSync.filesToUpload.map((fileToSync) => __awaiter(this, void 0, void 0, function* () {\n                let fileInfo = null;\n                try {\n                    if (fileToSync.isValidationError) {\n                        return {\n                            fileToSync,\n                            fileInfo,\n                        };\n                    }\n                    fileInfo = yield this.uploadFile(fileToSync);\n                    fileToSync.status = 'success';\n                    fileToSync.message = this.t('Succefully uploaded');\n                    fileInfo.originalName = fileToSync.originalName;\n                    fileInfo.hash = fileToSync.hash;\n                }\n                catch (response) {\n                    fileToSync.status = 'error';\n                    delete fileToSync.progress;\n                    fileToSync.message = typeof response === 'string'\n                        ? response\n                        : response.type === 'abort'\n                            ? this.t('Request was aborted')\n                            : response.toString();\n                    this.emit('fileUploadError', {\n                        fileToSync,\n                        response,\n                    });\n                }\n                finally {\n                    delete fileToSync.progress;\n                    this.redraw();\n                }\n                return {\n                    fileToSync,\n                    fileInfo,\n                };\n            })));\n        });\n    }\n    syncFiles() {\n        return __awaiter(this, void 0, void 0, function* () {\n            this.isSyncing = true;\n            this.fileDropHidden = true;\n            this.redraw();\n            try {\n                const [filesToDelete = [], filesToUpload = []] = yield Promise.all([this.delete(), this.upload()]);\n                this.filesToSync.filesToDelete = filesToDelete\n                    .filter(file => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'error'; })\n                    .map(file => file.fileToSync);\n                this.filesToSync.filesToUpload = filesToUpload\n                    .filter(file => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'error'; })\n                    .map(file => file.fileToSync);\n                if (!this.hasValue()) {\n                    this.dataValue = [];\n                }\n                const data = filesToUpload\n                    .filter(file => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'success'; })\n                    .map(file => file.fileInfo);\n                this.dataValue.push(...data);\n                this.triggerChange();\n                return Promise.resolve();\n            }\n            catch (err) {\n                return Promise.reject();\n            }\n            finally {\n                this.isSyncing = false;\n                this.fileDropHidden = false;\n                this.abortUploads = [];\n                this.redraw();\n            }\n        });\n    }\n    getFile(fileInfo) {\n        const { options = {} } = this.component;\n        const { fileService } = this;\n        if (!fileService) {\n            return alert('File Service not provided');\n        }\n        if (this.component.privateDownload) {\n            fileInfo.private = true;\n        }\n        fileService.downloadFile(fileInfo, options).then((file) => {\n            if (file) {\n                if (['base64', 'indexeddb'].includes(file.storage)) {\n                    (0, downloadjs_1.default)(file.url, file.originalName || file.name, file.type);\n                }\n                else {\n                    window.open(file.url, '_blank');\n                }\n            }\n        })\n            .catch((response) => {\n            // Is alert the best way to do this?\n            // User is expecting an immediate notification due to attempting to download a file.\n            alert(response);\n        });\n    }\n    focus() {\n        if ('beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n        if (this.refs.fileBrowse) {\n            this.refs.fileBrowse.focus();\n        }\n    }\n    beforeSubmit() {\n        return __awaiter(this, void 0, void 0, function* () {\n            try {\n                if (!this.autoSync) {\n                    return Promise.resolve();\n                }\n                yield this.syncFiles();\n                return this.shouldSyncFiles\n                    ? Promise.reject('Synchronization is failed')\n                    : Promise.resolve();\n            }\n            catch (error) {\n                return Promise.reject(error.message);\n            }\n        });\n    }\n    destroy(all) {\n        this.stopVideo();\n        super.destroy(all);\n    }\n}\nexports[\"default\"] = FileComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/file/File.js?");
 
 /***/ }),