@formio/js 5.2.0 → 5.2.1-rc.2

package/dist/formio.form.js

@@ -19,16 +19,6 @@
 return /******/ (function() { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
-/***/ "./node_modules/@formio/choices.js/public/assets/scripts/choices.js":
-/*!**************************************************************************!*\
-  !*** ./node_modules/@formio/choices.js/public/assets/scripts/choices.js ***!
-  \**************************************************************************/
-/***/ (function(module) {
-
-eval("/*! @formio/choices.js v10.2.1 | © 2024 Josh Johnson | https://github.com/jshjohnson/Choices#readme */\n(function webpackUniversalModuleDefinition(root, factory) {\n\tif(true)\n\t\tmodule.exports = factory();\n\telse {}\n})(window, () => {\nreturn /******/ (() => { // webpackBootstrap\n/******/ \t\"use strict\";\n/******/ \tvar __webpack_modules__ = ({\n\n/***/ 282:\n/***/ ((__unused_webpack_module, exports, __nested_webpack_require_622__) => {\n\n\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.clearChoices = exports.activateChoices = exports.filterChoices = exports.addChoice = void 0;\nvar constants_1 = __nested_webpack_require_622__(883);\nvar addChoice = function (_a) {\n  var value = _a.value,\n    label = _a.label,\n    id = _a.id,\n    groupId = _a.groupId,\n    disabled = _a.disabled,\n    elementId = _a.elementId,\n    customProperties = _a.customProperties,\n    placeholder = _a.placeholder,\n    keyCode = _a.keyCode;\n  return {\n    type: constants_1.ACTION_TYPES.ADD_CHOICE,\n    value: value,\n    label: label,\n    id: id,\n    groupId: groupId,\n    disabled: disabled,\n    elementId: elementId,\n    customProperties: customProperties,\n    placeholder: placeholder,\n    keyCode: keyCode\n  };\n};\nexports.addChoice = addChoice;\nvar filterChoices = function (results) {\n  return {\n    type: constants_1.ACTION_TYPES.FILTER_CHOICES,\n    results: results\n  };\n};\nexports.filterChoices = filterChoices;\nvar activateChoices = function (active) {\n  if (active === void 0) {\n    active = true;\n  }\n  return {\n    type: constants_1.ACTION_TYPES.ACTIVATE_CHOICES,\n    active: active\n  };\n};\nexports.activateChoices = activateChoices;\nvar clearChoices = function () {\n  return {\n    type: constants_1.ACTION_TYPES.CLEAR_CHOICES\n  };\n};\nexports.clearChoices = clearChoices;\n\n/***/ }),\n\n/***/ 783:\n/***/ ((__unused_webpack_module, exports, __nested_webpack_require_2053__) => {\n\n\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.addGroup = void 0;\nvar constants_1 = __nested_webpack_require_2053__(883);\nvar addGroup = function (_a) {\n  var value = _a.value,\n    id = _a.id,\n    active = _a.active,\n    disabled = _a.disabled;\n  return {\n    type: constants_1.ACTION_TYPES.ADD_GROUP,\n    value: value,\n    id: id,\n    active: active,\n    disabled: disabled\n  };\n};\nexports.addGroup = addGroup;\n\n/***/ }),\n\n/***/ 464:\n/***/ ((__unused_webpack_module, exports, __nested_webpack_require_2575__) => {\n\n\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.highlightItem = exports.removeItem = exports.addItem = void 0;\nvar constants_1 = __nested_webpack_require_2575__(883);\nvar addItem = function (_a) {\n  var value = _a.value,\n    label = _a.label,\n    id = _a.id,\n    choiceId = _a.choiceId,\n    groupId = _a.groupId,\n    customProperties = _a.customProperties,\n    placeholder = _a.placeholder,\n    keyCode = _a.keyCode;\n  return {\n    type: constants_1.ACTION_TYPES.ADD_ITEM,\n    value: value,\n    label: label,\n    id: id,\n    choiceId: choiceId,\n    groupId: groupId,\n    customProperties: customProperties,\n    placeholder: placeholder,\n    keyCode: keyCode\n  };\n};\nexports.addItem = addItem;\nvar removeItem = function (id, choiceId) {\n  return {\n    type: constants_1.ACTION_TYPES.REMOVE_ITEM,\n    id: id,\n    choiceId: choiceId\n  };\n};\nexports.removeItem = removeItem;\nvar highlightItem = function (id, highlighted) {\n  return {\n    type: constants_1.ACTION_TYPES.HIGHLIGHT_ITEM,\n    id: id,\n    highlighted: highlighted\n  };\n};\nexports.highlightItem = highlightItem;\n\n/***/ }),\n\n/***/ 137:\n/***/ ((__unused_webpack_module, exports, __nested_webpack_require_3754__) => {\n\n\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.setIsLoading = exports.resetTo = exports.clearAll = void 0;\nvar constants_1 = __nested_webpack_require_3754__(883);\nvar clearAll = function () {\n  return {\n    type: constants_1.ACTION_TYPES.CLEAR_ALL\n  };\n};\nexports.clearAll = clearAll;\nvar resetTo = function (state) {\n  return {\n    type: constants_1.ACTION_TYPES.RESET_TO,\n    state: state\n  };\n};\nexports.resetTo = resetTo;\nvar setIsLoading = function (isLoading) {\n  return {\n    type: constants_1.ACTION_TYPES.SET_IS_LOADING,\n    isLoading: isLoading\n  };\n};\nexports.setIsLoading = setIsLoading;\n\n/***/ }),\n\n/***/ 373:\n/***/ (function(__unused_webpack_module, exports, __nested_webpack_require_4472__) {\n\n\n\nvar __spreadArray = this && this.__spreadArray || function (to, from, pack) {\n  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n    if (ar || !(i in from)) {\n      if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n      ar[i] = from[i];\n    }\n  }\n  return to.concat(ar || Array.prototype.slice.call(from));\n};\nvar __importDefault = this && this.__importDefault || function (mod) {\n  return mod && mod.__esModule ? mod : {\n    \"default\": mod\n  };\n};\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nvar deepmerge_1 = __importDefault(__nested_webpack_require_4472__(996));\n/* eslint-disable @typescript-eslint/no-explicit-any */\nvar fuse_js_1 = __importDefault(__nested_webpack_require_4472__(221));\nvar choices_1 = __nested_webpack_require_4472__(282);\nvar groups_1 = __nested_webpack_require_4472__(783);\nvar items_1 = __nested_webpack_require_4472__(464);\nvar misc_1 = __nested_webpack_require_4472__(137);\nvar components_1 = __nested_webpack_require_4472__(520);\nvar constants_1 = __nested_webpack_require_4472__(883);\nvar defaults_1 = __nested_webpack_require_4472__(789);\nvar utils_1 = __nested_webpack_require_4472__(799);\nvar reducers_1 = __nested_webpack_require_4472__(655);\nvar store_1 = __importDefault(__nested_webpack_require_4472__(744));\nvar templates_1 = __importDefault(__nested_webpack_require_4472__(686));\n/** @see {@link http://browserhacks.com/#hack-acea075d0ac6954f275a70023906050c} */\nvar IS_IE11 = '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style;\nvar USER_DEFAULTS = {};\n/**\n * Choices\n * @author Josh Johnson<josh@joshuajohnson.co.uk>\n */\nvar Choices = /** @class */function () {\n  function Choices(element, userConfig) {\n    if (element === void 0) {\n      element = '[data-choice]';\n    }\n    if (userConfig === void 0) {\n      userConfig = {};\n    }\n    var _this = this;\n    if (userConfig.allowHTML === undefined) {\n      console.warn('Deprecation warning: allowHTML will default to false in a future release. To render HTML in Choices, you will need to set it to true. Setting allowHTML will suppress this message.');\n    }\n    this.config = deepmerge_1.default.all([defaults_1.DEFAULT_CONFIG, Choices.defaults.options, userConfig],\n    // When merging array configs, replace with a copy of the userConfig array,\n    // instead of concatenating with the default array\n    {\n      arrayMerge: function (_, sourceArray) {\n        return __spreadArray([], sourceArray, true);\n      }\n    });\n    // Restore the shadowRoot if provided. deeperge converts it into an empty object.\n    if (userConfig.shadowRoot) {\n      this.config.shadowRoot = userConfig.shadowRoot;\n    }\n    var invalidConfigOptions = (0, utils_1.diff)(this.config, defaults_1.DEFAULT_CONFIG);\n    if (invalidConfigOptions.length) {\n      console.warn('Unknown config option(s) passed', invalidConfigOptions.join(', '));\n    }\n    var passedElement = typeof element === 'string' ? document.querySelector(element) : element;\n    if (!(passedElement instanceof HTMLInputElement || passedElement instanceof HTMLSelectElement)) {\n      throw TypeError('Expected one of the following types text|select-one|select-multiple');\n    }\n    this._isTextElement = passedElement.type === constants_1.TEXT_TYPE;\n    this._isSelectOneElement = passedElement.type === constants_1.SELECT_ONE_TYPE;\n    this._isSelectMultipleElement = passedElement.type === constants_1.SELECT_MULTIPLE_TYPE;\n    this._isSelectElement = this._isSelectOneElement || this._isSelectMultipleElement;\n    this.config.searchEnabled = this._isSelectMultipleElement || this.config.searchEnabled;\n    if (!['auto', 'always'].includes(\"\".concat(this.config.renderSelectedChoices))) {\n      this.config.renderSelectedChoices = 'auto';\n    }\n    if (userConfig.addItemFilter && typeof userConfig.addItemFilter !== 'function') {\n      var re = userConfig.addItemFilter instanceof RegExp ? userConfig.addItemFilter : new RegExp(userConfig.addItemFilter);\n      this.config.addItemFilter = re.test.bind(re);\n    }\n    if (this._isTextElement) {\n      this.passedElement = new components_1.WrappedInput({\n        element: passedElement,\n        classNames: this.config.classNames,\n        delimiter: this.config.delimiter\n      });\n    } else {\n      this.passedElement = new components_1.WrappedSelect({\n        element: passedElement,\n        classNames: this.config.classNames,\n        template: function (data) {\n          return _this._templates.option(data);\n        }\n      });\n    }\n    this.initialised = false;\n    this._store = new store_1.default();\n    this._initialState = reducers_1.defaultState;\n    this._currentState = reducers_1.defaultState;\n    this._prevState = reducers_1.defaultState;\n    this._currentValue = '';\n    this._canSearch = !!this.config.searchEnabled;\n    this._isScrollingOnIe = false;\n    this._highlightPosition = 0;\n    this._wasTap = true;\n    this._placeholderValue = this._generatePlaceholderValue();\n    this._baseId = (0, utils_1.generateId)(this.passedElement.element, 'choices-');\n    /**\n     * setting direction in cases where it's explicitly set on passedElement\n     * or when calculated direction is different from the document\n     */\n    this._direction = this.passedElement.dir;\n    if (!this._direction) {\n      var elementDirection = window.getComputedStyle(this.passedElement.element).direction;\n      var documentDirection = window.getComputedStyle(document.documentElement).direction;\n      if (elementDirection !== documentDirection) {\n        this._direction = elementDirection;\n      }\n    }\n    this._idNames = {\n      itemChoice: 'item-choice'\n    };\n    if (this._isSelectElement) {\n      // Assign preset groups from passed element\n      this._presetGroups = this.passedElement.optionGroups;\n      // Assign preset options from passed element\n      this._presetOptions = this.passedElement.options;\n    }\n    // Assign preset choices from passed object\n    this._presetChoices = this.config.choices;\n    // Assign preset items from passed object first\n    this._presetItems = this.config.items;\n    // Add any values passed from attribute\n    if (this.passedElement.value && this._isTextElement) {\n      var splitValues = this.passedElement.value.split(this.config.delimiter);\n      this._presetItems = this._presetItems.concat(splitValues);\n    }\n    // Create array of choices from option elements\n    if (this.passedElement.options) {\n      this.passedElement.options.forEach(function (option) {\n        _this._presetChoices.push({\n          value: option.value,\n          label: option.innerHTML,\n          selected: !!option.selected,\n          disabled: option.disabled || option.parentNode.disabled,\n          placeholder: option.value === '' || option.hasAttribute('placeholder'),\n          customProperties: (0, utils_1.parseCustomProperties)(option.dataset.customProperties)\n        });\n      });\n    }\n    this._render = this._render.bind(this);\n    this._onFocus = this._onFocus.bind(this);\n    this._onBlur = this._onBlur.bind(this);\n    this._onKeyUp = this._onKeyUp.bind(this);\n    this._onKeyDown = this._onKeyDown.bind(this);\n    this._onClick = this._onClick.bind(this);\n    this._onTouchMove = this._onTouchMove.bind(this);\n    this._onTouchEnd = this._onTouchEnd.bind(this);\n    this._onMouseDown = this._onMouseDown.bind(this);\n    this._onMouseOver = this._onMouseOver.bind(this);\n    this._onFormReset = this._onFormReset.bind(this);\n    this._onSelectKey = this._onSelectKey.bind(this);\n    this._onEnterKey = this._onEnterKey.bind(this);\n    this._onEscapeKey = this._onEscapeKey.bind(this);\n    this._onDirectionKey = this._onDirectionKey.bind(this);\n    this._onDeleteKey = this._onDeleteKey.bind(this);\n    // If element has already been initialised with Choices, fail silently\n    if (this.passedElement.isActive) {\n      if (!this.config.silent) {\n        console.warn('Trying to initialise Choices on element already initialised', {\n          element: element\n        });\n      }\n      this.initialised = true;\n      return;\n    }\n    // Let's go\n    this.init();\n  }\n  Object.defineProperty(Choices, \"defaults\", {\n    get: function () {\n      return Object.preventExtensions({\n        get options() {\n          return USER_DEFAULTS;\n        },\n        get templates() {\n          return templates_1.default;\n        }\n      });\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Choices.prototype.init = function () {\n    if (this.initialised) {\n      return;\n    }\n    this._createTemplates();\n    this._createElements();\n    this._createStructure();\n    this._store.subscribe(this._render);\n    this._render();\n    this._addEventListeners();\n    var shouldDisable = !this.config.addItems || this.passedElement.element.hasAttribute('disabled');\n    if (shouldDisable) {\n      this.disable();\n    }\n    this.initialised = true;\n    var callbackOnInit = this.config.callbackOnInit;\n    // Run callback if it is a function\n    if (callbackOnInit && typeof callbackOnInit === 'function') {\n      callbackOnInit.call(this);\n    }\n  };\n  Choices.prototype.destroy = function () {\n    if (!this.initialised) {\n      return;\n    }\n    this._removeEventListeners();\n    this.passedElement.reveal();\n    this.containerOuter.unwrap(this.passedElement.element);\n    this.clearStore();\n    if (this._isSelectElement) {\n      this.passedElement.options = this._presetOptions;\n    }\n    this._templates = templates_1.default;\n    this.initialised = false;\n  };\n  Choices.prototype.enable = function () {\n    if (this.passedElement.isDisabled) {\n      this.passedElement.enable();\n    }\n    if (this.containerOuter.isDisabled) {\n      this._addEventListeners();\n      this.input.enable();\n      this.containerOuter.enable();\n    }\n    return this;\n  };\n  Choices.prototype.disable = function () {\n    if (!this.passedElement.isDisabled) {\n      this.passedElement.disable();\n    }\n    if (!this.containerOuter.isDisabled) {\n      this._removeEventListeners();\n      this.input.disable();\n      this.containerOuter.disable();\n    }\n    return this;\n  };\n  Choices.prototype.highlightItem = function (item, runEvent) {\n    if (runEvent === void 0) {\n      runEvent = true;\n    }\n    if (!item || !item.id) {\n      return this;\n    }\n    var id = item.id,\n      _a = item.groupId,\n      groupId = _a === void 0 ? -1 : _a,\n      _b = item.value,\n      value = _b === void 0 ? '' : _b,\n      _c = item.label,\n      label = _c === void 0 ? '' : _c;\n    var group = groupId >= 0 ? this._store.getGroupById(groupId) : null;\n    this._store.dispatch((0, items_1.highlightItem)(id, true));\n    if (runEvent) {\n      this.passedElement.triggerEvent(constants_1.EVENTS.highlightItem, {\n        id: id,\n        value: value,\n        label: label,\n        groupValue: group && group.value ? group.value : null\n      });\n    }\n    return this;\n  };\n  Choices.prototype.unhighlightItem = function (item) {\n    if (!item || !item.id) {\n      return this;\n    }\n    var id = item.id,\n      _a = item.groupId,\n      groupId = _a === void 0 ? -1 : _a,\n      _b = item.value,\n      value = _b === void 0 ? '' : _b,\n      _c = item.label,\n      label = _c === void 0 ? '' : _c;\n    var group = groupId >= 0 ? this._store.getGroupById(groupId) : null;\n    this._store.dispatch((0, items_1.highlightItem)(id, false));\n    this.passedElement.triggerEvent(constants_1.EVENTS.highlightItem, {\n      id: id,\n      value: value,\n      label: label,\n      groupValue: group && group.value ? group.value : null\n    });\n    return this;\n  };\n  Choices.prototype.highlightAll = function () {\n    var _this = this;\n    this._store.items.forEach(function (item) {\n      return _this.highlightItem(item);\n    });\n    return this;\n  };\n  Choices.prototype.unhighlightAll = function () {\n    var _this = this;\n    this._store.items.forEach(function (item) {\n      return _this.unhighlightItem(item);\n    });\n    return this;\n  };\n  Choices.prototype.removeActiveItemsByValue = function (value) {\n    var _this = this;\n    this._store.activeItems.filter(function (item) {\n      return item.value === value;\n    }).forEach(function (item) {\n      return _this._removeItem(item);\n    });\n    return this;\n  };\n  Choices.prototype.removeActiveItems = function (excludedId) {\n    var _this = this;\n    this._store.activeItems.filter(function (_a) {\n      var id = _a.id;\n      return id !== excludedId;\n    }).forEach(function (item) {\n      return _this._removeItem(item);\n    });\n    return this;\n  };\n  Choices.prototype.removeHighlightedItems = function (runEvent) {\n    var _this = this;\n    if (runEvent === void 0) {\n      runEvent = false;\n    }\n    this._store.highlightedActiveItems.forEach(function (item) {\n      _this._removeItem(item);\n      // If this action was performed by the user\n      // trigger the event\n      if (runEvent) {\n        _this._triggerChange(item.value);\n      }\n    });\n    return this;\n  };\n  Choices.prototype.showDropdown = function (preventInputFocus) {\n    var _this = this;\n    if (this.dropdown.isActive) {\n      return this;\n    }\n    requestAnimationFrame(function () {\n      _this.dropdown.show();\n      _this.containerOuter.open(_this.dropdown.distanceFromTopWindow, _this.dropdown.height);\n      if (!preventInputFocus && _this._canSearch) {\n        _this.input.focus();\n      }\n      _this.passedElement.triggerEvent(constants_1.EVENTS.showDropdown, {});\n    });\n    return this;\n  };\n  Choices.prototype.hideDropdown = function (preventInputBlur) {\n    var _this = this;\n    if (!this.dropdown.isActive) {\n      return this;\n    }\n    requestAnimationFrame(function () {\n      _this.dropdown.hide();\n      _this.containerOuter.close();\n      if (!preventInputBlur && _this._canSearch) {\n        _this.input.removeActiveDescendant();\n        _this.input.blur();\n      }\n      _this.passedElement.triggerEvent(constants_1.EVENTS.hideDropdown, {});\n    });\n    return this;\n  };\n  Choices.prototype.getValue = function (valueOnly) {\n    if (valueOnly === void 0) {\n      valueOnly = false;\n    }\n    var values = this._store.activeItems.reduce(function (selectedItems, item) {\n      var itemValue = valueOnly ? item.value : item;\n      selectedItems.push(itemValue);\n      return selectedItems;\n    }, []);\n    return this._isSelectOneElement ? values[0] : values;\n  };\n  Choices.prototype.setValue = function (items) {\n    var _this = this;\n    if (!this.initialised) {\n      return this;\n    }\n    items.forEach(function (value) {\n      return _this._setChoiceOrItem(value);\n    });\n    return this;\n  };\n  Choices.prototype.setChoiceByValue = function (value) {\n    var _this = this;\n    if (!this.initialised || this._isTextElement) {\n      return this;\n    }\n    // If only one value has been passed, convert to array\n    var choiceValue = Array.isArray(value) ? value : [value];\n    // Loop through each value and\n    choiceValue.forEach(function (val) {\n      return _this._findAndSelectChoiceByValue(val);\n    });\n    return this;\n  };\n  /**\n   * Set choices of select input via an array of objects (or function that returns array of object or promise of it),\n   * a value field name and a label field name.\n   * This behaves the same as passing items via the choices option but can be called after initialising Choices.\n   * This can also be used to add groups of choices (see example 2); Optionally pass a true `replaceChoices` value to remove any existing choices.\n   * Optionally pass a `customProperties` object to add additional data to your choices (useful when searching/filtering etc).\n   *\n   * **Input types affected:** select-one, select-multiple\n   *\n   * @example\n   * ```js\n   * const example = new Choices(element);\n   *\n   * example.setChoices([\n   *   {value: 'One', label: 'Label One', disabled: true},\n   *   {value: 'Two', label: 'Label Two', selected: true},\n   *   {value: 'Three', label: 'Label Three'},\n   * ], 'value', 'label', false);\n   * ```\n   *\n   * @example\n   * ```js\n   * const example = new Choices(element);\n   *\n   * example.setChoices(async () => {\n   *   try {\n   *      const items = await fetch('/items');\n   *      return items.json()\n   *   } catch(err) {\n   *      console.error(err)\n   *   }\n   * });\n   * ```\n   *\n   * @example\n   * ```js\n   * const example = new Choices(element);\n   *\n   * example.setChoices([{\n   *   label: 'Group one',\n   *   id: 1,\n   *   disabled: false,\n   *   choices: [\n   *     {value: 'Child One', label: 'Child One', selected: true},\n   *     {value: 'Child Two', label: 'Child Two',  disabled: true},\n   *     {value: 'Child Three', label: 'Child Three'},\n   *   ]\n   * },\n   * {\n   *   label: 'Group two',\n   *   id: 2,\n   *   disabled: false,\n   *   choices: [\n   *     {value: 'Child Four', label: 'Child Four', disabled: true},\n   *     {value: 'Child Five', label: 'Child Five'},\n   *     {value: 'Child Six', label: 'Child Six', customProperties: {\n   *       description: 'Custom description about child six',\n   *       random: 'Another random custom property'\n   *     }},\n   *   ]\n   * }], 'value', 'label', false);\n   * ```\n   */\n  Choices.prototype.setChoices = function (choicesArrayOrFetcher, value, label, replaceChoices) {\n    var _this = this;\n    if (choicesArrayOrFetcher === void 0) {\n      choicesArrayOrFetcher = [];\n    }\n    if (value === void 0) {\n      value = 'value';\n    }\n    if (label === void 0) {\n      label = 'label';\n    }\n    if (replaceChoices === void 0) {\n      replaceChoices = false;\n    }\n    if (!this.initialised) {\n      throw new ReferenceError(\"setChoices was called on a non-initialized instance of Choices\");\n    }\n    if (!this._isSelectElement) {\n      throw new TypeError(\"setChoices can't be used with INPUT based Choices\");\n    }\n    if (typeof value !== 'string' || !value) {\n      throw new TypeError(\"value parameter must be a name of 'value' field in passed objects\");\n    }\n    // Clear choices if needed\n    if (replaceChoices) {\n      this.clearChoices();\n    }\n    if (typeof choicesArrayOrFetcher === 'function') {\n      // it's a choices fetcher function\n      var fetcher_1 = choicesArrayOrFetcher(this);\n      if (typeof Promise === 'function' && fetcher_1 instanceof Promise) {\n        // that's a promise\n        // eslint-disable-next-line no-promise-executor-return\n        return new Promise(function (resolve) {\n          return requestAnimationFrame(resolve);\n        }).then(function () {\n          return _this._handleLoadingState(true);\n        }).then(function () {\n          return fetcher_1;\n        }).then(function (data) {\n          return _this.setChoices(data, value, label, replaceChoices);\n        }).catch(function (err) {\n          if (!_this.config.silent) {\n            console.error(err);\n          }\n        }).then(function () {\n          return _this._handleLoadingState(false);\n        }).then(function () {\n          return _this;\n        });\n      }\n      // function returned something else than promise, let's check if it's an array of choices\n      if (!Array.isArray(fetcher_1)) {\n        throw new TypeError(\".setChoices first argument function must return either array of choices or Promise, got: \".concat(typeof fetcher_1));\n      }\n      // recursion with results, it's sync and choices were cleared already\n      return this.setChoices(fetcher_1, value, label, false);\n    }\n    if (!Array.isArray(choicesArrayOrFetcher)) {\n      throw new TypeError(\".setChoices must be called either with array of choices with a function resulting into Promise of array of choices\");\n    }\n    this.containerOuter.removeLoadingState();\n    this._startLoading();\n    choicesArrayOrFetcher.forEach(function (groupOrChoice) {\n      if (groupOrChoice.choices) {\n        _this._addGroup({\n          id: groupOrChoice.id ? parseInt(\"\".concat(groupOrChoice.id), 10) : null,\n          group: groupOrChoice,\n          valueKey: value,\n          labelKey: label\n        });\n      } else {\n        var choice = groupOrChoice;\n        _this._addChoice({\n          value: choice[value],\n          label: choice[label],\n          isSelected: !!choice.selected,\n          isDisabled: !!choice.disabled,\n          placeholder: !!choice.placeholder,\n          customProperties: choice.customProperties\n        });\n      }\n    });\n    this._stopLoading();\n    return this;\n  };\n  Choices.prototype.clearChoices = function () {\n    this._store.dispatch((0, choices_1.clearChoices)());\n    return this;\n  };\n  Choices.prototype.clearStore = function () {\n    this._store.dispatch((0, misc_1.clearAll)());\n    return this;\n  };\n  Choices.prototype.clearInput = function () {\n    var shouldSetInputWidth = !this._isSelectOneElement;\n    this.input.clear(shouldSetInputWidth);\n    if (!this._isTextElement && this._canSearch) {\n      this._isSearching = false;\n      this._store.dispatch((0, choices_1.activateChoices)(true));\n    }\n    return this;\n  };\n  Choices.prototype._render = function () {\n    if (this._store.isLoading()) {\n      return;\n    }\n    this._currentState = this._store.state;\n    var stateChanged = this._currentState.choices !== this._prevState.choices || this._currentState.groups !== this._prevState.groups || this._currentState.items !== this._prevState.items;\n    var shouldRenderChoices = this._isSelectElement;\n    var shouldRenderItems = this._currentState.items !== this._prevState.items;\n    if (!stateChanged) {\n      return;\n    }\n    if (shouldRenderChoices) {\n      this._renderChoices();\n    }\n    if (shouldRenderItems) {\n      this._renderItems();\n    }\n    this._prevState = this._currentState;\n  };\n  Choices.prototype._renderChoices = function () {\n    var _this = this;\n    var _a = this._store,\n      activeGroups = _a.activeGroups,\n      activeChoices = _a.activeChoices;\n    var choiceListFragment = document.createDocumentFragment();\n    this.choiceList.clear();\n    if (this.config.resetScrollPosition) {\n      requestAnimationFrame(function () {\n        return _this.choiceList.scrollToTop();\n      });\n    }\n    // If we have grouped options\n    if (activeGroups.length >= 1 && !this._isSearching) {\n      // If we have a placeholder choice along with groups\n      var activePlaceholders = activeChoices.filter(function (activeChoice) {\n        return activeChoice.placeholder === true && activeChoice.groupId === -1;\n      });\n      if (activePlaceholders.length >= 1) {\n        choiceListFragment = this._createChoicesFragment(activePlaceholders, choiceListFragment);\n      }\n      choiceListFragment = this._createGroupsFragment(activeGroups, activeChoices, choiceListFragment);\n    } else if (activeChoices.length >= 1) {\n      choiceListFragment = this._createChoicesFragment(activeChoices, choiceListFragment);\n    }\n    // If we have choices to show\n    if (choiceListFragment.childNodes && choiceListFragment.childNodes.length > 0) {\n      var activeItems = this._store.activeItems;\n      var canAddItem = this._canAddItem(activeItems, this.input.value);\n      // ...and we can select them\n      if (canAddItem.response) {\n        // ...append them and highlight the first choice\n        this.choiceList.append(choiceListFragment);\n        this._highlightChoice();\n      } else {\n        var notice = this._getTemplate('notice', canAddItem.notice);\n        this.choiceList.append(notice);\n      }\n    } else {\n      // Otherwise show a notice\n      var dropdownItem = void 0;\n      var notice = void 0;\n      if (this._isSearching) {\n        notice = typeof this.config.noResultsText === 'function' ? this.config.noResultsText() : this.config.noResultsText;\n        dropdownItem = this._getTemplate('notice', notice, 'no-results');\n      } else {\n        notice = typeof this.config.noChoicesText === 'function' ? this.config.noChoicesText() : this.config.noChoicesText;\n        dropdownItem = this._getTemplate('notice', notice, 'no-choices');\n      }\n      this.choiceList.append(dropdownItem);\n    }\n  };\n  Choices.prototype._renderItems = function () {\n    var activeItems = this._store.activeItems || [];\n    this.itemList.clear();\n    // Create a fragment to store our list items\n    // (so we don't have to update the DOM for each item)\n    var itemListFragment = this._createItemsFragment(activeItems);\n    // If we have items to add, append them\n    if (itemListFragment.childNodes) {\n      this.itemList.append(itemListFragment);\n    }\n  };\n  Choices.prototype._createGroupsFragment = function (groups, choices, fragment) {\n    var _this = this;\n    if (fragment === void 0) {\n      fragment = document.createDocumentFragment();\n    }\n    var getGroupChoices = function (group) {\n      return choices.filter(function (choice) {\n        if (_this._isSelectOneElement) {\n          return choice.groupId === group.id;\n        }\n        return choice.groupId === group.id && (_this.config.renderSelectedChoices === 'always' || !choice.selected);\n      });\n    };\n    // If sorting is enabled, filter groups\n    if (this.config.shouldSort) {\n      groups.sort(this.config.sorter);\n    }\n    groups.forEach(function (group) {\n      var groupChoices = getGroupChoices(group);\n      if (groupChoices.length >= 1) {\n        var dropdownGroup = _this._getTemplate('choiceGroup', group);\n        fragment.appendChild(dropdownGroup);\n        _this._createChoicesFragment(groupChoices, fragment, true);\n      }\n    });\n    return fragment;\n  };\n  Choices.prototype._createChoicesFragment = function (choices, fragment, withinGroup) {\n    var _this = this;\n    if (fragment === void 0) {\n      fragment = document.createDocumentFragment();\n    }\n    if (withinGroup === void 0) {\n      withinGroup = false;\n    }\n    // Create a fragment to store our list items (so we don't have to update the DOM for each item)\n    var _a = this.config,\n      renderSelectedChoices = _a.renderSelectedChoices,\n      searchResultLimit = _a.searchResultLimit,\n      renderChoiceLimit = _a.renderChoiceLimit;\n    var filter = this._isSearching ? utils_1.sortByScore : this.config.sorter;\n    var appendChoice = function (choice) {\n      var shouldRender = renderSelectedChoices === 'auto' ? _this._isSelectOneElement || !choice.selected : true;\n      if (shouldRender) {\n        var dropdownItem = _this._getTemplate('choice', choice, _this.config.itemSelectText);\n        fragment.appendChild(dropdownItem);\n      }\n    };\n    var rendererableChoices = choices;\n    if (renderSelectedChoices === 'auto' && !this._isSelectOneElement) {\n      rendererableChoices = choices.filter(function (choice) {\n        return !choice.selected;\n      });\n    }\n    // Split array into placeholders and \"normal\" choices\n    var _b = rendererableChoices.reduce(function (acc, choice) {\n        if (choice.placeholder) {\n          acc.placeholderChoices.push(choice);\n        } else {\n          acc.normalChoices.push(choice);\n        }\n        return acc;\n      }, {\n        placeholderChoices: [],\n        normalChoices: []\n      }),\n      placeholderChoices = _b.placeholderChoices,\n      normalChoices = _b.normalChoices;\n    // If sorting is enabled or the user is searching, filter choices\n    if (this.config.shouldSort || this._isSearching) {\n      normalChoices.sort(filter);\n    }\n    var choiceLimit = rendererableChoices.length;\n    // Prepend placeholeder\n    var sortedChoices = this._isSelectOneElement ? __spreadArray(__spreadArray([], placeholderChoices, true), normalChoices, true) : normalChoices;\n    if (this._isSearching) {\n      choiceLimit = searchResultLimit;\n    } else if (renderChoiceLimit && renderChoiceLimit > 0 && !withinGroup) {\n      choiceLimit = renderChoiceLimit;\n    }\n    // Add each choice to dropdown within range\n    for (var i = 0; i < choiceLimit; i += 1) {\n      if (sortedChoices[i]) {\n        appendChoice(sortedChoices[i]);\n      }\n    }\n    return fragment;\n  };\n  Choices.prototype._createItemsFragment = function (items, fragment) {\n    var _this = this;\n    if (fragment === void 0) {\n      fragment = document.createDocumentFragment();\n    }\n    // Create fragment to add elements to\n    var _a = this.config,\n      shouldSortItems = _a.shouldSortItems,\n      sorter = _a.sorter,\n      removeItemButton = _a.removeItemButton;\n    // If sorting is enabled, filter items\n    if (shouldSortItems && !this._isSelectOneElement) {\n      items.sort(sorter);\n    }\n    if (this._isTextElement) {\n      // Update the value of the hidden input\n      this.passedElement.value = items.map(function (_a) {\n        var value = _a.value;\n        return value;\n      }).join(this.config.delimiter);\n    } else {\n      // Update the options of the hidden input\n      this.passedElement.options = items;\n    }\n    var addItemToFragment = function (item) {\n      // Create new list element\n      var listItem = _this._getTemplate('item', item, removeItemButton);\n      // Append it to list\n      fragment.appendChild(listItem);\n    };\n    // Add each list item to list\n    items.forEach(addItemToFragment);\n    return fragment;\n  };\n  Choices.prototype._triggerChange = function (value) {\n    if (value === undefined || value === null) {\n      return;\n    }\n    this.passedElement.triggerEvent(constants_1.EVENTS.change, {\n      value: value\n    });\n  };\n  Choices.prototype._selectPlaceholderChoice = function (placeholderChoice) {\n    this._addItem({\n      value: placeholderChoice.value,\n      label: placeholderChoice.label,\n      choiceId: placeholderChoice.id,\n      groupId: placeholderChoice.groupId,\n      placeholder: placeholderChoice.placeholder\n    });\n    this._triggerChange(placeholderChoice.value);\n  };\n  Choices.prototype._handleButtonAction = function (activeItems, element) {\n    if (!activeItems || !element || !this.config.removeItems || !this.config.removeItemButton) {\n      return;\n    }\n    var itemId = element.parentNode && element.parentNode.dataset.id;\n    var itemToRemove = itemId && activeItems.find(function (item) {\n      return item.id === parseInt(itemId, 10);\n    });\n    if (!itemToRemove) {\n      return;\n    }\n    // Remove item associated with button\n    this._removeItem(itemToRemove);\n    this._triggerChange(itemToRemove.value);\n    if (this._isSelectOneElement && this._store.placeholderChoice) {\n      this._selectPlaceholderChoice(this._store.placeholderChoice);\n    }\n  };\n  Choices.prototype._handleItemAction = function (activeItems, element, hasShiftKey) {\n    var _this = this;\n    if (hasShiftKey === void 0) {\n      hasShiftKey = false;\n    }\n    if (!activeItems || !element || !this.config.removeItems || this._isSelectOneElement) {\n      return;\n    }\n    var passedId = element.dataset.id;\n    // We only want to select one item with a click\n    // so we deselect any items that aren't the target\n    // unless shift is being pressed\n    activeItems.forEach(function (item) {\n      if (item.id === parseInt(\"\".concat(passedId), 10) && !item.highlighted) {\n        _this.highlightItem(item);\n      } else if (!hasShiftKey && item.highlighted) {\n        _this.unhighlightItem(item);\n      }\n    });\n    // Focus input as without focus, a user cannot do anything with a\n    // highlighted item\n    this.input.focus();\n  };\n  Choices.prototype._handleChoiceAction = function (activeItems, element) {\n    if (!activeItems || !element) {\n      return;\n    }\n    // If we are clicking on an option\n    var id = element.dataset.id;\n    var choice = id && this._store.getChoiceById(id);\n    if (!choice) {\n      return;\n    }\n    var passedKeyCode = activeItems[0] && activeItems[0].keyCode ? activeItems[0].keyCode : undefined;\n    var hasActiveDropdown = this.dropdown.isActive;\n    // Update choice keyCode\n    choice.keyCode = passedKeyCode;\n    this.passedElement.triggerEvent(constants_1.EVENTS.choice, {\n      choice: choice\n    });\n    if (!choice.selected && !choice.disabled) {\n      var canAddItem = this._canAddItem(activeItems, choice.value);\n      if (canAddItem.response) {\n        this._addItem({\n          value: choice.value,\n          label: choice.label,\n          choiceId: choice.id,\n          groupId: choice.groupId,\n          customProperties: choice.customProperties,\n          placeholder: choice.placeholder,\n          keyCode: choice.keyCode\n        });\n        this._triggerChange(choice.value);\n      }\n    }\n    this.clearInput();\n    // We want to close the dropdown if we are dealing with a single select box\n    if (hasActiveDropdown && this._isSelectOneElement) {\n      this.hideDropdown(true);\n      this.containerOuter.focus();\n    }\n  };\n  Choices.prototype._handleBackspace = function (activeItems) {\n    if (!this.config.removeItems || !activeItems) {\n      return;\n    }\n    var lastItem = activeItems[activeItems.length - 1];\n    var hasHighlightedItems = activeItems.some(function (item) {\n      return item.highlighted;\n    });\n    // If editing the last item is allowed and there are not other selected items,\n    // we can edit the item value. Otherwise if we can remove items, remove all selected items\n    if (this.config.editItems && !hasHighlightedItems && lastItem) {\n      this.input.value = lastItem.value;\n      this.input.setWidth();\n      this._removeItem(lastItem);\n      this._triggerChange(lastItem.value);\n    } else {\n      if (!hasHighlightedItems) {\n        // Highlight last item if none already highlighted\n        this.highlightItem(lastItem, false);\n      }\n      this.removeHighlightedItems(true);\n    }\n  };\n  Choices.prototype._startLoading = function () {\n    this._store.dispatch((0, misc_1.setIsLoading)(true));\n  };\n  Choices.prototype._stopLoading = function () {\n    this._store.dispatch((0, misc_1.setIsLoading)(false));\n  };\n  Choices.prototype._handleLoadingState = function (setLoading) {\n    if (setLoading === void 0) {\n      setLoading = true;\n    }\n    var placeholderItem = this.itemList.getChild(\".\".concat(this.config.classNames.placeholder));\n    if (setLoading) {\n      this.disable();\n      this.containerOuter.addLoadingState();\n      if (this._isSelectOneElement) {\n        if (!placeholderItem) {\n          placeholderItem = this._getTemplate('placeholder', this.config.loadingText);\n          if (placeholderItem) {\n            this.itemList.append(placeholderItem);\n          }\n        } else {\n          placeholderItem.innerHTML = this.config.loadingText;\n        }\n      } else {\n        this.input.placeholder = this.config.loadingText;\n      }\n    } else {\n      this.enable();\n      this.containerOuter.removeLoadingState();\n      if (this._isSelectOneElement) {\n        if (placeholderItem) {\n          placeholderItem.innerHTML = this._placeholderValue || '';\n        }\n      } else {\n        this.input.placeholder = this._placeholderValue || '';\n      }\n    }\n  };\n  Choices.prototype._handleSearch = function (value) {\n    if (!this.input.isFocussed) {\n      return;\n    }\n    var choices = this._store.choices;\n    var _a = this.config,\n      searchFloor = _a.searchFloor,\n      searchChoices = _a.searchChoices;\n    var hasUnactiveChoices = choices.some(function (option) {\n      return !option.active;\n    });\n    // Check that we have a value to search and the input was an alphanumeric character\n    if (value !== null && typeof value !== 'undefined' && value.length >= searchFloor) {\n      var resultCount = searchChoices ? this._searchChoices(value) : 0;\n      // Trigger search event\n      this.passedElement.triggerEvent(constants_1.EVENTS.search, {\n        value: value,\n        resultCount: resultCount\n      });\n    } else if (hasUnactiveChoices) {\n      // Otherwise reset choices to active\n      this._isSearching = false;\n      this._store.dispatch((0, choices_1.activateChoices)(true));\n    }\n  };\n  Choices.prototype._canAddItem = function (activeItems, value) {\n    var canAddItem = true;\n    var notice = typeof this.config.addItemText === 'function' ? this.config.addItemText(value) : this.config.addItemText;\n    if (!this._isSelectOneElement) {\n      var isDuplicateValue = (0, utils_1.existsInArray)(activeItems, value);\n      if (this.config.maxItemCount > 0 && this.config.maxItemCount <= activeItems.length) {\n        // If there is a max entry limit and we have reached that limit\n        // don't update\n        canAddItem = false;\n        notice = typeof this.config.maxItemText === 'function' ? this.config.maxItemText(this.config.maxItemCount) : this.config.maxItemText;\n      }\n      if (!this.config.duplicateItemsAllowed && isDuplicateValue && canAddItem) {\n        canAddItem = false;\n        notice = typeof this.config.uniqueItemText === 'function' ? this.config.uniqueItemText(value) : this.config.uniqueItemText;\n      }\n      if (this._isTextElement && this.config.addItems && canAddItem && typeof this.config.addItemFilter === 'function' && !this.config.addItemFilter(value)) {\n        canAddItem = false;\n        notice = typeof this.config.customAddItemText === 'function' ? this.config.customAddItemText(value) : this.config.customAddItemText;\n      }\n    }\n    return {\n      response: canAddItem,\n      notice: notice\n    };\n  };\n  Choices.prototype._searchChoices = function (value) {\n    var newValue = typeof value === 'string' ? value.trim() : value;\n    var currentValue = typeof this._currentValue === 'string' ? this._currentValue.trim() : this._currentValue;\n    if (newValue.length < 1 && newValue === \"\".concat(currentValue, \" \")) {\n      return 0;\n    }\n    // If new value matches the desired length and is not the same as the current value with a space\n    var haystack = this._store.searchableChoices;\n    var needle = newValue;\n    var options = Object.assign(this.config.fuseOptions, {\n      keys: __spreadArray([], this.config.searchFields, true),\n      includeMatches: true\n    });\n    var fuse = new fuse_js_1.default(haystack, options);\n    var results = fuse.search(needle); // see https://github.com/krisk/Fuse/issues/303\n    this._currentValue = newValue;\n    this._highlightPosition = 0;\n    this._isSearching = true;\n    this._store.dispatch((0, choices_1.filterChoices)(results));\n    return results.length;\n  };\n  Choices.prototype._addEventListeners = function () {\n    var documentElement = this.config.shadowRoot || document.documentElement;\n    // capture events - can cancel event processing or propagation\n    documentElement.addEventListener('touchend', this._onTouchEnd, true);\n    this.containerOuter.element.addEventListener('keydown', this._onKeyDown, true);\n    this.containerOuter.element.addEventListener('mousedown', this._onMouseDown, true);\n    // passive events - doesn't call `preventDefault` or `stopPropagation`\n    documentElement.addEventListener('click', this._onClick, {\n      passive: true\n    });\n    documentElement.addEventListener('touchmove', this._onTouchMove, {\n      passive: true\n    });\n    this.dropdown.element.addEventListener('mouseover', this._onMouseOver, {\n      passive: true\n    });\n    if (this._isSelectOneElement) {\n      this.containerOuter.element.addEventListener('focus', this._onFocus, {\n        passive: true\n      });\n      this.containerOuter.element.addEventListener('blur', this._onBlur, {\n        passive: true\n      });\n    }\n    this.input.element.addEventListener('keyup', this._onKeyUp, {\n      passive: true\n    });\n    this.input.element.addEventListener('focus', this._onFocus, {\n      passive: true\n    });\n    this.input.element.addEventListener('blur', this._onBlur, {\n      passive: true\n    });\n    if (this.input.element.form) {\n      this.input.element.form.addEventListener('reset', this._onFormReset, {\n        passive: true\n      });\n    }\n    this.input.addEventListeners();\n  };\n  Choices.prototype._removeEventListeners = function () {\n    var documentElement = this.config.shadowRoot || document.documentElement;\n    documentElement.removeEventListener('touchend', this._onTouchEnd, true);\n    this.containerOuter.element.removeEventListener('keydown', this._onKeyDown, true);\n    this.containerOuter.element.removeEventListener('mousedown', this._onMouseDown, true);\n    documentElement.removeEventListener('click', this._onClick);\n    documentElement.removeEventListener('touchmove', this._onTouchMove);\n    this.dropdown.element.removeEventListener('mouseover', this._onMouseOver);\n    if (this._isSelectOneElement) {\n      this.containerOuter.element.removeEventListener('focus', this._onFocus);\n      this.containerOuter.element.removeEventListener('blur', this._onBlur);\n    }\n    this.input.element.removeEventListener('keyup', this._onKeyUp);\n    this.input.element.removeEventListener('focus', this._onFocus);\n    this.input.element.removeEventListener('blur', this._onBlur);\n    if (this.input.element.form) {\n      this.input.element.form.removeEventListener('reset', this._onFormReset);\n    }\n    this.input.removeEventListeners();\n  };\n  Choices.prototype._onKeyDown = function (event) {\n    var keyCode = event.keyCode;\n    var activeItems = this._store.activeItems;\n    var hasFocusedInput = this.input.isFocussed;\n    var hasActiveDropdown = this.dropdown.isActive;\n    var hasItems = this.itemList.hasChildren();\n    var keyString = String.fromCharCode(keyCode);\n    // eslint-disable-next-line no-control-regex\n    var wasPrintableChar = /[^\\x00-\\x1F]/.test(keyString);\n    var BACK_KEY = constants_1.KEY_CODES.BACK_KEY,\n      DELETE_KEY = constants_1.KEY_CODES.DELETE_KEY,\n      ENTER_KEY = constants_1.KEY_CODES.ENTER_KEY,\n      A_KEY = constants_1.KEY_CODES.A_KEY,\n      ESC_KEY = constants_1.KEY_CODES.ESC_KEY,\n      UP_KEY = constants_1.KEY_CODES.UP_KEY,\n      DOWN_KEY = constants_1.KEY_CODES.DOWN_KEY,\n      PAGE_UP_KEY = constants_1.KEY_CODES.PAGE_UP_KEY,\n      PAGE_DOWN_KEY = constants_1.KEY_CODES.PAGE_DOWN_KEY;\n    if (!this._isTextElement && !hasActiveDropdown && wasPrintableChar) {\n      this.showDropdown();\n      if (!this.input.isFocussed) {\n        /*\n          We update the input value with the pressed key as\n          the input was not focussed at the time of key press\n          therefore does not have the value of the key.\n        */\n        this.input.value += event.key.toLowerCase();\n      }\n    }\n    switch (keyCode) {\n      case A_KEY:\n        return this._onSelectKey(event, hasItems);\n      case ENTER_KEY:\n        return this._onEnterKey({\n          event: event,\n          activeItems: activeItems,\n          hasActiveDropdown: hasActiveDropdown\n        });\n      case ESC_KEY:\n        return this._onEscapeKey(hasActiveDropdown);\n      case UP_KEY:\n      case PAGE_UP_KEY:\n      case DOWN_KEY:\n      case PAGE_DOWN_KEY:\n        return this._onDirectionKey({\n          event: event,\n          hasActiveDropdown: hasActiveDropdown\n        });\n      case DELETE_KEY:\n      case BACK_KEY:\n        return this._onDeleteKey(event, activeItems, hasFocusedInput);\n      default:\n    }\n  };\n  Choices.prototype._onKeyUp = function (_a) {\n    var target = _a.target,\n      keyCode = _a.keyCode;\n    var value = this.input.value;\n    var activeItems = this._store.activeItems;\n    var canAddItem = this._canAddItem(activeItems, value);\n    var backKey = constants_1.KEY_CODES.BACK_KEY,\n      deleteKey = constants_1.KEY_CODES.DELETE_KEY;\n    // We are typing into a text input and have a value, we want to show a dropdown\n    // notice. Otherwise hide the dropdown\n    if (this._isTextElement) {\n      var canShowDropdownNotice = canAddItem.notice && value;\n      if (canShowDropdownNotice) {\n        var dropdownItem = this._getTemplate('notice', canAddItem.notice);\n        this.dropdown.element.innerHTML = dropdownItem.outerHTML;\n        this.showDropdown(true);\n      } else {\n        this.hideDropdown(true);\n      }\n    } else {\n      var wasRemovalKeyCode = keyCode === backKey || keyCode === deleteKey;\n      var userHasRemovedValue = wasRemovalKeyCode && target && !target.value;\n      var canReactivateChoices = !this._isTextElement && this._isSearching;\n      var canSearch = this._canSearch && canAddItem.response;\n      if (userHasRemovedValue && canReactivateChoices) {\n        this._isSearching = false;\n        this._store.dispatch((0, choices_1.activateChoices)(true));\n      } else if (canSearch) {\n        this._handleSearch(this.input.rawValue);\n      }\n    }\n    this._canSearch = this.config.searchEnabled;\n  };\n  Choices.prototype._onSelectKey = function (event, hasItems) {\n    var ctrlKey = event.ctrlKey,\n      metaKey = event.metaKey;\n    var hasCtrlDownKeyPressed = ctrlKey || metaKey;\n    // If CTRL + A or CMD + A have been pressed and there are items to select\n    if (hasCtrlDownKeyPressed && hasItems) {\n      this._canSearch = false;\n      var shouldHightlightAll = this.config.removeItems && !this.input.value && this.input.element === document.activeElement;\n      if (shouldHightlightAll) {\n        this.highlightAll();\n      }\n    }\n  };\n  Choices.prototype._onEnterKey = function (eventArgs) {\n    var event = eventArgs.event,\n      activeItems = eventArgs.activeItems,\n      hasActiveDropdown = eventArgs.hasActiveDropdown;\n    var target = event.target;\n    var enterKey = constants_1.KEY_CODES.ENTER_KEY;\n    var targetWasButton = target && target.hasAttribute('data-button');\n    if (this._isTextElement && target && target.value) {\n      var value = this.input.value;\n      var canAddItem = this._canAddItem(activeItems, value);\n      if (canAddItem.response) {\n        this.hideDropdown(true);\n        this._addItem({\n          value: value\n        });\n        this._triggerChange(value);\n        this.clearInput();\n      }\n    }\n    if (targetWasButton) {\n      this._handleButtonAction(activeItems, target);\n      event.preventDefault();\n    }\n    if (hasActiveDropdown) {\n      var highlightedChoice = this.dropdown.getChild(\".\".concat(this.config.classNames.highlightedState));\n      if (highlightedChoice) {\n        // add enter keyCode value\n        if (activeItems[0]) {\n          activeItems[0].keyCode = enterKey; // eslint-disable-line no-param-reassign\n        }\n\n        this._handleChoiceAction(activeItems, highlightedChoice);\n      }\n      event.preventDefault();\n    } else if (this._isSelectOneElement) {\n      this.showDropdown();\n      event.preventDefault();\n    }\n  };\n  Choices.prototype._onEscapeKey = function (hasActiveDropdown) {\n    if (hasActiveDropdown) {\n      this.hideDropdown(true);\n      this.containerOuter.focus();\n    }\n  };\n  Choices.prototype._onDirectionKey = function (eventArgs) {\n    var event = eventArgs.event,\n      hasActiveDropdown = eventArgs.hasActiveDropdown;\n    var keyCode = event.keyCode,\n      metaKey = event.metaKey;\n    var downKey = constants_1.KEY_CODES.DOWN_KEY,\n      pageUpKey = constants_1.KEY_CODES.PAGE_UP_KEY,\n      pageDownKey = constants_1.KEY_CODES.PAGE_DOWN_KEY;\n    // If up or down key is pressed, traverse through options\n    if (hasActiveDropdown || this._isSelectOneElement) {\n      this.showDropdown();\n      this._canSearch = false;\n      var directionInt = keyCode === downKey || keyCode === pageDownKey ? 1 : -1;\n      var skipKey = metaKey || keyCode === pageDownKey || keyCode === pageUpKey;\n      var selectableChoiceIdentifier = '[data-choice-selectable]';\n      var nextEl = void 0;\n      if (skipKey) {\n        if (directionInt > 0) {\n          nextEl = this.dropdown.element.querySelector(\"\".concat(selectableChoiceIdentifier, \":last-of-type\"));\n        } else {\n          nextEl = this.dropdown.element.querySelector(selectableChoiceIdentifier);\n        }\n      } else {\n        var currentEl = this.dropdown.element.querySelector(\".\".concat(this.config.classNames.highlightedState));\n        if (currentEl) {\n          nextEl = (0, utils_1.getAdjacentEl)(currentEl, selectableChoiceIdentifier, directionInt);\n        } else {\n          nextEl = this.dropdown.element.querySelector(selectableChoiceIdentifier);\n        }\n      }\n      if (nextEl) {\n        // We prevent default to stop the cursor moving\n        // when pressing the arrow\n        if (!(0, utils_1.isScrolledIntoView)(nextEl, this.choiceList.element, directionInt)) {\n          this.choiceList.scrollToChildElement(nextEl, directionInt);\n        }\n        this._highlightChoice(nextEl);\n      }\n      // Prevent default to maintain cursor position whilst\n      // traversing dropdown options\n      event.preventDefault();\n    }\n  };\n  Choices.prototype._onDeleteKey = function (event, activeItems, hasFocusedInput) {\n    var target = event.target;\n    // If backspace or delete key is pressed and the input has no value\n    if (!this._isSelectOneElement && !target.value && hasFocusedInput) {\n      this._handleBackspace(activeItems);\n      event.preventDefault();\n    }\n  };\n  Choices.prototype._onTouchMove = function () {\n    if (this._wasTap) {\n      this._wasTap = false;\n    }\n  };\n  Choices.prototype._onTouchEnd = function (event) {\n    var target = (event || event.touches[0]).target;\n    var touchWasWithinContainer = this._wasTap && this.containerOuter.element.contains(target);\n    if (touchWasWithinContainer) {\n      var containerWasExactTarget = target === this.containerOuter.element || target === this.containerInner.element;\n      if (containerWasExactTarget) {\n        if (this._isTextElement) {\n          this.input.focus();\n        } else if (this._isSelectMultipleElement) {\n          this.showDropdown();\n        }\n      }\n      // Prevents focus event firing\n      event.stopPropagation();\n    }\n    this._wasTap = true;\n  };\n  /**\n   * Handles mousedown event in capture mode for containetOuter.element\n   */\n  Choices.prototype._onMouseDown = function (event) {\n    var target = event.target;\n    if (!(target instanceof HTMLElement)) {\n      return;\n    }\n    // If we have our mouse down on the scrollbar and are on IE11...\n    if (IS_IE11 && this.choiceList.element.contains(target)) {\n      // check if click was on a scrollbar area\n      var firstChoice = this.choiceList.element.firstElementChild;\n      var isOnScrollbar = this._direction === 'ltr' ? event.offsetX >= firstChoice.offsetWidth : event.offsetX < firstChoice.offsetLeft;\n      this._isScrollingOnIe = isOnScrollbar;\n    }\n    if (target === this.input.element) {\n      return;\n    }\n    var item = target.closest('[data-button],[data-item],[data-choice]');\n    if (item instanceof HTMLElement) {\n      var hasShiftKey = event.shiftKey;\n      var activeItems = this._store.activeItems;\n      var dataset = item.dataset;\n      if ('button' in dataset) {\n        this._handleButtonAction(activeItems, item);\n      } else if ('item' in dataset) {\n        this._handleItemAction(activeItems, item, hasShiftKey);\n      } else if ('choice' in dataset) {\n        this._handleChoiceAction(activeItems, item);\n      }\n    }\n    event.preventDefault();\n  };\n  /**\n   * Handles mouseover event over this.dropdown\n   * @param {MouseEvent} event\n   */\n  Choices.prototype._onMouseOver = function (_a) {\n    var target = _a.target;\n    if (target instanceof HTMLElement && 'choice' in target.dataset) {\n      this._highlightChoice(target);\n    }\n  };\n  Choices.prototype._onClick = function (_a) {\n    var target = _a.target;\n    var clickWasWithinContainer = this.containerOuter.element.contains(target);\n    if (clickWasWithinContainer) {\n      if (!this.dropdown.isActive && !this.containerOuter.isDisabled) {\n        if (this._isTextElement) {\n          if (document.activeElement !== this.input.element) {\n            this.input.focus();\n          }\n        } else {\n          this.showDropdown();\n          this.containerOuter.focus();\n        }\n      } else if (this._isSelectOneElement && target !== this.input.element && !this.dropdown.element.contains(target)) {\n        this.hideDropdown();\n      }\n    } else {\n      var hasHighlightedItems = this._store.highlightedActiveItems.length > 0;\n      if (hasHighlightedItems) {\n        this.unhighlightAll();\n      }\n      this.containerOuter.removeFocusState();\n      this.hideDropdown(true);\n    }\n  };\n  Choices.prototype._onFocus = function (_a) {\n    var _b;\n    var _this = this;\n    var target = _a.target;\n    var focusWasWithinContainer = target && this.containerOuter.element.contains(target);\n    if (!focusWasWithinContainer) {\n      return;\n    }\n    var focusActions = (_b = {}, _b[constants_1.TEXT_TYPE] = function () {\n      if (target === _this.input.element) {\n        _this.containerOuter.addFocusState();\n      }\n    }, _b[constants_1.SELECT_ONE_TYPE] = function () {\n      _this.containerOuter.addFocusState();\n      if (target === _this.input.element) {\n        _this.showDropdown(true);\n      }\n    }, _b[constants_1.SELECT_MULTIPLE_TYPE] = function () {\n      if (target === _this.input.element) {\n        _this.showDropdown(true);\n        // If element is a select box, the focused element is the container and the dropdown\n        // isn't already open, focus and show dropdown\n        _this.containerOuter.addFocusState();\n      }\n    }, _b);\n    focusActions[this.passedElement.element.type]();\n  };\n  Choices.prototype._onBlur = function (_a) {\n    var _b;\n    var _this = this;\n    var target = _a.target;\n    var blurWasWithinContainer = target && this.containerOuter.element.contains(target);\n    if (blurWasWithinContainer && !this._isScrollingOnIe) {\n      var activeItems = this._store.activeItems;\n      var hasHighlightedItems_1 = activeItems.some(function (item) {\n        return item.highlighted;\n      });\n      var blurActions = (_b = {}, _b[constants_1.TEXT_TYPE] = function () {\n        if (target === _this.input.element) {\n          _this.containerOuter.removeFocusState();\n          if (hasHighlightedItems_1) {\n            _this.unhighlightAll();\n          }\n          _this.hideDropdown(true);\n        }\n      }, _b[constants_1.SELECT_ONE_TYPE] = function () {\n        _this.containerOuter.removeFocusState();\n        if (target === _this.input.element || target === _this.containerOuter.element && !_this._canSearch) {\n          _this.hideDropdown(true);\n        }\n      }, _b[constants_1.SELECT_MULTIPLE_TYPE] = function () {\n        if (target === _this.input.element) {\n          _this.containerOuter.removeFocusState();\n          _this.hideDropdown(true);\n          if (hasHighlightedItems_1) {\n            _this.unhighlightAll();\n          }\n        }\n      }, _b);\n      blurActions[this.passedElement.element.type]();\n    } else {\n      // On IE11, clicking the scollbar blurs our input and thus\n      // closes the dropdown. To stop this, we refocus our input\n      // if we know we are on IE *and* are scrolling.\n      this._isScrollingOnIe = false;\n      this.input.element.focus();\n    }\n  };\n  Choices.prototype._onFormReset = function () {\n    this._store.dispatch((0, misc_1.resetTo)(this._initialState));\n  };\n  Choices.prototype._highlightChoice = function (el) {\n    var _this = this;\n    if (el === void 0) {\n      el = null;\n    }\n    var choices = Array.from(this.dropdown.element.querySelectorAll('[data-choice-selectable]'));\n    if (!choices.length) {\n      return;\n    }\n    var passedEl = el;\n    var highlightedChoices = Array.from(this.dropdown.element.querySelectorAll(\".\".concat(this.config.classNames.highlightedState)));\n    // Remove any highlighted choices\n    highlightedChoices.forEach(function (choice) {\n      choice.classList.remove(_this.config.classNames.highlightedState);\n      choice.setAttribute('aria-selected', 'false');\n    });\n    if (passedEl) {\n      this._highlightPosition = choices.indexOf(passedEl);\n    } else {\n      // Highlight choice based on last known highlight location\n      if (choices.length > this._highlightPosition) {\n        // If we have an option to highlight\n        passedEl = choices[this._highlightPosition];\n      } else {\n        // Otherwise highlight the option before\n        passedEl = choices[choices.length - 1];\n      }\n      if (!passedEl) {\n        passedEl = choices[0];\n      }\n    }\n    passedEl.classList.add(this.config.classNames.highlightedState);\n    passedEl.setAttribute('aria-selected', 'true');\n    this.passedElement.triggerEvent(constants_1.EVENTS.highlightChoice, {\n      el: passedEl\n    });\n    if (this.dropdown.isActive) {\n      // IE11 ignores aria-label and blocks virtual keyboard\n      // if aria-activedescendant is set without a dropdown\n      this.input.setActiveDescendant(passedEl.id);\n      this.containerOuter.setActiveDescendant(passedEl.id);\n    }\n  };\n  Choices.prototype._addItem = function (_a) {\n    var value = _a.value,\n      _b = _a.label,\n      label = _b === void 0 ? null : _b,\n      _c = _a.choiceId,\n      choiceId = _c === void 0 ? -1 : _c,\n      _d = _a.groupId,\n      groupId = _d === void 0 ? -1 : _d,\n      _e = _a.customProperties,\n      customProperties = _e === void 0 ? {} : _e,\n      _f = _a.placeholder,\n      placeholder = _f === void 0 ? false : _f,\n      _g = _a.keyCode,\n      keyCode = _g === void 0 ? -1 : _g;\n    var passedValue = typeof value === 'string' ? value.trim() : value;\n    var items = this._store.items;\n    var passedLabel = label || passedValue;\n    var passedOptionId = choiceId || -1;\n    var group = groupId >= 0 ? this._store.getGroupById(groupId) : null;\n    var id = items ? items.length + 1 : 1;\n    // If a prepended value has been passed, prepend it\n    if (this.config.prependValue) {\n      passedValue = this.config.prependValue + passedValue.toString();\n    }\n    // If an appended value has been passed, append it\n    if (this.config.appendValue) {\n      passedValue += this.config.appendValue.toString();\n    }\n    this._store.dispatch((0, items_1.addItem)({\n      value: passedValue,\n      label: passedLabel,\n      id: id,\n      choiceId: passedOptionId,\n      groupId: groupId,\n      customProperties: customProperties,\n      placeholder: placeholder,\n      keyCode: keyCode\n    }));\n    if (this._isSelectOneElement) {\n      this.removeActiveItems(id);\n    }\n    // Trigger change event\n    this.passedElement.triggerEvent(constants_1.EVENTS.addItem, {\n      id: id,\n      value: passedValue,\n      label: passedLabel,\n      customProperties: customProperties,\n      groupValue: group && group.value ? group.value : null,\n      keyCode: keyCode\n    });\n  };\n  Choices.prototype._removeItem = function (item) {\n    var id = item.id,\n      value = item.value,\n      label = item.label,\n      customProperties = item.customProperties,\n      choiceId = item.choiceId,\n      groupId = item.groupId;\n    var group = groupId && groupId >= 0 ? this._store.getGroupById(groupId) : null;\n    if (!id || !choiceId) {\n      return;\n    }\n    this._store.dispatch((0, items_1.removeItem)(id, choiceId));\n    this.passedElement.triggerEvent(constants_1.EVENTS.removeItem, {\n      id: id,\n      value: value,\n      label: label,\n      customProperties: customProperties,\n      groupValue: group && group.value ? group.value : null\n    });\n  };\n  Choices.prototype._addChoice = function (_a) {\n    var value = _a.value,\n      _b = _a.label,\n      label = _b === void 0 ? null : _b,\n      _c = _a.isSelected,\n      isSelected = _c === void 0 ? false : _c,\n      _d = _a.isDisabled,\n      isDisabled = _d === void 0 ? false : _d,\n      _e = _a.groupId,\n      groupId = _e === void 0 ? -1 : _e,\n      _f = _a.customProperties,\n      customProperties = _f === void 0 ? {} : _f,\n      _g = _a.placeholder,\n      placeholder = _g === void 0 ? false : _g,\n      _h = _a.keyCode,\n      keyCode = _h === void 0 ? -1 : _h;\n    if (typeof value === 'undefined' || value === null) {\n      return;\n    }\n    // Generate unique id\n    var choices = this._store.choices;\n    var choiceLabel = label || value;\n    var choiceId = choices ? choices.length + 1 : 1;\n    var choiceElementId = \"\".concat(this._baseId, \"-\").concat(this._idNames.itemChoice, \"-\").concat(choiceId);\n    this._store.dispatch((0, choices_1.addChoice)({\n      id: choiceId,\n      groupId: groupId,\n      elementId: choiceElementId,\n      value: value,\n      label: choiceLabel,\n      disabled: isDisabled,\n      customProperties: customProperties,\n      placeholder: placeholder,\n      keyCode: keyCode\n    }));\n    if (isSelected) {\n      this._addItem({\n        value: value,\n        label: choiceLabel,\n        choiceId: choiceId,\n        customProperties: customProperties,\n        placeholder: placeholder,\n        keyCode: keyCode\n      });\n    }\n  };\n  Choices.prototype._addGroup = function (_a) {\n    var _this = this;\n    var group = _a.group,\n      id = _a.id,\n      _b = _a.valueKey,\n      valueKey = _b === void 0 ? 'value' : _b,\n      _c = _a.labelKey,\n      labelKey = _c === void 0 ? 'label' : _c;\n    var groupChoices = (0, utils_1.isType)('Object', group) ? group.choices : Array.from(group.getElementsByTagName('OPTION'));\n    var groupId = id || Math.floor(new Date().valueOf() * Math.random());\n    var isDisabled = group.disabled ? group.disabled : false;\n    if (groupChoices) {\n      this._store.dispatch((0, groups_1.addGroup)({\n        value: group.label,\n        id: groupId,\n        active: true,\n        disabled: isDisabled\n      }));\n      var addGroupChoices = function (choice) {\n        var isOptDisabled = choice.disabled || choice.parentNode && choice.parentNode.disabled;\n        _this._addChoice({\n          value: choice[valueKey],\n          label: (0, utils_1.isType)('Object', choice) ? choice[labelKey] : choice.innerHTML,\n          isSelected: choice.selected,\n          isDisabled: isOptDisabled,\n          groupId: groupId,\n          customProperties: choice.customProperties,\n          placeholder: choice.placeholder\n        });\n      };\n      groupChoices.forEach(addGroupChoices);\n    } else {\n      this._store.dispatch((0, groups_1.addGroup)({\n        value: group.label,\n        id: group.id,\n        active: false,\n        disabled: group.disabled\n      }));\n    }\n  };\n  Choices.prototype._getTemplate = function (template) {\n    var _a;\n    var args = [];\n    for (var _i = 1; _i < arguments.length; _i++) {\n      args[_i - 1] = arguments[_i];\n    }\n    return (_a = this._templates[template]).call.apply(_a, __spreadArray([this, this.config], args, false));\n  };\n  Choices.prototype._createTemplates = function () {\n    var callbackOnCreateTemplates = this.config.callbackOnCreateTemplates;\n    var userTemplates = {};\n    if (callbackOnCreateTemplates && typeof callbackOnCreateTemplates === 'function') {\n      userTemplates = callbackOnCreateTemplates.call(this, utils_1.strToEl);\n    }\n    this._templates = (0, deepmerge_1.default)(templates_1.default, userTemplates);\n  };\n  Choices.prototype._createElements = function () {\n    this.containerOuter = new components_1.Container({\n      element: this._getTemplate('containerOuter', this._direction, this._isSelectElement, this._isSelectOneElement, this.config.searchEnabled, this.passedElement.element.type, this.config.labelId),\n      classNames: this.config.classNames,\n      type: this.passedElement.element.type,\n      position: this.config.position\n    });\n    this.containerInner = new components_1.Container({\n      element: this._getTemplate('containerInner'),\n      classNames: this.config.classNames,\n      type: this.passedElement.element.type,\n      position: this.config.position\n    });\n    this.input = new components_1.Input({\n      element: this._getTemplate('input', this._placeholderValue),\n      classNames: this.config.classNames,\n      type: this.passedElement.element.type,\n      preventPaste: !this.config.paste\n    });\n    this.choiceList = new components_1.List({\n      element: this._getTemplate('choiceList', this._isSelectOneElement)\n    });\n    this.itemList = new components_1.List({\n      element: this._getTemplate('itemList', this._isSelectOneElement)\n    });\n    this.dropdown = new components_1.Dropdown({\n      element: this._getTemplate('dropdown'),\n      classNames: this.config.classNames,\n      type: this.passedElement.element.type\n    });\n  };\n  Choices.prototype._createStructure = function () {\n    // Hide original element\n    this.passedElement.conceal();\n    // Wrap input in container preserving DOM ordering\n    this.containerInner.wrap(this.passedElement.element);\n    // Wrapper inner container with outer container\n    this.containerOuter.wrap(this.containerInner.element);\n    if (this._isSelectOneElement) {\n      this.input.placeholder = this.config.searchPlaceholderValue || '';\n    } else if (this._placeholderValue) {\n      this.input.placeholder = this._placeholderValue;\n      this.input.setWidth();\n    }\n    this.containerOuter.element.appendChild(this.containerInner.element);\n    this.containerOuter.element.appendChild(this.dropdown.element);\n    this.containerInner.element.appendChild(this.itemList.element);\n    if (!this._isTextElement) {\n      this.dropdown.element.appendChild(this.choiceList.element);\n    }\n    if (!this._isSelectOneElement) {\n      this.containerInner.element.appendChild(this.input.element);\n    } else if (this.config.searchEnabled) {\n      this.dropdown.element.insertBefore(this.input.element, this.dropdown.element.firstChild);\n    }\n    if (this._isSelectElement) {\n      this._highlightPosition = 0;\n      this._isSearching = false;\n      this._startLoading();\n      if (this._presetGroups.length) {\n        this._addPredefinedGroups(this._presetGroups);\n      } else {\n        this._addPredefinedChoices(this._presetChoices);\n      }\n      this._stopLoading();\n    }\n    if (this._isTextElement) {\n      this._addPredefinedItems(this._presetItems);\n    }\n  };\n  Choices.prototype._addPredefinedGroups = function (groups) {\n    var _this = this;\n    // If we have a placeholder option\n    var placeholderChoice = this.passedElement.placeholderOption;\n    if (placeholderChoice && placeholderChoice.parentNode && placeholderChoice.parentNode.tagName === 'SELECT') {\n      this._addChoice({\n        value: placeholderChoice.value,\n        label: placeholderChoice.innerHTML,\n        isSelected: placeholderChoice.selected,\n        isDisabled: placeholderChoice.disabled,\n        placeholder: true\n      });\n    }\n    groups.forEach(function (group) {\n      return _this._addGroup({\n        group: group,\n        id: group.id || null\n      });\n    });\n  };\n  Choices.prototype._addPredefinedChoices = function (choices) {\n    var _this = this;\n    // If sorting is enabled or the user is searching, filter choices\n    if (this.config.shouldSort) {\n      choices.sort(this.config.sorter);\n    }\n    var hasSelectedChoice = choices.some(function (choice) {\n      return choice.selected;\n    });\n    var firstEnabledChoiceIndex = choices.findIndex(function (choice) {\n      return choice.disabled === undefined || !choice.disabled;\n    });\n    choices.forEach(function (choice, index) {\n      var _a = choice.value,\n        value = _a === void 0 ? '' : _a,\n        label = choice.label,\n        customProperties = choice.customProperties,\n        placeholder = choice.placeholder;\n      if (_this._isSelectElement) {\n        // If the choice is actually a group\n        if (choice.choices) {\n          _this._addGroup({\n            group: choice,\n            id: choice.id || null\n          });\n        } else {\n          /**\n           * If there is a selected choice already or the choice is not the first in\n           * the array, add each choice normally.\n           *\n           * Otherwise we pre-select the first enabled choice in the array (\"select-one\" only)\n           */\n          var shouldPreselect = _this._isSelectOneElement && !hasSelectedChoice && index === firstEnabledChoiceIndex;\n          var isSelected = shouldPreselect ? true : choice.selected;\n          var isDisabled = choice.disabled;\n          _this._addChoice({\n            value: value,\n            label: label,\n            isSelected: !!isSelected,\n            isDisabled: !!isDisabled,\n            placeholder: !!placeholder,\n            customProperties: customProperties\n          });\n        }\n      } else {\n        _this._addChoice({\n          value: value,\n          label: label,\n          isSelected: !!choice.selected,\n          isDisabled: !!choice.disabled,\n          placeholder: !!choice.placeholder,\n          customProperties: customProperties\n        });\n      }\n    });\n  };\n  Choices.prototype._addPredefinedItems = function (items) {\n    var _this = this;\n    items.forEach(function (item) {\n      if (typeof item === 'object' && item.value) {\n        _this._addItem({\n          value: item.value,\n          label: item.label,\n          choiceId: item.id,\n          customProperties: item.customProperties,\n          placeholder: item.placeholder\n        });\n      }\n      if (typeof item === 'string') {\n        _this._addItem({\n          value: item\n        });\n      }\n    });\n  };\n  Choices.prototype._setChoiceOrItem = function (item) {\n    var _this = this;\n    var itemType = (0, utils_1.getType)(item).toLowerCase();\n    var handleType = {\n      object: function () {\n        if (!item.value) {\n          return;\n        }\n        // If we are dealing with a select input, we need to create an option first\n        // that is then selected. For text inputs we can just add items normally.\n        if (!_this._isTextElement) {\n          _this._addChoice({\n            value: item.value,\n            label: item.label,\n            isSelected: true,\n            isDisabled: false,\n            customProperties: item.customProperties,\n            placeholder: item.placeholder\n          });\n        } else {\n          _this._addItem({\n            value: item.value,\n            label: item.label,\n            choiceId: item.id,\n            customProperties: item.customProperties,\n            placeholder: item.placeholder\n          });\n        }\n      },\n      string: function () {\n        if (!_this._isTextElement) {\n          _this._addChoice({\n            value: item,\n            label: item,\n            isSelected: true,\n            isDisabled: false\n          });\n        } else {\n          _this._addItem({\n            value: item\n          });\n        }\n      }\n    };\n    handleType[itemType]();\n  };\n  Choices.prototype._findAndSelectChoiceByValue = function (value) {\n    var _this = this;\n    var choices = this._store.choices;\n    // Check 'value' property exists and the choice isn't already selected\n    var foundChoice = choices.find(function (choice) {\n      return _this.config.valueComparer(choice.value, value);\n    });\n    if (foundChoice && !foundChoice.selected) {\n      this._addItem({\n        value: foundChoice.value,\n        label: foundChoice.label,\n        choiceId: foundChoice.id,\n        groupId: foundChoice.groupId,\n        customProperties: foundChoice.customProperties,\n        placeholder: foundChoice.placeholder,\n        keyCode: foundChoice.keyCode\n      });\n    }\n  };\n  Choices.prototype._generatePlaceholderValue = function () {\n    if (this._isSelectElement && this.passedElement.placeholderOption) {\n      var placeholderOption = this.passedElement.placeholderOption;\n      return placeholderOption ? placeholderOption.text : null;\n    }\n    var _a = this.config,\n      placeholder = _a.placeholder,\n      placeholderValue = _a.placeholderValue;\n    var dataset = this.passedElement.element.dataset;\n    if (placeholder) {\n      if (placeholderValue) {\n        return placeholderValue;\n      }\n      if (dataset.placeholder) {\n        return dataset.placeholder;\n      }\n    }\n    return null;\n  };\n  return Choices;\n}();\nexports[\"default\"] = Choices;\n\n/***/ }),\n\n/***/ 613:\n/***/ ((__unused_webpack_module, exports, __nested_webpack_require_75455__) => {\n\n\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nvar utils_1 = __nested_webpack_require_75455__(799);\nvar constants_1 = __nested_webpack_require_75455__(883);\nvar Container = /** @class */function () {\n  function Container(_a) {\n    var element = _a.element,\n      type = _a.type,\n      classNames = _a.classNames,\n      position = _a.position;\n    this.element = element;\n    this.classNames = classNames;\n    this.type = type;\n    this.position = position;\n    this.isOpen = false;\n    this.isFlipped = false;\n    this.isFocussed = false;\n    this.isDisabled = false;\n    this.isLoading = false;\n    this._onFocus = this._onFocus.bind(this);\n    this._onBlur = this._onBlur.bind(this);\n  }\n  Container.prototype.addEventListeners = function () {\n    this.element.addEventListener('focus', this._onFocus);\n    this.element.addEventListener('blur', this._onBlur);\n  };\n  Container.prototype.removeEventListeners = function () {\n    this.element.removeEventListener('focus', this._onFocus);\n    this.element.removeEventListener('blur', this._onBlur);\n  };\n  /**\n   * Determine whether container should be flipped based on passed\n   * dropdown position\n   */\n  Container.prototype.shouldFlip = function (dropdownPos, dropdownHeight, containerElem) {\n    if (typeof dropdownPos !== 'number') {\n      return false;\n    }\n    // If flip is enabled and the dropdown bottom position is\n    // greater than the window height flip the dropdown.\n    var shouldFlip = false;\n    if (this.position === 'auto') {\n      shouldFlip = !window.matchMedia(\"(min-height: \".concat(dropdownPos + 1, \"px)\")).matches;\n      if (shouldFlip) {\n        if (containerElem.getBoundingClientRect().top - dropdownHeight < 0) {\n          shouldFlip = false;\n        }\n      }\n    } else if (this.position === 'top') {\n      shouldFlip = true;\n    }\n    return shouldFlip;\n  };\n  Container.prototype.setActiveDescendant = function (activeDescendantID) {\n    this.element.setAttribute('aria-activedescendant', activeDescendantID);\n  };\n  Container.prototype.removeActiveDescendant = function () {\n    this.element.removeAttribute('aria-activedescendant');\n  };\n  Container.prototype.open = function (dropdownPos, dropdownHeight) {\n    this.element.classList.add(this.classNames.openState);\n    this.element.setAttribute('aria-expanded', 'true');\n    this.isOpen = true;\n    if (this.shouldFlip(dropdownPos, dropdownHeight, this.element)) {\n      this.element.classList.add(this.classNames.flippedState);\n      this.isFlipped = true;\n    }\n  };\n  Container.prototype.close = function () {\n    this.element.classList.remove(this.classNames.openState);\n    this.element.setAttribute('aria-expanded', 'false');\n    this.removeActiveDescendant();\n    this.isOpen = false;\n    // A dropdown flips if it does not have space within the page\n    if (this.isFlipped) {\n      this.element.classList.remove(this.classNames.flippedState);\n      this.isFlipped = false;\n    }\n  };\n  Container.prototype.focus = function () {\n    if (!this.isFocussed) {\n      this.element.focus();\n    }\n  };\n  Container.prototype.addFocusState = function () {\n    this.element.classList.add(this.classNames.focusState);\n  };\n  Container.prototype.removeFocusState = function () {\n    this.element.classList.remove(this.classNames.focusState);\n  };\n  Container.prototype.enable = function () {\n    this.element.classList.remove(this.classNames.disabledState);\n    this.element.removeAttribute('aria-disabled');\n    if (this.type === constants_1.SELECT_ONE_TYPE) {\n      this.element.setAttribute('tabindex', '0');\n    }\n    this.isDisabled = false;\n  };\n  Container.prototype.disable = function () {\n    this.element.classList.add(this.classNames.disabledState);\n    this.element.setAttribute('aria-disabled', 'true');\n    if (this.type === constants_1.SELECT_ONE_TYPE) {\n      this.element.setAttribute('tabindex', '-1');\n    }\n    this.isDisabled = true;\n  };\n  Container.prototype.wrap = function (element) {\n    (0, utils_1.wrap)(element, this.element);\n  };\n  Container.prototype.unwrap = function (element) {\n    if (this.element.parentNode) {\n      // Move passed element outside this element\n      this.element.parentNode.insertBefore(element, this.element);\n      // Remove this element\n      this.element.parentNode.removeChild(this.element);\n    }\n  };\n  Container.prototype.addLoadingState = function () {\n    this.element.classList.add(this.classNames.loadingState);\n    this.element.setAttribute('aria-busy', 'true');\n    this.isLoading = true;\n  };\n  Container.prototype.removeLoadingState = function () {\n    this.element.classList.remove(this.classNames.loadingState);\n    this.element.removeAttribute('aria-busy');\n    this.isLoading = false;\n  };\n  Container.prototype._onFocus = function () {\n    this.isFocussed = true;\n  };\n  Container.prototype._onBlur = function () {\n    this.isFocussed = false;\n  };\n  return Container;\n}();\nexports[\"default\"] = Container;\n\n/***/ }),\n\n/***/ 217:\n/***/ ((__unused_webpack_module, exports) => {\n\n\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nvar Dropdown = /** @class */function () {\n  function Dropdown(_a) {\n    var element = _a.element,\n      type = _a.type,\n      classNames = _a.classNames;\n    this.element = element;\n    this.classNames = classNames;\n    this.type = type;\n    this.isActive = false;\n  }\n  Object.defineProperty(Dropdown.prototype, \"distanceFromTopWindow\", {\n    /**\n     * Bottom position of dropdown in viewport coordinates\n     */\n    get: function () {\n      return this.element.getBoundingClientRect().bottom;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(Dropdown.prototype, \"height\", {\n    get: function () {\n      return this.element.getBoundingClientRect().height;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Dropdown.prototype.getChild = function (selector) {\n    return this.element.querySelector(selector);\n  };\n  /**\n   * Show dropdown to user by adding active state class\n   */\n  Dropdown.prototype.show = function () {\n    this.element.classList.add(this.classNames.activeState);\n    this.element.setAttribute('aria-expanded', 'true');\n    this.isActive = true;\n    return this;\n  };\n  /**\n   * Hide dropdown from user\n   */\n  Dropdown.prototype.hide = function () {\n    this.element.classList.remove(this.classNames.activeState);\n    this.element.setAttribute('aria-expanded', 'false');\n    this.isActive = false;\n    return this;\n  };\n  return Dropdown;\n}();\nexports[\"default\"] = Dropdown;\n\n/***/ }),\n\n/***/ 520:\n/***/ (function(__unused_webpack_module, exports, __nested_webpack_require_82050__) {\n\n\n\nvar __importDefault = this && this.__importDefault || function (mod) {\n  return mod && mod.__esModule ? mod : {\n    \"default\": mod\n  };\n};\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.WrappedSelect = exports.WrappedInput = exports.List = exports.Input = exports.Container = exports.Dropdown = void 0;\nvar dropdown_1 = __importDefault(__nested_webpack_require_82050__(217));\nexports.Dropdown = dropdown_1.default;\nvar container_1 = __importDefault(__nested_webpack_require_82050__(613));\nexports.Container = container_1.default;\nvar input_1 = __importDefault(__nested_webpack_require_82050__(11));\nexports.Input = input_1.default;\nvar list_1 = __importDefault(__nested_webpack_require_82050__(624));\nexports.List = list_1.default;\nvar wrapped_input_1 = __importDefault(__nested_webpack_require_82050__(541));\nexports.WrappedInput = wrapped_input_1.default;\nvar wrapped_select_1 = __importDefault(__nested_webpack_require_82050__(982));\nexports.WrappedSelect = wrapped_select_1.default;\n\n/***/ }),\n\n/***/ 11:\n/***/ ((__unused_webpack_module, exports, __nested_webpack_require_83077__) => {\n\n\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nvar utils_1 = __nested_webpack_require_83077__(799);\nvar constants_1 = __nested_webpack_require_83077__(883);\nvar Input = /** @class */function () {\n  function Input(_a) {\n    var element = _a.element,\n      type = _a.type,\n      classNames = _a.classNames,\n      preventPaste = _a.preventPaste;\n    this.element = element;\n    this.type = type;\n    this.classNames = classNames;\n    this.preventPaste = preventPaste;\n    this.isFocussed = this.element.isEqualNode(document.activeElement);\n    this.isDisabled = element.disabled;\n    this._onPaste = this._onPaste.bind(this);\n    this._onInput = this._onInput.bind(this);\n    this._onFocus = this._onFocus.bind(this);\n    this._onBlur = this._onBlur.bind(this);\n  }\n  Object.defineProperty(Input.prototype, \"placeholder\", {\n    set: function (placeholder) {\n      this.element.placeholder = placeholder;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(Input.prototype, \"value\", {\n    get: function () {\n      return (0, utils_1.sanitise)(this.element.value);\n    },\n    set: function (value) {\n      this.element.value = value;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(Input.prototype, \"rawValue\", {\n    get: function () {\n      return this.element.value;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Input.prototype.addEventListeners = function () {\n    this.element.addEventListener('paste', this._onPaste);\n    this.element.addEventListener('input', this._onInput, {\n      passive: true\n    });\n    this.element.addEventListener('focus', this._onFocus, {\n      passive: true\n    });\n    this.element.addEventListener('blur', this._onBlur, {\n      passive: true\n    });\n  };\n  Input.prototype.removeEventListeners = function () {\n    this.element.removeEventListener('input', this._onInput);\n    this.element.removeEventListener('paste', this._onPaste);\n    this.element.removeEventListener('focus', this._onFocus);\n    this.element.removeEventListener('blur', this._onBlur);\n  };\n  Input.prototype.enable = function () {\n    this.element.removeAttribute('disabled');\n    this.isDisabled = false;\n  };\n  Input.prototype.disable = function () {\n    this.element.setAttribute('disabled', '');\n    this.isDisabled = true;\n  };\n  Input.prototype.focus = function () {\n    if (!this.isFocussed) {\n      this.element.focus();\n    }\n  };\n  Input.prototype.blur = function () {\n    if (this.isFocussed) {\n      this.element.blur();\n    }\n  };\n  Input.prototype.clear = function (setWidth) {\n    if (setWidth === void 0) {\n      setWidth = true;\n    }\n    if (this.element.value) {\n      this.element.value = '';\n    }\n    if (setWidth) {\n      this.setWidth();\n    }\n    return this;\n  };\n  /**\n   * Set the correct input width based on placeholder\n   * value or input value\n   */\n  Input.prototype.setWidth = function () {\n    // Resize input to contents or placeholder\n    var _a = this.element,\n      style = _a.style,\n      value = _a.value,\n      placeholder = _a.placeholder;\n    style.minWidth = \"\".concat(placeholder.length + 1, \"ch\");\n    style.width = \"\".concat(value.length + 1, \"ch\");\n  };\n  Input.prototype.setActiveDescendant = function (activeDescendantID) {\n    this.element.setAttribute('aria-activedescendant', activeDescendantID);\n  };\n  Input.prototype.removeActiveDescendant = function () {\n    this.element.removeAttribute('aria-activedescendant');\n  };\n  Input.prototype._onInput = function () {\n    if (this.type !== constants_1.SELECT_ONE_TYPE) {\n      this.setWidth();\n    }\n  };\n  Input.prototype._onPaste = function (event) {\n    if (this.preventPaste) {\n      event.preventDefault();\n    }\n  };\n  Input.prototype._onFocus = function () {\n    this.isFocussed = true;\n  };\n  Input.prototype._onBlur = function () {\n    this.isFocussed = false;\n  };\n  return Input;\n}();\nexports[\"default\"] = Input;\n\n/***/ }),\n\n/***/ 624:\n/***/ ((__unused_webpack_module, exports, __nested_webpack_require_87074__) => {\n\n\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nvar constants_1 = __nested_webpack_require_87074__(883);\nvar List = /** @class */function () {\n  function List(_a) {\n    var element = _a.element;\n    this.element = element;\n    this.scrollPos = this.element.scrollTop;\n    this.height = this.element.offsetHeight;\n  }\n  List.prototype.clear = function () {\n    this.element.innerHTML = '';\n  };\n  List.prototype.append = function (node) {\n    this.element.appendChild(node);\n  };\n  List.prototype.getChild = function (selector) {\n    return this.element.querySelector(selector);\n  };\n  List.prototype.hasChildren = function () {\n    return this.element.hasChildNodes();\n  };\n  List.prototype.scrollToTop = function () {\n    this.element.scrollTop = 0;\n  };\n  List.prototype.scrollToChildElement = function (element, direction) {\n    var _this = this;\n    if (!element) {\n      return;\n    }\n    var listHeight = this.element.offsetHeight;\n    // Scroll position of dropdown\n    var listScrollPosition = this.element.scrollTop + listHeight;\n    var elementHeight = element.offsetHeight;\n    // Distance from bottom of element to top of parent\n    var elementPos = element.offsetTop + elementHeight;\n    // Difference between the element and scroll position\n    var destination = direction > 0 ? this.element.scrollTop + elementPos - listScrollPosition : element.offsetTop;\n    requestAnimationFrame(function () {\n      _this._animateScroll(destination, direction);\n    });\n  };\n  List.prototype._scrollDown = function (scrollPos, strength, destination) {\n    var easing = (destination - scrollPos) / strength;\n    var distance = easing > 1 ? easing : 1;\n    this.element.scrollTop = scrollPos + distance;\n  };\n  List.prototype._scrollUp = function (scrollPos, strength, destination) {\n    var easing = (scrollPos - destination) / strength;\n    var distance = easing > 1 ? easing : 1;\n    this.element.scrollTop = scrollPos - distance;\n  };\n  List.prototype._animateScroll = function (destination, direction) {\n    var _this = this;\n    var strength = constants_1.SCROLLING_SPEED;\n    var choiceListScrollTop = this.element.scrollTop;\n    var continueAnimation = false;\n    if (direction > 0) {\n      this._scrollDown(choiceListScrollTop, strength, destination);\n      if (choiceListScrollTop < destination) {\n        continueAnimation = true;\n      }\n    } else {\n      this._scrollUp(choiceListScrollTop, strength, destination);\n      if (choiceListScrollTop > destination) {\n        continueAnimation = true;\n      }\n    }\n    if (continueAnimation) {\n      requestAnimationFrame(function () {\n        _this._animateScroll(destination, direction);\n      });\n    }\n  };\n  return List;\n}();\nexports[\"default\"] = List;\n\n/***/ }),\n\n/***/ 730:\n/***/ ((__unused_webpack_module, exports, __nested_webpack_require_89890__) => {\n\n\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nvar utils_1 = __nested_webpack_require_89890__(799);\nvar WrappedElement = /** @class */function () {\n  function WrappedElement(_a) {\n    var element = _a.element,\n      classNames = _a.classNames;\n    this.element = element;\n    this.classNames = classNames;\n    if (!(element instanceof HTMLInputElement) && !(element instanceof HTMLSelectElement)) {\n      throw new TypeError('Invalid element passed');\n    }\n    this.isDisabled = false;\n  }\n  Object.defineProperty(WrappedElement.prototype, \"isActive\", {\n    get: function () {\n      return this.element.dataset.choice === 'active';\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(WrappedElement.prototype, \"dir\", {\n    get: function () {\n      return this.element.dir;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(WrappedElement.prototype, \"value\", {\n    get: function () {\n      return this.element.value;\n    },\n    set: function (value) {\n      // you must define setter here otherwise it will be readonly property\n      this.element.value = value;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  WrappedElement.prototype.conceal = function () {\n    // Hide passed input\n    this.element.classList.add(this.classNames.input);\n    this.element.hidden = true;\n    // Remove element from tab index\n    this.element.tabIndex = -1;\n    // Backup original styles if any\n    var origStyle = this.element.getAttribute('style');\n    if (origStyle) {\n      this.element.setAttribute('data-choice-orig-style', origStyle);\n    }\n    this.element.setAttribute('data-choice', 'active');\n  };\n  WrappedElement.prototype.reveal = function () {\n    // Reinstate passed element\n    this.element.classList.remove(this.classNames.input);\n    this.element.hidden = false;\n    this.element.removeAttribute('tabindex');\n    // Recover original styles if any\n    var origStyle = this.element.getAttribute('data-choice-orig-style');\n    if (origStyle) {\n      this.element.removeAttribute('data-choice-orig-style');\n      this.element.setAttribute('style', origStyle);\n    } else {\n      this.element.removeAttribute('style');\n    }\n    this.element.removeAttribute('data-choice');\n    // Re-assign values - this is weird, I know\n    // @todo Figure out why we need to do this\n    this.element.value = this.element.value; // eslint-disable-line no-self-assign\n  };\n\n  WrappedElement.prototype.enable = function () {\n    this.element.removeAttribute('disabled');\n    this.element.disabled = false;\n    this.isDisabled = false;\n  };\n  WrappedElement.prototype.disable = function () {\n    this.element.setAttribute('disabled', '');\n    this.element.disabled = true;\n    this.isDisabled = true;\n  };\n  WrappedElement.prototype.triggerEvent = function (eventType, data) {\n    (0, utils_1.dispatchEvent)(this.element, eventType, data);\n  };\n  return WrappedElement;\n}();\nexports[\"default\"] = WrappedElement;\n\n/***/ }),\n\n/***/ 541:\n/***/ (function(__unused_webpack_module, exports, __nested_webpack_require_92966__) {\n\n\n\nvar __extends = this && this.__extends || function () {\n  var extendStatics = function (d, b) {\n    extendStatics = Object.setPrototypeOf || {\n      __proto__: []\n    } instanceof Array && function (d, b) {\n      d.__proto__ = b;\n    } || function (d, b) {\n      for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];\n    };\n    return extendStatics(d, b);\n  };\n  return function (d, b) {\n    if (typeof b !== \"function\" && b !== null) throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n    extendStatics(d, b);\n    function __() {\n      this.constructor = d;\n    }\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n  };\n}();\nvar __importDefault = this && this.__importDefault || function (mod) {\n  return mod && mod.__esModule ? mod : {\n    \"default\": mod\n  };\n};\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nvar wrapped_element_1 = __importDefault(__nested_webpack_require_92966__(730));\nvar WrappedInput = /** @class */function (_super) {\n  __extends(WrappedInput, _super);\n  function WrappedInput(_a) {\n    var element = _a.element,\n      classNames = _a.classNames,\n      delimiter = _a.delimiter;\n    var _this = _super.call(this, {\n      element: element,\n      classNames: classNames\n    }) || this;\n    _this.delimiter = delimiter;\n    return _this;\n  }\n  Object.defineProperty(WrappedInput.prototype, \"value\", {\n    get: function () {\n      return this.element.value;\n    },\n    set: function (value) {\n      this.element.setAttribute('value', value);\n      this.element.value = value;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  return WrappedInput;\n}(wrapped_element_1.default);\nexports[\"default\"] = WrappedInput;\n\n/***/ }),\n\n/***/ 982:\n/***/ (function(__unused_webpack_module, exports, __nested_webpack_require_94820__) {\n\n\n\nvar __extends = this && this.__extends || function () {\n  var extendStatics = function (d, b) {\n    extendStatics = Object.setPrototypeOf || {\n      __proto__: []\n    } instanceof Array && function (d, b) {\n      d.__proto__ = b;\n    } || function (d, b) {\n      for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];\n    };\n    return extendStatics(d, b);\n  };\n  return function (d, b) {\n    if (typeof b !== \"function\" && b !== null) throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n    extendStatics(d, b);\n    function __() {\n      this.constructor = d;\n    }\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n  };\n}();\nvar __importDefault = this && this.__importDefault || function (mod) {\n  return mod && mod.__esModule ? mod : {\n    \"default\": mod\n  };\n};\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nvar wrapped_element_1 = __importDefault(__nested_webpack_require_94820__(730));\nvar WrappedSelect = /** @class */function (_super) {\n  __extends(WrappedSelect, _super);\n  function WrappedSelect(_a) {\n    var element = _a.element,\n      classNames = _a.classNames,\n      template = _a.template;\n    var _this = _super.call(this, {\n      element: element,\n      classNames: classNames\n    }) || this;\n    _this.template = template;\n    return _this;\n  }\n  Object.defineProperty(WrappedSelect.prototype, \"placeholderOption\", {\n    get: function () {\n      return this.element.querySelector('option[value=\"\"]') ||\n      // Backward compatibility layer for the non-standard placeholder attribute supported in older versions.\n      this.element.querySelector('option[placeholder]');\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(WrappedSelect.prototype, \"optionGroups\", {\n    get: function () {\n      return Array.from(this.element.getElementsByTagName('OPTGROUP'));\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(WrappedSelect.prototype, \"options\", {\n    get: function () {\n      return Array.from(this.element.options);\n    },\n    set: function (options) {\n      var _this = this;\n      var fragment = document.createDocumentFragment();\n      var addOptionToFragment = function (data) {\n        // Create a standard select option\n        var option = _this.template(data);\n        // Append it to fragment\n        fragment.appendChild(option);\n      };\n      // Add each list item to list\n      options.forEach(function (optionData) {\n        return addOptionToFragment(optionData);\n      });\n      this.appendDocFragment(fragment);\n    },\n    enumerable: false,\n    configurable: true\n  });\n  WrappedSelect.prototype.appendDocFragment = function (fragment) {\n    this.element.innerHTML = '';\n    this.element.appendChild(fragment);\n  };\n  return WrappedSelect;\n}(wrapped_element_1.default);\nexports[\"default\"] = WrappedSelect;\n\n/***/ }),\n\n/***/ 883:\n/***/ ((__unused_webpack_module, exports) => {\n\n\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.SCROLLING_SPEED = exports.SELECT_MULTIPLE_TYPE = exports.SELECT_ONE_TYPE = exports.TEXT_TYPE = exports.KEY_CODES = exports.ACTION_TYPES = exports.EVENTS = void 0;\nexports.EVENTS = {\n  showDropdown: 'showDropdown',\n  hideDropdown: 'hideDropdown',\n  change: 'change',\n  choice: 'choice',\n  search: 'search',\n  addItem: 'addItem',\n  removeItem: 'removeItem',\n  highlightItem: 'highlightItem',\n  highlightChoice: 'highlightChoice',\n  unhighlightItem: 'unhighlightItem'\n};\nexports.ACTION_TYPES = {\n  ADD_CHOICE: 'ADD_CHOICE',\n  FILTER_CHOICES: 'FILTER_CHOICES',\n  ACTIVATE_CHOICES: 'ACTIVATE_CHOICES',\n  CLEAR_CHOICES: 'CLEAR_CHOICES',\n  ADD_GROUP: 'ADD_GROUP',\n  ADD_ITEM: 'ADD_ITEM',\n  REMOVE_ITEM: 'REMOVE_ITEM',\n  HIGHLIGHT_ITEM: 'HIGHLIGHT_ITEM',\n  CLEAR_ALL: 'CLEAR_ALL',\n  RESET_TO: 'RESET_TO',\n  SET_IS_LOADING: 'SET_IS_LOADING'\n};\nexports.KEY_CODES = {\n  BACK_KEY: 46,\n  DELETE_KEY: 8,\n  ENTER_KEY: 13,\n  A_KEY: 65,\n  ESC_KEY: 27,\n  UP_KEY: 38,\n  DOWN_KEY: 40,\n  PAGE_UP_KEY: 33,\n  PAGE_DOWN_KEY: 34\n};\nexports.TEXT_TYPE = 'text';\nexports.SELECT_ONE_TYPE = 'select-one';\nexports.SELECT_MULTIPLE_TYPE = 'select-multiple';\nexports.SCROLLING_SPEED = 4;\n\n/***/ }),\n\n/***/ 789:\n/***/ ((__unused_webpack_module, exports, __nested_webpack_require_99132__) => {\n\n\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.DEFAULT_CONFIG = exports.DEFAULT_CLASSNAMES = void 0;\nvar utils_1 = __nested_webpack_require_99132__(799);\nexports.DEFAULT_CLASSNAMES = {\n  containerOuter: 'choices',\n  containerInner: 'choices__inner',\n  input: 'choices__input',\n  inputCloned: 'choices__input--cloned',\n  list: 'choices__list',\n  listItems: 'choices__list--multiple',\n  listSingle: 'choices__list--single',\n  listDropdown: 'choices__list--dropdown',\n  item: 'choices__item',\n  itemSelectable: 'choices__item--selectable',\n  itemDisabled: 'choices__item--disabled',\n  itemChoice: 'choices__item--choice',\n  placeholder: 'choices__placeholder',\n  group: 'choices__group',\n  groupHeading: 'choices__heading',\n  button: 'choices__button',\n  activeState: 'is-active',\n  focusState: 'is-focused',\n  openState: 'is-open',\n  disabledState: 'is-disabled',\n  highlightedState: 'is-highlighted',\n  selectedState: 'is-selected',\n  flippedState: 'is-flipped',\n  loadingState: 'is-loading',\n  noResults: 'has-no-results',\n  noChoices: 'has-no-choices'\n};\nexports.DEFAULT_CONFIG = {\n  items: [],\n  choices: [],\n  silent: false,\n  renderChoiceLimit: -1,\n  maxItemCount: -1,\n  addItems: true,\n  addItemFilter: null,\n  removeItems: true,\n  removeItemButton: false,\n  editItems: false,\n  allowHTML: true,\n  duplicateItemsAllowed: true,\n  delimiter: ',',\n  paste: true,\n  searchEnabled: true,\n  searchChoices: true,\n  searchFloor: 1,\n  searchResultLimit: 4,\n  searchFields: ['label', 'value'],\n  position: 'auto',\n  resetScrollPosition: true,\n  shouldSort: true,\n  shouldSortItems: false,\n  sorter: utils_1.sortByAlpha,\n  shadowRoot: null,\n  placeholder: true,\n  placeholderValue: null,\n  searchPlaceholderValue: null,\n  prependValue: null,\n  appendValue: null,\n  renderSelectedChoices: 'auto',\n  loadingText: 'Loading...',\n  noResultsText: 'No results found',\n  noChoicesText: 'No choices to choose from',\n  itemSelectText: 'Press to select',\n  uniqueItemText: 'Only unique values can be added',\n  customAddItemText: 'Only values matching specific conditions can be added',\n  addItemText: function (value) {\n    return \"Press Enter to add <b>\\\"\".concat((0, utils_1.sanitise)(value), \"\\\"</b>\");\n  },\n  maxItemText: function (maxItemCount) {\n    return \"Only \".concat(maxItemCount, \" values can be added\");\n  },\n  valueComparer: function (value1, value2) {\n    return value1 === value2;\n  },\n  fuseOptions: {\n    includeScore: true\n  },\n  labelId: '',\n  callbackOnInit: null,\n  callbackOnCreateTemplates: null,\n  classNames: exports.DEFAULT_CLASSNAMES\n};\n\n/***/ }),\n\n/***/ 18:\n/***/ ((__unused_webpack_module, exports) => {\n\n\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\n/***/ }),\n\n/***/ 978:\n/***/ ((__unused_webpack_module, exports) => {\n\n\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\n/***/ }),\n\n/***/ 948:\n/***/ ((__unused_webpack_module, exports) => {\n\n\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\n/***/ }),\n\n/***/ 359:\n/***/ ((__unused_webpack_module, exports) => {\n\n\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\n/***/ }),\n\n/***/ 285:\n/***/ ((__unused_webpack_module, exports) => {\n\n\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\n/***/ }),\n\n/***/ 533:\n/***/ ((__unused_webpack_module, exports) => {\n\n\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\n/***/ }),\n\n/***/ 187:\n/***/ (function(__unused_webpack_module, exports, __nested_webpack_require_102749__) {\n\n\n\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 = {\n      enumerable: true,\n      get: function () {\n        return m[k];\n      }\n    };\n  }\n  Object.defineProperty(o, k2, desc);\n} : function (o, m, k, k2) {\n  if (k2 === undefined) k2 = k;\n  o[k2] = m[k];\n});\nvar __exportStar = this && this.__exportStar || function (m, exports) {\n  for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);\n};\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n__exportStar(__nested_webpack_require_102749__(18), exports);\n__exportStar(__nested_webpack_require_102749__(978), exports);\n__exportStar(__nested_webpack_require_102749__(948), exports);\n__exportStar(__nested_webpack_require_102749__(359), exports);\n__exportStar(__nested_webpack_require_102749__(285), exports);\n__exportStar(__nested_webpack_require_102749__(533), exports);\n__exportStar(__nested_webpack_require_102749__(287), exports);\n__exportStar(__nested_webpack_require_102749__(132), exports);\n__exportStar(__nested_webpack_require_102749__(837), exports);\n__exportStar(__nested_webpack_require_102749__(598), exports);\n__exportStar(__nested_webpack_require_102749__(369), exports);\n__exportStar(__nested_webpack_require_102749__(37), exports);\n__exportStar(__nested_webpack_require_102749__(47), exports);\n__exportStar(__nested_webpack_require_102749__(923), exports);\n__exportStar(__nested_webpack_require_102749__(876), exports);\n\n/***/ }),\n\n/***/ 287:\n/***/ ((__unused_webpack_module, exports) => {\n\n\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\n/***/ }),\n\n/***/ 132:\n/***/ ((__unused_webpack_module, exports) => {\n\n\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\n/***/ }),\n\n/***/ 837:\n/***/ ((__unused_webpack_module, exports) => {\n\n\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\n/***/ }),\n\n/***/ 598:\n/***/ ((__unused_webpack_module, exports) => {\n\n\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\n/***/ }),\n\n/***/ 37:\n/***/ ((__unused_webpack_module, exports) => {\n\n\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\n/***/ }),\n\n/***/ 369:\n/***/ ((__unused_webpack_module, exports) => {\n\n\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\n/***/ }),\n\n/***/ 47:\n/***/ ((__unused_webpack_module, exports) => {\n\n\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\n/***/ }),\n\n/***/ 923:\n/***/ ((__unused_webpack_module, exports) => {\n\n\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\n/***/ }),\n\n/***/ 876:\n/***/ ((__unused_webpack_module, exports) => {\n\n\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\n/***/ }),\n\n/***/ 799:\n/***/ ((__unused_webpack_module, exports) => {\n\n\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.parseCustomProperties = exports.diff = exports.cloneObject = exports.existsInArray = exports.dispatchEvent = exports.sortByScore = exports.sortByAlpha = exports.strToEl = exports.sanitise = exports.isScrolledIntoView = exports.getAdjacentEl = exports.wrap = exports.isType = exports.getType = exports.generateId = exports.generateChars = exports.getRandomNumber = void 0;\nvar getRandomNumber = function (min, max) {\n  return Math.floor(Math.random() * (max - min) + min);\n};\nexports.getRandomNumber = getRandomNumber;\nvar generateChars = function (length) {\n  return Array.from({\n    length: length\n  }, function () {\n    return (0, exports.getRandomNumber)(0, 36).toString(36);\n  }).join('');\n};\nexports.generateChars = generateChars;\nvar generateId = function (element, prefix) {\n  var id = element.id || element.name && \"\".concat(element.name, \"-\").concat((0, exports.generateChars)(2)) || (0, exports.generateChars)(4);\n  id = id.replace(/(:|\\.|\\[|\\]|,)/g, '');\n  id = \"\".concat(prefix, \"-\").concat(id);\n  return id;\n};\nexports.generateId = generateId;\nvar getType = function (obj) {\n  return Object.prototype.toString.call(obj).slice(8, -1);\n};\nexports.getType = getType;\nvar isType = function (type, obj) {\n  return obj !== undefined && obj !== null && (0, exports.getType)(obj) === type;\n};\nexports.isType = isType;\nvar wrap = function (element, wrapper) {\n  if (wrapper === void 0) {\n    wrapper = document.createElement('div');\n  }\n  if (element.parentNode) {\n    if (element.nextSibling) {\n      element.parentNode.insertBefore(wrapper, element.nextSibling);\n    } else {\n      element.parentNode.appendChild(wrapper);\n    }\n  }\n  return wrapper.appendChild(element);\n};\nexports.wrap = wrap;\nvar getAdjacentEl = function (startEl, selector, direction) {\n  if (direction === void 0) {\n    direction = 1;\n  }\n  var prop = \"\".concat(direction > 0 ? 'next' : 'previous', \"ElementSibling\");\n  var sibling = startEl[prop];\n  while (sibling) {\n    if (sibling.matches(selector)) {\n      return sibling;\n    }\n    sibling = sibling[prop];\n  }\n  return sibling;\n};\nexports.getAdjacentEl = getAdjacentEl;\nvar isScrolledIntoView = function (element, parent, direction) {\n  if (direction === void 0) {\n    direction = 1;\n  }\n  if (!element) {\n    return false;\n  }\n  var isVisible;\n  if (direction > 0) {\n    // In view from bottom\n    isVisible = parent.scrollTop + parent.offsetHeight >= element.offsetTop + element.offsetHeight;\n  } else {\n    // In view from top\n    isVisible = element.offsetTop >= parent.scrollTop;\n  }\n  return isVisible;\n};\nexports.isScrolledIntoView = isScrolledIntoView;\nvar sanitise = function (value) {\n  if (typeof value !== 'string') {\n    return value;\n  }\n  return value.replace(/&/g, '&amp;').replace(/>/g, '&gt;').replace(/</g, '&lt;').replace(/\"/g, '&quot;');\n};\nexports.sanitise = sanitise;\nexports.strToEl = function () {\n  var tmpEl = document.createElement('div');\n  return function (str) {\n    var cleanedInput = str.trim();\n    tmpEl.innerHTML = cleanedInput;\n    var firldChild = tmpEl.children[0];\n    while (tmpEl.firstChild) {\n      tmpEl.removeChild(tmpEl.firstChild);\n    }\n    return firldChild;\n  };\n}();\nvar sortByAlpha = function (_a, _b) {\n  var value = _a.value,\n    _c = _a.label,\n    label = _c === void 0 ? value : _c;\n  var value2 = _b.value,\n    _d = _b.label,\n    label2 = _d === void 0 ? value2 : _d;\n  return label.localeCompare(label2, [], {\n    sensitivity: 'base',\n    ignorePunctuation: true,\n    numeric: true\n  });\n};\nexports.sortByAlpha = sortByAlpha;\nvar sortByScore = function (a, b) {\n  var _a = a.score,\n    scoreA = _a === void 0 ? 0 : _a;\n  var _b = b.score,\n    scoreB = _b === void 0 ? 0 : _b;\n  return scoreA - scoreB;\n};\nexports.sortByScore = sortByScore;\nvar dispatchEvent = function (element, type, customArgs) {\n  if (customArgs === void 0) {\n    customArgs = null;\n  }\n  var event = new CustomEvent(type, {\n    detail: customArgs,\n    bubbles: true,\n    cancelable: true\n  });\n  return element.dispatchEvent(event);\n};\nexports.dispatchEvent = dispatchEvent;\nvar existsInArray = function (array, value, key) {\n  if (key === void 0) {\n    key = 'value';\n  }\n  return array.some(function (item) {\n    if (typeof value === 'string') {\n      return item[key] === value.trim();\n    }\n    return item[key] === value;\n  });\n};\nexports.existsInArray = existsInArray;\nvar cloneObject = function (obj) {\n  return JSON.parse(JSON.stringify(obj));\n};\nexports.cloneObject = cloneObject;\n/**\n * Returns an array of keys present on the first but missing on the second object\n */\nvar diff = function (a, b) {\n  var aKeys = Object.keys(a).sort();\n  var bKeys = Object.keys(b).sort();\n  return aKeys.filter(function (i) {\n    return bKeys.indexOf(i) < 0;\n  });\n};\nexports.diff = diff;\nvar parseCustomProperties = function (customProperties) {\n  if (typeof customProperties !== 'undefined') {\n    try {\n      return JSON.parse(customProperties);\n    } catch (e) {\n      return customProperties;\n    }\n  }\n  return {};\n};\nexports.parseCustomProperties = parseCustomProperties;\n\n/***/ }),\n\n/***/ 273:\n/***/ (function(__unused_webpack_module, exports) {\n\n\n\nvar __spreadArray = this && this.__spreadArray || function (to, from, pack) {\n  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n    if (ar || !(i in from)) {\n      if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n      ar[i] = from[i];\n    }\n  }\n  return to.concat(ar || Array.prototype.slice.call(from));\n};\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.defaultState = void 0;\nexports.defaultState = [];\nfunction choices(state, action) {\n  if (state === void 0) {\n    state = exports.defaultState;\n  }\n  if (action === void 0) {\n    action = {};\n  }\n  switch (action.type) {\n    case 'ADD_CHOICE':\n      {\n        var addChoiceAction = action;\n        var choice = {\n          id: addChoiceAction.id,\n          elementId: addChoiceAction.elementId,\n          groupId: addChoiceAction.groupId,\n          value: addChoiceAction.value,\n          label: addChoiceAction.label || addChoiceAction.value,\n          disabled: addChoiceAction.disabled || false,\n          selected: false,\n          active: true,\n          score: 9999,\n          customProperties: addChoiceAction.customProperties,\n          placeholder: addChoiceAction.placeholder || false\n        };\n        /*\n          A disabled choice appears in the choice dropdown but cannot be selected\n          A selected choice has been added to the passed input's value (added as an item)\n          An active choice appears within the choice dropdown\n        */\n        return __spreadArray(__spreadArray([], state, true), [choice], false);\n      }\n    case 'ADD_ITEM':\n      {\n        var addItemAction_1 = action;\n        // When an item is added and it has an associated choice,\n        // we want to disable it so it can't be chosen again\n        if (addItemAction_1.choiceId > -1) {\n          return state.map(function (obj) {\n            var choice = obj;\n            if (choice.id === parseInt(\"\".concat(addItemAction_1.choiceId), 10)) {\n              choice.selected = true;\n            }\n            return choice;\n          });\n        }\n        return state;\n      }\n    case 'REMOVE_ITEM':\n      {\n        var removeItemAction_1 = action;\n        // When an item is removed and it has an associated choice,\n        // we want to re-enable it so it can be chosen again\n        if (removeItemAction_1.choiceId && removeItemAction_1.choiceId > -1) {\n          return state.map(function (obj) {\n            var choice = obj;\n            if (choice.id === parseInt(\"\".concat(removeItemAction_1.choiceId), 10)) {\n              choice.selected = false;\n            }\n            return choice;\n          });\n        }\n        return state;\n      }\n    case 'FILTER_CHOICES':\n      {\n        var filterChoicesAction_1 = action;\n        return state.map(function (obj) {\n          var choice = obj;\n          // Set active state based on whether choice is\n          // within filtered results\n          choice.active = filterChoicesAction_1.results.some(function (_a) {\n            var item = _a.item,\n              score = _a.score;\n            if (item.id === choice.id) {\n              choice.score = score;\n              return true;\n            }\n            return false;\n          });\n          return choice;\n        });\n      }\n    case 'ACTIVATE_CHOICES':\n      {\n        var activateChoicesAction_1 = action;\n        return state.map(function (obj) {\n          var choice = obj;\n          choice.active = activateChoicesAction_1.active;\n          return choice;\n        });\n      }\n    case 'CLEAR_CHOICES':\n      {\n        return exports.defaultState;\n      }\n    default:\n      {\n        return state;\n      }\n  }\n}\nexports[\"default\"] = choices;\n\n/***/ }),\n\n/***/ 871:\n/***/ (function(__unused_webpack_module, exports) {\n\n\n\nvar __spreadArray = this && this.__spreadArray || function (to, from, pack) {\n  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n    if (ar || !(i in from)) {\n      if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n      ar[i] = from[i];\n    }\n  }\n  return to.concat(ar || Array.prototype.slice.call(from));\n};\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.defaultState = void 0;\nexports.defaultState = [];\nfunction groups(state, action) {\n  if (state === void 0) {\n    state = exports.defaultState;\n  }\n  if (action === void 0) {\n    action = {};\n  }\n  switch (action.type) {\n    case 'ADD_GROUP':\n      {\n        var addGroupAction = action;\n        return __spreadArray(__spreadArray([], state, true), [{\n          id: addGroupAction.id,\n          value: addGroupAction.value,\n          active: addGroupAction.active,\n          disabled: addGroupAction.disabled\n        }], false);\n      }\n    case 'CLEAR_CHOICES':\n      {\n        return [];\n      }\n    default:\n      {\n        return state;\n      }\n  }\n}\nexports[\"default\"] = groups;\n\n/***/ }),\n\n/***/ 655:\n/***/ (function(__unused_webpack_module, exports, __nested_webpack_require_115791__) {\n\n\n\nvar __importDefault = this && this.__importDefault || function (mod) {\n  return mod && mod.__esModule ? mod : {\n    \"default\": mod\n  };\n};\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.defaultState = void 0;\nvar redux_1 = __nested_webpack_require_115791__(791);\nvar items_1 = __importDefault(__nested_webpack_require_115791__(52));\nvar groups_1 = __importDefault(__nested_webpack_require_115791__(871));\nvar choices_1 = __importDefault(__nested_webpack_require_115791__(273));\nvar loading_1 = __importDefault(__nested_webpack_require_115791__(502));\nvar utils_1 = __nested_webpack_require_115791__(799);\nexports.defaultState = {\n  groups: [],\n  items: [],\n  choices: [],\n  loading: false\n};\nvar appReducer = (0, redux_1.combineReducers)({\n  items: items_1.default,\n  groups: groups_1.default,\n  choices: choices_1.default,\n  loading: loading_1.default\n});\nvar rootReducer = function (passedState, action) {\n  var state = passedState;\n  // If we are clearing all items, groups and options we reassign\n  // state and then pass that state to our proper reducer. This isn't\n  // mutating our actual state\n  // See: http://stackoverflow.com/a/35641992\n  if (action.type === 'CLEAR_ALL') {\n    state = exports.defaultState;\n  } else if (action.type === 'RESET_TO') {\n    return (0, utils_1.cloneObject)(action.state);\n  }\n  return appReducer(state, action);\n};\nexports[\"default\"] = rootReducer;\n\n/***/ }),\n\n/***/ 52:\n/***/ (function(__unused_webpack_module, exports) {\n\n\n\nvar __spreadArray = this && this.__spreadArray || function (to, from, pack) {\n  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n    if (ar || !(i in from)) {\n      if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n      ar[i] = from[i];\n    }\n  }\n  return to.concat(ar || Array.prototype.slice.call(from));\n};\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.defaultState = void 0;\nexports.defaultState = [];\nfunction items(state, action) {\n  if (state === void 0) {\n    state = exports.defaultState;\n  }\n  if (action === void 0) {\n    action = {};\n  }\n  switch (action.type) {\n    case 'ADD_ITEM':\n      {\n        var addItemAction = action;\n        // Add object to items array\n        var newState = __spreadArray(__spreadArray([], state, true), [{\n          id: addItemAction.id,\n          choiceId: addItemAction.choiceId,\n          groupId: addItemAction.groupId,\n          value: addItemAction.value,\n          label: addItemAction.label,\n          active: true,\n          highlighted: false,\n          customProperties: addItemAction.customProperties,\n          placeholder: addItemAction.placeholder || false,\n          keyCode: null\n        }], false);\n        return newState.map(function (obj) {\n          var item = obj;\n          item.highlighted = false;\n          return item;\n        });\n      }\n    case 'REMOVE_ITEM':\n      {\n        // Set item to inactive\n        return state.map(function (obj) {\n          var item = obj;\n          if (item.id === action.id) {\n            item.active = false;\n          }\n          return item;\n        });\n      }\n    case 'HIGHLIGHT_ITEM':\n      {\n        var highlightItemAction_1 = action;\n        return state.map(function (obj) {\n          var item = obj;\n          if (item.id === highlightItemAction_1.id) {\n            item.highlighted = highlightItemAction_1.highlighted;\n          }\n          return item;\n        });\n      }\n    default:\n      {\n        return state;\n      }\n  }\n}\nexports[\"default\"] = items;\n\n/***/ }),\n\n/***/ 502:\n/***/ ((__unused_webpack_module, exports) => {\n\n\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.defaultState = void 0;\nexports.defaultState = false;\nvar general = function (state, action) {\n  if (state === void 0) {\n    state = exports.defaultState;\n  }\n  if (action === void 0) {\n    action = {};\n  }\n  switch (action.type) {\n    case 'SET_IS_LOADING':\n      {\n        return action.isLoading;\n      }\n    default:\n      {\n        return state;\n      }\n  }\n};\nexports[\"default\"] = general;\n\n/***/ }),\n\n/***/ 744:\n/***/ (function(__unused_webpack_module, exports, __nested_webpack_require_119892__) {\n\n\n\nvar __spreadArray = this && this.__spreadArray || function (to, from, pack) {\n  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n    if (ar || !(i in from)) {\n      if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n      ar[i] = from[i];\n    }\n  }\n  return to.concat(ar || Array.prototype.slice.call(from));\n};\nvar __importDefault = this && this.__importDefault || function (mod) {\n  return mod && mod.__esModule ? mod : {\n    \"default\": mod\n  };\n};\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n/* eslint-disable @typescript-eslint/no-explicit-any */\nvar redux_1 = __nested_webpack_require_119892__(791);\nvar index_1 = __importDefault(__nested_webpack_require_119892__(655));\nvar Store = /** @class */function () {\n  function Store() {\n    this._store = (0, redux_1.createStore)(index_1.default, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());\n  }\n  /**\n   * Subscribe store to function call (wrapped Redux method)\n   */\n  Store.prototype.subscribe = function (onChange) {\n    this._store.subscribe(onChange);\n  };\n  /**\n   * Dispatch event to store (wrapped Redux method)\n   */\n  Store.prototype.dispatch = function (action) {\n    this._store.dispatch(action);\n  };\n  Object.defineProperty(Store.prototype, \"state\", {\n    /**\n     * Get store object (wrapping Redux method)\n     */\n    get: function () {\n      return this._store.getState();\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(Store.prototype, \"items\", {\n    /**\n     * Get items from store\n     */\n    get: function () {\n      return this.state.items;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(Store.prototype, \"activeItems\", {\n    /**\n     * Get active items from store\n     */\n    get: function () {\n      return this.items.filter(function (item) {\n        return item.active === true;\n      });\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(Store.prototype, \"highlightedActiveItems\", {\n    /**\n     * Get highlighted items from store\n     */\n    get: function () {\n      return this.items.filter(function (item) {\n        return item.active && item.highlighted;\n      });\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(Store.prototype, \"choices\", {\n    /**\n     * Get choices from store\n     */\n    get: function () {\n      return this.state.choices;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(Store.prototype, \"activeChoices\", {\n    /**\n     * Get active choices from store\n     */\n    get: function () {\n      return this.choices.filter(function (choice) {\n        return choice.active === true;\n      });\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(Store.prototype, \"selectableChoices\", {\n    /**\n     * Get selectable choices from store\n     */\n    get: function () {\n      return this.choices.filter(function (choice) {\n        return choice.disabled !== true;\n      });\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(Store.prototype, \"searchableChoices\", {\n    /**\n     * Get choices that can be searched (excluding placeholders)\n     */\n    get: function () {\n      return this.selectableChoices.filter(function (choice) {\n        return choice.placeholder !== true;\n      });\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(Store.prototype, \"placeholderChoice\", {\n    /**\n     * Get placeholder choice from store\n     */\n    get: function () {\n      return __spreadArray([], this.choices, true).reverse().find(function (choice) {\n        return choice.placeholder === true;\n      });\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(Store.prototype, \"groups\", {\n    /**\n     * Get groups from store\n     */\n    get: function () {\n      return this.state.groups;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(Store.prototype, \"activeGroups\", {\n    /**\n     * Get active groups from store\n     */\n    get: function () {\n      var _a = this,\n        groups = _a.groups,\n        choices = _a.choices;\n      return groups.filter(function (group) {\n        var isActive = group.active === true && group.disabled === false;\n        var hasActiveOptions = choices.some(function (choice) {\n          return choice.active === true && choice.disabled === false;\n        });\n        return isActive && hasActiveOptions;\n      }, []);\n    },\n    enumerable: false,\n    configurable: true\n  });\n  /**\n   * Get loading state from store\n   */\n  Store.prototype.isLoading = function () {\n    return this.state.loading;\n  };\n  /**\n   * Get single choice by it's ID\n   */\n  Store.prototype.getChoiceById = function (id) {\n    return this.activeChoices.find(function (choice) {\n      return choice.id === parseInt(id, 10);\n    });\n  };\n  /**\n   * Get group by group id\n   */\n  Store.prototype.getGroupById = function (id) {\n    return this.groups.find(function (group) {\n      return group.id === id;\n    });\n  };\n  return Store;\n}();\nexports[\"default\"] = Store;\n\n/***/ }),\n\n/***/ 686:\n/***/ ((__unused_webpack_module, exports) => {\n\n\n\n/**\n * Helpers to create HTML elements used by Choices\n * Can be overridden by providing `callbackOnCreateTemplates` option\n */\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nvar templates = {\n  containerOuter: function (_a, dir, isSelectElement, isSelectOneElement, searchEnabled, passedElementType, labelId) {\n    var containerOuter = _a.classNames.containerOuter;\n    var div = Object.assign(document.createElement('div'), {\n      className: containerOuter\n    });\n    div.dataset.type = passedElementType;\n    if (dir) {\n      div.dir = dir;\n    }\n    if (isSelectOneElement) {\n      div.tabIndex = 0;\n    }\n    if (isSelectElement) {\n      div.setAttribute('role', searchEnabled ? 'combobox' : 'listbox');\n      if (searchEnabled) {\n        div.setAttribute('aria-autocomplete', 'list');\n      }\n    }\n    div.setAttribute('aria-haspopup', 'true');\n    div.setAttribute('aria-expanded', 'false');\n    if (labelId) {\n      div.setAttribute('aria-labelledby', labelId);\n    }\n    return div;\n  },\n  containerInner: function (_a) {\n    var containerInner = _a.classNames.containerInner;\n    return Object.assign(document.createElement('div'), {\n      className: containerInner\n    });\n  },\n  itemList: function (_a, isSelectOneElement) {\n    var _b = _a.classNames,\n      list = _b.list,\n      listSingle = _b.listSingle,\n      listItems = _b.listItems;\n    return Object.assign(document.createElement('div'), {\n      className: \"\".concat(list, \" \").concat(isSelectOneElement ? listSingle : listItems)\n    });\n  },\n  placeholder: function (_a, value) {\n    var _b;\n    var allowHTML = _a.allowHTML,\n      placeholder = _a.classNames.placeholder;\n    return Object.assign(document.createElement('div'), (_b = {\n      className: placeholder\n    }, _b[allowHTML ? 'innerHTML' : 'innerText'] = value, _b));\n  },\n  item: function (_a, _b, removeItemButton) {\n    var _c, _d;\n    var allowHTML = _a.allowHTML,\n      _e = _a.classNames,\n      item = _e.item,\n      button = _e.button,\n      highlightedState = _e.highlightedState,\n      itemSelectable = _e.itemSelectable,\n      placeholder = _e.placeholder;\n    var id = _b.id,\n      value = _b.value,\n      label = _b.label,\n      customProperties = _b.customProperties,\n      active = _b.active,\n      disabled = _b.disabled,\n      highlighted = _b.highlighted,\n      isPlaceholder = _b.placeholder;\n    var div = Object.assign(document.createElement('div'), (_c = {\n      className: item\n    }, _c[allowHTML ? 'innerHTML' : 'innerText'] = label, _c));\n    Object.assign(div.dataset, {\n      item: '',\n      id: id,\n      value: value,\n      customProperties: customProperties\n    });\n    if (active) {\n      div.setAttribute('aria-selected', 'true');\n    }\n    if (disabled) {\n      div.setAttribute('aria-disabled', 'true');\n    }\n    if (isPlaceholder) {\n      div.classList.add(placeholder);\n    }\n    div.classList.add(highlighted ? highlightedState : itemSelectable);\n    if (removeItemButton) {\n      if (disabled) {\n        div.classList.remove(itemSelectable);\n      }\n      div.dataset.deletable = '';\n      /** @todo This MUST be localizable, not hardcoded! */\n      var REMOVE_ITEM_TEXT = 'Remove item';\n      var removeButton = Object.assign(document.createElement('button'), (_d = {\n        type: 'button',\n        className: button\n      }, _d[allowHTML ? 'innerHTML' : 'innerText'] = REMOVE_ITEM_TEXT, _d));\n      removeButton.setAttribute('aria-label', \"\".concat(REMOVE_ITEM_TEXT, \": '\").concat(value, \"'\"));\n      removeButton.dataset.button = '';\n      div.appendChild(removeButton);\n    }\n    return div;\n  },\n  choiceList: function (_a, isSelectOneElement) {\n    var list = _a.classNames.list;\n    var div = Object.assign(document.createElement('div'), {\n      className: list\n    });\n    if (!isSelectOneElement) {\n      div.setAttribute('aria-multiselectable', 'true');\n    }\n    div.setAttribute('role', 'listbox');\n    return div;\n  },\n  choiceGroup: function (_a, _b) {\n    var _c;\n    var allowHTML = _a.allowHTML,\n      _d = _a.classNames,\n      group = _d.group,\n      groupHeading = _d.groupHeading,\n      itemDisabled = _d.itemDisabled;\n    var id = _b.id,\n      value = _b.value,\n      disabled = _b.disabled;\n    var div = Object.assign(document.createElement('div'), {\n      className: \"\".concat(group, \" \").concat(disabled ? itemDisabled : '')\n    });\n    div.setAttribute('role', 'group');\n    Object.assign(div.dataset, {\n      group: '',\n      id: id,\n      value: value\n    });\n    if (disabled) {\n      div.setAttribute('aria-disabled', 'true');\n    }\n    div.appendChild(Object.assign(document.createElement('div'), (_c = {\n      className: groupHeading\n    }, _c[allowHTML ? 'innerHTML' : 'innerText'] = value, _c)));\n    return div;\n  },\n  choice: function (_a, _b, selectText) {\n    var _c;\n    var allowHTML = _a.allowHTML,\n      _d = _a.classNames,\n      item = _d.item,\n      itemChoice = _d.itemChoice,\n      itemSelectable = _d.itemSelectable,\n      selectedState = _d.selectedState,\n      itemDisabled = _d.itemDisabled,\n      placeholder = _d.placeholder;\n    var id = _b.id,\n      value = _b.value,\n      label = _b.label,\n      groupId = _b.groupId,\n      elementId = _b.elementId,\n      isDisabled = _b.disabled,\n      isSelected = _b.selected,\n      isPlaceholder = _b.placeholder;\n    var div = Object.assign(document.createElement('div'), (_c = {\n      id: elementId\n    }, _c[allowHTML ? 'innerHTML' : 'innerText'] = label, _c.className = \"\".concat(item, \" \").concat(itemChoice), _c));\n    if (isSelected) {\n      div.classList.add(selectedState);\n    }\n    if (isPlaceholder) {\n      div.classList.add(placeholder);\n    }\n    div.setAttribute('role', groupId && groupId > 0 ? 'treeitem' : 'option');\n    Object.assign(div.dataset, {\n      choice: '',\n      id: id,\n      value: value,\n      selectText: selectText\n    });\n    if (isDisabled) {\n      div.classList.add(itemDisabled);\n      div.dataset.choiceDisabled = '';\n      div.setAttribute('aria-disabled', 'true');\n    } else {\n      div.classList.add(itemSelectable);\n      div.dataset.choiceSelectable = '';\n    }\n    return div;\n  },\n  input: function (_a, placeholderValue) {\n    var _b = _a.classNames,\n      input = _b.input,\n      inputCloned = _b.inputCloned;\n    var inp = Object.assign(document.createElement('input'), {\n      type: 'text',\n      name: 'search_terms',\n      className: \"\".concat(input, \" \").concat(inputCloned),\n      autocomplete: 'off',\n      autocapitalize: 'off',\n      spellcheck: false\n    });\n    inp.setAttribute('role', 'textbox');\n    inp.setAttribute('aria-autocomplete', 'list');\n    inp.setAttribute('aria-label', placeholderValue);\n    return inp;\n  },\n  dropdown: function (_a) {\n    var _b = _a.classNames,\n      list = _b.list,\n      listDropdown = _b.listDropdown;\n    var div = document.createElement('div');\n    div.classList.add(list, listDropdown);\n    div.setAttribute('aria-expanded', 'false');\n    return div;\n  },\n  notice: function (_a, innerText, type) {\n    var _b;\n    var allowHTML = _a.allowHTML,\n      _c = _a.classNames,\n      item = _c.item,\n      itemChoice = _c.itemChoice,\n      noResults = _c.noResults,\n      noChoices = _c.noChoices;\n    if (type === void 0) {\n      type = '';\n    }\n    var classes = [item, itemChoice];\n    if (type === 'no-choices') {\n      classes.push(noChoices);\n    } else if (type === 'no-results') {\n      classes.push(noResults);\n    }\n    return Object.assign(document.createElement('div'), (_b = {}, _b[allowHTML ? 'innerHTML' : 'innerText'] = innerText, _b.className = classes.join(' '), _b));\n  },\n  option: function (_a) {\n    var label = _a.label,\n      value = _a.value,\n      customProperties = _a.customProperties,\n      active = _a.active,\n      disabled = _a.disabled;\n    var opt = new Option(label, value, false, active);\n    if (customProperties) {\n      opt.dataset.customProperties = \"\".concat(customProperties);\n    }\n    opt.disabled = !!disabled;\n    return opt;\n  }\n};\nexports[\"default\"] = templates;\n\n/***/ }),\n\n/***/ 996:\n/***/ ((module) => {\n\n\n\nvar isMergeableObject = function isMergeableObject(value) {\n\treturn isNonNullObject(value)\n\t\t&& !isSpecial(value)\n};\n\nfunction isNonNullObject(value) {\n\treturn !!value && typeof value === 'object'\n}\n\nfunction isSpecial(value) {\n\tvar stringValue = Object.prototype.toString.call(value);\n\n\treturn stringValue === '[object RegExp]'\n\t\t|| stringValue === '[object Date]'\n\t\t|| isReactElement(value)\n}\n\n// see https://github.com/facebook/react/blob/b5ac963fb791d1298e7f396236383bc955f916c1/src/isomorphic/classic/element/ReactElement.js#L21-L25\nvar canUseSymbol = typeof Symbol === 'function' && Symbol.for;\nvar REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for('react.element') : 0xeac7;\n\nfunction isReactElement(value) {\n\treturn value.$$typeof === REACT_ELEMENT_TYPE\n}\n\nfunction emptyTarget(val) {\n\treturn Array.isArray(val) ? [] : {}\n}\n\nfunction cloneUnlessOtherwiseSpecified(value, options) {\n\treturn (options.clone !== false && options.isMergeableObject(value))\n\t\t? deepmerge(emptyTarget(value), value, options)\n\t\t: value\n}\n\nfunction defaultArrayMerge(target, source, options) {\n\treturn target.concat(source).map(function(element) {\n\t\treturn cloneUnlessOtherwiseSpecified(element, options)\n\t})\n}\n\nfunction getMergeFunction(key, options) {\n\tif (!options.customMerge) {\n\t\treturn deepmerge\n\t}\n\tvar customMerge = options.customMerge(key);\n\treturn typeof customMerge === 'function' ? customMerge : deepmerge\n}\n\nfunction getEnumerableOwnPropertySymbols(target) {\n\treturn Object.getOwnPropertySymbols\n\t\t? Object.getOwnPropertySymbols(target).filter(function(symbol) {\n\t\t\treturn target.propertyIsEnumerable(symbol)\n\t\t})\n\t\t: []\n}\n\nfunction getKeys(target) {\n\treturn Object.keys(target).concat(getEnumerableOwnPropertySymbols(target))\n}\n\nfunction propertyIsOnObject(object, property) {\n\ttry {\n\t\treturn property in object\n\t} catch(_) {\n\t\treturn false\n\t}\n}\n\n// Protects from prototype poisoning and unexpected merging up the prototype chain.\nfunction propertyIsUnsafe(target, key) {\n\treturn propertyIsOnObject(target, key) // Properties are safe to merge if they don't exist in the target yet,\n\t\t&& !(Object.hasOwnProperty.call(target, key) // unsafe if they exist up the prototype chain,\n\t\t\t&& Object.propertyIsEnumerable.call(target, key)) // and also unsafe if they're nonenumerable.\n}\n\nfunction mergeObject(target, source, options) {\n\tvar destination = {};\n\tif (options.isMergeableObject(target)) {\n\t\tgetKeys(target).forEach(function(key) {\n\t\t\tdestination[key] = cloneUnlessOtherwiseSpecified(target[key], options);\n\t\t});\n\t}\n\tgetKeys(source).forEach(function(key) {\n\t\tif (propertyIsUnsafe(target, key)) {\n\t\t\treturn\n\t\t}\n\n\t\tif (propertyIsOnObject(target, key) && options.isMergeableObject(source[key])) {\n\t\t\tdestination[key] = getMergeFunction(key, options)(target[key], source[key], options);\n\t\t} else {\n\t\t\tdestination[key] = cloneUnlessOtherwiseSpecified(source[key], options);\n\t\t}\n\t});\n\treturn destination\n}\n\nfunction deepmerge(target, source, options) {\n\toptions = options || {};\n\toptions.arrayMerge = options.arrayMerge || defaultArrayMerge;\n\toptions.isMergeableObject = options.isMergeableObject || isMergeableObject;\n\t// cloneUnlessOtherwiseSpecified is added to `options` so that custom arrayMerge()\n\t// implementations can use it. The caller may not replace it.\n\toptions.cloneUnlessOtherwiseSpecified = cloneUnlessOtherwiseSpecified;\n\n\tvar sourceIsArray = Array.isArray(source);\n\tvar targetIsArray = Array.isArray(target);\n\tvar sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;\n\n\tif (!sourceAndTargetTypesMatch) {\n\t\treturn cloneUnlessOtherwiseSpecified(source, options)\n\t} else if (sourceIsArray) {\n\t\treturn options.arrayMerge(target, source, options)\n\t} else {\n\t\treturn mergeObject(target, source, options)\n\t}\n}\n\ndeepmerge.all = function deepmergeAll(array, options) {\n\tif (!Array.isArray(array)) {\n\t\tthrow new Error('first argument should be an array')\n\t}\n\n\treturn array.reduce(function(prev, next) {\n\t\treturn deepmerge(prev, next, options)\n\t}, {})\n};\n\nvar deepmerge_1 = deepmerge;\n\nmodule.exports = deepmerge_1;\n\n\n/***/ }),\n\n/***/ 221:\n/***/ ((__unused_webpack_module, __nested_webpack_exports__, __nested_webpack_require_137291__) => {\n\n__nested_webpack_require_137291__.r(__nested_webpack_exports__);\n/* harmony export */ __nested_webpack_require_137291__.d(__nested_webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ Fuse)\n/* harmony export */ });\n/**\n * Fuse.js v6.6.2 - Lightweight fuzzy-search (http://fusejs.io)\n *\n * Copyright (c) 2022 Kiro Risk (http://kiro.me)\n * All Rights Reserved. Apache Software License 2.0\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n */\n\nfunction isArray(value) {\n  return !Array.isArray\n    ? getTag(value) === '[object Array]'\n    : Array.isArray(value)\n}\n\n// Adapted from: https://github.com/lodash/lodash/blob/master/.internal/baseToString.js\nconst INFINITY = 1 / 0;\nfunction baseToString(value) {\n  // Exit early for strings to avoid a performance hit in some environments.\n  if (typeof value == 'string') {\n    return value\n  }\n  let result = value + '';\n  return result == '0' && 1 / value == -INFINITY ? '-0' : result\n}\n\nfunction toString(value) {\n  return value == null ? '' : baseToString(value)\n}\n\nfunction isString(value) {\n  return typeof value === 'string'\n}\n\nfunction isNumber(value) {\n  return typeof value === 'number'\n}\n\n// Adapted from: https://github.com/lodash/lodash/blob/master/isBoolean.js\nfunction isBoolean(value) {\n  return (\n    value === true ||\n    value === false ||\n    (isObjectLike(value) && getTag(value) == '[object Boolean]')\n  )\n}\n\nfunction isObject(value) {\n  return typeof value === 'object'\n}\n\n// Checks if `value` is object-like.\nfunction isObjectLike(value) {\n  return isObject(value) && value !== null\n}\n\nfunction isDefined(value) {\n  return value !== undefined && value !== null\n}\n\nfunction isBlank(value) {\n  return !value.trim().length\n}\n\n// Gets the `toStringTag` of `value`.\n// Adapted from: https://github.com/lodash/lodash/blob/master/.internal/getTag.js\nfunction getTag(value) {\n  return value == null\n    ? value === undefined\n      ? '[object Undefined]'\n      : '[object Null]'\n    : Object.prototype.toString.call(value)\n}\n\nconst EXTENDED_SEARCH_UNAVAILABLE = 'Extended search is not available';\n\nconst INCORRECT_INDEX_TYPE = \"Incorrect 'index' type\";\n\nconst LOGICAL_SEARCH_INVALID_QUERY_FOR_KEY = (key) =>\n  `Invalid value for key ${key}`;\n\nconst PATTERN_LENGTH_TOO_LARGE = (max) =>\n  `Pattern length exceeds max of ${max}.`;\n\nconst MISSING_KEY_PROPERTY = (name) => `Missing ${name} property in key`;\n\nconst INVALID_KEY_WEIGHT_VALUE = (key) =>\n  `Property 'weight' in key '${key}' must be a positive integer`;\n\nconst hasOwn = Object.prototype.hasOwnProperty;\n\nclass KeyStore {\n  constructor(keys) {\n    this._keys = [];\n    this._keyMap = {};\n\n    let totalWeight = 0;\n\n    keys.forEach((key) => {\n      let obj = createKey(key);\n\n      totalWeight += obj.weight;\n\n      this._keys.push(obj);\n      this._keyMap[obj.id] = obj;\n\n      totalWeight += obj.weight;\n    });\n\n    // Normalize weights so that their sum is equal to 1\n    this._keys.forEach((key) => {\n      key.weight /= totalWeight;\n    });\n  }\n  get(keyId) {\n    return this._keyMap[keyId]\n  }\n  keys() {\n    return this._keys\n  }\n  toJSON() {\n    return JSON.stringify(this._keys)\n  }\n}\n\nfunction createKey(key) {\n  let path = null;\n  let id = null;\n  let src = null;\n  let weight = 1;\n  let getFn = null;\n\n  if (isString(key) || isArray(key)) {\n    src = key;\n    path = createKeyPath(key);\n    id = createKeyId(key);\n  } else {\n    if (!hasOwn.call(key, 'name')) {\n      throw new Error(MISSING_KEY_PROPERTY('name'))\n    }\n\n    const name = key.name;\n    src = name;\n\n    if (hasOwn.call(key, 'weight')) {\n      weight = key.weight;\n\n      if (weight <= 0) {\n        throw new Error(INVALID_KEY_WEIGHT_VALUE(name))\n      }\n    }\n\n    path = createKeyPath(name);\n    id = createKeyId(name);\n    getFn = key.getFn;\n  }\n\n  return { path, id, weight, src, getFn }\n}\n\nfunction createKeyPath(key) {\n  return isArray(key) ? key : key.split('.')\n}\n\nfunction createKeyId(key) {\n  return isArray(key) ? key.join('.') : key\n}\n\nfunction get(obj, path) {\n  let list = [];\n  let arr = false;\n\n  const deepGet = (obj, path, index) => {\n    if (!isDefined(obj)) {\n      return\n    }\n    if (!path[index]) {\n      // If there's no path left, we've arrived at the object we care about.\n      list.push(obj);\n    } else {\n      let key = path[index];\n\n      const value = obj[key];\n\n      if (!isDefined(value)) {\n        return\n      }\n\n      // If we're at the last value in the path, and if it's a string/number/bool,\n      // add it to the list\n      if (\n        index === path.length - 1 &&\n        (isString(value) || isNumber(value) || isBoolean(value))\n      ) {\n        list.push(toString(value));\n      } else if (isArray(value)) {\n        arr = true;\n        // Search each item in the array.\n        for (let i = 0, len = value.length; i < len; i += 1) {\n          deepGet(value[i], path, index + 1);\n        }\n      } else if (path.length) {\n        // An object. Recurse further.\n        deepGet(value, path, index + 1);\n      }\n    }\n  };\n\n  // Backwards compatibility (since path used to be a string)\n  deepGet(obj, isString(path) ? path.split('.') : path, 0);\n\n  return arr ? list : list[0]\n}\n\nconst MatchOptions = {\n  // Whether the matches should be included in the result set. When `true`, each record in the result\n  // set will include the indices of the matched characters.\n  // These can consequently be used for highlighting purposes.\n  includeMatches: false,\n  // When `true`, the matching function will continue to the end of a search pattern even if\n  // a perfect match has already been located in the string.\n  findAllMatches: false,\n  // Minimum number of characters that must be matched before a result is considered a match\n  minMatchCharLength: 1\n};\n\nconst BasicOptions = {\n  // When `true`, the algorithm continues searching to the end of the input even if a perfect\n  // match is found before the end of the same input.\n  isCaseSensitive: false,\n  // When true, the matching function will continue to the end of a search pattern even if\n  includeScore: false,\n  // List of properties that will be searched. This also supports nested properties.\n  keys: [],\n  // Whether to sort the result list, by score\n  shouldSort: true,\n  // Default sort function: sort by ascending score, ascending index\n  sortFn: (a, b) =>\n    a.score === b.score ? (a.idx < b.idx ? -1 : 1) : a.score < b.score ? -1 : 1\n};\n\nconst FuzzyOptions = {\n  // Approximately where in the text is the pattern expected to be found?\n  location: 0,\n  // At what point does the match algorithm give up. A threshold of '0.0' requires a perfect match\n  // (of both letters and location), a threshold of '1.0' would match anything.\n  threshold: 0.6,\n  // Determines how close the match must be to the fuzzy location (specified above).\n  // An exact letter match which is 'distance' characters away from the fuzzy location\n  // would score as a complete mismatch. A distance of '0' requires the match be at\n  // the exact location specified, a threshold of '1000' would require a perfect match\n  // to be within 800 characters of the fuzzy location to be found using a 0.8 threshold.\n  distance: 100\n};\n\nconst AdvancedOptions = {\n  // When `true`, it enables the use of unix-like search commands\n  useExtendedSearch: false,\n  // The get function to use when fetching an object's properties.\n  // The default will search nested paths *ie foo.bar.baz*\n  getFn: get,\n  // When `true`, search will ignore `location` and `distance`, so it won't matter\n  // where in the string the pattern appears.\n  // More info: https://fusejs.io/concepts/scoring-theory.html#fuzziness-score\n  ignoreLocation: false,\n  // When `true`, the calculation for the relevance score (used for sorting) will\n  // ignore the field-length norm.\n  // More info: https://fusejs.io/concepts/scoring-theory.html#field-length-norm\n  ignoreFieldNorm: false,\n  // The weight to determine how much field length norm effects scoring.\n  fieldNormWeight: 1\n};\n\nvar Config = {\n  ...BasicOptions,\n  ...MatchOptions,\n  ...FuzzyOptions,\n  ...AdvancedOptions\n};\n\nconst SPACE = /[^ ]+/g;\n\n// Field-length norm: the shorter the field, the higher the weight.\n// Set to 3 decimals to reduce index size.\nfunction norm(weight = 1, mantissa = 3) {\n  const cache = new Map();\n  const m = Math.pow(10, mantissa);\n\n  return {\n    get(value) {\n      const numTokens = value.match(SPACE).length;\n\n      if (cache.has(numTokens)) {\n        return cache.get(numTokens)\n      }\n\n      // Default function is 1/sqrt(x), weight makes that variable\n      const norm = 1 / Math.pow(numTokens, 0.5 * weight);\n\n      // In place of `toFixed(mantissa)`, for faster computation\n      const n = parseFloat(Math.round(norm * m) / m);\n\n      cache.set(numTokens, n);\n\n      return n\n    },\n    clear() {\n      cache.clear();\n    }\n  }\n}\n\nclass FuseIndex {\n  constructor({\n    getFn = Config.getFn,\n    fieldNormWeight = Config.fieldNormWeight\n  } = {}) {\n    this.norm = norm(fieldNormWeight, 3);\n    this.getFn = getFn;\n    this.isCreated = false;\n\n    this.setIndexRecords();\n  }\n  setSources(docs = []) {\n    this.docs = docs;\n  }\n  setIndexRecords(records = []) {\n    this.records = records;\n  }\n  setKeys(keys = []) {\n    this.keys = keys;\n    this._keysMap = {};\n    keys.forEach((key, idx) => {\n      this._keysMap[key.id] = idx;\n    });\n  }\n  create() {\n    if (this.isCreated || !this.docs.length) {\n      return\n    }\n\n    this.isCreated = true;\n\n    // List is Array<String>\n    if (isString(this.docs[0])) {\n      this.docs.forEach((doc, docIndex) => {\n        this._addString(doc, docIndex);\n      });\n    } else {\n      // List is Array<Object>\n      this.docs.forEach((doc, docIndex) => {\n        this._addObject(doc, docIndex);\n      });\n    }\n\n    this.norm.clear();\n  }\n  // Adds a doc to the end of the index\n  add(doc) {\n    const idx = this.size();\n\n    if (isString(doc)) {\n      this._addString(doc, idx);\n    } else {\n      this._addObject(doc, idx);\n    }\n  }\n  // Removes the doc at the specified index of the index\n  removeAt(idx) {\n    this.records.splice(idx, 1);\n\n    // Change ref index of every subsquent doc\n    for (let i = idx, len = this.size(); i < len; i += 1) {\n      this.records[i].i -= 1;\n    }\n  }\n  getValueForItemAtKeyId(item, keyId) {\n    return item[this._keysMap[keyId]]\n  }\n  size() {\n    return this.records.length\n  }\n  _addString(doc, docIndex) {\n    if (!isDefined(doc) || isBlank(doc)) {\n      return\n    }\n\n    let record = {\n      v: doc,\n      i: docIndex,\n      n: this.norm.get(doc)\n    };\n\n    this.records.push(record);\n  }\n  _addObject(doc, docIndex) {\n    let record = { i: docIndex, $: {} };\n\n    // Iterate over every key (i.e, path), and fetch the value at that key\n    this.keys.forEach((key, keyIndex) => {\n      let value = key.getFn ? key.getFn(doc) : this.getFn(doc, key.path);\n\n      if (!isDefined(value)) {\n        return\n      }\n\n      if (isArray(value)) {\n        let subRecords = [];\n        const stack = [{ nestedArrIndex: -1, value }];\n\n        while (stack.length) {\n          const { nestedArrIndex, value } = stack.pop();\n\n          if (!isDefined(value)) {\n            continue\n          }\n\n          if (isString(value) && !isBlank(value)) {\n            let subRecord = {\n              v: value,\n              i: nestedArrIndex,\n              n: this.norm.get(value)\n            };\n\n            subRecords.push(subRecord);\n          } else if (isArray(value)) {\n            value.forEach((item, k) => {\n              stack.push({\n                nestedArrIndex: k,\n                value: item\n              });\n            });\n          } else ;\n        }\n        record.$[keyIndex] = subRecords;\n      } else if (isString(value) && !isBlank(value)) {\n        let subRecord = {\n          v: value,\n          n: this.norm.get(value)\n        };\n\n        record.$[keyIndex] = subRecord;\n      }\n    });\n\n    this.records.push(record);\n  }\n  toJSON() {\n    return {\n      keys: this.keys,\n      records: this.records\n    }\n  }\n}\n\nfunction createIndex(\n  keys,\n  docs,\n  { getFn = Config.getFn, fieldNormWeight = Config.fieldNormWeight } = {}\n) {\n  const myIndex = new FuseIndex({ getFn, fieldNormWeight });\n  myIndex.setKeys(keys.map(createKey));\n  myIndex.setSources(docs);\n  myIndex.create();\n  return myIndex\n}\n\nfunction parseIndex(\n  data,\n  { getFn = Config.getFn, fieldNormWeight = Config.fieldNormWeight } = {}\n) {\n  const { keys, records } = data;\n  const myIndex = new FuseIndex({ getFn, fieldNormWeight });\n  myIndex.setKeys(keys);\n  myIndex.setIndexRecords(records);\n  return myIndex\n}\n\nfunction computeScore$1(\n  pattern,\n  {\n    errors = 0,\n    currentLocation = 0,\n    expectedLocation = 0,\n    distance = Config.distance,\n    ignoreLocation = Config.ignoreLocation\n  } = {}\n) {\n  const accuracy = errors / pattern.length;\n\n  if (ignoreLocation) {\n    return accuracy\n  }\n\n  const proximity = Math.abs(expectedLocation - currentLocation);\n\n  if (!distance) {\n    // Dodge divide by zero error.\n    return proximity ? 1.0 : accuracy\n  }\n\n  return accuracy + proximity / distance\n}\n\nfunction convertMaskToIndices(\n  matchmask = [],\n  minMatchCharLength = Config.minMatchCharLength\n) {\n  let indices = [];\n  let start = -1;\n  let end = -1;\n  let i = 0;\n\n  for (let len = matchmask.length; i < len; i += 1) {\n    let match = matchmask[i];\n    if (match && start === -1) {\n      start = i;\n    } else if (!match && start !== -1) {\n      end = i - 1;\n      if (end - start + 1 >= minMatchCharLength) {\n        indices.push([start, end]);\n      }\n      start = -1;\n    }\n  }\n\n  // (i-1 - start) + 1 => i - start\n  if (matchmask[i - 1] && i - start >= minMatchCharLength) {\n    indices.push([start, i - 1]);\n  }\n\n  return indices\n}\n\n// Machine word size\nconst MAX_BITS = 32;\n\nfunction search(\n  text,\n  pattern,\n  patternAlphabet,\n  {\n    location = Config.location,\n    distance = Config.distance,\n    threshold = Config.threshold,\n    findAllMatches = Config.findAllMatches,\n    minMatchCharLength = Config.minMatchCharLength,\n    includeMatches = Config.includeMatches,\n    ignoreLocation = Config.ignoreLocation\n  } = {}\n) {\n  if (pattern.length > MAX_BITS) {\n    throw new Error(PATTERN_LENGTH_TOO_LARGE(MAX_BITS))\n  }\n\n  const patternLen = pattern.length;\n  // Set starting location at beginning text and initialize the alphabet.\n  const textLen = text.length;\n  // Handle the case when location > text.length\n  const expectedLocation = Math.max(0, Math.min(location, textLen));\n  // Highest score beyond which we give up.\n  let currentThreshold = threshold;\n  // Is there a nearby exact match? (speedup)\n  let bestLocation = expectedLocation;\n\n  // Performance: only computer matches when the minMatchCharLength > 1\n  // OR if `includeMatches` is true.\n  const computeMatches = minMatchCharLength > 1 || includeMatches;\n  // A mask of the matches, used for building the indices\n  const matchMask = computeMatches ? Array(textLen) : [];\n\n  let index;\n\n  // Get all exact matches, here for speed up\n  while ((index = text.indexOf(pattern, bestLocation)) > -1) {\n    let score = computeScore$1(pattern, {\n      currentLocation: index,\n      expectedLocation,\n      distance,\n      ignoreLocation\n    });\n\n    currentThreshold = Math.min(score, currentThreshold);\n    bestLocation = index + patternLen;\n\n    if (computeMatches) {\n      let i = 0;\n      while (i < patternLen) {\n        matchMask[index + i] = 1;\n        i += 1;\n      }\n    }\n  }\n\n  // Reset the best location\n  bestLocation = -1;\n\n  let lastBitArr = [];\n  let finalScore = 1;\n  let binMax = patternLen + textLen;\n\n  const mask = 1 << (patternLen - 1);\n\n  for (let i = 0; i < patternLen; i += 1) {\n    // Scan for the best match; each iteration allows for one more error.\n    // Run a binary search to determine how far from the match location we can stray\n    // at this error level.\n    let binMin = 0;\n    let binMid = binMax;\n\n    while (binMin < binMid) {\n      const score = computeScore$1(pattern, {\n        errors: i,\n        currentLocation: expectedLocation + binMid,\n        expectedLocation,\n        distance,\n        ignoreLocation\n      });\n\n      if (score <= currentThreshold) {\n        binMin = binMid;\n      } else {\n        binMax = binMid;\n      }\n\n      binMid = Math.floor((binMax - binMin) / 2 + binMin);\n    }\n\n    // Use the result from this iteration as the maximum for the next.\n    binMax = binMid;\n\n    let start = Math.max(1, expectedLocation - binMid + 1);\n    let finish = findAllMatches\n      ? textLen\n      : Math.min(expectedLocation + binMid, textLen) + patternLen;\n\n    // Initialize the bit array\n    let bitArr = Array(finish + 2);\n\n    bitArr[finish + 1] = (1 << i) - 1;\n\n    for (let j = finish; j >= start; j -= 1) {\n      let currentLocation = j - 1;\n      let charMatch = patternAlphabet[text.charAt(currentLocation)];\n\n      if (computeMatches) {\n        // Speed up: quick bool to int conversion (i.e, `charMatch ? 1 : 0`)\n        matchMask[currentLocation] = +!!charMatch;\n      }\n\n      // First pass: exact match\n      bitArr[j] = ((bitArr[j + 1] << 1) | 1) & charMatch;\n\n      // Subsequent passes: fuzzy match\n      if (i) {\n        bitArr[j] |=\n          ((lastBitArr[j + 1] | lastBitArr[j]) << 1) | 1 | lastBitArr[j + 1];\n      }\n\n      if (bitArr[j] & mask) {\n        finalScore = computeScore$1(pattern, {\n          errors: i,\n          currentLocation,\n          expectedLocation,\n          distance,\n          ignoreLocation\n        });\n\n        // This match will almost certainly be better than any existing match.\n        // But check anyway.\n        if (finalScore <= currentThreshold) {\n          // Indeed it is\n          currentThreshold = finalScore;\n          bestLocation = currentLocation;\n\n          // Already passed `loc`, downhill from here on in.\n          if (bestLocation <= expectedLocation) {\n            break\n          }\n\n          // When passing `bestLocation`, don't exceed our current distance from `expectedLocation`.\n          start = Math.max(1, 2 * expectedLocation - bestLocation);\n        }\n      }\n    }\n\n    // No hope for a (better) match at greater error levels.\n    const score = computeScore$1(pattern, {\n      errors: i + 1,\n      currentLocation: expectedLocation,\n      expectedLocation,\n      distance,\n      ignoreLocation\n    });\n\n    if (score > currentThreshold) {\n      break\n    }\n\n    lastBitArr = bitArr;\n  }\n\n  const result = {\n    isMatch: bestLocation >= 0,\n    // Count exact matches (those with a score of 0) to be \"almost\" exact\n    score: Math.max(0.001, finalScore)\n  };\n\n  if (computeMatches) {\n    const indices = convertMaskToIndices(matchMask, minMatchCharLength);\n    if (!indices.length) {\n      result.isMatch = false;\n    } else if (includeMatches) {\n      result.indices = indices;\n    }\n  }\n\n  return result\n}\n\nfunction createPatternAlphabet(pattern) {\n  let mask = {};\n\n  for (let i = 0, len = pattern.length; i < len; i += 1) {\n    const char = pattern.charAt(i);\n    mask[char] = (mask[char] || 0) | (1 << (len - i - 1));\n  }\n\n  return mask\n}\n\nclass BitapSearch {\n  constructor(\n    pattern,\n    {\n      location = Config.location,\n      threshold = Config.threshold,\n      distance = Config.distance,\n      includeMatches = Config.includeMatches,\n      findAllMatches = Config.findAllMatches,\n      minMatchCharLength = Config.minMatchCharLength,\n      isCaseSensitive = Config.isCaseSensitive,\n      ignoreLocation = Config.ignoreLocation\n    } = {}\n  ) {\n    this.options = {\n      location,\n      threshold,\n      distance,\n      includeMatches,\n      findAllMatches,\n      minMatchCharLength,\n      isCaseSensitive,\n      ignoreLocation\n    };\n\n    this.pattern = isCaseSensitive ? pattern : pattern.toLowerCase();\n\n    this.chunks = [];\n\n    if (!this.pattern.length) {\n      return\n    }\n\n    const addChunk = (pattern, startIndex) => {\n      this.chunks.push({\n        pattern,\n        alphabet: createPatternAlphabet(pattern),\n        startIndex\n      });\n    };\n\n    const len = this.pattern.length;\n\n    if (len > MAX_BITS) {\n      let i = 0;\n      const remainder = len % MAX_BITS;\n      const end = len - remainder;\n\n      while (i < end) {\n        addChunk(this.pattern.substr(i, MAX_BITS), i);\n        i += MAX_BITS;\n      }\n\n      if (remainder) {\n        const startIndex = len - MAX_BITS;\n        addChunk(this.pattern.substr(startIndex), startIndex);\n      }\n    } else {\n      addChunk(this.pattern, 0);\n    }\n  }\n\n  searchIn(text) {\n    const { isCaseSensitive, includeMatches } = this.options;\n\n    if (!isCaseSensitive) {\n      text = text.toLowerCase();\n    }\n\n    // Exact match\n    if (this.pattern === text) {\n      let result = {\n        isMatch: true,\n        score: 0\n      };\n\n      if (includeMatches) {\n        result.indices = [[0, text.length - 1]];\n      }\n\n      return result\n    }\n\n    // Otherwise, use Bitap algorithm\n    const {\n      location,\n      distance,\n      threshold,\n      findAllMatches,\n      minMatchCharLength,\n      ignoreLocation\n    } = this.options;\n\n    let allIndices = [];\n    let totalScore = 0;\n    let hasMatches = false;\n\n    this.chunks.forEach(({ pattern, alphabet, startIndex }) => {\n      const { isMatch, score, indices } = search(text, pattern, alphabet, {\n        location: location + startIndex,\n        distance,\n        threshold,\n        findAllMatches,\n        minMatchCharLength,\n        includeMatches,\n        ignoreLocation\n      });\n\n      if (isMatch) {\n        hasMatches = true;\n      }\n\n      totalScore += score;\n\n      if (isMatch && indices) {\n        allIndices = [...allIndices, ...indices];\n      }\n    });\n\n    let result = {\n      isMatch: hasMatches,\n      score: hasMatches ? totalScore / this.chunks.length : 1\n    };\n\n    if (hasMatches && includeMatches) {\n      result.indices = allIndices;\n    }\n\n    return result\n  }\n}\n\nclass BaseMatch {\n  constructor(pattern) {\n    this.pattern = pattern;\n  }\n  static isMultiMatch(pattern) {\n    return getMatch(pattern, this.multiRegex)\n  }\n  static isSingleMatch(pattern) {\n    return getMatch(pattern, this.singleRegex)\n  }\n  search(/*text*/) {}\n}\n\nfunction getMatch(pattern, exp) {\n  const matches = pattern.match(exp);\n  return matches ? matches[1] : null\n}\n\n// Token: 'file\n\nclass ExactMatch extends BaseMatch {\n  constructor(pattern) {\n    super(pattern);\n  }\n  static get type() {\n    return 'exact'\n  }\n  static get multiRegex() {\n    return /^=\"(.*)\"$/\n  }\n  static get singleRegex() {\n    return /^=(.*)$/\n  }\n  search(text) {\n    const isMatch = text === this.pattern;\n\n    return {\n      isMatch,\n      score: isMatch ? 0 : 1,\n      indices: [0, this.pattern.length - 1]\n    }\n  }\n}\n\n// Token: !fire\n\nclass InverseExactMatch extends BaseMatch {\n  constructor(pattern) {\n    super(pattern);\n  }\n  static get type() {\n    return 'inverse-exact'\n  }\n  static get multiRegex() {\n    return /^!\"(.*)\"$/\n  }\n  static get singleRegex() {\n    return /^!(.*)$/\n  }\n  search(text) {\n    const index = text.indexOf(this.pattern);\n    const isMatch = index === -1;\n\n    return {\n      isMatch,\n      score: isMatch ? 0 : 1,\n      indices: [0, text.length - 1]\n    }\n  }\n}\n\n// Token: ^file\n\nclass PrefixExactMatch extends BaseMatch {\n  constructor(pattern) {\n    super(pattern);\n  }\n  static get type() {\n    return 'prefix-exact'\n  }\n  static get multiRegex() {\n    return /^\\^\"(.*)\"$/\n  }\n  static get singleRegex() {\n    return /^\\^(.*)$/\n  }\n  search(text) {\n    const isMatch = text.startsWith(this.pattern);\n\n    return {\n      isMatch,\n      score: isMatch ? 0 : 1,\n      indices: [0, this.pattern.length - 1]\n    }\n  }\n}\n\n// Token: !^fire\n\nclass InversePrefixExactMatch extends BaseMatch {\n  constructor(pattern) {\n    super(pattern);\n  }\n  static get type() {\n    return 'inverse-prefix-exact'\n  }\n  static get multiRegex() {\n    return /^!\\^\"(.*)\"$/\n  }\n  static get singleRegex() {\n    return /^!\\^(.*)$/\n  }\n  search(text) {\n    const isMatch = !text.startsWith(this.pattern);\n\n    return {\n      isMatch,\n      score: isMatch ? 0 : 1,\n      indices: [0, text.length - 1]\n    }\n  }\n}\n\n// Token: .file$\n\nclass SuffixExactMatch extends BaseMatch {\n  constructor(pattern) {\n    super(pattern);\n  }\n  static get type() {\n    return 'suffix-exact'\n  }\n  static get multiRegex() {\n    return /^\"(.*)\"\\$$/\n  }\n  static get singleRegex() {\n    return /^(.*)\\$$/\n  }\n  search(text) {\n    const isMatch = text.endsWith(this.pattern);\n\n    return {\n      isMatch,\n      score: isMatch ? 0 : 1,\n      indices: [text.length - this.pattern.length, text.length - 1]\n    }\n  }\n}\n\n// Token: !.file$\n\nclass InverseSuffixExactMatch extends BaseMatch {\n  constructor(pattern) {\n    super(pattern);\n  }\n  static get type() {\n    return 'inverse-suffix-exact'\n  }\n  static get multiRegex() {\n    return /^!\"(.*)\"\\$$/\n  }\n  static get singleRegex() {\n    return /^!(.*)\\$$/\n  }\n  search(text) {\n    const isMatch = !text.endsWith(this.pattern);\n    return {\n      isMatch,\n      score: isMatch ? 0 : 1,\n      indices: [0, text.length - 1]\n    }\n  }\n}\n\nclass FuzzyMatch extends BaseMatch {\n  constructor(\n    pattern,\n    {\n      location = Config.location,\n      threshold = Config.threshold,\n      distance = Config.distance,\n      includeMatches = Config.includeMatches,\n      findAllMatches = Config.findAllMatches,\n      minMatchCharLength = Config.minMatchCharLength,\n      isCaseSensitive = Config.isCaseSensitive,\n      ignoreLocation = Config.ignoreLocation\n    } = {}\n  ) {\n    super(pattern);\n    this._bitapSearch = new BitapSearch(pattern, {\n      location,\n      threshold,\n      distance,\n      includeMatches,\n      findAllMatches,\n      minMatchCharLength,\n      isCaseSensitive,\n      ignoreLocation\n    });\n  }\n  static get type() {\n    return 'fuzzy'\n  }\n  static get multiRegex() {\n    return /^\"(.*)\"$/\n  }\n  static get singleRegex() {\n    return /^(.*)$/\n  }\n  search(text) {\n    return this._bitapSearch.searchIn(text)\n  }\n}\n\n// Token: 'file\n\nclass IncludeMatch extends BaseMatch {\n  constructor(pattern) {\n    super(pattern);\n  }\n  static get type() {\n    return 'include'\n  }\n  static get multiRegex() {\n    return /^'\"(.*)\"$/\n  }\n  static get singleRegex() {\n    return /^'(.*)$/\n  }\n  search(text) {\n    let location = 0;\n    let index;\n\n    const indices = [];\n    const patternLen = this.pattern.length;\n\n    // Get all exact matches\n    while ((index = text.indexOf(this.pattern, location)) > -1) {\n      location = index + patternLen;\n      indices.push([index, location - 1]);\n    }\n\n    const isMatch = !!indices.length;\n\n    return {\n      isMatch,\n      score: isMatch ? 0 : 1,\n      indices\n    }\n  }\n}\n\n// ❗Order is important. DO NOT CHANGE.\nconst searchers = [\n  ExactMatch,\n  IncludeMatch,\n  PrefixExactMatch,\n  InversePrefixExactMatch,\n  InverseSuffixExactMatch,\n  SuffixExactMatch,\n  InverseExactMatch,\n  FuzzyMatch\n];\n\nconst searchersLen = searchers.length;\n\n// Regex to split by spaces, but keep anything in quotes together\nconst SPACE_RE = / +(?=(?:[^\\\"]*\\\"[^\\\"]*\\\")*[^\\\"]*$)/;\nconst OR_TOKEN = '|';\n\n// Return a 2D array representation of the query, for simpler parsing.\n// Example:\n// \"^core go$ | rb$ | py$ xy$\" => [[\"^core\", \"go$\"], [\"rb$\"], [\"py$\", \"xy$\"]]\nfunction parseQuery(pattern, options = {}) {\n  return pattern.split(OR_TOKEN).map((item) => {\n    let query = item\n      .trim()\n      .split(SPACE_RE)\n      .filter((item) => item && !!item.trim());\n\n    let results = [];\n    for (let i = 0, len = query.length; i < len; i += 1) {\n      const queryItem = query[i];\n\n      // 1. Handle multiple query match (i.e, once that are quoted, like `\"hello world\"`)\n      let found = false;\n      let idx = -1;\n      while (!found && ++idx < searchersLen) {\n        const searcher = searchers[idx];\n        let token = searcher.isMultiMatch(queryItem);\n        if (token) {\n          results.push(new searcher(token, options));\n          found = true;\n        }\n      }\n\n      if (found) {\n        continue\n      }\n\n      // 2. Handle single query matches (i.e, once that are *not* quoted)\n      idx = -1;\n      while (++idx < searchersLen) {\n        const searcher = searchers[idx];\n        let token = searcher.isSingleMatch(queryItem);\n        if (token) {\n          results.push(new searcher(token, options));\n          break\n        }\n      }\n    }\n\n    return results\n  })\n}\n\n// These extended matchers can return an array of matches, as opposed\n// to a singl match\nconst MultiMatchSet = new Set([FuzzyMatch.type, IncludeMatch.type]);\n\n/**\n * Command-like searching\n * ======================\n *\n * Given multiple search terms delimited by spaces.e.g. `^jscript .python$ ruby !java`,\n * search in a given text.\n *\n * Search syntax:\n *\n * | Token       | Match type                 | Description                            |\n * | ----------- | -------------------------- | -------------------------------------- |\n * | `jscript`   | fuzzy-match                | Items that fuzzy match `jscript`       |\n * | `=scheme`   | exact-match                | Items that are `scheme`                |\n * | `'python`   | include-match              | Items that include `python`            |\n * | `!ruby`     | inverse-exact-match        | Items that do not include `ruby`       |\n * | `^java`     | prefix-exact-match         | Items that start with `java`           |\n * | `!^earlang` | inverse-prefix-exact-match | Items that do not start with `earlang` |\n * | `.js$`      | suffix-exact-match         | Items that end with `.js`              |\n * | `!.go$`     | inverse-suffix-exact-match | Items that do not end with `.go`       |\n *\n * A single pipe character acts as an OR operator. For example, the following\n * query matches entries that start with `core` and end with either`go`, `rb`,\n * or`py`.\n *\n * ```\n * ^core go$ | rb$ | py$\n * ```\n */\nclass ExtendedSearch {\n  constructor(\n    pattern,\n    {\n      isCaseSensitive = Config.isCaseSensitive,\n      includeMatches = Config.includeMatches,\n      minMatchCharLength = Config.minMatchCharLength,\n      ignoreLocation = Config.ignoreLocation,\n      findAllMatches = Config.findAllMatches,\n      location = Config.location,\n      threshold = Config.threshold,\n      distance = Config.distance\n    } = {}\n  ) {\n    this.query = null;\n    this.options = {\n      isCaseSensitive,\n      includeMatches,\n      minMatchCharLength,\n      findAllMatches,\n      ignoreLocation,\n      location,\n      threshold,\n      distance\n    };\n\n    this.pattern = isCaseSensitive ? pattern : pattern.toLowerCase();\n    this.query = parseQuery(this.pattern, this.options);\n  }\n\n  static condition(_, options) {\n    return options.useExtendedSearch\n  }\n\n  searchIn(text) {\n    const query = this.query;\n\n    if (!query) {\n      return {\n        isMatch: false,\n        score: 1\n      }\n    }\n\n    const { includeMatches, isCaseSensitive } = this.options;\n\n    text = isCaseSensitive ? text : text.toLowerCase();\n\n    let numMatches = 0;\n    let allIndices = [];\n    let totalScore = 0;\n\n    // ORs\n    for (let i = 0, qLen = query.length; i < qLen; i += 1) {\n      const searchers = query[i];\n\n      // Reset indices\n      allIndices.length = 0;\n      numMatches = 0;\n\n      // ANDs\n      for (let j = 0, pLen = searchers.length; j < pLen; j += 1) {\n        const searcher = searchers[j];\n        const { isMatch, indices, score } = searcher.search(text);\n\n        if (isMatch) {\n          numMatches += 1;\n          totalScore += score;\n          if (includeMatches) {\n            const type = searcher.constructor.type;\n            if (MultiMatchSet.has(type)) {\n              allIndices = [...allIndices, ...indices];\n            } else {\n              allIndices.push(indices);\n            }\n          }\n        } else {\n          totalScore = 0;\n          numMatches = 0;\n          allIndices.length = 0;\n          break\n        }\n      }\n\n      // OR condition, so if TRUE, return\n      if (numMatches) {\n        let result = {\n          isMatch: true,\n          score: totalScore / numMatches\n        };\n\n        if (includeMatches) {\n          result.indices = allIndices;\n        }\n\n        return result\n      }\n    }\n\n    // Nothing was matched\n    return {\n      isMatch: false,\n      score: 1\n    }\n  }\n}\n\nconst registeredSearchers = [];\n\nfunction register(...args) {\n  registeredSearchers.push(...args);\n}\n\nfunction createSearcher(pattern, options) {\n  for (let i = 0, len = registeredSearchers.length; i < len; i += 1) {\n    let searcherClass = registeredSearchers[i];\n    if (searcherClass.condition(pattern, options)) {\n      return new searcherClass(pattern, options)\n    }\n  }\n\n  return new BitapSearch(pattern, options)\n}\n\nconst LogicalOperator = {\n  AND: '$and',\n  OR: '$or'\n};\n\nconst KeyType = {\n  PATH: '$path',\n  PATTERN: '$val'\n};\n\nconst isExpression = (query) =>\n  !!(query[LogicalOperator.AND] || query[LogicalOperator.OR]);\n\nconst isPath = (query) => !!query[KeyType.PATH];\n\nconst isLeaf = (query) =>\n  !isArray(query) && isObject(query) && !isExpression(query);\n\nconst convertToExplicit = (query) => ({\n  [LogicalOperator.AND]: Object.keys(query).map((key) => ({\n    [key]: query[key]\n  }))\n});\n\n// When `auto` is `true`, the parse function will infer and initialize and add\n// the appropriate `Searcher` instance\nfunction parse(query, options, { auto = true } = {}) {\n  const next = (query) => {\n    let keys = Object.keys(query);\n\n    const isQueryPath = isPath(query);\n\n    if (!isQueryPath && keys.length > 1 && !isExpression(query)) {\n      return next(convertToExplicit(query))\n    }\n\n    if (isLeaf(query)) {\n      const key = isQueryPath ? query[KeyType.PATH] : keys[0];\n\n      const pattern = isQueryPath ? query[KeyType.PATTERN] : query[key];\n\n      if (!isString(pattern)) {\n        throw new Error(LOGICAL_SEARCH_INVALID_QUERY_FOR_KEY(key))\n      }\n\n      const obj = {\n        keyId: createKeyId(key),\n        pattern\n      };\n\n      if (auto) {\n        obj.searcher = createSearcher(pattern, options);\n      }\n\n      return obj\n    }\n\n    let node = {\n      children: [],\n      operator: keys[0]\n    };\n\n    keys.forEach((key) => {\n      const value = query[key];\n\n      if (isArray(value)) {\n        value.forEach((item) => {\n          node.children.push(next(item));\n        });\n      }\n    });\n\n    return node\n  };\n\n  if (!isExpression(query)) {\n    query = convertToExplicit(query);\n  }\n\n  return next(query)\n}\n\n// Practical scoring function\nfunction computeScore(\n  results,\n  { ignoreFieldNorm = Config.ignoreFieldNorm }\n) {\n  results.forEach((result) => {\n    let totalScore = 1;\n\n    result.matches.forEach(({ key, norm, score }) => {\n      const weight = key ? key.weight : null;\n\n      totalScore *= Math.pow(\n        score === 0 && weight ? Number.EPSILON : score,\n        (weight || 1) * (ignoreFieldNorm ? 1 : norm)\n      );\n    });\n\n    result.score = totalScore;\n  });\n}\n\nfunction transformMatches(result, data) {\n  const matches = result.matches;\n  data.matches = [];\n\n  if (!isDefined(matches)) {\n    return\n  }\n\n  matches.forEach((match) => {\n    if (!isDefined(match.indices) || !match.indices.length) {\n      return\n    }\n\n    const { indices, value } = match;\n\n    let obj = {\n      indices,\n      value\n    };\n\n    if (match.key) {\n      obj.key = match.key.src;\n    }\n\n    if (match.idx > -1) {\n      obj.refIndex = match.idx;\n    }\n\n    data.matches.push(obj);\n  });\n}\n\nfunction transformScore(result, data) {\n  data.score = result.score;\n}\n\nfunction format(\n  results,\n  docs,\n  {\n    includeMatches = Config.includeMatches,\n    includeScore = Config.includeScore\n  } = {}\n) {\n  const transformers = [];\n\n  if (includeMatches) transformers.push(transformMatches);\n  if (includeScore) transformers.push(transformScore);\n\n  return results.map((result) => {\n    const { idx } = result;\n\n    const data = {\n      item: docs[idx],\n      refIndex: idx\n    };\n\n    if (transformers.length) {\n      transformers.forEach((transformer) => {\n        transformer(result, data);\n      });\n    }\n\n    return data\n  })\n}\n\nclass Fuse {\n  constructor(docs, options = {}, index) {\n    this.options = { ...Config, ...options };\n\n    if (\n      this.options.useExtendedSearch &&\n      !true\n    ) {}\n\n    this._keyStore = new KeyStore(this.options.keys);\n\n    this.setCollection(docs, index);\n  }\n\n  setCollection(docs, index) {\n    this._docs = docs;\n\n    if (index && !(index instanceof FuseIndex)) {\n      throw new Error(INCORRECT_INDEX_TYPE)\n    }\n\n    this._myIndex =\n      index ||\n      createIndex(this.options.keys, this._docs, {\n        getFn: this.options.getFn,\n        fieldNormWeight: this.options.fieldNormWeight\n      });\n  }\n\n  add(doc) {\n    if (!isDefined(doc)) {\n      return\n    }\n\n    this._docs.push(doc);\n    this._myIndex.add(doc);\n  }\n\n  remove(predicate = (/* doc, idx */) => false) {\n    const results = [];\n\n    for (let i = 0, len = this._docs.length; i < len; i += 1) {\n      const doc = this._docs[i];\n      if (predicate(doc, i)) {\n        this.removeAt(i);\n        i -= 1;\n        len -= 1;\n\n        results.push(doc);\n      }\n    }\n\n    return results\n  }\n\n  removeAt(idx) {\n    this._docs.splice(idx, 1);\n    this._myIndex.removeAt(idx);\n  }\n\n  getIndex() {\n    return this._myIndex\n  }\n\n  search(query, { limit = -1 } = {}) {\n    const {\n      includeMatches,\n      includeScore,\n      shouldSort,\n      sortFn,\n      ignoreFieldNorm\n    } = this.options;\n\n    let results = isString(query)\n      ? isString(this._docs[0])\n        ? this._searchStringList(query)\n        : this._searchObjectList(query)\n      : this._searchLogical(query);\n\n    computeScore(results, { ignoreFieldNorm });\n\n    if (shouldSort) {\n      results.sort(sortFn);\n    }\n\n    if (isNumber(limit) && limit > -1) {\n      results = results.slice(0, limit);\n    }\n\n    return format(results, this._docs, {\n      includeMatches,\n      includeScore\n    })\n  }\n\n  _searchStringList(query) {\n    const searcher = createSearcher(query, this.options);\n    const { records } = this._myIndex;\n    const results = [];\n\n    // Iterate over every string in the index\n    records.forEach(({ v: text, i: idx, n: norm }) => {\n      if (!isDefined(text)) {\n        return\n      }\n\n      const { isMatch, score, indices } = searcher.searchIn(text);\n\n      if (isMatch) {\n        results.push({\n          item: text,\n          idx,\n          matches: [{ score, value: text, norm, indices }]\n        });\n      }\n    });\n\n    return results\n  }\n\n  _searchLogical(query) {\n\n    const expression = parse(query, this.options);\n\n    const evaluate = (node, item, idx) => {\n      if (!node.children) {\n        const { keyId, searcher } = node;\n\n        const matches = this._findMatches({\n          key: this._keyStore.get(keyId),\n          value: this._myIndex.getValueForItemAtKeyId(item, keyId),\n          searcher\n        });\n\n        if (matches && matches.length) {\n          return [\n            {\n              idx,\n              item,\n              matches\n            }\n          ]\n        }\n\n        return []\n      }\n\n      const res = [];\n      for (let i = 0, len = node.children.length; i < len; i += 1) {\n        const child = node.children[i];\n        const result = evaluate(child, item, idx);\n        if (result.length) {\n          res.push(...result);\n        } else if (node.operator === LogicalOperator.AND) {\n          return []\n        }\n      }\n      return res\n    };\n\n    const records = this._myIndex.records;\n    const resultMap = {};\n    const results = [];\n\n    records.forEach(({ $: item, i: idx }) => {\n      if (isDefined(item)) {\n        let expResults = evaluate(expression, item, idx);\n\n        if (expResults.length) {\n          // Dedupe when adding\n          if (!resultMap[idx]) {\n            resultMap[idx] = { idx, item, matches: [] };\n            results.push(resultMap[idx]);\n          }\n          expResults.forEach(({ matches }) => {\n            resultMap[idx].matches.push(...matches);\n          });\n        }\n      }\n    });\n\n    return results\n  }\n\n  _searchObjectList(query) {\n    const searcher = createSearcher(query, this.options);\n    const { keys, records } = this._myIndex;\n    const results = [];\n\n    // List is Array<Object>\n    records.forEach(({ $: item, i: idx }) => {\n      if (!isDefined(item)) {\n        return\n      }\n\n      let matches = [];\n\n      // Iterate over every key (i.e, path), and fetch the value at that key\n      keys.forEach((key, keyIndex) => {\n        matches.push(\n          ...this._findMatches({\n            key,\n            value: item[keyIndex],\n            searcher\n          })\n        );\n      });\n\n      if (matches.length) {\n        results.push({\n          idx,\n          item,\n          matches\n        });\n      }\n    });\n\n    return results\n  }\n  _findMatches({ key, value, searcher }) {\n    if (!isDefined(value)) {\n      return []\n    }\n\n    let matches = [];\n\n    if (isArray(value)) {\n      value.forEach(({ v: text, i: idx, n: norm }) => {\n        if (!isDefined(text)) {\n          return\n        }\n\n        const { isMatch, score, indices } = searcher.searchIn(text);\n\n        if (isMatch) {\n          matches.push({\n            score,\n            key,\n            value: text,\n            idx,\n            norm,\n            indices\n          });\n        }\n      });\n    } else {\n      const { v: text, n: norm } = value;\n\n      const { isMatch, score, indices } = searcher.searchIn(text);\n\n      if (isMatch) {\n        matches.push({ score, key, value: text, norm, indices });\n      }\n    }\n\n    return matches\n  }\n}\n\nFuse.version = '6.6.2';\nFuse.createIndex = createIndex;\nFuse.parseIndex = parseIndex;\nFuse.config = Config;\n\n{\n  Fuse.parseQuery = parse;\n}\n\n{\n  register(ExtendedSearch);\n}\n\n\n\n\n/***/ }),\n\n/***/ 791:\n/***/ ((__unused_webpack_module, __nested_webpack_exports__, __nested_webpack_require_178829__) => {\n\n// ESM COMPAT FLAG\n__nested_webpack_require_178829__.r(__nested_webpack_exports__);\n\n// EXPORTS\n__nested_webpack_require_178829__.d(__nested_webpack_exports__, {\n  \"__DO_NOT_USE__ActionTypes\": () => (/* binding */ ActionTypes),\n  \"applyMiddleware\": () => (/* binding */ applyMiddleware),\n  \"bindActionCreators\": () => (/* binding */ bindActionCreators),\n  \"combineReducers\": () => (/* binding */ combineReducers),\n  \"compose\": () => (/* binding */ compose),\n  \"createStore\": () => (/* binding */ createStore),\n  \"legacy_createStore\": () => (/* binding */ legacy_createStore)\n});\n\n;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/typeof.js\nfunction _typeof(obj) {\n  \"@babel/helpers - typeof\";\n\n  return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) {\n    return typeof obj;\n  } : function (obj) {\n    return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj;\n  }, _typeof(obj);\n}\n;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/toPrimitive.js\n\nfunction _toPrimitive(input, hint) {\n  if (_typeof(input) !== \"object\" || input === null) return input;\n  var prim = input[Symbol.toPrimitive];\n  if (prim !== undefined) {\n    var res = prim.call(input, hint || \"default\");\n    if (_typeof(res) !== \"object\") return res;\n    throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n  }\n  return (hint === \"string\" ? String : Number)(input);\n}\n;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/toPropertyKey.js\n\n\nfunction _toPropertyKey(arg) {\n  var key = _toPrimitive(arg, \"string\");\n  return _typeof(key) === \"symbol\" ? key : String(key);\n}\n;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/defineProperty.js\n\nfunction _defineProperty(obj, key, value) {\n  key = _toPropertyKey(key);\n  if (key in obj) {\n    Object.defineProperty(obj, key, {\n      value: value,\n      enumerable: true,\n      configurable: true,\n      writable: true\n    });\n  } else {\n    obj[key] = value;\n  }\n  return obj;\n}\n;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/objectSpread2.js\n\nfunction ownKeys(object, enumerableOnly) {\n  var keys = Object.keys(object);\n  if (Object.getOwnPropertySymbols) {\n    var symbols = Object.getOwnPropertySymbols(object);\n    enumerableOnly && (symbols = symbols.filter(function (sym) {\n      return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n    })), keys.push.apply(keys, symbols);\n  }\n  return keys;\n}\nfunction _objectSpread2(target) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source = null != arguments[i] ? arguments[i] : {};\n    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {\n      _defineProperty(target, key, source[key]);\n    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {\n      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));\n    });\n  }\n  return target;\n}\n;// CONCATENATED MODULE: ./node_modules/redux/es/redux.js\n\n\n/**\n * Adapted from React: https://github.com/facebook/react/blob/master/packages/shared/formatProdErrorMessage.js\n *\n * Do not require this module directly! Use normal throw error calls. These messages will be replaced with error codes\n * during build.\n * @param {number} code\n */\nfunction formatProdErrorMessage(code) {\n  return \"Minified Redux error #\" + code + \"; visit https://redux.js.org/Errors?code=\" + code + \" for the full message or \" + 'use the non-minified dev environment for full errors. ';\n}\n\n// Inlined version of the `symbol-observable` polyfill\nvar $$observable = (function () {\n  return typeof Symbol === 'function' && Symbol.observable || '@@observable';\n})();\n\n/**\n * These are private action types reserved by Redux.\n * For any unknown actions, you must return the current state.\n * If the current state is undefined, you must return the initial state.\n * Do not reference these action types directly in your code.\n */\nvar randomString = function randomString() {\n  return Math.random().toString(36).substring(7).split('').join('.');\n};\n\nvar ActionTypes = {\n  INIT: \"@@redux/INIT\" + randomString(),\n  REPLACE: \"@@redux/REPLACE\" + randomString(),\n  PROBE_UNKNOWN_ACTION: function PROBE_UNKNOWN_ACTION() {\n    return \"@@redux/PROBE_UNKNOWN_ACTION\" + randomString();\n  }\n};\n\n/**\n * @param {any} obj The object to inspect.\n * @returns {boolean} True if the argument appears to be a plain object.\n */\nfunction isPlainObject(obj) {\n  if (typeof obj !== 'object' || obj === null) return false;\n  var proto = obj;\n\n  while (Object.getPrototypeOf(proto) !== null) {\n    proto = Object.getPrototypeOf(proto);\n  }\n\n  return Object.getPrototypeOf(obj) === proto;\n}\n\n// Inlined / shortened version of `kindOf` from https://github.com/jonschlinkert/kind-of\nfunction miniKindOf(val) {\n  if (val === void 0) return 'undefined';\n  if (val === null) return 'null';\n  var type = typeof val;\n\n  switch (type) {\n    case 'boolean':\n    case 'string':\n    case 'number':\n    case 'symbol':\n    case 'function':\n      {\n        return type;\n      }\n  }\n\n  if (Array.isArray(val)) return 'array';\n  if (isDate(val)) return 'date';\n  if (isError(val)) return 'error';\n  var constructorName = ctorName(val);\n\n  switch (constructorName) {\n    case 'Symbol':\n    case 'Promise':\n    case 'WeakMap':\n    case 'WeakSet':\n    case 'Map':\n    case 'Set':\n      return constructorName;\n  } // other\n\n\n  return type.slice(8, -1).toLowerCase().replace(/\\s/g, '');\n}\n\nfunction ctorName(val) {\n  return typeof val.constructor === 'function' ? val.constructor.name : null;\n}\n\nfunction isError(val) {\n  return val instanceof Error || typeof val.message === 'string' && val.constructor && typeof val.constructor.stackTraceLimit === 'number';\n}\n\nfunction isDate(val) {\n  if (val instanceof Date) return true;\n  return typeof val.toDateString === 'function' && typeof val.getDate === 'function' && typeof val.setDate === 'function';\n}\n\nfunction kindOf(val) {\n  var typeOfVal = typeof val;\n\n  if (false) {}\n\n  return typeOfVal;\n}\n\n/**\n * @deprecated\n *\n * **We recommend using the `configureStore` method\n * of the `@reduxjs/toolkit` package**, which replaces `createStore`.\n *\n * Redux Toolkit is our recommended approach for writing Redux logic today,\n * including store setup, reducers, data fetching, and more.\n *\n * **For more details, please read this Redux docs page:**\n * **https://redux.js.org/introduction/why-rtk-is-redux-today**\n *\n * `configureStore` from Redux Toolkit is an improved version of `createStore` that\n * simplifies setup and helps avoid common bugs.\n *\n * You should not be using the `redux` core package by itself today, except for learning purposes.\n * The `createStore` method from the core `redux` package will not be removed, but we encourage\n * all users to migrate to using Redux Toolkit for all Redux code.\n *\n * If you want to use `createStore` without this visual deprecation warning, use\n * the `legacy_createStore` import instead:\n *\n * `import { legacy_createStore as createStore} from 'redux'`\n *\n */\n\nfunction createStore(reducer, preloadedState, enhancer) {\n  var _ref2;\n\n  if (typeof preloadedState === 'function' && typeof enhancer === 'function' || typeof enhancer === 'function' && typeof arguments[3] === 'function') {\n    throw new Error(  true ? formatProdErrorMessage(0) : 0);\n  }\n\n  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {\n    enhancer = preloadedState;\n    preloadedState = undefined;\n  }\n\n  if (typeof enhancer !== 'undefined') {\n    if (typeof enhancer !== 'function') {\n      throw new Error(  true ? formatProdErrorMessage(1) : 0);\n    }\n\n    return enhancer(createStore)(reducer, preloadedState);\n  }\n\n  if (typeof reducer !== 'function') {\n    throw new Error(  true ? formatProdErrorMessage(2) : 0);\n  }\n\n  var currentReducer = reducer;\n  var currentState = preloadedState;\n  var currentListeners = [];\n  var nextListeners = currentListeners;\n  var isDispatching = false;\n  /**\n   * This makes a shallow copy of currentListeners so we can use\n   * nextListeners as a temporary list while dispatching.\n   *\n   * This prevents any bugs around consumers calling\n   * subscribe/unsubscribe in the middle of a dispatch.\n   */\n\n  function ensureCanMutateNextListeners() {\n    if (nextListeners === currentListeners) {\n      nextListeners = currentListeners.slice();\n    }\n  }\n  /**\n   * Reads the state tree managed by the store.\n   *\n   * @returns {any} The current state tree of your application.\n   */\n\n\n  function getState() {\n    if (isDispatching) {\n      throw new Error(  true ? formatProdErrorMessage(3) : 0);\n    }\n\n    return currentState;\n  }\n  /**\n   * Adds a change listener. It will be called any time an action is dispatched,\n   * and some part of the state tree may potentially have changed. You may then\n   * call `getState()` to read the current state tree inside the callback.\n   *\n   * You may call `dispatch()` from a change listener, with the following\n   * caveats:\n   *\n   * 1. The subscriptions are snapshotted just before every `dispatch()` call.\n   * If you subscribe or unsubscribe while the listeners are being invoked, this\n   * will not have any effect on the `dispatch()` that is currently in progress.\n   * However, the next `dispatch()` call, whether nested or not, will use a more\n   * recent snapshot of the subscription list.\n   *\n   * 2. The listener should not expect to see all state changes, as the state\n   * might have been updated multiple times during a nested `dispatch()` before\n   * the listener is called. It is, however, guaranteed that all subscribers\n   * registered before the `dispatch()` started will be called with the latest\n   * state by the time it exits.\n   *\n   * @param {Function} listener A callback to be invoked on every dispatch.\n   * @returns {Function} A function to remove this change listener.\n   */\n\n\n  function subscribe(listener) {\n    if (typeof listener !== 'function') {\n      throw new Error(  true ? formatProdErrorMessage(4) : 0);\n    }\n\n    if (isDispatching) {\n      throw new Error(  true ? formatProdErrorMessage(5) : 0);\n    }\n\n    var isSubscribed = true;\n    ensureCanMutateNextListeners();\n    nextListeners.push(listener);\n    return function unsubscribe() {\n      if (!isSubscribed) {\n        return;\n      }\n\n      if (isDispatching) {\n        throw new Error(  true ? formatProdErrorMessage(6) : 0);\n      }\n\n      isSubscribed = false;\n      ensureCanMutateNextListeners();\n      var index = nextListeners.indexOf(listener);\n      nextListeners.splice(index, 1);\n      currentListeners = null;\n    };\n  }\n  /**\n   * Dispatches an action. It is the only way to trigger a state change.\n   *\n   * The `reducer` function, used to create the store, will be called with the\n   * current state tree and the given `action`. Its return value will\n   * be considered the **next** state of the tree, and the change listeners\n   * will be notified.\n   *\n   * The base implementation only supports plain object actions. If you want to\n   * dispatch a Promise, an Observable, a thunk, or something else, you need to\n   * wrap your store creating function into the corresponding middleware. For\n   * example, see the documentation for the `redux-thunk` package. Even the\n   * middleware will eventually dispatch plain object actions using this method.\n   *\n   * @param {Object} action A plain object representing “what changed”. It is\n   * a good idea to keep actions serializable so you can record and replay user\n   * sessions, or use the time travelling `redux-devtools`. An action must have\n   * a `type` property which may not be `undefined`. It is a good idea to use\n   * string constants for action types.\n   *\n   * @returns {Object} For convenience, the same action object you dispatched.\n   *\n   * Note that, if you use a custom middleware, it may wrap `dispatch()` to\n   * return something else (for example, a Promise you can await).\n   */\n\n\n  function dispatch(action) {\n    if (!isPlainObject(action)) {\n      throw new Error(  true ? formatProdErrorMessage(7) : 0);\n    }\n\n    if (typeof action.type === 'undefined') {\n      throw new Error(  true ? formatProdErrorMessage(8) : 0);\n    }\n\n    if (isDispatching) {\n      throw new Error(  true ? formatProdErrorMessage(9) : 0);\n    }\n\n    try {\n      isDispatching = true;\n      currentState = currentReducer(currentState, action);\n    } finally {\n      isDispatching = false;\n    }\n\n    var listeners = currentListeners = nextListeners;\n\n    for (var i = 0; i < listeners.length; i++) {\n      var listener = listeners[i];\n      listener();\n    }\n\n    return action;\n  }\n  /**\n   * Replaces the reducer currently used by the store to calculate the state.\n   *\n   * You might need this if your app implements code splitting and you want to\n   * load some of the reducers dynamically. You might also need this if you\n   * implement a hot reloading mechanism for Redux.\n   *\n   * @param {Function} nextReducer The reducer for the store to use instead.\n   * @returns {void}\n   */\n\n\n  function replaceReducer(nextReducer) {\n    if (typeof nextReducer !== 'function') {\n      throw new Error(  true ? formatProdErrorMessage(10) : 0);\n    }\n\n    currentReducer = nextReducer; // This action has a similiar effect to ActionTypes.INIT.\n    // Any reducers that existed in both the new and old rootReducer\n    // will receive the previous state. This effectively populates\n    // the new state tree with any relevant data from the old one.\n\n    dispatch({\n      type: ActionTypes.REPLACE\n    });\n  }\n  /**\n   * Interoperability point for observable/reactive libraries.\n   * @returns {observable} A minimal observable of state changes.\n   * For more information, see the observable proposal:\n   * https://github.com/tc39/proposal-observable\n   */\n\n\n  function observable() {\n    var _ref;\n\n    var outerSubscribe = subscribe;\n    return _ref = {\n      /**\n       * The minimal observable subscription method.\n       * @param {Object} observer Any object that can be used as an observer.\n       * The observer object should have a `next` method.\n       * @returns {subscription} An object with an `unsubscribe` method that can\n       * be used to unsubscribe the observable from the store, and prevent further\n       * emission of values from the observable.\n       */\n      subscribe: function subscribe(observer) {\n        if (typeof observer !== 'object' || observer === null) {\n          throw new Error(  true ? formatProdErrorMessage(11) : 0);\n        }\n\n        function observeState() {\n          if (observer.next) {\n            observer.next(getState());\n          }\n        }\n\n        observeState();\n        var unsubscribe = outerSubscribe(observeState);\n        return {\n          unsubscribe: unsubscribe\n        };\n      }\n    }, _ref[$$observable] = function () {\n      return this;\n    }, _ref;\n  } // When a store is created, an \"INIT\" action is dispatched so that every\n  // reducer returns their initial state. This effectively populates\n  // the initial state tree.\n\n\n  dispatch({\n    type: ActionTypes.INIT\n  });\n  return _ref2 = {\n    dispatch: dispatch,\n    subscribe: subscribe,\n    getState: getState,\n    replaceReducer: replaceReducer\n  }, _ref2[$$observable] = observable, _ref2;\n}\n/**\n * Creates a Redux store that holds the state tree.\n *\n * **We recommend using `configureStore` from the\n * `@reduxjs/toolkit` package**, which replaces `createStore`:\n * **https://redux.js.org/introduction/why-rtk-is-redux-today**\n *\n * The only way to change the data in the store is to call `dispatch()` on it.\n *\n * There should only be a single store in your app. To specify how different\n * parts of the state tree respond to actions, you may combine several reducers\n * into a single reducer function by using `combineReducers`.\n *\n * @param {Function} reducer A function that returns the next state tree, given\n * the current state tree and the action to handle.\n *\n * @param {any} [preloadedState] The initial state. You may optionally specify it\n * to hydrate the state from the server in universal apps, or to restore a\n * previously serialized user session.\n * If you use `combineReducers` to produce the root reducer function, this must be\n * an object with the same shape as `combineReducers` keys.\n *\n * @param {Function} [enhancer] The store enhancer. You may optionally specify it\n * to enhance the store with third-party capabilities such as middleware,\n * time travel, persistence, etc. The only store enhancer that ships with Redux\n * is `applyMiddleware()`.\n *\n * @returns {Store} A Redux store that lets you read the state, dispatch actions\n * and subscribe to changes.\n */\n\nvar legacy_createStore = createStore;\n\n/**\n * Prints a warning in the console if it exists.\n *\n * @param {String} message The warning message.\n * @returns {void}\n */\nfunction warning(message) {\n  /* eslint-disable no-console */\n  if (typeof console !== 'undefined' && typeof console.error === 'function') {\n    console.error(message);\n  }\n  /* eslint-enable no-console */\n\n\n  try {\n    // This error was thrown as a convenience so that if you enable\n    // \"break on all exceptions\" in your console,\n    // it would pause the execution at this line.\n    throw new Error(message);\n  } catch (e) {} // eslint-disable-line no-empty\n\n}\n\nfunction getUnexpectedStateShapeWarningMessage(inputState, reducers, action, unexpectedKeyCache) {\n  var reducerKeys = Object.keys(reducers);\n  var argumentName = action && action.type === ActionTypes.INIT ? 'preloadedState argument passed to createStore' : 'previous state received by the reducer';\n\n  if (reducerKeys.length === 0) {\n    return 'Store does not have a valid reducer. Make sure the argument passed ' + 'to combineReducers is an object whose values are reducers.';\n  }\n\n  if (!isPlainObject(inputState)) {\n    return \"The \" + argumentName + \" has unexpected type of \\\"\" + kindOf(inputState) + \"\\\". Expected argument to be an object with the following \" + (\"keys: \\\"\" + reducerKeys.join('\", \"') + \"\\\"\");\n  }\n\n  var unexpectedKeys = Object.keys(inputState).filter(function (key) {\n    return !reducers.hasOwnProperty(key) && !unexpectedKeyCache[key];\n  });\n  unexpectedKeys.forEach(function (key) {\n    unexpectedKeyCache[key] = true;\n  });\n  if (action && action.type === ActionTypes.REPLACE) return;\n\n  if (unexpectedKeys.length > 0) {\n    return \"Unexpected \" + (unexpectedKeys.length > 1 ? 'keys' : 'key') + \" \" + (\"\\\"\" + unexpectedKeys.join('\", \"') + \"\\\" found in \" + argumentName + \". \") + \"Expected to find one of the known reducer keys instead: \" + (\"\\\"\" + reducerKeys.join('\", \"') + \"\\\". Unexpected keys will be ignored.\");\n  }\n}\n\nfunction assertReducerShape(reducers) {\n  Object.keys(reducers).forEach(function (key) {\n    var reducer = reducers[key];\n    var initialState = reducer(undefined, {\n      type: ActionTypes.INIT\n    });\n\n    if (typeof initialState === 'undefined') {\n      throw new Error(  true ? formatProdErrorMessage(12) : 0);\n    }\n\n    if (typeof reducer(undefined, {\n      type: ActionTypes.PROBE_UNKNOWN_ACTION()\n    }) === 'undefined') {\n      throw new Error(  true ? formatProdErrorMessage(13) : 0);\n    }\n  });\n}\n/**\n * Turns an object whose values are different reducer functions, into a single\n * reducer function. It will call every child reducer, and gather their results\n * into a single state object, whose keys correspond to the keys of the passed\n * reducer functions.\n *\n * @param {Object} reducers An object whose values correspond to different\n * reducer functions that need to be combined into one. One handy way to obtain\n * it is to use ES6 `import * as reducers` syntax. The reducers may never return\n * undefined for any action. Instead, they should return their initial state\n * if the state passed to them was undefined, and the current state for any\n * unrecognized action.\n *\n * @returns {Function} A reducer function that invokes every reducer inside the\n * passed object, and builds a state object with the same shape.\n */\n\n\nfunction combineReducers(reducers) {\n  var reducerKeys = Object.keys(reducers);\n  var finalReducers = {};\n\n  for (var i = 0; i < reducerKeys.length; i++) {\n    var key = reducerKeys[i];\n\n    if (false) {}\n\n    if (typeof reducers[key] === 'function') {\n      finalReducers[key] = reducers[key];\n    }\n  }\n\n  var finalReducerKeys = Object.keys(finalReducers); // This is used to make sure we don't warn about the same\n  // keys multiple times.\n\n  var unexpectedKeyCache;\n\n  if (false) {}\n\n  var shapeAssertionError;\n\n  try {\n    assertReducerShape(finalReducers);\n  } catch (e) {\n    shapeAssertionError = e;\n  }\n\n  return function combination(state, action) {\n    if (state === void 0) {\n      state = {};\n    }\n\n    if (shapeAssertionError) {\n      throw shapeAssertionError;\n    }\n\n    if (false) { var warningMessage; }\n\n    var hasChanged = false;\n    var nextState = {};\n\n    for (var _i = 0; _i < finalReducerKeys.length; _i++) {\n      var _key = finalReducerKeys[_i];\n      var reducer = finalReducers[_key];\n      var previousStateForKey = state[_key];\n      var nextStateForKey = reducer(previousStateForKey, action);\n\n      if (typeof nextStateForKey === 'undefined') {\n        var actionType = action && action.type;\n        throw new Error(  true ? formatProdErrorMessage(14) : 0);\n      }\n\n      nextState[_key] = nextStateForKey;\n      hasChanged = hasChanged || nextStateForKey !== previousStateForKey;\n    }\n\n    hasChanged = hasChanged || finalReducerKeys.length !== Object.keys(state).length;\n    return hasChanged ? nextState : state;\n  };\n}\n\nfunction bindActionCreator(actionCreator, dispatch) {\n  return function () {\n    return dispatch(actionCreator.apply(this, arguments));\n  };\n}\n/**\n * Turns an object whose values are action creators, into an object with the\n * same keys, but with every function wrapped into a `dispatch` call so they\n * may be invoked directly. This is just a convenience method, as you can call\n * `store.dispatch(MyActionCreators.doSomething())` yourself just fine.\n *\n * For convenience, you can also pass an action creator as the first argument,\n * and get a dispatch wrapped function in return.\n *\n * @param {Function|Object} actionCreators An object whose values are action\n * creator functions. One handy way to obtain it is to use ES6 `import * as`\n * syntax. You may also pass a single function.\n *\n * @param {Function} dispatch The `dispatch` function available on your Redux\n * store.\n *\n * @returns {Function|Object} The object mimicking the original object, but with\n * every action creator wrapped into the `dispatch` call. If you passed a\n * function as `actionCreators`, the return value will also be a single\n * function.\n */\n\n\nfunction bindActionCreators(actionCreators, dispatch) {\n  if (typeof actionCreators === 'function') {\n    return bindActionCreator(actionCreators, dispatch);\n  }\n\n  if (typeof actionCreators !== 'object' || actionCreators === null) {\n    throw new Error(  true ? formatProdErrorMessage(16) : 0);\n  }\n\n  var boundActionCreators = {};\n\n  for (var key in actionCreators) {\n    var actionCreator = actionCreators[key];\n\n    if (typeof actionCreator === 'function') {\n      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch);\n    }\n  }\n\n  return boundActionCreators;\n}\n\n/**\n * Composes single-argument functions from right to left. The rightmost\n * function can take multiple arguments as it provides the signature for\n * the resulting composite function.\n *\n * @param {...Function} funcs The functions to compose.\n * @returns {Function} A function obtained by composing the argument functions\n * from right to left. For example, compose(f, g, h) is identical to doing\n * (...args) => f(g(h(...args))).\n */\nfunction compose() {\n  for (var _len = arguments.length, funcs = new Array(_len), _key = 0; _key < _len; _key++) {\n    funcs[_key] = arguments[_key];\n  }\n\n  if (funcs.length === 0) {\n    return function (arg) {\n      return arg;\n    };\n  }\n\n  if (funcs.length === 1) {\n    return funcs[0];\n  }\n\n  return funcs.reduce(function (a, b) {\n    return function () {\n      return a(b.apply(void 0, arguments));\n    };\n  });\n}\n\n/**\n * Creates a store enhancer that applies middleware to the dispatch method\n * of the Redux store. This is handy for a variety of tasks, such as expressing\n * asynchronous actions in a concise manner, or logging every action payload.\n *\n * See `redux-thunk` package as an example of the Redux middleware.\n *\n * Because middleware is potentially asynchronous, this should be the first\n * store enhancer in the composition chain.\n *\n * Note that each middleware will be given the `dispatch` and `getState` functions\n * as named arguments.\n *\n * @param {...Function} middlewares The middleware chain to be applied.\n * @returns {Function} A store enhancer applying the middleware.\n */\n\nfunction applyMiddleware() {\n  for (var _len = arguments.length, middlewares = new Array(_len), _key = 0; _key < _len; _key++) {\n    middlewares[_key] = arguments[_key];\n  }\n\n  return function (createStore) {\n    return function () {\n      var store = createStore.apply(void 0, arguments);\n\n      var _dispatch = function dispatch() {\n        throw new Error(  true ? formatProdErrorMessage(15) : 0);\n      };\n\n      var middlewareAPI = {\n        getState: store.getState,\n        dispatch: function dispatch() {\n          return _dispatch.apply(void 0, arguments);\n        }\n      };\n      var chain = middlewares.map(function (middleware) {\n        return middleware(middlewareAPI);\n      });\n      _dispatch = compose.apply(void 0, chain)(store.dispatch);\n      return _objectSpread2(_objectSpread2({}, store), {}, {\n        dispatch: _dispatch\n      });\n    };\n  };\n}\n\n/*\n * This is a dummy function to check if the function name has been altered by minification.\n * If the function has been minified and NODE_ENV !== 'production', warn the user.\n */\n\nfunction isCrushed() {}\n\nif (false) {}\n\n\n\n\n/***/ })\n\n/******/ \t});\n/************************************************************************/\n/******/ \t// The module cache\n/******/ \tvar __webpack_module_cache__ = {};\n/******/ \t\n/******/ \t// The require function\n/******/ \tfunction __nested_webpack_require_205024__(moduleId) {\n/******/ \t\t// Check if module is in cache\n/******/ \t\tvar cachedModule = __webpack_module_cache__[moduleId];\n/******/ \t\tif (cachedModule !== undefined) {\n/******/ \t\t\treturn cachedModule.exports;\n/******/ \t\t}\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = __webpack_module_cache__[moduleId] = {\n/******/ \t\t\t// no module.id needed\n/******/ \t\t\t// no module.loaded needed\n/******/ \t\t\texports: {}\n/******/ \t\t};\n/******/ \t\n/******/ \t\t// Execute the module function\n/******/ \t\t__webpack_modules__[moduleId].call(module.exports, module, module.exports, __nested_webpack_require_205024__);\n/******/ \t\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/ \t\n/************************************************************************/\n/******/ \t/* webpack/runtime/compat get default export */\n/******/ \t(() => {\n/******/ \t\t// getDefaultExport function for compatibility with non-harmony modules\n/******/ \t\t__nested_webpack_require_205024__.n = (module) => {\n/******/ \t\t\tvar getter = module && module.__esModule ?\n/******/ \t\t\t\t() => (module['default']) :\n/******/ \t\t\t\t() => (module);\n/******/ \t\t\t__nested_webpack_require_205024__.d(getter, { a: getter });\n/******/ \t\t\treturn getter;\n/******/ \t\t};\n/******/ \t})();\n/******/ \t\n/******/ \t/* webpack/runtime/define property getters */\n/******/ \t(() => {\n/******/ \t\t// define getter functions for harmony exports\n/******/ \t\t__nested_webpack_require_205024__.d = (exports, definition) => {\n/******/ \t\t\tfor(var key in definition) {\n/******/ \t\t\t\tif(__nested_webpack_require_205024__.o(definition, key) && !__nested_webpack_require_205024__.o(exports, key)) {\n/******/ \t\t\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n/******/ \t\t\t\t}\n/******/ \t\t\t}\n/******/ \t\t};\n/******/ \t})();\n/******/ \t\n/******/ \t/* webpack/runtime/hasOwnProperty shorthand */\n/******/ \t(() => {\n/******/ \t\t__nested_webpack_require_205024__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))\n/******/ \t})();\n/******/ \t\n/******/ \t/* webpack/runtime/make namespace object */\n/******/ \t(() => {\n/******/ \t\t// define __esModule on exports\n/******/ \t\t__nested_webpack_require_205024__.r = (exports) => {\n/******/ \t\t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n/******/ \t\t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n/******/ \t\t\t}\n/******/ \t\t\tObject.defineProperty(exports, '__esModule', { value: true });\n/******/ \t\t};\n/******/ \t})();\n/******/ \t\n/************************************************************************/\nvar __nested_webpack_exports__ = {};\n// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.\n(() => {\n/* harmony export */ __nested_webpack_require_205024__.d(__nested_webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _scripts_choices__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_205024__(373);\n/* harmony import */ var _scripts_choices__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_205024__.n(_scripts_choices__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _scripts_interfaces__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_205024__(187);\n/* harmony import */ var _scripts_interfaces__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_205024__.n(_scripts_interfaces__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _scripts_constants__WEBPACK_IMPORTED_MODULE_2__ = __nested_webpack_require_205024__(883);\n/* harmony import */ var _scripts_defaults__WEBPACK_IMPORTED_MODULE_3__ = __nested_webpack_require_205024__(789);\n/* harmony import */ var _scripts_templates__WEBPACK_IMPORTED_MODULE_4__ = __nested_webpack_require_205024__(686);\n\n\n\n\n\n\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((_scripts_choices__WEBPACK_IMPORTED_MODULE_0___default()));\n\n})();\n\n__nested_webpack_exports__ = __nested_webpack_exports__[\"default\"];\n/******/ \treturn __nested_webpack_exports__;\n/******/ })()\n;\n});\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/choices.js/public/assets/scripts/choices.js?");
-
-/***/ }),
-
 /***/ "./node_modules/@formio/core/lib/error/FieldError.js":
 /*!***********************************************************!*\
   !*** ./node_modules/@formio/core/lib/error/FieldError.js ***!
@@ -365,7 +355,7 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.calculateProcessInfo = exports.calculateProcess = exports.calculateProcessSync = exports.shouldCalculate = void 0;\nconst lodash_1 = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./node_modules/@formio/core/lib/utils/index.js\");\nconst shouldCalculate = (context) => {\n    const { component, config } = context;\n    if (!component.calculateValue || ((config === null || config === void 0 ? void 0 : config.server) && !component.calculateServer)) {\n        return false;\n    }\n    return true;\n};\nexports.shouldCalculate = shouldCalculate;\nconst calculateProcessSync = (context) => {\n    const { component, data, scope, path, value } = context;\n    if (!(0, exports.shouldCalculate)(context) || !component.calculateValue) {\n        return;\n    }\n    const calculationContext = scope.fetched\n        ? Object.assign(Object.assign({}, context), { data: Object.assign(Object.assign({}, data), scope.fetched) }) : context;\n    if (!scope.calculated)\n        scope.calculated = [];\n    const newValue = (0, utils_1.evaluate)(component.calculateValue, calculationContext, 'value', false, (context) => {\n        context.value = value || null;\n    });\n    // Only set a new value if it is not \"null\" which would be the case if no calculation occurred.\n    if (newValue !== null) {\n        scope.calculated.push({\n            path,\n            value: newValue,\n        });\n        (0, lodash_1.set)(data, path, newValue);\n    }\n    return;\n};\nexports.calculateProcessSync = calculateProcessSync;\nconst calculateProcess = (context) => __awaiter(void 0, void 0, void 0, function* () {\n    return (0, exports.calculateProcessSync)(context);\n});\nexports.calculateProcess = calculateProcess;\nexports.calculateProcessInfo = {\n    name: 'calculate',\n    process: exports.calculateProcess,\n    processSync: exports.calculateProcessSync,\n    shouldProcess: exports.shouldCalculate,\n};\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/process/calculation/index.js?");
+eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.calculateProcessInfo = exports.calculateProcess = exports.calculateProcessSync = exports.shouldCalculate = void 0;\nconst lodash_1 = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./node_modules/@formio/core/lib/utils/index.js\");\nconst shouldCalculate = (context) => {\n    const { component, config, value, parent } = context;\n    if (!component.calculateValue || ((config === null || config === void 0 ? void 0 : config.server) && !component.calculateServer)) {\n        return false;\n    }\n    if ((0, lodash_1.isUndefined)(value) && (parent === null || parent === void 0 ? void 0 : parent.modelType) === 'nestedArray') {\n        return false;\n    }\n    return true;\n};\nexports.shouldCalculate = shouldCalculate;\nconst calculateProcessSync = (context) => {\n    const { component, data, scope, path, value } = context;\n    if (!(0, exports.shouldCalculate)(context) || !component.calculateValue) {\n        return;\n    }\n    const calculationContext = scope.fetched\n        ? Object.assign(Object.assign({}, context), { data: Object.assign(Object.assign({}, data), scope.fetched) }) : context;\n    if (!scope.calculated)\n        scope.calculated = [];\n    const newValue = (0, utils_1.evaluate)(component.calculateValue, calculationContext, 'value', false, (context) => {\n        context.value = value || null;\n    });\n    // Only set a new value if it is not \"null\" which would be the case if no calculation occurred.\n    if (newValue !== null) {\n        scope.calculated.push({\n            path,\n            value: newValue,\n        });\n        (0, lodash_1.set)(data, path, newValue);\n    }\n    return;\n};\nexports.calculateProcessSync = calculateProcessSync;\nconst calculateProcess = (context) => __awaiter(void 0, void 0, void 0, function* () {\n    return (0, exports.calculateProcessSync)(context);\n});\nexports.calculateProcess = calculateProcess;\nexports.calculateProcessInfo = {\n    name: 'calculate',\n    process: exports.calculateProcess,\n    processSync: exports.calculateProcessSync,\n    shouldProcess: exports.shouldCalculate,\n};\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/process/calculation/index.js?");
 
 /***/ }),
 
@@ -849,7 +839,7 @@ eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _argument
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.validateRequiredInfo = exports.validateRequiredSync = exports.validateRequired = exports.shouldValidate = void 0;\nconst error_1 = __webpack_require__(/*! ../../../error */ \"./node_modules/@formio/core/lib/error/index.js\");\nconst util_1 = __webpack_require__(/*! ../util */ \"./node_modules/@formio/core/lib/process/validation/util.js\");\nconst formUtil_1 = __webpack_require__(/*! ../../../utils/formUtil */ \"./node_modules/@formio/core/lib/utils/formUtil/index.js\");\nconst isAddressComponent = (component) => {\n    return component.type === 'address';\n};\nconst isDayComponent = (component) => {\n    return component.type === 'day';\n};\nconst isAddressComponentDataObject = (value) => {\n    return (value !== null &&\n        typeof value === 'object' &&\n        value.mode &&\n        value.address &&\n        typeof value.address === 'object');\n};\n// Checkboxes and selectboxes consider false to be falsy, whereas other components with\n// settable values (e.g. radio, select, datamap, container, etc.) consider it truthy\nconst isComponentThatCannotHaveFalseValue = (component) => {\n    return component.type === 'checkbox' || component.type === 'selectboxes';\n};\nconst valueIsPresent = (value, considerFalseTruthy, isNestedDatatype) => {\n    // Evaluate for 3 out of 6 falsy values (\"\", null, undefined), don't check for 0\n    // and only check for false under certain conditions\n    if (value === null ||\n        value === undefined ||\n        value === '' ||\n        (!considerFalseTruthy && value === false)) {\n        return false;\n    }\n    // Evaluate for empty object\n    else if ((0, util_1.isEmptyObject)(value)) {\n        return false;\n    }\n    // Evaluate for empty array\n    else if (Array.isArray(value) && value.length === 0) {\n        return false;\n    }\n    // Recursively evaluate\n    else if (typeof value === 'object' && !isNestedDatatype) {\n        return Object.values(value).some((val) => valueIsPresent(val, considerFalseTruthy, isNestedDatatype));\n    }\n    // If value is an array, check it's children have value\n    else if (Array.isArray(value) && value.length) {\n        return (0, util_1.doesArrayDataHaveValue)(value);\n    }\n    return true;\n};\nconst shouldValidate = (context) => {\n    var _a;\n    const { component } = context;\n    return !!((_a = component.validate) === null || _a === void 0 ? void 0 : _a.required);\n};\nexports.shouldValidate = shouldValidate;\nconst validateRequired = (context) => __awaiter(void 0, void 0, void 0, function* () {\n    return (0, exports.validateRequiredSync)(context);\n});\nexports.validateRequired = validateRequired;\nconst validateRequiredSync = (context) => {\n    const error = new error_1.FieldError('required', Object.assign(Object.assign({}, context), { setting: true }));\n    const { component, value } = context;\n    if (!(0, exports.shouldValidate)(context)) {\n        return null;\n    }\n    if (isAddressComponent(component) && isAddressComponentDataObject(value)) {\n        return (0, util_1.isEmptyObject)(value.address)\n            ? error\n            : Object.values(value.address).every((val) => !!val)\n                ? null\n                : error;\n    }\n    else if (isDayComponent(component) && value === '00/00/0000') {\n        return error;\n    }\n    else if (isComponentThatCannotHaveFalseValue(component)) {\n        return !valueIsPresent(value, false, (0, formUtil_1.isComponentNestedDataType)(component)) ? error : null;\n    }\n    return !valueIsPresent(value, true, (0, formUtil_1.isComponentNestedDataType)(component)) ? error : null;\n};\nexports.validateRequiredSync = validateRequiredSync;\nexports.validateRequiredInfo = {\n    name: 'validateRequired',\n    process: exports.validateRequired,\n    processSync: exports.validateRequiredSync,\n    shouldProcess: exports.shouldValidate,\n};\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/process/validation/rules/validateRequired.js?");
+eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.validateRequiredInfo = exports.validateRequiredSync = exports.validateRequired = exports.shouldValidate = void 0;\nconst error_1 = __webpack_require__(/*! ../../../error */ \"./node_modules/@formio/core/lib/error/index.js\");\nconst util_1 = __webpack_require__(/*! ../util */ \"./node_modules/@formio/core/lib/process/validation/util.js\");\nconst formUtil_1 = __webpack_require__(/*! ../../../utils/formUtil */ \"./node_modules/@formio/core/lib/utils/formUtil/index.js\");\nconst isAddressComponent = (component) => {\n    return component.type === 'address';\n};\nconst isDayComponent = (component) => {\n    return component.type === 'day';\n};\nconst isAddressComponentDataObject = (value) => {\n    return (value !== null &&\n        typeof value === 'object' &&\n        value.mode &&\n        value.address &&\n        typeof value.address === 'object');\n};\n// Checkboxes and selectboxes consider false to be falsy, whereas other components with\n// settable values (e.g. radio, select, datamap, container, etc.) consider it truthy\nconst isComponentThatCannotHaveFalseValue = (component) => {\n    return component.type === 'checkbox' || component.type === 'selectboxes';\n};\nconst valueIsPresent = (value, considerFalseTruthy, isNestedDatatype) => {\n    // Evaluate for 3 out of 6 falsy values (\"\", null, undefined), don't check for 0\n    // and only check for false under certain conditions\n    if (value === null ||\n        value === undefined ||\n        value === '' ||\n        (!considerFalseTruthy && value === false)) {\n        return false;\n    }\n    // Evaluate for empty object\n    else if ((0, util_1.isEmptyObject)(value)) {\n        return false;\n    }\n    // Evaluate for empty array\n    else if (Array.isArray(value) && value.length === 0) {\n        return false;\n    }\n    // Recursively evaluate\n    else if (typeof value === 'object' && !isNestedDatatype) {\n        return Object.values(value).some((val) => valueIsPresent(val, considerFalseTruthy, isNestedDatatype));\n    }\n    // If value is an array, check it's children have value\n    else if (Array.isArray(value) && value.length) {\n        return (0, util_1.doesArrayDataHaveValue)(value);\n    }\n    return true;\n};\nconst shouldValidate = (context) => {\n    var _a;\n    const { component } = context;\n    return !!((_a = component.validate) === null || _a === void 0 ? void 0 : _a.required);\n};\nexports.shouldValidate = shouldValidate;\nconst validateRequired = (context) => __awaiter(void 0, void 0, void 0, function* () {\n    return (0, exports.validateRequiredSync)(context);\n});\nexports.validateRequired = validateRequired;\nconst validateRequiredSync = (context) => {\n    const error = new error_1.FieldError('required', Object.assign(Object.assign({}, context), { setting: true }));\n    const { component, value } = context;\n    if (!(0, exports.shouldValidate)(context)) {\n        return null;\n    }\n    if (isAddressComponent(component) && isAddressComponentDataObject(value)) {\n        return (0, util_1.isEmptyObject)(value.address)\n            ? error\n            : Object.entries(value.address)\n                .filter(([key]) => !['address2'].includes(key))\n                .every(([, val]) => !!val)\n                ? null\n                : error;\n    }\n    else if (isDayComponent(component) && value === '00/00/0000') {\n        return error;\n    }\n    else if (isComponentThatCannotHaveFalseValue(component)) {\n        return !valueIsPresent(value, false, (0, formUtil_1.isComponentNestedDataType)(component)) ? error : null;\n    }\n    return !valueIsPresent(value, true, (0, formUtil_1.isComponentNestedDataType)(component)) ? error : null;\n};\nexports.validateRequiredSync = validateRequiredSync;\nexports.validateRequiredInfo = {\n    name: 'validateRequired',\n    process: exports.validateRequired,\n    processSync: exports.validateRequiredSync,\n    shouldProcess: exports.shouldValidate,\n};\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/process/validation/rules/validateRequired.js?");
 
 /***/ }),
 
@@ -1619,7 +1609,7 @@ eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _argument
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.eachComponentData = void 0;\nconst lodash_1 = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\nconst index_1 = __webpack_require__(/*! ./index */ \"./node_modules/@formio/core/lib/utils/formUtil/index.js\");\nconst eachComponent_1 = __webpack_require__(/*! ./eachComponent */ \"./node_modules/@formio/core/lib/utils/formUtil/eachComponent.js\");\n/**\n * Iterates through each component as well as its data, and triggers a callback for every component along\n * with the contextual data for that component in addition to the absolute path for that component.\n * @param components - The array of JSON components to iterate through.\n * @param data - The contextual data object for the components.\n * @param fn - The callback function to trigger for each component following the signature (component, data, row, path, components, index, parent).\n * @param parent - The parent component.\n * @param includeAll\n * @returns\n */\nconst eachComponentData = (components, data, fn, includeAll = false, local = false, parent, parentPaths) => {\n    if (!components) {\n        return;\n    }\n    return (0, eachComponent_1.eachComponent)(components, (component, compPath, componentComponents, compParent, compPaths) => {\n        const row = (0, index_1.getContextualRowData)(component, data, compPaths, local);\n        if (fn(component, data, row, (component.modelType === 'none' ? compPaths === null || compPaths === void 0 ? void 0 : compPaths.fullPath : compPaths === null || compPaths === void 0 ? void 0 : compPaths.dataPath) || '', componentComponents, compPaths === null || compPaths === void 0 ? void 0 : compPaths.dataIndex, compParent, compPaths) === true) {\n            (0, index_1.resetComponentScope)(component);\n            return true;\n        }\n        if ((0, index_1.isComponentNestedDataType)(component)) {\n            const value = (0, lodash_1.get)(data, local ? (compPaths === null || compPaths === void 0 ? void 0 : compPaths.localDataPath) || '' : (compPaths === null || compPaths === void 0 ? void 0 : compPaths.dataPath) || '');\n            if ((0, index_1.getModelType)(component) === 'nestedArray' ||\n                (0, index_1.getModelType)(component) === 'nestedDataArray') {\n                if (Array.isArray(value) && value.length) {\n                    for (let i = 0; i < value.length; i++) {\n                        if (compPaths) {\n                            compPaths.dataIndex = i;\n                        }\n                        (0, exports.eachComponentData)(component.components, data, fn, includeAll, local, component, compPaths);\n                    }\n                }\n                else if (includeAll || (0, lodash_1.isUndefined)(value)) {\n                    (0, exports.eachComponentData)(component.components, data, fn, includeAll, local, component, compPaths);\n                }\n                (0, index_1.resetComponentScope)(component);\n                return true;\n            }\n            else {\n                if (!includeAll && !(0, index_1.shouldProcessComponent)(component, row, value)) {\n                    (0, index_1.resetComponentScope)(component);\n                    return true;\n                }\n                (0, exports.eachComponentData)(component.components, data, fn, includeAll, local, component, compPaths);\n            }\n            (0, index_1.resetComponentScope)(component);\n            return true;\n        }\n        else if (!component.type || (0, index_1.getModelType)(component) === 'none') {\n            const info = (0, index_1.componentInfo)(component);\n            if (info.hasColumns) {\n                component.columns.forEach((column) => (0, exports.eachComponentData)(column.components, data, fn, includeAll, local, component, compPaths));\n            }\n            else if (info.hasRows) {\n                component.rows.forEach((row) => {\n                    if (Array.isArray(row)) {\n                        row.forEach((row) => (0, exports.eachComponentData)(row.components, data, fn, includeAll, local, component, compPaths));\n                    }\n                });\n            }\n            else if (info.hasComps) {\n                (0, exports.eachComponentData)(component.components, data, fn, includeAll, local, component, compPaths);\n            }\n            (0, index_1.resetComponentScope)(component);\n            return true;\n        }\n        (0, index_1.resetComponentScope)(component);\n        return false;\n    }, true, parentPaths, parent);\n};\nexports.eachComponentData = eachComponentData;\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/utils/formUtil/eachComponentData.js?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.eachComponentData = void 0;\nconst lodash_1 = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\nconst index_1 = __webpack_require__(/*! ./index */ \"./node_modules/@formio/core/lib/utils/formUtil/index.js\");\nconst eachComponent_1 = __webpack_require__(/*! ./eachComponent */ \"./node_modules/@formio/core/lib/utils/formUtil/eachComponent.js\");\n/**\n * Iterates through each component as well as its data, and triggers a callback for every component along\n * with the contextual data for that component in addition to the absolute path for that component.\n * @param components - The array of JSON components to iterate through.\n * @param data - The contextual data object for the components.\n * @param fn - The callback function to trigger for each component following the signature (component, data, row, path, components, index, parent).\n * @param parent - The parent component.\n * @param includeAll\n * @returns\n */\nconst eachComponentData = (components, data, fn, includeAll = false, local = false, parent, parentPaths, noScopeReset) => {\n    if (!components) {\n        return;\n    }\n    return (0, eachComponent_1.eachComponent)(components, (component, compPath, componentComponents, compParent, compPaths) => {\n        const row = (0, index_1.getContextualRowData)(component, data, compPaths, local);\n        if (fn(component, data, row, (component.modelType === 'none' ? compPaths === null || compPaths === void 0 ? void 0 : compPaths.fullPath : compPaths === null || compPaths === void 0 ? void 0 : compPaths.dataPath) || '', componentComponents, compPaths === null || compPaths === void 0 ? void 0 : compPaths.dataIndex, compParent, compPaths) === true) {\n            if (!noScopeReset) {\n                (0, index_1.resetComponentScope)(component);\n            }\n            return true;\n        }\n        if ((0, index_1.isComponentNestedDataType)(component)) {\n            const value = (0, lodash_1.get)(data, local ? (compPaths === null || compPaths === void 0 ? void 0 : compPaths.localDataPath) || '' : (compPaths === null || compPaths === void 0 ? void 0 : compPaths.dataPath) || '');\n            if ((0, index_1.getModelType)(component) === 'nestedArray' ||\n                (0, index_1.getModelType)(component) === 'nestedDataArray') {\n                if (Array.isArray(value) && value.length) {\n                    for (let i = 0; i < value.length; i++) {\n                        if (compPaths) {\n                            compPaths.dataIndex = i;\n                        }\n                        (0, exports.eachComponentData)(component.components, data, fn, includeAll, local, component, compPaths, noScopeReset);\n                    }\n                }\n                else if (includeAll || (0, lodash_1.isUndefined)(value)) {\n                    (0, exports.eachComponentData)(component.components, data, fn, includeAll, local, component, compPaths, noScopeReset);\n                }\n                if (!noScopeReset) {\n                    (0, index_1.resetComponentScope)(component);\n                }\n                return true;\n            }\n            else {\n                if (!includeAll && !(0, index_1.shouldProcessComponent)(component, row, value)) {\n                    if (!noScopeReset) {\n                        (0, index_1.resetComponentScope)(component);\n                    }\n                    return true;\n                }\n                (0, exports.eachComponentData)(component.components, data, fn, includeAll, local, component, compPaths, noScopeReset);\n            }\n            if (!noScopeReset) {\n                (0, index_1.resetComponentScope)(component);\n            }\n            return true;\n        }\n        else if (!component.type || (0, index_1.getModelType)(component) === 'none') {\n            const info = (0, index_1.componentInfo)(component);\n            if (info.hasColumns) {\n                component.columns.forEach((column) => (0, exports.eachComponentData)(column.components, data, fn, includeAll, local, component, compPaths, noScopeReset));\n            }\n            else if (info.hasRows) {\n                component.rows.forEach((row) => {\n                    if (Array.isArray(row)) {\n                        row.forEach((row) => (0, exports.eachComponentData)(row.components, data, fn, includeAll, local, component, compPaths, noScopeReset));\n                    }\n                });\n            }\n            else if (info.hasComps) {\n                (0, exports.eachComponentData)(component.components, data, fn, includeAll, local, component, compPaths, noScopeReset);\n            }\n            if (!noScopeReset) {\n                (0, index_1.resetComponentScope)(component);\n            }\n            return true;\n        }\n        if (!noScopeReset) {\n            (0, index_1.resetComponentScope)(component);\n        }\n        return false;\n    }, true, parentPaths, parent);\n};\nexports.eachComponentData = eachComponentData;\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/utils/formUtil/eachComponentData.js?");
 
 /***/ }),
 
@@ -1630,7 +1620,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.eachComponentDataAsync = void 0;\nconst lodash_1 = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\nconst index_1 = __webpack_require__(/*! ./index */ \"./node_modules/@formio/core/lib/utils/formUtil/index.js\");\nconst eachComponentAsync_1 = __webpack_require__(/*! ./eachComponentAsync */ \"./node_modules/@formio/core/lib/utils/formUtil/eachComponentAsync.js\");\n// Async each component data.\nconst eachComponentDataAsync = (components_1, data_1, fn_1, ...args_1) => __awaiter(void 0, [components_1, data_1, fn_1, ...args_1], void 0, function* (components, data, fn, includeAll = false, local = false, parent, parentPaths) {\n    if (!components) {\n        return;\n    }\n    return yield (0, eachComponentAsync_1.eachComponentAsync)(components, (component, compPath, componentComponents, compParent, compPaths) => __awaiter(void 0, void 0, void 0, function* () {\n        const row = (0, index_1.getContextualRowData)(component, data, compPaths, local);\n        if ((yield fn(component, data, row, (component.modelType === 'none' ? compPaths === null || compPaths === void 0 ? void 0 : compPaths.fullPath : compPaths === null || compPaths === void 0 ? void 0 : compPaths.dataPath) || '', componentComponents, compPaths === null || compPaths === void 0 ? void 0 : compPaths.dataIndex, compParent)) === true) {\n            (0, index_1.resetComponentScope)(component);\n            return true;\n        }\n        if ((0, index_1.isComponentNestedDataType)(component)) {\n            const value = (0, lodash_1.get)(data, local ? (compPaths === null || compPaths === void 0 ? void 0 : compPaths.localDataPath) || '' : (compPaths === null || compPaths === void 0 ? void 0 : compPaths.dataPath) || '');\n            if ((0, index_1.getModelType)(component) === 'nestedArray' ||\n                (0, index_1.getModelType)(component) === 'nestedDataArray') {\n                if (Array.isArray(value) && value.length) {\n                    for (let i = 0; i < value.length; i++) {\n                        if (compPaths) {\n                            compPaths.dataIndex = i;\n                        }\n                        yield (0, exports.eachComponentDataAsync)(component.components, data, fn, includeAll, local, component, compPaths);\n                    }\n                }\n                else if (includeAll) {\n                    yield (0, exports.eachComponentDataAsync)(component.components, data, fn, includeAll, local, component, compPaths);\n                }\n                (0, index_1.resetComponentScope)(component);\n                return true;\n            }\n            else {\n                if (!includeAll && !(0, index_1.shouldProcessComponent)(component, row, value)) {\n                    (0, index_1.resetComponentScope)(component);\n                    return true;\n                }\n                yield (0, exports.eachComponentDataAsync)(component.components, data, fn, includeAll, local, component, compPaths);\n            }\n            (0, index_1.resetComponentScope)(component);\n            return true;\n        }\n        else if (!component.type || (0, index_1.getModelType)(component) === 'none') {\n            const info = (0, index_1.componentInfo)(component);\n            if (info.hasColumns) {\n                const columnsComponent = component;\n                for (const column of columnsComponent.columns) {\n                    yield (0, exports.eachComponentDataAsync)(column.components, data, fn, includeAll, local, component, compPaths);\n                }\n            }\n            else if (info.hasRows) {\n                const rowsComponent = component;\n                for (const rowArray of rowsComponent.rows) {\n                    if (Array.isArray(rowArray)) {\n                        for (const row of rowArray) {\n                            yield (0, exports.eachComponentDataAsync)(row.components, data, fn, includeAll, local, component, compPaths);\n                        }\n                    }\n                }\n            }\n            else if (info.hasComps) {\n                yield (0, exports.eachComponentDataAsync)(component.components, data, fn, includeAll, local, component, compPaths);\n            }\n            (0, index_1.resetComponentScope)(component);\n            return true;\n        }\n        (0, index_1.resetComponentScope)(component);\n        return false;\n    }), true, parentPaths, parent);\n});\nexports.eachComponentDataAsync = eachComponentDataAsync;\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/utils/formUtil/eachComponentDataAsync.js?");
+eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.eachComponentDataAsync = void 0;\nconst lodash_1 = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\nconst index_1 = __webpack_require__(/*! ./index */ \"./node_modules/@formio/core/lib/utils/formUtil/index.js\");\nconst eachComponentAsync_1 = __webpack_require__(/*! ./eachComponentAsync */ \"./node_modules/@formio/core/lib/utils/formUtil/eachComponentAsync.js\");\n// Async each component data.\nconst eachComponentDataAsync = (components_1, data_1, fn_1, ...args_1) => __awaiter(void 0, [components_1, data_1, fn_1, ...args_1], void 0, function* (components, data, fn, includeAll = false, local = false, parent, parentPaths, noScopeReset) {\n    if (!components) {\n        return;\n    }\n    return yield (0, eachComponentAsync_1.eachComponentAsync)(components, (component, compPath, componentComponents, compParent, compPaths) => __awaiter(void 0, void 0, void 0, function* () {\n        const row = (0, index_1.getContextualRowData)(component, data, compPaths, local);\n        if ((yield fn(component, data, row, (component.modelType === 'none' ? compPaths === null || compPaths === void 0 ? void 0 : compPaths.fullPath : compPaths === null || compPaths === void 0 ? void 0 : compPaths.dataPath) || '', componentComponents, compPaths === null || compPaths === void 0 ? void 0 : compPaths.dataIndex, compParent)) === true) {\n            if (!noScopeReset) {\n                (0, index_1.resetComponentScope)(component);\n            }\n            return true;\n        }\n        if ((0, index_1.isComponentNestedDataType)(component)) {\n            const value = (0, lodash_1.get)(data, local ? (compPaths === null || compPaths === void 0 ? void 0 : compPaths.localDataPath) || '' : (compPaths === null || compPaths === void 0 ? void 0 : compPaths.dataPath) || '');\n            if ((0, index_1.getModelType)(component) === 'nestedArray' ||\n                (0, index_1.getModelType)(component) === 'nestedDataArray') {\n                if (Array.isArray(value) && value.length) {\n                    for (let i = 0; i < value.length; i++) {\n                        if (compPaths) {\n                            compPaths.dataIndex = i;\n                        }\n                        yield (0, exports.eachComponentDataAsync)(component.components, data, fn, includeAll, local, component, compPaths, noScopeReset);\n                    }\n                }\n                else if (includeAll) {\n                    yield (0, exports.eachComponentDataAsync)(component.components, data, fn, includeAll, local, component, compPaths, noScopeReset);\n                }\n                if (!noScopeReset) {\n                    (0, index_1.resetComponentScope)(component);\n                }\n                return true;\n            }\n            else {\n                if (!includeAll && !(0, index_1.shouldProcessComponent)(component, row, value)) {\n                    if (!noScopeReset) {\n                        (0, index_1.resetComponentScope)(component);\n                    }\n                    return true;\n                }\n                yield (0, exports.eachComponentDataAsync)(component.components, data, fn, includeAll, local, component, compPaths, noScopeReset);\n            }\n            if (!noScopeReset) {\n                (0, index_1.resetComponentScope)(component);\n            }\n            return true;\n        }\n        else if (!component.type || (0, index_1.getModelType)(component) === 'none') {\n            const info = (0, index_1.componentInfo)(component);\n            if (info.hasColumns) {\n                const columnsComponent = component;\n                for (const column of columnsComponent.columns) {\n                    yield (0, exports.eachComponentDataAsync)(column.components, data, fn, includeAll, local, component, compPaths, noScopeReset);\n                }\n            }\n            else if (info.hasRows) {\n                const rowsComponent = component;\n                for (const rowArray of rowsComponent.rows) {\n                    if (Array.isArray(rowArray)) {\n                        for (const row of rowArray) {\n                            yield (0, exports.eachComponentDataAsync)(row.components, data, fn, includeAll, local, component, compPaths, noScopeReset);\n                        }\n                    }\n                }\n            }\n            else if (info.hasComps) {\n                yield (0, exports.eachComponentDataAsync)(component.components, data, fn, includeAll, local, component, compPaths, noScopeReset);\n            }\n            if (!noScopeReset) {\n                (0, index_1.resetComponentScope)(component);\n            }\n            return true;\n        }\n        if (!noScopeReset) {\n            (0, index_1.resetComponentScope)(component);\n        }\n        return false;\n    }), true, parentPaths, parent);\n});\nexports.eachComponentDataAsync = eachComponentDataAsync;\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/utils/formUtil/eachComponentDataAsync.js?");
 
 /***/ }),
 
@@ -1641,7 +1631,7 @@ eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _argument
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.eachComponentDataAsync = exports.eachComponentAsync = exports.eachComponentData = exports.eachComponent = exports.normalizeContext = exports.getComponentErrorField = exports.compareSelectResourceWithObjectTypeValues = exports.isSelectResourceWithObjectValue = exports.getItemTemplateKeys = exports.isComponentDataEmpty = exports.getEmptyValue = exports.findComponent = exports.applyFormChanges = exports.generateFormChange = exports.getStrings = exports.getValue = exports.escapeRegExCharacters = exports.formatAsCurrency = exports.parseFloatExt = exports.hasCondition = exports.removeComponent = exports.findComponents = exports.searchComponents = exports.getComponent = exports.matchComponent = exports.isLayoutComponent = exports.getComponentValue = exports.getComponentData = exports.componentInfo = exports.shouldProcessComponent = exports.getComponentLocalData = exports.getContextualRowData = exports.getContextualRowPath = exports.getComponentKey = exports.getComponentFromPath = exports.getBestMatch = exports.componentMatches = exports.getStringFromComponentPath = exports.getComponentPaths = exports.componentPath = exports.resetComponentScope = exports.setComponentScope = exports.isComponentNestedDataType = exports.getModelType = exports.MODEL_TYPES_OF_KNOWN_COMPONENTS = exports.uniqueName = exports.guid = exports.flattenComponents = void 0;\nconst lodash_1 = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\nconst fast_json_patch_1 = __webpack_require__(/*! fast-json-patch */ \"./node_modules/fast-json-patch/index.mjs\");\nconst types_1 = __webpack_require__(/*! ../../types */ \"./node_modules/@formio/core/lib/types/index.js\");\nconst Evaluator_1 = __webpack_require__(/*! ../Evaluator */ \"./node_modules/@formio/core/lib/utils/Evaluator.js\");\nconst eachComponent_1 = __webpack_require__(/*! ./eachComponent */ \"./node_modules/@formio/core/lib/utils/formUtil/eachComponent.js\");\nObject.defineProperty(exports, \"eachComponent\", ({ enumerable: true, get: function () { return eachComponent_1.eachComponent; } }));\nconst eachComponentData_1 = __webpack_require__(/*! ./eachComponentData */ \"./node_modules/@formio/core/lib/utils/formUtil/eachComponentData.js\");\nObject.defineProperty(exports, \"eachComponentData\", ({ enumerable: true, get: function () { return eachComponentData_1.eachComponentData; } }));\nconst eachComponentAsync_1 = __webpack_require__(/*! ./eachComponentAsync */ \"./node_modules/@formio/core/lib/utils/formUtil/eachComponentAsync.js\");\nObject.defineProperty(exports, \"eachComponentAsync\", ({ enumerable: true, get: function () { return eachComponentAsync_1.eachComponentAsync; } }));\nconst eachComponentDataAsync_1 = __webpack_require__(/*! ./eachComponentDataAsync */ \"./node_modules/@formio/core/lib/utils/formUtil/eachComponentDataAsync.js\");\nObject.defineProperty(exports, \"eachComponentDataAsync\", ({ enumerable: true, get: function () { return eachComponentDataAsync_1.eachComponentDataAsync; } }));\n/**\n * Flatten the form components for data manipulation.\n *\n * @param {Object} components\n *   The components to iterate.\n * @param {Boolean} includeAll\n *   Whether or not to include layout components.\n *\n * @returns {Object}\n *   The flattened components map.\n */\nfunction flattenComponents(components, includeAll = false) {\n    const flattened = {};\n    (0, eachComponent_1.eachComponent)(components, (component, path) => {\n        flattened[path] = component;\n    }, includeAll);\n    return flattened;\n}\nexports.flattenComponents = flattenComponents;\nfunction guid() {\n    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {\n        const r = (Math.random() * 16) | 0;\n        const v = c === 'x' ? r : (r & 0x3) | 0x8;\n        return v.toString(16);\n    });\n}\nexports.guid = guid;\n/**\n * Make a filename guaranteed to be unique.\n * @param name\n * @param template\n * @param evalContext\n * @returns {string}\n */\nfunction uniqueName(name, template, evalContext) {\n    template = template || '{{fileName}}-{{guid}}';\n    //include guid in template anyway, to prevent overwriting issue if filename matches existing file\n    if (!template.includes('{{guid}}')) {\n        template = `${template}-{{guid}}`;\n    }\n    const parts = name.split('.');\n    let fileName = parts.slice(0, parts.length - 1).join('.');\n    const extension = parts.length > 1 ? `.${(0, lodash_1.last)(parts)}` : '';\n    //allow only 100 characters from original name to avoid issues with filename length restrictions\n    fileName = fileName.substr(0, 100);\n    evalContext = Object.assign(evalContext || {}, {\n        fileName,\n        guid: guid(),\n    });\n    //only letters, numbers, dots, dashes, underscores and spaces are allowed. Anything else will be replaced with dash\n    const uniqueName = `${Evaluator_1.Evaluator.interpolate(template, evalContext)}${extension}`.replace(/[^0-9a-zA-Z.\\-_ ]/g, '-');\n    return uniqueName;\n}\nexports.uniqueName = uniqueName;\n/**\n * Defines model types for known components.\n * For now, these will be the only model types supported by the @formio/core library.\n *\n * nestedArray: for components that store their data as an array and have nested components.\n * nestedDataArray: for components that store their data as an array and have nested components, but keeps the value of nested components inside 'data' property.\n * array: for components that store their data as an array.\n * dataObject: for components that store their data in a nested { data: {} } object.\n * object: for components that store their data in an object.\n * map: for components that store their data in a map.\n * content: for components that do not store data.\n * string: for components that store their data as a string.\n * number: for components that store their data as a number.\n * boolean: for components that store their data as a boolean.\n * none: for components that do not store data and should not be included in the submission.\n * any: for components that can store any type of data.\n *\n */\nexports.MODEL_TYPES_OF_KNOWN_COMPONENTS = {\n    nestedArray: ['datagrid', 'editgrid', 'datatable', 'dynamicWizard'],\n    nestedDataArray: ['tagpad'],\n    dataObject: ['form'],\n    object: ['container', 'address'],\n    map: ['datamap'],\n    content: ['htmlelement', 'content'],\n    string: [\n        'textfield',\n        'password',\n        'email',\n        'url',\n        'phoneNumber',\n        'day',\n        'datetime',\n        'time',\n        'signature',\n    ],\n    number: ['number', 'currency'],\n    boolean: ['checkbox', 'radio'],\n    none: ['table', 'well', 'columns', 'fieldset', 'panel', 'tabs'],\n    any: [\n        'survey',\n        'captcha',\n        'textarea',\n        'selectboxes',\n        'tags',\n        'select',\n        'hidden',\n        'button',\n        'datasource',\n        'sketchpad',\n        'reviewpage',\n        'file',\n    ],\n};\nfunction getModelType(component) {\n    // If the component JSON asserts a model type, use that.\n    if (component.modelType) {\n        return component.modelType;\n    }\n    let modelType = 'any';\n    // Otherwise, check for known component types.\n    for (const type of Object.keys(exports.MODEL_TYPES_OF_KNOWN_COMPONENTS)) {\n        if (exports.MODEL_TYPES_OF_KNOWN_COMPONENTS[type].includes(component.type)) {\n            modelType = type;\n            break;\n        }\n    }\n    // Otherwise check for components that assert no value.\n    if (modelType === 'any' && component.input === false) {\n        modelType = 'none';\n    }\n    // To speed up performance of getModelType, we will set the modelType on the component\n    Object.defineProperty(component, 'modelType', {\n        enumerable: false,\n        writable: true,\n        value: modelType,\n    });\n    // Otherwise default to any.\n    return modelType;\n}\nexports.getModelType = getModelType;\nfunction isComponentNestedDataType(component) {\n    return (component.tree ||\n        getModelType(component) === 'nestedArray' ||\n        getModelType(component) === 'nestedDataArray' ||\n        getModelType(component) === 'dataObject' ||\n        getModelType(component) === 'object' ||\n        getModelType(component) === 'map');\n}\nexports.isComponentNestedDataType = isComponentNestedDataType;\nfunction setComponentScope(component, name, value) {\n    if (!component) {\n        return;\n    }\n    if (!component.scope) {\n        Object.defineProperty(component, 'scope', {\n            enumerable: false,\n            configurable: true,\n            writable: true,\n            value: {},\n        });\n    }\n    Object.defineProperty(component.scope, name, {\n        enumerable: false,\n        writable: false,\n        configurable: true,\n        value,\n    });\n}\nexports.setComponentScope = setComponentScope;\nfunction resetComponentScope(component) {\n    if (component.scope) {\n        delete component.scope;\n    }\n}\nexports.resetComponentScope = resetComponentScope;\n/**\n * Return the component path provided the type of the component path.\n * @param component - The component JSON.\n * @param type - The type of path to return.\n * @returns\n */\nfunction componentPath(component, parent, parentPaths, type) {\n    if (!component) {\n        return '';\n    }\n    if (component.component) {\n        component = component.component;\n    }\n    const compModel = getModelType(component);\n    // Relative paths are only referenced from the current form.\n    const relative = type === types_1.ComponentPath.localPath ||\n        type === types_1.ComponentPath.fullLocalPath ||\n        type === types_1.ComponentPath.localDataPath;\n    // Full paths include all layout component ids in the path.\n    const fullPath = type === types_1.ComponentPath.fullPath || type === types_1.ComponentPath.fullLocalPath;\n    // See if this is a data path.\n    const dataPath = type === types_1.ComponentPath.dataPath || type === types_1.ComponentPath.localDataPath;\n    // Determine if this component should include its key.\n    const includeKey = fullPath || (!!component.type && compModel !== 'none');\n    // The key is provided if the component can have data or if we are fetching the full path.\n    const key = includeKey ? getComponentKey(component) : '';\n    if (!parent) {\n        // Return the key if there is no parent.\n        return key;\n    }\n    // Get the parent model type.\n    const parentModel = getModelType(parent);\n    // If there is a parent, then we only return the key if the parent is a nested form and it is a relative path.\n    if (relative && parentModel === 'dataObject') {\n        return key;\n    }\n    // Return the parent path.\n    let parentPath = (parentPaths === null || parentPaths === void 0 ? void 0 : parentPaths.hasOwnProperty(type)) ? parentPaths[type] || '' : '';\n    // For data paths (where we wish to get the path to the data), we need to ensure we append the parent\n    // paths to the end of the path so that any component within this component properly references their data.\n    if (dataPath && parentPath) {\n        if (parentModel === 'nestedArray' || parentModel === 'nestedDataArray') {\n            parentPath += `[${(parentPaths === null || parentPaths === void 0 ? void 0 : parentPaths.dataIndex) || 0}]`;\n        }\n        if (parentModel === 'dataObject' || parentModel === 'nestedDataArray') {\n            parentPath += '.data';\n        }\n    }\n    // Return the parent path with its relative component path (if applicable).\n    return parentPath ? (key ? `${parentPath}.${key}` : parentPath) : key;\n}\nexports.componentPath = componentPath;\n/**\n * This method determines a components paths provided the component JSON, the parent and the parent paths.\n * @param component\n * @param parent\n * @param parentPaths\n * @returns\n */\nfunction getComponentPaths(component, parent, parentPaths) {\n    return {\n        path: componentPath(component, parent, parentPaths, types_1.ComponentPath.path),\n        fullPath: componentPath(component, parent, parentPaths, types_1.ComponentPath.fullPath),\n        localPath: componentPath(component, parent, parentPaths, types_1.ComponentPath.localPath),\n        fullLocalPath: componentPath(component, parent, parentPaths, types_1.ComponentPath.fullLocalPath),\n        dataPath: componentPath(component, parent, parentPaths, types_1.ComponentPath.dataPath),\n        localDataPath: componentPath(component, parent, parentPaths, types_1.ComponentPath.localDataPath),\n        dataIndex: parentPaths === null || parentPaths === void 0 ? void 0 : parentPaths.dataIndex,\n    };\n}\nexports.getComponentPaths = getComponentPaths;\nfunction getStringFromComponentPath(path) {\n    if (!(0, lodash_1.isArray)(path)) {\n        return path;\n    }\n    let strPath = '';\n    path.forEach((part, i) => {\n        if ((0, lodash_1.isNumber)(part)) {\n            strPath += `[${part}]`;\n        }\n        else {\n            strPath += i === 0 ? part : `.${part}`;\n        }\n    });\n    return strPath;\n}\nexports.getStringFromComponentPath = getStringFromComponentPath;\n/**\n * Determines if a component has a match at any of the path types.\n * @param component {Component} - The component JSON to check for matches.\n * @param paths {ComponentPaths} - The current component paths object.\n * @param path {string} - Either the \"form\" or \"data\" path to see if a match occurs.\n * @param dataIndex {number | undefined} - The data index for the current component to match.\n * @param matches {Record<string, ComponentMatch | undefined>} - The current matches object.\n * @param addMatch {(type: ComponentPath | 'key', match: ComponentMatch) => ComponentMatch} - A callback function to allow modules to decorate the match object.\n */\nfunction componentMatches(component, paths, path, dataIndex, matches = {\n    path: undefined,\n    fullPath: undefined,\n    localPath: undefined,\n    dataPath: undefined,\n    localDataPath: undefined,\n    fullLocalPath: undefined,\n    key: undefined,\n}, addMatch = (type, match) => {\n    return match;\n}) {\n    let dataProperty = '';\n    if (component.type === 'selectboxes') {\n        const valuePath = new RegExp(`(\\\\.${(0, lodash_1.escapeRegExp)(component.key)})(\\\\.[^\\\\.]+)$`);\n        const pathMatches = path.match(valuePath);\n        if ((pathMatches === null || pathMatches === void 0 ? void 0 : pathMatches.length) === 3) {\n            dataProperty = pathMatches[2];\n            path = path.replace(valuePath, '$1');\n        }\n    }\n    // Get the current model type.\n    const modelType = getModelType(component);\n    const dataModel = modelType !== 'none' && modelType !== 'content';\n    [\n        types_1.ComponentPath.path,\n        types_1.ComponentPath.fullPath,\n        types_1.ComponentPath.localPath,\n        types_1.ComponentPath.fullLocalPath,\n        types_1.ComponentPath.dataPath,\n        types_1.ComponentPath.localDataPath,\n    ].forEach((type) => {\n        const dataPath = type === types_1.ComponentPath.dataPath || type === types_1.ComponentPath.localDataPath;\n        if (paths[type] === path) {\n            const currentMatch = matches[type];\n            const currentModelType = (currentMatch === null || currentMatch === void 0 ? void 0 : currentMatch.component)\n                ? getModelType(currentMatch.component)\n                : 'none';\n            const currentDataModel = currentModelType !== 'none' && currentModelType !== 'content';\n            if (!currentMatch ||\n                (dataPath && dataModel && currentDataModel) || // Replace the current match if this is a dataPath and both are dataModels.\n                (!dataPath && dataIndex === paths.dataIndex) // Replace the current match if this is not a dataPath and the indexes are the same.\n            ) {\n                if (dataPath) {\n                    const dataPaths = {\n                        dataPath: paths.dataPath || '',\n                        localDataPath: paths.localDataPath || '',\n                    };\n                    if (dataProperty) {\n                        dataPaths.dataPath += dataProperty;\n                        dataPaths.localDataPath += dataProperty;\n                    }\n                    matches[type] = addMatch(type, {\n                        component,\n                        paths: Object.assign(Object.assign({}, paths), dataPaths),\n                    });\n                }\n                else {\n                    matches[type] = addMatch(type, { component, paths });\n                }\n            }\n        }\n    });\n    if (!matches.key && component.key === path) {\n        matches.key = addMatch('key', { component, paths });\n    }\n}\nexports.componentMatches = componentMatches;\nfunction getBestMatch(matches) {\n    if (matches.dataPath) {\n        return matches.dataPath;\n    }\n    if (matches.localDataPath) {\n        return matches.localDataPath;\n    }\n    if (matches.fullPath) {\n        return matches.fullPath;\n    }\n    if (matches.path) {\n        return matches.path;\n    }\n    if (matches.fullLocalPath) {\n        return matches.fullLocalPath;\n    }\n    if (matches.localPath) {\n        return matches.localPath;\n    }\n    if (matches.key) {\n        return matches.key;\n    }\n    return undefined;\n}\nexports.getBestMatch = getBestMatch;\n/**\n * This method performs a fuzzy search for a component within a form provided a number of different\n * paths to search.\n */\nfunction getComponentFromPath(components, path, data, dataIndex, includeAll = false) {\n    const matches = {\n        path: undefined,\n        fullPath: undefined,\n        localPath: undefined,\n        fullLocalPath: undefined,\n        dataPath: undefined,\n        localDataPath: undefined,\n        key: undefined,\n    };\n    if (data) {\n        (0, eachComponentData_1.eachComponentData)(components, data, (component, data, row, compPath, comps, index, parent, paths) => {\n            componentMatches(component, paths || {}, path, dataIndex, matches);\n        }, includeAll);\n    }\n    else {\n        (0, eachComponent_1.eachComponent)(components, (component, compPath, componentComponents, compParent, paths) => {\n            componentMatches(component, paths || {}, path, dataIndex, matches);\n        }, includeAll);\n    }\n    return getBestMatch(matches);\n}\nexports.getComponentFromPath = getComponentFromPath;\n/**\n * Provided a component, this will return the \"data\" key for that component in the contextual data\n * object.\n *\n * @param component\n * @returns\n */\nfunction getComponentKey(component) {\n    if (!component) {\n        return '';\n    }\n    if (component.type === 'checkbox' &&\n        component.inputType === 'radio' &&\n        component.name) {\n        return component.name;\n    }\n    return component.key;\n}\nexports.getComponentKey = getComponentKey;\nfunction getContextualRowPath(component, paths, local) {\n    if (!paths) {\n        return '';\n    }\n    const dataPath = local ? paths.localDataPath : paths.dataPath;\n    return (dataPath === null || dataPath === void 0 ? void 0 : dataPath.replace(new RegExp(`.?${(0, lodash_1.escapeRegExp)(getComponentKey(component))}$`), '')) || '';\n}\nexports.getContextualRowPath = getContextualRowPath;\nfunction getContextualRowData(component, data, paths, local) {\n    const rowPath = getContextualRowPath(component, paths, local);\n    return rowPath ? (0, lodash_1.get)(data, rowPath, null) : data;\n}\nexports.getContextualRowData = getContextualRowData;\nfunction getComponentLocalData(paths, data, local) {\n    var _a;\n    if (local) {\n        return data;\n    }\n    const parentPath = ((_a = paths.dataPath) === null || _a === void 0 ? void 0 : _a.replace(new RegExp(`.?${(0, lodash_1.escapeRegExp)(paths.localDataPath)}$`), '')) || '';\n    return parentPath ? (0, lodash_1.get)(data, parentPath, null) : data;\n}\nexports.getComponentLocalData = getComponentLocalData;\nfunction shouldProcessComponent(comp, row, value) {\n    var _a;\n    if (getModelType(comp) === 'dataObject') {\n        const noReferenceAttached = (value === null || value === void 0 ? void 0 : value._id) ? (0, lodash_1.isEmpty)(value.data) && !(0, lodash_1.has)(value, 'form') : false;\n        const shouldBeCleared = (!comp.hasOwnProperty('clearOnHide') || comp.clearOnHide) &&\n            (comp.hidden || ((_a = comp.scope) === null || _a === void 0 ? void 0 : _a.conditionallyHidden));\n        const shouldSkipProcessingNestedFormData = noReferenceAttached || shouldBeCleared;\n        if (shouldSkipProcessingNestedFormData) {\n            return false;\n        }\n    }\n    return true;\n}\nexports.shouldProcessComponent = shouldProcessComponent;\nfunction componentInfo(component) {\n    const hasColumns = component.columns && Array.isArray(component.columns);\n    const hasRows = component.rows && Array.isArray(component.rows);\n    const hasComps = component.components && Array.isArray(component.components);\n    const isContent = getModelType(component) === 'content';\n    const isLayout = getModelType(component) === 'none';\n    const isInput = !component.hasOwnProperty('input') || !!component.input;\n    return {\n        hasColumns,\n        hasRows,\n        hasComps,\n        layout: hasColumns || hasRows || (hasComps && !isInput) || isLayout || isContent,\n        iterable: hasColumns || hasRows || hasComps || isContent,\n    };\n}\nexports.componentInfo = componentInfo;\n// Provided components, data, and a key, this will return the components data.\nfunction getComponentData(components, data, path) {\n    const compData = { component: null, data: null };\n    (0, eachComponentData_1.eachComponentData)(components, data, (component, data, row, compPath) => {\n        if (compPath === path) {\n            compData.component = component;\n            compData.data = row;\n            return true;\n        }\n    });\n    return compData;\n}\nexports.getComponentData = getComponentData;\nfunction getComponentValue(form, data, path, dataIndex, local) {\n    var _a, _b;\n    const match = getComponentFromPath((form === null || form === void 0 ? void 0 : form.components) || [], path, data, dataIndex);\n    if (!match) {\n        // Fall back to get the value from the data object.\n        return (0, lodash_1.get)(data, path, undefined);\n    }\n    if (local) {\n        return ((_a = match === null || match === void 0 ? void 0 : match.paths) === null || _a === void 0 ? void 0 : _a.localDataPath) ? (0, lodash_1.get)(data, match.paths.localDataPath, undefined) : null;\n    }\n    return ((_b = match === null || match === void 0 ? void 0 : match.paths) === null || _b === void 0 ? void 0 : _b.dataPath) ? (0, lodash_1.get)(data, match.paths.dataPath, undefined) : null;\n}\nexports.getComponentValue = getComponentValue;\n/**\n * Determine if a component is a layout component or not.\n *\n * @param {Object} component\n *   The component to check.\n *\n * @returns {Boolean}\n *   Whether or not the component is a layout component.\n */\nfunction isLayoutComponent(component) {\n    return Boolean((component.columns &&\n        Array.isArray(component.columns)) ||\n        (component.rows && Array.isArray(component.rows)) ||\n        (component.components &&\n            Array.isArray(component.components)));\n}\nexports.isLayoutComponent = isLayoutComponent;\n/**\n * Matches if a component matches the query.\n *\n * @param component\n * @param query\n * @return {boolean}\n */\nfunction matchComponent(component, query, paths) {\n    if ((0, lodash_1.isString)(query)) {\n        return component.key === query || (paths === null || paths === void 0 ? void 0 : paths.localPath) === query || (paths === null || paths === void 0 ? void 0 : paths.path) === query;\n    }\n    else {\n        let matches = false;\n        (0, lodash_1.forOwn)(query, (value, key) => {\n            matches = (0, lodash_1.get)(component, key) === value;\n            if (!matches) {\n                return false;\n            }\n        });\n        return matches;\n    }\n}\nexports.matchComponent = matchComponent;\n/**\n * Get a component by its path.\n *\n * @param {Object} components - The components to iterate.\n * @param {String|Object} path - The key of the component to get, or a query of the component to search.\n * @param {boolean} includeAll - Whether or not to include layout components.\n * @returns {Component} - The component that matches the given key, or undefined if not found.\n */\nfunction getComponent(components, path, includeAll = true, dataIndex) {\n    var _a;\n    return (_a = getComponentFromPath(components, path, undefined, dataIndex, includeAll)) === null || _a === void 0 ? void 0 : _a.component;\n}\nexports.getComponent = getComponent;\n/**\n * Finds a component provided a query of properties of that component.\n *\n * @param components\n * @param query\n * @return {*}\n */\nfunction searchComponents(components, query) {\n    const results = [];\n    (0, eachComponent_1.eachComponent)(components, (component, compPath, components, parent, compPaths) => {\n        if (matchComponent(component, query, compPaths)) {\n            results.push(component);\n        }\n    }, true);\n    return results;\n}\nexports.searchComponents = searchComponents;\n/**\n * Deprecated version of findComponents. Renamed to searchComponents.\n * @param {import('@formio/core').Component[]} components - The components to find components within.\n * @param {object} query - The query to use when searching for the components.\n * @returns {import('@formio/core').Component[]} - The result of the component that is found.\n */\nfunction findComponents(components, query) {\n    console.warn('formio.js/utils findComponents is deprecated. Use searchComponents instead.');\n    return searchComponents(components, query);\n}\nexports.findComponents = findComponents;\n/**\n * Remove a component by path.\n *\n * @param components\n * @param path\n */\nfunction removeComponent(components, path) {\n    // @ts-expect-error - I'm not sure why we're using `pop` here if it's a string\n    const index = path.pop();\n    if (path.length !== 0) {\n        components = (0, lodash_1.get)(components, path);\n    }\n    components.splice(index, 1);\n}\nexports.removeComponent = removeComponent;\n/**\n * Returns if this component has a conditional statement.\n *\n * @param component - The component JSON schema.\n *\n * @returns {boolean} - TRUE - This component has a conditional, FALSE - No conditional provided.\n */\nfunction hasCondition(component) {\n    return Boolean(component.customConditional ||\n        (component.conditional &&\n            (component.conditional.when ||\n                component.conditional.json ||\n                (component.conditional.conjunction &&\n                    ((0, lodash_1.isBoolean)(component.conditional.show) ||\n                        component.conditional.show) &&\n                    !(0, lodash_1.isEmpty)(component.conditional.conditions)))));\n}\nexports.hasCondition = hasCondition;\n/**\n * Extension of standard #parseFloat(value) function, that also clears input string.\n *\n * @param {any} value\n *   The value to parse.\n *\n * @returns {Number}\n *   Parsed value.\n */\nfunction parseFloatExt(value) {\n    return parseFloat((0, lodash_1.isString)(value) ? value.replace(/[^\\de.+-]/gi, '') : value);\n}\nexports.parseFloatExt = parseFloatExt;\n/**\n * Formats provided value in way how Currency component uses it.\n *\n * @param {any} value\n *   The value to format.\n *\n * @returns {String}\n *   Value formatted for Currency component.\n */\nfunction formatAsCurrency(value) {\n    const parsedValue = parseFloatExt(value);\n    if (isNaN(parsedValue)) {\n        return '';\n    }\n    const parts = (0, lodash_1.round)(parsedValue, 2).toString().split('.');\n    parts[0] = (0, lodash_1.chunk)(Array.from(parts[0]).reverse(), 3)\n        .reverse()\n        .map((part) => part.reverse().join(''))\n        .join(',');\n    parts[1] = (0, lodash_1.pad)(parts[1], 2, '0');\n    return parts.join('.');\n}\nexports.formatAsCurrency = formatAsCurrency;\n/**\n * Escapes RegEx characters in provided String value.\n *\n * @param {String} value\n *   String for escaping RegEx characters.\n * @returns {string}\n *   String with escaped RegEx characters.\n */\nfunction escapeRegExCharacters(value) {\n    return value.replace(/[-[\\]/{}()*+?.\\\\^$|]/g, '\\\\$&');\n}\nexports.escapeRegExCharacters = escapeRegExCharacters;\n/**\n * Get the value for a component key, in the given submission.\n *\n * @param {Object} submission\n *   A submission object to search.\n * @param {String} key\n *   A for components API key to search for.\n */\nfunction getValue(submission, key) {\n    const search = (data) => {\n        if ((0, lodash_1.isPlainObject)(data)) {\n            if ((0, lodash_1.has)(data, key)) {\n                return (0, lodash_1.get)(data, key);\n            }\n            let value = null;\n            (0, lodash_1.forOwn)(data, (prop) => {\n                const result = search(prop);\n                if (!(0, lodash_1.isNil)(result)) {\n                    value = result;\n                    return false;\n                }\n            });\n            return value;\n        }\n        else {\n            return null;\n        }\n    };\n    return search(submission.data);\n}\nexports.getValue = getValue;\n/**\n * Iterate over all components in a form and get string values for translation.\n * @param form\n */\nfunction getStrings(form) {\n    const properties = [\n        'label',\n        'title',\n        'legend',\n        'tooltip',\n        'description',\n        'placeholder',\n        'prefix',\n        'suffix',\n        'errorLabel',\n        'content',\n        'html',\n    ];\n    const strings = [];\n    (0, eachComponent_1.eachComponent)(form.components, (component) => {\n        properties.forEach((property) => {\n            if (component.hasOwnProperty(property) && component[property]) {\n                strings.push({\n                    key: component.key,\n                    type: component.type,\n                    property,\n                    string: component[property],\n                });\n            }\n        });\n        if ((!component.dataSrc || component.dataSrc === 'values') &&\n            component.hasOwnProperty('values') &&\n            Array.isArray(component.values) &&\n            component.values.length) {\n            component.values.forEach((value, index) => {\n                strings.push({\n                    key: component.key,\n                    property: `value[${index}].label`,\n                    string: component.values[index].label,\n                });\n            });\n        }\n        // Hard coded values from Day component\n        if (component.type === 'day') {\n            [\n                'day',\n                'month',\n                'year',\n                'Day',\n                'Month',\n                'Year',\n                'january',\n                'february',\n                'march',\n                'april',\n                'may',\n                'june',\n                'july',\n                'august',\n                'september',\n                'october',\n                'november',\n                'december',\n            ].forEach((string) => {\n                strings.push({\n                    key: component.key,\n                    property: 'day',\n                    string,\n                });\n            });\n            if (component.fields.day.placeholder) {\n                strings.push({\n                    key: component.key,\n                    property: 'fields.day.placeholder',\n                    string: component.fields.day.placeholder,\n                });\n            }\n            if (component.fields.month.placeholder) {\n                strings.push({\n                    key: component.key,\n                    property: 'fields.month.placeholder',\n                    string: component.fields.month.placeholder,\n                });\n            }\n            if (component.fields.year.placeholder) {\n                strings.push({\n                    key: component.key,\n                    property: 'fields.year.placeholder',\n                    string: component.fields.year.placeholder,\n                });\n            }\n        }\n        if (component.type === 'editgrid') {\n            const string = component.addAnother || 'Add Another';\n            if (component.addAnother) {\n                strings.push({\n                    key: component.key,\n                    property: 'addAnother',\n                    string,\n                });\n            }\n        }\n        if (component.type === 'select') {\n            ['loading...', 'Type to search'].forEach((string) => {\n                strings.push({\n                    key: component.key,\n                    property: 'select',\n                    string,\n                });\n            });\n        }\n    }, true);\n    return strings;\n}\nexports.getStrings = getStrings;\n// ?????????????????????????\n// questionable section\nfunction generateFormChange(type, data) {\n    let change;\n    switch (type) {\n        case 'add':\n            change = {\n                op: 'add',\n                key: data.component.key,\n                container: data.parent.key, // Parent component\n                path: data.path, // Path to container within parent component.\n                index: data.index, // Index of component in parent container.\n                component: data.component,\n            };\n            break;\n        case 'edit':\n            change = {\n                op: 'edit',\n                key: data.originalComponent.key,\n                patches: (0, fast_json_patch_1.compare)(data.originalComponent, data.component),\n            };\n            // Don't save if nothing changed.\n            if (!change.patches.length) {\n                change = null;\n            }\n            break;\n        case 'remove':\n            change = {\n                op: 'remove',\n                key: data.component.key,\n            };\n            break;\n    }\n    return change;\n}\nexports.generateFormChange = generateFormChange;\nfunction applyFormChanges(form, changes) {\n    const failed = [];\n    changes.forEach(function (change) {\n        let found = false;\n        switch (change.op) {\n            case 'add': {\n                let newComponent = change.component;\n                // Find the container to set the component in.\n                findComponent(form.components, change.container, null, function (parent) {\n                    if (!change.container) {\n                        parent = form;\n                    }\n                    // A move will first run an add so remove any existing components with matching key before inserting.\n                    findComponent(form.components, change.key, null, function (component, path) {\n                        // If found, use the existing component. (If someone else edited it, the changes would be here)\n                        newComponent = component;\n                        removeComponent(form.components, path);\n                    });\n                    found = true;\n                    const container = (0, lodash_1.get)(parent, change.path);\n                    container.splice(change.index, 0, newComponent);\n                });\n                break;\n            }\n            case 'remove':\n                findComponent(form.components, change.key, null, function (component, path) {\n                    found = true;\n                    const oldComponent = (0, lodash_1.get)(form.components, path);\n                    if (oldComponent.key !== component.key) {\n                        path.pop();\n                    }\n                    removeComponent(form.components, path);\n                });\n                break;\n            case 'edit':\n                findComponent(form.components, change.key, null, function (component, path) {\n                    found = true;\n                    try {\n                        const oldComponent = (0, lodash_1.get)(form.components, path);\n                        const newComponent = (0, fast_json_patch_1.applyPatch)(component, change.patches).newDocument;\n                        if (oldComponent.key !== newComponent.key) {\n                            path.pop();\n                        }\n                        (0, lodash_1.set)(form.components, path, newComponent);\n                    }\n                    catch (ignoreErr) {\n                        failed.push(change);\n                    }\n                });\n                break;\n            case 'move':\n                break;\n        }\n        if (!found) {\n            failed.push(change);\n        }\n    });\n    return {\n        form,\n        failed,\n    };\n}\nexports.applyFormChanges = applyFormChanges;\n/**\n * This function will find a component in a form and return the component AND THE PATH to the component in the form.\n * Path to the component is stored as an array of nested components and their indexes.The Path is being filled recursively\n * when you iterating through the nested structure.\n * If the component is not found the callback won't be called and function won't return anything.\n *\n * @param components\n * @param key\n * @param fn\n * @param path\n * @returns {*}\n */\nfunction findComponent(components, key, path, fn) {\n    if (!components)\n        return;\n    path = path || [];\n    if (!key) {\n        return fn(components);\n    }\n    components.forEach(function (component, index) {\n        const newPath = path.slice();\n        // Add an index of the component it iterates through in nested structure\n        newPath.push(index);\n        if (!component)\n            return;\n        if (component.hasOwnProperty('columns') && Array.isArray(component.columns)) {\n            newPath.push('columns');\n            component.columns.forEach(function (column, index) {\n                const colPath = newPath.slice();\n                colPath.push(index);\n                colPath.push('components');\n                findComponent(column.components, key, colPath, fn);\n            });\n        }\n        if (component.hasOwnProperty('rows') && Array.isArray(component.rows)) {\n            newPath.push('rows');\n            component.rows.forEach(function (row, index) {\n                const rowPath = newPath.slice();\n                rowPath.push(index);\n                row.forEach(function (column, index) {\n                    const colPath = rowPath.slice();\n                    colPath.push(index);\n                    colPath.push('components');\n                    findComponent(column.components, key, colPath, fn);\n                });\n            });\n        }\n        if (component.hasOwnProperty('components') && Array.isArray(component.components)) {\n            newPath.push('components');\n            findComponent(component.components, key, newPath, fn);\n        }\n        if (component.key === key) {\n            //Final callback if the component is found\n            fn(component, newPath, components);\n        }\n    });\n}\nexports.findComponent = findComponent;\nconst isCheckboxComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'checkbox';\nconst isDataGridComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'datagrid';\nconst isEditGridComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'editgrid';\nconst isAddressComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'address';\nconst isDataTableComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'datatable';\nconst hasChildComponents = (component) => (component === null || component === void 0 ? void 0 : component.components) != null;\nconst isDateTimeComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'datetime';\nconst isSelectBoxesComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'selectboxes';\nconst isTextAreaComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'textarea';\nconst isTextFieldComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'textfield';\nfunction getEmptyValue(component) {\n    switch (component.type) {\n        case 'textarea':\n        case 'textfield':\n        case 'time':\n        case 'datetime':\n        case 'day':\n            return '';\n        case 'datagrid':\n        case 'editgrid':\n            return [];\n        default:\n            return null;\n    }\n}\nexports.getEmptyValue = getEmptyValue;\nconst replaceBlanks = (value) => {\n    const nbsp = '<p>&nbsp;</p>';\n    const br = '<p><br></p>';\n    const brNbsp = '<p><br>&nbsp;</p>';\n    const regExp = new RegExp(`^${nbsp}|${nbsp}$|^${br}|${br}$|^${brNbsp}|${brNbsp}$`, 'g');\n    return typeof value === 'string' ? value.replace(regExp, '').trim() : value;\n};\nfunction trimBlanks(value) {\n    if (!value) {\n        return value;\n    }\n    if (Array.isArray(value)) {\n        value = value.map((val) => replaceBlanks(val));\n    }\n    else {\n        value = replaceBlanks(value);\n    }\n    return value;\n}\nfunction isValueEmpty(component, value) {\n    const compValueIsEmptyArray = (0, lodash_1.isArray)(value) && value.length === 1 ? (0, lodash_1.isEqual)(value[0], getEmptyValue(component)) : false;\n    return (value == null || value === '' || ((0, lodash_1.isArray)(value) && value.length === 0) || compValueIsEmptyArray);\n}\nfunction isComponentDataEmpty(component, data, path, valueCond) {\n    var _a;\n    const value = (0, lodash_1.isNil)(valueCond) ? (0, lodash_1.get)(data, path) : valueCond;\n    const addressIgnoreProperties = ['mode', 'address'];\n    if (isCheckboxComponent(component)) {\n        return isValueEmpty(component, value) || value === false;\n    }\n    else if (isAddressComponent(component)) {\n        if (Object.keys(value).length === 0) {\n            return true;\n        }\n        return !Object.values((0, lodash_1.omit)(value, addressIgnoreProperties)).some(Boolean);\n    }\n    else if (isDataGridComponent(component) ||\n        isEditGridComponent(component) ||\n        isDataTableComponent(component) ||\n        hasChildComponents(component)) {\n        if ((_a = component.components) === null || _a === void 0 ? void 0 : _a.length) {\n            let childrenEmpty = true;\n            // wrap component in an array to let eachComponentData handle introspection to child components (e.g. this will be different\n            // for data grids versus nested forms, etc.)\n            (0, eachComponentData_1.eachComponentData)([component], data, (thisComponent, data, row, path) => {\n                if (component.key === thisComponent.key)\n                    return;\n                if (!isComponentDataEmpty(thisComponent, data, path)) {\n                    childrenEmpty = false;\n                }\n            });\n            return isValueEmpty(component, value) || childrenEmpty;\n        }\n        return isValueEmpty(component, value);\n    }\n    else if (isDateTimeComponent(component)) {\n        return isValueEmpty(component, value) || value.toString() === 'Invalid date';\n    }\n    else if (isSelectBoxesComponent(component)) {\n        let selectBoxEmpty = true;\n        for (const key in value) {\n            if (value[key]) {\n                selectBoxEmpty = false;\n                break;\n            }\n        }\n        return isValueEmpty(component, value) || selectBoxEmpty;\n    }\n    else if (isTextAreaComponent(component)) {\n        const isPlain = !component.wysiwyg && !component.editor;\n        return isPlain\n            ? typeof value === 'string'\n                ? isValueEmpty(component, value.trim())\n                : isValueEmpty(component, value)\n            : isValueEmpty(component, trimBlanks(value));\n    }\n    else if (isTextFieldComponent(component)) {\n        if (component.allowMultipleMasks && !!component.inputMasks && !!component.inputMasks.length) {\n            return (isValueEmpty(component, value) ||\n                (component.multiple ? value.length === 0 : !value.maskName || !value.value));\n        }\n        return isValueEmpty(component, value === null || value === void 0 ? void 0 : value.toString().trim());\n    }\n    return isValueEmpty(component, value);\n}\nexports.isComponentDataEmpty = isComponentDataEmpty;\n/**\n * Returns the template keys inside the template code.\n * @param {string} template - The template to get the keys from.\n * @returns {Array<string>} - The keys inside the template.\n */\nfunction getItemTemplateKeys(template) {\n    const templateKeys = [];\n    if (!template) {\n        return templateKeys;\n    }\n    const keys = template.match(/({{\\s*(.*?)\\s*}})/g);\n    if (keys) {\n        keys.forEach((key) => {\n            const propKey = key.match(/{{\\s*item\\.(.*?)\\s*}}/);\n            if (propKey && propKey.length > 1) {\n                templateKeys.push(propKey[1]);\n            }\n        });\n    }\n    return templateKeys;\n}\nexports.getItemTemplateKeys = getItemTemplateKeys;\n/**\n * Returns if the component is a select resource with an object for its value.\n * @param {Component} comp - The component to check.\n * @returns {boolean} - TRUE if the component is a select resource with an object for its value; FALSE otherwise.\n */\nfunction isSelectResourceWithObjectValue(comp = {}) {\n    const { reference, dataSrc, valueProperty } = comp;\n    return reference || (dataSrc === 'resource' && (!valueProperty || valueProperty === 'data'));\n}\nexports.isSelectResourceWithObjectValue = isSelectResourceWithObjectValue;\n/**\n * Compares real select resource value with expected value in condition.\n * @param {any} value - current value of selectcomponent.\n * @param {any} comparedValue - expocted value of select component.\n * @param {SelectComponent} conditionComponent - select component on which the condtion is based.\n * @returns {boolean} - TRUE if the select component current value is equal to the expected value; FALSE otherwise.\n */\nfunction compareSelectResourceWithObjectTypeValues(value, comparedValue, conditionComponent) {\n    if (!value || !(0, lodash_1.isPlainObject)(value)) {\n        return false;\n    }\n    const { template, valueProperty } = conditionComponent;\n    if (valueProperty === 'data') {\n        value = { data: value };\n        comparedValue = { data: comparedValue };\n    }\n    return (0, lodash_1.every)(getItemTemplateKeys(template) || [], (k) => (0, lodash_1.isEqual)((0, lodash_1.get)(value, k), (0, lodash_1.get)(comparedValue, k)));\n}\nexports.compareSelectResourceWithObjectTypeValues = compareSelectResourceWithObjectTypeValues;\nfunction getComponentErrorField(component, context) {\n    const toInterpolate = component.errorLabel || component.label || component.placeholder || component.key;\n    return Evaluator_1.Evaluator.interpolate(toInterpolate, context);\n}\nexports.getComponentErrorField = getComponentErrorField;\n/**\n * Normalize a context object so that it contains the correct paths and data, and so it can pass into and out of a sandbox for evaluation\n * @param context\n * @returns\n */\nfunction normalizeContext(context) {\n    const { data, paths, local, path, form, submission, row, component, instance, value, options, scope, } = context;\n    return {\n        path: paths ? paths.localDataPath : path,\n        data: paths ? getComponentLocalData(paths, data, local) : data,\n        paths,\n        form,\n        scope,\n        submission,\n        row,\n        component,\n        instance,\n        value,\n        input: value,\n        options,\n    };\n}\nexports.normalizeContext = normalizeContext;\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/utils/formUtil/index.js?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.eachComponentDataAsync = exports.eachComponentAsync = exports.eachComponentData = exports.eachComponent = exports.normalizeContext = exports.getComponentErrorField = exports.compareSelectResourceWithObjectTypeValues = exports.isSelectResourceWithObjectValue = exports.getItemTemplateKeys = exports.isComponentDataEmpty = exports.getEmptyValue = exports.findComponent = exports.applyFormChanges = exports.generateFormChange = exports.getStrings = exports.getValue = exports.escapeRegExCharacters = exports.formatAsCurrency = exports.parseFloatExt = exports.hasCondition = exports.removeComponent = exports.findComponents = exports.searchComponents = exports.getComponent = exports.matchComponent = exports.isLayoutComponent = exports.getComponentValue = exports.getComponentData = exports.componentInfo = exports.shouldProcessComponent = exports.getComponentLocalData = exports.getContextualRowData = exports.getContextualRowPath = exports.getComponentKey = exports.getComponentFromPath = exports.getBestMatch = exports.componentMatches = exports.getStringFromComponentPath = exports.getComponentPaths = exports.componentPath = exports.resetComponentScope = exports.setComponentScope = exports.isComponentNestedDataType = exports.getModelType = exports.MODEL_TYPES_OF_KNOWN_COMPONENTS = exports.uniqueName = exports.guid = exports.flattenComponents = void 0;\nconst lodash_1 = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\nconst fast_json_patch_1 = __webpack_require__(/*! fast-json-patch */ \"./node_modules/fast-json-patch/index.mjs\");\nconst types_1 = __webpack_require__(/*! ../../types */ \"./node_modules/@formio/core/lib/types/index.js\");\nconst Evaluator_1 = __webpack_require__(/*! ../Evaluator */ \"./node_modules/@formio/core/lib/utils/Evaluator.js\");\nconst eachComponent_1 = __webpack_require__(/*! ./eachComponent */ \"./node_modules/@formio/core/lib/utils/formUtil/eachComponent.js\");\nObject.defineProperty(exports, \"eachComponent\", ({ enumerable: true, get: function () { return eachComponent_1.eachComponent; } }));\nconst eachComponentData_1 = __webpack_require__(/*! ./eachComponentData */ \"./node_modules/@formio/core/lib/utils/formUtil/eachComponentData.js\");\nObject.defineProperty(exports, \"eachComponentData\", ({ enumerable: true, get: function () { return eachComponentData_1.eachComponentData; } }));\nconst eachComponentAsync_1 = __webpack_require__(/*! ./eachComponentAsync */ \"./node_modules/@formio/core/lib/utils/formUtil/eachComponentAsync.js\");\nObject.defineProperty(exports, \"eachComponentAsync\", ({ enumerable: true, get: function () { return eachComponentAsync_1.eachComponentAsync; } }));\nconst eachComponentDataAsync_1 = __webpack_require__(/*! ./eachComponentDataAsync */ \"./node_modules/@formio/core/lib/utils/formUtil/eachComponentDataAsync.js\");\nObject.defineProperty(exports, \"eachComponentDataAsync\", ({ enumerable: true, get: function () { return eachComponentDataAsync_1.eachComponentDataAsync; } }));\n/**\n * Flatten the form components for data manipulation.\n *\n * @param {Object} components\n *   The components to iterate.\n * @param {Boolean} includeAll\n *   Whether or not to include layout components.\n *\n * @returns {Object}\n *   The flattened components map.\n */\nfunction flattenComponents(components, includeAll = false) {\n    const flattened = {};\n    (0, eachComponent_1.eachComponent)(components, (component, path) => {\n        flattened[path] = component;\n    }, includeAll);\n    return flattened;\n}\nexports.flattenComponents = flattenComponents;\nfunction guid() {\n    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {\n        const r = (Math.random() * 16) | 0;\n        const v = c === 'x' ? r : (r & 0x3) | 0x8;\n        return v.toString(16);\n    });\n}\nexports.guid = guid;\n/**\n * Make a filename guaranteed to be unique.\n * @param name\n * @param template\n * @param evalContext\n * @returns {string}\n */\nfunction uniqueName(name, template, evalContext) {\n    template = template || '{{fileName}}-{{guid}}';\n    //include guid in template anyway, to prevent overwriting issue if filename matches existing file\n    if (!template.includes('{{guid}}')) {\n        template = `${template}-{{guid}}`;\n    }\n    const parts = name.split('.');\n    let fileName = parts.slice(0, parts.length - 1).join('.');\n    const extension = parts.length > 1 ? `.${(0, lodash_1.last)(parts)}` : '';\n    //allow only 100 characters from original name to avoid issues with filename length restrictions\n    fileName = fileName.substr(0, 100);\n    evalContext = Object.assign(evalContext || {}, {\n        fileName,\n        guid: guid(),\n    });\n    //only letters, numbers, dots, dashes, underscores and spaces are allowed. Anything else will be replaced with dash\n    const uniqueName = `${Evaluator_1.Evaluator.interpolate(template, evalContext)}${extension}`.replace(/[^0-9a-zA-Z.\\-_ ]/g, '-');\n    return uniqueName;\n}\nexports.uniqueName = uniqueName;\n/**\n * Defines model types for known components.\n * For now, these will be the only model types supported by the @formio/core library.\n *\n * nestedArray: for components that store their data as an array and have nested components.\n * nestedDataArray: for components that store their data as an array and have nested components, but keeps the value of nested components inside 'data' property.\n * array: for components that store their data as an array.\n * dataObject: for components that store their data in a nested { data: {} } object.\n * object: for components that store their data in an object.\n * map: for components that store their data in a map.\n * content: for components that do not store data.\n * string: for components that store their data as a string.\n * number: for components that store their data as a number.\n * boolean: for components that store their data as a boolean.\n * none: for components that do not store data and should not be included in the submission.\n * any: for components that can store any type of data.\n *\n */\nexports.MODEL_TYPES_OF_KNOWN_COMPONENTS = {\n    nestedArray: ['datagrid', 'editgrid', 'datatable', 'dynamicWizard'],\n    nestedDataArray: ['tagpad'],\n    dataObject: ['form'],\n    object: ['container', 'address'],\n    map: ['datamap'],\n    content: ['htmlelement', 'content'],\n    string: [\n        'textfield',\n        'password',\n        'email',\n        'url',\n        'phoneNumber',\n        'day',\n        'datetime',\n        'time',\n        'signature',\n    ],\n    number: ['number', 'currency'],\n    boolean: ['checkbox', 'radio'],\n    none: ['table', 'well', 'columns', 'fieldset', 'panel', 'tabs'],\n    any: [\n        'survey',\n        'captcha',\n        'textarea',\n        'selectboxes',\n        'tags',\n        'select',\n        'hidden',\n        'button',\n        'datasource',\n        'sketchpad',\n        'reviewpage',\n        'file',\n    ],\n};\nfunction getModelType(component) {\n    // If the component JSON asserts a model type, use that.\n    if (component.modelType) {\n        return component.modelType;\n    }\n    let modelType = 'any';\n    // Otherwise, check for known component types.\n    for (const type of Object.keys(exports.MODEL_TYPES_OF_KNOWN_COMPONENTS)) {\n        if (exports.MODEL_TYPES_OF_KNOWN_COMPONENTS[type].includes(component.type)) {\n            modelType = type;\n            break;\n        }\n    }\n    // Otherwise check for components that assert no value.\n    if (modelType === 'any' && component.input === false) {\n        modelType = 'none';\n    }\n    // To speed up performance of getModelType, we will set the modelType on the component\n    Object.defineProperty(component, 'modelType', {\n        enumerable: false,\n        writable: true,\n        value: modelType,\n    });\n    // Otherwise default to any.\n    return modelType;\n}\nexports.getModelType = getModelType;\nfunction isComponentNestedDataType(component) {\n    return (component.tree ||\n        getModelType(component) === 'nestedArray' ||\n        getModelType(component) === 'nestedDataArray' ||\n        getModelType(component) === 'dataObject' ||\n        getModelType(component) === 'object' ||\n        getModelType(component) === 'map');\n}\nexports.isComponentNestedDataType = isComponentNestedDataType;\nfunction setComponentScope(component, name, value) {\n    if (!component) {\n        return;\n    }\n    if (!component.scope) {\n        Object.defineProperty(component, 'scope', {\n            enumerable: false,\n            configurable: true,\n            writable: true,\n            value: {},\n        });\n    }\n    Object.defineProperty(component.scope, name, {\n        enumerable: false,\n        writable: false,\n        configurable: true,\n        value,\n    });\n}\nexports.setComponentScope = setComponentScope;\nfunction resetComponentScope(component) {\n    if (component.scope) {\n        delete component.scope;\n    }\n}\nexports.resetComponentScope = resetComponentScope;\n/**\n * Return the component path provided the type of the component path.\n * @param component - The component JSON.\n * @param type - The type of path to return.\n * @returns\n */\nfunction componentPath(component, parent, parentPaths, type) {\n    if (!component) {\n        return '';\n    }\n    if (component.component) {\n        component = component.component;\n    }\n    const compModel = getModelType(component);\n    // Relative paths are only referenced from the current form.\n    const relative = type === types_1.ComponentPath.localPath ||\n        type === types_1.ComponentPath.fullLocalPath ||\n        type === types_1.ComponentPath.localDataPath;\n    // Full paths include all layout component ids in the path.\n    const fullPath = type === types_1.ComponentPath.fullPath || type === types_1.ComponentPath.fullLocalPath;\n    // See if this is a data path.\n    const dataPath = type === types_1.ComponentPath.dataPath || type === types_1.ComponentPath.localDataPath;\n    // Determine if this component should include its key.\n    const includeKey = fullPath || (!!component.type && compModel !== 'none');\n    // The key is provided if the component can have data or if we are fetching the full path.\n    const key = includeKey ? getComponentKey(component) : '';\n    if (!parent) {\n        // Return the key if there is no parent.\n        return key;\n    }\n    // Get the parent model type.\n    const parentModel = getModelType(parent);\n    // If there is a parent, then we only return the key if the parent is a nested form and it is a relative path.\n    if (relative && parentModel === 'dataObject') {\n        return key;\n    }\n    // Return the parent path.\n    let parentPath = (parentPaths === null || parentPaths === void 0 ? void 0 : parentPaths.hasOwnProperty(type)) ? parentPaths[type] || '' : '';\n    // For data paths (where we wish to get the path to the data), we need to ensure we append the parent\n    // paths to the end of the path so that any component within this component properly references their data.\n    if (dataPath && parentPath) {\n        if (parentModel === 'nestedArray' || parentModel === 'nestedDataArray') {\n            parentPath += `[${(parentPaths === null || parentPaths === void 0 ? void 0 : parentPaths.dataIndex) || 0}]`;\n        }\n        if (parentModel === 'dataObject' || parentModel === 'nestedDataArray') {\n            parentPath += '.data';\n        }\n    }\n    // Return the parent path with its relative component path (if applicable).\n    return parentPath ? (key ? `${parentPath}.${key}` : parentPath) : key;\n}\nexports.componentPath = componentPath;\n/**\n * This method determines a components paths provided the component JSON, the parent and the parent paths.\n * @param component\n * @param parent\n * @param parentPaths\n * @returns\n */\nfunction getComponentPaths(component, parent, parentPaths) {\n    return {\n        path: componentPath(component, parent, parentPaths, types_1.ComponentPath.path),\n        fullPath: componentPath(component, parent, parentPaths, types_1.ComponentPath.fullPath),\n        localPath: componentPath(component, parent, parentPaths, types_1.ComponentPath.localPath),\n        fullLocalPath: componentPath(component, parent, parentPaths, types_1.ComponentPath.fullLocalPath),\n        dataPath: componentPath(component, parent, parentPaths, types_1.ComponentPath.dataPath),\n        localDataPath: componentPath(component, parent, parentPaths, types_1.ComponentPath.localDataPath),\n        dataIndex: parentPaths === null || parentPaths === void 0 ? void 0 : parentPaths.dataIndex,\n    };\n}\nexports.getComponentPaths = getComponentPaths;\nfunction getStringFromComponentPath(path) {\n    if (!(0, lodash_1.isArray)(path)) {\n        return path;\n    }\n    let strPath = '';\n    path.forEach((part, i) => {\n        if ((0, lodash_1.isNumber)(part)) {\n            strPath += `[${part}]`;\n        }\n        else {\n            strPath += i === 0 ? part : `.${part}`;\n        }\n    });\n    return strPath;\n}\nexports.getStringFromComponentPath = getStringFromComponentPath;\n/**\n * Determines if a component has a match at any of the path types.\n * @param component {Component} - The component JSON to check for matches.\n * @param paths {ComponentPaths} - The current component paths object.\n * @param path {string} - Either the \"form\" or \"data\" path to see if a match occurs.\n * @param dataIndex {number | undefined} - The data index for the current component to match.\n * @param matches {Record<string, ComponentMatch | undefined>} - The current matches object.\n * @param addMatch {(type: ComponentPath | 'key', match: ComponentMatch) => ComponentMatch} - A callback function to allow modules to decorate the match object.\n */\nfunction componentMatches(component, paths, path, dataIndex, matches = {\n    path: undefined,\n    fullPath: undefined,\n    localPath: undefined,\n    dataPath: undefined,\n    localDataPath: undefined,\n    fullLocalPath: undefined,\n    key: undefined,\n}, addMatch = (type, match) => {\n    return match;\n}) {\n    let dataProperty = '';\n    if (component.type === 'selectboxes') {\n        const valuePath = new RegExp(`(\\\\.${(0, lodash_1.escapeRegExp)(component.key)})(\\\\.[^\\\\.]+)$`);\n        const pathMatches = path.match(valuePath);\n        if ((pathMatches === null || pathMatches === void 0 ? void 0 : pathMatches.length) === 3) {\n            dataProperty = pathMatches[2];\n            path = path.replace(valuePath, '$1');\n        }\n    }\n    // Get the current model type.\n    const modelType = getModelType(component);\n    const dataModel = modelType !== 'none' && modelType !== 'content';\n    [\n        types_1.ComponentPath.path,\n        types_1.ComponentPath.fullPath,\n        types_1.ComponentPath.localPath,\n        types_1.ComponentPath.fullLocalPath,\n        types_1.ComponentPath.dataPath,\n        types_1.ComponentPath.localDataPath,\n    ].forEach((type) => {\n        const dataPath = type === types_1.ComponentPath.dataPath || type === types_1.ComponentPath.localDataPath;\n        if (paths[type] === path) {\n            const currentMatch = matches[type];\n            const currentModelType = (currentMatch === null || currentMatch === void 0 ? void 0 : currentMatch.component)\n                ? getModelType(currentMatch.component)\n                : 'none';\n            const currentDataModel = currentModelType !== 'none' && currentModelType !== 'content';\n            if (!currentMatch ||\n                (dataPath && dataModel && currentDataModel) || // Replace the current match if this is a dataPath and both are dataModels.\n                (!dataPath && dataIndex === paths.dataIndex) // Replace the current match if this is not a dataPath and the indexes are the same.\n            ) {\n                if (dataPath) {\n                    const dataPaths = {\n                        dataPath: paths.dataPath || '',\n                        localDataPath: paths.localDataPath || '',\n                    };\n                    if (dataProperty) {\n                        dataPaths.dataPath += dataProperty;\n                        dataPaths.localDataPath += dataProperty;\n                    }\n                    matches[type] = addMatch(type, {\n                        component,\n                        paths: Object.assign(Object.assign({}, paths), dataPaths),\n                    });\n                }\n                else {\n                    matches[type] = addMatch(type, { component, paths });\n                }\n            }\n        }\n    });\n    if (!matches.key && component.key === path) {\n        matches.key = addMatch('key', { component, paths });\n    }\n}\nexports.componentMatches = componentMatches;\nfunction getBestMatch(matches) {\n    if (matches.dataPath) {\n        return matches.dataPath;\n    }\n    if (matches.localDataPath) {\n        return matches.localDataPath;\n    }\n    if (matches.fullPath) {\n        return matches.fullPath;\n    }\n    if (matches.path) {\n        return matches.path;\n    }\n    if (matches.fullLocalPath) {\n        return matches.fullLocalPath;\n    }\n    if (matches.localPath) {\n        return matches.localPath;\n    }\n    if (matches.key) {\n        return matches.key;\n    }\n    return undefined;\n}\nexports.getBestMatch = getBestMatch;\n/**\n * This method performs a fuzzy search for a component within a form provided a number of different\n * paths to search.\n */\nfunction getComponentFromPath(components, path, data, dataIndex, includeAll = false) {\n    const matches = {\n        path: undefined,\n        fullPath: undefined,\n        localPath: undefined,\n        fullLocalPath: undefined,\n        dataPath: undefined,\n        localDataPath: undefined,\n        key: undefined,\n    };\n    if (data) {\n        (0, eachComponentData_1.eachComponentData)(components, data, (component, data, row, compPath, comps, index, parent, paths) => {\n            componentMatches(component, paths || {}, path, dataIndex, matches);\n        }, includeAll, false, undefined, undefined, true);\n    }\n    else {\n        (0, eachComponent_1.eachComponent)(components, (component, compPath, componentComponents, compParent, paths) => {\n            componentMatches(component, paths || {}, path, dataIndex, matches);\n        }, includeAll);\n    }\n    return getBestMatch(matches);\n}\nexports.getComponentFromPath = getComponentFromPath;\n/**\n * Provided a component, this will return the \"data\" key for that component in the contextual data\n * object.\n *\n * @param component\n * @returns\n */\nfunction getComponentKey(component) {\n    if (!component) {\n        return '';\n    }\n    if (component.type === 'checkbox' &&\n        component.inputType === 'radio' &&\n        component.name) {\n        return component.name;\n    }\n    return component.key;\n}\nexports.getComponentKey = getComponentKey;\nfunction getContextualRowPath(component, paths, local) {\n    if (!paths) {\n        return '';\n    }\n    const dataPath = local ? paths.localDataPath : paths.dataPath;\n    return (dataPath === null || dataPath === void 0 ? void 0 : dataPath.replace(new RegExp(`.?${(0, lodash_1.escapeRegExp)(getComponentKey(component))}$`), '')) || '';\n}\nexports.getContextualRowPath = getContextualRowPath;\nfunction getContextualRowData(component, data, paths, local) {\n    const rowPath = getContextualRowPath(component, paths, local);\n    return rowPath ? (0, lodash_1.get)(data, rowPath, null) : data;\n}\nexports.getContextualRowData = getContextualRowData;\nfunction getComponentLocalData(paths, data, local) {\n    var _a;\n    if (local) {\n        return data;\n    }\n    const parentPath = ((_a = paths.dataPath) === null || _a === void 0 ? void 0 : _a.replace(new RegExp(`.?${(0, lodash_1.escapeRegExp)(paths.localDataPath)}$`), '')) || '';\n    return parentPath ? (0, lodash_1.get)(data, parentPath, null) : data;\n}\nexports.getComponentLocalData = getComponentLocalData;\nfunction shouldProcessComponent(comp, row, value) {\n    var _a;\n    if (getModelType(comp) === 'dataObject') {\n        const noReferenceAttached = (value === null || value === void 0 ? void 0 : value._id) ? (0, lodash_1.isEmpty)(value.data) && !(0, lodash_1.has)(value, 'form') : false;\n        const shouldBeCleared = (!comp.hasOwnProperty('clearOnHide') || comp.clearOnHide) &&\n            (comp.hidden || ((_a = comp.scope) === null || _a === void 0 ? void 0 : _a.conditionallyHidden));\n        const shouldSkipProcessingNestedFormData = noReferenceAttached || shouldBeCleared;\n        if (shouldSkipProcessingNestedFormData) {\n            return false;\n        }\n    }\n    return true;\n}\nexports.shouldProcessComponent = shouldProcessComponent;\nfunction componentInfo(component) {\n    const hasColumns = component.columns && Array.isArray(component.columns);\n    const hasRows = component.rows && Array.isArray(component.rows);\n    const hasComps = component.components && Array.isArray(component.components);\n    const isContent = getModelType(component) === 'content';\n    const isLayout = getModelType(component) === 'none';\n    const isInput = !component.hasOwnProperty('input') || !!component.input;\n    return {\n        hasColumns,\n        hasRows,\n        hasComps,\n        layout: hasColumns || hasRows || (hasComps && !isInput) || isLayout || isContent,\n        iterable: hasColumns || hasRows || hasComps || isContent,\n    };\n}\nexports.componentInfo = componentInfo;\n// Provided components, data, and a key, this will return the components data.\nfunction getComponentData(components, data, path) {\n    const compData = { component: null, data: null };\n    (0, eachComponentData_1.eachComponentData)(components, data, (component, data, row, compPath) => {\n        if (compPath === path) {\n            compData.component = component;\n            compData.data = row;\n            return true;\n        }\n    });\n    return compData;\n}\nexports.getComponentData = getComponentData;\nfunction getComponentValue(form, data, path, dataIndex, local) {\n    var _a, _b;\n    const match = getComponentFromPath((form === null || form === void 0 ? void 0 : form.components) || [], path, data, dataIndex);\n    if (!match) {\n        // Fall back to get the value from the data object.\n        return (0, lodash_1.get)(data, path, undefined);\n    }\n    if (local) {\n        return ((_a = match === null || match === void 0 ? void 0 : match.paths) === null || _a === void 0 ? void 0 : _a.localDataPath) ? (0, lodash_1.get)(data, match.paths.localDataPath, undefined) : null;\n    }\n    return ((_b = match === null || match === void 0 ? void 0 : match.paths) === null || _b === void 0 ? void 0 : _b.dataPath) ? (0, lodash_1.get)(data, match.paths.dataPath, undefined) : null;\n}\nexports.getComponentValue = getComponentValue;\n/**\n * Determine if a component is a layout component or not.\n *\n * @param {Object} component\n *   The component to check.\n *\n * @returns {Boolean}\n *   Whether or not the component is a layout component.\n */\nfunction isLayoutComponent(component) {\n    return Boolean((component.columns &&\n        Array.isArray(component.columns)) ||\n        (component.rows && Array.isArray(component.rows)) ||\n        (component.components &&\n            Array.isArray(component.components)));\n}\nexports.isLayoutComponent = isLayoutComponent;\n/**\n * Matches if a component matches the query.\n *\n * @param component\n * @param query\n * @return {boolean}\n */\nfunction matchComponent(component, query, paths) {\n    if ((0, lodash_1.isString)(query)) {\n        return component.key === query || (paths === null || paths === void 0 ? void 0 : paths.localPath) === query || (paths === null || paths === void 0 ? void 0 : paths.path) === query;\n    }\n    else {\n        let matches = false;\n        (0, lodash_1.forOwn)(query, (value, key) => {\n            matches = (0, lodash_1.get)(component, key) === value;\n            if (!matches) {\n                return false;\n            }\n        });\n        return matches;\n    }\n}\nexports.matchComponent = matchComponent;\n/**\n * Get a component by its path.\n *\n * @param {Object} components - The components to iterate.\n * @param {String|Object} path - The key of the component to get, or a query of the component to search.\n * @param {boolean} includeAll - Whether or not to include layout components.\n * @returns {Component} - The component that matches the given key, or undefined if not found.\n */\nfunction getComponent(components, path, includeAll = true, dataIndex) {\n    var _a;\n    return (_a = getComponentFromPath(components, path, undefined, dataIndex, includeAll)) === null || _a === void 0 ? void 0 : _a.component;\n}\nexports.getComponent = getComponent;\n/**\n * Finds a component provided a query of properties of that component.\n *\n * @param components\n * @param query\n * @return {*}\n */\nfunction searchComponents(components, query) {\n    const results = [];\n    (0, eachComponent_1.eachComponent)(components, (component, compPath, components, parent, compPaths) => {\n        if (matchComponent(component, query, compPaths)) {\n            results.push(component);\n        }\n    }, true);\n    return results;\n}\nexports.searchComponents = searchComponents;\n/**\n * Deprecated version of findComponents. Renamed to searchComponents.\n * @param {import('@formio/core').Component[]} components - The components to find components within.\n * @param {object} query - The query to use when searching for the components.\n * @returns {import('@formio/core').Component[]} - The result of the component that is found.\n */\nfunction findComponents(components, query) {\n    console.warn('formio.js/utils findComponents is deprecated. Use searchComponents instead.');\n    return searchComponents(components, query);\n}\nexports.findComponents = findComponents;\n/**\n * Remove a component by path.\n *\n * @param components\n * @param path\n */\nfunction removeComponent(components, path) {\n    // @ts-expect-error - I'm not sure why we're using `pop` here if it's a string\n    const index = path.pop();\n    if (path.length !== 0) {\n        components = (0, lodash_1.get)(components, path);\n    }\n    components.splice(index, 1);\n}\nexports.removeComponent = removeComponent;\n/**\n * Returns if this component has a conditional statement.\n *\n * @param component - The component JSON schema.\n *\n * @returns {boolean} - TRUE - This component has a conditional, FALSE - No conditional provided.\n */\nfunction hasCondition(component) {\n    return Boolean(component.customConditional ||\n        (component.conditional &&\n            (component.conditional.when ||\n                component.conditional.json ||\n                (component.conditional.conjunction &&\n                    ((0, lodash_1.isBoolean)(component.conditional.show) ||\n                        component.conditional.show) &&\n                    !(0, lodash_1.isEmpty)(component.conditional.conditions)))));\n}\nexports.hasCondition = hasCondition;\n/**\n * Extension of standard #parseFloat(value) function, that also clears input string.\n *\n * @param {any} value\n *   The value to parse.\n *\n * @returns {Number}\n *   Parsed value.\n */\nfunction parseFloatExt(value) {\n    return parseFloat((0, lodash_1.isString)(value) ? value.replace(/[^\\de.+-]/gi, '') : value);\n}\nexports.parseFloatExt = parseFloatExt;\n/**\n * Formats provided value in way how Currency component uses it.\n *\n * @param {any} value\n *   The value to format.\n *\n * @returns {String}\n *   Value formatted for Currency component.\n */\nfunction formatAsCurrency(value) {\n    const parsedValue = parseFloatExt(value);\n    if (isNaN(parsedValue)) {\n        return '';\n    }\n    const parts = (0, lodash_1.round)(parsedValue, 2).toString().split('.');\n    parts[0] = (0, lodash_1.chunk)(Array.from(parts[0]).reverse(), 3)\n        .reverse()\n        .map((part) => part.reverse().join(''))\n        .join(',');\n    parts[1] = (0, lodash_1.pad)(parts[1], 2, '0');\n    return parts.join('.');\n}\nexports.formatAsCurrency = formatAsCurrency;\n/**\n * Escapes RegEx characters in provided String value.\n *\n * @param {String} value\n *   String for escaping RegEx characters.\n * @returns {string}\n *   String with escaped RegEx characters.\n */\nfunction escapeRegExCharacters(value) {\n    return value.replace(/[-[\\]/{}()*+?.\\\\^$|]/g, '\\\\$&');\n}\nexports.escapeRegExCharacters = escapeRegExCharacters;\n/**\n * Get the value for a component key, in the given submission.\n *\n * @param {Object} submission\n *   A submission object to search.\n * @param {String} key\n *   A for components API key to search for.\n */\nfunction getValue(submission, key) {\n    const search = (data) => {\n        if ((0, lodash_1.isPlainObject)(data)) {\n            if ((0, lodash_1.has)(data, key)) {\n                return (0, lodash_1.get)(data, key);\n            }\n            let value = null;\n            (0, lodash_1.forOwn)(data, (prop) => {\n                const result = search(prop);\n                if (!(0, lodash_1.isNil)(result)) {\n                    value = result;\n                    return false;\n                }\n            });\n            return value;\n        }\n        else {\n            return null;\n        }\n    };\n    return search(submission.data);\n}\nexports.getValue = getValue;\n/**\n * Iterate over all components in a form and get string values for translation.\n * @param form\n */\nfunction getStrings(form) {\n    const properties = [\n        'label',\n        'title',\n        'legend',\n        'tooltip',\n        'description',\n        'placeholder',\n        'prefix',\n        'suffix',\n        'errorLabel',\n        'content',\n        'html',\n    ];\n    const strings = [];\n    (0, eachComponent_1.eachComponent)(form.components, (component) => {\n        properties.forEach((property) => {\n            if (component.hasOwnProperty(property) && component[property]) {\n                strings.push({\n                    key: component.key,\n                    type: component.type,\n                    property,\n                    string: component[property],\n                });\n            }\n        });\n        if ((!component.dataSrc || component.dataSrc === 'values') &&\n            component.hasOwnProperty('values') &&\n            Array.isArray(component.values) &&\n            component.values.length) {\n            component.values.forEach((value, index) => {\n                strings.push({\n                    key: component.key,\n                    property: `value[${index}].label`,\n                    string: component.values[index].label,\n                });\n            });\n        }\n        // Hard coded values from Day component\n        if (component.type === 'day') {\n            [\n                'day',\n                'month',\n                'year',\n                'Day',\n                'Month',\n                'Year',\n                'january',\n                'february',\n                'march',\n                'april',\n                'may',\n                'june',\n                'july',\n                'august',\n                'september',\n                'october',\n                'november',\n                'december',\n            ].forEach((string) => {\n                strings.push({\n                    key: component.key,\n                    property: 'day',\n                    string,\n                });\n            });\n            if (component.fields.day.placeholder) {\n                strings.push({\n                    key: component.key,\n                    property: 'fields.day.placeholder',\n                    string: component.fields.day.placeholder,\n                });\n            }\n            if (component.fields.month.placeholder) {\n                strings.push({\n                    key: component.key,\n                    property: 'fields.month.placeholder',\n                    string: component.fields.month.placeholder,\n                });\n            }\n            if (component.fields.year.placeholder) {\n                strings.push({\n                    key: component.key,\n                    property: 'fields.year.placeholder',\n                    string: component.fields.year.placeholder,\n                });\n            }\n        }\n        if (component.type === 'editgrid') {\n            const string = component.addAnother || 'Add Another';\n            if (component.addAnother) {\n                strings.push({\n                    key: component.key,\n                    property: 'addAnother',\n                    string,\n                });\n            }\n        }\n        if (component.type === 'select') {\n            ['loading...', 'Type to search'].forEach((string) => {\n                strings.push({\n                    key: component.key,\n                    property: 'select',\n                    string,\n                });\n            });\n        }\n    }, true);\n    return strings;\n}\nexports.getStrings = getStrings;\n// ?????????????????????????\n// questionable section\nfunction generateFormChange(type, data) {\n    let change;\n    switch (type) {\n        case 'add':\n            change = {\n                op: 'add',\n                key: data.component.key,\n                container: data.parent.key, // Parent component\n                path: data.path, // Path to container within parent component.\n                index: data.index, // Index of component in parent container.\n                component: data.component,\n            };\n            break;\n        case 'edit':\n            change = {\n                op: 'edit',\n                key: data.originalComponent.key,\n                patches: (0, fast_json_patch_1.compare)(data.originalComponent, data.component),\n            };\n            // Don't save if nothing changed.\n            if (!change.patches.length) {\n                change = null;\n            }\n            break;\n        case 'remove':\n            change = {\n                op: 'remove',\n                key: data.component.key,\n            };\n            break;\n    }\n    return change;\n}\nexports.generateFormChange = generateFormChange;\nfunction applyFormChanges(form, changes) {\n    const failed = [];\n    changes.forEach(function (change) {\n        let found = false;\n        switch (change.op) {\n            case 'add': {\n                let newComponent = change.component;\n                // Find the container to set the component in.\n                findComponent(form.components, change.container, null, function (parent) {\n                    if (!change.container) {\n                        parent = form;\n                    }\n                    // A move will first run an add so remove any existing components with matching key before inserting.\n                    findComponent(form.components, change.key, null, function (component, path) {\n                        // If found, use the existing component. (If someone else edited it, the changes would be here)\n                        newComponent = component;\n                        removeComponent(form.components, path);\n                    });\n                    found = true;\n                    const container = (0, lodash_1.get)(parent, change.path);\n                    container.splice(change.index, 0, newComponent);\n                });\n                break;\n            }\n            case 'remove':\n                findComponent(form.components, change.key, null, function (component, path) {\n                    found = true;\n                    const oldComponent = (0, lodash_1.get)(form.components, path);\n                    if (oldComponent.key !== component.key) {\n                        path.pop();\n                    }\n                    removeComponent(form.components, path);\n                });\n                break;\n            case 'edit':\n                findComponent(form.components, change.key, null, function (component, path) {\n                    found = true;\n                    try {\n                        const oldComponent = (0, lodash_1.get)(form.components, path);\n                        const newComponent = (0, fast_json_patch_1.applyPatch)(component, change.patches).newDocument;\n                        if (oldComponent.key !== newComponent.key) {\n                            path.pop();\n                        }\n                        (0, lodash_1.set)(form.components, path, newComponent);\n                    }\n                    catch (ignoreErr) {\n                        failed.push(change);\n                    }\n                });\n                break;\n            case 'move':\n                break;\n        }\n        if (!found) {\n            failed.push(change);\n        }\n    });\n    return {\n        form,\n        failed,\n    };\n}\nexports.applyFormChanges = applyFormChanges;\n/**\n * This function will find a component in a form and return the component AND THE PATH to the component in the form.\n * Path to the component is stored as an array of nested components and their indexes.The Path is being filled recursively\n * when you iterating through the nested structure.\n * If the component is not found the callback won't be called and function won't return anything.\n *\n * @param components\n * @param key\n * @param fn\n * @param path\n * @returns {*}\n */\nfunction findComponent(components, key, path, fn) {\n    if (!components)\n        return;\n    path = path || [];\n    if (!key) {\n        return fn(components);\n    }\n    components.forEach(function (component, index) {\n        const newPath = path.slice();\n        // Add an index of the component it iterates through in nested structure\n        newPath.push(index);\n        if (!component)\n            return;\n        if (component.hasOwnProperty('columns') && Array.isArray(component.columns)) {\n            newPath.push('columns');\n            component.columns.forEach(function (column, index) {\n                const colPath = newPath.slice();\n                colPath.push(index);\n                colPath.push('components');\n                findComponent(column.components, key, colPath, fn);\n            });\n        }\n        if (component.hasOwnProperty('rows') && Array.isArray(component.rows)) {\n            newPath.push('rows');\n            component.rows.forEach(function (row, index) {\n                const rowPath = newPath.slice();\n                rowPath.push(index);\n                row.forEach(function (column, index) {\n                    const colPath = rowPath.slice();\n                    colPath.push(index);\n                    colPath.push('components');\n                    findComponent(column.components, key, colPath, fn);\n                });\n            });\n        }\n        if (component.hasOwnProperty('components') && Array.isArray(component.components)) {\n            newPath.push('components');\n            findComponent(component.components, key, newPath, fn);\n        }\n        if (component.key === key) {\n            //Final callback if the component is found\n            fn(component, newPath, components);\n        }\n    });\n}\nexports.findComponent = findComponent;\nconst isCheckboxComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'checkbox';\nconst isDataGridComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'datagrid';\nconst isEditGridComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'editgrid';\nconst isAddressComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'address';\nconst isDataTableComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'datatable';\nconst hasChildComponents = (component) => (component === null || component === void 0 ? void 0 : component.components) != null;\nconst isDateTimeComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'datetime';\nconst isSelectBoxesComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'selectboxes';\nconst isTextAreaComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'textarea';\nconst isTextFieldComponent = (component) => (component === null || component === void 0 ? void 0 : component.type) === 'textfield';\nfunction getEmptyValue(component) {\n    switch (component.type) {\n        case 'textarea':\n        case 'textfield':\n        case 'time':\n        case 'datetime':\n        case 'day':\n            return '';\n        case 'datagrid':\n        case 'editgrid':\n            return [];\n        default:\n            return null;\n    }\n}\nexports.getEmptyValue = getEmptyValue;\nconst replaceBlanks = (value) => {\n    const nbsp = '<p>&nbsp;</p>';\n    const br = '<p><br></p>';\n    const brNbsp = '<p><br>&nbsp;</p>';\n    const regExp = new RegExp(`^${nbsp}|${nbsp}$|^${br}|${br}$|^${brNbsp}|${brNbsp}$`, 'g');\n    return typeof value === 'string' ? value.replace(regExp, '').trim() : value;\n};\nfunction trimBlanks(value) {\n    if (!value) {\n        return value;\n    }\n    if (Array.isArray(value)) {\n        value = value.map((val) => replaceBlanks(val));\n    }\n    else {\n        value = replaceBlanks(value);\n    }\n    return value;\n}\nfunction isValueEmpty(component, value) {\n    const compValueIsEmptyArray = (0, lodash_1.isArray)(value) && value.length === 1 ? (0, lodash_1.isEqual)(value[0], getEmptyValue(component)) : false;\n    return (value == null || value === '' || ((0, lodash_1.isArray)(value) && value.length === 0) || compValueIsEmptyArray);\n}\nfunction isComponentDataEmpty(component, data, path, valueCond) {\n    var _a;\n    const value = (0, lodash_1.isNil)(valueCond) ? (0, lodash_1.get)(data, path) : valueCond;\n    const addressIgnoreProperties = ['mode', 'address'];\n    if (isCheckboxComponent(component)) {\n        return isValueEmpty(component, value) || value === false;\n    }\n    else if (isAddressComponent(component)) {\n        if (Object.keys(value).length === 0) {\n            return true;\n        }\n        return !Object.values((0, lodash_1.omit)(value, addressIgnoreProperties)).some(Boolean);\n    }\n    else if (isDataGridComponent(component) ||\n        isEditGridComponent(component) ||\n        isDataTableComponent(component) ||\n        hasChildComponents(component)) {\n        if ((_a = component.components) === null || _a === void 0 ? void 0 : _a.length) {\n            let childrenEmpty = true;\n            // wrap component in an array to let eachComponentData handle introspection to child components (e.g. this will be different\n            // for data grids versus nested forms, etc.)\n            (0, eachComponentData_1.eachComponentData)([component], data, (thisComponent, data, row, path) => {\n                if (component.key === thisComponent.key)\n                    return;\n                if (!isComponentDataEmpty(thisComponent, data, path)) {\n                    childrenEmpty = false;\n                }\n            });\n            return isValueEmpty(component, value) || childrenEmpty;\n        }\n        return isValueEmpty(component, value);\n    }\n    else if (isDateTimeComponent(component)) {\n        return isValueEmpty(component, value) || value.toString() === 'Invalid date';\n    }\n    else if (isSelectBoxesComponent(component)) {\n        let selectBoxEmpty = true;\n        for (const key in value) {\n            if (value[key]) {\n                selectBoxEmpty = false;\n                break;\n            }\n        }\n        return isValueEmpty(component, value) || selectBoxEmpty;\n    }\n    else if (isTextAreaComponent(component)) {\n        const isPlain = !component.wysiwyg && !component.editor;\n        return isPlain\n            ? typeof value === 'string'\n                ? isValueEmpty(component, value.trim())\n                : isValueEmpty(component, value)\n            : isValueEmpty(component, trimBlanks(value));\n    }\n    else if (isTextFieldComponent(component)) {\n        if (component.allowMultipleMasks && !!component.inputMasks && !!component.inputMasks.length) {\n            return (isValueEmpty(component, value) ||\n                (component.multiple ? value.length === 0 : !value.maskName || !value.value));\n        }\n        return isValueEmpty(component, value === null || value === void 0 ? void 0 : value.toString().trim());\n    }\n    return isValueEmpty(component, value);\n}\nexports.isComponentDataEmpty = isComponentDataEmpty;\n/**\n * Returns the template keys inside the template code.\n * @param {string} template - The template to get the keys from.\n * @returns {Array<string>} - The keys inside the template.\n */\nfunction getItemTemplateKeys(template) {\n    const templateKeys = [];\n    if (!template) {\n        return templateKeys;\n    }\n    const keys = template.match(/({{\\s*(.*?)\\s*}})/g);\n    if (keys) {\n        keys.forEach((key) => {\n            const propKey = key.match(/{{\\s*item\\.(.*?)\\s*}}/);\n            if (propKey && propKey.length > 1) {\n                templateKeys.push(propKey[1]);\n            }\n        });\n    }\n    return templateKeys;\n}\nexports.getItemTemplateKeys = getItemTemplateKeys;\n/**\n * Returns if the component is a select resource with an object for its value.\n * @param {Component} comp - The component to check.\n * @returns {boolean} - TRUE if the component is a select resource with an object for its value; FALSE otherwise.\n */\nfunction isSelectResourceWithObjectValue(comp = {}) {\n    const { reference, dataSrc, valueProperty } = comp;\n    return reference || (dataSrc === 'resource' && (!valueProperty || valueProperty === 'data'));\n}\nexports.isSelectResourceWithObjectValue = isSelectResourceWithObjectValue;\n/**\n * Compares real select resource value with expected value in condition.\n * @param {any} value - current value of selectcomponent.\n * @param {any} comparedValue - expocted value of select component.\n * @param {SelectComponent} conditionComponent - select component on which the condtion is based.\n * @returns {boolean} - TRUE if the select component current value is equal to the expected value; FALSE otherwise.\n */\nfunction compareSelectResourceWithObjectTypeValues(value, comparedValue, conditionComponent) {\n    if (!value || !(0, lodash_1.isPlainObject)(value)) {\n        return false;\n    }\n    const { template, valueProperty } = conditionComponent;\n    if (valueProperty === 'data') {\n        value = { data: value };\n        comparedValue = { data: comparedValue };\n    }\n    return (0, lodash_1.every)(getItemTemplateKeys(template) || [], (k) => (0, lodash_1.isEqual)((0, lodash_1.get)(value, k), (0, lodash_1.get)(comparedValue, k)));\n}\nexports.compareSelectResourceWithObjectTypeValues = compareSelectResourceWithObjectTypeValues;\nfunction getComponentErrorField(component, context) {\n    const toInterpolate = component.errorLabel || component.label || component.placeholder || component.key;\n    return Evaluator_1.Evaluator.interpolate(toInterpolate, context);\n}\nexports.getComponentErrorField = getComponentErrorField;\n/**\n * Normalize a context object so that it contains the correct paths and data, and so it can pass into and out of a sandbox for evaluation\n * @param context\n * @returns\n */\nfunction normalizeContext(context) {\n    const { data, paths, local, path, form, submission, row, component, instance, value, options, scope, config, } = context;\n    return {\n        path: paths ? paths.localDataPath : path,\n        data: paths ? getComponentLocalData(paths, data, local) : data,\n        paths,\n        form,\n        scope,\n        submission,\n        row,\n        component,\n        instance,\n        value,\n        input: value,\n        config,\n        options,\n    };\n}\nexports.normalizeContext = normalizeContext;\n\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/core/lib/utils/formUtil/index.js?");
 
 /***/ }),
 
@@ -2683,6 +2673,16 @@ eval("(function (global, factory) {\n\t true ? module.exports = factory() :\n\t0
 
 /***/ }),
 
+/***/ "./node_modules/choices.js/public/assets/scripts/choices.js":
+/*!******************************************************************!*\
+  !*** ./node_modules/choices.js/public/assets/scripts/choices.js ***!
+  \******************************************************************/
+/***/ (function(module) {
+
+eval("/*! choices.js v11.0.6 | © 2025 Josh Johnson | https://github.com/jshjohnson/Choices#readme */\n\n(function (global, factory) {\n     true ? module.exports = factory() :\n    0;\n})(this, (function () { 'use strict';\n\n    /******************************************************************************\r\n    Copyright (c) Microsoft Corporation.\r\n\r\n    Permission to use, copy, modify, and/or distribute this software for any\r\n    purpose with or without fee is hereby granted.\r\n\r\n    THE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\n    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\n    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\n    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\n    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\n    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\n    PERFORMANCE OF THIS SOFTWARE.\r\n    ***************************************************************************** */\n    /* global Reflect, Promise, SuppressedError, Symbol */\n\n    var extendStatics = function (d, b) {\n      extendStatics = Object.setPrototypeOf || {\n        __proto__: []\n      } instanceof Array && function (d, b) {\n        d.__proto__ = b;\n      } || function (d, b) {\n        for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];\n      };\n      return extendStatics(d, b);\n    };\n    function __extends(d, b) {\n      if (typeof b !== \"function\" && b !== null) throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n      extendStatics(d, b);\n      function __() {\n        this.constructor = d;\n      }\n      d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    }\n    var __assign = function () {\n      __assign = Object.assign || function __assign(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n          s = arguments[i];\n          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n        }\n        return t;\n      };\n      return __assign.apply(this, arguments);\n    };\n    function __spreadArray(to, from, pack) {\n      if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n        if (ar || !(i in from)) {\n          if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n          ar[i] = from[i];\n        }\n      }\n      return to.concat(ar || Array.prototype.slice.call(from));\n    }\n    typeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\n      var e = new Error(message);\n      return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\n    };\n\n    var ActionType = {\n        ADD_CHOICE: 'ADD_CHOICE',\n        REMOVE_CHOICE: 'REMOVE_CHOICE',\n        FILTER_CHOICES: 'FILTER_CHOICES',\n        ACTIVATE_CHOICES: 'ACTIVATE_CHOICES',\n        CLEAR_CHOICES: 'CLEAR_CHOICES',\n        ADD_GROUP: 'ADD_GROUP',\n        ADD_ITEM: 'ADD_ITEM',\n        REMOVE_ITEM: 'REMOVE_ITEM',\n        HIGHLIGHT_ITEM: 'HIGHLIGHT_ITEM',\n    };\n\n    var EventType = {\n        showDropdown: 'showDropdown',\n        hideDropdown: 'hideDropdown',\n        change: 'change',\n        choice: 'choice',\n        search: 'search',\n        addItem: 'addItem',\n        removeItem: 'removeItem',\n        highlightItem: 'highlightItem',\n        highlightChoice: 'highlightChoice',\n        unhighlightItem: 'unhighlightItem',\n    };\n\n    var KeyCodeMap = {\n        TAB_KEY: 9,\n        SHIFT_KEY: 16,\n        BACK_KEY: 46,\n        DELETE_KEY: 8,\n        ENTER_KEY: 13,\n        A_KEY: 65,\n        ESC_KEY: 27,\n        UP_KEY: 38,\n        DOWN_KEY: 40,\n        PAGE_UP_KEY: 33,\n        PAGE_DOWN_KEY: 34,\n    };\n\n    var ObjectsInConfig = ['fuseOptions', 'classNames'];\n\n    var PassedElementTypes = {\n        Text: 'text',\n        SelectOne: 'select-one',\n        SelectMultiple: 'select-multiple',\n    };\n\n    var addChoice = function (choice) { return ({\n        type: ActionType.ADD_CHOICE,\n        choice: choice,\n    }); };\n    var removeChoice = function (choice) { return ({\n        type: ActionType.REMOVE_CHOICE,\n        choice: choice,\n    }); };\n    var filterChoices = function (results) { return ({\n        type: ActionType.FILTER_CHOICES,\n        results: results,\n    }); };\n    var activateChoices = function (active) {\n        return ({\n            type: ActionType.ACTIVATE_CHOICES,\n            active: active,\n        });\n    };\n\n    var addGroup = function (group) { return ({\n        type: ActionType.ADD_GROUP,\n        group: group,\n    }); };\n\n    var addItem = function (item) { return ({\n        type: ActionType.ADD_ITEM,\n        item: item,\n    }); };\n    var removeItem$1 = function (item) { return ({\n        type: ActionType.REMOVE_ITEM,\n        item: item,\n    }); };\n    var highlightItem = function (item, highlighted) { return ({\n        type: ActionType.HIGHLIGHT_ITEM,\n        item: item,\n        highlighted: highlighted,\n    }); };\n\n    var getRandomNumber = function (min, max) { return Math.floor(Math.random() * (max - min) + min); };\n    var generateChars = function (length) {\n        return Array.from({ length: length }, function () { return getRandomNumber(0, 36).toString(36); }).join('');\n    };\n    var generateId = function (element, prefix) {\n        var id = element.id || (element.name && \"\".concat(element.name, \"-\").concat(generateChars(2))) || generateChars(4);\n        id = id.replace(/(:|\\.|\\[|\\]|,)/g, '');\n        id = \"\".concat(prefix, \"-\").concat(id);\n        return id;\n    };\n    var getAdjacentEl = function (startEl, selector, direction) {\n        if (direction === void 0) { direction = 1; }\n        var prop = \"\".concat(direction > 0 ? 'next' : 'previous', \"ElementSibling\");\n        var sibling = startEl[prop];\n        while (sibling) {\n            if (sibling.matches(selector)) {\n                return sibling;\n            }\n            sibling = sibling[prop];\n        }\n        return null;\n    };\n    var isScrolledIntoView = function (element, parent, direction) {\n        if (direction === void 0) { direction = 1; }\n        var isVisible;\n        if (direction > 0) {\n            // In view from bottom\n            isVisible = parent.scrollTop + parent.offsetHeight >= element.offsetTop + element.offsetHeight;\n        }\n        else {\n            // In view from top\n            isVisible = element.offsetTop >= parent.scrollTop;\n        }\n        return isVisible;\n    };\n    var sanitise = function (value) {\n        if (typeof value !== 'string') {\n            if (value === null || value === undefined) {\n                return '';\n            }\n            if (typeof value === 'object') {\n                if ('raw' in value) {\n                    return sanitise(value.raw);\n                }\n                if ('trusted' in value) {\n                    return value.trusted;\n                }\n            }\n            return value;\n        }\n        return value\n            .replace(/&/g, '&amp;')\n            .replace(/>/g, '&gt;')\n            .replace(/</g, '&lt;')\n            .replace(/'/g, '&#039;')\n            .replace(/\"/g, '&quot;');\n    };\n    var strToEl = (function () {\n        var tmpEl = document.createElement('div');\n        return function (str) {\n            tmpEl.innerHTML = str.trim();\n            var firstChild = tmpEl.children[0];\n            while (tmpEl.firstChild) {\n                tmpEl.removeChild(tmpEl.firstChild);\n            }\n            return firstChild;\n        };\n    })();\n    var resolveNoticeFunction = function (fn, value) {\n        return typeof fn === 'function' ? fn(sanitise(value), value) : fn;\n    };\n    var resolveStringFunction = function (fn) {\n        return typeof fn === 'function' ? fn() : fn;\n    };\n    var unwrapStringForRaw = function (s) {\n        if (typeof s === 'string') {\n            return s;\n        }\n        if (typeof s === 'object') {\n            if ('trusted' in s) {\n                return s.trusted;\n            }\n            if ('raw' in s) {\n                return s.raw;\n            }\n        }\n        return '';\n    };\n    var unwrapStringForEscaped = function (s) {\n        if (typeof s === 'string') {\n            return s;\n        }\n        if (typeof s === 'object') {\n            if ('escaped' in s) {\n                return s.escaped;\n            }\n            if ('trusted' in s) {\n                return s.trusted;\n            }\n        }\n        return '';\n    };\n    var escapeForTemplate = function (allowHTML, s) {\n        return allowHTML ? unwrapStringForEscaped(s) : sanitise(s);\n    };\n    var setElementHtml = function (el, allowHtml, html) {\n        el.innerHTML = escapeForTemplate(allowHtml, html);\n    };\n    var sortByAlpha = function (_a, _b) {\n        var value = _a.value, _c = _a.label, label = _c === void 0 ? value : _c;\n        var value2 = _b.value, _d = _b.label, label2 = _d === void 0 ? value2 : _d;\n        return unwrapStringForRaw(label).localeCompare(unwrapStringForRaw(label2), [], {\n            sensitivity: 'base',\n            ignorePunctuation: true,\n            numeric: true,\n        });\n    };\n    var sortByRank = function (a, b) {\n        return a.rank - b.rank;\n    };\n    var dispatchEvent = function (element, type, customArgs) {\n        if (customArgs === void 0) { customArgs = null; }\n        var event = new CustomEvent(type, {\n            detail: customArgs,\n            bubbles: true,\n            cancelable: true,\n        });\n        return element.dispatchEvent(event);\n    };\n    /**\n     * Returns an array of keys present on the first but missing on the second object\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    var diff = function (a, b) {\n        var aKeys = Object.keys(a).sort();\n        var bKeys = Object.keys(b).sort();\n        return aKeys.filter(function (i) { return bKeys.indexOf(i) < 0; });\n    };\n    var getClassNames = function (ClassNames) {\n        return Array.isArray(ClassNames) ? ClassNames : [ClassNames];\n    };\n    var getClassNamesSelector = function (option) {\n        if (option && Array.isArray(option)) {\n            return option\n                .map(function (item) {\n                return \".\".concat(item);\n            })\n                .join('');\n        }\n        return \".\".concat(option);\n    };\n    var addClassesToElement = function (element, className) {\n        var _a;\n        (_a = element.classList).add.apply(_a, getClassNames(className));\n    };\n    var removeClassesFromElement = function (element, className) {\n        var _a;\n        (_a = element.classList).remove.apply(_a, getClassNames(className));\n    };\n    var parseCustomProperties = function (customProperties) {\n        if (typeof customProperties !== 'undefined') {\n            try {\n                return JSON.parse(customProperties);\n            }\n            catch (e) {\n                return customProperties;\n            }\n        }\n        return {};\n    };\n    var updateClassList = function (item, add, remove) {\n        var itemEl = item.itemEl;\n        if (itemEl) {\n            removeClassesFromElement(itemEl, remove);\n            addClassesToElement(itemEl, add);\n        }\n    };\n\n    var Dropdown = /** @class */ (function () {\n        function Dropdown(_a) {\n            var element = _a.element, type = _a.type, classNames = _a.classNames;\n            this.element = element;\n            this.classNames = classNames;\n            this.type = type;\n            this.isActive = false;\n        }\n        /**\n         * Show dropdown to user by adding active state class\n         */\n        Dropdown.prototype.show = function () {\n            addClassesToElement(this.element, this.classNames.activeState);\n            this.element.setAttribute('aria-expanded', 'true');\n            this.isActive = true;\n            return this;\n        };\n        /**\n         * Hide dropdown from user\n         */\n        Dropdown.prototype.hide = function () {\n            removeClassesFromElement(this.element, this.classNames.activeState);\n            this.element.setAttribute('aria-expanded', 'false');\n            this.isActive = false;\n            return this;\n        };\n        return Dropdown;\n    }());\n\n    var Container = /** @class */ (function () {\n        function Container(_a) {\n            var element = _a.element, type = _a.type, classNames = _a.classNames, position = _a.position;\n            this.element = element;\n            this.classNames = classNames;\n            this.type = type;\n            this.position = position;\n            this.isOpen = false;\n            this.isFlipped = false;\n            this.isDisabled = false;\n            this.isLoading = false;\n        }\n        /**\n         * Determine whether container should be flipped based on passed\n         * dropdown position\n         */\n        Container.prototype.shouldFlip = function (dropdownPos, dropdownHeight) {\n            // If flip is enabled and the dropdown bottom position is\n            // greater than the window height flip the dropdown.\n            var shouldFlip = false;\n            if (this.position === 'auto') {\n                shouldFlip =\n                    this.element.getBoundingClientRect().top - dropdownHeight >= 0 &&\n                        !window.matchMedia(\"(min-height: \".concat(dropdownPos + 1, \"px)\")).matches;\n            }\n            else if (this.position === 'top') {\n                shouldFlip = true;\n            }\n            return shouldFlip;\n        };\n        Container.prototype.setActiveDescendant = function (activeDescendantID) {\n            this.element.setAttribute('aria-activedescendant', activeDescendantID);\n        };\n        Container.prototype.removeActiveDescendant = function () {\n            this.element.removeAttribute('aria-activedescendant');\n        };\n        Container.prototype.open = function (dropdownPos, dropdownHeight) {\n            addClassesToElement(this.element, this.classNames.openState);\n            this.element.setAttribute('aria-expanded', 'true');\n            this.isOpen = true;\n            if (this.shouldFlip(dropdownPos, dropdownHeight)) {\n                addClassesToElement(this.element, this.classNames.flippedState);\n                this.isFlipped = true;\n            }\n        };\n        Container.prototype.close = function () {\n            removeClassesFromElement(this.element, this.classNames.openState);\n            this.element.setAttribute('aria-expanded', 'false');\n            this.removeActiveDescendant();\n            this.isOpen = false;\n            // A dropdown flips if it does not have space within the page\n            if (this.isFlipped) {\n                removeClassesFromElement(this.element, this.classNames.flippedState);\n                this.isFlipped = false;\n            }\n        };\n        Container.prototype.addFocusState = function () {\n            addClassesToElement(this.element, this.classNames.focusState);\n        };\n        Container.prototype.removeFocusState = function () {\n            removeClassesFromElement(this.element, this.classNames.focusState);\n        };\n        Container.prototype.enable = function () {\n            removeClassesFromElement(this.element, this.classNames.disabledState);\n            this.element.removeAttribute('aria-disabled');\n            if (this.type === PassedElementTypes.SelectOne) {\n                this.element.setAttribute('tabindex', '0');\n            }\n            this.isDisabled = false;\n        };\n        Container.prototype.disable = function () {\n            addClassesToElement(this.element, this.classNames.disabledState);\n            this.element.setAttribute('aria-disabled', 'true');\n            if (this.type === PassedElementTypes.SelectOne) {\n                this.element.setAttribute('tabindex', '-1');\n            }\n            this.isDisabled = true;\n        };\n        Container.prototype.wrap = function (element) {\n            var el = this.element;\n            var parentNode = element.parentNode;\n            if (parentNode) {\n                if (element.nextSibling) {\n                    parentNode.insertBefore(el, element.nextSibling);\n                }\n                else {\n                    parentNode.appendChild(el);\n                }\n            }\n            el.appendChild(element);\n        };\n        Container.prototype.unwrap = function (element) {\n            var el = this.element;\n            var parentNode = el.parentNode;\n            if (parentNode) {\n                // Move passed element outside this element\n                parentNode.insertBefore(element, el);\n                // Remove this element\n                parentNode.removeChild(el);\n            }\n        };\n        Container.prototype.addLoadingState = function () {\n            addClassesToElement(this.element, this.classNames.loadingState);\n            this.element.setAttribute('aria-busy', 'true');\n            this.isLoading = true;\n        };\n        Container.prototype.removeLoadingState = function () {\n            removeClassesFromElement(this.element, this.classNames.loadingState);\n            this.element.removeAttribute('aria-busy');\n            this.isLoading = false;\n        };\n        return Container;\n    }());\n\n    var Input = /** @class */ (function () {\n        function Input(_a) {\n            var element = _a.element, type = _a.type, classNames = _a.classNames, preventPaste = _a.preventPaste;\n            this.element = element;\n            this.type = type;\n            this.classNames = classNames;\n            this.preventPaste = preventPaste;\n            this.isFocussed = this.element.isEqualNode(document.activeElement);\n            this.isDisabled = element.disabled;\n            this._onPaste = this._onPaste.bind(this);\n            this._onInput = this._onInput.bind(this);\n            this._onFocus = this._onFocus.bind(this);\n            this._onBlur = this._onBlur.bind(this);\n        }\n        Object.defineProperty(Input.prototype, \"placeholder\", {\n            set: function (placeholder) {\n                this.element.placeholder = placeholder;\n            },\n            enumerable: false,\n            configurable: true\n        });\n        Object.defineProperty(Input.prototype, \"value\", {\n            get: function () {\n                return this.element.value;\n            },\n            set: function (value) {\n                this.element.value = value;\n            },\n            enumerable: false,\n            configurable: true\n        });\n        Input.prototype.addEventListeners = function () {\n            var el = this.element;\n            el.addEventListener('paste', this._onPaste);\n            el.addEventListener('input', this._onInput, {\n                passive: true,\n            });\n            el.addEventListener('focus', this._onFocus, {\n                passive: true,\n            });\n            el.addEventListener('blur', this._onBlur, {\n                passive: true,\n            });\n        };\n        Input.prototype.removeEventListeners = function () {\n            var el = this.element;\n            el.removeEventListener('input', this._onInput);\n            el.removeEventListener('paste', this._onPaste);\n            el.removeEventListener('focus', this._onFocus);\n            el.removeEventListener('blur', this._onBlur);\n        };\n        Input.prototype.enable = function () {\n            var el = this.element;\n            el.removeAttribute('disabled');\n            this.isDisabled = false;\n        };\n        Input.prototype.disable = function () {\n            var el = this.element;\n            el.setAttribute('disabled', '');\n            this.isDisabled = true;\n        };\n        Input.prototype.focus = function () {\n            if (!this.isFocussed) {\n                this.element.focus();\n            }\n        };\n        Input.prototype.blur = function () {\n            if (this.isFocussed) {\n                this.element.blur();\n            }\n        };\n        Input.prototype.clear = function (setWidth) {\n            if (setWidth === void 0) { setWidth = true; }\n            this.element.value = '';\n            if (setWidth) {\n                this.setWidth();\n            }\n            return this;\n        };\n        /**\n         * Set the correct input width based on placeholder\n         * value or input value\n         */\n        Input.prototype.setWidth = function () {\n            // Resize input to contents or placeholder\n            var element = this.element;\n            element.style.minWidth = \"\".concat(element.placeholder.length + 1, \"ch\");\n            element.style.width = \"\".concat(element.value.length + 1, \"ch\");\n        };\n        Input.prototype.setActiveDescendant = function (activeDescendantID) {\n            this.element.setAttribute('aria-activedescendant', activeDescendantID);\n        };\n        Input.prototype.removeActiveDescendant = function () {\n            this.element.removeAttribute('aria-activedescendant');\n        };\n        Input.prototype._onInput = function () {\n            if (this.type !== PassedElementTypes.SelectOne) {\n                this.setWidth();\n            }\n        };\n        Input.prototype._onPaste = function (event) {\n            if (this.preventPaste) {\n                event.preventDefault();\n            }\n        };\n        Input.prototype._onFocus = function () {\n            this.isFocussed = true;\n        };\n        Input.prototype._onBlur = function () {\n            this.isFocussed = false;\n        };\n        return Input;\n    }());\n\n    var SCROLLING_SPEED = 4;\n\n    var List = /** @class */ (function () {\n        function List(_a) {\n            var element = _a.element;\n            this.element = element;\n            this.scrollPos = this.element.scrollTop;\n            this.height = this.element.offsetHeight;\n        }\n        List.prototype.prepend = function (node) {\n            var child = this.element.firstElementChild;\n            if (child) {\n                this.element.insertBefore(node, child);\n            }\n            else {\n                this.element.append(node);\n            }\n        };\n        List.prototype.scrollToTop = function () {\n            this.element.scrollTop = 0;\n        };\n        List.prototype.scrollToChildElement = function (element, direction) {\n            var _this = this;\n            if (!element) {\n                return;\n            }\n            var listHeight = this.element.offsetHeight;\n            // Scroll position of dropdown\n            var listScrollPosition = this.element.scrollTop + listHeight;\n            var elementHeight = element.offsetHeight;\n            // Distance from bottom of element to top of parent\n            var elementPos = element.offsetTop + elementHeight;\n            // Difference between the element and scroll position\n            var destination = direction > 0 ? this.element.scrollTop + elementPos - listScrollPosition : element.offsetTop;\n            requestAnimationFrame(function () {\n                _this._animateScroll(destination, direction);\n            });\n        };\n        List.prototype._scrollDown = function (scrollPos, strength, destination) {\n            var easing = (destination - scrollPos) / strength;\n            var distance = easing > 1 ? easing : 1;\n            this.element.scrollTop = scrollPos + distance;\n        };\n        List.prototype._scrollUp = function (scrollPos, strength, destination) {\n            var easing = (scrollPos - destination) / strength;\n            var distance = easing > 1 ? easing : 1;\n            this.element.scrollTop = scrollPos - distance;\n        };\n        List.prototype._animateScroll = function (destination, direction) {\n            var _this = this;\n            var strength = SCROLLING_SPEED;\n            var choiceListScrollTop = this.element.scrollTop;\n            var continueAnimation = false;\n            if (direction > 0) {\n                this._scrollDown(choiceListScrollTop, strength, destination);\n                if (choiceListScrollTop < destination) {\n                    continueAnimation = true;\n                }\n            }\n            else {\n                this._scrollUp(choiceListScrollTop, strength, destination);\n                if (choiceListScrollTop > destination) {\n                    continueAnimation = true;\n                }\n            }\n            if (continueAnimation) {\n                requestAnimationFrame(function () {\n                    _this._animateScroll(destination, direction);\n                });\n            }\n        };\n        return List;\n    }());\n\n    var WrappedElement = /** @class */ (function () {\n        function WrappedElement(_a) {\n            var element = _a.element, classNames = _a.classNames;\n            this.element = element;\n            this.classNames = classNames;\n            this.isDisabled = false;\n        }\n        Object.defineProperty(WrappedElement.prototype, \"isActive\", {\n            get: function () {\n                return this.element.dataset.choice === 'active';\n            },\n            enumerable: false,\n            configurable: true\n        });\n        Object.defineProperty(WrappedElement.prototype, \"dir\", {\n            get: function () {\n                return this.element.dir;\n            },\n            enumerable: false,\n            configurable: true\n        });\n        Object.defineProperty(WrappedElement.prototype, \"value\", {\n            get: function () {\n                return this.element.value;\n            },\n            set: function (value) {\n                this.element.setAttribute('value', value);\n                this.element.value = value;\n            },\n            enumerable: false,\n            configurable: true\n        });\n        WrappedElement.prototype.conceal = function () {\n            var el = this.element;\n            // Hide passed input\n            addClassesToElement(el, this.classNames.input);\n            el.hidden = true;\n            // Remove element from tab index\n            el.tabIndex = -1;\n            // Backup original styles if any\n            var origStyle = el.getAttribute('style');\n            if (origStyle) {\n                el.setAttribute('data-choice-orig-style', origStyle);\n            }\n            el.setAttribute('data-choice', 'active');\n        };\n        WrappedElement.prototype.reveal = function () {\n            var el = this.element;\n            // Reinstate passed element\n            removeClassesFromElement(el, this.classNames.input);\n            el.hidden = false;\n            el.removeAttribute('tabindex');\n            // Recover original styles if any\n            var origStyle = el.getAttribute('data-choice-orig-style');\n            if (origStyle) {\n                el.removeAttribute('data-choice-orig-style');\n                el.setAttribute('style', origStyle);\n            }\n            else {\n                el.removeAttribute('style');\n            }\n            el.removeAttribute('data-choice');\n        };\n        WrappedElement.prototype.enable = function () {\n            this.element.removeAttribute('disabled');\n            this.element.disabled = false;\n            this.isDisabled = false;\n        };\n        WrappedElement.prototype.disable = function () {\n            this.element.setAttribute('disabled', '');\n            this.element.disabled = true;\n            this.isDisabled = true;\n        };\n        WrappedElement.prototype.triggerEvent = function (eventType, data) {\n            dispatchEvent(this.element, eventType, data || {});\n        };\n        return WrappedElement;\n    }());\n\n    var WrappedInput = /** @class */ (function (_super) {\n        __extends(WrappedInput, _super);\n        function WrappedInput() {\n            return _super !== null && _super.apply(this, arguments) || this;\n        }\n        return WrappedInput;\n    }(WrappedElement));\n\n    var coerceBool = function (arg, defaultValue) {\n        if (defaultValue === void 0) { defaultValue = true; }\n        return typeof arg === 'undefined' ? defaultValue : !!arg;\n    };\n    var stringToHtmlClass = function (input) {\n        if (typeof input === 'string') {\n            // eslint-disable-next-line no-param-reassign\n            input = input.split(' ').filter(function (s) { return s.length; });\n        }\n        if (Array.isArray(input) && input.length) {\n            return input;\n        }\n        return undefined;\n    };\n    var mapInputToChoice = function (value, allowGroup, allowRawString) {\n        if (allowRawString === void 0) { allowRawString = true; }\n        if (typeof value === 'string') {\n            var sanitisedValue = sanitise(value);\n            var userValue = allowRawString || sanitisedValue === value ? value : { escaped: sanitisedValue, raw: value };\n            var result_1 = mapInputToChoice({\n                value: value,\n                label: userValue,\n                selected: true,\n            }, false);\n            return result_1;\n        }\n        var groupOrChoice = value;\n        if ('choices' in groupOrChoice) {\n            if (!allowGroup) {\n                // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup\n                throw new TypeError(\"optGroup is not allowed\");\n            }\n            var group = groupOrChoice;\n            var choices = group.choices.map(function (e) { return mapInputToChoice(e, false); });\n            var result_2 = {\n                id: 0, // actual ID will be assigned during _addGroup\n                label: unwrapStringForRaw(group.label) || group.value,\n                active: !!choices.length,\n                disabled: !!group.disabled,\n                choices: choices,\n            };\n            return result_2;\n        }\n        var choice = groupOrChoice;\n        var result = {\n            id: 0, // actual ID will be assigned during _addChoice\n            group: null, // actual group will be assigned during _addGroup but before _addChoice\n            score: 0, // used in search\n            rank: 0, // used in search, stable sort order\n            value: choice.value,\n            label: choice.label || choice.value,\n            active: coerceBool(choice.active),\n            selected: coerceBool(choice.selected, false),\n            disabled: coerceBool(choice.disabled, false),\n            placeholder: coerceBool(choice.placeholder, false),\n            highlighted: false,\n            labelClass: stringToHtmlClass(choice.labelClass),\n            labelDescription: choice.labelDescription,\n            customProperties: choice.customProperties,\n        };\n        return result;\n    };\n\n    var isHtmlInputElement = function (e) { return e.tagName === 'INPUT'; };\n    var isHtmlSelectElement = function (e) { return e.tagName === 'SELECT'; };\n    var isHtmlOption = function (e) { return e.tagName === 'OPTION'; };\n    var isHtmlOptgroup = function (e) { return e.tagName === 'OPTGROUP'; };\n\n    var WrappedSelect = /** @class */ (function (_super) {\n        __extends(WrappedSelect, _super);\n        function WrappedSelect(_a) {\n            var element = _a.element, classNames = _a.classNames, template = _a.template, extractPlaceholder = _a.extractPlaceholder;\n            var _this = _super.call(this, { element: element, classNames: classNames }) || this;\n            _this.template = template;\n            _this.extractPlaceholder = extractPlaceholder;\n            return _this;\n        }\n        Object.defineProperty(WrappedSelect.prototype, \"placeholderOption\", {\n            get: function () {\n                return (this.element.querySelector('option[value=\"\"]') ||\n                    // Backward compatibility layer for the non-standard placeholder attribute supported in older versions.\n                    this.element.querySelector('option[placeholder]'));\n            },\n            enumerable: false,\n            configurable: true\n        });\n        WrappedSelect.prototype.addOptions = function (choices) {\n            var _this = this;\n            var fragment = document.createDocumentFragment();\n            choices.forEach(function (obj) {\n                var choice = obj;\n                if (choice.element) {\n                    return;\n                }\n                var option = _this.template(choice);\n                fragment.appendChild(option);\n                choice.element = option;\n            });\n            this.element.appendChild(fragment);\n        };\n        WrappedSelect.prototype.optionsAsChoices = function () {\n            var _this = this;\n            var choices = [];\n            this.element.querySelectorAll(':scope > option, :scope > optgroup').forEach(function (e) {\n                if (isHtmlOption(e)) {\n                    choices.push(_this._optionToChoice(e));\n                }\n                else if (isHtmlOptgroup(e)) {\n                    choices.push(_this._optgroupToChoice(e));\n                }\n                // todo: hr as empty optgroup, requires displaying empty opt-groups to be useful\n            });\n            return choices;\n        };\n        // eslint-disable-next-line class-methods-use-this\n        WrappedSelect.prototype._optionToChoice = function (option) {\n            // option.value returns the label if there is no value attribute, which can break legacy placeholder attribute support\n            if (!option.hasAttribute('value') && option.hasAttribute('placeholder')) {\n                option.setAttribute('value', '');\n                option.value = '';\n            }\n            return {\n                id: 0,\n                group: null,\n                score: 0,\n                rank: 0,\n                value: option.value,\n                label: option.innerText, // HTML options do not support most html tags, but innerHtml will extract html comments...\n                element: option,\n                active: true,\n                // this returns true if nothing is selected on initial load, which will break placeholder support\n                selected: this.extractPlaceholder ? option.selected : option.hasAttribute('selected'),\n                disabled: option.disabled,\n                highlighted: false,\n                placeholder: this.extractPlaceholder && (!option.value || option.hasAttribute('placeholder')),\n                labelClass: typeof option.dataset.labelClass !== 'undefined' ? stringToHtmlClass(option.dataset.labelClass) : undefined,\n                labelDescription: typeof option.dataset.labelDescription !== 'undefined' ? option.dataset.labelDescription : undefined,\n                customProperties: parseCustomProperties(option.dataset.customProperties),\n            };\n        };\n        WrappedSelect.prototype._optgroupToChoice = function (optgroup) {\n            var _this = this;\n            var options = optgroup.querySelectorAll('option');\n            var choices = Array.from(options).map(function (option) { return _this._optionToChoice(option); });\n            return {\n                id: 0,\n                label: optgroup.label || '',\n                element: optgroup,\n                active: !!choices.length,\n                disabled: optgroup.disabled,\n                choices: choices,\n            };\n        };\n        return WrappedSelect;\n    }(WrappedElement));\n\n    var DEFAULT_CLASSNAMES = {\n        containerOuter: ['choices'],\n        containerInner: ['choices__inner'],\n        input: ['choices__input'],\n        inputCloned: ['choices__input--cloned'],\n        list: ['choices__list'],\n        listItems: ['choices__list--multiple'],\n        listSingle: ['choices__list--single'],\n        listDropdown: ['choices__list--dropdown'],\n        item: ['choices__item'],\n        itemSelectable: ['choices__item--selectable'],\n        itemDisabled: ['choices__item--disabled'],\n        itemChoice: ['choices__item--choice'],\n        description: ['choices__description'],\n        placeholder: ['choices__placeholder'],\n        group: ['choices__group'],\n        groupHeading: ['choices__heading'],\n        button: ['choices__button'],\n        activeState: ['is-active'],\n        focusState: ['is-focused'],\n        openState: ['is-open'],\n        disabledState: ['is-disabled'],\n        highlightedState: ['is-highlighted'],\n        selectedState: ['is-selected'],\n        flippedState: ['is-flipped'],\n        loadingState: ['is-loading'],\n        notice: ['choices__notice'],\n        addChoice: ['choices__item--selectable', 'add-choice'],\n        noResults: ['has-no-results'],\n        noChoices: ['has-no-choices'],\n    };\n    var DEFAULT_CONFIG = {\n        items: [],\n        choices: [],\n        silent: false,\n        renderChoiceLimit: -1,\n        maxItemCount: -1,\n        closeDropdownOnSelect: 'auto',\n        singleModeForMultiSelect: false,\n        addChoices: false,\n        addItems: true,\n        addItemFilter: function (value) { return !!value && value !== ''; },\n        removeItems: true,\n        removeItemButton: false,\n        removeItemButtonAlignLeft: false,\n        editItems: false,\n        allowHTML: false,\n        allowHtmlUserInput: false,\n        duplicateItemsAllowed: true,\n        delimiter: ',',\n        paste: true,\n        searchEnabled: true,\n        searchChoices: true,\n        searchFloor: 1,\n        searchResultLimit: 4,\n        searchFields: ['label', 'value'],\n        position: 'auto',\n        resetScrollPosition: true,\n        shouldSort: true,\n        shouldSortItems: false,\n        sorter: sortByAlpha,\n        shadowRoot: null,\n        placeholder: true,\n        placeholderValue: null,\n        searchPlaceholderValue: null,\n        prependValue: null,\n        appendValue: null,\n        renderSelectedChoices: 'auto',\n        loadingText: 'Loading...',\n        noResultsText: 'No results found',\n        noChoicesText: 'No choices to choose from',\n        itemSelectText: 'Press to select',\n        uniqueItemText: 'Only unique values can be added',\n        customAddItemText: 'Only values matching specific conditions can be added',\n        addItemText: function (value) { return \"Press Enter to add <b>\\\"\".concat(value, \"\\\"</b>\"); },\n        removeItemIconText: function () { return \"Remove item\"; },\n        removeItemLabelText: function (value) { return \"Remove item: \".concat(value); },\n        maxItemText: function (maxItemCount) { return \"Only \".concat(maxItemCount, \" values can be added\"); },\n        valueComparer: function (value1, value2) { return value1 === value2; },\n        fuseOptions: {\n            includeScore: true,\n        },\n        labelId: '',\n        callbackOnInit: null,\n        callbackOnCreateTemplates: null,\n        classNames: DEFAULT_CLASSNAMES,\n        appendGroupInSearch: false,\n    };\n\n    var removeItem = function (item) {\n        var itemEl = item.itemEl;\n        if (itemEl) {\n            itemEl.remove();\n            item.itemEl = undefined;\n        }\n    };\n    function items(s, action, context) {\n        var state = s;\n        var update = true;\n        switch (action.type) {\n            case ActionType.ADD_ITEM: {\n                action.item.selected = true;\n                var el = action.item.element;\n                if (el) {\n                    el.selected = true;\n                    el.setAttribute('selected', '');\n                }\n                state.push(action.item);\n                break;\n            }\n            case ActionType.REMOVE_ITEM: {\n                action.item.selected = false;\n                var el = action.item.element;\n                if (el) {\n                    el.selected = false;\n                    el.removeAttribute('selected');\n                    // For a select-one, if all options are deselected, the first item is selected. To set a black value, select.value needs to be set\n                    var select = el.parentElement;\n                    if (select && isHtmlSelectElement(select) && select.type === PassedElementTypes.SelectOne) {\n                        select.value = '';\n                    }\n                }\n                // this is mixing concerns, but this is *so much faster*\n                removeItem(action.item);\n                state = state.filter(function (choice) { return choice.id !== action.item.id; });\n                break;\n            }\n            case ActionType.REMOVE_CHOICE: {\n                removeItem(action.choice);\n                state = state.filter(function (item) { return item.id !== action.choice.id; });\n                break;\n            }\n            case ActionType.HIGHLIGHT_ITEM: {\n                var highlighted = action.highlighted;\n                var item = state.find(function (obj) { return obj.id === action.item.id; });\n                if (item && item.highlighted !== highlighted) {\n                    item.highlighted = highlighted;\n                    if (context) {\n                        updateClassList(item, highlighted ? context.classNames.highlightedState : context.classNames.selectedState, highlighted ? context.classNames.selectedState : context.classNames.highlightedState);\n                    }\n                }\n                break;\n            }\n            default: {\n                update = false;\n                break;\n            }\n        }\n        return { state: state, update: update };\n    }\n\n    function groups(s, action) {\n        var state = s;\n        var update = true;\n        switch (action.type) {\n            case ActionType.ADD_GROUP: {\n                state.push(action.group);\n                break;\n            }\n            case ActionType.CLEAR_CHOICES: {\n                state = [];\n                break;\n            }\n            default: {\n                update = false;\n                break;\n            }\n        }\n        return { state: state, update: update };\n    }\n\n    /* eslint-disable */\n    function choices(s, action, context) {\n        var state = s;\n        var update = true;\n        switch (action.type) {\n            case ActionType.ADD_CHOICE: {\n                state.push(action.choice);\n                break;\n            }\n            case ActionType.REMOVE_CHOICE: {\n                action.choice.choiceEl = undefined;\n                if (action.choice.group) {\n                    action.choice.group.choices = action.choice.group.choices.filter(function (obj) { return obj.id !== action.choice.id; });\n                }\n                state = state.filter(function (obj) { return obj.id !== action.choice.id; });\n                break;\n            }\n            case ActionType.ADD_ITEM:\n            case ActionType.REMOVE_ITEM: {\n                action.item.choiceEl = undefined;\n                break;\n            }\n            case ActionType.FILTER_CHOICES: {\n                // avoid O(n^2) algorithm complexity when searching/filtering choices\n                var scoreLookup_1 = [];\n                action.results.forEach(function (result) {\n                    scoreLookup_1[result.item.id] = result;\n                });\n                state.forEach(function (choice) {\n                    var result = scoreLookup_1[choice.id];\n                    if (result !== undefined) {\n                        choice.score = result.score;\n                        choice.rank = result.rank;\n                        choice.active = true;\n                    }\n                    else {\n                        choice.score = 0;\n                        choice.rank = 0;\n                        choice.active = false;\n                    }\n                    if (context && context.appendGroupInSearch) {\n                        choice.choiceEl = undefined;\n                    }\n                });\n                break;\n            }\n            case ActionType.ACTIVATE_CHOICES: {\n                state.forEach(function (choice) {\n                    choice.active = action.active;\n                    if (context && context.appendGroupInSearch) {\n                        choice.choiceEl = undefined;\n                    }\n                });\n                break;\n            }\n            case ActionType.CLEAR_CHOICES: {\n                state = [];\n                break;\n            }\n            default: {\n                update = false;\n                break;\n            }\n        }\n        return { state: state, update: update };\n    }\n\n    var reducers = {\n        groups: groups,\n        items: items,\n        choices: choices,\n    };\n    var Store = /** @class */ (function () {\n        function Store(context) {\n            this._state = this.defaultState;\n            this._listeners = [];\n            this._txn = 0;\n            this._context = context;\n        }\n        Object.defineProperty(Store.prototype, \"defaultState\", {\n            // eslint-disable-next-line class-methods-use-this\n            get: function () {\n                return {\n                    groups: [],\n                    items: [],\n                    choices: [],\n                };\n            },\n            enumerable: false,\n            configurable: true\n        });\n        // eslint-disable-next-line class-methods-use-this\n        Store.prototype.changeSet = function (init) {\n            return {\n                groups: init,\n                items: init,\n                choices: init,\n            };\n        };\n        Store.prototype.reset = function () {\n            this._state = this.defaultState;\n            var changes = this.changeSet(true);\n            if (this._txn) {\n                this._changeSet = changes;\n            }\n            else {\n                this._listeners.forEach(function (l) { return l(changes); });\n            }\n        };\n        Store.prototype.subscribe = function (onChange) {\n            this._listeners.push(onChange);\n            return this;\n        };\n        Store.prototype.dispatch = function (action) {\n            var _this = this;\n            var state = this._state;\n            var hasChanges = false;\n            var changes = this._changeSet || this.changeSet(false);\n            Object.keys(reducers).forEach(function (key) {\n                var stateUpdate = reducers[key](state[key], action, _this._context);\n                if (stateUpdate.update) {\n                    hasChanges = true;\n                    changes[key] = true;\n                    state[key] = stateUpdate.state;\n                }\n            });\n            if (hasChanges) {\n                if (this._txn) {\n                    this._changeSet = changes;\n                }\n                else {\n                    this._listeners.forEach(function (l) { return l(changes); });\n                }\n            }\n        };\n        Store.prototype.withTxn = function (func) {\n            this._txn++;\n            try {\n                func();\n            }\n            finally {\n                this._txn = Math.max(0, this._txn - 1);\n                if (!this._txn) {\n                    var changeSet_1 = this._changeSet;\n                    if (changeSet_1) {\n                        this._changeSet = undefined;\n                        this._listeners.forEach(function (l) { return l(changeSet_1); });\n                    }\n                }\n            }\n        };\n        Object.defineProperty(Store.prototype, \"state\", {\n            /**\n             * Get store object\n             */\n            get: function () {\n                return this._state;\n            },\n            enumerable: false,\n            configurable: true\n        });\n        Object.defineProperty(Store.prototype, \"items\", {\n            /**\n             * Get items from store\n             */\n            get: function () {\n                return this.state.items;\n            },\n            enumerable: false,\n            configurable: true\n        });\n        Object.defineProperty(Store.prototype, \"highlightedActiveItems\", {\n            /**\n             * Get highlighted items from store\n             */\n            get: function () {\n                return this.items.filter(function (item) { return item.active && item.highlighted; });\n            },\n            enumerable: false,\n            configurable: true\n        });\n        Object.defineProperty(Store.prototype, \"choices\", {\n            /**\n             * Get choices from store\n             */\n            get: function () {\n                return this.state.choices;\n            },\n            enumerable: false,\n            configurable: true\n        });\n        Object.defineProperty(Store.prototype, \"activeChoices\", {\n            /**\n             * Get active choices from store\n             */\n            get: function () {\n                return this.choices.filter(function (choice) { return choice.active; });\n            },\n            enumerable: false,\n            configurable: true\n        });\n        Object.defineProperty(Store.prototype, \"searchableChoices\", {\n            /**\n             * Get choices that can be searched (excluding placeholders or disabled choices)\n             */\n            get: function () {\n                return this.choices.filter(function (choice) { return !choice.disabled && !choice.placeholder; });\n            },\n            enumerable: false,\n            configurable: true\n        });\n        Object.defineProperty(Store.prototype, \"groups\", {\n            /**\n             * Get groups from store\n             */\n            get: function () {\n                return this.state.groups;\n            },\n            enumerable: false,\n            configurable: true\n        });\n        Object.defineProperty(Store.prototype, \"activeGroups\", {\n            /**\n             * Get active groups from store\n             */\n            get: function () {\n                var _this = this;\n                return this.state.groups.filter(function (group) {\n                    var isActive = group.active && !group.disabled;\n                    var hasActiveOptions = _this.state.choices.some(function (choice) { return choice.active && !choice.disabled; });\n                    return isActive && hasActiveOptions;\n                }, []);\n            },\n            enumerable: false,\n            configurable: true\n        });\n        Store.prototype.inTxn = function () {\n            return this._txn > 0;\n        };\n        /**\n         * Get single choice by it's ID\n         */\n        Store.prototype.getChoiceById = function (id) {\n            return this.activeChoices.find(function (choice) { return choice.id === id; });\n        };\n        /**\n         * Get group by group id\n         */\n        Store.prototype.getGroupById = function (id) {\n            return this.groups.find(function (group) { return group.id === id; });\n        };\n        return Store;\n    }());\n\n    var NoticeTypes = {\n        noChoices: 'no-choices',\n        noResults: 'no-results',\n        addChoice: 'add-choice',\n        generic: '',\n    };\n\n    function _defineProperty(e, r, t) {\n      return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {\n        value: t,\n        enumerable: !0,\n        configurable: !0,\n        writable: !0\n      }) : e[r] = t, e;\n    }\n    function ownKeys(e, r) {\n      var t = Object.keys(e);\n      if (Object.getOwnPropertySymbols) {\n        var o = Object.getOwnPropertySymbols(e);\n        r && (o = o.filter(function (r) {\n          return Object.getOwnPropertyDescriptor(e, r).enumerable;\n        })), t.push.apply(t, o);\n      }\n      return t;\n    }\n    function _objectSpread2(e) {\n      for (var r = 1; r < arguments.length; r++) {\n        var t = null != arguments[r] ? arguments[r] : {};\n        r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {\n          _defineProperty(e, r, t[r]);\n        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {\n          Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));\n        });\n      }\n      return e;\n    }\n    function _toPrimitive(t, r) {\n      if (\"object\" != typeof t || !t) return t;\n      var e = t[Symbol.toPrimitive];\n      if (void 0 !== e) {\n        var i = e.call(t, r || \"default\");\n        if (\"object\" != typeof i) return i;\n        throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n      }\n      return (\"string\" === r ? String : Number)(t);\n    }\n    function _toPropertyKey(t) {\n      var i = _toPrimitive(t, \"string\");\n      return \"symbol\" == typeof i ? i : i + \"\";\n    }\n\n    /**\n     * Fuse.js v7.0.0 - Lightweight fuzzy-search (http://fusejs.io)\n     *\n     * Copyright (c) 2023 Kiro Risk (http://kiro.me)\n     * All Rights Reserved. Apache Software License 2.0\n     *\n     * http://www.apache.org/licenses/LICENSE-2.0\n     */\n\n    function isArray(value) {\n      return !Array.isArray ? getTag(value) === '[object Array]' : Array.isArray(value);\n    }\n\n    // Adapted from: https://github.com/lodash/lodash/blob/master/.internal/baseToString.js\n    const INFINITY = 1 / 0;\n    function baseToString(value) {\n      // Exit early for strings to avoid a performance hit in some environments.\n      if (typeof value == 'string') {\n        return value;\n      }\n      let result = value + '';\n      return result == '0' && 1 / value == -INFINITY ? '-0' : result;\n    }\n    function toString(value) {\n      return value == null ? '' : baseToString(value);\n    }\n    function isString(value) {\n      return typeof value === 'string';\n    }\n    function isNumber(value) {\n      return typeof value === 'number';\n    }\n\n    // Adapted from: https://github.com/lodash/lodash/blob/master/isBoolean.js\n    function isBoolean(value) {\n      return value === true || value === false || isObjectLike(value) && getTag(value) == '[object Boolean]';\n    }\n    function isObject(value) {\n      return typeof value === 'object';\n    }\n\n    // Checks if `value` is object-like.\n    function isObjectLike(value) {\n      return isObject(value) && value !== null;\n    }\n    function isDefined(value) {\n      return value !== undefined && value !== null;\n    }\n    function isBlank(value) {\n      return !value.trim().length;\n    }\n\n    // Gets the `toStringTag` of `value`.\n    // Adapted from: https://github.com/lodash/lodash/blob/master/.internal/getTag.js\n    function getTag(value) {\n      return value == null ? value === undefined ? '[object Undefined]' : '[object Null]' : Object.prototype.toString.call(value);\n    }\n    const EXTENDED_SEARCH_UNAVAILABLE = 'Extended search is not available';\n    const INCORRECT_INDEX_TYPE = \"Incorrect 'index' type\";\n    const LOGICAL_SEARCH_INVALID_QUERY_FOR_KEY = key => `Invalid value for key ${key}`;\n    const PATTERN_LENGTH_TOO_LARGE = max => `Pattern length exceeds max of ${max}.`;\n    const MISSING_KEY_PROPERTY = name => `Missing ${name} property in key`;\n    const INVALID_KEY_WEIGHT_VALUE = key => `Property 'weight' in key '${key}' must be a positive integer`;\n    const hasOwn = Object.prototype.hasOwnProperty;\n    class KeyStore {\n      constructor(keys) {\n        this._keys = [];\n        this._keyMap = {};\n        let totalWeight = 0;\n        keys.forEach(key => {\n          let obj = createKey(key);\n          this._keys.push(obj);\n          this._keyMap[obj.id] = obj;\n          totalWeight += obj.weight;\n        });\n\n        // Normalize weights so that their sum is equal to 1\n        this._keys.forEach(key => {\n          key.weight /= totalWeight;\n        });\n      }\n      get(keyId) {\n        return this._keyMap[keyId];\n      }\n      keys() {\n        return this._keys;\n      }\n      toJSON() {\n        return JSON.stringify(this._keys);\n      }\n    }\n    function createKey(key) {\n      let path = null;\n      let id = null;\n      let src = null;\n      let weight = 1;\n      let getFn = null;\n      if (isString(key) || isArray(key)) {\n        src = key;\n        path = createKeyPath(key);\n        id = createKeyId(key);\n      } else {\n        if (!hasOwn.call(key, 'name')) {\n          throw new Error(MISSING_KEY_PROPERTY('name'));\n        }\n        const name = key.name;\n        src = name;\n        if (hasOwn.call(key, 'weight')) {\n          weight = key.weight;\n          if (weight <= 0) {\n            throw new Error(INVALID_KEY_WEIGHT_VALUE(name));\n          }\n        }\n        path = createKeyPath(name);\n        id = createKeyId(name);\n        getFn = key.getFn;\n      }\n      return {\n        path,\n        id,\n        weight,\n        src,\n        getFn\n      };\n    }\n    function createKeyPath(key) {\n      return isArray(key) ? key : key.split('.');\n    }\n    function createKeyId(key) {\n      return isArray(key) ? key.join('.') : key;\n    }\n    function get(obj, path) {\n      let list = [];\n      let arr = false;\n      const deepGet = (obj, path, index) => {\n        if (!isDefined(obj)) {\n          return;\n        }\n        if (!path[index]) {\n          // If there's no path left, we've arrived at the object we care about.\n          list.push(obj);\n        } else {\n          let key = path[index];\n          const value = obj[key];\n          if (!isDefined(value)) {\n            return;\n          }\n\n          // If we're at the last value in the path, and if it's a string/number/bool,\n          // add it to the list\n          if (index === path.length - 1 && (isString(value) || isNumber(value) || isBoolean(value))) {\n            list.push(toString(value));\n          } else if (isArray(value)) {\n            arr = true;\n            // Search each item in the array.\n            for (let i = 0, len = value.length; i < len; i += 1) {\n              deepGet(value[i], path, index + 1);\n            }\n          } else if (path.length) {\n            // An object. Recurse further.\n            deepGet(value, path, index + 1);\n          }\n        }\n      };\n\n      // Backwards compatibility (since path used to be a string)\n      deepGet(obj, isString(path) ? path.split('.') : path, 0);\n      return arr ? list : list[0];\n    }\n    const MatchOptions = {\n      // Whether the matches should be included in the result set. When `true`, each record in the result\n      // set will include the indices of the matched characters.\n      // These can consequently be used for highlighting purposes.\n      includeMatches: false,\n      // When `true`, the matching function will continue to the end of a search pattern even if\n      // a perfect match has already been located in the string.\n      findAllMatches: false,\n      // Minimum number of characters that must be matched before a result is considered a match\n      minMatchCharLength: 1\n    };\n    const BasicOptions = {\n      // When `true`, the algorithm continues searching to the end of the input even if a perfect\n      // match is found before the end of the same input.\n      isCaseSensitive: false,\n      // When true, the matching function will continue to the end of a search pattern even if\n      includeScore: false,\n      // List of properties that will be searched. This also supports nested properties.\n      keys: [],\n      // Whether to sort the result list, by score\n      shouldSort: true,\n      // Default sort function: sort by ascending score, ascending index\n      sortFn: (a, b) => a.score === b.score ? a.idx < b.idx ? -1 : 1 : a.score < b.score ? -1 : 1\n    };\n    const FuzzyOptions = {\n      // Approximately where in the text is the pattern expected to be found?\n      location: 0,\n      // At what point does the match algorithm give up. A threshold of '0.0' requires a perfect match\n      // (of both letters and location), a threshold of '1.0' would match anything.\n      threshold: 0.6,\n      // Determines how close the match must be to the fuzzy location (specified above).\n      // An exact letter match which is 'distance' characters away from the fuzzy location\n      // would score as a complete mismatch. A distance of '0' requires the match be at\n      // the exact location specified, a threshold of '1000' would require a perfect match\n      // to be within 800 characters of the fuzzy location to be found using a 0.8 threshold.\n      distance: 100\n    };\n    const AdvancedOptions = {\n      // When `true`, it enables the use of unix-like search commands\n      useExtendedSearch: false,\n      // The get function to use when fetching an object's properties.\n      // The default will search nested paths *ie foo.bar.baz*\n      getFn: get,\n      // When `true`, search will ignore `location` and `distance`, so it won't matter\n      // where in the string the pattern appears.\n      // More info: https://fusejs.io/concepts/scoring-theory.html#fuzziness-score\n      ignoreLocation: false,\n      // When `true`, the calculation for the relevance score (used for sorting) will\n      // ignore the field-length norm.\n      // More info: https://fusejs.io/concepts/scoring-theory.html#field-length-norm\n      ignoreFieldNorm: false,\n      // The weight to determine how much field length norm effects scoring.\n      fieldNormWeight: 1\n    };\n    var Config = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, BasicOptions), MatchOptions), FuzzyOptions), AdvancedOptions);\n    const SPACE = /[^ ]+/g;\n\n    // Field-length norm: the shorter the field, the higher the weight.\n    // Set to 3 decimals to reduce index size.\n    function norm(weight = 1, mantissa = 3) {\n      const cache = new Map();\n      const m = Math.pow(10, mantissa);\n      return {\n        get(value) {\n          const numTokens = value.match(SPACE).length;\n          if (cache.has(numTokens)) {\n            return cache.get(numTokens);\n          }\n\n          // Default function is 1/sqrt(x), weight makes that variable\n          const norm = 1 / Math.pow(numTokens, 0.5 * weight);\n\n          // In place of `toFixed(mantissa)`, for faster computation\n          const n = parseFloat(Math.round(norm * m) / m);\n          cache.set(numTokens, n);\n          return n;\n        },\n        clear() {\n          cache.clear();\n        }\n      };\n    }\n    class FuseIndex {\n      constructor({\n        getFn = Config.getFn,\n        fieldNormWeight = Config.fieldNormWeight\n      } = {}) {\n        this.norm = norm(fieldNormWeight, 3);\n        this.getFn = getFn;\n        this.isCreated = false;\n        this.setIndexRecords();\n      }\n      setSources(docs = []) {\n        this.docs = docs;\n      }\n      setIndexRecords(records = []) {\n        this.records = records;\n      }\n      setKeys(keys = []) {\n        this.keys = keys;\n        this._keysMap = {};\n        keys.forEach((key, idx) => {\n          this._keysMap[key.id] = idx;\n        });\n      }\n      create() {\n        if (this.isCreated || !this.docs.length) {\n          return;\n        }\n        this.isCreated = true;\n\n        // List is Array<String>\n        if (isString(this.docs[0])) {\n          this.docs.forEach((doc, docIndex) => {\n            this._addString(doc, docIndex);\n          });\n        } else {\n          // List is Array<Object>\n          this.docs.forEach((doc, docIndex) => {\n            this._addObject(doc, docIndex);\n          });\n        }\n        this.norm.clear();\n      }\n      // Adds a doc to the end of the index\n      add(doc) {\n        const idx = this.size();\n        if (isString(doc)) {\n          this._addString(doc, idx);\n        } else {\n          this._addObject(doc, idx);\n        }\n      }\n      // Removes the doc at the specified index of the index\n      removeAt(idx) {\n        this.records.splice(idx, 1);\n\n        // Change ref index of every subsquent doc\n        for (let i = idx, len = this.size(); i < len; i += 1) {\n          this.records[i].i -= 1;\n        }\n      }\n      getValueForItemAtKeyId(item, keyId) {\n        return item[this._keysMap[keyId]];\n      }\n      size() {\n        return this.records.length;\n      }\n      _addString(doc, docIndex) {\n        if (!isDefined(doc) || isBlank(doc)) {\n          return;\n        }\n        let record = {\n          v: doc,\n          i: docIndex,\n          n: this.norm.get(doc)\n        };\n        this.records.push(record);\n      }\n      _addObject(doc, docIndex) {\n        let record = {\n          i: docIndex,\n          $: {}\n        };\n\n        // Iterate over every key (i.e, path), and fetch the value at that key\n        this.keys.forEach((key, keyIndex) => {\n          let value = key.getFn ? key.getFn(doc) : this.getFn(doc, key.path);\n          if (!isDefined(value)) {\n            return;\n          }\n          if (isArray(value)) {\n            let subRecords = [];\n            const stack = [{\n              nestedArrIndex: -1,\n              value\n            }];\n            while (stack.length) {\n              const {\n                nestedArrIndex,\n                value\n              } = stack.pop();\n              if (!isDefined(value)) {\n                continue;\n              }\n              if (isString(value) && !isBlank(value)) {\n                let subRecord = {\n                  v: value,\n                  i: nestedArrIndex,\n                  n: this.norm.get(value)\n                };\n                subRecords.push(subRecord);\n              } else if (isArray(value)) {\n                value.forEach((item, k) => {\n                  stack.push({\n                    nestedArrIndex: k,\n                    value: item\n                  });\n                });\n              } else ;\n            }\n            record.$[keyIndex] = subRecords;\n          } else if (isString(value) && !isBlank(value)) {\n            let subRecord = {\n              v: value,\n              n: this.norm.get(value)\n            };\n            record.$[keyIndex] = subRecord;\n          }\n        });\n        this.records.push(record);\n      }\n      toJSON() {\n        return {\n          keys: this.keys,\n          records: this.records\n        };\n      }\n    }\n    function createIndex(keys, docs, {\n      getFn = Config.getFn,\n      fieldNormWeight = Config.fieldNormWeight\n    } = {}) {\n      const myIndex = new FuseIndex({\n        getFn,\n        fieldNormWeight\n      });\n      myIndex.setKeys(keys.map(createKey));\n      myIndex.setSources(docs);\n      myIndex.create();\n      return myIndex;\n    }\n    function parseIndex(data, {\n      getFn = Config.getFn,\n      fieldNormWeight = Config.fieldNormWeight\n    } = {}) {\n      const {\n        keys,\n        records\n      } = data;\n      const myIndex = new FuseIndex({\n        getFn,\n        fieldNormWeight\n      });\n      myIndex.setKeys(keys);\n      myIndex.setIndexRecords(records);\n      return myIndex;\n    }\n    function computeScore$1(pattern, {\n      errors = 0,\n      currentLocation = 0,\n      expectedLocation = 0,\n      distance = Config.distance,\n      ignoreLocation = Config.ignoreLocation\n    } = {}) {\n      const accuracy = errors / pattern.length;\n      if (ignoreLocation) {\n        return accuracy;\n      }\n      const proximity = Math.abs(expectedLocation - currentLocation);\n      if (!distance) {\n        // Dodge divide by zero error.\n        return proximity ? 1.0 : accuracy;\n      }\n      return accuracy + proximity / distance;\n    }\n    function convertMaskToIndices(matchmask = [], minMatchCharLength = Config.minMatchCharLength) {\n      let indices = [];\n      let start = -1;\n      let end = -1;\n      let i = 0;\n      for (let len = matchmask.length; i < len; i += 1) {\n        let match = matchmask[i];\n        if (match && start === -1) {\n          start = i;\n        } else if (!match && start !== -1) {\n          end = i - 1;\n          if (end - start + 1 >= minMatchCharLength) {\n            indices.push([start, end]);\n          }\n          start = -1;\n        }\n      }\n\n      // (i-1 - start) + 1 => i - start\n      if (matchmask[i - 1] && i - start >= minMatchCharLength) {\n        indices.push([start, i - 1]);\n      }\n      return indices;\n    }\n\n    // Machine word size\n    const MAX_BITS = 32;\n    function search(text, pattern, patternAlphabet, {\n      location = Config.location,\n      distance = Config.distance,\n      threshold = Config.threshold,\n      findAllMatches = Config.findAllMatches,\n      minMatchCharLength = Config.minMatchCharLength,\n      includeMatches = Config.includeMatches,\n      ignoreLocation = Config.ignoreLocation\n    } = {}) {\n      if (pattern.length > MAX_BITS) {\n        throw new Error(PATTERN_LENGTH_TOO_LARGE(MAX_BITS));\n      }\n      const patternLen = pattern.length;\n      // Set starting location at beginning text and initialize the alphabet.\n      const textLen = text.length;\n      // Handle the case when location > text.length\n      const expectedLocation = Math.max(0, Math.min(location, textLen));\n      // Highest score beyond which we give up.\n      let currentThreshold = threshold;\n      // Is there a nearby exact match? (speedup)\n      let bestLocation = expectedLocation;\n\n      // Performance: only computer matches when the minMatchCharLength > 1\n      // OR if `includeMatches` is true.\n      const computeMatches = minMatchCharLength > 1 || includeMatches;\n      // A mask of the matches, used for building the indices\n      const matchMask = computeMatches ? Array(textLen) : [];\n      let index;\n\n      // Get all exact matches, here for speed up\n      while ((index = text.indexOf(pattern, bestLocation)) > -1) {\n        let score = computeScore$1(pattern, {\n          currentLocation: index,\n          expectedLocation,\n          distance,\n          ignoreLocation\n        });\n        currentThreshold = Math.min(score, currentThreshold);\n        bestLocation = index + patternLen;\n        if (computeMatches) {\n          let i = 0;\n          while (i < patternLen) {\n            matchMask[index + i] = 1;\n            i += 1;\n          }\n        }\n      }\n\n      // Reset the best location\n      bestLocation = -1;\n      let lastBitArr = [];\n      let finalScore = 1;\n      let binMax = patternLen + textLen;\n      const mask = 1 << patternLen - 1;\n      for (let i = 0; i < patternLen; i += 1) {\n        // Scan for the best match; each iteration allows for one more error.\n        // Run a binary search to determine how far from the match location we can stray\n        // at this error level.\n        let binMin = 0;\n        let binMid = binMax;\n        while (binMin < binMid) {\n          const score = computeScore$1(pattern, {\n            errors: i,\n            currentLocation: expectedLocation + binMid,\n            expectedLocation,\n            distance,\n            ignoreLocation\n          });\n          if (score <= currentThreshold) {\n            binMin = binMid;\n          } else {\n            binMax = binMid;\n          }\n          binMid = Math.floor((binMax - binMin) / 2 + binMin);\n        }\n\n        // Use the result from this iteration as the maximum for the next.\n        binMax = binMid;\n        let start = Math.max(1, expectedLocation - binMid + 1);\n        let finish = findAllMatches ? textLen : Math.min(expectedLocation + binMid, textLen) + patternLen;\n\n        // Initialize the bit array\n        let bitArr = Array(finish + 2);\n        bitArr[finish + 1] = (1 << i) - 1;\n        for (let j = finish; j >= start; j -= 1) {\n          let currentLocation = j - 1;\n          let charMatch = patternAlphabet[text.charAt(currentLocation)];\n          if (computeMatches) {\n            // Speed up: quick bool to int conversion (i.e, `charMatch ? 1 : 0`)\n            matchMask[currentLocation] = +!!charMatch;\n          }\n\n          // First pass: exact match\n          bitArr[j] = (bitArr[j + 1] << 1 | 1) & charMatch;\n\n          // Subsequent passes: fuzzy match\n          if (i) {\n            bitArr[j] |= (lastBitArr[j + 1] | lastBitArr[j]) << 1 | 1 | lastBitArr[j + 1];\n          }\n          if (bitArr[j] & mask) {\n            finalScore = computeScore$1(pattern, {\n              errors: i,\n              currentLocation,\n              expectedLocation,\n              distance,\n              ignoreLocation\n            });\n\n            // This match will almost certainly be better than any existing match.\n            // But check anyway.\n            if (finalScore <= currentThreshold) {\n              // Indeed it is\n              currentThreshold = finalScore;\n              bestLocation = currentLocation;\n\n              // Already passed `loc`, downhill from here on in.\n              if (bestLocation <= expectedLocation) {\n                break;\n              }\n\n              // When passing `bestLocation`, don't exceed our current distance from `expectedLocation`.\n              start = Math.max(1, 2 * expectedLocation - bestLocation);\n            }\n          }\n        }\n\n        // No hope for a (better) match at greater error levels.\n        const score = computeScore$1(pattern, {\n          errors: i + 1,\n          currentLocation: expectedLocation,\n          expectedLocation,\n          distance,\n          ignoreLocation\n        });\n        if (score > currentThreshold) {\n          break;\n        }\n        lastBitArr = bitArr;\n      }\n      const result = {\n        isMatch: bestLocation >= 0,\n        // Count exact matches (those with a score of 0) to be \"almost\" exact\n        score: Math.max(0.001, finalScore)\n      };\n      if (computeMatches) {\n        const indices = convertMaskToIndices(matchMask, minMatchCharLength);\n        if (!indices.length) {\n          result.isMatch = false;\n        } else if (includeMatches) {\n          result.indices = indices;\n        }\n      }\n      return result;\n    }\n    function createPatternAlphabet(pattern) {\n      let mask = {};\n      for (let i = 0, len = pattern.length; i < len; i += 1) {\n        const char = pattern.charAt(i);\n        mask[char] = (mask[char] || 0) | 1 << len - i - 1;\n      }\n      return mask;\n    }\n    class BitapSearch {\n      constructor(pattern, {\n        location = Config.location,\n        threshold = Config.threshold,\n        distance = Config.distance,\n        includeMatches = Config.includeMatches,\n        findAllMatches = Config.findAllMatches,\n        minMatchCharLength = Config.minMatchCharLength,\n        isCaseSensitive = Config.isCaseSensitive,\n        ignoreLocation = Config.ignoreLocation\n      } = {}) {\n        this.options = {\n          location,\n          threshold,\n          distance,\n          includeMatches,\n          findAllMatches,\n          minMatchCharLength,\n          isCaseSensitive,\n          ignoreLocation\n        };\n        this.pattern = isCaseSensitive ? pattern : pattern.toLowerCase();\n        this.chunks = [];\n        if (!this.pattern.length) {\n          return;\n        }\n        const addChunk = (pattern, startIndex) => {\n          this.chunks.push({\n            pattern,\n            alphabet: createPatternAlphabet(pattern),\n            startIndex\n          });\n        };\n        const len = this.pattern.length;\n        if (len > MAX_BITS) {\n          let i = 0;\n          const remainder = len % MAX_BITS;\n          const end = len - remainder;\n          while (i < end) {\n            addChunk(this.pattern.substr(i, MAX_BITS), i);\n            i += MAX_BITS;\n          }\n          if (remainder) {\n            const startIndex = len - MAX_BITS;\n            addChunk(this.pattern.substr(startIndex), startIndex);\n          }\n        } else {\n          addChunk(this.pattern, 0);\n        }\n      }\n      searchIn(text) {\n        const {\n          isCaseSensitive,\n          includeMatches\n        } = this.options;\n        if (!isCaseSensitive) {\n          text = text.toLowerCase();\n        }\n\n        // Exact match\n        if (this.pattern === text) {\n          let result = {\n            isMatch: true,\n            score: 0\n          };\n          if (includeMatches) {\n            result.indices = [[0, text.length - 1]];\n          }\n          return result;\n        }\n\n        // Otherwise, use Bitap algorithm\n        const {\n          location,\n          distance,\n          threshold,\n          findAllMatches,\n          minMatchCharLength,\n          ignoreLocation\n        } = this.options;\n        let allIndices = [];\n        let totalScore = 0;\n        let hasMatches = false;\n        this.chunks.forEach(({\n          pattern,\n          alphabet,\n          startIndex\n        }) => {\n          const {\n            isMatch,\n            score,\n            indices\n          } = search(text, pattern, alphabet, {\n            location: location + startIndex,\n            distance,\n            threshold,\n            findAllMatches,\n            minMatchCharLength,\n            includeMatches,\n            ignoreLocation\n          });\n          if (isMatch) {\n            hasMatches = true;\n          }\n          totalScore += score;\n          if (isMatch && indices) {\n            allIndices = [...allIndices, ...indices];\n          }\n        });\n        let result = {\n          isMatch: hasMatches,\n          score: hasMatches ? totalScore / this.chunks.length : 1\n        };\n        if (hasMatches && includeMatches) {\n          result.indices = allIndices;\n        }\n        return result;\n      }\n    }\n    class BaseMatch {\n      constructor(pattern) {\n        this.pattern = pattern;\n      }\n      static isMultiMatch(pattern) {\n        return getMatch(pattern, this.multiRegex);\n      }\n      static isSingleMatch(pattern) {\n        return getMatch(pattern, this.singleRegex);\n      }\n      search( /*text*/) {}\n    }\n    function getMatch(pattern, exp) {\n      const matches = pattern.match(exp);\n      return matches ? matches[1] : null;\n    }\n\n    // Token: 'file\n\n    class ExactMatch extends BaseMatch {\n      constructor(pattern) {\n        super(pattern);\n      }\n      static get type() {\n        return 'exact';\n      }\n      static get multiRegex() {\n        return /^=\"(.*)\"$/;\n      }\n      static get singleRegex() {\n        return /^=(.*)$/;\n      }\n      search(text) {\n        const isMatch = text === this.pattern;\n        return {\n          isMatch,\n          score: isMatch ? 0 : 1,\n          indices: [0, this.pattern.length - 1]\n        };\n      }\n    }\n\n    // Token: !fire\n\n    class InverseExactMatch extends BaseMatch {\n      constructor(pattern) {\n        super(pattern);\n      }\n      static get type() {\n        return 'inverse-exact';\n      }\n      static get multiRegex() {\n        return /^!\"(.*)\"$/;\n      }\n      static get singleRegex() {\n        return /^!(.*)$/;\n      }\n      search(text) {\n        const index = text.indexOf(this.pattern);\n        const isMatch = index === -1;\n        return {\n          isMatch,\n          score: isMatch ? 0 : 1,\n          indices: [0, text.length - 1]\n        };\n      }\n    }\n\n    // Token: ^file\n\n    class PrefixExactMatch extends BaseMatch {\n      constructor(pattern) {\n        super(pattern);\n      }\n      static get type() {\n        return 'prefix-exact';\n      }\n      static get multiRegex() {\n        return /^\\^\"(.*)\"$/;\n      }\n      static get singleRegex() {\n        return /^\\^(.*)$/;\n      }\n      search(text) {\n        const isMatch = text.startsWith(this.pattern);\n        return {\n          isMatch,\n          score: isMatch ? 0 : 1,\n          indices: [0, this.pattern.length - 1]\n        };\n      }\n    }\n\n    // Token: !^fire\n\n    class InversePrefixExactMatch extends BaseMatch {\n      constructor(pattern) {\n        super(pattern);\n      }\n      static get type() {\n        return 'inverse-prefix-exact';\n      }\n      static get multiRegex() {\n        return /^!\\^\"(.*)\"$/;\n      }\n      static get singleRegex() {\n        return /^!\\^(.*)$/;\n      }\n      search(text) {\n        const isMatch = !text.startsWith(this.pattern);\n        return {\n          isMatch,\n          score: isMatch ? 0 : 1,\n          indices: [0, text.length - 1]\n        };\n      }\n    }\n\n    // Token: .file$\n\n    class SuffixExactMatch extends BaseMatch {\n      constructor(pattern) {\n        super(pattern);\n      }\n      static get type() {\n        return 'suffix-exact';\n      }\n      static get multiRegex() {\n        return /^\"(.*)\"\\$$/;\n      }\n      static get singleRegex() {\n        return /^(.*)\\$$/;\n      }\n      search(text) {\n        const isMatch = text.endsWith(this.pattern);\n        return {\n          isMatch,\n          score: isMatch ? 0 : 1,\n          indices: [text.length - this.pattern.length, text.length - 1]\n        };\n      }\n    }\n\n    // Token: !.file$\n\n    class InverseSuffixExactMatch extends BaseMatch {\n      constructor(pattern) {\n        super(pattern);\n      }\n      static get type() {\n        return 'inverse-suffix-exact';\n      }\n      static get multiRegex() {\n        return /^!\"(.*)\"\\$$/;\n      }\n      static get singleRegex() {\n        return /^!(.*)\\$$/;\n      }\n      search(text) {\n        const isMatch = !text.endsWith(this.pattern);\n        return {\n          isMatch,\n          score: isMatch ? 0 : 1,\n          indices: [0, text.length - 1]\n        };\n      }\n    }\n    class FuzzyMatch extends BaseMatch {\n      constructor(pattern, {\n        location = Config.location,\n        threshold = Config.threshold,\n        distance = Config.distance,\n        includeMatches = Config.includeMatches,\n        findAllMatches = Config.findAllMatches,\n        minMatchCharLength = Config.minMatchCharLength,\n        isCaseSensitive = Config.isCaseSensitive,\n        ignoreLocation = Config.ignoreLocation\n      } = {}) {\n        super(pattern);\n        this._bitapSearch = new BitapSearch(pattern, {\n          location,\n          threshold,\n          distance,\n          includeMatches,\n          findAllMatches,\n          minMatchCharLength,\n          isCaseSensitive,\n          ignoreLocation\n        });\n      }\n      static get type() {\n        return 'fuzzy';\n      }\n      static get multiRegex() {\n        return /^\"(.*)\"$/;\n      }\n      static get singleRegex() {\n        return /^(.*)$/;\n      }\n      search(text) {\n        return this._bitapSearch.searchIn(text);\n      }\n    }\n\n    // Token: 'file\n\n    class IncludeMatch extends BaseMatch {\n      constructor(pattern) {\n        super(pattern);\n      }\n      static get type() {\n        return 'include';\n      }\n      static get multiRegex() {\n        return /^'\"(.*)\"$/;\n      }\n      static get singleRegex() {\n        return /^'(.*)$/;\n      }\n      search(text) {\n        let location = 0;\n        let index;\n        const indices = [];\n        const patternLen = this.pattern.length;\n\n        // Get all exact matches\n        while ((index = text.indexOf(this.pattern, location)) > -1) {\n          location = index + patternLen;\n          indices.push([index, location - 1]);\n        }\n        const isMatch = !!indices.length;\n        return {\n          isMatch,\n          score: isMatch ? 0 : 1,\n          indices\n        };\n      }\n    }\n\n    // ❗Order is important. DO NOT CHANGE.\n    const searchers = [ExactMatch, IncludeMatch, PrefixExactMatch, InversePrefixExactMatch, InverseSuffixExactMatch, SuffixExactMatch, InverseExactMatch, FuzzyMatch];\n    const searchersLen = searchers.length;\n\n    // Regex to split by spaces, but keep anything in quotes together\n    const SPACE_RE = / +(?=(?:[^\\\"]*\\\"[^\\\"]*\\\")*[^\\\"]*$)/;\n    const OR_TOKEN = '|';\n\n    // Return a 2D array representation of the query, for simpler parsing.\n    // Example:\n    // \"^core go$ | rb$ | py$ xy$\" => [[\"^core\", \"go$\"], [\"rb$\"], [\"py$\", \"xy$\"]]\n    function parseQuery(pattern, options = {}) {\n      return pattern.split(OR_TOKEN).map(item => {\n        let query = item.trim().split(SPACE_RE).filter(item => item && !!item.trim());\n        let results = [];\n        for (let i = 0, len = query.length; i < len; i += 1) {\n          const queryItem = query[i];\n\n          // 1. Handle multiple query match (i.e, once that are quoted, like `\"hello world\"`)\n          let found = false;\n          let idx = -1;\n          while (!found && ++idx < searchersLen) {\n            const searcher = searchers[idx];\n            let token = searcher.isMultiMatch(queryItem);\n            if (token) {\n              results.push(new searcher(token, options));\n              found = true;\n            }\n          }\n          if (found) {\n            continue;\n          }\n\n          // 2. Handle single query matches (i.e, once that are *not* quoted)\n          idx = -1;\n          while (++idx < searchersLen) {\n            const searcher = searchers[idx];\n            let token = searcher.isSingleMatch(queryItem);\n            if (token) {\n              results.push(new searcher(token, options));\n              break;\n            }\n          }\n        }\n        return results;\n      });\n    }\n\n    // These extended matchers can return an array of matches, as opposed\n    // to a singl match\n    const MultiMatchSet = new Set([FuzzyMatch.type, IncludeMatch.type]);\n\n    /**\n     * Command-like searching\n     * ======================\n     *\n     * Given multiple search terms delimited by spaces.e.g. `^jscript .python$ ruby !java`,\n     * search in a given text.\n     *\n     * Search syntax:\n     *\n     * | Token       | Match type                 | Description                            |\n     * | ----------- | -------------------------- | -------------------------------------- |\n     * | `jscript`   | fuzzy-match                | Items that fuzzy match `jscript`       |\n     * | `=scheme`   | exact-match                | Items that are `scheme`                |\n     * | `'python`   | include-match              | Items that include `python`            |\n     * | `!ruby`     | inverse-exact-match        | Items that do not include `ruby`       |\n     * | `^java`     | prefix-exact-match         | Items that start with `java`           |\n     * | `!^earlang` | inverse-prefix-exact-match | Items that do not start with `earlang` |\n     * | `.js$`      | suffix-exact-match         | Items that end with `.js`              |\n     * | `!.go$`     | inverse-suffix-exact-match | Items that do not end with `.go`       |\n     *\n     * A single pipe character acts as an OR operator. For example, the following\n     * query matches entries that start with `core` and end with either`go`, `rb`,\n     * or`py`.\n     *\n     * ```\n     * ^core go$ | rb$ | py$\n     * ```\n     */\n    class ExtendedSearch {\n      constructor(pattern, {\n        isCaseSensitive = Config.isCaseSensitive,\n        includeMatches = Config.includeMatches,\n        minMatchCharLength = Config.minMatchCharLength,\n        ignoreLocation = Config.ignoreLocation,\n        findAllMatches = Config.findAllMatches,\n        location = Config.location,\n        threshold = Config.threshold,\n        distance = Config.distance\n      } = {}) {\n        this.query = null;\n        this.options = {\n          isCaseSensitive,\n          includeMatches,\n          minMatchCharLength,\n          findAllMatches,\n          ignoreLocation,\n          location,\n          threshold,\n          distance\n        };\n        this.pattern = isCaseSensitive ? pattern : pattern.toLowerCase();\n        this.query = parseQuery(this.pattern, this.options);\n      }\n      static condition(_, options) {\n        return options.useExtendedSearch;\n      }\n      searchIn(text) {\n        const query = this.query;\n        if (!query) {\n          return {\n            isMatch: false,\n            score: 1\n          };\n        }\n        const {\n          includeMatches,\n          isCaseSensitive\n        } = this.options;\n        text = isCaseSensitive ? text : text.toLowerCase();\n        let numMatches = 0;\n        let allIndices = [];\n        let totalScore = 0;\n\n        // ORs\n        for (let i = 0, qLen = query.length; i < qLen; i += 1) {\n          const searchers = query[i];\n\n          // Reset indices\n          allIndices.length = 0;\n          numMatches = 0;\n\n          // ANDs\n          for (let j = 0, pLen = searchers.length; j < pLen; j += 1) {\n            const searcher = searchers[j];\n            const {\n              isMatch,\n              indices,\n              score\n            } = searcher.search(text);\n            if (isMatch) {\n              numMatches += 1;\n              totalScore += score;\n              if (includeMatches) {\n                const type = searcher.constructor.type;\n                if (MultiMatchSet.has(type)) {\n                  allIndices = [...allIndices, ...indices];\n                } else {\n                  allIndices.push(indices);\n                }\n              }\n            } else {\n              totalScore = 0;\n              numMatches = 0;\n              allIndices.length = 0;\n              break;\n            }\n          }\n\n          // OR condition, so if TRUE, return\n          if (numMatches) {\n            let result = {\n              isMatch: true,\n              score: totalScore / numMatches\n            };\n            if (includeMatches) {\n              result.indices = allIndices;\n            }\n            return result;\n          }\n        }\n\n        // Nothing was matched\n        return {\n          isMatch: false,\n          score: 1\n        };\n      }\n    }\n    const registeredSearchers = [];\n    function register(...args) {\n      registeredSearchers.push(...args);\n    }\n    function createSearcher(pattern, options) {\n      for (let i = 0, len = registeredSearchers.length; i < len; i += 1) {\n        let searcherClass = registeredSearchers[i];\n        if (searcherClass.condition(pattern, options)) {\n          return new searcherClass(pattern, options);\n        }\n      }\n      return new BitapSearch(pattern, options);\n    }\n    const LogicalOperator = {\n      AND: '$and',\n      OR: '$or'\n    };\n    const KeyType = {\n      PATH: '$path',\n      PATTERN: '$val'\n    };\n    const isExpression = query => !!(query[LogicalOperator.AND] || query[LogicalOperator.OR]);\n    const isPath = query => !!query[KeyType.PATH];\n    const isLeaf = query => !isArray(query) && isObject(query) && !isExpression(query);\n    const convertToExplicit = query => ({\n      [LogicalOperator.AND]: Object.keys(query).map(key => ({\n        [key]: query[key]\n      }))\n    });\n\n    // When `auto` is `true`, the parse function will infer and initialize and add\n    // the appropriate `Searcher` instance\n    function parse(query, options, {\n      auto = true\n    } = {}) {\n      const next = query => {\n        let keys = Object.keys(query);\n        const isQueryPath = isPath(query);\n        if (!isQueryPath && keys.length > 1 && !isExpression(query)) {\n          return next(convertToExplicit(query));\n        }\n        if (isLeaf(query)) {\n          const key = isQueryPath ? query[KeyType.PATH] : keys[0];\n          const pattern = isQueryPath ? query[KeyType.PATTERN] : query[key];\n          if (!isString(pattern)) {\n            throw new Error(LOGICAL_SEARCH_INVALID_QUERY_FOR_KEY(key));\n          }\n          const obj = {\n            keyId: createKeyId(key),\n            pattern\n          };\n          if (auto) {\n            obj.searcher = createSearcher(pattern, options);\n          }\n          return obj;\n        }\n        let node = {\n          children: [],\n          operator: keys[0]\n        };\n        keys.forEach(key => {\n          const value = query[key];\n          if (isArray(value)) {\n            value.forEach(item => {\n              node.children.push(next(item));\n            });\n          }\n        });\n        return node;\n      };\n      if (!isExpression(query)) {\n        query = convertToExplicit(query);\n      }\n      return next(query);\n    }\n\n    // Practical scoring function\n    function computeScore(results, {\n      ignoreFieldNorm = Config.ignoreFieldNorm\n    }) {\n      results.forEach(result => {\n        let totalScore = 1;\n        result.matches.forEach(({\n          key,\n          norm,\n          score\n        }) => {\n          const weight = key ? key.weight : null;\n          totalScore *= Math.pow(score === 0 && weight ? Number.EPSILON : score, (weight || 1) * (ignoreFieldNorm ? 1 : norm));\n        });\n        result.score = totalScore;\n      });\n    }\n    function transformMatches(result, data) {\n      const matches = result.matches;\n      data.matches = [];\n      if (!isDefined(matches)) {\n        return;\n      }\n      matches.forEach(match => {\n        if (!isDefined(match.indices) || !match.indices.length) {\n          return;\n        }\n        const {\n          indices,\n          value\n        } = match;\n        let obj = {\n          indices,\n          value\n        };\n        if (match.key) {\n          obj.key = match.key.src;\n        }\n        if (match.idx > -1) {\n          obj.refIndex = match.idx;\n        }\n        data.matches.push(obj);\n      });\n    }\n    function transformScore(result, data) {\n      data.score = result.score;\n    }\n    function format(results, docs, {\n      includeMatches = Config.includeMatches,\n      includeScore = Config.includeScore\n    } = {}) {\n      const transformers = [];\n      if (includeMatches) transformers.push(transformMatches);\n      if (includeScore) transformers.push(transformScore);\n      return results.map(result => {\n        const {\n          idx\n        } = result;\n        const data = {\n          item: docs[idx],\n          refIndex: idx\n        };\n        if (transformers.length) {\n          transformers.forEach(transformer => {\n            transformer(result, data);\n          });\n        }\n        return data;\n      });\n    }\n    class Fuse {\n      constructor(docs, options = {}, index) {\n        this.options = _objectSpread2(_objectSpread2({}, Config), options);\n        if (this.options.useExtendedSearch && !true) {}\n        this._keyStore = new KeyStore(this.options.keys);\n        this.setCollection(docs, index);\n      }\n      setCollection(docs, index) {\n        this._docs = docs;\n        if (index && !(index instanceof FuseIndex)) {\n          throw new Error(INCORRECT_INDEX_TYPE);\n        }\n        this._myIndex = index || createIndex(this.options.keys, this._docs, {\n          getFn: this.options.getFn,\n          fieldNormWeight: this.options.fieldNormWeight\n        });\n      }\n      add(doc) {\n        if (!isDefined(doc)) {\n          return;\n        }\n        this._docs.push(doc);\n        this._myIndex.add(doc);\n      }\n      remove(predicate = ( /* doc, idx */) => false) {\n        const results = [];\n        for (let i = 0, len = this._docs.length; i < len; i += 1) {\n          const doc = this._docs[i];\n          if (predicate(doc, i)) {\n            this.removeAt(i);\n            i -= 1;\n            len -= 1;\n            results.push(doc);\n          }\n        }\n        return results;\n      }\n      removeAt(idx) {\n        this._docs.splice(idx, 1);\n        this._myIndex.removeAt(idx);\n      }\n      getIndex() {\n        return this._myIndex;\n      }\n      search(query, {\n        limit = -1\n      } = {}) {\n        const {\n          includeMatches,\n          includeScore,\n          shouldSort,\n          sortFn,\n          ignoreFieldNorm\n        } = this.options;\n        let results = isString(query) ? isString(this._docs[0]) ? this._searchStringList(query) : this._searchObjectList(query) : this._searchLogical(query);\n        computeScore(results, {\n          ignoreFieldNorm\n        });\n        if (shouldSort) {\n          results.sort(sortFn);\n        }\n        if (isNumber(limit) && limit > -1) {\n          results = results.slice(0, limit);\n        }\n        return format(results, this._docs, {\n          includeMatches,\n          includeScore\n        });\n      }\n      _searchStringList(query) {\n        const searcher = createSearcher(query, this.options);\n        const {\n          records\n        } = this._myIndex;\n        const results = [];\n\n        // Iterate over every string in the index\n        records.forEach(({\n          v: text,\n          i: idx,\n          n: norm\n        }) => {\n          if (!isDefined(text)) {\n            return;\n          }\n          const {\n            isMatch,\n            score,\n            indices\n          } = searcher.searchIn(text);\n          if (isMatch) {\n            results.push({\n              item: text,\n              idx,\n              matches: [{\n                score,\n                value: text,\n                norm,\n                indices\n              }]\n            });\n          }\n        });\n        return results;\n      }\n      _searchLogical(query) {\n        const expression = parse(query, this.options);\n        const evaluate = (node, item, idx) => {\n          if (!node.children) {\n            const {\n              keyId,\n              searcher\n            } = node;\n            const matches = this._findMatches({\n              key: this._keyStore.get(keyId),\n              value: this._myIndex.getValueForItemAtKeyId(item, keyId),\n              searcher\n            });\n            if (matches && matches.length) {\n              return [{\n                idx,\n                item,\n                matches\n              }];\n            }\n            return [];\n          }\n          const res = [];\n          for (let i = 0, len = node.children.length; i < len; i += 1) {\n            const child = node.children[i];\n            const result = evaluate(child, item, idx);\n            if (result.length) {\n              res.push(...result);\n            } else if (node.operator === LogicalOperator.AND) {\n              return [];\n            }\n          }\n          return res;\n        };\n        const records = this._myIndex.records;\n        const resultMap = {};\n        const results = [];\n        records.forEach(({\n          $: item,\n          i: idx\n        }) => {\n          if (isDefined(item)) {\n            let expResults = evaluate(expression, item, idx);\n            if (expResults.length) {\n              // Dedupe when adding\n              if (!resultMap[idx]) {\n                resultMap[idx] = {\n                  idx,\n                  item,\n                  matches: []\n                };\n                results.push(resultMap[idx]);\n              }\n              expResults.forEach(({\n                matches\n              }) => {\n                resultMap[idx].matches.push(...matches);\n              });\n            }\n          }\n        });\n        return results;\n      }\n      _searchObjectList(query) {\n        const searcher = createSearcher(query, this.options);\n        const {\n          keys,\n          records\n        } = this._myIndex;\n        const results = [];\n\n        // List is Array<Object>\n        records.forEach(({\n          $: item,\n          i: idx\n        }) => {\n          if (!isDefined(item)) {\n            return;\n          }\n          let matches = [];\n\n          // Iterate over every key (i.e, path), and fetch the value at that key\n          keys.forEach((key, keyIndex) => {\n            matches.push(...this._findMatches({\n              key,\n              value: item[keyIndex],\n              searcher\n            }));\n          });\n          if (matches.length) {\n            results.push({\n              idx,\n              item,\n              matches\n            });\n          }\n        });\n        return results;\n      }\n      _findMatches({\n        key,\n        value,\n        searcher\n      }) {\n        if (!isDefined(value)) {\n          return [];\n        }\n        let matches = [];\n        if (isArray(value)) {\n          value.forEach(({\n            v: text,\n            i: idx,\n            n: norm\n          }) => {\n            if (!isDefined(text)) {\n              return;\n            }\n            const {\n              isMatch,\n              score,\n              indices\n            } = searcher.searchIn(text);\n            if (isMatch) {\n              matches.push({\n                score,\n                key,\n                value: text,\n                idx,\n                norm,\n                indices\n              });\n            }\n          });\n        } else {\n          const {\n            v: text,\n            n: norm\n          } = value;\n          const {\n            isMatch,\n            score,\n            indices\n          } = searcher.searchIn(text);\n          if (isMatch) {\n            matches.push({\n              score,\n              key,\n              value: text,\n              norm,\n              indices\n            });\n          }\n        }\n        return matches;\n      }\n    }\n    Fuse.version = '7.0.0';\n    Fuse.createIndex = createIndex;\n    Fuse.parseIndex = parseIndex;\n    Fuse.config = Config;\n    {\n      Fuse.parseQuery = parse;\n    }\n    {\n      register(ExtendedSearch);\n    }\n\n    var SearchByFuse = /** @class */ (function () {\n        function SearchByFuse(config) {\n            this._haystack = [];\n            this._fuseOptions = __assign(__assign({}, config.fuseOptions), { keys: __spreadArray([], config.searchFields, true), includeMatches: true });\n        }\n        SearchByFuse.prototype.index = function (data) {\n            this._haystack = data;\n            if (this._fuse) {\n                this._fuse.setCollection(data);\n            }\n        };\n        SearchByFuse.prototype.reset = function () {\n            this._haystack = [];\n            this._fuse = undefined;\n        };\n        SearchByFuse.prototype.isEmptyIndex = function () {\n            return !this._haystack.length;\n        };\n        SearchByFuse.prototype.search = function (needle) {\n            if (!this._fuse) {\n                {\n                    this._fuse = new Fuse(this._haystack, this._fuseOptions);\n                }\n            }\n            var results = this._fuse.search(needle);\n            return results.map(function (value, i) {\n                return {\n                    item: value.item,\n                    score: value.score || 0,\n                    rank: i + 1, // If value.score is used for sorting, this can create non-stable sorts!\n                };\n            });\n        };\n        return SearchByFuse;\n    }());\n\n    function getSearcher(config) {\n        {\n            return new SearchByFuse(config);\n        }\n    }\n\n    /**\n     * Helpers to create HTML elements used by Choices\n     * Can be overridden by providing `callbackOnCreateTemplates` option.\n     * `Choices.defaults.templates` allows access to the default template methods from `callbackOnCreateTemplates`\n     */\n    var isEmptyObject = function (obj) {\n        // eslint-disable-next-line no-restricted-syntax\n        for (var prop in obj) {\n            if (Object.prototype.hasOwnProperty.call(obj, prop)) {\n                return false;\n            }\n        }\n        return true;\n    };\n    var assignCustomProperties = function (el, choice, withCustomProperties) {\n        var dataset = el.dataset;\n        var customProperties = choice.customProperties, labelClass = choice.labelClass, labelDescription = choice.labelDescription;\n        if (labelClass) {\n            dataset.labelClass = getClassNames(labelClass).join(' ');\n        }\n        if (labelDescription) {\n            dataset.labelDescription = labelDescription;\n        }\n        if (withCustomProperties && customProperties) {\n            if (typeof customProperties === 'string') {\n                dataset.customProperties = customProperties;\n            }\n            else if (typeof customProperties === 'object' && !isEmptyObject(customProperties)) {\n                dataset.customProperties = JSON.stringify(customProperties);\n            }\n        }\n    };\n    var addAriaLabel = function (docRoot, id, element) {\n        var label = id && docRoot.querySelector(\"label[for='\".concat(id, \"']\"));\n        var text = label && label.innerText;\n        if (text) {\n            element.setAttribute('aria-label', text);\n        }\n    };\n    var templates = {\n        containerOuter: function (_a, dir, isSelectElement, isSelectOneElement, searchEnabled, passedElementType, labelId) {\n            var containerOuter = _a.classNames.containerOuter;\n            var div = document.createElement('div');\n            addClassesToElement(div, containerOuter);\n            div.dataset.type = passedElementType;\n            if (dir) {\n                div.dir = dir;\n            }\n            if (isSelectOneElement) {\n                div.tabIndex = 0;\n            }\n            if (isSelectElement) {\n                div.setAttribute('role', searchEnabled ? 'combobox' : 'listbox');\n                if (searchEnabled) {\n                    div.setAttribute('aria-autocomplete', 'list');\n                }\n                else if (!labelId) {\n                    addAriaLabel(this._docRoot, this.passedElement.element.id, div);\n                }\n                div.setAttribute('aria-haspopup', 'true');\n                div.setAttribute('aria-expanded', 'false');\n            }\n            if (labelId) {\n                div.setAttribute('aria-labelledby', labelId);\n            }\n            return div;\n        },\n        containerInner: function (_a) {\n            var containerInner = _a.classNames.containerInner;\n            var div = document.createElement('div');\n            addClassesToElement(div, containerInner);\n            return div;\n        },\n        itemList: function (_a, isSelectOneElement) {\n            var searchEnabled = _a.searchEnabled, _b = _a.classNames, list = _b.list, listSingle = _b.listSingle, listItems = _b.listItems;\n            var div = document.createElement('div');\n            addClassesToElement(div, list);\n            addClassesToElement(div, isSelectOneElement ? listSingle : listItems);\n            if (this._isSelectElement && searchEnabled) {\n                div.setAttribute('role', 'listbox');\n            }\n            return div;\n        },\n        placeholder: function (_a, value) {\n            var allowHTML = _a.allowHTML, placeholder = _a.classNames.placeholder;\n            var div = document.createElement('div');\n            addClassesToElement(div, placeholder);\n            setElementHtml(div, allowHTML, value);\n            return div;\n        },\n        item: function (_a, choice, removeItemButton) {\n            var allowHTML = _a.allowHTML, removeItemButtonAlignLeft = _a.removeItemButtonAlignLeft, removeItemIconText = _a.removeItemIconText, removeItemLabelText = _a.removeItemLabelText, _b = _a.classNames, item = _b.item, button = _b.button, highlightedState = _b.highlightedState, itemSelectable = _b.itemSelectable, placeholder = _b.placeholder;\n            var rawValue = unwrapStringForRaw(choice.value);\n            var div = document.createElement('div');\n            addClassesToElement(div, item);\n            if (choice.labelClass) {\n                var spanLabel = document.createElement('span');\n                setElementHtml(spanLabel, allowHTML, choice.label);\n                addClassesToElement(spanLabel, choice.labelClass);\n                div.appendChild(spanLabel);\n            }\n            else {\n                setElementHtml(div, allowHTML, choice.label);\n            }\n            div.dataset.item = '';\n            div.dataset.id = choice.id;\n            div.dataset.value = rawValue;\n            assignCustomProperties(div, choice, true);\n            if (choice.disabled || this.containerOuter.isDisabled) {\n                div.setAttribute('aria-disabled', 'true');\n            }\n            if (this._isSelectElement) {\n                div.setAttribute('aria-selected', 'true');\n                div.setAttribute('role', 'option');\n            }\n            if (choice.placeholder) {\n                addClassesToElement(div, placeholder);\n                div.dataset.placeholder = '';\n            }\n            addClassesToElement(div, choice.highlighted ? highlightedState : itemSelectable);\n            if (removeItemButton) {\n                if (choice.disabled) {\n                    removeClassesFromElement(div, itemSelectable);\n                }\n                div.dataset.deletable = '';\n                var removeButton = document.createElement('button');\n                removeButton.type = 'button';\n                addClassesToElement(removeButton, button);\n                setElementHtml(removeButton, true, resolveNoticeFunction(removeItemIconText, choice.value));\n                var REMOVE_ITEM_LABEL = resolveNoticeFunction(removeItemLabelText, choice.value);\n                if (REMOVE_ITEM_LABEL) {\n                    removeButton.setAttribute('aria-label', REMOVE_ITEM_LABEL);\n                }\n                removeButton.dataset.button = '';\n                if (removeItemButtonAlignLeft) {\n                    div.insertAdjacentElement('afterbegin', removeButton);\n                }\n                else {\n                    div.appendChild(removeButton);\n                }\n            }\n            return div;\n        },\n        choiceList: function (_a, isSelectOneElement) {\n            var list = _a.classNames.list;\n            var div = document.createElement('div');\n            addClassesToElement(div, list);\n            if (!isSelectOneElement) {\n                div.setAttribute('aria-multiselectable', 'true');\n            }\n            div.setAttribute('role', 'listbox');\n            return div;\n        },\n        choiceGroup: function (_a, _b) {\n            var allowHTML = _a.allowHTML, _c = _a.classNames, group = _c.group, groupHeading = _c.groupHeading, itemDisabled = _c.itemDisabled;\n            var id = _b.id, label = _b.label, disabled = _b.disabled;\n            var rawLabel = unwrapStringForRaw(label);\n            var div = document.createElement('div');\n            addClassesToElement(div, group);\n            if (disabled) {\n                addClassesToElement(div, itemDisabled);\n            }\n            div.setAttribute('role', 'group');\n            div.dataset.group = '';\n            div.dataset.id = id;\n            div.dataset.value = rawLabel;\n            if (disabled) {\n                div.setAttribute('aria-disabled', 'true');\n            }\n            var heading = document.createElement('div');\n            addClassesToElement(heading, groupHeading);\n            setElementHtml(heading, allowHTML, label || '');\n            div.appendChild(heading);\n            return div;\n        },\n        choice: function (_a, choice, selectText, groupName) {\n            var allowHTML = _a.allowHTML, _b = _a.classNames, item = _b.item, itemChoice = _b.itemChoice, itemSelectable = _b.itemSelectable, selectedState = _b.selectedState, itemDisabled = _b.itemDisabled, description = _b.description, placeholder = _b.placeholder;\n            // eslint-disable-next-line prefer-destructuring\n            var label = choice.label;\n            var rawValue = unwrapStringForRaw(choice.value);\n            var div = document.createElement('div');\n            div.id = choice.elementId;\n            addClassesToElement(div, item);\n            addClassesToElement(div, itemChoice);\n            if (groupName && typeof label === 'string') {\n                label = escapeForTemplate(allowHTML, label);\n                label += \" (\".concat(groupName, \")\");\n                label = { trusted: label };\n            }\n            var describedBy = div;\n            if (choice.labelClass) {\n                var spanLabel = document.createElement('span');\n                setElementHtml(spanLabel, allowHTML, label);\n                addClassesToElement(spanLabel, choice.labelClass);\n                describedBy = spanLabel;\n                div.appendChild(spanLabel);\n            }\n            else {\n                setElementHtml(div, allowHTML, label);\n            }\n            if (choice.labelDescription) {\n                var descId = \"\".concat(choice.elementId, \"-description\");\n                describedBy.setAttribute('aria-describedby', descId);\n                var spanDesc = document.createElement('span');\n                setElementHtml(spanDesc, allowHTML, choice.labelDescription);\n                spanDesc.id = descId;\n                addClassesToElement(spanDesc, description);\n                div.appendChild(spanDesc);\n            }\n            if (choice.selected) {\n                addClassesToElement(div, selectedState);\n            }\n            if (choice.placeholder) {\n                addClassesToElement(div, placeholder);\n            }\n            div.setAttribute('role', choice.group ? 'treeitem' : 'option');\n            div.dataset.choice = '';\n            div.dataset.id = choice.id;\n            div.dataset.value = rawValue;\n            if (selectText) {\n                div.dataset.selectText = selectText;\n            }\n            if (choice.group) {\n                div.dataset.groupId = \"\".concat(choice.group.id);\n            }\n            assignCustomProperties(div, choice, false);\n            if (choice.disabled) {\n                addClassesToElement(div, itemDisabled);\n                div.dataset.choiceDisabled = '';\n                div.setAttribute('aria-disabled', 'true');\n            }\n            else {\n                addClassesToElement(div, itemSelectable);\n                div.dataset.choiceSelectable = '';\n            }\n            return div;\n        },\n        input: function (_a, placeholderValue) {\n            var _b = _a.classNames, input = _b.input, inputCloned = _b.inputCloned, labelId = _a.labelId;\n            var inp = document.createElement('input');\n            inp.type = 'search';\n            addClassesToElement(inp, input);\n            addClassesToElement(inp, inputCloned);\n            inp.autocomplete = 'off';\n            inp.autocapitalize = 'off';\n            inp.spellcheck = false;\n            inp.setAttribute('role', 'textbox');\n            inp.setAttribute('aria-autocomplete', 'list');\n            if (placeholderValue) {\n                inp.setAttribute('aria-label', placeholderValue);\n            }\n            else if (!labelId) {\n                addAriaLabel(this._docRoot, this.passedElement.element.id, inp);\n            }\n            return inp;\n        },\n        dropdown: function (_a) {\n            var _b = _a.classNames, list = _b.list, listDropdown = _b.listDropdown;\n            var div = document.createElement('div');\n            addClassesToElement(div, list);\n            addClassesToElement(div, listDropdown);\n            div.setAttribute('aria-expanded', 'false');\n            return div;\n        },\n        notice: function (_a, innerHTML, type) {\n            var _b = _a.classNames, item = _b.item, itemChoice = _b.itemChoice, addChoice = _b.addChoice, noResults = _b.noResults, noChoices = _b.noChoices, noticeItem = _b.notice;\n            if (type === void 0) { type = NoticeTypes.generic; }\n            var notice = document.createElement('div');\n            setElementHtml(notice, true, innerHTML);\n            addClassesToElement(notice, item);\n            addClassesToElement(notice, itemChoice);\n            addClassesToElement(notice, noticeItem);\n            // eslint-disable-next-line default-case\n            switch (type) {\n                case NoticeTypes.addChoice:\n                    addClassesToElement(notice, addChoice);\n                    break;\n                case NoticeTypes.noResults:\n                    addClassesToElement(notice, noResults);\n                    break;\n                case NoticeTypes.noChoices:\n                    addClassesToElement(notice, noChoices);\n                    break;\n            }\n            if (type === NoticeTypes.addChoice) {\n                notice.dataset.choiceSelectable = '';\n                notice.dataset.choice = '';\n            }\n            return notice;\n        },\n        option: function (choice) {\n            // HtmlOptionElement's label value does not support HTML, so the avoid double escaping unwrap the untrusted string.\n            var labelValue = unwrapStringForRaw(choice.label);\n            var opt = new Option(labelValue, choice.value, false, choice.selected);\n            assignCustomProperties(opt, choice, true);\n            opt.disabled = choice.disabled;\n            if (choice.selected) {\n                opt.setAttribute('selected', '');\n            }\n            return opt;\n        },\n    };\n\n    /** @see {@link http://browserhacks.com/#hack-acea075d0ac6954f275a70023906050c} */\n    var IS_IE11 = '-ms-scroll-limit' in document.documentElement.style &&\n        '-ms-ime-align' in document.documentElement.style;\n    var USER_DEFAULTS = {};\n    var parseDataSetId = function (element) {\n        if (!element) {\n            return undefined;\n        }\n        return element.dataset.id ? parseInt(element.dataset.id, 10) : undefined;\n    };\n    var selectableChoiceIdentifier = '[data-choice-selectable]';\n    /**\n     * Choices\n     * @author Josh Johnson<josh@joshuajohnson.co.uk>\n     */\n    var Choices = /** @class */ (function () {\n        function Choices(element, userConfig) {\n            if (element === void 0) { element = '[data-choice]'; }\n            if (userConfig === void 0) { userConfig = {}; }\n            var _this = this;\n            this.initialisedOK = undefined;\n            this._hasNonChoicePlaceholder = false;\n            this._lastAddedChoiceId = 0;\n            this._lastAddedGroupId = 0;\n            var defaults = Choices.defaults;\n            this.config = __assign(__assign(__assign({}, defaults.allOptions), defaults.options), userConfig);\n            ObjectsInConfig.forEach(function (key) {\n                _this.config[key] = __assign(__assign(__assign({}, defaults.allOptions[key]), defaults.options[key]), userConfig[key]);\n            });\n            var config = this.config;\n            if (!config.silent) {\n                this._validateConfig();\n            }\n            var docRoot = config.shadowRoot || document.documentElement;\n            this._docRoot = docRoot;\n            var passedElement = typeof element === 'string' ? docRoot.querySelector(element) : element;\n            if (!passedElement ||\n                typeof passedElement !== 'object' ||\n                !(isHtmlInputElement(passedElement) || isHtmlSelectElement(passedElement))) {\n                if (!passedElement && typeof element === 'string') {\n                    throw TypeError(\"Selector \".concat(element, \" failed to find an element\"));\n                }\n                throw TypeError(\"Expected one of the following types text|select-one|select-multiple\");\n            }\n            var elementType = passedElement.type;\n            var isText = elementType === PassedElementTypes.Text;\n            if (isText || config.maxItemCount !== 1) {\n                config.singleModeForMultiSelect = false;\n            }\n            if (config.singleModeForMultiSelect) {\n                elementType = PassedElementTypes.SelectMultiple;\n            }\n            var isSelectOne = elementType === PassedElementTypes.SelectOne;\n            var isSelectMultiple = elementType === PassedElementTypes.SelectMultiple;\n            var isSelect = isSelectOne || isSelectMultiple;\n            this._elementType = elementType;\n            this._isTextElement = isText;\n            this._isSelectOneElement = isSelectOne;\n            this._isSelectMultipleElement = isSelectMultiple;\n            this._isSelectElement = isSelectOne || isSelectMultiple;\n            this._canAddUserChoices = (isText && config.addItems) || (isSelect && config.addChoices);\n            if (typeof config.renderSelectedChoices !== 'boolean') {\n                config.renderSelectedChoices = config.renderSelectedChoices === 'always' || isSelectOne;\n            }\n            if (config.closeDropdownOnSelect === 'auto') {\n                config.closeDropdownOnSelect = isText || isSelectOne || config.singleModeForMultiSelect;\n            }\n            else {\n                config.closeDropdownOnSelect = coerceBool(config.closeDropdownOnSelect);\n            }\n            if (config.placeholder) {\n                if (config.placeholderValue) {\n                    this._hasNonChoicePlaceholder = true;\n                }\n                else if (passedElement.dataset.placeholder) {\n                    this._hasNonChoicePlaceholder = true;\n                    config.placeholderValue = passedElement.dataset.placeholder;\n                }\n            }\n            if (userConfig.addItemFilter && typeof userConfig.addItemFilter !== 'function') {\n                var re = userConfig.addItemFilter instanceof RegExp ? userConfig.addItemFilter : new RegExp(userConfig.addItemFilter);\n                config.addItemFilter = re.test.bind(re);\n            }\n            if (this._isTextElement) {\n                this.passedElement = new WrappedInput({\n                    element: passedElement,\n                    classNames: config.classNames,\n                });\n            }\n            else {\n                var selectEl = passedElement;\n                this.passedElement = new WrappedSelect({\n                    element: selectEl,\n                    classNames: config.classNames,\n                    template: function (data) { return _this._templates.option(data); },\n                    extractPlaceholder: config.placeholder && !this._hasNonChoicePlaceholder,\n                });\n            }\n            this.initialised = false;\n            this._store = new Store(config);\n            this._currentValue = '';\n            config.searchEnabled = (!isText && config.searchEnabled) || isSelectMultiple;\n            this._canSearch = config.searchEnabled;\n            this._isScrollingOnIe = false;\n            this._highlightPosition = 0;\n            this._wasTap = true;\n            this._placeholderValue = this._generatePlaceholderValue();\n            this._baseId = generateId(passedElement, 'choices-');\n            /**\n             * setting direction in cases where it's explicitly set on passedElement\n             * or when calculated direction is different from the document\n             */\n            this._direction = passedElement.dir;\n            if (!this._direction) {\n                var elementDirection = window.getComputedStyle(passedElement).direction;\n                var documentDirection = window.getComputedStyle(document.documentElement).direction;\n                if (elementDirection !== documentDirection) {\n                    this._direction = elementDirection;\n                }\n            }\n            this._idNames = {\n                itemChoice: 'item-choice',\n            };\n            this._templates = defaults.templates;\n            this._render = this._render.bind(this);\n            this._onFocus = this._onFocus.bind(this);\n            this._onBlur = this._onBlur.bind(this);\n            this._onKeyUp = this._onKeyUp.bind(this);\n            this._onKeyDown = this._onKeyDown.bind(this);\n            this._onInput = this._onInput.bind(this);\n            this._onClick = this._onClick.bind(this);\n            this._onTouchMove = this._onTouchMove.bind(this);\n            this._onTouchEnd = this._onTouchEnd.bind(this);\n            this._onMouseDown = this._onMouseDown.bind(this);\n            this._onMouseOver = this._onMouseOver.bind(this);\n            this._onFormReset = this._onFormReset.bind(this);\n            this._onSelectKey = this._onSelectKey.bind(this);\n            this._onEnterKey = this._onEnterKey.bind(this);\n            this._onEscapeKey = this._onEscapeKey.bind(this);\n            this._onDirectionKey = this._onDirectionKey.bind(this);\n            this._onDeleteKey = this._onDeleteKey.bind(this);\n            // If element has already been initialised with Choices, fail silently\n            if (this.passedElement.isActive) {\n                if (!config.silent) {\n                    console.warn('Trying to initialise Choices on element already initialised', { element: element });\n                }\n                this.initialised = true;\n                this.initialisedOK = false;\n                return;\n            }\n            // Let's go\n            this.init();\n            // preserve the selected item list after setup for form reset\n            this._initialItems = this._store.items.map(function (choice) { return choice.value; });\n        }\n        Object.defineProperty(Choices, \"defaults\", {\n            get: function () {\n                return Object.preventExtensions({\n                    get options() {\n                        return USER_DEFAULTS;\n                    },\n                    get allOptions() {\n                        return DEFAULT_CONFIG;\n                    },\n                    get templates() {\n                        return templates;\n                    },\n                });\n            },\n            enumerable: false,\n            configurable: true\n        });\n        Choices.prototype.init = function () {\n            if (this.initialised || this.initialisedOK !== undefined) {\n                return;\n            }\n            this._searcher = getSearcher(this.config);\n            this._loadChoices();\n            this._createTemplates();\n            this._createElements();\n            this._createStructure();\n            if ((this._isTextElement && !this.config.addItems) ||\n                this.passedElement.element.hasAttribute('disabled') ||\n                !!this.passedElement.element.closest('fieldset:disabled')) {\n                this.disable();\n            }\n            else {\n                this.enable();\n                this._addEventListeners();\n            }\n            // should be triggered **after** disabled state to avoid additional re-draws\n            this._initStore();\n            this.initialised = true;\n            this.initialisedOK = true;\n            var callbackOnInit = this.config.callbackOnInit;\n            // Run callback if it is a function\n            if (typeof callbackOnInit === 'function') {\n                callbackOnInit.call(this);\n            }\n        };\n        Choices.prototype.destroy = function () {\n            if (!this.initialised) {\n                return;\n            }\n            this._removeEventListeners();\n            this.passedElement.reveal();\n            this.containerOuter.unwrap(this.passedElement.element);\n            this._store._listeners = []; // prevents select/input value being wiped\n            this.clearStore(false);\n            this._stopSearch();\n            this._templates = Choices.defaults.templates;\n            this.initialised = false;\n            this.initialisedOK = undefined;\n        };\n        Choices.prototype.enable = function () {\n            if (this.passedElement.isDisabled) {\n                this.passedElement.enable();\n            }\n            if (this.containerOuter.isDisabled) {\n                this._addEventListeners();\n                this.input.enable();\n                this.containerOuter.enable();\n            }\n            return this;\n        };\n        Choices.prototype.disable = function () {\n            if (!this.passedElement.isDisabled) {\n                this.passedElement.disable();\n            }\n            if (!this.containerOuter.isDisabled) {\n                this._removeEventListeners();\n                this.input.disable();\n                this.containerOuter.disable();\n            }\n            return this;\n        };\n        Choices.prototype.highlightItem = function (item, runEvent) {\n            if (runEvent === void 0) { runEvent = true; }\n            if (!item || !item.id) {\n                return this;\n            }\n            var choice = this._store.items.find(function (c) { return c.id === item.id; });\n            if (!choice || choice.highlighted) {\n                return this;\n            }\n            this._store.dispatch(highlightItem(choice, true));\n            if (runEvent) {\n                this.passedElement.triggerEvent(EventType.highlightItem, this._getChoiceForOutput(choice));\n            }\n            return this;\n        };\n        Choices.prototype.unhighlightItem = function (item, runEvent) {\n            if (runEvent === void 0) { runEvent = true; }\n            if (!item || !item.id) {\n                return this;\n            }\n            var choice = this._store.items.find(function (c) { return c.id === item.id; });\n            if (!choice || !choice.highlighted) {\n                return this;\n            }\n            this._store.dispatch(highlightItem(choice, false));\n            if (runEvent) {\n                this.passedElement.triggerEvent(EventType.unhighlightItem, this._getChoiceForOutput(choice));\n            }\n            return this;\n        };\n        Choices.prototype.highlightAll = function () {\n            var _this = this;\n            this._store.withTxn(function () {\n                _this._store.items.forEach(function (item) {\n                    if (!item.highlighted) {\n                        _this._store.dispatch(highlightItem(item, true));\n                        _this.passedElement.triggerEvent(EventType.highlightItem, _this._getChoiceForOutput(item));\n                    }\n                });\n            });\n            return this;\n        };\n        Choices.prototype.unhighlightAll = function () {\n            var _this = this;\n            this._store.withTxn(function () {\n                _this._store.items.forEach(function (item) {\n                    if (item.highlighted) {\n                        _this._store.dispatch(highlightItem(item, false));\n                        _this.passedElement.triggerEvent(EventType.highlightItem, _this._getChoiceForOutput(item));\n                    }\n                });\n            });\n            return this;\n        };\n        Choices.prototype.removeActiveItemsByValue = function (value) {\n            var _this = this;\n            this._store.withTxn(function () {\n                _this._store.items.filter(function (item) { return item.value === value; }).forEach(function (item) { return _this._removeItem(item); });\n            });\n            return this;\n        };\n        Choices.prototype.removeActiveItems = function (excludedId) {\n            var _this = this;\n            this._store.withTxn(function () {\n                _this._store.items.filter(function (_a) {\n                    var id = _a.id;\n                    return id !== excludedId;\n                }).forEach(function (item) { return _this._removeItem(item); });\n            });\n            return this;\n        };\n        Choices.prototype.removeHighlightedItems = function (runEvent) {\n            var _this = this;\n            if (runEvent === void 0) { runEvent = false; }\n            this._store.withTxn(function () {\n                _this._store.highlightedActiveItems.forEach(function (item) {\n                    _this._removeItem(item);\n                    // If this action was performed by the user\n                    // trigger the event\n                    if (runEvent) {\n                        _this._triggerChange(item.value);\n                    }\n                });\n            });\n            return this;\n        };\n        Choices.prototype.showDropdown = function (preventInputFocus) {\n            var _this = this;\n            if (this.dropdown.isActive) {\n                return this;\n            }\n            if (preventInputFocus === undefined) {\n                // eslint-disable-next-line no-param-reassign\n                preventInputFocus = !this._canSearch;\n            }\n            requestAnimationFrame(function () {\n                _this.dropdown.show();\n                var rect = _this.dropdown.element.getBoundingClientRect();\n                _this.containerOuter.open(rect.bottom, rect.height);\n                if (!preventInputFocus) {\n                    _this.input.focus();\n                }\n                _this.passedElement.triggerEvent(EventType.showDropdown);\n            });\n            return this;\n        };\n        Choices.prototype.hideDropdown = function (preventInputBlur) {\n            var _this = this;\n            if (!this.dropdown.isActive) {\n                return this;\n            }\n            requestAnimationFrame(function () {\n                _this.dropdown.hide();\n                _this.containerOuter.close();\n                if (!preventInputBlur && _this._canSearch) {\n                    _this.input.removeActiveDescendant();\n                    _this.input.blur();\n                }\n                _this.passedElement.triggerEvent(EventType.hideDropdown);\n            });\n            return this;\n        };\n        Choices.prototype.getValue = function (valueOnly) {\n            var _this = this;\n            var values = this._store.items.map(function (item) {\n                return (valueOnly ? item.value : _this._getChoiceForOutput(item));\n            });\n            return this._isSelectOneElement || this.config.singleModeForMultiSelect ? values[0] : values;\n        };\n        Choices.prototype.setValue = function (items) {\n            var _this = this;\n            if (!this.initialisedOK) {\n                this._warnChoicesInitFailed('setValue');\n                return this;\n            }\n            this._store.withTxn(function () {\n                items.forEach(function (value) {\n                    if (value) {\n                        _this._addChoice(mapInputToChoice(value, false));\n                    }\n                });\n            });\n            // @todo integrate with Store\n            this._searcher.reset();\n            return this;\n        };\n        Choices.prototype.setChoiceByValue = function (value) {\n            var _this = this;\n            if (!this.initialisedOK) {\n                this._warnChoicesInitFailed('setChoiceByValue');\n                return this;\n            }\n            if (this._isTextElement) {\n                return this;\n            }\n            this._store.withTxn(function () {\n                // If only one value has been passed, convert to array\n                var choiceValue = Array.isArray(value) ? value : [value];\n                // Loop through each value and\n                choiceValue.forEach(function (val) { return _this._findAndSelectChoiceByValue(val); });\n                _this.unhighlightAll();\n            });\n            // @todo integrate with Store\n            this._searcher.reset();\n            return this;\n        };\n        /**\n         * Set choices of select input via an array of objects (or function that returns array of object or promise of it),\n         * a value field name and a label field name.\n         * This behaves the same as passing items via the choices option but can be called after initialising Choices.\n         * This can also be used to add groups of choices (see example 2); Optionally pass a true `replaceChoices` value to remove any existing choices.\n         * Optionally pass a `customProperties` object to add additional data to your choices (useful when searching/filtering etc).\n         *\n         * **Input types affected:** select-one, select-multiple\n         *\n         * @example\n         * ```js\n         * const example = new Choices(element);\n         *\n         * example.setChoices([\n         *   {value: 'One', label: 'Label One', disabled: true},\n         *   {value: 'Two', label: 'Label Two', selected: true},\n         *   {value: 'Three', label: 'Label Three'},\n         * ], 'value', 'label', false);\n         * ```\n         *\n         * @example\n         * ```js\n         * const example = new Choices(element);\n         *\n         * example.setChoices(async () => {\n         *   try {\n         *      const items = await fetch('/items');\n         *      return items.json()\n         *   } catch(err) {\n         *      console.error(err)\n         *   }\n         * });\n         * ```\n         *\n         * @example\n         * ```js\n         * const example = new Choices(element);\n         *\n         * example.setChoices([{\n         *   label: 'Group one',\n         *   id: 1,\n         *   disabled: false,\n         *   choices: [\n         *     {value: 'Child One', label: 'Child One', selected: true},\n         *     {value: 'Child Two', label: 'Child Two',  disabled: true},\n         *     {value: 'Child Three', label: 'Child Three'},\n         *   ]\n         * },\n         * {\n         *   label: 'Group two',\n         *   id: 2,\n         *   disabled: false,\n         *   choices: [\n         *     {value: 'Child Four', label: 'Child Four', disabled: true},\n         *     {value: 'Child Five', label: 'Child Five'},\n         *     {value: 'Child Six', label: 'Child Six', customProperties: {\n         *       description: 'Custom description about child six',\n         *       random: 'Another random custom property'\n         *     }},\n         *   ]\n         * }], 'value', 'label', false);\n         * ```\n         */\n        Choices.prototype.setChoices = function (choicesArrayOrFetcher, value, label, replaceChoices, clearSearchFlag, replaceItems) {\n            var _this = this;\n            if (choicesArrayOrFetcher === void 0) { choicesArrayOrFetcher = []; }\n            if (value === void 0) { value = 'value'; }\n            if (label === void 0) { label = 'label'; }\n            if (replaceChoices === void 0) { replaceChoices = false; }\n            if (clearSearchFlag === void 0) { clearSearchFlag = true; }\n            if (replaceItems === void 0) { replaceItems = false; }\n            if (!this.initialisedOK) {\n                this._warnChoicesInitFailed('setChoices');\n                return this;\n            }\n            if (!this._isSelectElement) {\n                throw new TypeError(\"setChoices can't be used with INPUT based Choices\");\n            }\n            if (typeof value !== 'string' || !value) {\n                throw new TypeError(\"value parameter must be a name of 'value' field in passed objects\");\n            }\n            if (typeof choicesArrayOrFetcher === 'function') {\n                // it's a choices fetcher function\n                var fetcher_1 = choicesArrayOrFetcher(this);\n                if (typeof Promise === 'function' && fetcher_1 instanceof Promise) {\n                    // that's a promise\n                    // eslint-disable-next-line no-promise-executor-return\n                    return new Promise(function (resolve) { return requestAnimationFrame(resolve); })\n                        .then(function () { return _this._handleLoadingState(true); })\n                        .then(function () { return fetcher_1; })\n                        .then(function (data) {\n                        return _this.setChoices(data, value, label, replaceChoices, clearSearchFlag, replaceItems);\n                    })\n                        .catch(function (err) {\n                        if (!_this.config.silent) {\n                            console.error(err);\n                        }\n                    })\n                        .then(function () { return _this._handleLoadingState(false); })\n                        .then(function () { return _this; });\n                }\n                // function returned something else than promise, let's check if it's an array of choices\n                if (!Array.isArray(fetcher_1)) {\n                    throw new TypeError(\".setChoices first argument function must return either array of choices or Promise, got: \".concat(typeof fetcher_1));\n                }\n                // recursion with results, it's sync and choices were cleared already\n                return this.setChoices(fetcher_1, value, label, false);\n            }\n            if (!Array.isArray(choicesArrayOrFetcher)) {\n                throw new TypeError(\".setChoices must be called either with array of choices with a function resulting into Promise of array of choices\");\n            }\n            this.containerOuter.removeLoadingState();\n            this._store.withTxn(function () {\n                if (clearSearchFlag) {\n                    _this._isSearching = false;\n                }\n                // Clear choices if needed\n                if (replaceChoices) {\n                    _this.clearChoices(true, replaceItems);\n                }\n                var isDefaultValue = value === 'value';\n                var isDefaultLabel = label === 'label';\n                choicesArrayOrFetcher.forEach(function (groupOrChoice) {\n                    if ('choices' in groupOrChoice) {\n                        var group = groupOrChoice;\n                        if (!isDefaultLabel) {\n                            group = __assign(__assign({}, group), { label: group[label] });\n                        }\n                        _this._addGroup(mapInputToChoice(group, true));\n                    }\n                    else {\n                        var choice = groupOrChoice;\n                        if (!isDefaultLabel || !isDefaultValue) {\n                            choice = __assign(__assign({}, choice), { value: choice[value], label: choice[label] });\n                        }\n                        var choiceFull = mapInputToChoice(choice, false);\n                        _this._addChoice(choiceFull);\n                        if (choiceFull.placeholder && !_this._hasNonChoicePlaceholder) {\n                            _this._placeholderValue = unwrapStringForEscaped(choiceFull.label);\n                        }\n                    }\n                });\n                _this.unhighlightAll();\n            });\n            // @todo integrate with Store\n            this._searcher.reset();\n            return this;\n        };\n        Choices.prototype.refresh = function (withEvents, selectFirstOption, deselectAll) {\n            var _this = this;\n            if (withEvents === void 0) { withEvents = false; }\n            if (selectFirstOption === void 0) { selectFirstOption = false; }\n            if (deselectAll === void 0) { deselectAll = false; }\n            if (!this._isSelectElement) {\n                if (!this.config.silent) {\n                    console.warn('refresh method can only be used on choices backed by a <select> element');\n                }\n                return this;\n            }\n            this._store.withTxn(function () {\n                var choicesFromOptions = _this.passedElement.optionsAsChoices();\n                // Build the list of items which require preserving\n                var existingItems = {};\n                if (!deselectAll) {\n                    _this._store.items.forEach(function (choice) {\n                        if (choice.id && choice.active && choice.selected) {\n                            existingItems[choice.value] = true;\n                        }\n                    });\n                }\n                _this.clearStore(false);\n                var updateChoice = function (choice) {\n                    if (deselectAll) {\n                        _this._store.dispatch(removeItem$1(choice));\n                    }\n                    else if (existingItems[choice.value]) {\n                        choice.selected = true;\n                    }\n                };\n                choicesFromOptions.forEach(function (groupOrChoice) {\n                    if ('choices' in groupOrChoice) {\n                        groupOrChoice.choices.forEach(updateChoice);\n                        return;\n                    }\n                    updateChoice(groupOrChoice);\n                });\n                /* @todo only generate add events for the added options instead of all\n                if (withEvents) {\n                  items.forEach((choice) => {\n                    if (existingItems[choice.value]) {\n                      this.passedElement.triggerEvent(\n                        EventType.removeItem,\n                        this._getChoiceForEvent(choice),\n                      );\n                    }\n                  });\n                }\n                */\n                // load new choices & items\n                _this._addPredefinedChoices(choicesFromOptions, selectFirstOption, withEvents);\n                // re-do search if required\n                if (_this._isSearching) {\n                    _this._searchChoices(_this.input.value);\n                }\n            });\n            return this;\n        };\n        Choices.prototype.removeChoice = function (value) {\n            var choice = this._store.choices.find(function (c) { return c.value === value; });\n            if (!choice) {\n                return this;\n            }\n            this._clearNotice();\n            this._store.dispatch(removeChoice(choice));\n            // @todo integrate with Store\n            this._searcher.reset();\n            if (choice.selected) {\n                this.passedElement.triggerEvent(EventType.removeItem, this._getChoiceForOutput(choice));\n            }\n            return this;\n        };\n        Choices.prototype.clearChoices = function (clearOptions, clearItems) {\n            var _this = this;\n            if (clearOptions === void 0) { clearOptions = true; }\n            if (clearItems === void 0) { clearItems = false; }\n            if (clearOptions) {\n                if (clearItems) {\n                    this.passedElement.element.replaceChildren('');\n                }\n                else {\n                    this.passedElement.element.querySelectorAll(':not([selected])').forEach(function (el) {\n                        el.remove();\n                    });\n                }\n            }\n            this.itemList.element.replaceChildren('');\n            this.choiceList.element.replaceChildren('');\n            this._clearNotice();\n            this._store.withTxn(function () {\n                var items = clearItems ? [] : _this._store.items;\n                _this._store.reset();\n                items.forEach(function (item) {\n                    _this._store.dispatch(addChoice(item));\n                    _this._store.dispatch(addItem(item));\n                });\n            });\n            // @todo integrate with Store\n            this._searcher.reset();\n            return this;\n        };\n        Choices.prototype.clearStore = function (clearOptions) {\n            if (clearOptions === void 0) { clearOptions = true; }\n            this.clearChoices(clearOptions, true);\n            this._stopSearch();\n            this._lastAddedChoiceId = 0;\n            this._lastAddedGroupId = 0;\n            return this;\n        };\n        Choices.prototype.clearInput = function () {\n            var shouldSetInputWidth = !this._isSelectOneElement;\n            this.input.clear(shouldSetInputWidth);\n            this._stopSearch();\n            return this;\n        };\n        Choices.prototype._validateConfig = function () {\n            var config = this.config;\n            var invalidConfigOptions = diff(config, DEFAULT_CONFIG);\n            if (invalidConfigOptions.length) {\n                console.warn('Unknown config option(s) passed', invalidConfigOptions.join(', '));\n            }\n            if (config.allowHTML && config.allowHtmlUserInput) {\n                if (config.addItems) {\n                    console.warn('Warning: allowHTML/allowHtmlUserInput/addItems all being true is strongly not recommended and may lead to XSS attacks');\n                }\n                if (config.addChoices) {\n                    console.warn('Warning: allowHTML/allowHtmlUserInput/addChoices all being true is strongly not recommended and may lead to XSS attacks');\n                }\n            }\n        };\n        Choices.prototype._render = function (changes) {\n            if (changes === void 0) { changes = { choices: true, groups: true, items: true }; }\n            if (this._store.inTxn()) {\n                return;\n            }\n            if (this._isSelectElement) {\n                if (changes.choices || changes.groups) {\n                    this._renderChoices();\n                }\n            }\n            if (changes.items) {\n                this._renderItems();\n            }\n        };\n        Choices.prototype._renderChoices = function () {\n            var _this = this;\n            if (!this._canAddItems()) {\n                return; // block rendering choices if the input limit is reached.\n            }\n            var _a = this, config = _a.config, isSearching = _a._isSearching;\n            var _b = this._store, activeGroups = _b.activeGroups, activeChoices = _b.activeChoices;\n            var renderLimit = 0;\n            if (isSearching && config.searchResultLimit > 0) {\n                renderLimit = config.searchResultLimit;\n            }\n            else if (config.renderChoiceLimit > 0) {\n                renderLimit = config.renderChoiceLimit;\n            }\n            if (this._isSelectElement) {\n                var backingOptions = activeChoices.filter(function (choice) { return !choice.element; });\n                if (backingOptions.length) {\n                    this.passedElement.addOptions(backingOptions);\n                }\n            }\n            var fragment = document.createDocumentFragment();\n            var renderableChoices = function (choices) {\n                return choices.filter(function (choice) {\n                    return !choice.placeholder && (isSearching ? !!choice.rank : config.renderSelectedChoices || !choice.selected);\n                });\n            };\n            var selectableChoices = false;\n            var renderChoices = function (choices, withinGroup, groupLabel) {\n                if (isSearching) {\n                    // sortByRank is used to ensure stable sorting, as scores are non-unique\n                    // this additionally ensures fuseOptions.sortFn is not ignored\n                    choices.sort(sortByRank);\n                }\n                else if (config.shouldSort) {\n                    choices.sort(config.sorter);\n                }\n                var choiceLimit = choices.length;\n                choiceLimit = !withinGroup && renderLimit && choiceLimit > renderLimit ? renderLimit : choiceLimit;\n                choiceLimit--;\n                choices.every(function (choice, index) {\n                    // choiceEl being empty signals the contents has probably significantly changed\n                    var dropdownItem = choice.choiceEl || _this._templates.choice(config, choice, config.itemSelectText, groupLabel);\n                    choice.choiceEl = dropdownItem;\n                    fragment.appendChild(dropdownItem);\n                    if (isSearching || !choice.selected) {\n                        selectableChoices = true;\n                    }\n                    return index < choiceLimit;\n                });\n            };\n            if (activeChoices.length) {\n                if (config.resetScrollPosition) {\n                    requestAnimationFrame(function () { return _this.choiceList.scrollToTop(); });\n                }\n                if (!this._hasNonChoicePlaceholder && !isSearching && this._isSelectOneElement) {\n                    // If we have a placeholder choice along with groups\n                    renderChoices(activeChoices.filter(function (choice) { return choice.placeholder && !choice.group; }), false, undefined);\n                }\n                // If we have grouped options\n                if (activeGroups.length && !isSearching) {\n                    if (config.shouldSort) {\n                        activeGroups.sort(config.sorter);\n                    }\n                    // render Choices without group first, regardless of sort, otherwise they won't be distinguishable\n                    // from the last group\n                    renderChoices(activeChoices.filter(function (choice) { return !choice.placeholder && !choice.group; }), false, undefined);\n                    activeGroups.forEach(function (group) {\n                        var groupChoices = renderableChoices(group.choices);\n                        if (groupChoices.length) {\n                            if (group.label) {\n                                var dropdownGroup = group.groupEl || _this._templates.choiceGroup(_this.config, group);\n                                group.groupEl = dropdownGroup;\n                                dropdownGroup.remove();\n                                fragment.appendChild(dropdownGroup);\n                            }\n                            renderChoices(groupChoices, true, config.appendGroupInSearch && isSearching ? group.label : undefined);\n                        }\n                    });\n                }\n                else {\n                    renderChoices(renderableChoices(activeChoices), false, undefined);\n                }\n            }\n            if (!selectableChoices && (isSearching || !fragment.children.length || !config.renderSelectedChoices)) {\n                if (!this._notice) {\n                    this._notice = {\n                        text: resolveStringFunction(isSearching ? config.noResultsText : config.noChoicesText),\n                        type: isSearching ? NoticeTypes.noResults : NoticeTypes.noChoices,\n                    };\n                }\n                fragment.replaceChildren('');\n            }\n            this._renderNotice(fragment);\n            this.choiceList.element.replaceChildren(fragment);\n            if (selectableChoices) {\n                this._highlightChoice();\n            }\n        };\n        Choices.prototype._renderItems = function () {\n            var _this = this;\n            var items = this._store.items || [];\n            var itemList = this.itemList.element;\n            var config = this.config;\n            var fragment = document.createDocumentFragment();\n            var itemFromList = function (item) {\n                return itemList.querySelector(\"[data-item][data-id=\\\"\".concat(item.id, \"\\\"]\"));\n            };\n            var addItemToFragment = function (item) {\n                var el = item.itemEl;\n                if (el && el.parentElement) {\n                    return;\n                }\n                el = itemFromList(item) || _this._templates.item(config, item, config.removeItemButton);\n                item.itemEl = el;\n                fragment.appendChild(el);\n            };\n            // new items\n            items.forEach(addItemToFragment);\n            var addedItems = !!fragment.childNodes.length;\n            if (this._isSelectOneElement) {\n                var existingItems = itemList.children.length;\n                if (addedItems || existingItems > 1) {\n                    var placeholder = itemList.querySelector(getClassNamesSelector(config.classNames.placeholder));\n                    if (placeholder) {\n                        placeholder.remove();\n                    }\n                }\n                else if (!addedItems && !existingItems && this._placeholderValue) {\n                    addedItems = true;\n                    addItemToFragment(mapInputToChoice({\n                        selected: true,\n                        value: '',\n                        label: this._placeholderValue,\n                        placeholder: true,\n                    }, false));\n                }\n            }\n            if (addedItems) {\n                itemList.append(fragment);\n                if (config.shouldSortItems && !this._isSelectOneElement) {\n                    items.sort(config.sorter);\n                    // push sorting into the DOM\n                    items.forEach(function (item) {\n                        var el = itemFromList(item);\n                        if (el) {\n                            el.remove();\n                            fragment.append(el);\n                        }\n                    });\n                    itemList.append(fragment);\n                }\n            }\n            if (this._isTextElement) {\n                // Update the value of the hidden input\n                this.passedElement.value = items.map(function (_a) {\n                    var value = _a.value;\n                    return value;\n                }).join(config.delimiter);\n            }\n        };\n        Choices.prototype._displayNotice = function (text, type, openDropdown) {\n            if (openDropdown === void 0) { openDropdown = true; }\n            var oldNotice = this._notice;\n            if (oldNotice &&\n                ((oldNotice.type === type && oldNotice.text === text) ||\n                    (oldNotice.type === NoticeTypes.addChoice &&\n                        (type === NoticeTypes.noResults || type === NoticeTypes.noChoices)))) {\n                if (openDropdown) {\n                    this.showDropdown(true);\n                }\n                return;\n            }\n            this._clearNotice();\n            this._notice = text\n                ? {\n                    text: text,\n                    type: type,\n                }\n                : undefined;\n            this._renderNotice();\n            if (openDropdown && text) {\n                this.showDropdown(true);\n            }\n        };\n        Choices.prototype._clearNotice = function () {\n            if (!this._notice) {\n                return;\n            }\n            var noticeElement = this.choiceList.element.querySelector(getClassNamesSelector(this.config.classNames.notice));\n            if (noticeElement) {\n                noticeElement.remove();\n            }\n            this._notice = undefined;\n        };\n        Choices.prototype._renderNotice = function (fragment) {\n            var noticeConf = this._notice;\n            if (noticeConf) {\n                var notice = this._templates.notice(this.config, noticeConf.text, noticeConf.type);\n                if (fragment) {\n                    fragment.append(notice);\n                }\n                else {\n                    this.choiceList.prepend(notice);\n                }\n            }\n        };\n        // eslint-disable-next-line class-methods-use-this\n        Choices.prototype._getChoiceForOutput = function (choice, keyCode) {\n            return {\n                id: choice.id,\n                highlighted: choice.highlighted,\n                labelClass: choice.labelClass,\n                labelDescription: choice.labelDescription,\n                customProperties: choice.customProperties,\n                disabled: choice.disabled,\n                active: choice.active,\n                label: choice.label,\n                placeholder: choice.placeholder,\n                value: choice.value,\n                groupValue: choice.group ? choice.group.label : undefined,\n                element: choice.element,\n                keyCode: keyCode,\n            };\n        };\n        Choices.prototype._triggerChange = function (value) {\n            if (value === undefined || value === null) {\n                return;\n            }\n            this.passedElement.triggerEvent(EventType.change, {\n                value: value,\n            });\n        };\n        Choices.prototype._handleButtonAction = function (element) {\n            var _this = this;\n            var items = this._store.items;\n            if (!items.length || !this.config.removeItems || !this.config.removeItemButton) {\n                return;\n            }\n            var id = element && parseDataSetId(element.parentElement);\n            var itemToRemove = id && items.find(function (item) { return item.id === id; });\n            if (!itemToRemove) {\n                return;\n            }\n            this._store.withTxn(function () {\n                // Remove item associated with button\n                _this._removeItem(itemToRemove);\n                _this._triggerChange(itemToRemove.value);\n                if (_this._isSelectOneElement && !_this._hasNonChoicePlaceholder) {\n                    var placeholderChoice = (_this.config.shouldSort ? _this._store.choices.reverse() : _this._store.choices).find(function (choice) { return choice.placeholder; });\n                    if (placeholderChoice) {\n                        _this._addItem(placeholderChoice);\n                        _this.unhighlightAll();\n                        if (placeholderChoice.value) {\n                            _this._triggerChange(placeholderChoice.value);\n                        }\n                    }\n                }\n            });\n        };\n        Choices.prototype._handleItemAction = function (element, hasShiftKey) {\n            var _this = this;\n            if (hasShiftKey === void 0) { hasShiftKey = false; }\n            var items = this._store.items;\n            if (!items.length || !this.config.removeItems || this._isSelectOneElement) {\n                return;\n            }\n            var id = parseDataSetId(element);\n            if (!id) {\n                return;\n            }\n            // We only want to select one item with a click\n            // so we deselect any items that aren't the target\n            // unless shift is being pressed\n            items.forEach(function (item) {\n                if (item.id === id && !item.highlighted) {\n                    _this.highlightItem(item);\n                }\n                else if (!hasShiftKey && item.highlighted) {\n                    _this.unhighlightItem(item);\n                }\n            });\n            // Focus input as without focus, a user cannot do anything with a\n            // highlighted item\n            this.input.focus();\n        };\n        Choices.prototype._handleChoiceAction = function (element) {\n            var _this = this;\n            // If we are clicking on an option\n            var id = parseDataSetId(element);\n            var choice = id && this._store.getChoiceById(id);\n            if (!choice || choice.disabled) {\n                return false;\n            }\n            var hasActiveDropdown = this.dropdown.isActive;\n            if (!choice.selected) {\n                if (!this._canAddItems()) {\n                    return true; // causes _onEnterKey to early out\n                }\n                this._store.withTxn(function () {\n                    _this._addItem(choice, true, true);\n                    _this.clearInput();\n                    _this.unhighlightAll();\n                });\n                this._triggerChange(choice.value);\n            }\n            // We want to close the dropdown if we are dealing with a single select box\n            if (hasActiveDropdown && this.config.closeDropdownOnSelect) {\n                this.hideDropdown(true);\n                this.containerOuter.element.focus();\n            }\n            return true;\n        };\n        Choices.prototype._handleBackspace = function (items) {\n            var config = this.config;\n            if (!config.removeItems || !items.length) {\n                return;\n            }\n            var lastItem = items[items.length - 1];\n            var hasHighlightedItems = items.some(function (item) { return item.highlighted; });\n            // If editing the last item is allowed and there are not other selected items,\n            // we can edit the item value. Otherwise if we can remove items, remove all selected items\n            if (config.editItems && !hasHighlightedItems && lastItem) {\n                this.input.value = lastItem.value;\n                this.input.setWidth();\n                this._removeItem(lastItem);\n                this._triggerChange(lastItem.value);\n            }\n            else {\n                if (!hasHighlightedItems) {\n                    // Highlight last item if none already highlighted\n                    this.highlightItem(lastItem, false);\n                }\n                this.removeHighlightedItems(true);\n            }\n        };\n        Choices.prototype._loadChoices = function () {\n            var _a;\n            var _this = this;\n            var config = this.config;\n            if (this._isTextElement) {\n                // Assign preset items from passed object first\n                this._presetChoices = config.items.map(function (e) { return mapInputToChoice(e, false); });\n                // Add any values passed from attribute\n                if (this.passedElement.value) {\n                    var elementItems = this.passedElement.value\n                        .split(config.delimiter)\n                        .map(function (e) { return mapInputToChoice(e, false, _this.config.allowHtmlUserInput); });\n                    this._presetChoices = this._presetChoices.concat(elementItems);\n                }\n                this._presetChoices.forEach(function (choice) {\n                    choice.selected = true;\n                });\n            }\n            else if (this._isSelectElement) {\n                // Assign preset choices from passed object\n                this._presetChoices = config.choices.map(function (e) { return mapInputToChoice(e, true); });\n                // Create array of choices from option elements\n                var choicesFromOptions = this.passedElement.optionsAsChoices();\n                if (choicesFromOptions) {\n                    (_a = this._presetChoices).push.apply(_a, choicesFromOptions);\n                }\n            }\n        };\n        Choices.prototype._handleLoadingState = function (setLoading) {\n            if (setLoading === void 0) { setLoading = true; }\n            var el = this.itemList.element;\n            if (setLoading) {\n                this.disable();\n                this.containerOuter.addLoadingState();\n                if (this._isSelectOneElement) {\n                    el.replaceChildren(this._templates.placeholder(this.config, this.config.loadingText));\n                }\n                else {\n                    this.input.placeholder = this.config.loadingText;\n                }\n            }\n            else {\n                this.enable();\n                this.containerOuter.removeLoadingState();\n                if (this._isSelectOneElement) {\n                    el.replaceChildren('');\n                    this._render();\n                }\n                else {\n                    this.input.placeholder = this._placeholderValue || '';\n                }\n            }\n        };\n        Choices.prototype._handleSearch = function (value) {\n            if (!this.input.isFocussed) {\n                return;\n            }\n            // Check that we have a value to search and the input was an alphanumeric character\n            if (value !== null && typeof value !== 'undefined' && value.length >= this.config.searchFloor) {\n                var resultCount = this.config.searchChoices ? this._searchChoices(value) : 0;\n                if (resultCount !== null) {\n                    // Trigger search event\n                    this.passedElement.triggerEvent(EventType.search, {\n                        value: value,\n                        resultCount: resultCount,\n                    });\n                }\n            }\n            else if (this._store.choices.some(function (option) { return !option.active; })) {\n                this._stopSearch();\n            }\n        };\n        Choices.prototype._canAddItems = function () {\n            var config = this.config;\n            var maxItemCount = config.maxItemCount, maxItemText = config.maxItemText;\n            if (!config.singleModeForMultiSelect && maxItemCount > 0 && maxItemCount <= this._store.items.length) {\n                this.choiceList.element.replaceChildren('');\n                this._notice = undefined;\n                this._displayNotice(typeof maxItemText === 'function' ? maxItemText(maxItemCount) : maxItemText, NoticeTypes.addChoice);\n                return false;\n            }\n            if (this._notice && this._notice.type === NoticeTypes.addChoice) {\n                this._clearNotice();\n            }\n            return true;\n        };\n        Choices.prototype._canCreateItem = function (value) {\n            var config = this.config;\n            var canAddItem = true;\n            var notice = '';\n            if (canAddItem && typeof config.addItemFilter === 'function' && !config.addItemFilter(value)) {\n                canAddItem = false;\n                notice = resolveNoticeFunction(config.customAddItemText, value);\n            }\n            if (canAddItem) {\n                var foundChoice = this._store.choices.find(function (choice) { return config.valueComparer(choice.value, value); });\n                if (foundChoice) {\n                    if (this._isSelectElement) {\n                        // for exact matches, do not prompt to add it as a custom choice\n                        this._displayNotice('', NoticeTypes.addChoice);\n                        return false;\n                    }\n                    if (!config.duplicateItemsAllowed) {\n                        canAddItem = false;\n                        notice = resolveNoticeFunction(config.uniqueItemText, value);\n                    }\n                }\n            }\n            if (canAddItem) {\n                notice = resolveNoticeFunction(config.addItemText, value);\n            }\n            if (notice) {\n                this._displayNotice(notice, NoticeTypes.addChoice);\n            }\n            return canAddItem;\n        };\n        Choices.prototype._searchChoices = function (value) {\n            var newValue = value.trim().replace(/\\s{2,}/, ' ');\n            // signal input didn't change search\n            if (!newValue.length || newValue === this._currentValue) {\n                return null;\n            }\n            var searcher = this._searcher;\n            if (searcher.isEmptyIndex()) {\n                searcher.index(this._store.searchableChoices);\n            }\n            // If new value matches the desired length and is not the same as the current value with a space\n            var results = searcher.search(newValue);\n            this._currentValue = newValue;\n            this._highlightPosition = 0;\n            this._isSearching = true;\n            var notice = this._notice;\n            var noticeType = notice && notice.type;\n            if (noticeType !== NoticeTypes.addChoice) {\n                if (!results.length) {\n                    this._displayNotice(resolveStringFunction(this.config.noResultsText), NoticeTypes.noResults);\n                }\n                else {\n                    this._clearNotice();\n                }\n            }\n            this._store.dispatch(filterChoices(results));\n            return results.length;\n        };\n        Choices.prototype._stopSearch = function () {\n            if (this._isSearching) {\n                this._currentValue = '';\n                this._isSearching = false;\n                this._clearNotice();\n                this._store.dispatch(activateChoices(true));\n                this.passedElement.triggerEvent(EventType.search, {\n                    value: '',\n                    resultCount: 0,\n                });\n            }\n        };\n        Choices.prototype._addEventListeners = function () {\n            var documentElement = this._docRoot;\n            var outerElement = this.containerOuter.element;\n            var inputElement = this.input.element;\n            // capture events - can cancel event processing or propagation\n            documentElement.addEventListener('touchend', this._onTouchEnd, true);\n            outerElement.addEventListener('keydown', this._onKeyDown, true);\n            outerElement.addEventListener('mousedown', this._onMouseDown, true);\n            // passive events - doesn't call `preventDefault` or `stopPropagation`\n            documentElement.addEventListener('click', this._onClick, { passive: true });\n            documentElement.addEventListener('touchmove', this._onTouchMove, {\n                passive: true,\n            });\n            this.dropdown.element.addEventListener('mouseover', this._onMouseOver, {\n                passive: true,\n            });\n            if (this._isSelectOneElement) {\n                outerElement.addEventListener('focus', this._onFocus, {\n                    passive: true,\n                });\n                outerElement.addEventListener('blur', this._onBlur, {\n                    passive: true,\n                });\n            }\n            inputElement.addEventListener('keyup', this._onKeyUp, {\n                passive: true,\n            });\n            inputElement.addEventListener('input', this._onInput, {\n                passive: true,\n            });\n            inputElement.addEventListener('focus', this._onFocus, {\n                passive: true,\n            });\n            inputElement.addEventListener('blur', this._onBlur, {\n                passive: true,\n            });\n            if (inputElement.form) {\n                inputElement.form.addEventListener('reset', this._onFormReset, {\n                    passive: true,\n                });\n            }\n            this.input.addEventListeners();\n        };\n        Choices.prototype._removeEventListeners = function () {\n            var documentElement = this._docRoot;\n            var outerElement = this.containerOuter.element;\n            var inputElement = this.input.element;\n            documentElement.removeEventListener('touchend', this._onTouchEnd, true);\n            outerElement.removeEventListener('keydown', this._onKeyDown, true);\n            outerElement.removeEventListener('mousedown', this._onMouseDown, true);\n            documentElement.removeEventListener('click', this._onClick);\n            documentElement.removeEventListener('touchmove', this._onTouchMove);\n            this.dropdown.element.removeEventListener('mouseover', this._onMouseOver);\n            if (this._isSelectOneElement) {\n                outerElement.removeEventListener('focus', this._onFocus);\n                outerElement.removeEventListener('blur', this._onBlur);\n            }\n            inputElement.removeEventListener('keyup', this._onKeyUp);\n            inputElement.removeEventListener('input', this._onInput);\n            inputElement.removeEventListener('focus', this._onFocus);\n            inputElement.removeEventListener('blur', this._onBlur);\n            if (inputElement.form) {\n                inputElement.form.removeEventListener('reset', this._onFormReset);\n            }\n            this.input.removeEventListeners();\n        };\n        Choices.prototype._onKeyDown = function (event) {\n            var keyCode = event.keyCode;\n            var hasActiveDropdown = this.dropdown.isActive;\n            /*\n            See:\n            https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key\n            https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values\n            https://en.wikipedia.org/wiki/UTF-16#Code_points_from_U+010000_to_U+10FFFF - UTF-16 surrogate pairs\n            https://stackoverflow.com/a/70866532 - \"Unidentified\" for mobile\n            http://www.unicode.org/versions/Unicode5.2.0/ch16.pdf#G19635 - U+FFFF is reserved (Section 16.7)\n        \n            Logic: when a key event is sent, `event.key` represents its printable value _or_ one\n            of a large list of special values indicating meta keys/functionality. In addition,\n            key events for compose functionality contain a value of `Dead` when mid-composition.\n        \n            I can't quite verify it, but non-English IMEs may also be able to generate key codes\n            for code points in the surrogate-pair range, which could potentially be seen as having\n            key.length > 1. Since `Fn` is one of the special keys, we can't distinguish by that\n            alone.\n        \n            Here, key.length === 1 means we know for sure the input was printable and not a special\n            `key` value. When the length is greater than 1, it could be either a printable surrogate\n            pair or a special `key` value. We can tell the difference by checking if the _character\n            code_ value (not code point!) is in the \"surrogate pair\" range or not.\n        \n            We don't use .codePointAt because an invalid code point would return 65535, which wouldn't\n            pass the >= 0x10000 check we would otherwise use.\n        \n            > ...The Unicode Standard sets aside 66 noncharacter code points. The last two code points\n            > of each plane are noncharacters: U+FFFE and U+FFFF on the BMP...\n            */\n            var wasPrintableChar = event.key.length === 1 ||\n                (event.key.length === 2 && event.key.charCodeAt(0) >= 0xd800) ||\n                event.key === 'Unidentified';\n            /*\n              We do not show the dropdown if focusing out with esc or navigating through input fields.\n              An activated search can still be opened with any other key.\n             */\n            if (!this._isTextElement &&\n                !hasActiveDropdown &&\n                keyCode !== KeyCodeMap.ESC_KEY &&\n                keyCode !== KeyCodeMap.TAB_KEY &&\n                keyCode !== KeyCodeMap.SHIFT_KEY) {\n                this.showDropdown();\n                if (!this.input.isFocussed && wasPrintableChar) {\n                    /*\n                      We update the input value with the pressed key as\n                      the input was not focussed at the time of key press\n                      therefore does not have the value of the key.\n                    */\n                    this.input.value += event.key;\n                    // browsers interpret a space as pagedown\n                    if (event.key === ' ') {\n                        event.preventDefault();\n                    }\n                }\n            }\n            switch (keyCode) {\n                case KeyCodeMap.A_KEY:\n                    return this._onSelectKey(event, this.itemList.element.hasChildNodes());\n                case KeyCodeMap.ENTER_KEY:\n                    return this._onEnterKey(event, hasActiveDropdown);\n                case KeyCodeMap.ESC_KEY:\n                    return this._onEscapeKey(event, hasActiveDropdown);\n                case KeyCodeMap.UP_KEY:\n                case KeyCodeMap.PAGE_UP_KEY:\n                case KeyCodeMap.DOWN_KEY:\n                case KeyCodeMap.PAGE_DOWN_KEY:\n                    return this._onDirectionKey(event, hasActiveDropdown);\n                case KeyCodeMap.DELETE_KEY:\n                case KeyCodeMap.BACK_KEY:\n                    return this._onDeleteKey(event, this._store.items, this.input.isFocussed);\n            }\n        };\n        Choices.prototype._onKeyUp = function ( /* event: KeyboardEvent */) {\n            this._canSearch = this.config.searchEnabled;\n        };\n        Choices.prototype._onInput = function ( /* event: InputEvent */) {\n            var value = this.input.value;\n            if (!value) {\n                if (this._isTextElement) {\n                    this.hideDropdown(true);\n                }\n                else {\n                    this._stopSearch();\n                }\n                return;\n            }\n            if (!this._canAddItems()) {\n                return;\n            }\n            if (this._canSearch) {\n                // do the search even if the entered text can not be added\n                this._handleSearch(value);\n            }\n            if (!this._canAddUserChoices) {\n                return;\n            }\n            // determine if a notice needs to be displayed for why a search result can't be added\n            this._canCreateItem(value);\n            if (this._isSelectElement) {\n                this._highlightPosition = 0; // reset to select the notice and/or exact match\n                this._highlightChoice();\n            }\n        };\n        Choices.prototype._onSelectKey = function (event, hasItems) {\n            // If CTRL + A or CMD + A have been pressed and there are items to select\n            if ((event.ctrlKey || event.metaKey) && hasItems) {\n                this._canSearch = false;\n                var shouldHightlightAll = this.config.removeItems && !this.input.value && this.input.element === document.activeElement;\n                if (shouldHightlightAll) {\n                    this.highlightAll();\n                }\n            }\n        };\n        Choices.prototype._onEnterKey = function (event, hasActiveDropdown) {\n            var _this = this;\n            var value = this.input.value;\n            var target = event.target;\n            event.preventDefault();\n            if (target && target.hasAttribute('data-button')) {\n                this._handleButtonAction(target);\n                return;\n            }\n            if (!hasActiveDropdown) {\n                if (this._isSelectElement || this._notice) {\n                    this.showDropdown();\n                }\n                return;\n            }\n            var highlightedChoice = this.dropdown.element.querySelector(getClassNamesSelector(this.config.classNames.highlightedState));\n            if (highlightedChoice && this._handleChoiceAction(highlightedChoice)) {\n                return;\n            }\n            if (!target || !value) {\n                this.hideDropdown(true);\n                return;\n            }\n            if (!this._canAddItems()) {\n                return;\n            }\n            var addedItem = false;\n            this._store.withTxn(function () {\n                addedItem = _this._findAndSelectChoiceByValue(value, true);\n                if (!addedItem) {\n                    if (!_this._canAddUserChoices) {\n                        return;\n                    }\n                    if (!_this._canCreateItem(value)) {\n                        return;\n                    }\n                    _this._addChoice(mapInputToChoice(value, false, _this.config.allowHtmlUserInput), true, true);\n                    addedItem = true;\n                }\n                _this.clearInput();\n                _this.unhighlightAll();\n            });\n            if (!addedItem) {\n                return;\n            }\n            this._triggerChange(value);\n            if (this.config.closeDropdownOnSelect) {\n                this.hideDropdown(true);\n            }\n        };\n        Choices.prototype._onEscapeKey = function (event, hasActiveDropdown) {\n            if (hasActiveDropdown) {\n                event.stopPropagation();\n                this.hideDropdown(true);\n                this._stopSearch();\n                this.containerOuter.element.focus();\n            }\n        };\n        Choices.prototype._onDirectionKey = function (event, hasActiveDropdown) {\n            var keyCode = event.keyCode;\n            // If up or down key is pressed, traverse through options\n            if (hasActiveDropdown || this._isSelectOneElement) {\n                this.showDropdown();\n                this._canSearch = false;\n                var directionInt = keyCode === KeyCodeMap.DOWN_KEY || keyCode === KeyCodeMap.PAGE_DOWN_KEY ? 1 : -1;\n                var skipKey = event.metaKey || keyCode === KeyCodeMap.PAGE_DOWN_KEY || keyCode === KeyCodeMap.PAGE_UP_KEY;\n                var nextEl = void 0;\n                if (skipKey) {\n                    if (directionInt > 0) {\n                        nextEl = this.dropdown.element.querySelector(\"\".concat(selectableChoiceIdentifier, \":last-of-type\"));\n                    }\n                    else {\n                        nextEl = this.dropdown.element.querySelector(selectableChoiceIdentifier);\n                    }\n                }\n                else {\n                    var currentEl = this.dropdown.element.querySelector(getClassNamesSelector(this.config.classNames.highlightedState));\n                    if (currentEl) {\n                        nextEl = getAdjacentEl(currentEl, selectableChoiceIdentifier, directionInt);\n                    }\n                    else {\n                        nextEl = this.dropdown.element.querySelector(selectableChoiceIdentifier);\n                    }\n                }\n                if (nextEl) {\n                    // We prevent default to stop the cursor moving\n                    // when pressing the arrow\n                    if (!isScrolledIntoView(nextEl, this.choiceList.element, directionInt)) {\n                        this.choiceList.scrollToChildElement(nextEl, directionInt);\n                    }\n                    this._highlightChoice(nextEl);\n                }\n                // Prevent default to maintain cursor position whilst\n                // traversing dropdown options\n                event.preventDefault();\n            }\n        };\n        Choices.prototype._onDeleteKey = function (event, items, hasFocusedInput) {\n            // If backspace or delete key is pressed and the input has no value\n            if (!this._isSelectOneElement && !event.target.value && hasFocusedInput) {\n                this._handleBackspace(items);\n                event.preventDefault();\n            }\n        };\n        Choices.prototype._onTouchMove = function () {\n            if (this._wasTap) {\n                this._wasTap = false;\n            }\n        };\n        Choices.prototype._onTouchEnd = function (event) {\n            var target = (event || event.touches[0]).target;\n            var touchWasWithinContainer = this._wasTap && this.containerOuter.element.contains(target);\n            if (touchWasWithinContainer) {\n                var containerWasExactTarget = target === this.containerOuter.element || target === this.containerInner.element;\n                if (containerWasExactTarget) {\n                    if (this._isTextElement) {\n                        this.input.focus();\n                    }\n                    else if (this._isSelectMultipleElement) {\n                        this.showDropdown();\n                    }\n                }\n                // Prevents focus event firing\n                event.stopPropagation();\n            }\n            this._wasTap = true;\n        };\n        /**\n         * Handles mousedown event in capture mode for containetOuter.element\n         */\n        Choices.prototype._onMouseDown = function (event) {\n            var target = event.target;\n            if (!(target instanceof HTMLElement)) {\n                return;\n            }\n            // If we have our mouse down on the scrollbar and are on IE11...\n            if (IS_IE11 && this.choiceList.element.contains(target)) {\n                // check if click was on a scrollbar area\n                var firstChoice = this.choiceList.element.firstElementChild;\n                this._isScrollingOnIe =\n                    this._direction === 'ltr' ? event.offsetX >= firstChoice.offsetWidth : event.offsetX < firstChoice.offsetLeft;\n            }\n            if (target === this.input.element) {\n                return;\n            }\n            var item = target.closest('[data-button],[data-item],[data-choice]');\n            if (item instanceof HTMLElement) {\n                if ('button' in item.dataset) {\n                    this._handleButtonAction(item);\n                }\n                else if ('item' in item.dataset) {\n                    this._handleItemAction(item, event.shiftKey);\n                }\n                else if ('choice' in item.dataset) {\n                    this._handleChoiceAction(item);\n                }\n            }\n            event.preventDefault();\n        };\n        /**\n         * Handles mouseover event over this.dropdown\n         * @param {MouseEvent} event\n         */\n        Choices.prototype._onMouseOver = function (_a) {\n            var target = _a.target;\n            if (target instanceof HTMLElement && 'choice' in target.dataset) {\n                this._highlightChoice(target);\n            }\n        };\n        Choices.prototype._onClick = function (_a) {\n            var target = _a.target;\n            var containerOuter = this.containerOuter;\n            var clickWasWithinContainer = containerOuter.element.contains(target);\n            if (clickWasWithinContainer) {\n                if (!this.dropdown.isActive && !containerOuter.isDisabled) {\n                    if (this._isTextElement) {\n                        if (document.activeElement !== this.input.element) {\n                            this.input.focus();\n                        }\n                    }\n                    else {\n                        this.showDropdown();\n                        containerOuter.element.focus();\n                    }\n                }\n                else if (this._isSelectOneElement &&\n                    target !== this.input.element &&\n                    !this.dropdown.element.contains(target)) {\n                    this.hideDropdown();\n                }\n            }\n            else {\n                containerOuter.removeFocusState();\n                this.hideDropdown(true);\n                this.unhighlightAll();\n            }\n        };\n        Choices.prototype._onFocus = function (_a) {\n            var target = _a.target;\n            var containerOuter = this.containerOuter;\n            var focusWasWithinContainer = target && containerOuter.element.contains(target);\n            if (!focusWasWithinContainer) {\n                return;\n            }\n            var targetIsInput = target === this.input.element;\n            if (this._isTextElement) {\n                if (targetIsInput) {\n                    containerOuter.addFocusState();\n                }\n            }\n            else if (this._isSelectMultipleElement) {\n                if (targetIsInput) {\n                    this.showDropdown(true);\n                    // If element is a select box, the focused element is the container and the dropdown\n                    // isn't already open, focus and show dropdown\n                    containerOuter.addFocusState();\n                }\n            }\n            else {\n                containerOuter.addFocusState();\n                if (targetIsInput) {\n                    this.showDropdown(true);\n                }\n            }\n        };\n        Choices.prototype._onBlur = function (_a) {\n            var target = _a.target;\n            var containerOuter = this.containerOuter;\n            var blurWasWithinContainer = target && containerOuter.element.contains(target);\n            if (blurWasWithinContainer && !this._isScrollingOnIe) {\n                if (target === this.input.element) {\n                    containerOuter.removeFocusState();\n                    this.hideDropdown(true);\n                    if (this._isTextElement || this._isSelectMultipleElement) {\n                        this.unhighlightAll();\n                    }\n                }\n                else if (target === this.containerOuter.element) {\n                    // Remove the focus state when the past outerContainer was the target\n                    containerOuter.removeFocusState();\n                    // Also close the dropdown if search is disabled\n                    if (!this._canSearch) {\n                        this.hideDropdown(true);\n                    }\n                }\n            }\n            else {\n                // On IE11, clicking the scollbar blurs our input and thus\n                // closes the dropdown. To stop this, we refocus our input\n                // if we know we are on IE *and* are scrolling.\n                this._isScrollingOnIe = false;\n                this.input.element.focus();\n            }\n        };\n        Choices.prototype._onFormReset = function () {\n            var _this = this;\n            this._store.withTxn(function () {\n                _this.clearInput();\n                _this.hideDropdown();\n                _this.refresh(false, false, true);\n                if (_this._initialItems.length) {\n                    _this.setChoiceByValue(_this._initialItems);\n                }\n            });\n        };\n        Choices.prototype._highlightChoice = function (el) {\n            if (el === void 0) { el = null; }\n            var choices = Array.from(this.dropdown.element.querySelectorAll(selectableChoiceIdentifier));\n            if (!choices.length) {\n                return;\n            }\n            var passedEl = el;\n            var highlightedState = this.config.classNames.highlightedState;\n            var highlightedChoices = Array.from(this.dropdown.element.querySelectorAll(getClassNamesSelector(highlightedState)));\n            // Remove any highlighted choices\n            highlightedChoices.forEach(function (choice) {\n                removeClassesFromElement(choice, highlightedState);\n                choice.setAttribute('aria-selected', 'false');\n            });\n            if (passedEl) {\n                this._highlightPosition = choices.indexOf(passedEl);\n            }\n            else {\n                // Highlight choice based on last known highlight location\n                if (choices.length > this._highlightPosition) {\n                    // If we have an option to highlight\n                    passedEl = choices[this._highlightPosition];\n                }\n                else {\n                    // Otherwise highlight the option before\n                    passedEl = choices[choices.length - 1];\n                }\n                if (!passedEl) {\n                    passedEl = choices[0];\n                }\n            }\n            addClassesToElement(passedEl, highlightedState);\n            passedEl.setAttribute('aria-selected', 'true');\n            this.passedElement.triggerEvent(EventType.highlightChoice, {\n                el: passedEl,\n            });\n            if (this.dropdown.isActive) {\n                // IE11 ignores aria-label and blocks virtual keyboard\n                // if aria-activedescendant is set without a dropdown\n                this.input.setActiveDescendant(passedEl.id);\n                this.containerOuter.setActiveDescendant(passedEl.id);\n            }\n        };\n        Choices.prototype._addItem = function (item, withEvents, userTriggered) {\n            if (withEvents === void 0) { withEvents = true; }\n            if (userTriggered === void 0) { userTriggered = false; }\n            if (!item.id) {\n                throw new TypeError('item.id must be set before _addItem is called for a choice/item');\n            }\n            if (this.config.singleModeForMultiSelect || this._isSelectOneElement) {\n                this.removeActiveItems(item.id);\n            }\n            this._store.dispatch(addItem(item));\n            if (withEvents) {\n                this.passedElement.triggerEvent(EventType.addItem, this._getChoiceForOutput(item));\n                if (userTriggered) {\n                    this.passedElement.triggerEvent(EventType.choice, this._getChoiceForOutput(item));\n                }\n            }\n        };\n        Choices.prototype._removeItem = function (item) {\n            if (!item.id) {\n                return;\n            }\n            this._store.dispatch(removeItem$1(item));\n            var notice = this._notice;\n            if (notice && notice.type === NoticeTypes.noChoices) {\n                this._clearNotice();\n            }\n            this.passedElement.triggerEvent(EventType.removeItem, this._getChoiceForOutput(item));\n        };\n        Choices.prototype._addChoice = function (choice, withEvents, userTriggered) {\n            if (withEvents === void 0) { withEvents = true; }\n            if (userTriggered === void 0) { userTriggered = false; }\n            if (choice.id) {\n                throw new TypeError('Can not re-add a choice which has already been added');\n            }\n            var config = this.config;\n            if (!config.duplicateItemsAllowed && this._store.choices.find(function (c) { return config.valueComparer(c.value, choice.value); })) {\n                return;\n            }\n            // Generate unique id, in-place update is required so chaining _addItem works as expected\n            this._lastAddedChoiceId++;\n            choice.id = this._lastAddedChoiceId;\n            choice.elementId = \"\".concat(this._baseId, \"-\").concat(this._idNames.itemChoice, \"-\").concat(choice.id);\n            var prependValue = config.prependValue, appendValue = config.appendValue;\n            if (prependValue) {\n                choice.value = prependValue + choice.value;\n            }\n            if (appendValue) {\n                choice.value += appendValue.toString();\n            }\n            if ((prependValue || appendValue) && choice.element) {\n                choice.element.value = choice.value;\n            }\n            this._clearNotice();\n            this._store.dispatch(addChoice(choice));\n            if (choice.selected) {\n                this._addItem(choice, withEvents, userTriggered);\n            }\n        };\n        Choices.prototype._addGroup = function (group, withEvents) {\n            var _this = this;\n            if (withEvents === void 0) { withEvents = true; }\n            if (group.id) {\n                throw new TypeError('Can not re-add a group which has already been added');\n            }\n            this._store.dispatch(addGroup(group));\n            if (!group.choices) {\n                return;\n            }\n            // add unique id for the group(s), and do not store the full list of choices in this group\n            this._lastAddedGroupId++;\n            group.id = this._lastAddedGroupId;\n            group.choices.forEach(function (item) {\n                item.group = group;\n                if (group.disabled) {\n                    item.disabled = true;\n                }\n                _this._addChoice(item, withEvents);\n            });\n        };\n        Choices.prototype._createTemplates = function () {\n            var _this = this;\n            var callbackOnCreateTemplates = this.config.callbackOnCreateTemplates;\n            var userTemplates = {};\n            if (typeof callbackOnCreateTemplates === 'function') {\n                userTemplates = callbackOnCreateTemplates.call(this, strToEl, escapeForTemplate, getClassNames);\n            }\n            var templating = {};\n            Object.keys(this._templates).forEach(function (name) {\n                if (name in userTemplates) {\n                    templating[name] = userTemplates[name].bind(_this);\n                }\n                else {\n                    templating[name] = _this._templates[name].bind(_this);\n                }\n            });\n            this._templates = templating;\n        };\n        Choices.prototype._createElements = function () {\n            var templating = this._templates;\n            var _a = this, config = _a.config, isSelectOneElement = _a._isSelectOneElement;\n            var position = config.position, classNames = config.classNames;\n            var elementType = this._elementType;\n            this.containerOuter = new Container({\n                element: templating.containerOuter(config, this._direction, this._isSelectElement, isSelectOneElement, config.searchEnabled, elementType, config.labelId),\n                classNames: classNames,\n                type: elementType,\n                position: position,\n            });\n            this.containerInner = new Container({\n                element: templating.containerInner(config),\n                classNames: classNames,\n                type: elementType,\n                position: position,\n            });\n            this.input = new Input({\n                element: templating.input(config, this._placeholderValue),\n                classNames: classNames,\n                type: elementType,\n                preventPaste: !config.paste,\n            });\n            this.choiceList = new List({\n                element: templating.choiceList(config, isSelectOneElement),\n            });\n            this.itemList = new List({\n                element: templating.itemList(config, isSelectOneElement),\n            });\n            this.dropdown = new Dropdown({\n                element: templating.dropdown(config),\n                classNames: classNames,\n                type: elementType,\n            });\n        };\n        Choices.prototype._createStructure = function () {\n            var _a = this, containerInner = _a.containerInner, containerOuter = _a.containerOuter, passedElement = _a.passedElement;\n            var dropdownElement = this.dropdown.element;\n            // Hide original element\n            passedElement.conceal();\n            // Wrap input in container preserving DOM ordering\n            containerInner.wrap(passedElement.element);\n            // Wrapper inner container with outer container\n            containerOuter.wrap(containerInner.element);\n            if (this._isSelectOneElement) {\n                this.input.placeholder = this.config.searchPlaceholderValue || '';\n            }\n            else {\n                if (this._placeholderValue) {\n                    this.input.placeholder = this._placeholderValue;\n                }\n                this.input.setWidth();\n            }\n            containerOuter.element.appendChild(containerInner.element);\n            containerOuter.element.appendChild(dropdownElement);\n            containerInner.element.appendChild(this.itemList.element);\n            dropdownElement.appendChild(this.choiceList.element);\n            if (!this._isSelectOneElement) {\n                containerInner.element.appendChild(this.input.element);\n            }\n            else if (this.config.searchEnabled) {\n                dropdownElement.insertBefore(this.input.element, dropdownElement.firstChild);\n            }\n            this._highlightPosition = 0;\n            this._isSearching = false;\n        };\n        Choices.prototype._initStore = function () {\n            var _this = this;\n            this._store.subscribe(this._render).withTxn(function () {\n                _this._addPredefinedChoices(_this._presetChoices, _this._isSelectOneElement && !_this._hasNonChoicePlaceholder, false);\n            });\n            if (!this._store.choices.length || (this._isSelectOneElement && this._hasNonChoicePlaceholder)) {\n                this._render();\n            }\n        };\n        Choices.prototype._addPredefinedChoices = function (choices, selectFirstOption, withEvents) {\n            var _this = this;\n            if (selectFirstOption === void 0) { selectFirstOption = false; }\n            if (withEvents === void 0) { withEvents = true; }\n            if (selectFirstOption) {\n                /**\n                 * If there is a selected choice already or the choice is not the first in\n                 * the array, add each choice normally.\n                 *\n                 * Otherwise we pre-select the first enabled choice in the array (\"select-one\" only)\n                 */\n                var noSelectedChoices = choices.findIndex(function (choice) { return choice.selected; }) === -1;\n                if (noSelectedChoices) {\n                    choices.some(function (choice) {\n                        if (choice.disabled || 'choices' in choice) {\n                            return false;\n                        }\n                        choice.selected = true;\n                        return true;\n                    });\n                }\n            }\n            choices.forEach(function (item) {\n                if ('choices' in item) {\n                    if (_this._isSelectElement) {\n                        _this._addGroup(item, withEvents);\n                    }\n                }\n                else {\n                    _this._addChoice(item, withEvents);\n                }\n            });\n        };\n        Choices.prototype._findAndSelectChoiceByValue = function (value, userTriggered) {\n            var _this = this;\n            if (userTriggered === void 0) { userTriggered = false; }\n            // Check 'value' property exists and the choice isn't already selected\n            var foundChoice = this._store.choices.find(function (choice) { return _this.config.valueComparer(choice.value, value); });\n            if (foundChoice && !foundChoice.disabled && !foundChoice.selected) {\n                this._addItem(foundChoice, true, userTriggered);\n                return true;\n            }\n            return false;\n        };\n        Choices.prototype._generatePlaceholderValue = function () {\n            var config = this.config;\n            if (!config.placeholder) {\n                return null;\n            }\n            if (this._hasNonChoicePlaceholder) {\n                return config.placeholderValue;\n            }\n            if (this._isSelectElement) {\n                var placeholderOption = this.passedElement.placeholderOption;\n                return placeholderOption ? placeholderOption.text : null;\n            }\n            return null;\n        };\n        Choices.prototype._warnChoicesInitFailed = function (caller) {\n            if (this.config.silent) {\n                return;\n            }\n            if (!this.initialised) {\n                throw new TypeError(\"\".concat(caller, \" called on a non-initialised instance of Choices\"));\n            }\n            else if (!this.initialisedOK) {\n                throw new TypeError(\"\".concat(caller, \" called for an element which has multiple instances of Choices initialised on it\"));\n            }\n        };\n        Choices.version = '11.0.6';\n        return Choices;\n    }());\n\n    return Choices;\n\n}));\n\n\n//# sourceURL=webpack://Formio/./node_modules/choices.js/public/assets/scripts/choices.js?");
+
+/***/ }),
+
 /***/ "./node_modules/compare-versions/lib/esm/compare.js":
 /*!**********************************************************!*\
   !*** ./node_modules/compare-versions/lib/esm/compare.js ***!
@@ -4861,7 +4861,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst compare_versions_1 = __webpack_require__(/*! compare-versions */ \"./node_modules/compare-versions/lib/esm/index.js\");\nconst EventEmitter_1 = __importDefault(__webpack_require__(/*! ./EventEmitter */ \"./lib/cjs/EventEmitter.js\"));\nconst i18n_1 = __importDefault(__webpack_require__(/*! ./i18n */ \"./lib/cjs/i18n.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst Components_1 = __importDefault(__webpack_require__(/*! ./components/Components */ \"./lib/cjs/components/Components.js\"));\nconst NestedDataComponent_1 = __importDefault(__webpack_require__(/*! ./components/_classes/nesteddata/NestedDataComponent */ \"./lib/cjs/components/_classes/nesteddata/NestedDataComponent.js\"));\nconst utils_1 = __webpack_require__(/*! ./utils */ \"./lib/cjs/utils/index.js\");\n// We need this here because dragula pulls in CustomEvent class that requires global to exist.\nif (typeof window !== 'undefined' && typeof window.global === 'undefined') {\n    window.global = window;\n}\nconst dragula_1 = __importDefault(__webpack_require__(/*! dragula */ \"./node_modules/dragula/dragula.js\"));\n// Initialize the available forms.\nFormio_1.Formio.forms = {};\n// Allow people to register components.\nFormio_1.Formio.registerComponent = Components_1.default.setComponent;\n/**\n *\n * @param {any} icons  - The icons to use.\n * @returns {any} - The icon set.\n */\nfunction getIconSet(icons) {\n    if (icons === \"fontawesome\") {\n        return \"fa\";\n    }\n    return icons || \"\";\n}\n/**\n *\n * @param {any} options - The options to get.\n * @returns {any} - The options.\n */\nfunction getOptions(options) {\n    options = lodash_1.default.defaults(options, {\n        submitOnEnter: false,\n        iconset: getIconSet(options && options.icons ? options.icons : Formio_1.Formio.icons),\n        i18next: null,\n        saveDraft: false,\n        alwaysDirty: false,\n        saveDraftThrottle: 5000,\n        display: \"form\",\n        cdnUrl: Formio_1.Formio.cdn.baseUrl,\n    });\n    if (!options.events) {\n        options.events = new EventEmitter_1.default();\n    }\n    return options;\n}\n/**\n * Represents a JSON value.\n * @typedef {(string | number | boolean | null | JSONArray | JSONObject)} JSON\n */\n/**\n * Represents a JSON array.\n * @typedef {Array<JSON>} JSONArray\n */\n/**\n * Represents a JSON object.\n * @typedef {{[key: string]: JSON}} JSONObject\n */\n/**\n * @typedef {object} FormioHooks\n * @property {Function} [beforeSubmit] - A function that is called before the form is submitted.\n * @property {Function} [beforeCancel] - A function that is called before the form is canceled.\n * @property {Function} [beforeNext] - A function that is called before moving to the next page in a multi-page form.\n * @property {Function} [beforePrev] - A function that is called before moving to the previous page in a multi-page form.\n * @property {Function} [attachComponent] - A function that is called when a component is attached to the form.\n * @property {Function} [setDataValue] - A function that is called when setting the value of a data component.\n * @property {Function} [addComponents] - A function that is called when adding multiple components to the form.\n * @property {Function} [addComponent] - A function that is called when adding a single component to the form.\n * @property {Function} [customValidation] - A function that is called for custom validation of the form.\n * @property {Function} [attachWebform] - A function that is called when attaching a webform to the form.\n */\n/**\n * @typedef {object} SanitizeConfig\n * @property {string[]} [addAttr] - The attributes to add.\n * @property {string[]} [addTags] - The tags to add.\n * @property {string[]} [allowedAttrs] - The allowed attributes.\n * @property {string[]} [allowedTags] - The allowed tags.\n * @property {string[]} [allowedUriRegex] - The allowed URI regex.\n * @property {string[]} [addUriSafeAttr] - The URI safe attributes.\n */\n/**\n * @typedef {object} ButtonSettings\n * @property {boolean} [showPrevious] - Show the \"Previous\" button.\n * @property {boolean} [showNext] - Show the \"Next\" button.\n * @property {boolean} [showCancel] - Show the \"Cancel\" button.\n * @property {boolean} [showSubmit] - Show the \"Submit\" button.\n */\n/**\n * @typedef {object} FormOptions\n * @property {boolean} [saveDraft] - Enable the save draft feature.\n * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.\n * @property {boolean} [readOnly] - Set this form to readOnly.\n * @property {boolean} [noAlerts] - Disable the alerts dialog.\n * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.\n * @property {string} [template] - Custom logic for creation of elements.\n * @property {boolean} [noDefaults] - Exclude default values from the settings.\n * @property {any} [fileService] - The file service for this form.\n * @property {EventEmitter} [events] - The EventEmitter for this form.\n * @property {string} [language] - The language to render this form in.\n * @property {{[key: string]: string}} [i18next] - The i18next configuration for this form.\n * @property {boolean} [viewAsHtml] - View the form as raw HTML.\n * @property {'form' | 'html' | 'flat' | 'builder' | 'pdf'} [renderMode] - The render mode for this form.\n * @property {boolean} [highlightErrors] - Highlight any errors on the form.\n * @property {string} [componentErrorClass] - The error class for components.\n * @property {any} [templates] - The templates for this form.\n * @property {string} [iconset] - The iconset for this form.\n * @property {import('@formio/core').Component[]} [components] - The components for this form.\n * @property {{[key: string]: boolean}} [disabled] - Disabled components for this form.\n * @property {boolean} [showHiddenFields] - Show hidden fields.\n * @property {{[key: string]: boolean}} [hide] - Hidden components for this form.\n * @property {{[key: string]: boolean}} [show] - Components to show for this form.\n * @property {Formio} [formio] - The Formio instance for this form.\n * @property {string} [decimalSeparator] - The decimal separator for this form.\n * @property {string} [thousandsSeparator] - The thousands separator for this form.\n * @property {FormioHooks} [hooks] - The hooks for this form.\n * @property {boolean} [alwaysDirty] - Always be dirty.\n * @property {boolean} [skipDraftRestore] - Skip restoring a draft.\n * @property {'form' | 'wizard' | 'pdf'} [display] - The display for this form.\n * @property {string} [cdnUrl] - The CDN url for this form.\n * @property {boolean} [flatten] - Flatten the form.\n * @property {boolean} [sanitize] - Sanitize the form.\n * @property {SanitizeConfig} [sanitizeConfig] - The sanitize configuration for this form.\n * @property {ButtonSettings} [buttonSettings] - The button settings for this form.\n * @property {object} [breadcrumbSettings] - The breadcrumb settings for this form.\n * @property {boolean} [allowPrevious] - Allow the previous button (for Wizard forms).\n * @property {string[]} [wizardButtonOrder] - The order of the buttons (for Wizard forms).\n * @property {boolean} [showCheckboxBackground] - Show the checkbox background.\n * @property {boolean} [inputsOnly] - Only show inputs in the form and no labels.\n * @property {boolean} [building] - If we are in the process of building the form.\n * @property {number} [zoom] - The zoom for PDF forms.\n */\nclass Webform extends NestedDataComponent_1.default {\n    /**\n     * Creates a new Form instance.\n     * @param {HTMLElement | object | import('Form').FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.\n     * @param {import('Form').FormOptions} [options] - The options to create a new form instance.\n     */\n    constructor(elementOrOptions, options = undefined) {\n        let element, formOptions;\n        if (elementOrOptions instanceof HTMLElement || options) {\n            element = elementOrOptions;\n            formOptions = options || {};\n        }\n        else {\n            formOptions = elementOrOptions || {};\n        }\n        super(null, getOptions(formOptions));\n        this.executeShortcuts = (event) => {\n            const { target } = event;\n            if (!this.keyboardCatchableElement(target)) {\n                return;\n            }\n            const ctrl = event.ctrlKey || event.metaKey;\n            const keyCode = event.keyCode;\n            let char = \"\";\n            if (65 <= keyCode && keyCode <= 90) {\n                char = String.fromCharCode(keyCode);\n            }\n            else if (keyCode === 13) {\n                char = \"Enter\";\n            }\n            else if (keyCode === 27) {\n                char = \"Esc\";\n            }\n            lodash_1.default.each(this.shortcuts, (shortcut) => {\n                if (shortcut.ctrl && !ctrl) {\n                    return;\n                }\n                if (shortcut.shortcut === char) {\n                    shortcut.element.click();\n                    event.preventDefault();\n                }\n            });\n        };\n        this.setElement(element);\n        // Keep track of all available forms globally.\n        Formio_1.Formio.forms[this.id] = this;\n        // Set the base url.\n        if (this.options.baseUrl) {\n            Formio_1.Formio.setBaseUrl(this.options.baseUrl);\n        }\n        /**\n         * The type of this element.\n         * @type {string}\n         */\n        this.type = \"form\";\n        this._src = \"\";\n        this._loading = false;\n        this._form = {};\n        this.draftEnabled = false;\n        this.savingDraft = false;\n        if (this.options.saveDraftThrottle) {\n            this.triggerSaveDraft = lodash_1.default.throttle(this.saveDraft.bind(this), this.options.saveDraftThrottle);\n        }\n        else {\n            this.triggerSaveDraft = this.saveDraft.bind(this);\n        }\n        /**\n         * Determines if this form should submit the API on submit.\n         * @type {boolean}\n         */\n        this.nosubmit = false;\n        /**\n         * Determines if the form has tried to be submitted, error or not.\n         * @type {boolean}\n         */\n        this.submitted = false;\n        /**\n         * Determines if the form is being submitted at the moment.\n         * @type {boolean}\n         */\n        this.submitting = false;\n        /**\n         * The Formio instance for this form.\n         * @type {Formio}\n         */\n        this.formio = null;\n        /**\n         * The loader HTML element.\n         * @type {HTMLElement}\n         */\n        this.loader = null;\n        /**\n         * The alert HTML element\n         * @type {HTMLElement}\n         */\n        this.alert = null;\n        /**\n         * Promise that is triggered when the submission is done loading.\n         * @type {Promise}\n         */\n        this.onSubmission = null;\n        /**\n         * Determines if this submission is explicitly set.\n         * @type {boolean}\n         */\n        this.submissionSet = false;\n        /**\n         * Promise that executes when the form is ready and rendered.\n         * @type {Promise}\n         * @example\n         * import Webform from '@formio/js/Webform';\n         * let form = new Webform(document.getElementById('formio'));\n         * form.formReady.then(() => {\n         *   console.log('The form is ready!');\n         * });\n         * form.src = 'https://examples.form.io/example';\n         */\n        this.formReady = new Promise((resolve, reject) => {\n            /**\n             * Called when the formReady state of this form has been resolved.\n             * @type {Function}\n             */\n            this.formReadyResolve = resolve;\n            /**\n             * Called when this form could not load and is rejected.\n             * @type {Function}\n             */\n            this.formReadyReject = reject;\n        });\n        /**\n         * Promise that executes when the submission is ready and rendered.\n         * @type {Promise}\n         * @example\n         * import Webform from '@formio/js/Webform';\n         * let form = new Webform(document.getElementById('formio'));\n         * form.submissionReady.then(() => {\n         *   console.log('The submission is ready!');\n         * });\n         * form.src = 'https://examples.form.io/example/submission/234234234234234243';\n         */\n        this.submissionReady = new Promise((resolve, reject) => {\n            /**\n             * Called when the formReady state of this form has been resolved.\n             * @type {Function}\n             */\n            this.submissionReadyResolve = resolve;\n            /**\n             * Called when this form could not load and is rejected.\n             * @type {Function}\n             */\n            this.submissionReadyReject = reject;\n        });\n        this.shortcuts = [];\n        // Set language after everything is established.\n        this.language = this.i18next.language;\n        // See if we need to restore the draft from a user.\n        if (this.options.saveDraft) {\n            if (this.options.skipDraftRestore) {\n                this.draftEnabled = true;\n                this.savingDraft = false;\n            }\n            else {\n                this.formReady.then(() => {\n                    const user = Formio_1.Formio.getUser();\n                    // Only restore a draft if the submission isn't explicitly set.\n                    if (user && !this.submissionSet) {\n                        this.restoreDraft(user._id);\n                    }\n                });\n            }\n        }\n        this.component.clearOnHide = false;\n        // Ensure the root is set to this component.\n        this.root = this;\n        this.localRoot = this;\n        this.root.dragulaLib = dragula_1.default;\n    }\n    /* eslint-enable max-statements */\n    get language() {\n        return this.options.language;\n    }\n    get emptyValue() {\n        return null;\n    }\n    componentContext() {\n        return this._data;\n    }\n    /**\n     * Sets the language for this form.\n     * @param {string} lang - The language to use (e.g. 'en', 'sp', etc.)\n     */\n    set language(lang) {\n        if (!this.i18next) {\n            return;\n        }\n        this.options.language = lang;\n        if (this.i18next.language === lang) {\n            return;\n        }\n        this.i18next.changeLanguage(lang, (err) => {\n            if (err) {\n                return;\n            }\n            this.rebuild();\n            this.emit(\"languageChanged\");\n        });\n    }\n    get componentComponents() {\n        return this.form.components;\n    }\n    get shadowRoot() {\n        return this.options.shadowRoot;\n    }\n    /**\n     * Add a language for translations\n     * @param {string} code - The language code for the language being added.\n     * @param {object} lang - The language translations.\n     * @param {boolean} [active] - If this language should be set as the active language.\n     */\n    addLanguage(code, lang, active = false) {\n        if (this.i18next) {\n            var translations = lodash_1.default.assign((0, utils_1.fastCloneDeep)(i18n_1.default.resources.en.translation), lang);\n            this.i18next.addResourceBundle(code, \"translation\", translations, true, true);\n            if (active) {\n                this.language = code;\n            }\n        }\n    }\n    keyboardCatchableElement(element) {\n        if (element.nodeName === \"TEXTAREA\") {\n            return false;\n        }\n        if (element.nodeName === \"INPUT\") {\n            return [\"text\", \"email\", \"password\"].indexOf(element.type) === -1;\n        }\n        return true;\n    }\n    addShortcut(element, shortcut) {\n        if (!shortcut || !/^([A-Z]|Enter|Esc)$/i.test(shortcut)) {\n            return;\n        }\n        shortcut = lodash_1.default.capitalize(shortcut);\n        if (shortcut === \"Enter\" || shortcut === \"Esc\") {\n            // Restrict Enter and Esc only for buttons\n            if (element.tagName !== \"BUTTON\") {\n                return;\n            }\n            this.shortcuts.push({\n                shortcut,\n                element,\n            });\n        }\n        else {\n            this.shortcuts.push({\n                ctrl: true,\n                shortcut,\n                element,\n            });\n        }\n    }\n    removeShortcut(element, shortcut) {\n        if (!shortcut || !/^([A-Z]|Enter|Esc)$/i.test(shortcut)) {\n            return;\n        }\n        lodash_1.default.remove(this.shortcuts, {\n            shortcut,\n            element,\n        });\n    }\n    /**\n     * Get the embed source of the form.\n     * @returns {string} - The source of the form.\n     */\n    get src() {\n        return this._src;\n    }\n    /**\n     * Loads the submission if applicable.\n     * @returns {Promise} - The promise that is triggered when the submission is loaded.\n     */\n    loadSubmission() {\n        this.loadingSubmission = true;\n        if (this.formio.submissionId) {\n            this.onSubmission = this.formio\n                .loadSubmission()\n                .then((submission) => this.setSubmission(submission), (err) => this.submissionReadyReject(err))\n                .catch((err) => this.submissionReadyReject(err));\n        }\n        else {\n            this.submissionReadyResolve();\n        }\n        return this.submissionReady;\n    }\n    /**\n     * Set the src of the form renderer.\n     * @param {string} value - The source value to set.\n     * @param {any} options - The options to set.\n     * @returns {Promise} - The promise that is triggered when the form is set.\n     */\n    setSrc(value, options) {\n        if (this.setUrl(value, options)) {\n            this.nosubmit = false;\n            return this.formio\n                .loadForm({ params: { live: 1 } })\n                .then((form) => {\n                const setForm = this.setForm(form);\n                this.loadSubmission();\n                return setForm;\n            })\n                .catch((err) => {\n                console.warn(err);\n                this.formReadyReject(err);\n            });\n        }\n        return Promise.resolve();\n    }\n    /**\n     * Set the Form source, which is typically the Form.io embed URL.\n     * @param {string} value - The value of the form embed url.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.formReady.then(() => {\n     *   console.log('The form is formReady!');\n     * });\n     * form.src = 'https://examples.form.io/example';\n     */\n    set src(value) {\n        this.setSrc(value);\n    }\n    /**\n     * Get the embed source of the form.\n     * @returns {string} - returns the source of the form.\n     */\n    get url() {\n        return this._src;\n    }\n    /**\n     * Sets the url of the form renderer.\n     * @param {string} value - The value to set the url to.\n     * @param {any} options - The options to set.\n     * @returns {boolean} - TRUE means the url was set, FALSE otherwise.\n     */\n    setUrl(value, options) {\n        if (!value || typeof value !== \"string\" || value === this._src) {\n            return false;\n        }\n        this._src = value;\n        this.nosubmit = true;\n        this.formio = this.options.formio = new Formio_1.Formio(value, options);\n        if (this.type === \"form\") {\n            // Set the options source so this can be passed to other components.\n            this.options.src = value;\n        }\n        return true;\n    }\n    /**\n     * Set the form source but don't initialize the form and submission from the url.\n     * @param {string} value - The value of the form embed url.\n     */\n    set url(value) {\n        this.setUrl(value);\n    }\n    /**\n     * Called when both the form and submission have been loaded.\n     * @returns {Promise} - The promise to trigger when both form and submission have loaded.\n     */\n    get ready() {\n        return this.formReady.then(() => {\n            return super.ready.then(() => {\n                return this.loadingSubmission ? this.submissionReady : true;\n            });\n        });\n    }\n    /**\n     * Returns if this form is loading.\n     * @returns {boolean} - TRUE means the form is loading, FALSE otherwise.\n     */\n    get loading() {\n        return this._loading;\n    }\n    /**\n     * Set the loading state for this form, and also show the loader spinner.\n     * @param {boolean} loading - If this form should be \"loading\" or not.\n     */\n    set loading(loading) {\n        if (this._loading !== loading) {\n            this._loading = loading;\n            if (!this.loader && loading) {\n                this.loader = this.ce(\"div\", {\n                    class: \"loader-wrapper\",\n                });\n                const spinner = this.ce(\"div\", {\n                    class: \"loader text-center\",\n                });\n                this.loader.appendChild(spinner);\n            }\n            /* eslint-disable max-depth */\n            if (this.loader) {\n                try {\n                    if (loading) {\n                        this.prependTo(this.loader, this.wrapper);\n                    }\n                    else {\n                        this.removeChildFrom(this.loader, this.wrapper);\n                    }\n                }\n                catch (err) {\n                    // ingore\n                }\n            }\n            /* eslint-enable max-depth */\n        }\n    }\n    /**\n     * Sets the JSON schema for the form to be rendered.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.setForm({\n     *   components: [\n     *     {\n     *       type: 'textfield',\n     *       key: 'firstName',\n     *       label: 'First Name',\n     *       placeholder: 'Enter your first name.',\n     *       input: true\n     *     },\n     *     {\n     *       type: 'textfield',\n     *       key: 'lastName',\n     *       label: 'Last Name',\n     *       placeholder: 'Enter your last name',\n     *       input: true\n     *     },\n     *     {\n     *       type: 'button',\n     *       action: 'submit',\n     *       label: 'Submit',\n     *       theme: 'primary'\n     *     }\n     *   ]\n     * });\n     * @param {object} form - The JSON schema of the form @see https://examples.form.io/example for an example JSON schema.\n     * @param {any} flags - Any flags to apply when setting the form.\n     * @returns {Promise} - The promise that is triggered when the form is set.\n     */\n    setForm(form, flags = {}) {\n        var _a;\n        const isFormAlreadySet = this._form && ((_a = this._form.components) === null || _a === void 0 ? void 0 : _a.length);\n        try {\n            // Do not set the form again if it has been already set\n            if (isFormAlreadySet && JSON.stringify(this._form) === JSON.stringify(form)) {\n                this.formReadyResolve();\n                return Promise.resolve();\n            }\n            // Create the form.\n            this._form = (flags === null || flags === void 0 ? void 0 : flags.keepAsReference) ? form : lodash_1.default.cloneDeep(form);\n            if (this.onSetForm) {\n                this.onSetForm(lodash_1.default.cloneDeep(this._form), form);\n            }\n        }\n        catch (err) {\n            console.warn(err);\n            // If provided form is not a valid JSON object, do not set it too\n            this.formReadyReject(err);\n            return Promise.resolve();\n        }\n        // Allow the form to provide component overrides.\n        if (form && form.settings && form.settings.components) {\n            this.options.components = form.settings.components;\n        }\n        if (form && form.properties) {\n            this.options.properties = form.properties;\n        }\n        // Use the sanitize config from the form settings or the global sanitize config if it is not provided in the options\n        if (!this.options.sanitizeConfig && !this.builderMode) {\n            this.options.sanitizeConfig =\n                lodash_1.default.get(form, \"settings.sanitizeConfig\") ||\n                    lodash_1.default.get(form, \"globalSettings.sanitizeConfig\");\n        }\n        if (\"schema\" in form && (0, compare_versions_1.compareVersions)(form.schema, \"1.x\") > 0) {\n            this.ready.then(() => {\n                this.setAlert(\"alert alert-danger\", \"Form schema is for a newer version, please upgrade your renderer. Some functionality may not work.\");\n            });\n        }\n        // See if they pass a module, and evaluate it if so.\n        if (form && form.module) {\n            let formModule = null;\n            if (typeof form.module === \"string\") {\n                try {\n                    formModule = this.evaluate(`return ${form.module}`);\n                }\n                catch (err) {\n                    console.warn(err);\n                }\n            }\n            else {\n                formModule = form.module;\n            }\n            if (formModule) {\n                Formio_1.Formio.use(formModule);\n                // Since we got here after instantiation, we need to manually apply form options.\n                if (formModule.options && formModule.options.form) {\n                    this.options = Object.assign(this.options, formModule.options.form);\n                }\n            }\n        }\n        this.initialized = false;\n        const rebuild = this.rebuild() || Promise.resolve();\n        return rebuild.then(() => {\n            this.emit('formLoad', form);\n            if (!this.options.server) {\n                this.triggerCaptcha();\n            }\n            // Make sure to trigger onChange after a render event occurs to speed up form rendering.\n            setTimeout(() => {\n                this.onChange(flags);\n                this.formReadyResolve();\n            }, 0);\n            return this.formReady;\n        });\n    }\n    /**\n     * Gets the form object.\n     * @returns {object} - The form JSON schema.\n     */\n    get form() {\n        if (!this._form) {\n            this._form = {\n                components: [],\n            };\n        }\n        return this._form;\n    }\n    /**\n     * Sets the form value.\n     * @alias setForm\n     * @param {object} form - The form schema object.\n     */\n    set form(form) {\n        this.setForm(form);\n    }\n    /**\n     * Returns the submission object that was set within this form.\n     * @returns {object} - The submission object.\n     */\n    get submission() {\n        return this.getValue();\n    }\n    /**\n     * Sets the submission of a form.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.src = 'https://examples.form.io/example';\n     * form.submission = {data: {\n     *   firstName: 'Joe',\n     *   lastName: 'Smith',\n     *   email: 'joe@example.com'\n     * }};\n     * @param {object} submission - The Form.io submission object.\n     */\n    set submission(submission) {\n        this.setSubmission(submission);\n    }\n    /**\n     * Sets the submission value\n     * @param {object|null|undefined} submission - The submission to set.\n     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.\n     * @returns {void}\n     */\n    onSetSubmission(submission, flags = {}) {\n        this.submissionSet = true;\n        this.triggerChange(flags);\n        this.emit('beforeSetSubmission', submission);\n        this.setValue(submission, flags);\n    }\n    /**\n     * Sets a submission and returns the promise when it is ready.\n     * @param {any} submission - The submission to set.\n     * @param {any} flags - Any flags to apply when setting the submission.\n     * @returns {Promise} - The promise that is triggered when the submission is set.\n     */\n    setSubmission(submission, flags = {}) {\n        flags = Object.assign(Object.assign({}, flags), { fromSubmission: lodash_1.default.has(flags, \"fromSubmission\") ? flags.fromSubmission : true });\n        return (this.onSubmission = this.formReady\n            .then((resolveFlags) => {\n            if (resolveFlags) {\n                flags = Object.assign(Object.assign({}, flags), resolveFlags);\n            }\n            this.onSetSubmission(submission, flags);\n            return this.submissionReadyResolve(submission);\n        }, (err) => this.submissionReadyReject(err))\n            .catch((err) => this.submissionReadyReject(err)));\n    }\n    handleDraftError(errName, errDetails, restoreDraft) {\n        const errorMessage = lodash_1.default.trim(`${this.t(errName)} ${errDetails || \"\"}`);\n        console.warn(errorMessage);\n        this.emit(restoreDraft ? \"restoreDraftError\" : \"saveDraftError\", errDetails || errorMessage);\n    }\n    saveDraft() {\n        if (!this.draftEnabled) {\n            return;\n        }\n        if (!this.formio) {\n            this.handleDraftError(\"saveDraftInstanceError\");\n            return;\n        }\n        if (!Formio_1.Formio.getUser()) {\n            this.handleDraftError(\"saveDraftAuthError\");\n            return;\n        }\n        const draft = (0, utils_1.fastCloneDeep)(this.submission);\n        draft.state = \"draft\";\n        if (!this.savingDraft && !this.submitting) {\n            this.emit(\"saveDraftBegin\");\n            this.savingDraft = true;\n            this.formio\n                .saveSubmission(draft)\n                .then((sub) => {\n                // Set id to submission to avoid creating new draft submission\n                this.submission._id = sub._id;\n                this.savingDraft = false;\n                this.emit(\"saveDraft\", sub);\n            })\n                .catch((err) => {\n                this.savingDraft = false;\n                this.handleDraftError(\"saveDraftError\", err);\n            });\n        }\n    }\n    /**\n     * Restores a draft submission based on the user who is authenticated.\n     * @param {string} userId - The user id where we need to restore the draft from.\n     */\n    restoreDraft(userId) {\n        const formio = this.formio || this.options.formio;\n        if (!formio) {\n            this.handleDraftError(\"restoreDraftInstanceError\", null, true);\n            return;\n        }\n        this.savingDraft = true;\n        formio\n            .loadSubmissions({\n            params: {\n                state: 'draft',\n                owner: userId,\n                sort: '-created'\n            },\n        })\n            .then((submissions) => {\n            if (submissions.length > 0 && !this.options.skipDraftRestore) {\n                const draft = (0, utils_1.fastCloneDeep)(submissions[0]);\n                return this.setSubmission(draft).then(() => {\n                    this.draftEnabled = true;\n                    this.savingDraft = false;\n                    this.emit(\"restoreDraft\", draft);\n                });\n            }\n            // Enable drafts so that we can keep track of changes.\n            this.draftEnabled = true;\n            this.savingDraft = false;\n            this.emit(\"restoreDraft\", null);\n        })\n            .catch((err) => {\n            this.draftEnabled = true;\n            this.savingDraft = false;\n            this.handleDraftError(\"restoreDraftError\", err, true);\n        });\n    }\n    get schema() {\n        const schema = (0, utils_1.fastCloneDeep)(lodash_1.default.omit(this._form, [\"components\"]));\n        schema.components = [];\n        this.eachComponent((component) => schema.components.push(component.schema));\n        return schema;\n    }\n    mergeData(_this, _that) {\n        lodash_1.default.mergeWith(_this, _that, (thisValue, thatValue) => {\n            if (Array.isArray(thisValue) &&\n                Array.isArray(thatValue) &&\n                thisValue.length !== thatValue.length) {\n                return thatValue;\n            }\n        });\n    }\n    setValue(submission, flags = {}) {\n        if (!submission || !submission.data) {\n            submission = {\n                data: {},\n            };\n        }\n        // Metadata needs to be available before setValue\n        this._submission.metadata = submission.metadata ? lodash_1.default.cloneDeep(submission.metadata) : {};\n        this.editing = !!submission._id;\n        // Set the timezone in the options if available.\n        if (!this.options.submissionTimezone &&\n            submission.metadata &&\n            submission.metadata.timezone) {\n            this.options.submissionTimezone = submission.metadata.timezone;\n        }\n        const changed = super.setValue(submission.data, flags);\n        if (!flags.sanitize) {\n            this.mergeData(this.data, submission.data);\n        }\n        submission.data = this.data;\n        this._submission = submission;\n        return changed;\n    }\n    getValue() {\n        if (!this._submission) {\n            this._submission = {};\n        }\n        if (!this._submission.data) {\n            this._submission.data = {};\n        }\n        if (this.viewOnly) {\n            return this._submission;\n        }\n        const submission = this._submission;\n        submission.data = this.data;\n        return this._submission;\n    }\n    /**\n     * Build the form.\n     * @returns {Promise} - The promise that is triggered when the form is built.\n     */\n    init() {\n        if (this.options.submission) {\n            const submission = lodash_1.default.extend({}, this.options.submission);\n            this._submission = submission;\n            this._data = submission.data;\n        }\n        else {\n            this._submission = this._submission || { data: {} };\n        }\n        // Remove any existing components.\n        if (this.components && this.components.length) {\n            this.destroyComponents();\n            this.components = [];\n        }\n        if (this.component) {\n            this.component.components = this.form ? this.form.components : [];\n        }\n        else {\n            this.component = this.form;\n        }\n        this.component.type = \"form\";\n        this.component.input = false;\n        this.addComponents();\n        this.on(\"submitButton\", (options) => {\n            this.submit(false, options).catch((e) => {\n                options.instance.loading = false;\n                return e !== false && e !== undefined && console.log(e);\n            });\n        }, true);\n        this.on(\"checkValidity\", (data) => this.validate(data, { dirty: true, process: \"change\" }), true);\n        this.on(\"requestUrl\", (args) => this.submitUrl(args.url, args.headers), true);\n        this.on(\"resetForm\", () => this.resetValue(), true);\n        this.on(\"deleteSubmission\", () => this.deleteSubmission(), true);\n        this.on(\"refreshData\", () => this.updateValue(), true);\n        this.executeFormController();\n        return this.formReady;\n    }\n    executeFormController() {\n        // If no controller value or\n        // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)\n        if (!this.form ||\n            !this.form.controller ||\n            ((!this.visible || this.component.hidden) &&\n                this.component.clearOnHide &&\n                !this.rootPristine)) {\n            return false;\n        }\n        this.formReady.then(() => {\n            this.evaluate(this.form.controller, {\n                components: this.components,\n                instance: this,\n            });\n        });\n    }\n    /**\n     *\n     */\n    teardown() {\n        this.emit(\"formDelete\", this.id);\n        delete Formio_1.Formio.forms[this.id];\n        delete this.executeShortcuts;\n        delete this.triggerSaveDraft;\n        super.teardown();\n    }\n    destroy(all = false) {\n        this.off(\"submitButton\");\n        this.off(\"checkValidity\");\n        this.off(\"requestUrl\");\n        this.off(\"resetForm\");\n        this.off(\"deleteSubmission\");\n        this.off(\"refreshData\");\n        return super.destroy(all);\n    }\n    build(element) {\n        if (element || this.element) {\n            return this.ready.then(() => {\n                element = element || this.element;\n                super.build(element);\n            });\n        }\n        return this.ready;\n    }\n    getClassName() {\n        let classes = \"formio-form\";\n        if (this.options.readOnly) {\n            classes += \" formio-read-only\";\n        }\n        return classes;\n    }\n    render() {\n        return super.render(this.renderTemplate(\"webform\", {\n            classes: this.getClassName(),\n            children: this.renderComponents(),\n        }), this.builderMode ? \"builder\" : \"form\", true);\n    }\n    redraw() {\n        // Don't bother if we have not built yet.\n        if (!this.element) {\n            return Promise.resolve();\n        }\n        this.clear();\n        this.setContent(this.element, this.render());\n        return this.attach(this.element);\n    }\n    attach(element) {\n        this.setElement(element);\n        this.loadRefs(element, { webform: \"single\" });\n        const childPromise = this.attachComponents(this.refs.webform);\n        this.addEventListener(document, \"keydown\", this.executeShortcuts);\n        this.currentForm = this;\n        this.hook(\"attachWebform\", element, this);\n        return childPromise.then(() => {\n            this.emit(\"render\", this.element);\n            return this.setValue(this._submission, {\n                noUpdateEvent: true,\n            });\n        });\n    }\n    hasRequiredFields() {\n        let result = false;\n        (0, utils_1.eachComponent)(this.form.components, (component) => {\n            if (component.validate.required) {\n                result = true;\n                return true;\n            }\n        }, true);\n        return result;\n    }\n    resetValue() {\n        lodash_1.default.each(this.getComponents(), (comp) => comp.resetValue());\n        this.setPristine(true);\n        this.onChange({ resetValue: true });\n    }\n    /**\n     * Sets a new alert to display in the error dialog of the form.\n     * @param {string} type - The type of alert to display. \"danger\", \"success\", \"warning\", etc.\n     * @param {string} message - The message to show in the alert.\n     * @param {object} options - The options for the alert.\n     */\n    setAlert(type, message, options) {\n        if (!type && this.submitted) {\n            if (this.alert) {\n                if (this.refs.errorRef && this.refs.errorRef.length) {\n                    this.refs.errorRef.forEach((el) => {\n                        this.removeEventListener(el, \"click\");\n                        this.removeEventListener(el, \"keypress\");\n                    });\n                }\n                this.removeChild(this.alert);\n                this.alert = null;\n            }\n            return;\n        }\n        if (this.options.noAlerts) {\n            if (!message) {\n                this.emit(\"error\", false);\n            }\n            return;\n        }\n        if (this.alert) {\n            try {\n                if (this.refs.errorRef && this.refs.errorRef.length) {\n                    this.refs.errorRef.forEach((el) => {\n                        this.removeEventListener(el, \"click\");\n                        this.removeEventListener(el, \"keypress\");\n                    });\n                }\n                this.removeChild(this.alert);\n                this.alert = null;\n            }\n            catch (err) {\n                // ignore\n            }\n        }\n        if (message) {\n            const attrs = {\n                class: (options && options.classes) || `alert alert-${type}`,\n                id: `error-list-${this.id}`,\n            };\n            const templateOptions = {\n                message: message instanceof HTMLElement ? message.outerHTML : message,\n                attrs: attrs,\n                type,\n            };\n            this.alert = (0, utils_1.convertStringToHTMLElement)(this.renderTemplate(\"alert\", templateOptions), `#${attrs.id}`);\n        }\n        if (!this.alert) {\n            return;\n        }\n        this.loadRefs(this.alert, { errorRef: \"multiple\" });\n        if (this.refs.errorRef && this.refs.errorRef.length) {\n            this.refs.errorRef.forEach((el) => {\n                this.addEventListener(el, \"click\", (e) => {\n                    const key = e.currentTarget.dataset.componentKey;\n                    this.focusOnComponent(key);\n                });\n                this.addEventListener(el, \"keydown\", (e) => {\n                    if (e.keyCode === 13) {\n                        e.preventDefault();\n                        const key = e.currentTarget.dataset.componentKey;\n                        this.focusOnComponent(key);\n                    }\n                });\n            });\n        }\n        this.prepend(this.alert);\n    }\n    /**\n     * Focus on selected component.\n     * @param {string} key - The key of selected component.\n     */\n    focusOnComponent(key) {\n        if (key) {\n            const component = this.getComponent(key);\n            if (component) {\n                component.focus();\n            }\n        }\n    }\n    /**\n     * Show the errors of this form within the alert dialog.\n     * @param {object} error - An optional additional error to display along with the component errors.\n     * @returns {*}\n     */\n    /* eslint-disable no-unused-vars */\n    /**\n     *\n     * @param {Array} errors - An array of errors to display.\n     * @param {boolean} triggerEvent - Whether or not to trigger the error event.\n     * @returns {void|Array} - The errors that were set.\n     */\n    showErrors(errors, triggerEvent) {\n        this.loading = false;\n        if (!Array.isArray(errors)) {\n            errors = [errors];\n        }\n        if (Array.isArray(this.errors)) {\n            errors = lodash_1.default.union(errors, this.errors);\n        }\n        errors = errors.concat(this.customErrors).filter((err) => !!err);\n        if (!errors.length) {\n            this.setAlert(false);\n            return;\n        }\n        // Mark any components as invalid if in a custom message.\n        const componentErrors = {};\n        errors.forEach((err) => {\n            var _a, _b;\n            const path = err.path || ((_a = err.context) === null || _a === void 0 ? void 0 : _a.path) || ((_b = err.component) === null || _b === void 0 ? void 0 : _b.key);\n            if (!componentErrors[path]) {\n                componentErrors[path] = [];\n            }\n            componentErrors[path].push(err);\n        });\n        // Iterate through all of our component errors and apply them to the components.\n        for (let path in componentErrors) {\n            const component = this.getComponent(path);\n            const errors = componentErrors[path];\n            if (component) {\n                component.serverErrors = errors.filter((err) => err.fromServer);\n                component.setCustomValidity(errors, true);\n            }\n        }\n        const displayedErrors = [];\n        if (errors.length) {\n            errors = lodash_1.default.uniqBy(errors, (error) => { var _a, _b; return [error.message, (_a = error.component) === null || _a === void 0 ? void 0 : _a.id, (_b = error.context) === null || _b === void 0 ? void 0 : _b.path].join(); });\n            const createListItem = (message, index) => {\n                var _a, _b, _c;\n                const err = errors[index];\n                const messageFromIndex = !lodash_1.default.isUndefined(index) && errors && errors[index];\n                const keyOrPath = (messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.formattedKeyOrPath) ||\n                    (messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.path) ||\n                    ((_a = messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.context) === null || _a === void 0 ? void 0 : _a.path) ||\n                    (((_b = err.context) === null || _b === void 0 ? void 0 : _b.component) && ((_c = err.context) === null || _c === void 0 ? void 0 : _c.component.key)) ||\n                    (err.component && err.component.key) ||\n                    (err.fromServer && err.path);\n                const formattedKeyOrPath = keyOrPath ? (0, utils_1.getStringFromComponentPath)(keyOrPath) : \"\";\n                if (typeof err !== \"string\" && !err.formattedKeyOrPath) {\n                    err.formattedKeyOrPath = formattedKeyOrPath;\n                }\n                return {\n                    message: (0, utils_1.unescapeHTML)(message),\n                    keyOrPath: formattedKeyOrPath,\n                };\n            };\n            errors.forEach(({ message, context, fromServer, component }, index) => {\n                const text = !(component === null || component === void 0 ? void 0 : component.label) || (context === null || context === void 0 ? void 0 : context.hasLabel) || fromServer\n                    ? this.t(\"alertMessage\", { message: this.t(message) })\n                    : this.t(\"alertMessageWithLabel\", {\n                        label: this.t(component === null || component === void 0 ? void 0 : component.label),\n                        message: this.t(message),\n                    });\n                displayedErrors.push(createListItem(text, index));\n            });\n        }\n        const errorsList = this.renderTemplate(\"errorsList\", { errors: displayedErrors });\n        this.root.setAlert(\"danger\", errorsList);\n        if (triggerEvent) {\n            this.emit(\"error\", errors);\n        }\n        return errors;\n    }\n    /* eslint-enable no-unused-vars */\n    /**\n     * Called when the submission has completed, or if the submission needs to be sent to an external library.\n     * @param {object} submission - The submission object.\n     * @param {boolean} saved - Whether or not this submission was saved to the server.\n     * @returns {object} - The submission object.\n     */\n    onSubmit(submission, saved) {\n        var _a;\n        this.loading = false;\n        this.submitting = false;\n        this.setPristine(true);\n        // We want to return the submitted submission and setValue will mutate the submission so cloneDeep it here.\n        this.setValue((0, utils_1.fastCloneDeep)(submission), {\n            noValidate: true,\n            noCheck: true,\n        });\n        this.setAlert(\"success\", `<p>${this.t(\"complete\")}</p>`);\n        // Cancel triggered saveDraft to prevent overriding the submitted state\n        if (this.draftEnabled && ((_a = this.triggerSaveDraft) === null || _a === void 0 ? void 0 : _a.cancel)) {\n            this.triggerSaveDraft.cancel();\n        }\n        this.emit(\"submit\", submission, saved);\n        if (saved) {\n            this.emit(\"submitDone\", submission);\n        }\n        return submission;\n    }\n    normalizeError(error) {\n        if (error) {\n            if (typeof error === \"object\" && \"details\" in error) {\n                error = error.details;\n            }\n            if (typeof error === \"string\") {\n                error = { message: error };\n            }\n        }\n        return error;\n    }\n    /**\n     * Called when an error occurs during the submission.\n     * @param {object} error - The error that occured.\n     * @returns {Array} errors - All errors.\n     */\n    onSubmissionError(error) {\n        error = this.normalizeError(error);\n        this.submitting = false;\n        this.setPristine(false);\n        this.emit(\"submitError\", error || this.errors);\n        // Allow for silent cancellations (no error message, no submit button error state)\n        if (error && error.silent) {\n            this.emit(\"change\", { isValid: true }, { silent: true });\n            return false;\n        }\n        const errors = this.showErrors(error, true);\n        if (this.root && this.root.alert) {\n            this.scrollIntoView(this.root.alert);\n        }\n        return errors;\n    }\n    /**\n     * Trigger the change event for this form.\n     * @param {any} flags - The flags to set on this change event.\n     * @param {any} changed - The changed object which reflects the changes in the form.\n     * @param {boolean} modified - Whether or not the form has been modified.\n     * @param {any} changes - The changes that have occured in the form.\n     */\n    onChange(flags, changed, modified, changes) {\n        var _a;\n        flags = flags || {};\n        let isChangeEventEmitted = false;\n        if (((_a = this.parent) === null || _a === void 0 ? void 0 : _a.subForm) === this) {\n            super.onChange(Object.assign(Object.assign({}, flags), { modified }), false);\n        }\n        else {\n            super.onChange(flags, true);\n        }\n        const value = lodash_1.default.clone(this.submission);\n        flags.changed = value.changed = changed;\n        flags.changes = changes;\n        if (modified && this.pristine) {\n            this.pristine = false;\n        }\n        this.checkData(value.data, flags);\n        const shouldValidate = !flags.noValidate ||\n            flags.fromIframe ||\n            (flags.fromSubmission && this.rootPristine && this.pristine && flags.changed);\n        const errors = shouldValidate\n            ? this.validate(value.data, Object.assign(Object.assign({}, flags), { noValidate: false, process: 'change' }))\n            : [];\n        value.isValid = (errors || []).filter(err => !err.fromServer).length === 0;\n        this.loading = false;\n        if (this.submitted) {\n            // show server errors while they are not cleaned/fixed\n            const nonComponentServerErrors = lodash_1.default.filter(this.serverErrors || [], (err) => !err.component && !err.path);\n            this.showErrors(nonComponentServerErrors.length ? nonComponentServerErrors : errors);\n        }\n        // See if we need to save the draft of the form.\n        if (modified && this.options.saveDraft) {\n            this.triggerSaveDraft();\n        }\n        if (!flags || !flags.noEmit) {\n            this.emit(\"change\", value, flags, modified);\n            isChangeEventEmitted = true;\n        }\n        // The form is initialized after the first change event occurs.\n        if (isChangeEventEmitted && !this.initialized) {\n            this.emit(\"initialized\");\n            this.initialized = true;\n        }\n    }\n    /**\n     * Send a delete request to the server.\n     * @returns {Promise} - The promise that is triggered when the delete is complete.\n     */\n    deleteSubmission() {\n        return this.formio.deleteSubmission().then(() => {\n            this.emit(\"submissionDeleted\", this.submission);\n            this.resetValue();\n        });\n    }\n    /**\n     * Cancels the submission.\n     * @param {boolean} noconfirm - Whether or not to confirm the cancellation.\n     * @alias reset\n     * @returns {boolean} - TRUE means the submission was cancelled, FALSE otherwise.\n     */\n    cancel(noconfirm) {\n        const shouldReset = this.hook(\"beforeCancel\", true);\n        if (shouldReset && (noconfirm || confirm(this.t(\"confirmCancel\")))) {\n            this.resetValue();\n            return true;\n        }\n        else {\n            this.emit(\"cancelSubmit\");\n            return false;\n        }\n    }\n    setMetadata(submission) {\n        // Add in metadata about client submitting the form\n        submission.metadata = submission.metadata || {};\n        lodash_1.default.defaults(submission.metadata, {\n            timezone: lodash_1.default.get(this, \"_submission.metadata.timezone\", (0, utils_1.currentTimezone)()),\n            offset: parseInt(lodash_1.default.get(this, \"_submission.metadata.offset\", (0, moment_1.default)().utcOffset()), 10),\n            origin: document.location.origin,\n            referrer: document.referrer,\n            browserName: navigator.appName,\n            userAgent: navigator.userAgent,\n            pathName: window.location.pathname,\n            onLine: navigator.onLine,\n        });\n    }\n    submitForm(options = {}, local = false) {\n        this.clearServerErrors();\n        return new Promise((resolve, reject) => {\n            // Read-only forms should never submit.\n            if (this.options.readOnly) {\n                return resolve({\n                    submission: this.submission,\n                    saved: false,\n                });\n            }\n            const submission = (0, utils_1.fastCloneDeep)(this.submission || {});\n            this.setMetadata(submission);\n            submission.state = options.state || submission.state || \"submitted\";\n            const isDraft = submission.state === \"draft\";\n            this.hook(\"beforeSubmit\", Object.assign(Object.assign({}, submission), { component: options.component }), (err, data) => {\n                var _a;\n                if (err) {\n                    return reject(err);\n                }\n                submission._vnote = data && data._vnote ? data._vnote : \"\";\n                try {\n                    if (!isDraft && !options.noValidate) {\n                        if (!submission.data) {\n                            return reject(\"Invalid Submission\");\n                        }\n                        const errors = this.validate(submission.data, {\n                            local,\n                            dirty: true,\n                            silentCheck: false,\n                            process: \"submit\",\n                        });\n                        if (errors.length ||\n                            ((_a = options.beforeSubmitResults) === null || _a === void 0 ? void 0 : _a.some((result) => result.status === \"rejected\"))) {\n                            return reject(errors);\n                        }\n                    }\n                }\n                catch (err) {\n                    console.error(err);\n                }\n                this.everyComponent((comp) => {\n                    var _a, _b;\n                    if (submission._vnote && comp.type === \"form\" && comp.component.reference) {\n                        lodash_1.default.get(submission.data, local ? (_a = comp.paths) === null || _a === void 0 ? void 0 : _a.localDataPath : comp.path, {})._vnote = submission._vnote;\n                    }\n                    const { persistent } = comp.component;\n                    if (persistent === \"client-only\") {\n                        lodash_1.default.unset(submission.data, local ? (_b = comp.paths) === null || _b === void 0 ? void 0 : _b.localDataPath : comp.path);\n                    }\n                });\n                this.hook(\"customValidation\", Object.assign(Object.assign({}, submission), { component: options.component }), (err) => {\n                    if (err) {\n                        // If string is returned, cast to object.\n                        if (typeof err === \"string\") {\n                            err = {\n                                message: err,\n                            };\n                        }\n                        // Ensure err is an array.\n                        err = Array.isArray(err) ? err : [err];\n                        return reject(err);\n                    }\n                    this.loading = true;\n                    // Use the form action to submit the form if available.\n                    if (this._form && this._form.action) {\n                        const method = submission.data._id &&\n                            this._form.action.includes(submission.data._id)\n                            ? \"PUT\"\n                            : \"POST\";\n                        return Formio_1.Formio.makeStaticRequest(this._form.action, method, submission, this.formio ? this.formio.options : {})\n                            .then((result) => resolve({\n                            submission: result,\n                            saved: true,\n                        }))\n                            .catch((error) => {\n                            this.setServerErrors(error);\n                            return reject(error);\n                        });\n                    }\n                    const submitFormio = this.formio;\n                    if (this.nosubmit || !submitFormio) {\n                        return resolve({\n                            submission,\n                            saved: false,\n                        });\n                    }\n                    // If this is an actionUrl, then make sure to save the action and not the submission.\n                    const submitMethod = submitFormio.actionUrl\n                        ? \"saveAction\"\n                        : \"saveSubmission\";\n                    submitFormio[submitMethod](submission)\n                        .then((result) => resolve({\n                        submission: result,\n                        saved: true,\n                    }))\n                        .catch((error) => {\n                        this.setServerErrors(error);\n                        return reject(error);\n                    });\n                });\n            });\n        });\n    }\n    setServerErrors(error) {\n        if (error.details) {\n            this.serverErrors = error.details\n                .filter((err) => (err.level ? err.level === \"error\" : err))\n                .map((err) => {\n                err.fromServer = true;\n                return err;\n            });\n        }\n        else if (typeof error === \"string\") {\n            this.serverErrors = [{ fromServer: true, level: \"error\", message: error }];\n        }\n    }\n    executeSubmit(options) {\n        this.submitted = true;\n        this.submitting = true;\n        return this.submitForm(options)\n            .then(({ submission, saved }) => this.onSubmit(submission, saved))\n            .then((results) => {\n            this.submissionInProcess = false;\n            return results;\n        })\n            .catch((err) => {\n            this.submissionInProcess = false;\n            return Promise.reject(this.onSubmissionError(err));\n        });\n    }\n    clearServerErrors() {\n        var _a;\n        (_a = this.serverErrors) === null || _a === void 0 ? void 0 : _a.forEach((error) => {\n            if (error.path) {\n                const pathArray = (0, utils_1.getArrayFromComponentPath)(error.path);\n                const component = this.getComponent(pathArray, lodash_1.default.identity, error.formattedKeyOrPath);\n                if (component) {\n                    component.serverErrors = [];\n                }\n            }\n        });\n        this.serverErrors = [];\n    }\n    /**\n     * Submits the form.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.src = 'https://examples.form.io/example';\n     * form.submission = {data: {\n     *   firstName: 'Joe',\n     *   lastName: 'Smith',\n     *   email: 'joe@example.com'\n     * }};\n     * form.submit().then((submission) => {\n     *   console.log(submission);\n     * });\n     * @param {boolean} before - If this submission occured from the before handlers.\n     * @param {any} options - The options to use when submitting this form.\n     * @returns {Promise} - A promise when the form is done submitting.\n     */\n    submit(before = false, options = {}) {\n        this.submissionInProcess = true;\n        if (!before) {\n            return this.beforeSubmit(options).then(() => this.executeSubmit(options));\n        }\n        else {\n            return this.executeSubmit(options);\n        }\n    }\n    submitUrl(URL, headers) {\n        if (!URL) {\n            return console.warn(\"Missing URL argument\");\n        }\n        const submission = this.submission || {};\n        const API_URL = URL;\n        const settings = {\n            method: \"POST\",\n            headers: {},\n        };\n        if (headers && headers.length > 0) {\n            headers.map((e) => {\n                if (e.header !== \"\" && e.value !== \"\") {\n                    settings.headers[e.header] = this.interpolate(e.value, submission);\n                }\n            });\n        }\n        if (API_URL && settings) {\n            Formio_1.Formio.makeStaticRequest(API_URL, settings.method, submission, {\n                headers: settings.headers,\n            })\n                .then(() => {\n                this.emit(\"requestDone\");\n                this.setAlert(\"success\", \"<p> Success </p>\");\n            })\n                .catch((e) => {\n                const message = `${e.statusText ? e.statusText : \"\"} ${e.status ? e.status : e}`;\n                this.emit(\"error\", message);\n                console.error(message);\n                this.setAlert(\"danger\", `<p> ${message} </p>`);\n                return Promise.reject(this.onSubmissionError(e));\n            });\n        }\n        else {\n            this.emit(\"error\", \"You should add a URL to this button.\");\n            this.setAlert(\"warning\", \"You should add a URL to this button.\");\n            return console.warn(\"You should add a URL to this button.\");\n        }\n    }\n    triggerCaptcha(components = null) {\n        if (!this || !this.components) {\n            return;\n        }\n        const captchaComponent = [];\n        (0, utils_1.eachComponent)(components || this.components, (component) => {\n            if (/^(re)?captcha$/.test(component.type) && component.component.eventType === 'formLoad') {\n                captchaComponent.push(component);\n            }\n        }, true);\n        if (captchaComponent.length > 0) {\n            if (captchaComponent[0].component.provider === 'google' && components) {\n                return;\n            }\n            captchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);\n        }\n    }\n    set nosubmit(value) {\n        this._nosubmit = !!value;\n        this.emit(\"nosubmit\", this._nosubmit);\n    }\n    get nosubmit() {\n        return this._nosubmit || false;\n    }\n    get conditions() {\n        var _a, _b;\n        return (_b = (_a = this.schema.settings) === null || _a === void 0 ? void 0 : _a.conditions) !== null && _b !== void 0 ? _b : [];\n    }\n    get variables() {\n        var _a, _b;\n        return (_b = (_a = this.schema.settings) === null || _a === void 0 ? void 0 : _a.variables) !== null && _b !== void 0 ? _b : [];\n    }\n}\nexports[\"default\"] = Webform;\nWebform.setBaseUrl = Formio_1.Formio.setBaseUrl;\nWebform.setApiUrl = Formio_1.Formio.setApiUrl;\nWebform.setAppUrl = Formio_1.Formio.setAppUrl;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Webform.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst compare_versions_1 = __webpack_require__(/*! compare-versions */ \"./node_modules/compare-versions/lib/esm/index.js\");\nconst EventEmitter_1 = __importDefault(__webpack_require__(/*! ./EventEmitter */ \"./lib/cjs/EventEmitter.js\"));\nconst i18n_1 = __importDefault(__webpack_require__(/*! ./i18n */ \"./lib/cjs/i18n.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst Components_1 = __importDefault(__webpack_require__(/*! ./components/Components */ \"./lib/cjs/components/Components.js\"));\nconst NestedDataComponent_1 = __importDefault(__webpack_require__(/*! ./components/_classes/nesteddata/NestedDataComponent */ \"./lib/cjs/components/_classes/nesteddata/NestedDataComponent.js\"));\nconst utils_1 = __webpack_require__(/*! ./utils */ \"./lib/cjs/utils/index.js\");\n// We need this here because dragula pulls in CustomEvent class that requires global to exist.\nif (typeof window !== 'undefined' && typeof window.global === 'undefined') {\n    window.global = window;\n}\nconst dragula_1 = __importDefault(__webpack_require__(/*! dragula */ \"./node_modules/dragula/dragula.js\"));\n// Initialize the available forms.\nFormio_1.Formio.forms = {};\n// Allow people to register components.\nFormio_1.Formio.registerComponent = Components_1.default.setComponent;\n/**\n *\n * @param {any} icons  - The icons to use.\n * @returns {any} - The icon set.\n */\nfunction getIconSet(icons) {\n    if (icons === \"fontawesome\") {\n        return \"fa\";\n    }\n    return icons || \"\";\n}\n/**\n *\n * @param {any} options - The options to get.\n * @returns {any} - The options.\n */\nfunction getOptions(options) {\n    options = lodash_1.default.defaults(options, {\n        submitOnEnter: false,\n        iconset: getIconSet(options && options.icons ? options.icons : Formio_1.Formio.icons),\n        i18next: null,\n        saveDraft: false,\n        alwaysDirty: false,\n        saveDraftThrottle: 5000,\n        display: \"form\",\n        cdnUrl: Formio_1.Formio.cdn.baseUrl,\n    });\n    if (!options.events) {\n        options.events = new EventEmitter_1.default();\n    }\n    return options;\n}\n/**\n * Represents a JSON value.\n * @typedef {(string | number | boolean | null | JSONArray | JSONObject)} JSON\n */\n/**\n * Represents a JSON array.\n * @typedef {Array<JSON>} JSONArray\n */\n/**\n * Represents a JSON object.\n * @typedef {{[key: string]: JSON}} JSONObject\n */\n/**\n * @typedef {object} FormioHooks\n * @property {Function} [beforeSubmit] - A function that is called before the form is submitted.\n * @property {Function} [beforeCancel] - A function that is called before the form is canceled.\n * @property {Function} [beforeNext] - A function that is called before moving to the next page in a multi-page form.\n * @property {Function} [beforePrev] - A function that is called before moving to the previous page in a multi-page form.\n * @property {Function} [attachComponent] - A function that is called when a component is attached to the form.\n * @property {Function} [setDataValue] - A function that is called when setting the value of a data component.\n * @property {Function} [addComponents] - A function that is called when adding multiple components to the form.\n * @property {Function} [addComponent] - A function that is called when adding a single component to the form.\n * @property {Function} [customValidation] - A function that is called for custom validation of the form.\n * @property {Function} [attachWebform] - A function that is called when attaching a webform to the form.\n */\n/**\n * @typedef {object} SanitizeConfig\n * @property {string[]} [addAttr] - The attributes to add.\n * @property {string[]} [addTags] - The tags to add.\n * @property {string[]} [allowedAttrs] - The allowed attributes.\n * @property {string[]} [allowedTags] - The allowed tags.\n * @property {string[]} [allowedUriRegex] - The allowed URI regex.\n * @property {string[]} [addUriSafeAttr] - The URI safe attributes.\n */\n/**\n * @typedef {object} ButtonSettings\n * @property {boolean} [showPrevious] - Show the \"Previous\" button.\n * @property {boolean} [showNext] - Show the \"Next\" button.\n * @property {boolean} [showCancel] - Show the \"Cancel\" button.\n * @property {boolean} [showSubmit] - Show the \"Submit\" button.\n */\n/**\n * @typedef {object} FormOptions\n * @property {boolean} [saveDraft] - Enable the save draft feature.\n * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.\n * @property {boolean} [readOnly] - Set this form to readOnly.\n * @property {boolean} [noAlerts] - Disable the alerts dialog.\n * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.\n * @property {string} [template] - Custom logic for creation of elements.\n * @property {boolean} [noDefaults] - Exclude default values from the settings.\n * @property {any} [fileService] - The file service for this form.\n * @property {EventEmitter} [events] - The EventEmitter for this form.\n * @property {string} [language] - The language to render this form in.\n * @property {{[key: string]: string}} [i18next] - The i18next configuration for this form.\n * @property {boolean} [viewAsHtml] - View the form as raw HTML.\n * @property {'form' | 'html' | 'flat' | 'builder' | 'pdf'} [renderMode] - The render mode for this form.\n * @property {boolean} [highlightErrors] - Highlight any errors on the form.\n * @property {string} [componentErrorClass] - The error class for components.\n * @property {any} [templates] - The templates for this form.\n * @property {string} [iconset] - The iconset for this form.\n * @property {import('@formio/core').Component[]} [components] - The components for this form.\n * @property {{[key: string]: boolean}} [disabled] - Disabled components for this form.\n * @property {boolean} [showHiddenFields] - Show hidden fields.\n * @property {{[key: string]: boolean}} [hide] - Hidden components for this form.\n * @property {{[key: string]: boolean}} [show] - Components to show for this form.\n * @property {Formio} [formio] - The Formio instance for this form.\n * @property {string} [decimalSeparator] - The decimal separator for this form.\n * @property {string} [thousandsSeparator] - The thousands separator for this form.\n * @property {FormioHooks} [hooks] - The hooks for this form.\n * @property {boolean} [alwaysDirty] - Always be dirty.\n * @property {boolean} [skipDraftRestore] - Skip restoring a draft.\n * @property {'form' | 'wizard' | 'pdf'} [display] - The display for this form.\n * @property {string} [cdnUrl] - The CDN url for this form.\n * @property {boolean} [flatten] - Flatten the form.\n * @property {boolean} [sanitize] - Sanitize the form.\n * @property {SanitizeConfig} [sanitizeConfig] - The sanitize configuration for this form.\n * @property {ButtonSettings} [buttonSettings] - The button settings for this form.\n * @property {object} [breadcrumbSettings] - The breadcrumb settings for this form.\n * @property {boolean} [allowPrevious] - Allow the previous button (for Wizard forms).\n * @property {string[]} [wizardButtonOrder] - The order of the buttons (for Wizard forms).\n * @property {boolean} [showCheckboxBackground] - Show the checkbox background.\n * @property {boolean} [inputsOnly] - Only show inputs in the form and no labels.\n * @property {boolean} [building] - If we are in the process of building the form.\n * @property {number} [zoom] - The zoom for PDF forms.\n */\nclass Webform extends NestedDataComponent_1.default {\n    /**\n     * Creates a new Form instance.\n     * @param {HTMLElement | object | import('Form').FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.\n     * @param {import('Form').FormOptions} [options] - The options to create a new form instance.\n     */\n    constructor(elementOrOptions, options = undefined) {\n        let element, formOptions;\n        if (elementOrOptions instanceof HTMLElement || options) {\n            element = elementOrOptions;\n            formOptions = options || {};\n        }\n        else {\n            formOptions = elementOrOptions || {};\n        }\n        super(null, getOptions(formOptions));\n        this.executeShortcuts = (event) => {\n            const { target } = event;\n            if (!this.keyboardCatchableElement(target)) {\n                return;\n            }\n            const ctrl = event.ctrlKey || event.metaKey;\n            const keyCode = event.keyCode;\n            let char = \"\";\n            if (65 <= keyCode && keyCode <= 90) {\n                char = String.fromCharCode(keyCode);\n            }\n            else if (keyCode === 13) {\n                char = \"Enter\";\n            }\n            else if (keyCode === 27) {\n                char = \"Esc\";\n            }\n            lodash_1.default.each(this.shortcuts, (shortcut) => {\n                if (shortcut.ctrl && !ctrl) {\n                    return;\n                }\n                if (shortcut.shortcut === char) {\n                    shortcut.element.click();\n                    event.preventDefault();\n                }\n            });\n        };\n        this.setElement(element);\n        // Keep track of all available forms globally.\n        Formio_1.Formio.forms[this.id] = this;\n        // Set the base url.\n        if (this.options.baseUrl) {\n            Formio_1.Formio.setBaseUrl(this.options.baseUrl);\n        }\n        /**\n         * The type of this element.\n         * @type {string}\n         */\n        this.type = \"form\";\n        this._src = \"\";\n        this._loading = false;\n        this._form = {};\n        this.draftEnabled = false;\n        this.savingDraft = false;\n        if (this.options.saveDraftThrottle) {\n            this.triggerSaveDraft = lodash_1.default.throttle(this.saveDraft.bind(this), this.options.saveDraftThrottle);\n        }\n        else {\n            this.triggerSaveDraft = this.saveDraft.bind(this);\n        }\n        /**\n         * Determines if this form should submit the API on submit.\n         * @type {boolean}\n         */\n        this.nosubmit = false;\n        /**\n         * Determines if the form has tried to be submitted, error or not.\n         * @type {boolean}\n         */\n        this.submitted = false;\n        /**\n         * Determines if the form is being submitted at the moment.\n         * @type {boolean}\n         */\n        this.submitting = false;\n        /**\n         * The Formio instance for this form.\n         * @type {Formio}\n         */\n        this.formio = null;\n        /**\n         * The loader HTML element.\n         * @type {HTMLElement}\n         */\n        this.loader = null;\n        /**\n         * The alert HTML element\n         * @type {HTMLElement}\n         */\n        this.alert = null;\n        /**\n         * Promise that is triggered when the submission is done loading.\n         * @type {Promise}\n         */\n        this.onSubmission = null;\n        /**\n         * Determines if this submission is explicitly set.\n         * @type {boolean}\n         */\n        this.submissionSet = false;\n        /**\n         * Promise that executes when the form is ready and rendered.\n         * @type {Promise}\n         * @example\n         * import Webform from '@formio/js/Webform';\n         * let form = new Webform(document.getElementById('formio'));\n         * form.formReady.then(() => {\n         *   console.log('The form is ready!');\n         * });\n         * form.src = 'https://examples.form.io/example';\n         */\n        this.formReady = new Promise((resolve, reject) => {\n            /**\n             * Called when the formReady state of this form has been resolved.\n             * @type {Function}\n             */\n            this.formReadyResolve = resolve;\n            /**\n             * Called when this form could not load and is rejected.\n             * @type {Function}\n             */\n            this.formReadyReject = reject;\n        });\n        /**\n         * Promise that executes when the submission is ready and rendered.\n         * @type {Promise}\n         * @example\n         * import Webform from '@formio/js/Webform';\n         * let form = new Webform(document.getElementById('formio'));\n         * form.submissionReady.then(() => {\n         *   console.log('The submission is ready!');\n         * });\n         * form.src = 'https://examples.form.io/example/submission/234234234234234243';\n         */\n        this.submissionReady = new Promise((resolve, reject) => {\n            /**\n             * Called when the formReady state of this form has been resolved.\n             * @type {Function}\n             */\n            this.submissionReadyResolve = resolve;\n            /**\n             * Called when this form could not load and is rejected.\n             * @type {Function}\n             */\n            this.submissionReadyReject = reject;\n        });\n        this.shortcuts = [];\n        // Set language after everything is established.\n        this.language = this.i18next.language;\n        // See if we need to restore the draft from a user.\n        if (this.options.saveDraft) {\n            if (this.options.skipDraftRestore) {\n                this.draftEnabled = true;\n                this.savingDraft = false;\n            }\n            else {\n                this.formReady.then(() => {\n                    const user = Formio_1.Formio.getUser();\n                    // Only restore a draft if the submission isn't explicitly set.\n                    if (user && !this.submissionSet) {\n                        this.restoreDraft(user._id);\n                    }\n                });\n            }\n        }\n        this.component.clearOnHide = false;\n        // Ensure the root is set to this component.\n        this.root = this;\n        this.localRoot = this;\n        this.root.dragulaLib = dragula_1.default;\n    }\n    /* eslint-enable max-statements */\n    get language() {\n        return this.options.language;\n    }\n    get emptyValue() {\n        return null;\n    }\n    componentContext() {\n        return this._data;\n    }\n    /**\n     * Sets the language for this form.\n     * @param {string} lang - The language to use (e.g. 'en', 'sp', etc.)\n     */\n    set language(lang) {\n        if (!this.i18next) {\n            return;\n        }\n        this.options.language = lang;\n        if (this.i18next.language === lang) {\n            return;\n        }\n        this.i18next.changeLanguage(lang, (err) => {\n            if (err) {\n                return;\n            }\n            this.rebuild();\n            this.emit(\"languageChanged\");\n        });\n    }\n    get componentComponents() {\n        return this.form.components;\n    }\n    get shadowRoot() {\n        return this.options.shadowRoot;\n    }\n    /**\n     * Add a language for translations\n     * @param {string} code - The language code for the language being added.\n     * @param {object} lang - The language translations.\n     * @param {boolean} [active] - If this language should be set as the active language.\n     */\n    addLanguage(code, lang, active = false) {\n        if (this.i18next) {\n            var translations = lodash_1.default.assign((0, utils_1.fastCloneDeep)(i18n_1.default.resources.en.translation), lang);\n            this.i18next.addResourceBundle(code, \"translation\", translations, true, true);\n            if (active) {\n                this.language = code;\n            }\n        }\n    }\n    keyboardCatchableElement(element) {\n        if (element.nodeName === \"TEXTAREA\") {\n            return false;\n        }\n        if (element.nodeName === \"INPUT\") {\n            return [\"text\", \"email\", \"password\"].indexOf(element.type) === -1;\n        }\n        return true;\n    }\n    addShortcut(element, shortcut) {\n        if (!shortcut || !/^([A-Z]|Enter|Esc)$/i.test(shortcut)) {\n            return;\n        }\n        shortcut = lodash_1.default.capitalize(shortcut);\n        if (shortcut === \"Enter\" || shortcut === \"Esc\") {\n            // Restrict Enter and Esc only for buttons\n            if (element.tagName !== \"BUTTON\") {\n                return;\n            }\n            this.shortcuts.push({\n                shortcut,\n                element,\n            });\n        }\n        else {\n            this.shortcuts.push({\n                ctrl: true,\n                shortcut,\n                element,\n            });\n        }\n    }\n    removeShortcut(element, shortcut) {\n        if (!shortcut || !/^([A-Z]|Enter|Esc)$/i.test(shortcut)) {\n            return;\n        }\n        lodash_1.default.remove(this.shortcuts, {\n            shortcut,\n            element,\n        });\n    }\n    /**\n     * Get the embed source of the form.\n     * @returns {string} - The source of the form.\n     */\n    get src() {\n        return this._src;\n    }\n    /**\n     * Loads the submission if applicable.\n     * @returns {Promise} - The promise that is triggered when the submission is loaded.\n     */\n    loadSubmission() {\n        this.loadingSubmission = true;\n        if (this.formio.submissionId) {\n            this.onSubmission = this.formio\n                .loadSubmission()\n                .then((submission) => this.setSubmission(submission), (err) => this.submissionReadyReject(err))\n                .catch((err) => this.submissionReadyReject(err));\n        }\n        else {\n            this.submissionReadyResolve();\n        }\n        return this.submissionReady;\n    }\n    /**\n     * Set the src of the form renderer.\n     * @param {string} value - The source value to set.\n     * @param {any} options - The options to set.\n     * @returns {Promise} - The promise that is triggered when the form is set.\n     */\n    setSrc(value, options) {\n        if (this.setUrl(value, options)) {\n            this.nosubmit = false;\n            return this.formio\n                .loadForm({ params: { live: 1 } })\n                .then((form) => {\n                const setForm = this.setForm(form);\n                this.loadSubmission();\n                return setForm;\n            })\n                .catch((err) => {\n                console.warn(err);\n                this.formReadyReject(err);\n            });\n        }\n        return Promise.resolve();\n    }\n    /**\n     * Set the Form source, which is typically the Form.io embed URL.\n     * @param {string} value - The value of the form embed url.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.formReady.then(() => {\n     *   console.log('The form is formReady!');\n     * });\n     * form.src = 'https://examples.form.io/example';\n     */\n    set src(value) {\n        this.setSrc(value);\n    }\n    /**\n     * Get the embed source of the form.\n     * @returns {string} - returns the source of the form.\n     */\n    get url() {\n        return this._src;\n    }\n    /**\n     * Sets the url of the form renderer.\n     * @param {string} value - The value to set the url to.\n     * @param {any} options - The options to set.\n     * @returns {boolean} - TRUE means the url was set, FALSE otherwise.\n     */\n    setUrl(value, options) {\n        if (!value || typeof value !== \"string\" || value === this._src) {\n            return false;\n        }\n        this._src = value;\n        this.nosubmit = true;\n        this.formio = this.options.formio = new Formio_1.Formio(value, options);\n        if (this.type === \"form\") {\n            // Set the options source so this can be passed to other components.\n            this.options.src = value;\n        }\n        return true;\n    }\n    /**\n     * Set the form source but don't initialize the form and submission from the url.\n     * @param {string} value - The value of the form embed url.\n     */\n    set url(value) {\n        this.setUrl(value);\n    }\n    /**\n     * Called when both the form and submission have been loaded.\n     * @returns {Promise} - The promise to trigger when both form and submission have loaded.\n     */\n    get ready() {\n        return this.formReady.then(() => {\n            return super.ready.then(() => {\n                return this.loadingSubmission ? this.submissionReady : true;\n            });\n        });\n    }\n    /**\n     * Returns if this form is loading.\n     * @returns {boolean} - TRUE means the form is loading, FALSE otherwise.\n     */\n    get loading() {\n        return this._loading;\n    }\n    /**\n     * Set the loading state for this form, and also show the loader spinner.\n     * @param {boolean} loading - If this form should be \"loading\" or not.\n     */\n    set loading(loading) {\n        if (this._loading !== loading) {\n            this._loading = loading;\n            if (!this.loader && loading) {\n                this.loader = this.ce(\"div\", {\n                    class: \"loader-wrapper\",\n                });\n                const spinner = this.ce(\"div\", {\n                    class: \"loader text-center\",\n                });\n                this.loader.appendChild(spinner);\n            }\n            /* eslint-disable max-depth */\n            if (this.loader) {\n                try {\n                    if (loading) {\n                        this.prependTo(this.loader, this.wrapper);\n                    }\n                    else {\n                        this.removeChildFrom(this.loader, this.wrapper);\n                    }\n                }\n                catch (err) {\n                    // ingore\n                }\n            }\n            /* eslint-enable max-depth */\n        }\n    }\n    /**\n     * Sets the JSON schema for the form to be rendered.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.setForm({\n     *   components: [\n     *     {\n     *       type: 'textfield',\n     *       key: 'firstName',\n     *       label: 'First Name',\n     *       placeholder: 'Enter your first name.',\n     *       input: true\n     *     },\n     *     {\n     *       type: 'textfield',\n     *       key: 'lastName',\n     *       label: 'Last Name',\n     *       placeholder: 'Enter your last name',\n     *       input: true\n     *     },\n     *     {\n     *       type: 'button',\n     *       action: 'submit',\n     *       label: 'Submit',\n     *       theme: 'primary'\n     *     }\n     *   ]\n     * });\n     * @param {object} form - The JSON schema of the form @see https://examples.form.io/example for an example JSON schema.\n     * @param {any} flags - Any flags to apply when setting the form.\n     * @returns {Promise} - The promise that is triggered when the form is set.\n     */\n    setForm(form, flags = {}) {\n        var _a;\n        const isFormAlreadySet = this._form && ((_a = this._form.components) === null || _a === void 0 ? void 0 : _a.length);\n        try {\n            // Do not set the form again if it has been already set\n            if (isFormAlreadySet && JSON.stringify(this._form) === JSON.stringify(form)) {\n                this.formReadyResolve();\n                return Promise.resolve();\n            }\n            // Create the form.\n            this._form = (flags === null || flags === void 0 ? void 0 : flags.keepAsReference) ? form : lodash_1.default.cloneDeep(form);\n            if (this.onSetForm) {\n                this.onSetForm(lodash_1.default.cloneDeep(this._form), form);\n            }\n        }\n        catch (err) {\n            console.warn(err);\n            // If provided form is not a valid JSON object, do not set it too\n            this.formReadyReject(err);\n            return Promise.resolve();\n        }\n        // Allow the form to provide component overrides.\n        if (form && form.settings && form.settings.components) {\n            this.options.components = form.settings.components;\n        }\n        if (form && form.properties) {\n            this.options.properties = form.properties;\n        }\n        // Use the sanitize config from the form settings or the global sanitize config if it is not provided in the options\n        if (!this.options.sanitizeConfig && !this.builderMode) {\n            this.options.sanitizeConfig =\n                lodash_1.default.get(form, \"settings.sanitizeConfig\") ||\n                    lodash_1.default.get(form, \"globalSettings.sanitizeConfig\");\n        }\n        if (\"schema\" in form && (0, compare_versions_1.compareVersions)(form.schema, \"1.x\") > 0) {\n            this.ready.then(() => {\n                this.setAlert(\"alert alert-danger\", \"Form schema is for a newer version, please upgrade your renderer. Some functionality may not work.\");\n            });\n        }\n        // See if they pass a module, and evaluate it if so.\n        if (form && form.module) {\n            let formModule = null;\n            if (typeof form.module === \"string\") {\n                try {\n                    formModule = this.evaluate(`return ${form.module}`);\n                }\n                catch (err) {\n                    console.warn(err);\n                }\n            }\n            else {\n                formModule = form.module;\n            }\n            if (formModule) {\n                Formio_1.Formio.use(formModule);\n                // Since we got here after instantiation, we need to manually apply form options.\n                if (formModule.options && formModule.options.form) {\n                    this.options = Object.assign(this.options, formModule.options.form);\n                }\n            }\n        }\n        this.initialized = false;\n        const rebuild = this.rebuild() || Promise.resolve();\n        return rebuild.then(() => {\n            this.emit('formLoad', form);\n            if (!this.options.server) {\n                this.triggerCaptcha();\n            }\n            // Make sure to trigger onChange after a render event occurs to speed up form rendering.\n            setTimeout(() => {\n                this.onChange(flags);\n                this.formReadyResolve();\n            }, 0);\n            return this.formReady;\n        });\n    }\n    /**\n     * Gets the form object.\n     * @returns {object} - The form JSON schema.\n     */\n    get form() {\n        if (!this._form) {\n            this._form = {\n                components: [],\n            };\n        }\n        return this._form;\n    }\n    /**\n     * Sets the form value.\n     * @alias setForm\n     * @param {object} form - The form schema object.\n     */\n    set form(form) {\n        this.setForm(form);\n    }\n    /**\n     * Returns the submission object that was set within this form.\n     * @returns {object} - The submission object.\n     */\n    get submission() {\n        return this.getValue();\n    }\n    /**\n     * Sets the submission of a form.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.src = 'https://examples.form.io/example';\n     * form.submission = {data: {\n     *   firstName: 'Joe',\n     *   lastName: 'Smith',\n     *   email: 'joe@example.com'\n     * }};\n     * @param {object} submission - The Form.io submission object.\n     */\n    set submission(submission) {\n        this.setSubmission(submission);\n    }\n    /**\n     * Sets the submission value\n     * @param {object|null|undefined} submission - The submission to set.\n     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.\n     * @returns {void}\n     */\n    onSetSubmission(submission, flags = {}) {\n        this.submissionSet = true;\n        this.triggerChange(flags);\n        this.emit('beforeSetSubmission', submission);\n        this.setValue(submission, flags);\n    }\n    /**\n     * Sets a submission and returns the promise when it is ready.\n     * @param {any} submission - The submission to set.\n     * @param {any} flags - Any flags to apply when setting the submission.\n     * @returns {Promise} - The promise that is triggered when the submission is set.\n     */\n    setSubmission(submission, flags = {}) {\n        flags = Object.assign(Object.assign({}, flags), { fromSubmission: lodash_1.default.has(flags, \"fromSubmission\") ? flags.fromSubmission : true });\n        return (this.onSubmission = this.formReady\n            .then((resolveFlags) => {\n            if (resolveFlags) {\n                flags = Object.assign(Object.assign({}, flags), resolveFlags);\n            }\n            this.onSetSubmission(submission, flags);\n            return this.submissionReadyResolve(submission);\n        }, (err) => this.submissionReadyReject(err))\n            .catch((err) => this.submissionReadyReject(err)));\n    }\n    handleDraftError(errName, errDetails, restoreDraft) {\n        const errorMessage = lodash_1.default.trim(`${this.t(errName)} ${errDetails || \"\"}`);\n        console.warn(errorMessage);\n        this.emit(restoreDraft ? \"restoreDraftError\" : \"saveDraftError\", errDetails || errorMessage);\n    }\n    saveDraft() {\n        var _a;\n        if (!this.draftEnabled || ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.component.reference) === false) {\n            return;\n        }\n        if (!this.formio) {\n            this.handleDraftError(\"saveDraftInstanceError\");\n            return;\n        }\n        if (!Formio_1.Formio.getUser()) {\n            this.handleDraftError(\"saveDraftAuthError\");\n            return;\n        }\n        const draft = (0, utils_1.fastCloneDeep)(this.submission);\n        draft.state = \"draft\";\n        if (!this.savingDraft && !this.submitting) {\n            this.emit(\"saveDraftBegin\");\n            this.savingDraft = true;\n            this.formio\n                .saveSubmission(draft)\n                .then((sub) => {\n                // Set id to submission to avoid creating new draft submission\n                this.submission._id = sub._id;\n                this.savingDraft = false;\n                this.emit(\"saveDraft\", sub);\n            })\n                .catch((err) => {\n                this.savingDraft = false;\n                this.handleDraftError(\"saveDraftError\", err);\n            });\n        }\n    }\n    /**\n     * Restores a draft submission based on the user who is authenticated.\n     * @param {string} userId - The user id where we need to restore the draft from.\n     */\n    restoreDraft(userId) {\n        const formio = this.formio || this.options.formio;\n        if (!formio) {\n            this.handleDraftError(\"restoreDraftInstanceError\", null, true);\n            return;\n        }\n        this.savingDraft = true;\n        formio\n            .loadSubmissions({\n            params: {\n                state: 'draft',\n                owner: userId,\n                sort: '-created'\n            },\n        })\n            .then((submissions) => {\n            if (submissions.length > 0 && !this.options.skipDraftRestore) {\n                const draft = (0, utils_1.fastCloneDeep)(submissions[0]);\n                return this.setSubmission(draft).then(() => {\n                    this.draftEnabled = true;\n                    this.savingDraft = false;\n                    this.emit(\"restoreDraft\", draft);\n                });\n            }\n            // Enable drafts so that we can keep track of changes.\n            this.draftEnabled = true;\n            this.savingDraft = false;\n            this.emit(\"restoreDraft\", null);\n        })\n            .catch((err) => {\n            this.draftEnabled = true;\n            this.savingDraft = false;\n            this.handleDraftError(\"restoreDraftError\", err, true);\n        });\n    }\n    get schema() {\n        const schema = (0, utils_1.fastCloneDeep)(lodash_1.default.omit(this._form, [\"components\"]));\n        schema.components = [];\n        this.eachComponent((component) => schema.components.push(component.schema));\n        return schema;\n    }\n    mergeData(_this, _that) {\n        lodash_1.default.mergeWith(_this, _that, (thisValue, thatValue) => {\n            if (Array.isArray(thisValue) &&\n                Array.isArray(thatValue) &&\n                thisValue.length !== thatValue.length) {\n                return thatValue;\n            }\n        });\n    }\n    setValue(submission, flags = {}) {\n        if (!submission || !submission.data) {\n            submission = {\n                data: {},\n            };\n        }\n        // Metadata needs to be available before setValue\n        this._submission.metadata = submission.metadata ? lodash_1.default.cloneDeep(submission.metadata) : {};\n        this.editing = !!submission._id;\n        // Set the timezone in the options if available.\n        if (!this.options.submissionTimezone &&\n            submission.metadata &&\n            submission.metadata.timezone) {\n            this.options.submissionTimezone = submission.metadata.timezone;\n        }\n        const changed = super.setValue(submission.data, flags);\n        if (!flags.sanitize) {\n            this.mergeData(this.data, submission.data);\n        }\n        submission.data = this.data;\n        this._submission = submission;\n        return changed;\n    }\n    getValue() {\n        if (!this._submission) {\n            this._submission = {};\n        }\n        if (!this._submission.data) {\n            this._submission.data = {};\n        }\n        if (this.viewOnly) {\n            return this._submission;\n        }\n        const submission = this._submission;\n        submission.data = this.data;\n        return this._submission;\n    }\n    /**\n     * Build the form.\n     * @returns {Promise} - The promise that is triggered when the form is built.\n     */\n    init() {\n        if (this.options.submission) {\n            const submission = lodash_1.default.extend({}, this.options.submission);\n            this._submission = submission;\n            this._data = submission.data;\n        }\n        else {\n            this._submission = this._submission || { data: {} };\n        }\n        // Remove any existing components.\n        if (this.components && this.components.length) {\n            this.destroyComponents();\n            this.components = [];\n        }\n        if (this.component) {\n            this.component.components = this.form ? this.form.components : [];\n        }\n        else {\n            this.component = this.form;\n        }\n        this.component.type = \"form\";\n        this.component.input = false;\n        this.addComponents();\n        this.on(\"submitButton\", (options) => {\n            this.submit(false, options).catch((e) => {\n                options.instance.loading = false;\n                return e !== false && e !== undefined && console.log(e);\n            });\n        }, true);\n        this.on(\"checkValidity\", (data) => this.validate(data, { dirty: true, process: \"change\" }), true);\n        this.on(\"requestUrl\", (args) => this.submitUrl(args.url, args.headers), true);\n        this.on(\"resetForm\", () => this.resetValue(), true);\n        this.on(\"deleteSubmission\", () => this.deleteSubmission(), true);\n        this.on(\"refreshData\", () => this.updateValue(), true);\n        this.executeFormController();\n        return this.formReady;\n    }\n    executeFormController() {\n        // If no controller value or\n        // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)\n        if (!this.form ||\n            !this.form.controller ||\n            ((!this.visible || this.component.hidden) &&\n                this.component.clearOnHide &&\n                !this.rootPristine)) {\n            return false;\n        }\n        this.formReady.then(() => {\n            this.evaluate(this.form.controller, {\n                components: this.components,\n                instance: this,\n            });\n        });\n    }\n    /**\n     *\n     */\n    teardown() {\n        this.emit(\"formDelete\", this.id);\n        delete Formio_1.Formio.forms[this.id];\n        delete this.executeShortcuts;\n        delete this.triggerSaveDraft;\n        super.teardown();\n    }\n    destroy(all = false) {\n        this.off(\"submitButton\");\n        this.off(\"checkValidity\");\n        this.off(\"requestUrl\");\n        this.off(\"resetForm\");\n        this.off(\"deleteSubmission\");\n        this.off(\"refreshData\");\n        return super.destroy(all);\n    }\n    build(element) {\n        if (element || this.element) {\n            return this.ready.then(() => {\n                element = element || this.element;\n                super.build(element);\n            });\n        }\n        return this.ready;\n    }\n    getClassName() {\n        let classes = \"formio-form\";\n        if (this.options.readOnly) {\n            classes += \" formio-read-only\";\n        }\n        return classes;\n    }\n    render() {\n        return super.render(this.renderTemplate(\"webform\", {\n            classes: this.getClassName(),\n            children: this.renderComponents(),\n        }), this.builderMode ? \"builder\" : \"form\", true);\n    }\n    redraw() {\n        // Don't bother if we have not built yet.\n        if (!this.element) {\n            return Promise.resolve();\n        }\n        this.clear();\n        this.setContent(this.element, this.render());\n        return this.attach(this.element);\n    }\n    attach(element) {\n        this.setElement(element);\n        this.loadRefs(element, { webform: \"single\" });\n        const childPromise = this.attachComponents(this.refs.webform);\n        this.addEventListener(document, \"keydown\", this.executeShortcuts);\n        this.currentForm = this;\n        this.hook(\"attachWebform\", element, this);\n        return childPromise.then(() => {\n            this.emit(\"render\", this.element);\n            return this.setValue(this._submission, {\n                noUpdateEvent: true,\n            });\n        });\n    }\n    hasRequiredFields() {\n        let result = false;\n        (0, utils_1.eachComponent)(this.form.components, (component) => {\n            if (component.validate.required) {\n                result = true;\n                return true;\n            }\n        }, true);\n        return result;\n    }\n    resetValue() {\n        lodash_1.default.each(this.getComponents(), (comp) => comp.resetValue());\n        this.setPristine(true);\n        this.onChange({ resetValue: true });\n    }\n    /**\n     * Sets a new alert to display in the error dialog of the form.\n     * @param {string} type - The type of alert to display. \"danger\", \"success\", \"warning\", etc.\n     * @param {string} message - The message to show in the alert.\n     * @param {object} options - The options for the alert.\n     */\n    setAlert(type, message, options) {\n        if (!type && this.submitted) {\n            if (this.alert) {\n                if (this.refs.errorRef && this.refs.errorRef.length) {\n                    this.refs.errorRef.forEach((el) => {\n                        this.removeEventListener(el, \"click\");\n                        this.removeEventListener(el, \"keypress\");\n                    });\n                }\n                this.removeChild(this.alert);\n                this.alert = null;\n            }\n            return;\n        }\n        if (this.options.noAlerts) {\n            if (!message) {\n                this.emit(\"error\", false);\n            }\n            return;\n        }\n        if (this.alert) {\n            try {\n                if (this.refs.errorRef && this.refs.errorRef.length) {\n                    this.refs.errorRef.forEach((el) => {\n                        this.removeEventListener(el, \"click\");\n                        this.removeEventListener(el, \"keypress\");\n                    });\n                }\n                this.removeChild(this.alert);\n                this.alert = null;\n            }\n            catch (err) {\n                // ignore\n            }\n        }\n        if (message) {\n            const attrs = {\n                class: (options && options.classes) || `alert alert-${type}`,\n                id: `error-list-${this.id}`,\n            };\n            const templateOptions = {\n                message: message instanceof HTMLElement ? message.outerHTML : message,\n                attrs: attrs,\n                type,\n            };\n            this.alert = (0, utils_1.convertStringToHTMLElement)(this.renderTemplate(\"alert\", templateOptions), `#${attrs.id}`);\n        }\n        if (!this.alert) {\n            return;\n        }\n        this.loadRefs(this.alert, { errorRef: \"multiple\" });\n        if (this.refs.errorRef && this.refs.errorRef.length) {\n            this.refs.errorRef.forEach((el) => {\n                this.addEventListener(el, \"click\", (e) => {\n                    const key = e.currentTarget.dataset.componentKey;\n                    this.focusOnComponent(key);\n                });\n                this.addEventListener(el, \"keydown\", (e) => {\n                    if (e.keyCode === 13) {\n                        e.preventDefault();\n                        const key = e.currentTarget.dataset.componentKey;\n                        this.focusOnComponent(key);\n                    }\n                });\n            });\n        }\n        this.prepend(this.alert);\n    }\n    /**\n     * Focus on selected component.\n     * @param {string} key - The key of selected component.\n     */\n    focusOnComponent(key) {\n        if (key) {\n            const component = this.getComponent(key);\n            if (component) {\n                component.focus();\n            }\n        }\n    }\n    /**\n     * Show the errors of this form within the alert dialog.\n     * @param {object} error - An optional additional error to display along with the component errors.\n     * @returns {*}\n     */\n    /* eslint-disable no-unused-vars */\n    /**\n     *\n     * @param {Array} errors - An array of errors to display.\n     * @param {boolean} triggerEvent - Whether or not to trigger the error event.\n     * @returns {void|Array} - The errors that were set.\n     */\n    showErrors(errors, triggerEvent) {\n        this.loading = false;\n        if (!Array.isArray(errors)) {\n            errors = [errors];\n        }\n        if (Array.isArray(this.errors)) {\n            errors = lodash_1.default.union(errors, this.errors);\n        }\n        errors = errors.concat(this.customErrors).filter((err) => !!err);\n        if (!errors.length) {\n            this.setAlert(false);\n            return;\n        }\n        // Mark any components as invalid if in a custom message.\n        const componentErrors = {};\n        errors.forEach((err) => {\n            var _a, _b;\n            const path = (0, utils_1.getStringFromComponentPath)(err.path) || ((_a = err.context) === null || _a === void 0 ? void 0 : _a.path) || ((_b = err.component) === null || _b === void 0 ? void 0 : _b.key);\n            if (!componentErrors[path]) {\n                componentErrors[path] = [];\n            }\n            componentErrors[path].push(err);\n        });\n        // Iterate through all of our component errors and apply them to the components.\n        for (let path in componentErrors) {\n            const component = this.getComponent(path);\n            const errors = componentErrors[path];\n            if (component) {\n                component.serverErrors = errors.filter((err) => err.fromServer);\n                component.setCustomValidity(errors, true);\n            }\n        }\n        const displayedErrors = [];\n        if (errors.length) {\n            errors = lodash_1.default.uniqBy(errors, (error) => { var _a, _b; return [error.message, (_a = error.component) === null || _a === void 0 ? void 0 : _a.id, (_b = error.context) === null || _b === void 0 ? void 0 : _b.path].join(); });\n            const createListItem = (message, index) => {\n                var _a, _b, _c;\n                const err = errors[index];\n                const messageFromIndex = !lodash_1.default.isUndefined(index) && errors && errors[index];\n                const keyOrPath = (messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.formattedKeyOrPath) ||\n                    (messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.path) ||\n                    ((_a = messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.context) === null || _a === void 0 ? void 0 : _a.path) ||\n                    (((_b = err.context) === null || _b === void 0 ? void 0 : _b.component) && ((_c = err.context) === null || _c === void 0 ? void 0 : _c.component.key)) ||\n                    (err.component && err.component.key) ||\n                    (err.fromServer && err.path);\n                const formattedKeyOrPath = keyOrPath ? (0, utils_1.getStringFromComponentPath)(keyOrPath) : \"\";\n                if (typeof err !== \"string\" && !err.formattedKeyOrPath) {\n                    err.formattedKeyOrPath = formattedKeyOrPath;\n                }\n                return {\n                    message: (0, utils_1.unescapeHTML)(message),\n                    keyOrPath: formattedKeyOrPath,\n                };\n            };\n            errors.forEach(({ message, context, fromServer, component }, index) => {\n                const text = !(component === null || component === void 0 ? void 0 : component.label) || (context === null || context === void 0 ? void 0 : context.hasLabel) || fromServer\n                    ? this.t(\"alertMessage\", { message: this.t(message) })\n                    : this.t(\"alertMessageWithLabel\", {\n                        label: this.t(component === null || component === void 0 ? void 0 : component.label),\n                        message: this.t(message),\n                    });\n                displayedErrors.push(createListItem(text, index));\n            });\n        }\n        const errorsList = this.renderTemplate(\"errorsList\", { errors: displayedErrors });\n        this.root.setAlert(\"danger\", errorsList);\n        if (triggerEvent) {\n            this.emit(\"error\", errors);\n        }\n        return errors;\n    }\n    /* eslint-enable no-unused-vars */\n    /**\n     * Called when the submission has completed, or if the submission needs to be sent to an external library.\n     * @param {object} submission - The submission object.\n     * @param {boolean} saved - Whether or not this submission was saved to the server.\n     * @returns {object} - The submission object.\n     */\n    onSubmit(submission, saved) {\n        var _a;\n        this.loading = false;\n        this.submitting = false;\n        this.setPristine(true);\n        // We want to return the submitted submission and setValue will mutate the submission so cloneDeep it here.\n        this.setValue((0, utils_1.fastCloneDeep)(submission), {\n            noValidate: true,\n            noCheck: true,\n        });\n        this.setAlert(\"success\", `<p>${this.t(\"complete\")}</p>`);\n        // Cancel triggered saveDraft to prevent overriding the submitted state\n        if (this.draftEnabled && ((_a = this.triggerSaveDraft) === null || _a === void 0 ? void 0 : _a.cancel)) {\n            this.triggerSaveDraft.cancel();\n        }\n        this.emit(\"submit\", submission, saved);\n        if (saved) {\n            this.emit(\"submitDone\", submission);\n        }\n        return submission;\n    }\n    normalizeError(error) {\n        if (error) {\n            if (typeof error === \"object\" && \"details\" in error) {\n                error = error.details;\n            }\n            if (typeof error === \"string\") {\n                error = { message: error };\n            }\n        }\n        return error;\n    }\n    /**\n     * Called when an error occurs during the submission.\n     * @param {object} error - The error that occured.\n     * @returns {Array} errors - All errors.\n     */\n    onSubmissionError(error) {\n        error = this.normalizeError(error);\n        this.submitting = false;\n        this.setPristine(false);\n        this.emit(\"submitError\", error || this.errors);\n        // Allow for silent cancellations (no error message, no submit button error state)\n        if (error && error.silent) {\n            this.emit(\"change\", { isValid: true }, { silent: true });\n            return false;\n        }\n        const errors = this.showErrors(error, true);\n        if (this.root && this.root.alert) {\n            this.scrollIntoView(this.root.alert);\n        }\n        return errors;\n    }\n    /**\n     * Trigger the change event for this form.\n     * @param {any} flags - The flags to set on this change event.\n     * @param {any} changed - The changed object which reflects the changes in the form.\n     * @param {boolean} modified - Whether or not the form has been modified.\n     * @param {any} changes - The changes that have occured in the form.\n     */\n    onChange(flags, changed, modified, changes) {\n        var _a;\n        flags = flags || {};\n        let isChangeEventEmitted = false;\n        if (((_a = this.parent) === null || _a === void 0 ? void 0 : _a.subForm) === this) {\n            super.onChange(Object.assign(Object.assign({}, flags), { modified }), false);\n        }\n        else {\n            super.onChange(flags, true);\n        }\n        const value = lodash_1.default.clone(this.submission);\n        flags.changed = value.changed = changed;\n        flags.changes = changes;\n        if (modified && this.pristine) {\n            this.pristine = false;\n        }\n        this.checkData(value.data, flags);\n        const shouldValidate = !flags.noValidate ||\n            flags.fromIframe ||\n            (flags.fromSubmission && this.rootPristine && this.pristine && flags.changed);\n        const errors = shouldValidate\n            ? this.validate(value.data, Object.assign(Object.assign({}, flags), { noValidate: false, process: 'change' }))\n            : [];\n        value.isValid = (errors || []).filter(err => !err.fromServer).length === 0;\n        this.loading = false;\n        if (this.submitted) {\n            // show server errors while they are not cleaned/fixed\n            const nonComponentServerErrors = lodash_1.default.filter(this.serverErrors || [], (err) => !err.component && !err.path);\n            this.showErrors(nonComponentServerErrors.length ? nonComponentServerErrors : errors);\n        }\n        // See if we need to save the draft of the form.\n        if (modified && this.options.saveDraft) {\n            this.triggerSaveDraft();\n        }\n        if (!flags || !flags.noEmit) {\n            this.emit(\"change\", value, flags, modified);\n            isChangeEventEmitted = true;\n        }\n        // The form is initialized after the first change event occurs.\n        if (isChangeEventEmitted && !this.initialized) {\n            this.emit(\"initialized\");\n            this.initialized = true;\n        }\n    }\n    /**\n     * Send a delete request to the server.\n     * @returns {Promise} - The promise that is triggered when the delete is complete.\n     */\n    deleteSubmission() {\n        return this.formio.deleteSubmission().then(() => {\n            this.emit(\"submissionDeleted\", this.submission);\n            this.resetValue();\n        });\n    }\n    /**\n     * Cancels the submission.\n     * @param {boolean} noconfirm - Whether or not to confirm the cancellation.\n     * @alias reset\n     * @returns {boolean} - TRUE means the submission was cancelled, FALSE otherwise.\n     */\n    cancel(noconfirm) {\n        const shouldReset = this.hook(\"beforeCancel\", true);\n        if (shouldReset && (noconfirm || confirm(this.t(\"confirmCancel\")))) {\n            this.resetValue();\n            return true;\n        }\n        else {\n            this.emit(\"cancelSubmit\");\n            return false;\n        }\n    }\n    setMetadata(submission) {\n        // Add in metadata about client submitting the form\n        submission.metadata = submission.metadata || {};\n        lodash_1.default.defaults(submission.metadata, {\n            timezone: lodash_1.default.get(this, \"_submission.metadata.timezone\", (0, utils_1.currentTimezone)()),\n            offset: parseInt(lodash_1.default.get(this, \"_submission.metadata.offset\", (0, moment_1.default)().utcOffset()), 10),\n            origin: document.location.origin,\n            referrer: document.referrer,\n            browserName: navigator.appName,\n            userAgent: navigator.userAgent,\n            pathName: window.location.pathname,\n            onLine: navigator.onLine,\n        });\n    }\n    submitForm(options = {}, local = false) {\n        this.clearServerErrors();\n        return new Promise((resolve, reject) => {\n            // Read-only forms should never submit.\n            if (this.options.readOnly) {\n                return resolve({\n                    submission: this.submission,\n                    saved: false,\n                });\n            }\n            const submission = (0, utils_1.fastCloneDeep)(this.submission || {});\n            this.setMetadata(submission);\n            submission.state = options.state || submission.state || \"submitted\";\n            const isDraft = submission.state === \"draft\";\n            this.hook(\"beforeSubmit\", Object.assign(Object.assign({}, submission), { component: options.component }), (err, data) => {\n                var _a;\n                if (err) {\n                    return reject(err);\n                }\n                submission._vnote = data && data._vnote ? data._vnote : \"\";\n                try {\n                    if (!isDraft && !options.noValidate) {\n                        if (!submission.data) {\n                            return reject(\"Invalid Submission\");\n                        }\n                        const errors = this.validate(submission.data, {\n                            local,\n                            dirty: true,\n                            silentCheck: false,\n                            process: \"submit\",\n                        });\n                        if (errors.length ||\n                            ((_a = options.beforeSubmitResults) === null || _a === void 0 ? void 0 : _a.some((result) => result.status === \"rejected\"))) {\n                            return reject(errors);\n                        }\n                    }\n                }\n                catch (err) {\n                    console.error(err);\n                }\n                this.everyComponent((comp) => {\n                    var _a, _b;\n                    if (submission._vnote && comp.type === \"form\" && comp.component.reference) {\n                        lodash_1.default.get(submission.data, local ? (_a = comp.paths) === null || _a === void 0 ? void 0 : _a.localDataPath : comp.path, {})._vnote = submission._vnote;\n                    }\n                    const { persistent } = comp.component;\n                    if (persistent === \"client-only\") {\n                        lodash_1.default.unset(submission.data, local ? (_b = comp.paths) === null || _b === void 0 ? void 0 : _b.localDataPath : comp.path);\n                    }\n                });\n                this.hook(\"customValidation\", Object.assign(Object.assign({}, submission), { component: options.component }), (err) => {\n                    if (err) {\n                        // If string is returned, cast to object.\n                        if (typeof err === \"string\") {\n                            err = {\n                                message: err,\n                            };\n                        }\n                        // Ensure err is an array.\n                        err = Array.isArray(err) ? err : [err];\n                        return reject(err);\n                    }\n                    this.loading = true;\n                    // Use the form action to submit the form if available.\n                    if (this._form && this._form.action) {\n                        const method = submission.data._id &&\n                            this._form.action.includes(submission.data._id)\n                            ? \"PUT\"\n                            : \"POST\";\n                        return Formio_1.Formio.makeStaticRequest(this._form.action, method, submission, this.formio ? this.formio.options : {})\n                            .then((result) => resolve({\n                            submission: result,\n                            saved: true,\n                        }))\n                            .catch((error) => {\n                            this.setServerErrors(error);\n                            return reject(error);\n                        });\n                    }\n                    const submitFormio = this.formio;\n                    if (this.nosubmit || !submitFormio) {\n                        return resolve({\n                            submission,\n                            saved: false,\n                        });\n                    }\n                    // If this is an actionUrl, then make sure to save the action and not the submission.\n                    const submitMethod = submitFormio.actionUrl\n                        ? \"saveAction\"\n                        : \"saveSubmission\";\n                    submitFormio[submitMethod](submission)\n                        .then((result) => resolve({\n                        submission: result,\n                        saved: true,\n                    }))\n                        .catch((error) => {\n                        this.setServerErrors(error);\n                        return reject(error);\n                    });\n                });\n            });\n        });\n    }\n    setServerErrors(error) {\n        if (error.details) {\n            this.serverErrors = error.details\n                .filter((err) => (err.level ? err.level === \"error\" : err))\n                .map((err) => {\n                err.fromServer = true;\n                return err;\n            });\n        }\n        else if (typeof error === \"string\") {\n            this.serverErrors = [{ fromServer: true, level: \"error\", message: error }];\n        }\n    }\n    executeSubmit(options) {\n        this.submitted = true;\n        this.submitting = true;\n        return this.submitForm(options)\n            .then(({ submission, saved }) => this.onSubmit(submission, saved))\n            .then((results) => {\n            this.submissionInProcess = false;\n            return results;\n        })\n            .catch((err) => {\n            this.submissionInProcess = false;\n            return Promise.reject(this.onSubmissionError(err));\n        });\n    }\n    clearServerErrors() {\n        var _a;\n        (_a = this.serverErrors) === null || _a === void 0 ? void 0 : _a.forEach((error) => {\n            if (error.path) {\n                const pathArray = (0, utils_1.getArrayFromComponentPath)(error.path);\n                const component = this.getComponent(pathArray, lodash_1.default.identity, error.formattedKeyOrPath);\n                if (component) {\n                    component.serverErrors = [];\n                }\n            }\n        });\n        this.serverErrors = [];\n    }\n    /**\n     * Submits the form.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.src = 'https://examples.form.io/example';\n     * form.submission = {data: {\n     *   firstName: 'Joe',\n     *   lastName: 'Smith',\n     *   email: 'joe@example.com'\n     * }};\n     * form.submit().then((submission) => {\n     *   console.log(submission);\n     * });\n     * @param {boolean} before - If this submission occured from the before handlers.\n     * @param {any} options - The options to use when submitting this form.\n     * @returns {Promise} - A promise when the form is done submitting.\n     */\n    submit(before = false, options = {}) {\n        this.submissionInProcess = true;\n        if (!before) {\n            return this.beforeSubmit(options).then(() => this.executeSubmit(options));\n        }\n        else {\n            return this.executeSubmit(options);\n        }\n    }\n    submitUrl(URL, headers) {\n        if (!URL) {\n            return console.warn(\"Missing URL argument\");\n        }\n        const submission = this.submission || {};\n        const API_URL = URL;\n        const settings = {\n            method: \"POST\",\n            headers: {},\n        };\n        if (headers && headers.length > 0) {\n            headers.map((e) => {\n                if (e.header !== \"\" && e.value !== \"\") {\n                    settings.headers[e.header] = this.interpolate(e.value, submission);\n                }\n            });\n        }\n        if (API_URL && settings) {\n            Formio_1.Formio.makeStaticRequest(API_URL, settings.method, submission, {\n                headers: settings.headers,\n            })\n                .then(() => {\n                this.emit(\"requestDone\");\n                this.setAlert(\"success\", \"<p> Success </p>\");\n            })\n                .catch((e) => {\n                const message = `${e.statusText ? e.statusText : \"\"} ${e.status ? e.status : e}`;\n                this.emit(\"error\", message);\n                console.error(message);\n                this.setAlert(\"danger\", `<p> ${message} </p>`);\n                return Promise.reject(this.onSubmissionError(e));\n            });\n        }\n        else {\n            this.emit(\"error\", \"You should add a URL to this button.\");\n            this.setAlert(\"warning\", \"You should add a URL to this button.\");\n            return console.warn(\"You should add a URL to this button.\");\n        }\n    }\n    triggerCaptcha(components = null) {\n        if (!this || !this.components) {\n            return;\n        }\n        const captchaComponent = [];\n        (0, utils_1.eachComponent)(components || this.components, (component) => {\n            if (/^(re)?captcha$/.test(component.type) && component.component.eventType === 'formLoad') {\n                captchaComponent.push(component);\n            }\n        }, true);\n        if (captchaComponent.length > 0) {\n            if (captchaComponent[0].component.provider === 'google' && components) {\n                return;\n            }\n            captchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);\n        }\n    }\n    set nosubmit(value) {\n        this._nosubmit = !!value;\n        this.emit(\"nosubmit\", this._nosubmit);\n    }\n    get nosubmit() {\n        return this._nosubmit || false;\n    }\n    get conditions() {\n        var _a, _b;\n        return (_b = (_a = this.schema.settings) === null || _a === void 0 ? void 0 : _a.conditions) !== null && _b !== void 0 ? _b : [];\n    }\n    get variables() {\n        var _a, _b;\n        return (_b = (_a = this.schema.settings) === null || _a === void 0 ? void 0 : _a.variables) !== null && _b !== void 0 ? _b : [];\n    }\n}\nexports[\"default\"] = Webform;\nWebform.setBaseUrl = Formio_1.Formio.setBaseUrl;\nWebform.setApiUrl = Formio_1.Formio.setApiUrl;\nWebform.setAppUrl = Formio_1.Formio.setAppUrl;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Webform.js?");
 
 /***/ }),
 
@@ -4872,7 +4872,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __webpack_require__(/*! ./utils */ \"./lib/cjs/utils/index.js\");\nclass Wizard extends Webform_1.default {\n    /**\n     * Constructor for wizard-based forms.\n     * @param {HTMLElement | object | import('Form').FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.\n     * @param {import('Form').FormOptions} [_options] - The options to create a new form instance.\n     *    - breadcrumbSettings.clickable: true (default) - determines if the breadcrumb bar is clickable.\n     *    - buttonSettings.show*(Previous, Next, Cancel): true (default) - determines if the button is shown.\n     *    - allowPrevious: false (default) - determines if the breadcrumb bar is clickable for visited tabs.\n     */\n    constructor(elementOrOptions = undefined, _options = undefined) {\n        let element, options;\n        if (elementOrOptions instanceof HTMLElement || _options) {\n            element = elementOrOptions;\n            options = _options || {};\n        }\n        else {\n            options = elementOrOptions || {};\n        }\n        options.display = 'wizard';\n        super(element, options);\n        this.pages = [];\n        this.prefixComps = [];\n        this.suffixComps = [];\n        this.components = [];\n        this.originalComponents = [];\n        this.page = 0;\n        this.currentPanel = null;\n        this.currentPanels = null;\n        this.currentNextPage = 0;\n        this._seenPages = [0];\n        this.subWizards = [];\n        this.allPages = [];\n        this.lastPromise = Promise.resolve();\n        this.enabledIndex = 0;\n        this.editMode = false;\n        this.originalOptions = lodash_1.default.cloneDeep(this.options);\n    }\n    isLastPage() {\n        const next = this.getNextPage();\n        if (lodash_1.default.isNumber(next)) {\n            return next === -1;\n        }\n        return lodash_1.default.isNull(next);\n    }\n    getPages(args = {}) {\n        const { all = false } = args;\n        const pages = this.hasExtraPages ? this.components : this.pages;\n        const filteredPages = pages\n            .filter(all ? lodash_1.default.identity : (p, index) => this._seenPages.includes(index));\n        return filteredPages;\n    }\n    get hasExtraPages() {\n        return !lodash_1.default.isEmpty(this.subWizards);\n    }\n    get data() {\n        return super.data;\n    }\n    get localData() {\n        var _a, _b;\n        return ((_b = (_a = this.pages[this.page]) === null || _a === void 0 ? void 0 : _a.root) === null || _b === void 0 ? void 0 : _b.submission.data) || this.submission.data;\n    }\n    checkConditions(data, flags, row) {\n        const visible = super.checkConditions(data, flags, row);\n        this.establishPages(data);\n        return visible;\n    }\n    set data(value) {\n        this._data = value;\n        lodash_1.default.each(this.getPages({ all: true }), (component) => {\n            component.data = this.componentContext(component);\n        });\n    }\n    getComponents() {\n        return this.submitting\n            ? this.getPages({ all: this.isLastPage() })\n            : super.getComponents();\n    }\n    resetValue() {\n        this.getPages({ all: true }).forEach((page) => page.resetValue());\n        this.setPristine(true);\n    }\n    init() {\n        var _a;\n        // Check for and initlize button settings object\n        this.options.buttonSettings = lodash_1.default.defaults(this.options.buttonSettings, {\n            showPrevious: true,\n            showNext: true,\n            showSubmit: true,\n            showCancel: !this.options.readOnly\n        });\n        this.options.breadcrumbSettings = lodash_1.default.defaults(this.options.breadcrumbSettings, {\n            clickable: true\n        });\n        this.options.allowPrevious = this.options.allowPrevious || false;\n        this.page = 0;\n        const onReady = super.init();\n        this.setComponentSchema();\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[this.page]) {\n            this.component = this.pages[this.page].component;\n        }\n        this.on('subWizardsUpdated', (subForm) => {\n            const subWizard = this.subWizards.find(subWizard => { var _a; return (subForm === null || subForm === void 0 ? void 0 : subForm.id) && ((_a = subWizard.subForm) === null || _a === void 0 ? void 0 : _a.id) === (subForm === null || subForm === void 0 ? void 0 : subForm.id); });\n            if (this.subWizards.length && subWizard) {\n                subWizard.subForm.setValue(subForm._submission, {}, true);\n                this.establishPages();\n                this.redraw();\n            }\n        });\n        return onReady;\n    }\n    get wizardKey() {\n        return `wizard-${this.id}`;\n    }\n    get wizard() {\n        return this.form;\n    }\n    set wizard(form) {\n        this.setForm(form);\n    }\n    get buttons() {\n        const buttons = {};\n        [\n            { name: 'cancel', method: 'cancel' },\n            { name: 'previous', method: 'prevPage' },\n            { name: 'next', method: 'nextPage' },\n            { name: 'submit', method: 'submit' }\n        ].forEach((button) => {\n            if (this.hasButton(button.name)) {\n                buttons[button.name] = button;\n            }\n        });\n        return buttons;\n    }\n    get buttonOrder() {\n        var _a, _b, _c;\n        const defaultButtonOrder = [\n            'cancel',\n            'previous',\n            'next',\n            'submit'\n        ];\n        return (_c = (_b = (_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.wizardButtonOrder) === null || _b === void 0 ? void 0 : _b.toLowerCase().split(', ')) !== null && _c !== void 0 ? _c : defaultButtonOrder;\n    }\n    get renderContext() {\n        var _a, _b;\n        return {\n            disableWizardSubmit: this.form.disableWizardSubmit,\n            wizardKey: this.wizardKey,\n            isBreadcrumbClickable: this.isBreadcrumbClickable(),\n            isSubForm: !!this.parent && !((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.type) === 'wizard',\n            panels: this.allPages.length ? this.allPages.map(page => page.component) : this.pages.map(page => page.component),\n            buttons: this.buttons,\n            currentPage: this.page,\n            buttonOrder: this.buttonOrder,\n        };\n    }\n    prepareNavigationSettings(ctx) {\n        const currentPanel = this.currentPanel;\n        if (currentPanel && currentPanel.buttonSettings) {\n            Object.keys(currentPanel.buttonSettings).forEach(() => {\n                Object.keys(ctx.buttons).forEach(key => {\n                    if (typeof currentPanel.buttonSettings[key] !== 'undefined' && !currentPanel.buttonSettings[key] || ctx.isSubForm) {\n                        ctx.buttons[key] = null;\n                    }\n                });\n            });\n        }\n        return this.renderTemplate('wizardNav', ctx);\n    }\n    prepareHeaderSettings(ctx, headerType) {\n        var _a;\n        const shouldHideBreadcrumbs = ((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.breadcrumb) === 'none' ||\n            lodash_1.default.get(this.form, 'settings.wizardBreadcrumbsType', '') === 'none';\n        if (shouldHideBreadcrumbs || ctx.isSubForm) {\n            return null;\n        }\n        return this.renderTemplate(headerType, ctx);\n    }\n    render() {\n        const ctx = this.renderContext;\n        if (this.component.key) {\n            ctx.panels.map(panel => {\n                if (panel.key === this.component.key) {\n                    this.currentPanel = panel;\n                    ctx.wizardPageTooltip = this.getFormattedTooltip(panel.tooltip);\n                }\n            });\n        }\n        const wizardNav = this.prepareNavigationSettings(ctx);\n        const wizardHeaderType = `wizardHeader${lodash_1.default.get(this.form, 'settings.wizardHeaderType', '')}`;\n        const wizardHeaderLocation = lodash_1.default.get(this.form, 'settings.wizardHeaderLocation', 'left');\n        const wizardHeader = this.prepareHeaderSettings(ctx, wizardHeaderType);\n        return this.renderTemplate('wizard', Object.assign(Object.assign({}, ctx), { className: super.getClassName(), wizardHeader,\n            wizardHeaderType,\n            wizardHeaderLocation,\n            wizardNav, components: this.renderComponents([\n                ...this.prefixComps,\n                ...this.currentPage.components,\n                ...this.suffixComps\n            ]) }), this.builderMode ? 'builder' : 'form');\n    }\n    redrawNavigation() {\n        if (this.element) {\n            let navElement = this.element.querySelector(`#${this.wizardKey}-nav`);\n            if (navElement) {\n                this.detachNav();\n                navElement.outerHTML = this.renderTemplate('wizardNav', this.renderContext);\n                navElement = this.element.querySelector(`#${this.wizardKey}-nav`);\n                this.loadRefs(navElement, {\n                    [`${this.wizardKey}-cancel`]: 'single',\n                    [`${this.wizardKey}-previous`]: 'single',\n                    [`${this.wizardKey}-next`]: 'single',\n                    [`${this.wizardKey}-submit`]: 'single',\n                });\n                this.attachNav();\n            }\n        }\n    }\n    redrawHeader() {\n        if (this.element) {\n            let headerElement = this.element.querySelector(`#${this.wizardKey}-header`);\n            if (headerElement) {\n                this.detachHeader();\n                headerElement.outerHTML = this.renderTemplate(`wizardHeader${lodash_1.default.get(this.form, 'settings.wizardHeaderType', '')}`, this.renderContext);\n                headerElement = this.element.querySelector(`#${this.wizardKey}-header`);\n                this.loadRefs(headerElement, {\n                    [`${this.wizardKey}-link`]: 'multiple',\n                    [`${this.wizardKey}-tooltip`]: 'multiple'\n                });\n                this.attachHeader();\n            }\n        }\n    }\n    /**\n     * Attaches the wizard to the provided DOM element, initializes component references, sets up navigation,\n     * and emits a render event. It will initialize the wizard's index if necessary,\n     * attach event hooks, and make sure that the current page is rendered and displayed correctly.\n     * @param {HTMLElement} element - The DOM element to which the wizard will be attached.\n     * @returns {Promise} A promise that resolves when all components have been successfully attached.\n     */\n    attach(element) {\n        var _a;\n        this.setElement(element);\n        this.loadRefs(element, {\n            [this.wizardKey]: 'single',\n            [`${this.wizardKey}-header`]: 'single',\n            [`${this.wizardKey}-cancel`]: 'single',\n            [`${this.wizardKey}-previous`]: 'single',\n            [`${this.wizardKey}-next`]: 'single',\n            [`${this.wizardKey}-submit`]: 'single',\n            [`${this.wizardKey}-link`]: 'multiple',\n            [`${this.wizardKey}-tooltip`]: 'multiple'\n        });\n        if ((this.options.readOnly || this.editMode) && !this.enabledIndex) {\n            this.enabledIndex = ((_a = this.pages) === null || _a === void 0 ? void 0 : _a.length) - 1;\n        }\n        this.hook('attachWebform', element, this);\n        const promises = this.attachComponents(this.refs[this.wizardKey], [\n            ...this.prefixComps,\n            ...this.currentPage.components,\n            ...this.suffixComps,\n        ]);\n        this.attachNav();\n        this.attachHeader();\n        return promises.then(() => {\n            this.emit('render', { component: this.currentPage, page: this.page });\n            if (this.component.scrollToTop) {\n                this.scrollPageToTop();\n            }\n        });\n    }\n    scrollPageToTop() {\n        var _a;\n        const pageTop = (_a = this.refs[`${this.wizardKey}-header`]) !== null && _a !== void 0 ? _a : this.refs[this.wizardKey];\n        if (!pageTop) {\n            return;\n        }\n        if ('scrollIntoView' in pageTop) {\n            pageTop.scrollIntoView(true);\n        }\n        else {\n            this.scrollIntoView(pageTop);\n        }\n    }\n    isBreadcrumbClickable() {\n        let currentPage = null;\n        this.pages.map(page => {\n            if (lodash_1.default.isEqual(this.currentPage.component, page.component)) {\n                currentPage = page;\n            }\n        });\n        if (lodash_1.default.has(currentPage, 'component.breadcrumbClickable')) {\n            return lodash_1.default.get(currentPage, 'component.breadcrumbClickable');\n        }\n        if (lodash_1.default.has(this.options, 'breadcrumbSettings.clickable')) {\n            return this.options.breadcrumbSettings.clickable;\n        }\n        return true;\n    }\n    isAllowPrevious() {\n        let currentPage = null;\n        this.pages.map(page => {\n            if (lodash_1.default.isEqual(this.currentPage.component, page.component)) {\n                currentPage = page;\n            }\n        });\n        return lodash_1.default.get(currentPage.component, 'allowPrevious', this.options.allowPrevious);\n    }\n    /**\n     * Handles navigate on 'Enter' key event in a wizard form.\n     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.\n     */\n    handleNaviageteOnEnter(event) {\n        if (event.keyCode === 13) {\n            const clickEvent = new CustomEvent('click');\n            const buttonElement = this.refs[`${this.wizardKey}-${this.buttons.next.name}`];\n            if (buttonElement) {\n                buttonElement.dispatchEvent(clickEvent);\n            }\n        }\n    }\n    /**\n     * Handles save on 'Enter' key event in a wizard form.\n     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.\n     */\n    handleSaveOnEnter(event) {\n        if (event.keyCode === 13) {\n            const clickEvent = new CustomEvent('click');\n            const buttonElement = this.refs[`${this.wizardKey}-${this.buttons.submit.name}`];\n            if (buttonElement) {\n                buttonElement.dispatchEvent(clickEvent);\n            }\n        }\n    }\n    attachNav() {\n        if (this.component.navigateOnEnter) {\n            this.addEventListener(document, 'keyup', this.handleNaviageteOnEnter.bind(this));\n        }\n        if (this.component.saveOnEnter) {\n            this.addEventListener(document, 'keyup', this.handleSaveOnEnter.bind(this));\n        }\n        lodash_1.default.each(this.buttons, (button) => {\n            const buttonElement = this.refs[`${this.wizardKey}-${button.name}`];\n            this.addEventListener(buttonElement, 'click', (event) => {\n                event.preventDefault();\n                // Disable the button until done.\n                buttonElement.setAttribute('disabled', 'disabled');\n                this.setLoading(buttonElement, true);\n                // Call the button method, then re-enable the button.\n                this[button.method]().then(() => {\n                    buttonElement.removeAttribute('disabled');\n                    this.setLoading(buttonElement, false);\n                }).catch(() => {\n                    buttonElement.removeAttribute('disabled');\n                    this.setLoading(buttonElement, false);\n                });\n            });\n        });\n    }\n    /**\n     * Emits an event indicating that a wizard page has been selected.\n     * @param {number} index - Index of the selected wizard page in the `pages` array.\n     * @fires emit - Emits the 'wizardPageSelected' event with the page object and index.\n     */\n    emitWizardPageSelected(index) {\n        this.emit('wizardPageSelected', this.pages[index], index);\n    }\n    attachHeader() {\n        var _a, _b;\n        const isAllowPrevious = this.isAllowPrevious();\n        this.attachTooltips(this.refs[`${this.wizardKey}-tooltip`], (_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.tooltip);\n        if (this.isBreadcrumbClickable() || isAllowPrevious) {\n            (_b = this.refs[`${this.wizardKey}-link`]) === null || _b === void 0 ? void 0 : _b.forEach((link, index) => {\n                if (!isAllowPrevious || index <= this.enabledIndex) {\n                    this.addEventListener(link, 'click', (event) => {\n                        this.emit('wizardNavigationClicked', this.pages[index]);\n                        event.preventDefault();\n                        return this.setPage(index).then(() => {\n                            this.emitWizardPageSelected(index);\n                        });\n                    });\n                }\n            });\n        }\n    }\n    detachNav() {\n        if (this.component.navigateOnEnter) {\n            this.removeEventListener(document, 'keyup', this.handleNaviageteOnEnter.bind(this));\n        }\n        if (this.component.saveOnEnter) {\n            this.removeEventListener(document, 'keyup', this.handleSaveOnEnter.bind(this));\n        }\n        lodash_1.default.each(this.buttons, (button) => {\n            this.removeEventListener(this.refs[`${this.wizardKey}-${button.name}`], 'click');\n        });\n    }\n    detachHeader() {\n        if (this.refs[`${this.wizardKey}-link`]) {\n            this.refs[`${this.wizardKey}-link`].forEach((link) => {\n                this.removeEventListener(link, 'click');\n            });\n        }\n    }\n    transformPages() {\n        const allComponents = [];\n        const components = this.getSortedComponents(this);\n        let defferedComponents = [];\n        this.allPages = [];\n        // Get all components including all nested components and line up in the correct order\n        const getAllComponents = (nestedComp, compsArr, pushAllowed = true) => {\n            const nestedPages = [];\n            const dataArrayComponents = ['datagrid', 'editgrid', 'dynamicWizard'];\n            const currentComponents = (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.subForm) ? this.getSortedComponents(nestedComp.subForm) : (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.components) || [];\n            const visibleComponents = currentComponents.filter(comp => comp._visible);\n            const filteredComponents = visibleComponents.filter(comp => !dataArrayComponents.includes(comp.component.type) && (comp.type !== 'form' || comp.isNestedWizard));\n            const additionalComponents = currentComponents.filter(comp => { var _a; return ((_a = comp.subForm) === null || _a === void 0 ? void 0 : _a._form.display) !== 'wizard'; });\n            let hasNested = false;\n            (0, utils_1.eachComponent)(filteredComponents, (comp) => {\n                if (comp && comp.component) {\n                    if (comp.component.type === 'panel' && (comp === null || comp === void 0 ? void 0 : comp.parent.wizard) && !getAllComponents(comp, compsArr, false)) {\n                        if (pushAllowed) {\n                            this.setRootPanelId(comp);\n                            nestedPages.push(comp);\n                        }\n                        hasNested = true;\n                    }\n                    if (comp.isNestedWizard && comp.subForm) {\n                        const hasNestedForm = getAllComponents(comp, nestedPages, pushAllowed);\n                        if (!hasNested) {\n                            hasNested = hasNestedForm;\n                        }\n                    }\n                }\n            }, true);\n            if (nestedComp.component.type === 'panel') {\n                if (!hasNested && pushAllowed) {\n                    this.setRootPanelId(nestedComp);\n                    compsArr.push(nestedComp);\n                }\n                if (hasNested && additionalComponents.length) {\n                    const newComp = lodash_1.default.clone(nestedComp);\n                    newComp.components = additionalComponents;\n                    this.setRootPanelId(newComp);\n                    defferedComponents.push(newComp);\n                }\n            }\n            if (pushAllowed) {\n                compsArr.push(...defferedComponents, ...nestedPages);\n                defferedComponents = [];\n            }\n            return hasNested;\n        };\n        components.forEach((component) => {\n            if (component.visible) {\n                getAllComponents(component, allComponents);\n            }\n        }, []);\n        // recalculate pages only for root wizards, including the situation when the wizard is in a wrapper\n        if (this.localRoot && this.id === this.localRoot.id) {\n            allComponents.forEach((comp, index) => {\n                comp.eachComponent((component) => {\n                    component.page = index;\n                });\n            });\n        }\n        this.allPages = allComponents;\n    }\n    getSortedComponents({ components, originalComponents }) {\n        const currentComponents = [];\n        const currentPages = [];\n        if (components && components.length) {\n            components.map(page => {\n                if (page.component.type === 'panel') {\n                    currentPages[page.component.key || page.component.title] = page;\n                }\n            });\n        }\n        originalComponents === null || originalComponents === void 0 ? void 0 : originalComponents.forEach((item) => {\n            if (!item.key) {\n                item.key = item.title;\n            }\n            if (currentPages[item.key]) {\n                currentComponents.push(currentPages[item.key]);\n            }\n        });\n        return currentComponents;\n    }\n    findRootPanel(component) {\n        var _a;\n        return ((_a = component.parent) === null || _a === void 0 ? void 0 : _a.parent) ? this.findRootPanel(component.parent) : component;\n    }\n    setRootPanelId(component) {\n        var _a;\n        if (component.rootPanelId && component.rootPanelId !== component.id) {\n            return;\n        }\n        const parent = ((_a = component.parent) === null || _a === void 0 ? void 0 : _a.parent) ? this.findRootPanel(component.parent) : component;\n        component.rootPanelId = parent.id;\n    }\n    establishPages(data = this.data) {\n        this.pages = [];\n        this.prefixComps = [];\n        this.suffixComps = [];\n        const visible = [];\n        const currentPages = {};\n        const pageOptions = Object.assign(Object.assign({}, (lodash_1.default.clone(this.options))), (this.parent ? { root: this } : {}));\n        if (this.components && this.components.length) {\n            this.components.forEach(page => {\n                if (page.component.type === 'panel') {\n                    currentPages[page.component.key || page.component.title] = page;\n                }\n            });\n        }\n        if (this.originalComponents) {\n            this.originalComponents.forEach((item) => {\n                if (item.type === 'panel') {\n                    if (!item.key) {\n                        item.key = item.title;\n                    }\n                    let page = currentPages[item.key];\n                    const forceShow = this.shouldForceShow(item);\n                    const forceHide = this.shouldForceHide(item);\n                    let isVisible = !page\n                        ? (0, utils_1.checkCondition)(item, data, data, this.component, this) && !item.hidden\n                        : page.visible;\n                    if (forceShow) {\n                        isVisible = true;\n                    }\n                    else if (forceHide) {\n                        isVisible = false;\n                    }\n                    if (isVisible) {\n                        visible.push(item);\n                        if (page) {\n                            this.pages.push(page);\n                        }\n                    }\n                    if (!page && isVisible) {\n                        page = this.createComponent(item, pageOptions);\n                        page.visible = isVisible;\n                        this.pages.push(page);\n                        page.eachComponent((component) => {\n                            component.page = (this.pages.length - 1);\n                        });\n                    }\n                }\n                else if (item.type !== 'button') {\n                    if (!this.pages.length) {\n                        this.prefixComps.push(this.createComponent(item, pageOptions));\n                    }\n                    else {\n                        this.suffixComps.push(this.createComponent(item, pageOptions));\n                    }\n                }\n            });\n        }\n        if (this.pages.length) {\n            this.emit('pagesChanged');\n        }\n        this.transformPages();\n        if (this.allPages && this.allPages.length) {\n            this.updatePages();\n        }\n        return visible;\n    }\n    updatePages() {\n        this.pages = this.allPages;\n    }\n    addComponents() {\n        this.establishPages();\n    }\n    setPage(num) {\n        if (num === this.page) {\n            return Promise.resolve();\n        }\n        if (num >= 0 && num < this.pages.length) {\n            this.page = num;\n            this.pageFieldLogic(num);\n            this.getNextPage();\n            let parentNum = num;\n            if (this.hasExtraPages) {\n                const pageFromPages = this.pages[num];\n                const pageFromComponents = this.components[num];\n                if (!pageFromComponents || (pageFromPages === null || pageFromPages === void 0 ? void 0 : pageFromPages.id) !== pageFromComponents.id) {\n                    parentNum = this.components.findIndex(comp => {\n                        var _a, _b;\n                        return comp.id === ((_b = (_a = this.pages) === null || _a === void 0 ? void 0 : _a[parentNum]) === null || _b === void 0 ? void 0 : _b.rootPanelId);\n                    });\n                }\n            }\n            if (!this._seenPages.includes(parentNum)) {\n                this._seenPages = this._seenPages.concat(parentNum);\n            }\n            this.redraw().then(() => {\n                this.checkData(this.submission.data);\n                this.triggerCaptcha(this.currentPage.components);\n                const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();\n                if (this.alert) {\n                    this.showErrors(errors, true, true);\n                }\n            });\n            return Promise.resolve();\n        }\n        else if (!this.pages.length) {\n            this.redraw();\n            return Promise.resolve();\n        }\n        return Promise.reject('Page not found');\n    }\n    pageFieldLogic(page) {\n        var _a;\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[page]) {\n            // Handle field logic on pages.\n            this.component = this.pages[page].component;\n            this.originalComponent = (0, utils_1.fastCloneDeep)(this.component);\n            this.fieldLogic(this.data);\n            // If disabled changed, be sure to distribute the setting.\n            this.disabled = this.shouldDisabled;\n        }\n    }\n    get currentPage() {\n        return (this.pages && (this.pages.length >= this.page)) ? this.pages[this.page] : { components: [] };\n    }\n    getNextPage() {\n        var _a;\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[this.page]) {\n            const data = this.submission.data;\n            const form = this.pages[this.page].component;\n            // Check conditional nextPage\n            if (form) {\n                const page = this.pages.length > (this.page + 1) && !this.showAllErrors ? this.page + 1 : -1;\n                if (form.nextPage) {\n                    const next = this.evaluate(form.nextPage, {\n                        next: page,\n                        data,\n                        page,\n                        form\n                    }, 'next');\n                    if (next === null) {\n                        this.currentNextPage = null;\n                        return null;\n                    }\n                    const pageNum = parseInt(next, 10);\n                    if (!isNaN(parseInt(pageNum, 10)) && isFinite(pageNum)) {\n                        this.currentNextPage = pageNum;\n                        return pageNum;\n                    }\n                    this.currentNextPage = this.getPageIndexByKey(next);\n                    return this.currentNextPage;\n                }\n                this.currentNextPage = page;\n                return page;\n            }\n            this.currentNextPage = null;\n        }\n        return null;\n    }\n    getPreviousPage() {\n        return this.page - 1;\n    }\n    beforeSubmit() {\n        const pages = this.getPages({ all: true });\n        return Promise.all(pages.map((page) => {\n            this.triggerButtonCaptcha(page);\n            page.options.beforeSubmit = true;\n            return page.beforeSubmit();\n        }));\n    }\n    beforePage(next) {\n        return new Promise((resolve, reject) => {\n            this.hook(next ? 'beforeNext' : 'beforePrev', this.currentPage, this.submission, (err) => {\n                if (err) {\n                    this.showErrors(err, true);\n                    reject(err);\n                }\n                const form = this.currentPage;\n                if (form) {\n                    form.beforePage(next).then(resolve).catch(reject);\n                }\n                else {\n                    resolve();\n                }\n            });\n        });\n    }\n    emitNextPage() {\n        this.emit('nextPage', { page: this.page, submission: this.submission });\n    }\n    nextPage() {\n        // Read-only forms should not worry about validation before going to next page, nor should they submit.\n        if (this.options.readOnly) {\n            return this.beforePage(true).then(() => {\n                return this.setPage(this.getNextPage()).then(() => {\n                    this.emitNextPage();\n                });\n            });\n        }\n        // Validate the form before going to the next page\n        const currentPageErrors = this.validateCurrentPage({ dirty: true });\n        const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : currentPageErrors;\n        // allow going to the next page if the current page is valid, even if there are form level errors\n        if (currentPageErrors.length === 0) {\n            this.checkData(this.submission.data);\n            return this.beforePage(true).then(() => {\n                return this.setPage(this.getNextPage()).then(() => {\n                    if (!(this.options.readOnly || this.editMode) && this.enabledIndex < this.page) {\n                        this.enabledIndex = this.page;\n                        this.redraw();\n                    }\n                    this.emitNextPage();\n                });\n            });\n        }\n        else {\n            this.currentPage.components.forEach((comp) => comp.setPristine(false));\n            this.scrollIntoView(this.element, true);\n            return Promise.reject(this.showErrors(errors, true));\n        }\n    }\n    validateCurrentPage(flags = {}) {\n        var _a, _b, _c, _d;\n        const components = (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components.map((component) => component.component);\n        // Accessing the parent ensures the right instance (whether it's the parent Wizard or a nested Wizard) performs its validation\n        if ((_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.parent) {\n            return (_c = this.currentPage) === null || _c === void 0 ? void 0 : _c.parent.validateComponents(components, this.root.data, flags);\n        }\n        return (_d = this.currentPage) === null || _d === void 0 ? void 0 : _d.validateComponents(components, this.root ? this.root.data : this.data, flags);\n    }\n    emitPrevPage() {\n        this.emit('prevPage', { page: this.page, submission: this.submission });\n    }\n    prevPage() {\n        return this.beforePage().then(() => {\n            return this.setPage(this.getPreviousPage()).then(() => {\n                this.emitPrevPage();\n            });\n        });\n    }\n    cancel(noconfirm) {\n        if (this.options.readOnly) {\n            return Promise.resolve();\n        }\n        if (super.cancel(noconfirm)) {\n            this.setPristine(true);\n            return this.setPage(0).then(() => {\n                if (this.enabledIndex) {\n                    this.enabledIndex = 0;\n                }\n                this.onChange({ resetValue: true });\n                this.redraw();\n                return this.page;\n            });\n        }\n        return Promise.resolve();\n    }\n    getPageIndexByKey(key) {\n        let pageIndex = this.page;\n        this.pages.forEach((page, index) => {\n            if (page.component.key === key) {\n                pageIndex = index;\n                return false;\n            }\n        });\n        return pageIndex;\n    }\n    get schema() {\n        return this.wizard;\n    }\n    setComponentSchema() {\n        const pageKeys = {};\n        this.originalComponents = [];\n        this.component.components.map((item) => {\n            if (item.type === 'panel') {\n                item.key = (0, utils_1.uniqueKey)(pageKeys, (item.key || 'panel'));\n                pageKeys[item.key] = true;\n                if (this.wizard.full) {\n                    this.options.show = this.options.show || {};\n                    this.options.show[item.key] = true;\n                }\n                else if (Object.prototype.hasOwnProperty.call(this.wizard, 'full')\n                    && !lodash_1.default.isEqual(this.originalOptions.show, this.options.show)) {\n                    this.options.show = Object.assign({}, (this.originalOptions.show || {}));\n                }\n            }\n            this.originalComponents.push(lodash_1.default.clone(item));\n        });\n        if (!Object.keys(pageKeys).length) {\n            const newPage = {\n                type: 'panel',\n                title: 'Page 1',\n                label: 'Page 1',\n                key: 'page1',\n                components: this.component.components\n            };\n            this.component.components = [newPage];\n            this.originalComponents.push(lodash_1.default.clone(newPage));\n        }\n    }\n    setForm(form, flags = {}) {\n        if (!form) {\n            return;\n        }\n        return super.setForm(form, flags);\n    }\n    onSetForm(clonedForm, initialForm) {\n        this.component.components = (this.parent ? initialForm.components : clonedForm.components) || [];\n        this.setComponentSchema();\n    }\n    setEditMode(submission) {\n        if (!this.editMode && submission._id && !this.options.readOnly) {\n            this.editMode = true;\n            this.redraw();\n        }\n    }\n    setValue(submission, flags = {}, ignoreEstablishment) {\n        const changed = this.getPages({ all: true }).reduce((changed, page) => {\n            return this.setNestedValue(page, submission.data, flags, changed) || changed;\n        }, false);\n        this.mergeData(this.data, submission.data);\n        if (changed) {\n            this.pageFieldLogic(this.page);\n        }\n        submission.data = this.data;\n        this._submission = submission;\n        if (!ignoreEstablishment) {\n            this.establishPages(submission.data);\n        }\n        this.setEditMode(submission);\n        return changed;\n    }\n    isClickable(page, index) {\n        return this.page !== index && (0, utils_1.firstNonNil)([\n            lodash_1.default.get(page, 'breadcrumbClickable'),\n            this.options.breadcrumbSettings.clickable\n        ]);\n    }\n    hasButton(name, nextPage = this.getNextPage()) {\n        // get page options with global options as default values\n        const { previous = this.options.buttonSettings.showPrevious, cancel = this.options.buttonSettings.showCancel, submit = this.options.buttonSettings.showSubmit, next = this.options.buttonSettings.showNext } = lodash_1.default.get(this.currentPage, 'component.buttonSettings', {});\n        switch (name) {\n            case 'previous':\n                return previous && (this.getPreviousPage() > -1);\n            case 'next':\n                return next && (nextPage !== null) && (nextPage !== -1);\n            case 'cancel':\n                return cancel && !this.options.readOnly;\n            case 'submit':\n                return submit && !this.options.readOnly && ((nextPage === null) || (this.page === (this.pages.length - 1)));\n            default:\n                return true;\n        }\n    }\n    pageId(page) {\n        if (page.key) {\n            // Some panels have the same key....\n            return `${page.key}-${page.title}`;\n        }\n        else if (page.components &&\n            page.components.length > 0) {\n            return this.pageId(page.components[0]);\n        }\n        else {\n            return page.title;\n        }\n    }\n    onChange(flags, changed, modified, changes) {\n        var _a, _b;\n        super.onChange(flags, changed, modified, changes);\n        // The onChange loop doesn't need all components for wizards\n        const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();\n        if (this.alert) {\n            this.showErrors(errors, true, true);\n        }\n        // If the pages change, need to redraw the header.\n        let currentPanels;\n        let panels;\n        const currentNextPage = this.currentNextPage;\n        if (this.hasExtraPages) {\n            currentPanels = this.pages.map(page => page.component.key);\n            this.establishPages();\n            panels = this.pages.map(page => page.component.key);\n        }\n        else {\n            currentPanels = this.currentPanels || this.pages.map(page => page.component.key);\n            panels = this.establishPages().map(panel => panel.key);\n            this.currentPanels = panels;\n            if (((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.key) && ((_b = this.currentPanels) === null || _b === void 0 ? void 0 : _b.length)) {\n                this.setPage(this.currentPanels.findIndex(panel => panel === this.currentPanel.key));\n            }\n        }\n        if (!lodash_1.default.isEqual(panels, currentPanels) || (flags && flags.fromSubmission)) {\n            this.redrawHeader();\n        }\n        // If the next page changes, then make sure to redraw navigation.\n        if (currentNextPage !== this.getNextPage()) {\n            this.redrawNavigation();\n        }\n        if (this.options.readOnly && (this.prefixComps.length || this.suffixComps.length)) {\n            this.redraw();\n        }\n    }\n    rebuild() {\n        const currentPage = this.page;\n        const setCurrentPage = () => this.setPage(currentPage);\n        return super.rebuild().then(setCurrentPage);\n    }\n    checkValidity(data, dirty, row, currentPageOnly, childErrors = []) {\n        if (!this.checkCondition(row, data)) {\n            this.setCustomValidity('');\n            return true;\n        }\n        const components = !currentPageOnly || this.isLastPage()\n            ? this.getComponents()\n            : this.currentPage.components;\n        return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, currentPageOnly, childErrors) && check, true);\n    }\n    get errors() {\n        return !this.isLastPage() && !this.submitted ? this.currentPage.errors : super.errors;\n    }\n    focusOnComponent(key) {\n        const component = this.getComponent(key);\n        if (component) {\n            let topPanel = component.parent;\n            while (!(topPanel.parent instanceof Wizard)) {\n                topPanel = topPanel.parent;\n            }\n            const pageIndex = this.pages.findIndex(page => page.id === topPanel.id);\n            if (pageIndex >= 0) {\n                const page = this.pages[pageIndex];\n                if (page && page !== this.currentPage) {\n                    return this.setPage(pageIndex).then(() => {\n                        this.showErrors(this.validate(this.localData, { dirty: true }));\n                        super.focusOnComponent(key);\n                    });\n                }\n            }\n        }\n        return super.focusOnComponent(key);\n    }\n    triggerButtonCaptcha(page) {\n        if (!page.components) {\n            return;\n        }\n        let captchaComponent;\n        page.eachComponent((component) => {\n            if (/^(re)?captcha$/.test(component.component.type) &&\n                component.component.eventType === 'buttonClick' &&\n                component.component.buttonKey === 'submit') {\n                captchaComponent = component;\n            }\n        });\n        if (captchaComponent) {\n            captchaComponent.verify(`submitClick`);\n        }\n    }\n}\nexports[\"default\"] = Wizard;\nWizard.setBaseUrl = Formio_1.Formio.setBaseUrl;\nWizard.setApiUrl = Formio_1.Formio.setApiUrl;\nWizard.setAppUrl = Formio_1.Formio.setAppUrl;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Wizard.js?");
+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 */ \"./lib/cjs/utils/index.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.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.hasSubWizards ? 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 hasSubWizards() {\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.id) {\n            ctx.panels.forEach(panel => {\n                if (panel.id === this.component.id) {\n                    this.currentPanel = panel;\n                    ctx.wizardPageTooltip = this.getFormattedTooltip(panel.tooltip);\n                }\n            });\n        }\n        const wizardNav = this.prepareNavigationSettings(ctx);\n        const wizardHeaderType = `wizardHeader${lodash_1.default.get(this.form, 'settings.wizardHeaderType', '')}`;\n        const wizardHeaderLocation = lodash_1.default.get(this.form, 'settings.wizardHeaderLocation', 'left');\n        const wizardHeader = this.prepareHeaderSettings(ctx, wizardHeaderType);\n        return this.renderTemplate('wizard', Object.assign(Object.assign({}, ctx), { className: super.getClassName(), wizardHeader,\n            wizardHeaderType,\n            wizardHeaderLocation,\n            wizardNav, components: this.renderComponents([\n                ...this.prefixComps,\n                ...this.currentPage.components,\n                ...this.suffixComps\n            ]) }), this.builderMode ? 'builder' : 'form');\n    }\n    redrawNavigation() {\n        if (this.element) {\n            let navElement = this.element.querySelector(`#${this.wizardKey}-nav`);\n            if (navElement) {\n                this.detachNav();\n                navElement.outerHTML = this.renderTemplate('wizardNav', this.renderContext);\n                navElement = this.element.querySelector(`#${this.wizardKey}-nav`);\n                this.loadRefs(navElement, {\n                    [`${this.wizardKey}-cancel`]: 'single',\n                    [`${this.wizardKey}-previous`]: 'single',\n                    [`${this.wizardKey}-next`]: 'single',\n                    [`${this.wizardKey}-submit`]: 'single',\n                });\n                this.attachNav();\n            }\n        }\n    }\n    redrawHeader() {\n        if (this.element) {\n            let headerElement = this.element.querySelector(`#${this.wizardKey}-header`);\n            if (headerElement) {\n                this.detachHeader();\n                headerElement.outerHTML = this.renderTemplate(`wizardHeader${lodash_1.default.get(this.form, 'settings.wizardHeaderType', '')}`, this.renderContext);\n                headerElement = this.element.querySelector(`#${this.wizardKey}-header`);\n                this.loadRefs(headerElement, {\n                    [`${this.wizardKey}-link`]: 'multiple',\n                    [`${this.wizardKey}-tooltip`]: 'multiple'\n                });\n                this.attachHeader();\n            }\n        }\n    }\n    /**\n     * Attaches the wizard to the provided DOM element, initializes component references, sets up navigation,\n     * and emits a render event. It will initialize the wizard's index if necessary,\n     * attach event hooks, and make sure that the current page is rendered and displayed correctly.\n     * @param {HTMLElement} element - The DOM element to which the wizard will be attached.\n     * @returns {Promise} A promise that resolves when all components have been successfully attached.\n     */\n    attach(element) {\n        var _a;\n        this.setElement(element);\n        this.loadRefs(element, {\n            [this.wizardKey]: 'single',\n            [`${this.wizardKey}-header`]: 'single',\n            [`${this.wizardKey}-cancel`]: 'single',\n            [`${this.wizardKey}-previous`]: 'single',\n            [`${this.wizardKey}-next`]: 'single',\n            [`${this.wizardKey}-submit`]: 'single',\n            [`${this.wizardKey}-link`]: 'multiple',\n            [`${this.wizardKey}-tooltip`]: 'multiple'\n        });\n        if ((this.options.readOnly || this.editMode) && !this.enabledIndex) {\n            this.enabledIndex = ((_a = this.pages) === null || _a === void 0 ? void 0 : _a.length) - 1;\n        }\n        this.hook('attachWebform', element, this);\n        const promises = this.attachComponents(this.refs[this.wizardKey], [\n            ...this.prefixComps,\n            ...this.currentPage.components,\n            ...this.suffixComps,\n        ]);\n        this.attachNav();\n        this.attachHeader();\n        return promises.then(() => {\n            this.emit('render', { component: this.currentPage, page: this.page });\n            if (this.component.scrollToTop) {\n                this.scrollPageToTop();\n            }\n        });\n    }\n    scrollPageToTop() {\n        var _a;\n        const pageTop = (_a = this.refs[`${this.wizardKey}-header`]) !== null && _a !== void 0 ? _a : this.refs[this.wizardKey];\n        if (!pageTop) {\n            return;\n        }\n        if ('scrollIntoView' in pageTop) {\n            pageTop.scrollIntoView(true);\n        }\n        else {\n            this.scrollIntoView(pageTop);\n        }\n    }\n    isBreadcrumbClickable() {\n        let currentPage = null;\n        this.pages.map(page => {\n            if (lodash_1.default.isEqual(this.currentPage.component, page.component)) {\n                currentPage = page;\n            }\n        });\n        if (lodash_1.default.has(currentPage, 'component.breadcrumbClickable')) {\n            return lodash_1.default.get(currentPage, 'component.breadcrumbClickable');\n        }\n        if (lodash_1.default.has(this.options, 'breadcrumbSettings.clickable')) {\n            return this.options.breadcrumbSettings.clickable;\n        }\n        return true;\n    }\n    isAllowPrevious() {\n        let currentPage = null;\n        this.pages.map(page => {\n            if (lodash_1.default.isEqual(this.currentPage.component, page.component)) {\n                currentPage = page;\n            }\n        });\n        return lodash_1.default.get(currentPage.component, 'allowPrevious', this.options.allowPrevious);\n    }\n    /**\n     * Handles navigate on 'Enter' key event in a wizard form.\n     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.\n     */\n    handleNaviageteOnEnter(event) {\n        if (event.keyCode === 13) {\n            const clickEvent = new CustomEvent('click');\n            const buttonElement = this.refs[`${this.wizardKey}-${this.buttons.next.name}`];\n            if (buttonElement) {\n                buttonElement.dispatchEvent(clickEvent);\n            }\n        }\n    }\n    /**\n     * Handles save on 'Enter' key event in a wizard form.\n     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.\n     */\n    handleSaveOnEnter(event) {\n        if (event.keyCode === 13) {\n            const clickEvent = new CustomEvent('click');\n            const buttonElement = this.refs[`${this.wizardKey}-${this.buttons.submit.name}`];\n            if (buttonElement) {\n                buttonElement.dispatchEvent(clickEvent);\n            }\n        }\n    }\n    attachNav() {\n        if (this.component.navigateOnEnter) {\n            this.addEventListener(document, 'keyup', this.handleNaviageteOnEnter.bind(this));\n        }\n        if (this.component.saveOnEnter) {\n            this.addEventListener(document, 'keyup', this.handleSaveOnEnter.bind(this));\n        }\n        lodash_1.default.each(this.buttons, (button) => {\n            const buttonElement = this.refs[`${this.wizardKey}-${button.name}`];\n            this.addEventListener(buttonElement, 'click', (event) => {\n                event.preventDefault();\n                // Disable the button until done.\n                buttonElement.setAttribute('disabled', 'disabled');\n                this.setLoading(buttonElement, true);\n                // Call the button method, then re-enable the button.\n                this[button.method]().then(() => {\n                    buttonElement.removeAttribute('disabled');\n                    this.setLoading(buttonElement, false);\n                }).catch(() => {\n                    buttonElement.removeAttribute('disabled');\n                    this.setLoading(buttonElement, false);\n                });\n            });\n        });\n    }\n    /**\n     * Emits an event indicating that a wizard page has been selected.\n     * @param {number} index - Index of the selected wizard page in the `pages` array.\n     * @fires emit - Emits the 'wizardPageSelected' event with the page object and index.\n     */\n    emitWizardPageSelected(index) {\n        this.emit('wizardPageSelected', this.pages[index], index);\n    }\n    attachHeader() {\n        var _a, _b;\n        const isAllowPrevious = this.isAllowPrevious();\n        this.attachTooltips(this.refs[`${this.wizardKey}-tooltip`], (_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.tooltip);\n        if (this.isBreadcrumbClickable() || isAllowPrevious) {\n            (_b = this.refs[`${this.wizardKey}-link`]) === null || _b === void 0 ? void 0 : _b.forEach((link, index) => {\n                if (!isAllowPrevious || index <= this.enabledIndex) {\n                    this.addEventListener(link, 'click', (event) => {\n                        this.emit('wizardNavigationClicked', this.pages[index]);\n                        event.preventDefault();\n                        return this.setPage(index).then(() => {\n                            this.emitWizardPageSelected(index);\n                        });\n                    });\n                }\n            });\n        }\n    }\n    detachNav() {\n        if (this.component.navigateOnEnter) {\n            this.removeEventListener(document, 'keyup', this.handleNaviageteOnEnter.bind(this));\n        }\n        if (this.component.saveOnEnter) {\n            this.removeEventListener(document, 'keyup', this.handleSaveOnEnter.bind(this));\n        }\n        lodash_1.default.each(this.buttons, (button) => {\n            this.removeEventListener(this.refs[`${this.wizardKey}-${button.name}`], 'click');\n        });\n    }\n    detachHeader() {\n        if (this.refs[`${this.wizardKey}-link`]) {\n            this.refs[`${this.wizardKey}-link`].forEach((link) => {\n                this.removeEventListener(link, 'click');\n            });\n        }\n    }\n    transformPages() {\n        const allComponents = [];\n        const components = this.getSortedComponents(this);\n        let defferedComponents = [];\n        this.allPages = [];\n        // Get all components including all nested components and line up in the correct order\n        const getAllComponents = (nestedComp, compsArr, pushAllowed = true) => {\n            const nestedPages = [];\n            const dataArrayComponents = ['datagrid', 'editgrid', 'dynamicWizard'];\n            const currentComponents = (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.subForm) ? this.getSortedComponents(nestedComp.subForm) : (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.components) || [];\n            const visibleComponents = currentComponents.filter(comp => comp._visible);\n            const filteredComponents = visibleComponents.filter(comp => !dataArrayComponents.includes(comp.component.type) && (comp.type !== 'form' || comp.isNestedWizard));\n            const additionalComponents = currentComponents.filter(comp => { var _a; return ((_a = comp.subForm) === null || _a === void 0 ? void 0 : _a._form.display) !== 'wizard'; });\n            let hasNested = false;\n            (0, utils_1.eachComponent)(filteredComponents, (comp) => {\n                if (comp && comp.component) {\n                    if (comp.component.type === 'panel' && (comp === null || comp === void 0 ? void 0 : comp.parent.wizard) && !getAllComponents(comp, compsArr, false)) {\n                        if (pushAllowed) {\n                            this.setRootPanelId(comp);\n                            nestedPages.push(comp);\n                        }\n                        hasNested = true;\n                    }\n                    if (comp.isNestedWizard && comp.subForm) {\n                        const hasNestedForm = getAllComponents(comp, nestedPages, pushAllowed);\n                        if (!hasNested) {\n                            hasNested = hasNestedForm;\n                        }\n                    }\n                }\n            }, true);\n            if (nestedComp.component.type === 'panel') {\n                if (!hasNested && pushAllowed) {\n                    this.setRootPanelId(nestedComp);\n                    compsArr.push(nestedComp);\n                }\n                if (hasNested && additionalComponents.length) {\n                    const newComp = lodash_1.default.clone(nestedComp);\n                    newComp.components = additionalComponents;\n                    this.setRootPanelId(newComp);\n                    defferedComponents.push(newComp);\n                }\n            }\n            if (pushAllowed) {\n                compsArr.push(...defferedComponents, ...nestedPages);\n                defferedComponents = [];\n            }\n            return hasNested;\n        };\n        components.forEach((component) => {\n            if (component.visible) {\n                getAllComponents(component, allComponents);\n            }\n        }, []);\n        // recalculate pages only for root wizards, including the situation when the wizard is in a wrapper\n        if (this.localRoot && this.id === this.localRoot.id) {\n            allComponents.forEach((comp, index) => {\n                comp.eachComponent((component) => {\n                    component.page = index;\n                });\n            });\n        }\n        this.allPages = allComponents;\n    }\n    getSortedComponents({ components, originalComponents }) {\n        const currentComponents = [];\n        const currentPages = [];\n        if (components && components.length) {\n            components.map(page => {\n                if (page.component.type === 'panel') {\n                    currentPages[page.component.key || page.component.title] = page;\n                }\n            });\n        }\n        originalComponents === null || originalComponents === void 0 ? void 0 : originalComponents.forEach((item) => {\n            if (!item.key) {\n                item.key = item.title;\n            }\n            if (currentPages[item.key]) {\n                currentComponents.push(currentPages[item.key]);\n            }\n        });\n        return currentComponents;\n    }\n    findRootPanel(component) {\n        var _a;\n        return ((_a = component.parent) === null || _a === void 0 ? void 0 : _a.parent) ? this.findRootPanel(component.parent) : component;\n    }\n    setRootPanelId(component) {\n        var _a;\n        if (component.rootPanelId && component.rootPanelId !== component.id) {\n            return;\n        }\n        const parent = ((_a = component.parent) === null || _a === void 0 ? void 0 : _a.parent) ? this.findRootPanel(component.parent) : component;\n        component.rootPanelId = parent.id;\n    }\n    establishPages(data = this.data) {\n        this.pages = [];\n        this.prefixComps = [];\n        this.suffixComps = [];\n        const visible = [];\n        const currentPages = {};\n        const pageOptions = Object.assign(Object.assign({}, (lodash_1.default.clone(this.options))), (this.parent ? { root: this } : {}));\n        if (this.components && this.components.length) {\n            this.components.forEach(page => {\n                if (page.component.type === 'panel') {\n                    currentPages[page.component.key || page.component.title] = page;\n                }\n            });\n        }\n        if (this.originalComponents) {\n            this.originalComponents.forEach((item) => {\n                if (item.type === 'panel') {\n                    if (!item.key) {\n                        item.key = item.title;\n                    }\n                    let page = currentPages[item.key];\n                    const forceShow = this.shouldForceShow(item);\n                    const forceHide = this.shouldForceHide(item);\n                    let isVisible = !page\n                        ? (0, utils_1.checkCondition)(item, data, data, this.component, this) && !item.hidden\n                        : page.visible;\n                    if (forceShow) {\n                        isVisible = true;\n                    }\n                    else if (forceHide) {\n                        isVisible = false;\n                    }\n                    if (isVisible) {\n                        visible.push(item);\n                        if (page) {\n                            this.pages.push(page);\n                        }\n                    }\n                    if (!page && isVisible) {\n                        page = this.createComponent(item, pageOptions);\n                        page.visible = isVisible;\n                        this.pages.push(page);\n                        page.eachComponent((component) => {\n                            component.page = (this.pages.length - 1);\n                        });\n                    }\n                }\n                else if (item.type !== 'button') {\n                    if (!this.pages.length) {\n                        this.prefixComps.push(this.createComponent(item, pageOptions));\n                    }\n                    else {\n                        this.suffixComps.push(this.createComponent(item, pageOptions));\n                    }\n                }\n            });\n        }\n        if (this.pages.length) {\n            this.emit('pagesChanged');\n        }\n        this.transformPages();\n        if (this.allPages && this.allPages.length) {\n            this.updatePages();\n        }\n        return visible;\n    }\n    updatePages() {\n        this.pages = this.allPages;\n    }\n    addComponents() {\n        this.establishPages();\n    }\n    setPage(num) {\n        if (num === this.page) {\n            return Promise.resolve();\n        }\n        if (num >= 0 && num < this.pages.length) {\n            this.page = num;\n            this.pageFieldLogic(num);\n            this.getNextPage();\n            let parentNum = num;\n            if (this.hasSubWizards) {\n                const pageFromPages = this.pages[num];\n                const pageFromComponents = this.components[num];\n                if (!pageFromComponents || (pageFromPages === null || pageFromPages === void 0 ? void 0 : pageFromPages.id) !== pageFromComponents.id) {\n                    parentNum = this.components.findIndex(comp => {\n                        var _a, _b;\n                        return comp.id === ((_b = (_a = this.pages) === null || _a === void 0 ? void 0 : _a[parentNum]) === null || _b === void 0 ? void 0 : _b.rootPanelId);\n                    });\n                }\n            }\n            if (!this._seenPages.includes(parentNum)) {\n                this._seenPages = this._seenPages.concat(parentNum);\n            }\n            this.redraw().then(() => {\n                this.checkData(this.submission.data);\n                this.triggerCaptcha(this.currentPage.components);\n                const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();\n                if (this.alert) {\n                    this.showErrors(errors, true, true);\n                }\n            });\n            return Promise.resolve();\n        }\n        else if (!this.pages.length) {\n            this.redraw();\n            return Promise.resolve();\n        }\n        return Promise.reject('Page not found');\n    }\n    pageFieldLogic(page) {\n        var _a;\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[page]) {\n            // Handle field logic on pages.\n            this.component = this.pages[page].component;\n            this.originalComponent = (0, utils_1.fastCloneDeep)(this.component);\n            this.fieldLogic(this.data);\n            // If disabled changed, be sure to distribute the setting.\n            this.disabled = this.shouldDisabled;\n        }\n    }\n    get currentPage() {\n        return (this.pages && (this.pages.length >= this.page)) ? this.pages[this.page] : { components: [] };\n    }\n    getNextPage() {\n        var _a;\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[this.page]) {\n            const data = this.submission.data;\n            const form = this.pages[this.page].component;\n            // Check conditional nextPage\n            if (form) {\n                const page = this.pages.length > (this.page + 1) && !this.showAllErrors ? this.page + 1 : -1;\n                if (form.nextPage) {\n                    const next = this.evaluate(form.nextPage, {\n                        next: page,\n                        data,\n                        page,\n                        form\n                    }, 'next');\n                    if (next === null) {\n                        this.currentNextPage = null;\n                        return null;\n                    }\n                    const pageNum = parseInt(next, 10);\n                    if (!isNaN(parseInt(pageNum, 10)) && isFinite(pageNum)) {\n                        this.currentNextPage = pageNum;\n                        return pageNum;\n                    }\n                    this.currentNextPage = this.getPageIndexByKey(next);\n                    return this.currentNextPage;\n                }\n                this.currentNextPage = page;\n                return page;\n            }\n            this.currentNextPage = null;\n        }\n        return null;\n    }\n    getPreviousPage() {\n        return this.page - 1;\n    }\n    beforeSubmit() {\n        const pages = this.getPages({ all: true });\n        return Promise.all(pages.map((page) => {\n            this.triggerButtonCaptcha(page);\n            page.options.beforeSubmit = true;\n            return page.beforeSubmit();\n        }));\n    }\n    beforePage(next) {\n        return new Promise((resolve, reject) => {\n            this.hook(next ? 'beforeNext' : 'beforePrev', this.currentPage, this.submission, (err) => {\n                if (err) {\n                    this.showErrors(err, true);\n                    reject(err);\n                }\n                const form = this.currentPage;\n                if (form) {\n                    form.beforePage(next).then(resolve).catch(reject);\n                }\n                else {\n                    resolve();\n                }\n            });\n        });\n    }\n    emitNextPage() {\n        this.emit('nextPage', { page: this.page, submission: this.submission });\n    }\n    nextPage() {\n        // Read-only forms should not worry about validation before going to next page, nor should they submit.\n        if (this.options.readOnly) {\n            return this.beforePage(true).then(() => {\n                return this.setPage(this.getNextPage()).then(() => {\n                    this.emitNextPage();\n                });\n            });\n        }\n        // Validate the form before going to the next page\n        const currentPageErrors = this.validateCurrentPage({ dirty: true });\n        const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : currentPageErrors;\n        // allow going to the next page if the current page is valid, even if there are form level errors\n        if (currentPageErrors.length === 0) {\n            this.checkData(this.submission.data);\n            return this.beforePage(true).then(() => {\n                return this.setPage(this.getNextPage()).then(() => {\n                    if (!(this.options.readOnly || this.editMode) && this.enabledIndex < this.page) {\n                        this.enabledIndex = this.page;\n                        this.redraw();\n                    }\n                    this.emitNextPage();\n                });\n            });\n        }\n        else {\n            this.currentPage.components.forEach((comp) => comp.setPristine(false));\n            this.scrollIntoView(this.element, true);\n            return Promise.reject(this.showErrors(errors, true));\n        }\n    }\n    validateCurrentPage(flags = {}) {\n        var _a, _b, _c, _d;\n        const components = (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components.map((component) => component.component);\n        // Accessing the parent ensures the right instance (whether it's the parent Wizard or a nested Wizard) performs its validation\n        if ((_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.parent) {\n            return (_c = this.currentPage) === null || _c === void 0 ? void 0 : _c.parent.validateComponents(components, this.root.data, flags);\n        }\n        return (_d = this.currentPage) === null || _d === void 0 ? void 0 : _d.validateComponents(components, this.root ? this.root.data : this.data, flags);\n    }\n    emitPrevPage() {\n        this.emit('prevPage', { page: this.page, submission: this.submission });\n    }\n    prevPage() {\n        return this.beforePage().then(() => {\n            return this.setPage(this.getPreviousPage()).then(() => {\n                this.emitPrevPage();\n            });\n        });\n    }\n    cancel(noconfirm) {\n        if (this.options.readOnly) {\n            return Promise.resolve();\n        }\n        if (super.cancel(noconfirm)) {\n            this.setPristine(true);\n            return this.setPage(0).then(() => {\n                if (this.enabledIndex) {\n                    this.enabledIndex = 0;\n                }\n                this.onChange({ resetValue: true });\n                this.redraw();\n                return this.page;\n            });\n        }\n        return Promise.resolve();\n    }\n    getPageIndexByKey(key) {\n        let pageIndex = this.page;\n        this.pages.forEach((page, index) => {\n            if (page.component.key === key) {\n                pageIndex = index;\n                return false;\n            }\n        });\n        return pageIndex;\n    }\n    get schema() {\n        return this.wizard;\n    }\n    setComponentSchema() {\n        const pageKeys = {};\n        this.originalComponents = [];\n        this.component.components.map((item) => {\n            if (item.type === 'panel') {\n                item.key = (0, utils_1.uniqueKey)(pageKeys, (item.key || 'panel'));\n                pageKeys[item.key] = true;\n                if (this.wizard.full) {\n                    this.options.show = this.options.show || {};\n                    this.options.show[item.key] = true;\n                }\n                else if (Object.prototype.hasOwnProperty.call(this.wizard, 'full')\n                    && !lodash_1.default.isEqual(this.originalOptions.show, this.options.show)) {\n                    this.options.show = Object.assign({}, (this.originalOptions.show || {}));\n                }\n            }\n            this.originalComponents.push(lodash_1.default.clone(item));\n        });\n        if (!Object.keys(pageKeys).length) {\n            const newPage = {\n                type: 'panel',\n                title: 'Page 1',\n                label: 'Page 1',\n                key: 'page1',\n                components: this.component.components\n            };\n            this.component.components = [newPage];\n            this.originalComponents.push(lodash_1.default.clone(newPage));\n        }\n    }\n    setForm(form, flags = {}) {\n        if (!form) {\n            return;\n        }\n        return super.setForm(form, flags);\n    }\n    onSetForm(clonedForm, initialForm) {\n        this.component.components = (this.parent ? initialForm.components : clonedForm.components) || [];\n        this.setComponentSchema();\n    }\n    setEditMode(submission) {\n        if (!this.editMode && submission._id && !this.options.readOnly) {\n            this.editMode = true;\n            this.redraw();\n        }\n    }\n    setValue(submission, flags = {}, ignoreEstablishment) {\n        const changed = this.getPages({ all: true }).reduce((changed, page) => {\n            return this.setNestedValue(page, submission.data, flags, changed) || changed;\n        }, false);\n        this.mergeData(this.data, submission.data);\n        if (changed) {\n            this.pageFieldLogic(this.page);\n        }\n        submission.data = this.data;\n        this._submission = submission;\n        if (!ignoreEstablishment) {\n            this.establishPages(submission.data);\n        }\n        this.setEditMode(submission);\n        return changed;\n    }\n    isClickable(page, index) {\n        return this.page !== index && (0, utils_1.firstNonNil)([\n            lodash_1.default.get(page, 'breadcrumbClickable'),\n            this.options.breadcrumbSettings.clickable\n        ]);\n    }\n    hasButton(name, nextPage = this.getNextPage()) {\n        // get page options with global options as default values\n        const { previous = this.options.buttonSettings.showPrevious, cancel = this.options.buttonSettings.showCancel, submit = this.options.buttonSettings.showSubmit, next = this.options.buttonSettings.showNext } = lodash_1.default.get(this.currentPage, 'component.buttonSettings', {});\n        switch (name) {\n            case 'previous':\n                return previous && (this.getPreviousPage() > -1);\n            case 'next':\n                return next && (nextPage !== null) && (nextPage !== -1);\n            case 'cancel':\n                return cancel && !this.options.readOnly;\n            case 'submit':\n                return submit && !this.options.readOnly && ((nextPage === null) || (this.page === (this.pages.length - 1)));\n            default:\n                return true;\n        }\n    }\n    pageId(page) {\n        if (page.key) {\n            // Some panels have the same key....\n            return `${page.key}-${page.title}`;\n        }\n        else if (page.components &&\n            page.components.length > 0) {\n            return this.pageId(page.components[0]);\n        }\n        else {\n            return page.title;\n        }\n    }\n    onChange(flags, changed, modified, changes) {\n        var _a;\n        super.onChange(flags, changed, modified, changes);\n        // The onChange loop doesn't need all components for wizards\n        const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();\n        if (this.alert) {\n            this.showErrors(errors, true, true);\n        }\n        // If the pages change, need to redraw the header.\n        const currentPanels = this.pages;\n        // calling this.establishPages() updates/mutates this.pages to be the current pages\n        this.establishPages();\n        const newPanels = this.pages;\n        const currentNextPage = this.currentNextPage;\n        const panelsUpdated = !lodash_1.default.isEqual(newPanels, currentPanels);\n        if (((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.id) && this.pages.length && (!this.hasSubWizards || (this.hasSubWizards && panelsUpdated))) {\n            const newIndex = this.pages.findIndex(page => page.id === this.currentPanel.id);\n            if (newIndex !== -1)\n                this.setPage(newIndex);\n        }\n        if (panelsUpdated || (flags && flags.fromSubmission)) {\n            this.redrawHeader();\n        }\n        // If the next page changes, then make sure to redraw navigation.\n        if (currentNextPage !== this.getNextPage()) {\n            this.redrawNavigation();\n        }\n        if (this.options.readOnly && (this.prefixComps.length || this.suffixComps.length)) {\n            this.redraw();\n        }\n    }\n    rebuild() {\n        const currentPage = this.page;\n        const setCurrentPage = () => this.setPage(currentPage);\n        return super.rebuild().then(setCurrentPage);\n    }\n    checkValidity(data, dirty, row, currentPageOnly, childErrors = []) {\n        if (!this.checkCondition(row, data)) {\n            this.setCustomValidity('');\n            return true;\n        }\n        const components = !currentPageOnly || this.isLastPage()\n            ? this.getComponents()\n            : this.currentPage.components;\n        return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, currentPageOnly, childErrors) && check, true);\n    }\n    get errors() {\n        return !this.isLastPage() && !this.submitted ? this.currentPage.errors : super.errors;\n    }\n    focusOnComponent(key) {\n        const component = this.getComponent(key);\n        if (component) {\n            let topPanel = component.parent;\n            while (!(topPanel.parent instanceof Wizard)) {\n                topPanel = topPanel.parent;\n            }\n            const pageIndex = this.pages.findIndex(page => page.id === topPanel.id);\n            if (pageIndex >= 0) {\n                const page = this.pages[pageIndex];\n                if (page && page !== this.currentPage) {\n                    return this.setPage(pageIndex).then(() => {\n                        this.showErrors(this.validate(this.localData, { dirty: true }));\n                        super.focusOnComponent(key);\n                    });\n                }\n            }\n        }\n        return super.focusOnComponent(key);\n    }\n    triggerButtonCaptcha(page) {\n        if (!page.components) {\n            return;\n        }\n        let captchaComponent;\n        page.eachComponent((component) => {\n            if (/^(re)?captcha$/.test(component.component.type) &&\n                component.component.eventType === 'buttonClick' &&\n                component.component.buttonKey === 'submit') {\n                captchaComponent = component;\n            }\n        });\n        if (captchaComponent) {\n            captchaComponent.verify(`submitClick`);\n        }\n    }\n}\nexports[\"default\"] = Wizard;\nWizard.setBaseUrl = Formio_1.Formio.setBaseUrl;\nWizard.setApiUrl = Formio_1.Formio.setApiUrl;\nWizard.setAppUrl = Formio_1.Formio.setAppUrl;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Wizard.js?");
 
 /***/ }),
 
@@ -4927,7 +4927,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Component_1 = __importDefault(__webpack_require__(/*! ./_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst utils_1 = __importDefault(__webpack_require__(/*! ./_classes/component/editForm/utils */ \"./lib/cjs/components/_classes/component/editForm/utils.js\"));\nconst Component_form_1 = __importDefault(__webpack_require__(/*! ./_classes/component/Component.form */ \"./lib/cjs/components/_classes/component/Component.form.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nclass Components {\n    static set EditFormUtils(value) {\n        Components._editFormUtils = value;\n    }\n    static get EditFormUtils() {\n        return Components._editFormUtils;\n    }\n    static set baseEditForm(value) {\n        Components._baseEditForm = value;\n    }\n    static get baseEditForm() {\n        return Components._baseEditForm;\n    }\n    static recalculateComponents() {\n        if (window && window.Formio && window.Formio.AllComponents) {\n            Components.setComponents(window.Formio.AllComponents);\n        }\n    }\n    static get components() {\n        if (!Components._components) {\n            Components._components = {};\n        }\n        return Components._components;\n    }\n    static setComponents(comps) {\n        // Set the tableView method on BaseComponent.\n        if (comps.base) {\n            // Implement the tableView method.\n            comps.base.tableView = function (value, options) {\n                const comp = Components.create(options.component, options.options || {}, options.data || {}, true);\n                return comp.getView(value);\n            };\n        }\n        lodash_1.default.assign(Components.components, comps);\n    }\n    static addComponent(name, comp) {\n        return Components.setComponent(name, comp);\n    }\n    static setComponent(name, comp) {\n        Components.components[name] = comp;\n    }\n    static create(component, options, data) {\n        let comp = null;\n        if (component.type && Components.components.hasOwnProperty(component.type)) {\n            comp = new Components.components[component.type](component, options, data);\n        }\n        else if (component.arrayTree) {\n            // eslint-disable-next-line new-cap\n            comp = new Components.components['datagrid'](component, options, data);\n        }\n        else if (component.tree) {\n            // eslint-disable-next-line new-cap\n            comp = new Components.components['nesteddata'](component, options, data);\n        }\n        else if (Array.isArray(component.components)) {\n            // eslint-disable-next-line new-cap\n            comp = new Components.components['nested'](component, options, data);\n        }\n        else if (options && options.server) {\n            // eslint-disable-next-line new-cap\n            comp = new Components.components['hidden'](component, options, data);\n        }\n        else {\n            comp = new Component_1.default(component, options, data);\n        }\n        if (comp.path) {\n            comp.componentsMap[comp.path] = comp;\n        }\n        // Reset the componentMatches on the root element if any new component is created.\n        let parent = comp.parent;\n        while (parent) {\n            parent.componentMatches = {};\n            parent = parent.parent;\n        }\n        return comp;\n    }\n}\nComponents._editFormUtils = utils_1.default;\nComponents._baseEditForm = Component_form_1.default;\nexports[\"default\"] = Components;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/Components.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Component_1 = __importDefault(__webpack_require__(/*! ./_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst utils_1 = __importDefault(__webpack_require__(/*! ./_classes/component/editForm/utils */ \"./lib/cjs/components/_classes/component/editForm/utils.js\"));\nconst Component_form_1 = __importDefault(__webpack_require__(/*! ./_classes/component/Component.form */ \"./lib/cjs/components/_classes/component/Component.form.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nclass Components {\n    static set EditFormUtils(value) {\n        Components._editFormUtils = value;\n    }\n    static get EditFormUtils() {\n        return Components._editFormUtils;\n    }\n    static set baseEditForm(value) {\n        Components._baseEditForm = value;\n    }\n    static get baseEditForm() {\n        return Components._baseEditForm;\n    }\n    static recalculateComponents() {\n        if (window && window.Formio && window.Formio.AllComponents) {\n            Components.setComponents(window.Formio.AllComponents);\n        }\n    }\n    static get components() {\n        if (!Components._components) {\n            Components._components = {};\n        }\n        return Components._components;\n    }\n    static setComponents(comps) {\n        // Set the tableView method on BaseComponent.\n        if (comps.base) {\n            // Implement the tableView method.\n            comps.base.tableView = function (value, options) {\n                const comp = Components.create(options.component, options.options || {}, options.data || {}, true);\n                return comp.getView(value);\n            };\n        }\n        lodash_1.default.assign(Components.components, comps);\n    }\n    static addComponent(name, comp) {\n        return Components.setComponent(name, comp);\n    }\n    static setComponent(name, comp) {\n        Components.components[name] = comp;\n    }\n    static create(component, options, data) {\n        let comp = null;\n        if (component.type && Components.components.hasOwnProperty(component.type)) {\n            comp = new Components.components[component.type](component, options, data);\n        }\n        else if (component.arrayTree) {\n            // eslint-disable-next-line new-cap\n            comp = new Components.components['datagrid'](component, options, data);\n        }\n        else if (component.tree || (component.input && Array.isArray(component.components))) {\n            // eslint-disable-next-line new-cap\n            comp = new Components.components['nesteddata'](component, options, data);\n        }\n        else if (Array.isArray(component.components)) {\n            // eslint-disable-next-line new-cap\n            comp = new Components.components['nested'](component, options, data);\n        }\n        else if (options && options.server) {\n            // eslint-disable-next-line new-cap\n            comp = new Components.components['hidden'](component, options, data);\n        }\n        else {\n            comp = new Component_1.default(component, options, data);\n        }\n        if (comp.path) {\n            comp.componentsMap[comp.path] = comp;\n        }\n        // Reset the componentMatches on the root element if any new component is created.\n        let parent = comp.parent;\n        while (parent) {\n            parent.componentMatches = {};\n            parent = parent.parent;\n        }\n        return comp;\n    }\n}\nComponents._editFormUtils = utils_1.default;\nComponents._baseEditForm = Component_form_1.default;\nexports[\"default\"] = Components;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/Components.js?");
 
 /***/ }),
 
@@ -4949,7 +4949,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 }));\n/* globals Quill, ClassicEditor, CKEDITOR */\nconst vanilla_text_mask_1 = __webpack_require__(/*! @formio/vanilla-text-mask */ \"./node_modules/@formio/vanilla-text-mask/dist/vanillaTextMask.js\");\nconst tippy_js_1 = __importDefault(__webpack_require__(/*! tippy.js */ \"./node_modules/tippy.js/dist/tippy.esm.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst ismobilejs_1 = __importDefault(__webpack_require__(/*! ismobilejs */ \"./node_modules/ismobilejs/esm/index.js\"));\nconst process_1 = __webpack_require__(/*! @formio/core/process */ \"./node_modules/@formio/core/lib/process/index.js\");\nconst Formio_1 = __webpack_require__(/*! ../../../Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __importDefault(__webpack_require__(/*! ../../../utils */ \"./lib/cjs/utils/index.js\"));\nconst utils_2 = __webpack_require__(/*! ../../../utils */ \"./lib/cjs/utils/index.js\");\nconst Element_1 = __importDefault(__webpack_require__(/*! ../../../Element */ \"./lib/cjs/Element.js\"));\nconst ComponentModal_1 = __importDefault(__webpack_require__(/*! ../componentModal/ComponentModal */ \"./lib/cjs/components/_classes/componentModal/ComponentModal.js\"));\nconst widgets_1 = __importDefault(__webpack_require__(/*! ../../../widgets */ \"./lib/cjs/widgets/index.js\"));\nconst addons_1 = __importDefault(__webpack_require__(/*! ../../../addons */ \"./lib/cjs/addons/index.js\"));\nconst uploadAdapter_1 = __webpack_require__(/*! ../../../providers/storage/uploadAdapter */ \"./lib/cjs/providers/storage/uploadAdapter.js\");\nconst en_1 = __importDefault(__webpack_require__(/*! ../../../translations/en */ \"./lib/cjs/translations/en.js\"));\nconst Templates_1 = __importDefault(__webpack_require__(/*! ../../../templates/Templates */ \"./lib/cjs/templates/Templates.js\"));\nconst isIEBrowser = utils_1.default.getBrowserInfo().ie;\n/**\n * This is the Component class\n which all elements within the FormioForm derive from.\n */\nclass Component extends Element_1.default {\n    static schema(...sources) {\n        return lodash_1.default.merge({\n            /**\n             * Determines if this component provides an input.\n             */\n            input: true,\n            /**\n             * The data key for this component (how the data is stored in the database).\n             */\n            key: '',\n            /**\n             * The input placeholder for this component.\n             */\n            placeholder: '',\n            /**\n             * The input prefix\n             */\n            prefix: '',\n            /**\n             * The custom CSS class to provide to this component.\n             */\n            customClass: '',\n            /**\n             * The input suffix.\n             */\n            suffix: '',\n            /**\n             * If this component should allow an array of values to be captured.\n             */\n            multiple: false,\n            /**\n             * The default value of this component.\n             */\n            defaultValue: null,\n            /**\n             * If the data of this component should be protected (no GET api requests can see the data)\n             */\n            protected: false,\n            /**\n             * Validate if the value of this component should be unique within the form.\n             */\n            unique: false,\n            /**\n             * If the value of this component should be persisted within the backend api database.\n             */\n            persistent: true,\n            /**\n             * Determines if the component should be within the form, but not visible.\n             */\n            hidden: false,\n            /**\n             * If the component should be cleared when hidden.\n             */\n            clearOnHide: true,\n            /**\n             * This will refresh this component options when this field changes.\n             */\n            refreshOn: '',\n            /**\n             * This will redraw the component when this field changes.\n             */\n            redrawOn: '',\n            /**\n             * If this component should be included as a column within a submission table.\n             */\n            tableView: false,\n            /**\n             * If this component should be rendering in modal.\n             */\n            modalEdit: false,\n            /**\n             * The input label provided to this component.\n             */\n            label: '',\n            dataGridLabel: false,\n            labelPosition: 'top',\n            description: '',\n            errorLabel: '',\n            tooltip: '',\n            hideLabel: false,\n            tabindex: '',\n            disabled: false,\n            autofocus: false,\n            dbIndex: false,\n            customDefaultValue: '',\n            calculateValue: '',\n            calculateServer: false,\n            widget: null,\n            /**\n             * Attributes that will be assigned to the input elements of this component.\n             */\n            attributes: {},\n            /**\n             * This will perform the validation on either \"change\" or \"blur\" of the input element.\n             */\n            validateOn: 'change',\n            /**\n             * The validation criteria for this component.\n             */\n            validate: {\n                /**\n                 * If this component is required.\n                 */\n                required: false,\n                /**\n                 * Custom JavaScript validation.\n                 */\n                custom: '',\n                /**\n                 * If the custom validation should remain private (only the backend will see it and execute it).\n                 */\n                customPrivate: false,\n                /**\n                 * If this component should implement a strict date validation if the Calendar widget is implemented.\n                 */\n                strictDateValidation: false,\n                multiple: false,\n                unique: false\n            },\n            /**\n             * The simple conditional settings for a component.\n             */\n            conditional: {\n                show: null,\n                when: null,\n                eq: ''\n            },\n            overlay: {\n                style: '',\n                left: '',\n                top: '',\n                width: '',\n                height: '',\n            },\n            allowCalculateOverride: false,\n            encrypted: false,\n            showCharCount: false,\n            showWordCount: false,\n            properties: {},\n            allowMultipleMasks: false,\n            addons: [],\n        }, ...sources);\n    }\n    /**\n     * Return the simple condition settings as part of the component.\n     * @returns {object} - The simple conditional settings.\n     */\n    static get conditionOperatorsSettings() {\n        return {\n            operators: ['isEqual', 'isNotEqual', 'isEmpty', 'isNotEmpty'],\n            valueComponent() {\n                return {\n                    type: 'textfield',\n                    widget: {\n                        type: 'input'\n                    }\n                };\n            }\n        };\n    }\n    /**\n     * Return the array of possible types of component value absed on its schema.\n     * @param schema\n     * @returns {Array}\n     */\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return utils_1.default.getComponentSavedTypes(schema) || [utils_1.default.componentValueTypes.any];\n    }\n    /**\n     * Provides a table view for this component. Override if you wish to do something different than using getView\n     * method of your instance.\n     * @param value\n     * @param options\n     */\n    /* eslint-disable no-unused-vars */\n    static tableView(value, options) { }\n    /* eslint-enable no-unused-vars */\n    /**\n     * Initialize a new Component.\n     * @param {object} component - The component JSON you wish to initialize.\n     * @param {object} options - The options for this component.\n     * @param {object} data - The global data submission object this component will belong.\n     */\n    /* eslint-disable max-statements */\n    constructor(component, options, data) {\n        var _a, _b, _c, _d;\n        super(Object.assign({\n            renderMode: 'form',\n            attachMode: 'full',\n            noDefaults: false\n        }, options || {}));\n        // Restore the component id.\n        if (component && component.id) {\n            this.id = component.id;\n        }\n        /**\n         * Determines if this component has a condition assigned to it.\n         * @type {null}\n         * @private\n         */\n        this._hasCondition = null;\n        /**\n         * The row index for this component.\n         */\n        this._rowIndex = undefined;\n        /**\n         * References to dom elements\n         */\n        this.refs = {};\n        // Allow global override for any component JSON.\n        if (component &&\n            this.options.components &&\n            this.options.components[component.type]) {\n            lodash_1.default.merge(component, this.options.components[component.type]);\n        }\n        /**\n         * An array of all the children components errors.\n         */\n        this.childErrors = [];\n        /**\n         * Last validation errors that have occured.\n         */\n        this._errors = [];\n        this._visibleErrors = [];\n        /**\n         * The Form.io component JSON schema.\n         * @type {*}\n         */\n        this.component = this.mergeSchema(component || {});\n        // Add the id to the component.\n        this.component.id = this.id;\n        this.afterComponentAssign();\n        // Save off the original component to be used in logic.\n        this.originalComponent = (0, utils_2.fastCloneDeep)(this.component);\n        /**\n         * If the component has been attached\n         */\n        this.attached = false;\n        /**\n         * If the component has been rendered\n         */\n        this.rendered = false;\n        /**\n         * The data object in which this component resides.\n         * @type {*}\n         */\n        this._data = data || {};\n        /**\n         * Tool tip text after processing\n         * @type {string}\n         */\n        this.tooltip = '';\n        /**\n         * The row path of this component.\n         * @type {number}\n         */\n        this.row = this.options.row;\n        /**\n         * Points to a flat map of child components (if applicable).\n         * @type {object}\n         */\n        this.childComponentsMap = {};\n        /**\n         * Determines if this component is disabled, or not.\n         * @type {boolean}\n         */\n        this._disabled = (0, utils_2.boolValue)(this.component.disabled) ? this.component.disabled : false;\n        /**\n         * Points to the root component, usually the FormComponent.\n         * @type {Component}\n         */\n        this.root = this.options.root || this;\n        this.localRoot = this.options.localRoot || this;\n        /**\n         * If this input has been input and provided value.\n         * @type {boolean}\n         */\n        this.pristine = true;\n        /**\n         * Points to the parent component.\n         * @type {Component}\n         */\n        this.parent = this.options.parent;\n        /**\n         * The component paths for this component.\n         * @type {import('@formio/core').ComponentPaths} - The component paths.\n         */\n        this.paths = utils_1.default.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths), { dataIndex: this.options.rowIndex === undefined ? (_d = (_c = this.parent) === null || _c === void 0 ? void 0 : _c.paths) === null || _d === void 0 ? void 0 : _d.dataIndex : this.options.rowIndex }));\n        this.options.name = this.options.name || 'data';\n        this._path = '';\n        // Needs for Nextgen Rules Engine\n        this.resetCaches();\n        /**\n         * Determines if this component is visible, or not.\n         */\n        this._parentVisible = this.options.hasOwnProperty('parentVisible') ? this.options.parentVisible : true;\n        this._visible = this._parentVisible && (this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden);\n        this._parentDisabled = false;\n        /**\n         * The reference attribute name for this component\n         */\n        this._referenceAttributeName = 'ref';\n        /**\n         * Used to trigger a new change in this component.\n         * @type {Function} - Call to trigger a change in this component.\n         */\n        let changes = [];\n        let lastChanged = null;\n        let triggerArgs = [];\n        const _triggerChange = lodash_1.default.debounce((...args) => {\n            if (this.root) {\n                this.root.changing = false;\n            }\n            triggerArgs = [];\n            if (!args[1] && lastChanged) {\n                // Set the changed component if one isn't provided.\n                args[1] = lastChanged;\n            }\n            if (lodash_1.default.isEmpty(args[0]) && lastChanged) {\n                // Set the flags if it is empty and lastChanged exists.\n                args[0] = lastChanged.flags;\n            }\n            lastChanged = null;\n            args[3] = changes;\n            const retVal = this.onChange(...args);\n            changes = [];\n            return retVal;\n        }, 100);\n        this.triggerChange = (...args) => {\n            if (args[1]) {\n                // Make sure that during the debounce that we always track lastChanged component, even if they\n                // don't provide one later.\n                lastChanged = args[1];\n                changes.push(lastChanged);\n            }\n            if (this.root) {\n                this.root.changing = true;\n            }\n            if (args.length) {\n                triggerArgs = args;\n            }\n            return _triggerChange(...triggerArgs);\n        };\n        /**\n         * Used to trigger a redraw event within this component.\n         * @type {Function}\n         */\n        this.triggerRedraw = lodash_1.default.debounce(this.redraw.bind(this), 100);\n        /**\n         * list of attached tooltips\n         * @type {Array}\n         */\n        this.tooltips = [];\n        /**\n         * List of attached addons\n         * @type {Array}\n         */\n        this.addons = [];\n        // To force this component to be invalid.\n        this.invalid = false;\n        if (this.component) {\n            this.type = this.component.type;\n            if (this.allowData && this.key) {\n                this.options.name += `[${this.key}]`;\n                // If component is visible or not set to clear on hide, set the default value.\n                if (!this.shouldConditionallyClear()) {\n                    if (!this.hasValue()) {\n                        if (this.shouldAddDefaultValue) {\n                            this.dataValue = this.defaultValue;\n                        }\n                    }\n                    else {\n                        // Ensure the dataValue is set.\n                        /* eslint-disable  no-self-assign */\n                        this.dataValue = this.dataValue;\n                        /* eslint-enable  no-self-assign */\n                    }\n                }\n            }\n            /**\n             * The element information for creating the input element.\n             * @type {*}\n             */\n            this.info = this.elementInfo();\n        }\n        // Allow anyone to hook into the component creation.\n        this.hook('component');\n        if (!this.options.skipInit) {\n            this.init();\n        }\n    }\n    /* eslint-enable max-statements */\n    get componentsMap() {\n        var _a;\n        return ((_a = this.root) === null || _a === void 0 ? void 0 : _a.childComponentsMap) || {};\n    }\n    /**\n     * Returns if the parent should conditionally clear.\n     * @returns {boolean} - If the parent should conditionally clear.\n     */\n    parentShouldConditionallyClear() {\n        let currentParent = this.parent;\n        while (currentParent) {\n            if (currentParent.shouldConditionallyClear(true)) {\n                return true;\n            }\n            currentParent = currentParent.parent;\n        }\n        return false;\n    }\n    parentConditionallyHidden() {\n        let currentParent = this.parent;\n        while (currentParent) {\n            if (currentParent.conditionallyHidden(true)) {\n                return true;\n            }\n            currentParent = currentParent.parent;\n        }\n        return false;\n    }\n    get data() {\n        return this._data;\n    }\n    set data(value) {\n        this._data = value;\n    }\n    mergeSchema(component = {}) {\n        return lodash_1.default.defaultsDeep(component, this.defaultSchema);\n    }\n    // Allow componets to notify when ready.\n    get ready() {\n        return Promise.resolve(this);\n    }\n    get isPDFReadOnlyMode() {\n        return this.parent &&\n            this.parent.form &&\n            (this.parent.form.display === 'pdf') &&\n            this.options.readOnly;\n    }\n    get labelInfo() {\n        const label = {};\n        label.hidden = this.labelIsHidden();\n        label.className = '';\n        label.labelPosition = this.component.labelPosition;\n        label.tooltipClass = `${this.iconClass('question-sign')} text-muted`;\n        const isPDFReadOnlyMode = this.isPDFReadOnlyMode;\n        if (this.hasInput && this.component.validate && (0, utils_2.boolValue)(this.component.validate.required) && !isPDFReadOnlyMode) {\n            label.className += ' field-required';\n        }\n        if (label.hidden) {\n            label.className += ' control-label--hidden';\n        }\n        if (this.info.attr.id) {\n            label.for = this.info.attr.id;\n        }\n        return label;\n    }\n    init() {\n        var _a;\n        this.disabled = this.shouldDisabled;\n        this._visible = (this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden);\n        if ((_a = this.component.addons) === null || _a === void 0 ? void 0 : _a.length) {\n            this.component.addons.forEach((addon) => this.createAddon(addon));\n        }\n    }\n    /**\n     * Get Row Index.\n     * @returns {number} - The row index.\n     */\n    get rowIndex() {\n        return this._rowIndex;\n    }\n    /**\n     * Set Row Index to row and update each component.\n     * @param {number} value - The row index.\n     * @returns {void}\n     */\n    set rowIndex(value) {\n        var _a, _b;\n        this.paths = utils_1.default.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths) || {})), { dataIndex: value }));\n        this._rowIndex = value;\n    }\n    afterComponentAssign() {\n        //implement in extended classes\n    }\n    createAddon(addonConfiguration) {\n        var _a;\n        const name = addonConfiguration.name;\n        if (!name) {\n            return;\n        }\n        const settings = ((_a = addonConfiguration.settings) === null || _a === void 0 ? void 0 : _a.data) || {};\n        const Addon = addons_1.default[name.value];\n        let addon = null;\n        if (Addon) {\n            const supportedComponents = Addon.info.supportedComponents;\n            const supportsThisComponentType = !(supportedComponents === null || supportedComponents === void 0 ? void 0 : supportedComponents.length) ||\n                supportedComponents.indexOf(this.component.type) !== -1;\n            if (supportsThisComponentType) {\n                addon = new Addon(settings, this);\n                this.addons.push(addon);\n            }\n            else {\n                console.warn(`Addon ${name.label} does not support component of type ${this.component.type}.`);\n            }\n        }\n        return addon;\n    }\n    teardown() {\n        if (this.element) {\n            delete this.element.component;\n            delete this.element;\n        }\n        delete this._currentForm;\n        delete this.parent;\n        delete this.root;\n        delete this.triggerChange;\n        delete this.triggerRedraw;\n        if (this.options) {\n            delete this.options.root;\n            delete this.options.parent;\n            delete this.options.i18next;\n        }\n        super.teardown();\n    }\n    destroy(all = false) {\n        super.destroy(all);\n        this.detach();\n        this.addons.forEach((addon) => addon.destroy());\n        if (all) {\n            this.teardown();\n        }\n    }\n    get shouldDisabled() {\n        return this.options.readOnly || this.component.disabled || (this.options.hasOwnProperty('disabled') && this.options.disabled[this.key]);\n    }\n    get isInputComponent() {\n        return !this.component.hasOwnProperty('input') || this.component.input;\n    }\n    get allowData() {\n        return this.hasInput;\n    }\n    get hasInput() {\n        return this.isInputComponent || (this.refs.input && this.refs.input.length);\n    }\n    get defaultSchema() {\n        return Component.schema();\n    }\n    get key() {\n        return lodash_1.default.get(this.component, 'key', '');\n    }\n    get path() {\n        return this.paths.dataPath;\n    }\n    set path(path) {\n        throw new Error('Should not be setting the path of a component.');\n    }\n    set parentVisible(value) {\n        this._parentVisible = value;\n    }\n    get parentVisible() {\n        return this._parentVisible;\n    }\n    set parentDisabled(value) {\n        this._parentDisabled = value;\n    }\n    get parentDisabled() {\n        return this._parentDisabled;\n    }\n    shouldForceVisibility(component, visibility) {\n        if (!this.options[visibility]) {\n            return false;\n        }\n        if (!component) {\n            component = this.component;\n        }\n        if (lodash_1.default.isArray(this.options[visibility])) {\n            return this.options[visibility].includes(component.key);\n        }\n        return this.options[visibility][component.key];\n    }\n    shouldForceHide(component) {\n        return this.shouldForceVisibility(component, 'hide');\n    }\n    shouldForceShow(component) {\n        return this.shouldForceVisibility(component, 'show');\n    }\n    /**\n     * Sets the component visibility.\n     * @param {boolean} value - Whether the component should be visible or not.\n     */\n    set visible(value) {\n        if (this._visible !== value) {\n            // Skip if this component is set to visible and is supposed to be hidden.\n            if (value && this.shouldForceHide()) {\n                return;\n            }\n            // Skip if this component is set to hidden and is supposed to be shown.\n            if (!value && this.shouldForceShow()) {\n                return;\n            }\n            this._visible = value;\n            this.redraw();\n        }\n    }\n    /**\n     * Returns the component visibility\n     * @returns {boolean} - Whether the component is visible or not.\n     */\n    get visible() {\n        // Show only if visibility changes or if we are in builder mode or if hidden fields should be shown.\n        if (this.builderMode || this.previewMode || this.options.showHiddenFields) {\n            return true;\n        }\n        if (this.shouldForceHide()) {\n            return false;\n        }\n        if (this.shouldForceShow()) {\n            return true;\n        }\n        return this._visible && this._parentVisible;\n    }\n    get logicallyHidden() {\n        if (this._logicallyHidden && !this.component.hidden) {\n            this._logicallyHidden = false;\n        }\n        return this._logicallyHidden;\n    }\n    shouldConditionallyClear(skipParent = false) {\n        // Skip if this component has clearOnHide set to false.\n        if (this.component.clearOnHide === false) {\n            return false;\n        }\n        // If the component is logically hidden, then it is conditionally hidden and should clear.\n        if (this.logicallyHidden) {\n            return true;\n        }\n        // If we have a condition and it is not conditionally visible, the it should conditionally clear.\n        if (this.hasCondition() && !this.conditionallyVisible()) {\n            return true;\n        }\n        if (skipParent) {\n            // Stop recurrsion for the parent checks.\n            return false;\n        }\n        // If this component has a set value, then it should ONLY clear if a parent is hidden\n        // and has the clearOnHide set to true.\n        if (this.hasSetValue) {\n            return this.parentShouldConditionallyClear();\n        }\n        // Clear the value if the parent is conditionally hidden.\n        return this.parentConditionallyHidden();\n    }\n    conditionallyHidden(skipParent = false) {\n        if (this.logicallyHidden) {\n            return true;\n        }\n        if (!this.hasCondition() && !skipParent) {\n            return this.parentConditionallyHidden();\n        }\n        // Return if we are not conditionally visible (conditionallyHidden)\n        if (!this.conditionallyVisible()) {\n            return true;\n        }\n        if (skipParent) {\n            // Stop recurrsion for the parent checks.\n            return false;\n        }\n        // Check the parent.\n        return this.parentConditionallyHidden();\n    }\n    get currentForm() {\n        return this._currentForm;\n    }\n    set currentForm(instance) {\n        this._currentForm = instance;\n    }\n    get fullMode() {\n        return this.options.attachMode === 'full';\n    }\n    get builderMode() {\n        return this.options.attachMode === 'builder';\n    }\n    get calculatedPath() {\n        console.error('component.calculatedPath was deprecated, use component.path instead.');\n        return this.path;\n    }\n    get labelPosition() {\n        return this.component.labelPosition;\n    }\n    get labelWidth() {\n        const width = this.component.labelWidth;\n        return width >= 0 ? width : 30;\n    }\n    get labelMargin() {\n        const margin = this.component.labelMargin;\n        return margin >= 0 ? margin : 3;\n    }\n    get isAdvancedLabel() {\n        return [\n            'left-left',\n            'left-right',\n            'right-left',\n            'right-right'\n        ].includes(this.labelPosition);\n    }\n    get labelPositions() {\n        return this.labelPosition.split('-');\n    }\n    get skipInEmail() {\n        return false;\n    }\n    rightDirection(direction) {\n        if (this.options.condensedMode) {\n            return false;\n        }\n        return direction === 'right';\n    }\n    getLabelInfo(isCondensed = false) {\n        const isRightPosition = this.rightDirection(this.labelPositions[0]);\n        const isLeftPosition = this.labelPositions[0] === 'left' || isCondensed;\n        const isRightAlign = this.rightDirection(this.labelPositions[1]);\n        let contentMargin = '';\n        if (this.component.hideLabel) {\n            const margin = isCondensed ? 0 : this.labelWidth + this.labelMargin;\n            contentMargin = isRightPosition ? `margin-right: ${margin}%` : '';\n            contentMargin = isLeftPosition ? `margin-left: ${margin}%` : '';\n        }\n        const labelStyles = `\n      flex: ${this.labelWidth};\n      ${isRightPosition ? 'margin-left' : 'margin-right'}: ${this.labelMargin}%;\n    `;\n        const contentStyles = `\n      flex: ${100 - this.labelWidth - this.labelMargin};\n      ${contentMargin};\n      ${this.component.hideLabel ? `max-width: ${100 - this.labelWidth - this.labelMargin}` : ''};\n    `;\n        return {\n            isRightPosition,\n            isRightAlign,\n            labelStyles,\n            contentStyles\n        };\n    }\n    /**\n     * Returns only the schema that is different from the default.\n     * @param {object} schema - The \"full\" json schema for the component.\n     * @param {object} defaultSchema - The \"default\" json schema for the component.\n     * @param {boolean} recursion - If we are currently in a recursive loop.\n     * @returns {object} - The minified json schema for this component.\n     */\n    getModifiedSchema(schema, defaultSchema, recursion) {\n        const modified = {};\n        if (!defaultSchema) {\n            return schema;\n        }\n        lodash_1.default.each(schema, (val, key) => {\n            if (!lodash_1.default.isArray(val) && lodash_1.default.isObject(val) && defaultSchema.hasOwnProperty(key)) {\n                const subModified = this.getModifiedSchema(val, defaultSchema[key], true);\n                if (!lodash_1.default.isEmpty(subModified)) {\n                    modified[key] = subModified;\n                }\n            }\n            else if (lodash_1.default.isArray(val)) {\n                if (val.length !== 0 && !lodash_1.default.isEqual(val, defaultSchema[key])) {\n                    modified[key] = val;\n                }\n            }\n            else if ((!recursion && (key === 'type')) ||\n                (!recursion && (key === 'key')) ||\n                (!recursion && (key === 'label')) ||\n                (!recursion && (key === 'input')) ||\n                (!recursion && (key === 'tableView')) ||\n                (val !== '' && !defaultSchema.hasOwnProperty(key)) ||\n                (val !== '' && val !== defaultSchema[key]) ||\n                (defaultSchema[key] && val !== defaultSchema[key])) {\n                modified[key] = val;\n            }\n        });\n        return modified;\n    }\n    /**\n     * Returns the JSON schema for this component.\n     * @returns {object} - The JSON schema for this component.\n     */\n    get schema() {\n        return (0, utils_2.fastCloneDeep)(this.getModifiedSchema(lodash_1.default.omit(this.component, 'id'), this.defaultSchema));\n    }\n    /**\n     * Returns true if component is inside DataGrid\n     * @returns {boolean} - True if component is inside DataGrid\n     */\n    get isInDataGrid() {\n        return this.inDataGrid;\n    }\n    /**\n     * Translate a text using the i18n system.\n     * @param {string} text - The i18n identifier.\n     * @param {object} params - The i18n parameters to use for translation.\n     * @param {...any} args - Additional arguments to pass to the translation library.\n     * @returns {string} - The translated text.\n     */\n    t(text, params = {}, ...args) {\n        if (!text) {\n            return '';\n        }\n        // Use _userInput: true to ignore translations from defaults\n        if (text in en_1.default && params._userInput) {\n            return text;\n        }\n        params.data = params.data || this.rootValue;\n        params.row = params.row || this.data;\n        params.component = params.component || this.component;\n        return super.t(text, params, ...args);\n    }\n    labelIsHidden() {\n        return !this.component.label ||\n            ((!this.isInDataGrid && this.component.hideLabel) ||\n                (this.isInDataGrid && !this.component.dataGridLabel) ||\n                this.options.floatingLabels ||\n                this.options.inputsOnly) && !this.builderMode;\n    }\n    transform(type, value) {\n        const frameworkTemplates = this.options.template ? Templates_1.default.templates[this.options.template] : Templates_1.default.current;\n        return frameworkTemplates.hasOwnProperty('transform')\n            ? frameworkTemplates.transform(type, value, this)\n            : (type, value) => value;\n    }\n    getTemplate(names, modes) {\n        modes = Array.isArray(modes) ? modes : [modes];\n        names = Array.isArray(names) ? names : [names];\n        if (!modes.includes('form')) {\n            modes.push('form');\n        }\n        let result = null;\n        if (this.options.templates) {\n            result = this.checkTemplate(this.options.templates, names, modes);\n            if (result) {\n                return result;\n            }\n        }\n        const frameworkTemplates = this.options.template ? Templates_1.default.templates[this.options.template] : Templates_1.default.current;\n        result = this.checkTemplate(frameworkTemplates, names, modes);\n        if (result) {\n            return result;\n        }\n        // Default back to bootstrap if not defined.\n        const name = names[names.length - 1];\n        const templatesByName = Templates_1.default.defaultTemplates[name];\n        if (!templatesByName) {\n            return { template: `Unknown template: ${name}` };\n        }\n        const templateByMode = this.checkTemplateMode(templatesByName, modes);\n        if (templateByMode) {\n            return { template: templateByMode };\n        }\n        return { template: templatesByName.form };\n    }\n    checkTemplate(templates, names, modes) {\n        for (const name of names) {\n            const templatesByName = templates[name];\n            if (templatesByName) {\n                const { referenceAttributeName } = templatesByName;\n                const templateByMode = this.checkTemplateMode(templatesByName, modes);\n                if (templateByMode) {\n                    return { template: templateByMode, referenceAttributeName };\n                }\n            }\n        }\n        return null;\n    }\n    checkTemplateMode(templatesByName, modes) {\n        for (const mode of modes) {\n            const templateByMode = templatesByName[mode];\n            if (templateByMode) {\n                return templateByMode;\n            }\n        }\n        return null;\n    }\n    getFormattedAttribute(attr) {\n        return attr ? this.t(attr, { _userInput: true }).replace(/\"/g, '&quot;') : '';\n    }\n    getFormattedTooltip(tooltipValue) {\n        const tooltip = this.interpolate(tooltipValue || '').replace(/(?:\\r\\n|\\r|\\n)/g, '<br />');\n        return this.getFormattedAttribute(tooltip);\n    }\n    isHtmlRenderMode() {\n        return this.options.renderMode === 'html';\n    }\n    renderTemplate(name, data = {}, modeOption = '') {\n        // Need to make this fall back to form if renderMode is not found similar to how we search templates.\n        const mode = modeOption || this.options.renderMode || 'form';\n        data.component = this.component;\n        data.self = this;\n        data.options = this.options;\n        data.readOnly = this.options.readOnly;\n        data.iconClass = this.iconClass.bind(this);\n        data.size = this.size.bind(this);\n        data.t = this.t.bind(this);\n        data.transform = this.transform.bind(this);\n        data.id = data.id || this.id;\n        data.key = data.key || this.key;\n        data.value = data.value || this.dataValue;\n        data.disabled = this.disabled;\n        data.builder = this.builderMode;\n        data.render = (...args) => {\n            console.warn(`Form.io 'render' template function is deprecated.\n      If you need to render template (template A) inside of another template (template B),\n      pass pre-compiled template A (use this.renderTemplate('template_A_name') as template context variable for template B`);\n            return this.renderTemplate(...args);\n        };\n        data.label = data.labelInfo || this.labelInfo;\n        data.tooltip = this.getFormattedTooltip(this.component.tooltip);\n        // Allow more specific template names\n        const names = [\n            `${name}-${this.component.type}-${this.key}`,\n            `${name}-${this.component.type}`,\n            `${name}-${this.key}`,\n            `${name}`,\n        ];\n        // Allow template alters.\n        const { referenceAttributeName, template } = this.getTemplate(names, mode);\n        if (referenceAttributeName) {\n            this._referenceAttributeName = referenceAttributeName;\n        }\n        return this.hook(`render${name.charAt(0).toUpperCase() + name.substring(1, name.length)}`, this.interpolate(template, data), data, mode);\n    }\n    /**\n     * Sanitize an html string.\n     * @param {string} dirty - The dirty html string to sanitize.\n     * @param {boolean} forceSanitize - If we should force the sanitize to occur.\n     * @param {object} options - The options for the sanitize.\n     * @returns {*} - The sanitized html string.\n     */\n    sanitize(dirty, forceSanitize = false, options = {}) {\n        var _a;\n        if (!this.shouldSanitizeValue && !forceSanitize) {\n            return dirty;\n        }\n        return utils_1.default.sanitize(dirty, {\n            sanitizeConfig: lodash_1.default.merge(((_a = this.options) === null || _a === void 0 ? void 0 : _a.sanitizeConfig) || {}, options || {}),\n        });\n    }\n    /**\n     * Render a template string into html.\n     * @param {string} template - The template to render.\n     * @param {object} data - The data to provide to the template.\n     * @returns {HTMLElement | string} - The created element or an empty string if template is not specified.\n     */\n    renderString(template, data) {\n        if (!template) {\n            return '';\n        }\n        // Interpolate the template and populate\n        return this.interpolate(template, data);\n    }\n    /**\n     * Allows for modification of the component value prior to submission.\n     * @param {*} input - The input to be modified.\n     * @returns {*} - The modified input mapping for the extended component.\n     */\n    performInputMapping(input) {\n        return input;\n    }\n    /**\n     * Returns the component \"widget\" if one is available.\n     * @returns {Widget|null} - The widget instance. null if not available.\n     */\n    get widget() {\n        var _a;\n        const settings = this.component.widget;\n        if (settings && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.shadowRoot)) {\n            settings.shadowRoot = this.root.shadowRoot;\n        }\n        const widget = settings && widgets_1.default[settings.type] ? new widgets_1.default[settings.type](settings, this.component, this) : null;\n        return widget;\n    }\n    /**\n     * Returns the native supported browser language.\n     * @returns {string|null} - The native browser language that is supported.\n     */\n    getBrowserLanguage() {\n        const nav = window.navigator;\n        const browserLanguagePropertyKeys = ['language', 'browserLanguage', 'systemLanguage', 'userLanguage'];\n        let language;\n        // support for HTML 5.1 \"navigator.languages\"\n        if (Array.isArray(nav.languages)) {\n            for (let i = 0; i < nav.languages.length; i++) {\n                language = nav.languages[i];\n                if (language && language.length) {\n                    return language.split(';')[0];\n                }\n            }\n        }\n        // support for other well known properties in browsers\n        for (let i = 0; i < browserLanguagePropertyKeys.length; i++) {\n            language = nav[browserLanguagePropertyKeys[i]];\n            if (language && language.length) {\n                return language.split(';')[0];\n            }\n        }\n        return null;\n    }\n    /**\n     * Called before a next and previous page is triggered allowing the components to perform special functions.\n     * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the next/previous page navigation.\n     */\n    beforePage() {\n        return Promise.resolve(true);\n    }\n    /**\n     * Called before the next page is triggered allowing the components to hook into the page navigation and perform tasks.\n     * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the next page navigation.\n     */\n    beforeNext() {\n        return this.beforePage(true);\n    }\n    /**\n     * Called before a submission is triggered allowing the components to perform special async functions.\n     * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the submission.\n     */\n    beforeSubmit() {\n        return Promise.resolve(true);\n    }\n    /**\n     * Return the submission timezone.\n     * @returns {string} - The submission timezone.\n     */\n    get submissionTimezone() {\n        this.options.submissionTimezone = this.options.submissionTimezone || lodash_1.default.get(this.root, 'options.submissionTimezone');\n        return this.options.submissionTimezone;\n    }\n    /**\n     * Return the current timezone.\n     * @returns {string} - The current timezone.\n     */\n    get timezone() {\n        return this.getTimezone(this.component);\n    }\n    /**\n     * Return the current timezone.\n     * @param {object} settings - Settings to control how the timezone should be returned.\n     * @returns {string} - The current timezone.\n     */\n    getTimezone(settings) {\n        if (settings.timezone) {\n            return settings.timezone;\n        }\n        if (settings.displayInTimezone === 'utc') {\n            return 'UTC';\n        }\n        const submissionTimezone = this.submissionTimezone;\n        if (submissionTimezone &&\n            ((settings.displayInTimezone === 'submission') ||\n                ((this.options.pdf || this.options.server) && (settings.displayInTimezone === 'viewer')))) {\n            return submissionTimezone;\n        }\n        // Return current timezone if none are provided.\n        return (0, utils_2.currentTimezone)();\n    }\n    /**\n     *\n     * @param {HTMLElement} element - The containing DOM element to query for the ref value.\n     * @param {object} refs - The references to load.\n     * @param {string} [referenceAttributeName] - The attribute name to use for the reference.\n     */\n    loadRefs(element, refs, referenceAttributeName) {\n        if (!element) {\n            return;\n        }\n        for (const ref in refs) {\n            const refType = refs[ref];\n            const isString = typeof refType === 'string';\n            const selector = isString && refType.includes('scope')\n                ? `:scope > [${referenceAttributeName || this._referenceAttributeName || 'ref'}=\"${ref}\"]`\n                : `[${referenceAttributeName || this._referenceAttributeName || 'ref'}=\"${ref}\"]`;\n            if (isString && refType.startsWith('single')) {\n                this.refs[ref] = element.querySelector(selector);\n            }\n            else {\n                this.refs[ref] = element.querySelectorAll(selector);\n            }\n        }\n    }\n    /**\n     * Opens the modal element.\n     * @param {string} template - The template to use for the modal dialog.\n     */\n    setOpenModalElement(template = null) {\n        this.componentModal.setOpenModalElement(template || this.getModalPreviewTemplate());\n    }\n    /**\n     * Renders a modal preview template and returns the markup as a string\n     * @param {object|null|undefined} ctx - The rendering context\n     * @returns {string} - The modal preview markup\n     */\n    renderModalPreview(ctx) {\n        return this.renderTemplate('modalPreview', ctx || {});\n    }\n    /**\n     * Returns the modal preview template.\n     * @returns {string} - The modal preview template.\n     */\n    getModalPreviewTemplate() {\n        var _a;\n        const dataValue = this.component.type === 'password' ? this.dataValue.replace(/./g, '•') : this.dataValue;\n        let modalLabel;\n        if (this.hasInput && ((_a = this.component.validate) === null || _a === void 0 ? void 0 : _a.required) && !this.isPDFReadOnlyMode) {\n            modalLabel = { className: 'field-required' };\n        }\n        return this.renderModalPreview({\n            previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('Click to set value'),\n            messages: '',\n            labelInfo: modalLabel,\n        });\n    }\n    /**\n     * Performs a complete build of a component, which empties, renders, sets the content in the DOM, and then finally attaches events.\n     * @param {HTMLElement} element - The element to attach this component to.\n     * @returns {Promise<void>} - A promise that resolves when the component has been built.\n     */\n    build(element) {\n        element = element || this.element;\n        this.empty(element);\n        this.setContent(element, this.render());\n        return this.attach(element);\n    }\n    get hasModalSaveButton() {\n        return true;\n    }\n    /**\n     * Renders a component as an HTML string.\n     * @param {string} children - The contents of all the children HTML as a string.\n     * @param {boolean} topLevel - If this is the topmost component that is being rendered.\n     * @returns {string} - The rendered HTML string of a component.\n     */\n    render(children = `Unknown component: ${this.component.type}`, topLevel = false) {\n        const isVisible = this.visible;\n        this.rendered = true;\n        if (!this.builderMode && !this.previewMode && this.component.modalEdit) {\n            return ComponentModal_1.default.render(this, {\n                visible: isVisible,\n                showSaveButton: this.hasModalSaveButton,\n                id: this.id,\n                classes: this.className,\n                styles: this.customStyle,\n                children\n            }, topLevel);\n        }\n        else {\n            return this.renderTemplate('component', {\n                visible: isVisible,\n                id: this.id,\n                classes: this.className,\n                styles: this.customStyle,\n                children\n            }, topLevel);\n        }\n    }\n    /**\n     * Creates the tooltip instance using tippy.js and returns it\n     * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip\n     * @param {object|null|undefined} settings - tippy.js options\n     * @returns {import('tippy.js').Tippy} - tippy.js instance\n     */\n    createTooltip(tooltipEl, settings = {}) {\n        const tooltipAttribute = tooltipEl.getAttribute('data-tooltip');\n        const tooltipDataTitle = tooltipEl.getAttribute('data-title');\n        const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)\n            .replace(/(?:\\r\\n|\\r|\\n)/g, '<br />');\n        return (0, tippy_js_1.default)(tooltipEl, Object.assign(Object.assign({ allowHTML: true, trigger: 'mouseenter click focus', placement: 'right', zIndex: 10000, interactive: true }, settings), { content: this.t(this.sanitize(tooltipText), { _userInput: true }) }));\n    }\n    /**\n     * Attaches all the tooltips provided the refs object.\n     * @param {object} toolTipsRefs - The refs for the tooltips within your template.\n     * @returns {void}\n     */\n    attachTooltips(toolTipsRefs) {\n        toolTipsRefs === null || toolTipsRefs === void 0 ? void 0 : toolTipsRefs.forEach((tooltip, index) => {\n            if (tooltip) {\n                this.tooltips[index] = this.createTooltip(tooltip);\n            }\n        });\n    }\n    /**\n     * Create a new component modal for this component.\n     * @param {HTMLElement} element - The element to attach the modal to.\n     * @param {boolean} modalShouldBeOpened - TRUE if the modal should open immediately.\n     * @param {any} currentValue - The current value of the component.\n     * @returns {ComponentModal} - The created component modal.\n     */\n    createComponentModal(element, modalShouldBeOpened, currentValue) {\n        return new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);\n    }\n    /**\n     * Attaches all event listensers for this component to the DOM elements that were rendered.\n     * @param {HTMLElement} element - The element to attach the listeners to.\n     * @returns {Promise<void>} - Resolves when the component is done attaching to the DOM.\n     */\n    attach(element) {\n        if (!this.builderMode && !this.previewMode && this.component.modalEdit) {\n            const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;\n            const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;\n            const openModalTemplate = this.componentModal && modalShouldBeOpened\n                ? this.componentModal.openModalTemplate\n                : null;\n            this.componentModal = this.createComponentModal(element, modalShouldBeOpened, currentValue);\n            this.setOpenModalElement(openModalTemplate);\n        }\n        this.attached = true;\n        this.setElement(element);\n        element.component = this;\n        // If this already has an id, get it from the dom. If SSR, it could be different from the initiated id.\n        if (this.element.id) {\n            this.id = this.element.id;\n            this.component.id = this.id;\n        }\n        this.loadRefs(element, {\n            messageContainer: 'single',\n            tooltip: 'multiple'\n        });\n        this.attachTooltips(this.refs.tooltip);\n        // Attach logic.\n        this.attachLogic();\n        this.autofocus();\n        // Allow global attach.\n        this.hook('attachComponent', element, this);\n        // Allow attach per component type.\n        const type = this.component.type;\n        if (type) {\n            this.hook(`attach${type.charAt(0).toUpperCase() + type.substring(1, type.length)}`, element, this);\n        }\n        this.restoreFocus();\n        this.addons.forEach((addon) => addon.attach(element));\n        return Promise.resolve();\n    }\n    /**\n     * Restors the \"focus\" on a component after a redraw event has occured.\n     */\n    restoreFocus() {\n        var _a, _b, _c;\n        const isFocused = ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.focusedComponent) === null || _b === void 0 ? void 0 : _b.path) === this.path;\n        if (isFocused) {\n            this.loadRefs(this.element, { input: 'multiple' });\n            this.focus((_c = this.root.currentSelection) === null || _c === void 0 ? void 0 : _c.index);\n            this.restoreCaretPosition();\n        }\n    }\n    /**\n     * Adds a keyboard shortcut to this component.\n     * @param {HTMLElement} element - The element to attach the keyboard shortcut to.\n     * @param {string} shortcut - The keyboard shortcut to add.\n     * @returns {void}\n     */\n    addShortcut(element, shortcut) {\n        // Avoid infinite recursion.\n        if (!element || !this.root || (this.root === this)) {\n            return;\n        }\n        if (!shortcut) {\n            shortcut = this.component.shortcut;\n        }\n        this.root.addShortcut(element, shortcut);\n    }\n    /**\n     * Removes a keyboard shortcut from this component.\n     * @param {HTMLElement} element - The element to remove the keyboard shortcut from.\n     * @param {string} shortcut - The keyboard shortcut to remove.\n     * @returns {void}\n     */\n    removeShortcut(element, shortcut) {\n        // Avoid infinite recursion.\n        if (!element || (this.root === this)) {\n            return;\n        }\n        if (!shortcut) {\n            shortcut = this.component.shortcut;\n        }\n        this.root.removeShortcut(element, shortcut);\n    }\n    /**\n     * Remove all event handlers.\n     */\n    detach() {\n        // First iterate through each ref and delete the component so there are no dangling component references.\n        lodash_1.default.each(this.refs, (ref) => {\n            if (ref instanceof NodeList) {\n                ref.forEach((elem) => {\n                    delete elem.component;\n                });\n            }\n            else if (ref) {\n                delete ref.component;\n            }\n        });\n        this.refs = {};\n        this.removeEventListeners();\n        this.detachLogic();\n        if (this.tooltip) {\n            this.tooltip.destroy();\n        }\n    }\n    /**\n     * Determines if the component should be refreshed based on the path of another component that changed.\n     * @param {string} refreshData - The path of the data that needs to trigger a refresh.\n     * @param {boolean} changed - Flag that is true if the data has been changed.\n     * @param {any} flags - The flags for the checkData procedure.\n     * @returns {void}\n     */\n    checkRefresh(refreshData, changed, flags) {\n        var _a, _b;\n        const changePath = lodash_1.default.get(changed, 'instance.path', false);\n        // Don't let components change themselves.\n        if (changePath && this.path === changePath) {\n            return;\n        }\n        if (refreshData === 'data') {\n            this.refresh(this.data, changed, flags);\n        }\n        else if ((changePath && (((_b = (_a = changed.instance) === null || _a === void 0 ? void 0 : _a.paths) === null || _b === void 0 ? void 0 : _b.localPath) === refreshData)) && changed && changed.instance &&\n            // Make sure the changed component is not in a different \"context\". Solves issues where refreshOn being set\n            // in fields inside EditGrids could alter their state from other rows (which is bad).\n            this.inContext(changed.instance)) {\n            this.refresh(changed.value, changed, flags);\n        }\n    }\n    /**\n     * Iterates over a list of changes, and determines if the component should be refreshed if it is configured to refresh on any of those components.\n     * @param {Array<any>} changes - The list of components that have changed.\n     * @param {any} flags - The checkData flags.\n     * @returns {void}\n     */\n    checkRefreshOn(changes, flags = {}) {\n        changes = changes || [];\n        if (flags.noRefresh) {\n            return;\n        }\n        if (!changes.length && flags.changed) {\n            changes = [flags.changed];\n        }\n        const refreshOn = flags.fromBlur ? this.component.refreshOnBlur : this.component.refreshOn || this.component.redrawOn;\n        // If they wish to refresh on a value, then add that here.\n        if (refreshOn) {\n            if (Array.isArray(refreshOn)) {\n                refreshOn.forEach(refreshData => changes.forEach(changed => this.checkRefresh(refreshData, changed, flags)));\n            }\n            else {\n                changes.forEach(changed => this.checkRefresh(refreshOn, changed, flags));\n            }\n        }\n    }\n    /**\n     * Refreshes the component with a new value.\n     * @param {any} value - The latest value of the component to check if it needs to be refreshed.\n     * @returns {void}\n     */\n    refresh(value) {\n        if (this.hasOwnProperty('refreshOnValue')) {\n            this.refreshOnChanged = !lodash_1.default.isEqual(value, this.refreshOnValue);\n        }\n        else {\n            this.refreshOnChanged = true;\n        }\n        this.refreshOnValue = (0, utils_2.fastCloneDeep)(value);\n        if (this.refreshOnChanged) {\n            if (this.component.clearOnRefresh) {\n                this.setValue(null);\n            }\n            this.triggerRedraw();\n        }\n    }\n    /**\n     * Checks to see if a separate component is in the \"context\" of this component. This is determined by first checking\n     * if they share the same \"data\" object. It will then walk up the parent tree and compare its parents data objects\n     * with the components data and returns true if they are in the same context.\n     *\n     * Different rows of the same EditGrid, for example, are in different contexts.\n     * @param {any} component - The component to check if it is in the same context as this component.\n     * @returns {boolean} - TRUE if the component is in the same context as this component.\n     */\n    inContext(component) {\n        if (component.data === this.data) {\n            return true;\n        }\n        let parent = this.parent;\n        while (parent) {\n            if (parent.data === component.data) {\n                return true;\n            }\n            parent = parent.parent;\n        }\n        return false;\n    }\n    /**\n     * Determines if we are in \"view\" only mode.\n     * @returns {boolean} - TRUE if we are in \"view\" only mode.\n     */\n    get viewOnly() {\n        return this.options.readOnly && this.options.viewAsHtml;\n    }\n    /**\n     * Sets the HTMLElement for this component.\n     * @param {HTMLElement} element - The element that is attached to this component.\n     * @returns {void}\n     */\n    setElement(element) {\n        if (this.element) {\n            delete this.element.component;\n            delete this.element;\n        }\n        this.element = element;\n    }\n    /**\n     * Creates an element to hold the \"view only\" version of this component.\n     * @returns {HTMLElement} - The element for this component.\n     */\n    createViewOnlyElement() {\n        this.setElement(this.ce('dl', {\n            id: this.id\n        }));\n        if (this.element) {\n            // Ensure you can get the component info from the element.\n            this.element.component = this;\n        }\n        return this.element;\n    }\n    /**\n     * The default value for the \"view only\" mode of a component if the value is not provided.\n     * @returns {string} - The default value for this component.\n     */\n    get defaultViewOnlyValue() {\n        return '-';\n    }\n    /**\n     * Uses the widget to determine the output string.\n     * @param {any} value - The current value of the component.\n     * @param {any} options - The options for getValueAsString.\n     * @returns {any|Array<any>} - The value as a string.\n     */\n    getWidgetValueAsString(value, options) {\n        const noInputWidget = !this.refs.input || !this.refs.input[0] || !this.refs.input[0].widget;\n        if (!value || noInputWidget) {\n            if (!this.widget || !value) {\n                return value;\n            }\n            else {\n                return this.widget.getValueAsString(value);\n            }\n        }\n        if (Array.isArray(value)) {\n            const values = [];\n            value.forEach((val, index) => {\n                const widget = this.refs.input[index] && this.refs.input[index].widget;\n                if (widget) {\n                    values.push(widget.getValueAsString(val, options));\n                }\n            });\n            return values;\n        }\n        const widget = this.refs.input[0].widget;\n        return widget.getValueAsString(value, options);\n    }\n    /**\n     * Returns the value of the component as a string.\n     * @param {any} value - The value for this component.\n     * @param {any} options - The options for this component.\n     * @returns {string} - The string representation of the value of this component.\n     */\n    getValueAsString(value, options) {\n        if (!value) {\n            return '';\n        }\n        value = this.getWidgetValueAsString(value, options);\n        if (Array.isArray(value)) {\n            return value.join(', ');\n        }\n        if (lodash_1.default.isPlainObject(value)) {\n            return JSON.stringify(value);\n        }\n        if (value === null || value === undefined) {\n            return '';\n        }\n        const stringValue = value.toString();\n        return this.sanitize(stringValue);\n    }\n    /**\n     * Returns the string representation \"view\" of the component value.\n     * @param {any} value - The value of the component.\n     * @param {any} options - The options for this component.\n     * @returns {string} - The string representation of the value of this component.\n     */\n    getView(value, options) {\n        if (this.component.protected) {\n            return '--- PROTECTED ---';\n        }\n        return this.getValueAsString(value, options);\n    }\n    /**\n     * Updates the items list for this component. Useful for Select and other List component types.\n     * @param {...any} args - The arguments to pass to the onChange event.\n     * @returns {void}\n     */\n    updateItems(...args) {\n        this.restoreValue();\n        this.onChange(...args);\n    }\n    /**\n     * Returns the value for a specific item in a List type component.\n     * @param {any} data - The data for this component.\n     * @param {boolean} [forceUseValue] - if true, return 'value' property of the data\n     * @returns {any} - The value of the item.\n     */\n    itemValue(data, forceUseValue = false) {\n        if (lodash_1.default.isObject(data) && !lodash_1.default.isArray(data)) {\n            if (this.valueProperty) {\n                return lodash_1.default.get(data, this.valueProperty);\n            }\n            if (forceUseValue) {\n                return data.value;\n            }\n        }\n        return data;\n    }\n    /**\n     * Returns the item value for html mode.\n     * @param {any} value - The value for this component.\n     * @returns {any} - The value of the item for html mode.\n     */\n    itemValueForHTMLMode(value) {\n        if (Array.isArray(value)) {\n            const values = value.map(item => Array.isArray(item) ? this.itemValueForHTMLMode(item) : this.itemValue(item));\n            return values.join(', ');\n        }\n        return this.itemValue(value);\n    }\n    /**\n     * Creates a modal to input the value of this component.\n     * @param {HTMLElement} element - The element to attach the modal to.\n     * @param {any} attr - A list of attributes to add to the modal.\n     * @param {boolean} confirm - If we should add a confirmation to the modal that keeps it from closing unless confirmed.\n     * @returns {HTMLElement} - The created modal element.\n     */\n    createModal(element, attr, confirm) {\n        const dialog = this.ce('div', attr || {});\n        this.setContent(dialog, this.renderTemplate('dialog'));\n        // Add refs to dialog, not \"this\".\n        dialog.refs = {};\n        this.loadRefs.call(dialog, dialog, {\n            dialogOverlay: 'single',\n            dialogContents: 'single',\n            dialogClose: 'single',\n        });\n        dialog.refs.dialogContents.appendChild(element);\n        document.body.appendChild(dialog);\n        document.body.classList.add('modal-open');\n        dialog.close = () => {\n            document.body.classList.remove('modal-open');\n            dialog.dispatchEvent(new CustomEvent('close'));\n        };\n        this.addEventListener(dialog, 'close', () => this.removeChildFrom(dialog, document.body));\n        const close = (event) => {\n            event.preventDefault();\n            dialog.close();\n        };\n        const handleCloseClick = (e) => {\n            if (confirm) {\n                confirm().then(() => close(e))\n                    .catch(() => { });\n            }\n            else {\n                close(e);\n            }\n        };\n        this.addEventListener(dialog.refs.dialogOverlay, 'click', handleCloseClick);\n        this.addEventListener(dialog.refs.dialogClose, 'click', handleCloseClick);\n        return dialog;\n    }\n    /**\n     * Uses CSS classes to show or hide an element.\n     * @returns {boolean} - TRUE if the element has been css removed.\n     */\n    get optimizeRedraw() {\n        if (this.options.optimizeRedraw && this.element && !this.visible) {\n            this.addClass(this.element, 'formio-removed');\n            return true;\n        }\n        return false;\n    }\n    /**\n     * Retrieves the CSS class name of this component.\n     * @returns {string} - The class name of this component.\n     */\n    get className() {\n        let className = this.hasInput ? `${this.transform('class', 'form-group')} has-feedback ` : '';\n        className += `formio-component formio-component-${this.component.type} `;\n        // TODO: find proper way to avoid overriding of default type-based component styles\n        if (this.key && this.key !== 'form') {\n            className += `formio-component-${this.key} `;\n        }\n        if (this.component.multiple) {\n            className += 'formio-component-multiple ';\n        }\n        if (this.component.customClass) {\n            className += this.component.customClass;\n        }\n        if (this.hasInput && this.component.validate && (0, utils_2.boolValue)(this.component.validate.required)) {\n            className += ' required';\n        }\n        if (this.labelIsHidden()) {\n            className += ' formio-component-label-hidden';\n        }\n        if (!this.visible) {\n            className += ' formio-hidden';\n        }\n        return className;\n    }\n    /**\n     * Build the custom style from the layout values\n     * @returns {string} - The custom style\n     */\n    get customStyle() {\n        let customCSS = '';\n        lodash_1.default.each(this.component.style, (value, key) => {\n            if (value !== '') {\n                customCSS += `${key}:${value};`;\n            }\n        });\n        return customCSS;\n    }\n    /**\n     * Returns the component condition operator settings if available.\n     * @returns {object} - The component condition operator settings.\n     */\n    static get serverConditionSettings() {\n        return Component.conditionOperatorsSettings;\n    }\n    /**\n     * Returns if the application is on a mobile device.\n     * @returns {boolean} - TRUE if the application is on a mobile device.\n     */\n    get isMobile() {\n        return (0, ismobilejs_1.default)();\n    }\n    /**\n     * Returns the outside wrapping element of this component.\n     * @returns {HTMLElement} - The wrapping element of this component.\n     */\n    getElement() {\n        return this.element;\n    }\n    /**\n     * Create an evaluation context for all script executions and interpolations.\n     * @param {any} additional - Additional context to provide.\n     * @returns {any} - The evaluation context.\n     */\n    evalContext(additional) {\n        return super.evalContext(Object.assign({\n            component: this.component,\n            row: this.data,\n            rowIndex: this.rowIndex,\n            data: this.rootValue,\n            iconClass: this.iconClass.bind(this),\n            // Bind the translate function to the data context of any interpolated string.\n            // It is useful to translate strings in different scenarions (eg: custom edit grid templates, custom error messages etc.)\n            // and desirable to be publicly available rather than calling the internal {instance.t} function in the template string.\n            t: this.t.bind(this),\n            submission: (this.root ? this.root._submission : {\n                data: this.rootValue\n            }),\n            form: this.root ? this.root._form : {},\n            options: this.options,\n        }, additional));\n    }\n    /**\n     * Sets the pristine flag for this component.\n     * @param {boolean} pristine - TRUE to make pristine, FALSE not pristine.\n     */\n    setPristine(pristine) {\n        this.pristine = pristine;\n    }\n    /**\n     * Returns if the component is pristine.\n     * @returns {boolean} - TRUE if the component is pristine.\n     */\n    get isPristine() {\n        return this.pristine;\n    }\n    /**\n     * Sets the dirty flag for this component.\n     * @param {boolean} dirty - TRUE to make dirty, FALSE not dirty.\n     */\n    setDirty(dirty) {\n        this.dirty = dirty;\n    }\n    /**\n     * Returns if the component is dirty.\n     * @returns {boolean} - TRUE if the component is dirty.\n     */\n    get isDirty() {\n        return this.dirty;\n    }\n    /**\n     * Removes a value out of the data array and rebuild the rows.\n     * @param {number} index - The index of the data element to remove.\n     */\n    removeValue(index) {\n        this.splice(index);\n        this.redraw();\n        this.restoreValue();\n        this.triggerRootChange();\n    }\n    /**\n     * Returns the icon class for a given icon name.\n     * @param {string} name - The name of the icon you wish to fetch provided the icon class. This is the \"font awesome\" version of the name of the icon.\n     * @param {boolean} spinning - If the component should be spinning.\n     * @returns {string} - The icon class for the equivalent icon in the iconset we are using.\n     */\n    iconClass(name, spinning) {\n        const iconset = this.options.iconset || Templates_1.default.current.defaultIconset || 'fa';\n        return Templates_1.default.current.hasOwnProperty('iconClass')\n            ? Templates_1.default.current.iconClass(iconset, name, spinning)\n            : this.options.iconset === 'fa' ? Templates_1.default.defaultTemplates.iconClass(iconset, name, spinning) : name;\n    }\n    /**\n     * Returns the size css class names for our current template.\n     * @param {string} size - The size class name for the default iconset.\n     * @returns {string} - The size class for our component.\n     */\n    size(size) {\n        return Templates_1.default.current.hasOwnProperty('size')\n            ? Templates_1.default.current.size(size)\n            : size;\n    }\n    /**\n     * The readible name for this component.\n     * @returns {string} - The name of the component.\n     */\n    get name() {\n        return this.t(this.component.label || this.component.placeholder || this.key, { _userInput: true });\n    }\n    /**\n     * Returns the visible errors for this component.\n     * @returns {Array<object>} - The visible errors for this component.\n     */\n    get visibleErrors() {\n        return this._visibleErrors;\n    }\n    /**\n     * Returns all the errors for this component, visible or not.\n     * @returns {Array<object>} - All the errors for this component.\n     */\n    get errors() {\n        return this._errors;\n    }\n    /**\n     * Returns the error label for this component.\n     * @returns {string} - The error label for this component.\n     */\n    get errorLabel() {\n        return this.t(this.component.errorLabel\n            || this.component.label\n            || this.component.placeholder\n            || this.key);\n    }\n    /**\n     * Get the error message provided a certain type of error.\n     * @param {string} type - The type of error to fetch the message for.\n     * @returns {string} - The error message configured for this component.\n     */\n    errorMessage(type) {\n        return (this.component.errors && this.component.errors[type]) ? this.component.errors[type] : type;\n    }\n    /**\n     * Sets the content, innerHTML, of an element to the sanitized content.\n     * @param {HTMLElement} element - The element to set the innerHTML to.\n     * @param {string} content - The HTML string content that we wish to set.\n     * @param {boolean} forceSanitize - If we should force the content to be sanitized.\n     * @param {any} sanitizeOptions - The options for the sanitize function.\n     * @returns {boolean} - TRUE if the content was sanitized and set.\n     */\n    setContent(element, content, forceSanitize, sanitizeOptions) {\n        if (element instanceof HTMLElement) {\n            element.innerHTML = this.sanitize(content, forceSanitize, sanitizeOptions);\n            return true;\n        }\n        return false;\n    }\n    /**\n     * Restores the caret position in the input element after a refresh occurs.\n     */\n    restoreCaretPosition() {\n        var _a, _b, _c;\n        if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.currentSelection) {\n            if ((_b = this.refs.input) === null || _b === void 0 ? void 0 : _b.length) {\n                const { index } = this.root.currentSelection;\n                let input = this.refs.input[index];\n                const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test((i === null || i === void 0 ? void 0 : i.type) || '');\n                if (input) {\n                    if (isInputRangeSelectable(input)) {\n                        input.setSelectionRange(input.value.length, input.value.length);\n                    }\n                }\n                else {\n                    input = this.refs.input[this.refs.input.length];\n                    const lastCharacter = ((_c = input.value) === null || _c === void 0 ? void 0 : _c.length) || 0;\n                    if (isInputRangeSelectable(input)) {\n                        input.setSelectionRange(lastCharacter, lastCharacter);\n                    }\n                }\n            }\n        }\n    }\n    /**\n     * Redraw the component.\n     * @returns {Promise<void>} - A promise that resolves when the component is done redrawing.\n     */\n    redraw() {\n        // Don't bother if we have not built yet.\n        if (!this.element || !this.element.parentNode || this.optimizeRedraw) {\n            // Return a non-resolving promise.\n            return Promise.resolve();\n        }\n        this.detach();\n        this.emit('redraw');\n        // Since we are going to replace the element, we need to know it's position so we can find it in the parent's children.\n        const parent = this.element.parentNode;\n        const index = Array.prototype.indexOf.call(parent.children, this.element);\n        this.element.outerHTML = this.sanitize(this.render());\n        this.setElement(parent.children[index]);\n        return this.attach(this.element);\n    }\n    /**\n     * Rebuild and redraw a component.\n     * @returns {Promise<void>} - A promise that resolves when the component is done rebuilding and redrawing.\n     */\n    rebuild() {\n        this.destroy();\n        this.init();\n        this.visible = this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden;\n        return this.redraw();\n    }\n    /**\n     * Removes all event listeners attached to this component.\n     */\n    removeEventListeners() {\n        super.removeEventListeners();\n        this.tooltips.forEach(tooltip => tooltip.destroy());\n        this.tooltips = [];\n    }\n    /**\n     * Returns if the dom node has the classes provided.\n     * @param {HTMLElement} element - The element to check for the class.\n     * @param {string} className - The name of the class to check.\n     * @returns {boolean|void} - TRUE if the element has the class.\n     */\n    hasClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.hasClass(element, this.transform('class', className));\n    }\n    /**\n     * Adds a class to an HTML element.\n     * @param {HTMLElement} element - The dom element to add the class to.\n     * @param {string} className - The class name you wish to add.\n     * @returns {this|void} - The component instance.\n     */\n    addClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.addClass(element, this.transform('class', className));\n    }\n    /**\n     * Removes a class from an element.\n     * @param {HTMLElement} element - The element to remove the class from.\n     * @param {string} className - The class name to remove.\n     * @returns {this|void} - The component instance.\n     */\n    removeClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.removeClass(element, this.transform('class', className));\n    }\n    /**\n     * Determines if this component has a condition defined.\n     * @returns {boolean} - TRUE if the component has a condition defined.\n     */\n    hasCondition() {\n        if (this._hasCondition !== null) {\n            return this._hasCondition;\n        }\n        this._hasCondition = utils_1.default.hasCondition(this.component);\n        return this._hasCondition;\n    }\n    /**\n     * Check if this component is conditionally visible.\n     * @param {any} data - The data to check against.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean} - TRUE if the component is conditionally visible.\n     */\n    conditionallyVisible(data, row) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        if (this.builderMode || this.previewMode) {\n            return true;\n        }\n        data = data || (this.root ? this.root.data : {});\n        return this.checkCondition(row, data);\n    }\n    /**\n     * Checks the condition of this component.\n     *\n     * TODO: Switch row and data parameters to be consistent with other methods.\n     * @param {any} row - The row contextual data.\n     * @param {any} data - The global data object.\n     * @returns {boolean} - True if the condition applies to this component.\n     */\n    checkCondition(row, data) {\n        return utils_1.default.checkCondition(this.component, row || this.data, data || this.rootValue, this.root ? this.root._form : {}, this);\n    }\n    /**\n     * Check for conditionals and hide/show the element based on those conditions.\n     * @param {any} data - The data to check against.\n     * @param {any} flags - The flags passed to checkData function.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean} - TRUE if the component is visible.\n     */\n    checkComponentConditions(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        if (!this.builderMode & !this.previewMode && this.fieldLogic(data, row)) {\n            this.redraw();\n        }\n        // Check visibility\n        const visible = (this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden);\n        if (this.visible !== visible) {\n            this.visible = visible;\n        }\n        this.clearComponentOnHide();\n        return visible;\n    }\n    /**\n     * Checks conditions for this component and any sub components.\n     * @param {any} data - The data to check against.\n     * @param {any} flags - The flags passed to checkData function.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean} - TRUE if the component is visible.\n     */\n    checkConditions(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        return this.checkComponentConditions(data, flags, row);\n    }\n    /**\n     * Returns the component logic if applicable.\n     * @returns {Array<object>} - The component logic.\n     */\n    get logic() {\n        return this.component.logic || [];\n    }\n    /**\n     * Check all triggers and apply necessary actions.\n     * @param {any} data - The data to check against.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean|void} - TRUE if the component was altered.\n     */\n    fieldLogic(data = this.rootValue, row = this.data) {\n        const logics = this.logic;\n        // If there aren't logic, don't go further.\n        if (logics.length === 0) {\n            return;\n        }\n        const newComponent = (0, utils_2.fastCloneDeep)(this.originalComponent);\n        let changed = logics.reduce((changed, logic) => {\n            const result = utils_1.default.checkTrigger(newComponent, logic.trigger, row, data, this.root ? this.root._form : {}, this);\n            return (result ? this.applyActions(newComponent, logic.actions, result, row, data) : false) || changed;\n        }, false);\n        // If component definition changed, replace and mark as changed.\n        if (!lodash_1.default.isEqual(this.component, newComponent)) {\n            this.component = newComponent;\n            changed = true;\n            const disabled = this.shouldDisabled;\n            // Change disabled state if it has changed\n            if (this.disabled !== disabled) {\n                this.disabled = disabled;\n            }\n        }\n        return changed;\n    }\n    /**\n     * Retuns if the browser is Internet Explorer.\n     * @returns {boolean} - TRUE if the browser is IE.\n     */\n    isIE() {\n        if (typeof window === 'undefined') {\n            return false;\n        }\n        const userAgent = window.navigator.userAgent;\n        const msie = userAgent.indexOf('MSIE ');\n        if (msie > 0) {\n            // IE 10 or older => return version number\n            return parseInt(userAgent.substring(msie + 5, userAgent.indexOf('.', msie)), 10);\n        }\n        const trident = userAgent.indexOf('Trident/');\n        if (trident > 0) {\n            // IE 11 => return version number\n            const rv = userAgent.indexOf('rv:');\n            return parseInt(userAgent.substring(rv + 3, userAgent.indexOf('.', rv)), 10);\n        }\n        const edge = userAgent.indexOf('Edge/');\n        if (edge > 0) {\n            // IE 12 (aka Edge) => return version number\n            return parseInt(userAgent.substring(edge + 5, userAgent.indexOf('.', edge)), 10);\n        }\n        // other browser\n        return false;\n    }\n    /**\n     * Defines the logic action value through evaluation.\n     * @param {object} action - The action within the Logic system to perform.\n     * @param {object} argsObject - The arguments to pass to the evaluation.\n     * @returns {any} - The result of the evaluation.\n     */\n    defineActionValue(action, argsObject) {\n        return this.evaluate(action.value, argsObject, 'value');\n    }\n    /**\n     * Apply the actions of Logic for a component once the conditions have been met.\n     * @param {object} newComponent - The new component to apply the actions to.\n     * @param {Array<object>} actions - An array of actions\n     * @param {any} result - The result of the conditional check in order to evaluate the actions.\n     * @param {any} row - The contextual row data for this component.\n     * @param {any} data - The global data object for the submission.\n     * @returns {boolean} - TRUE if the component was altered.\n     */\n    applyActions(newComponent, actions, result, row, data) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        return actions.reduce((changed, action) => {\n            switch (action.type) {\n                case 'property': {\n                    utils_1.default.setActionProperty(newComponent, action, result, row, data, this);\n                    const property = action.property.value;\n                    if (!lodash_1.default.isEqual(lodash_1.default.get(this.component, property), lodash_1.default.get(newComponent, property))) {\n                        // Advanced Logic can modify the component's hidden property; because we track conditionally hidden state\n                        // separately from the component's hidden property, and technically this Advanced Logic conditionally hides\n                        // a component, we need to set a temporary variable to the new value\n                        if (property === 'hidden') {\n                            this._logicallyHidden = newComponent.hidden;\n                        }\n                        changed = true;\n                    }\n                    break;\n                }\n                case 'value': {\n                    const oldValue = this.getValue();\n                    const newValue = this.defineActionValue(action, {\n                        value: lodash_1.default.clone(oldValue),\n                        data,\n                        row,\n                        component: newComponent,\n                        result,\n                    });\n                    if (!lodash_1.default.isEqual(oldValue, newValue) && !this.shouldConditionallyClear()) {\n                        this.setValue(newValue);\n                        if (this.viewOnly) {\n                            this.dataValue = newValue;\n                        }\n                        changed = true;\n                    }\n                    break;\n                }\n                case 'mergeComponentSchema': {\n                    const schema = this.evaluate(action.schemaDefinition, {\n                        value: lodash_1.default.clone(this.getValue()),\n                        data,\n                        row,\n                        component: newComponent,\n                        result,\n                    }, 'schema');\n                    lodash_1.default.assign(newComponent, schema);\n                    if (!lodash_1.default.isEqual(this.component, newComponent)) {\n                        changed = true;\n                    }\n                    break;\n                }\n                case 'customAction': {\n                    const oldValue = this.getValue();\n                    const newValue = this.evaluate(action.customAction, {\n                        value: lodash_1.default.clone(oldValue),\n                        data,\n                        row,\n                        input: oldValue,\n                        component: newComponent,\n                        result,\n                    }, 'value');\n                    if (!lodash_1.default.isEqual(oldValue, newValue) && !this.shouldConditionallyClear()) {\n                        this.setValue(newValue);\n                        if (this.viewOnly) {\n                            this.dataValue = newValue;\n                        }\n                        changed = true;\n                    }\n                    break;\n                }\n            }\n            return changed;\n        }, false);\n    }\n    // Deprecated\n    addInputError(message, dirty, elements) {\n        this.addMessages(message);\n        this.setErrorClasses(elements, dirty, !!message);\n    }\n    // Deprecated\n    removeInputError(elements) {\n        this.setErrorClasses(elements, true, false);\n    }\n    /**\n     * Add a new input error to this element.\n     * @param {Array<object>|string} messages - An array of messages to add to the element.\n     * @returns {void}\n     */\n    addMessages(messages) {\n        if (!messages) {\n            return;\n        }\n        // Standardize on array of objects for message.\n        if (typeof messages === 'string') {\n            messages = {\n                messages,\n                level: 'error',\n            };\n        }\n        if (!Array.isArray(messages)) {\n            messages = [messages];\n        }\n        messages = lodash_1.default.uniqBy(messages, message => message.message);\n        if (this.refs.messageContainer) {\n            this.setContent(this.refs.messageContainer, messages.map((message) => {\n                return this.renderTemplate('message', Object.assign({}, message));\n            }).join(''));\n        }\n    }\n    /**\n     * Sets the form input widget error classes.\n     * @param {Array<HTMLElement>} elements - An array of DOM elements to set the error classes on.\n     * @param {boolean} dirty - If the input is dirty.\n     * @param {boolean} hasErrors - If the input has errors.\n     * @param {boolean} hasMessages - If the input has messages.\n     * @param {HTMLElement} element - The wrapper element for all the other elements passed in first argument.\n     * @returns {void}\n     */\n    setErrorClasses(elements, dirty, hasErrors, hasMessages, element = this.element) {\n        this.clearErrorClasses();\n        elements.forEach((element) => {\n            this.setElementInvalid(this.performInputMapping(element), false);\n        });\n        this.setInputWidgetErrorClasses(elements, hasErrors);\n        // do not set error classes for hidden components\n        if (!this.visible) {\n            return;\n        }\n        if (hasErrors) {\n            // Add error classes\n            elements.forEach((input) => {\n                this.setElementInvalid(this.performInputMapping(input), true);\n            });\n            if (dirty && this.options.highlightErrors) {\n                this.addClass(element, this.options.componentErrorClass);\n            }\n            else {\n                this.addClass(element, 'has-error');\n            }\n        }\n        if (hasMessages) {\n            this.addClass(element, 'has-message');\n        }\n    }\n    /**\n     * Adds the classes necessary to mark an element as invalid.\n     * @param {HTMLElement} element - The element you wish to add the invalid classes to.\n     * @param {boolean} invalid - TRUE if the component is invalid, FALSE otherwise.\n     * @returns {void}\n     */\n    setElementInvalid(element, invalid) {\n        if (!element)\n            return;\n        if (invalid) {\n            this.addClass(element, 'is-invalid');\n        }\n        else {\n            this.removeClass(element, 'is-invalid');\n        }\n        element.setAttribute('aria-invalid', invalid ? 'true' : 'false');\n    }\n    /**\n     * Clear any conditionally hidden components for this component only.\n     */\n    clearComponentOnHide() {\n        // clearOnHide defaults to true for old forms (without the value set) so only trigger if the value is false.\n        if (this.component.clearOnHide !== false && !this.options.readOnly && !this.options.showHiddenFields) {\n            if (this.shouldConditionallyClear()) {\n                this.deleteValue();\n            }\n            else if (!this.hasValue() && this.shouldAddDefaultValue) {\n                // If shown, ensure the default is set.\n                this.setValue(this.defaultValue, {\n                    noUpdateEvent: true\n                });\n            }\n        }\n    }\n    /**\n     * Clears the components data if it is conditionally hidden AND clearOnHide is set to true for this component.\n     */\n    clearOnHide() {\n        this.clearComponentOnHide();\n    }\n    /**\n     * Triggers a debounced onChange event for the root component (usually Webform).\n     * @param {...any} args - The arguments to pass to the onChange event.\n     */\n    triggerRootChange(...args) {\n        if (this.options.onChange) {\n            this.options.onChange(...args);\n        }\n        else if (this.root && this.root.triggerChange) {\n            this.root.triggerChange(...args);\n        }\n    }\n    /**\n     * Called when the component value has been changed. This will then trigger the root level onChange handler which\n     * propagates the checkData methods for the full component tree.\n     * @param {any} flags - The flags for the change event propagation.\n     * @param {boolean} fromRoot - If the change event is from the root component.\n     * @returns {boolean} - TRUE if the component has changed.\n     */\n    onChange(flags, fromRoot) {\n        flags = flags || {};\n        if (flags.modified) {\n            if (!flags.noPristineChangeOnModified) {\n                this.pristine = false;\n            }\n            this.addClass(this.getElement(), 'formio-modified');\n        }\n        // If we are supposed to validate on blur, then don't trigger validation yet.\n        if (this.component.validateOn === 'blur' || this.component.validateOn === 'submit') {\n            flags.noValidate = true;\n        }\n        if (this.component.onChange) {\n            this.evaluate(this.component.onChange, {\n                flags\n            });\n        }\n        // Set the changed variable.\n        const changed = {\n            instance: this,\n            component: this.component,\n            value: this.dataValue,\n            flags: flags\n        };\n        // Emit the change.\n        this.emit('componentChange', changed);\n        // Do not propogate the modified flag.\n        let modified = false;\n        if (flags.modified) {\n            modified = true;\n            delete flags.modified;\n        }\n        // Bubble this change up to the top.\n        if (!fromRoot) {\n            this.triggerRootChange(flags, changed, modified);\n        }\n        return changed;\n    }\n    get wysiwygDefault() {\n        return {\n            quill: {\n                theme: 'snow',\n                placeholder: this.t(this.component.placeholder, { _userInput: true }),\n                modules: {\n                    toolbar: [\n                        [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown\n                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],\n                        [{ 'font': [] }],\n                        ['bold', 'italic', 'underline', 'strike', { 'script': 'sub' }, { 'script': 'super' }, 'clean'],\n                        [{ 'color': [] }, { 'background': [] }],\n                        [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }, { 'align': [] }],\n                        ['blockquote', 'code-block'],\n                        ['link', 'image', 'video', 'formula', 'source']\n                    ]\n                }\n            },\n            ace: {\n                theme: 'ace/theme/xcode',\n                maxLines: 12,\n                minLines: 12,\n                tabSize: 2,\n                mode: 'ace/mode/javascript',\n                placeholder: this.t(this.component.placeholder, { _userInput: true })\n            },\n            ckeditor: {\n                image: {\n                    toolbar: [\n                        'imageTextAlternative',\n                        '|',\n                        'imageStyle:full',\n                        'imageStyle:alignLeft',\n                        'imageStyle:alignCenter',\n                        'imageStyle:alignRight'\n                    ],\n                    styles: [\n                        'full',\n                        'alignLeft',\n                        'alignCenter',\n                        'alignRight'\n                    ]\n                },\n                extraPlugins: []\n            },\n            default: {}\n        };\n    }\n    addCKE(element, settings, onChange) {\n        settings = lodash_1.default.isEmpty(settings) ? {} : settings;\n        settings.base64Upload = this.component.isUploadEnabled ? false : true;\n        settings.mediaEmbed = { previewsInData: true };\n        settings = lodash_1.default.merge(this.wysiwygDefault.ckeditor, lodash_1.default.get(this.options, 'editors.ckeditor.settings', {}), settings);\n        if (this.component.isUploadEnabled) {\n            settings.extraPlugins.push((0, uploadAdapter_1.getFormioUploadAdapterPlugin)(this.fileService, this));\n        }\n        return Formio_1.Formio.requireLibrary('ckeditor', isIEBrowser ? 'CKEDITOR' : 'ClassicEditor', lodash_1.default.get(this.options, 'editors.ckeditor.src', `${Formio_1.Formio.cdn.ckeditor}/ckeditor.js`), true)\n            .then(() => {\n            if (!element.parentNode) {\n                return Promise.reject();\n            }\n            if (isIEBrowser) {\n                const editor = CKEDITOR.replace(element);\n                editor.on('change', () => onChange(editor.getData()));\n                return Promise.resolve(editor);\n            }\n            else {\n                return ClassicEditor.create(element, settings).then(editor => {\n                    editor.model.document.on('change', () => onChange(editor.data.get()));\n                    return editor;\n                });\n            }\n        });\n    }\n    addQuill(element, settings, onChange) {\n        settings = lodash_1.default.isEmpty(settings) ? this.wysiwygDefault.quill : settings;\n        settings = lodash_1.default.merge(this.wysiwygDefault.quill, lodash_1.default.get(this.options, 'editors.quill.settings', {}), settings);\n        settings = Object.assign(Object.assign({}, settings), { modules: Object.assign({ table: true }, settings.modules) });\n        // Lazy load the quill css.\n        Formio_1.Formio.requireLibrary(`quill-css-${settings.theme}`, 'Quill', [\n            { type: 'styles', src: `${Formio_1.Formio.cdn.quill}/quill.${settings.theme}.css` }\n        ], true);\n        // Lazy load the quill library.\n        return Formio_1.Formio.requireLibrary('quill', 'Quill', lodash_1.default.get(this.options, 'editors.quill.src', `${Formio_1.Formio.cdn.quill}/quill.min.js`), true)\n            .then(() => {\n            return Formio_1.Formio.requireLibrary('quill-table', 'Quill', `${Formio_1.Formio.cdn.baseUrl}/quill/quill-table.js`, true)\n                .then(() => {\n                if (!element.parentNode) {\n                    return Promise.reject();\n                }\n                this.quill = new Quill(element, isIEBrowser ? Object.assign(Object.assign({}, settings), { modules: {} }) : settings);\n                /** This block of code adds the [source] capabilities.  See https://codepen.io/anon/pen/ZyEjrQ */\n                const txtArea = document.createElement('textarea');\n                txtArea.setAttribute('class', 'quill-source-code');\n                this.quill.addContainer('ql-custom').appendChild(txtArea);\n                const qlSource = element.parentNode.querySelector('.ql-source');\n                if (qlSource) {\n                    this.addEventListener(qlSource, 'click', (event) => {\n                        event.preventDefault();\n                        if (txtArea.style.display === 'inherit') {\n                            this.quill.setContents(this.quill.clipboard.convert({ html: txtArea.value }));\n                        }\n                        txtArea.style.display = (txtArea.style.display === 'none') ? 'inherit' : 'none';\n                    });\n                }\n                /** END CODEBLOCK */\n                // Make sure to select cursor when they click on the element.\n                this.addEventListener(element, 'click', () => this.quill.focus());\n                // Allows users to skip toolbar items when tabbing though form\n                const elm = document.querySelectorAll('.ql-formats > button');\n                for (let i = 0; i < elm.length; i++) {\n                    elm[i].setAttribute('tabindex', '-1');\n                }\n                this.quill.on('text-change', () => {\n                    txtArea.value = this.quill.root.innerHTML;\n                    onChange(txtArea);\n                });\n                return this.quill;\n            });\n        });\n    }\n    get shouldSanitizeValue() {\n        var _a;\n        // Sanitize value if sanitizing for thw whole content is turned off\n        return (((_a = this.options) === null || _a === void 0 ? void 0 : _a.sanitize) !== false);\n    }\n    addAce(element, settings, onChange) {\n        if (!settings || (settings.theme === 'snow')) {\n            const mode = settings ? settings.mode : '';\n            settings = {};\n            if (mode) {\n                settings.mode = mode;\n            }\n        }\n        settings = lodash_1.default.merge(this.wysiwygDefault.ace, lodash_1.default.get(this.options, 'editors.ace.settings', {}), settings || {});\n        return Formio_1.Formio.requireLibrary('ace', 'ace', lodash_1.default.get(this.options, 'editors.ace.src', `${Formio_1.Formio.cdn.ace}/ace.js`), true)\n            .then((editor) => {\n            editor = editor.edit(element);\n            editor.removeAllListeners('change');\n            editor.setOptions(settings);\n            editor.getSession().setMode(settings.mode);\n            editor.on('change', () => onChange(editor.getValue()));\n            if (settings.isUseWorkerDisabled) {\n                editor.session.setUseWorker(false);\n            }\n            return editor;\n        });\n    }\n    get tree() {\n        return this.component.tree || false;\n    }\n    /**\n     * The empty value for this component.\n     * @returns {null} - The empty value for this component.\n     */\n    get emptyValue() {\n        return null;\n    }\n    /**\n     * Returns if this component has a value set.\n     * @param {any} data - The global data object.\n     * @returns {boolean} - TRUE if a value is set.\n     */\n    hasValue(data) {\n        return !lodash_1.default.isUndefined(lodash_1.default.get(data || this.data, this.key));\n    }\n    /**\n     * Get the data value at the root level.\n     * @returns {*} - The root value for the component, typically the Webform data object.\n     */\n    get rootValue() {\n        return this.root ? this.root.data : this.data;\n    }\n    get rootPristine() {\n        return lodash_1.default.get(this, 'root.pristine', false);\n    }\n    /**\n     * Get the static value of this component.\n     * @returns {*} - The value for this component.\n     */\n    get dataValue() {\n        if (!this.key) {\n            return this.component.multiple ? [] : this.emptyValue;\n        }\n        return lodash_1.default.get(this._data, this.key, this.component.multiple ? [] : this.emptyValue);\n    }\n    /**\n     * Sets the static value of this component.\n     * @param {*} value - The value to set for this component.\n     */\n    set dataValue(value) {\n        if (!this.allowData || !this.key) {\n            return;\n        }\n        if ((value !== null) && (value !== undefined)) {\n            value = this.hook('setDataValue', value, this.key, this._data);\n        }\n        if ((value === null) || (value === undefined)) {\n            this.unset();\n            return;\n        }\n        lodash_1.default.set(this._data, this.key, value);\n        return;\n    }\n    /**\n     * Splice a value from the dataValue.\n     * @param {number} index - The index to splice for an array component values.\n     * @param {*} flags - The flags to use when splicing the value.\n     */\n    splice(index, flags = {}) {\n        if (this.hasValue()) {\n            const dataValue = this.dataValue || [];\n            if (lodash_1.default.isArray(dataValue) && dataValue.hasOwnProperty(index)) {\n                dataValue.splice(index, 1);\n                this.dataValue = dataValue;\n                this.triggerChange(flags);\n            }\n        }\n    }\n    unset() {\n        lodash_1.default.unset(this._data, this.key);\n    }\n    /**\n     * Deletes the value of the component.\n     */\n    deleteValue() {\n        this.setValue(null, {\n            noUpdateEvent: true,\n            noDefault: true\n        });\n        this.unset();\n    }\n    getCustomDefaultValue(defaultValue) {\n        if (this.component.customDefaultValue && !this.options.preview) {\n            defaultValue = this.evaluate(this.component.customDefaultValue, { value: this.dataValue }, 'value');\n        }\n        return defaultValue;\n    }\n    /**\n     * Returns if a component has a default value set.\n     * @returns {boolean} - TRUE if a default value is set.\n     */\n    get hasDefaultValue() {\n        return this.component.customDefaultValue || (this.component.hasOwnProperty('defaultValue') &&\n            (this.component.defaultValue !== null) &&\n            (this.component.defaultValue !== undefined));\n    }\n    /**\n     * Determine if we should add a default value for this component.\n     * @returns {boolean} - TRUE if a default value should be set\n     */\n    get shouldAddDefaultValue() {\n        return this.pristine && this.allowData && (this.hasDefaultValue || !this.options.noDefaults);\n    }\n    /**\n     * Get the default value of this component.\n     * @returns {*} - The default value for this component.\n     */\n    get defaultValue() {\n        let defaultValue = this.emptyValue;\n        if (this.component.defaultValue) {\n            defaultValue = this.component.defaultValue;\n        }\n        defaultValue = this.getCustomDefaultValue(defaultValue);\n        const checkMask = (value) => {\n            if (typeof value === 'string') {\n                if (this.component.type !== 'textfield') {\n                    const placeholderChar = this.placeholderChar;\n                    value = (0, vanilla_text_mask_1.conformToMask)(value, this.defaultMask, { placeholderChar }).conformedValue;\n                    if (!utils_1.default.matchInputMask(value, this.defaultMask)) {\n                        value = '';\n                    }\n                }\n            }\n            else {\n                value = '';\n            }\n            return value;\n        };\n        if (Array.isArray(this.defaultMask) ? this.defaultMask.length > 0 : this.defaultMask) {\n            if (Array.isArray(defaultValue)) {\n                defaultValue = defaultValue.map(checkMask);\n            }\n            else {\n                defaultValue = checkMask(defaultValue);\n            }\n        }\n        // Clone so that it creates a new instance.\n        return lodash_1.default.cloneDeep(defaultValue);\n    }\n    /**\n     * Get the input value of this component.\n     * @returns {*} - The value for the component.\n     */\n    getValue() {\n        if (!this.hasInput || this.viewOnly || !this.refs.input || !this.refs.input.length) {\n            return this.dataValue;\n        }\n        const values = [];\n        for (const i in this.refs.input) {\n            if (this.refs.input.hasOwnProperty(i)) {\n                if (!this.component.multiple) {\n                    return this.getValueAt(i);\n                }\n                values.push(this.getValueAt(i));\n            }\n        }\n        if (values.length === 0 && !this.component.multiple) {\n            return '';\n        }\n        return values;\n    }\n    /**\n     * Get the value at a specific index.\n     * @param {number} index - For an array component or multiple values, this returns the value at a specific index.\n     * @returns {*} - The value at the specified index.\n     */\n    getValueAt(index) {\n        const input = this.performInputMapping(this.refs.input[index]);\n        return input ? input.value : undefined;\n    }\n    /**\n     * Set the value of this component.\n     * @param {*} value - The value to set for this component.\n     * @param {*} flags - The flags to use when setting the value.\n     * @returns {boolean} - If the value changed.\n     */\n    setValue(value, flags = {}) {\n        const changed = this.updateValue(value, flags);\n        value = this.dataValue;\n        if (!this.hasInput) {\n            return changed;\n        }\n        const isArray = Array.isArray(value);\n        const valueInput = this.refs.fileLink || this.refs.input;\n        const isFilelink = !!this.refs.fileLink;\n        if (isArray &&\n            Array.isArray(this.defaultValue) &&\n            this.refs.hasOwnProperty('input') &&\n            valueInput &&\n            (valueInput.length !== value.length) &&\n            this.visible) {\n            if (isFilelink || valueInput.length) {\n                this.redraw();\n            }\n        }\n        if (this.isHtmlRenderMode() && flags && flags.fromSubmission && changed) {\n            this.redraw();\n            return changed;\n        }\n        for (const i in this.refs.input) {\n            if (this.refs.input.hasOwnProperty(i)) {\n                this.setValueAt(i, isArray && !this.isSingleInputValue() ? value[i] : value, flags);\n            }\n        }\n        return changed;\n    }\n    /**\n     * Returns if the value (e.g. array) should be divided between several inputs\n     * @returns {boolean}\n     */\n    isSingleInputValue() {\n        return false;\n    }\n    /**\n     * Set the value at a specific index.\n     * @param {number} index - The index to set the value at.\n     * @param {*} value - The value to set at the specified index.\n     * @param {*} flags - The flags to use when setting the value.\n     */\n    setValueAt(index, value, flags = {}) {\n        if (!flags.noDefault && (value === null || value === undefined) && !this.component.multiple) {\n            value = this.defaultValue;\n        }\n        const input = this.performInputMapping(this.refs.input[index]);\n        const valueMaskInput = this.refs.valueMaskInput;\n        if ((valueMaskInput === null || valueMaskInput === void 0 ? void 0 : valueMaskInput.mask) && valueMaskInput.mask.textMaskInputElement) {\n            valueMaskInput.mask.textMaskInputElement.update(value);\n        }\n        if (input.mask && input.mask.textMaskInputElement) {\n            input.mask.textMaskInputElement.update(value);\n        }\n        else if (input.widget && input.widget.setValue) {\n            input.widget.setValue(value);\n        }\n        else {\n            input.value = value;\n        }\n    }\n    get hasSetValue() {\n        return this.hasValue() && !this.isEmpty(this.dataValue);\n    }\n    setDefaultValue() {\n        if (this.defaultValue && this.shouldAddDefaultValue) {\n            const defaultValue = (this.component.multiple && !this.dataValue.length) ? [] : this.defaultValue;\n            this.setValue(defaultValue, {\n                noUpdateEvent: true\n            });\n        }\n    }\n    /**\n     * Restore the value of a control.\n     */\n    restoreValue() {\n        if (this.hasSetValue) {\n            this.setValue(this.dataValue, {\n                noUpdateEvent: true\n            });\n        }\n        else {\n            this.setDefaultValue();\n        }\n    }\n    /**\n     * Normalize values coming into updateValue.\n     * @param {*} value - The value to normalize before setting.\n     * @returns {*} - The normalized value.\n     */\n    normalizeValue(value) {\n        return value;\n    }\n    /**\n     * Update a value of this component.\n     * @param {*} value - The value to update.\n     * @param {*} flags - The flags to use when updating the value.\n     * @returns {boolean} - If the value changed.\n     */\n    updateComponentValue(value, flags = {}) {\n        let newValue = (!flags.resetValue && (value === undefined || value === null)) ? this.getValue() : value;\n        newValue = this.normalizeValue(newValue, flags);\n        const oldValue = this.dataValue;\n        let changed = ((newValue !== undefined) ? this.hasChanged(newValue, oldValue) : false);\n        if (changed) {\n            this.dataValue = newValue;\n            changed = this.dataValue !== oldValue;\n            this.updateOnChange(flags, changed);\n        }\n        if (this.componentModal && flags && flags.fromSubmission) {\n            this.componentModal.setValue(value);\n        }\n        return changed;\n    }\n    /**\n     * Updates the value of this component plus all sub-components.\n     * @param {...any} args - The arguments to pass to updateValue.\n     * @returns {boolean} - If the value changed.\n     */\n    updateValue(...args) {\n        return this.updateComponentValue(...args);\n    }\n    getIcon(name, content, styles, ref = 'icon') {\n        return this.renderTemplate('icon', {\n            className: this.iconClass(name),\n            ref,\n            styles,\n            content\n        });\n    }\n    /**\n     * Resets the value of this component.\n     */\n    resetValue() {\n        this.unset();\n        this.setValue(this.defaultValue || this.emptyValue, {\n            noUpdateEvent: true,\n            noValidate: true,\n            resetValue: true\n        });\n    }\n    /**\n     * Determine if the value of this component has changed.\n     * @param {*} newValue - The new value to check.\n     * @param {*} oldValue - The existing value of the component.\n     * @returns {boolean} - TRUE if the value has changed.\n     */\n    hasChanged(newValue, oldValue) {\n        if (((newValue === undefined) || (newValue === null)) &&\n            ((oldValue === undefined) || (oldValue === null) || this.isEmpty(oldValue))) {\n            return false;\n        }\n        // If we do not have a value and are getting set to anything other than undefined or null, then we changed.\n        if (newValue !== undefined &&\n            newValue !== null &&\n            this.allowData &&\n            !this.hasValue()) {\n            return true;\n        }\n        return !lodash_1.default.isEqual(newValue, oldValue);\n    }\n    /**\n     * Update the value on change.\n     * @param {*} flags - The flags to use when triggering the on change event.\n     * @param {boolean} changed - If the value has changed.\n     * @returns {boolean} - If the value changed.\n     */\n    updateOnChange(flags = {}, changed = false) {\n        if (!flags.noUpdateEvent && changed) {\n            if (flags.fromSubmission) {\n                // Reset the errors when a submission has been made and allow it to revalidate.\n                this._errors = [];\n            }\n            this.triggerChange(flags);\n            return true;\n        }\n        return false;\n    }\n    convertNumberOrBoolToString(value) {\n        if (typeof value === 'number' || typeof value === 'boolean') {\n            return value.toString();\n        }\n        return value;\n    }\n    doValueCalculation(dataValue, data, row) {\n        var _a;\n        return this.evaluate(this.component.calculateValue, {\n            value: dataValue,\n            data,\n            row: row || this.data,\n            submission: ((_a = this.root) === null || _a === void 0 ? void 0 : _a._submission) || {\n                data: this.rootValue\n            }\n        }, 'value');\n    }\n    /* eslint-disable max-statements */\n    calculateComponentValue(data, flags, row) {\n        // Skip value calculation for the component if we don't have entire form data set or in builder mode\n        if (this.builderMode || lodash_1.default.isUndefined(lodash_1.default.get(this, 'root.data'))) {\n            return false;\n        }\n        // If no calculated value or\n        // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)\n        const allowOverride = lodash_1.default.get(this.component, 'allowCalculateOverride', false);\n        if (this.shouldConditionallyClear()) {\n            // remove calculated value so that the value is recalculated once component becomes visible\n            if (this.hasOwnProperty('calculatedValue') && allowOverride) {\n                lodash_1.default.unset(this, 'calculatedValue');\n            }\n            return false;\n        }\n        // Handle all cases when calculated values should not fire.\n        if ((this.options.readOnly && !this.options.pdf && !this.component.calculateValue) ||\n            !(this.component.calculateValue || this.component.calculateValueVariable) ||\n            (this.options.server && !this.component.calculateServer) ||\n            (flags.dataSourceInitialLoading && allowOverride) ||\n            (this.options.readOnly && this.options.pdf && allowOverride && lodash_1.default.get(this.root, 'submission._id', false))) {\n            return false;\n        }\n        const dataValue = this.dataValue;\n        // Calculate the new value.\n        let calculatedValue = this.doValueCalculation(dataValue, data, row, flags);\n        if (this.options.readOnly && dataValue && !calculatedValue) {\n            return false;\n        }\n        if (lodash_1.default.isNil(calculatedValue)) {\n            calculatedValue = this.emptyValue;\n        }\n        const changed = !lodash_1.default.isEqual(dataValue, calculatedValue);\n        // Do not override calculations on server if they have calculateServer set.\n        if (allowOverride) {\n            // The value is considered locked if it is not empty and comes from a submission value.\n            const fromSubmission = (flags.fromSubmission && this.component.persistent === true);\n            if (this.isEmpty(dataValue)) {\n                // Reset the calculation lock if ever the data is cleared.\n                this.calculationLocked = false;\n            }\n            else if (this.calculationLocked || fromSubmission) {\n                this.calculationLocked = true;\n                return false;\n            }\n            const firstPass = (this.calculatedValue === undefined) || flags.resetValue;\n            if (firstPass) {\n                this.calculatedValue = null;\n            }\n            const newCalculatedValue = this.normalizeValue(this.convertNumberOrBoolToString(calculatedValue));\n            const previousCalculatedValue = this.normalizeValue(this.convertNumberOrBoolToString(this.calculatedValue));\n            const normalizedDataValue = this.normalizeValue(this.convertNumberOrBoolToString(dataValue));\n            const calculationChanged = !lodash_1.default.isEqual(previousCalculatedValue, newCalculatedValue);\n            const previousChanged = !lodash_1.default.isEqual(normalizedDataValue, previousCalculatedValue);\n            if (calculationChanged && previousChanged && !firstPass) {\n                return false;\n            }\n            // Check to ensure that the calculated value is different than the previously calculated value.\n            if (previousCalculatedValue && previousChanged && !calculationChanged) {\n                this.calculatedValue = null;\n                return false;\n            }\n            if (flags.isReordered || !calculationChanged) {\n                return false;\n            }\n            if (fromSubmission) {\n                // If we set value from submission and it differs from calculated one, set the calculated value to prevent overriding dataValue in the next pass\n                this.calculatedValue = (0, utils_2.fastCloneDeep)(calculatedValue);\n                return false;\n            }\n            // If this is the firstPass, and the dataValue is different than to the calculatedValue.\n            if (firstPass && !this.isEmpty(dataValue) && changed && calculationChanged) {\n                // Return that we have a change so it will perform another pass.\n                return true;\n            }\n        }\n        this.calculatedValue = (0, utils_2.fastCloneDeep)(calculatedValue);\n        if (changed) {\n            if (!flags.noPristineChangeOnModified && this.root.initialized) {\n                this.pristine = false;\n            }\n            flags.triggeredComponentId = this.id;\n            return this.setValue(calculatedValue, flags);\n        }\n        return false;\n    }\n    /* eslint-enable max-statements */\n    /**\n     * Performs calculations in this component plus any child components.\n     * @param {*} data - The data to perform the calculation with.\n     * @param {*} flags - The flags to use when calculating the value.\n     * @param {*} row - The contextual row data to use when performing the calculation.\n     * @returns {boolean} - TRUE if the value changed.\n     */\n    calculateValue(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        return this.calculateComponentValue(data, flags, row);\n    }\n    /**\n     * Get this component's label text.\n     * @returns {string} - The label text for this component.\n     */\n    get label() {\n        return this.component.label;\n    }\n    /**\n     * Set this component's label text and render it.\n     * @param {string} value - The new label text.\n     */\n    set label(value) {\n        this.component.label = value;\n        if (this.labelElement) {\n            this.labelElement.innerText = value;\n        }\n    }\n    /**\n     * Get FormioForm element at the root of this component tree.\n     * @returns {*} root - The root component to search from.\n     */\n    getRoot() {\n        return this.root;\n    }\n    /**\n     * Returns the invalid message, or empty string if the component is valid.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {boolean} ignoreCondition - If conditions for the component should be ignored when checking validity.\n     * @param {*} row - Contextual row data for this component.\n     * @param {*} options - Additional options for validation.\n     * @returns {string} - The message to show when the component is invalid.\n     */\n    invalidMessage(data, dirty, ignoreCondition, row, options = {}) {\n        var _a;\n        const { local } = options;\n        if (!row) {\n            row = (0, utils_2.getContextualRowData)(this.component, data, this.paths);\n        }\n        if (!ignoreCondition && !this.checkCondition(row, data)) {\n            return '';\n        }\n        // See if this is forced invalid.\n        if (this.invalid) {\n            return this.invalid;\n        }\n        // No need to check for errors if there is no input or if it is pristine.\n        if (!this.hasInput || (!dirty && this.pristine)) {\n            return '';\n        }\n        const validationScope = { errors: [] };\n        (0, process_1.processOneSync)({\n            component: this.component,\n            data,\n            row,\n            local,\n            path: this.path || this.component.key,\n            parent: (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component,\n            paths: this.paths,\n            scope: validationScope,\n            instance: this,\n            processors: [\n                process_1.validateProcessInfo\n            ]\n        });\n        const errors = validationScope.errors;\n        const interpolatedErrors = utils_1.default.interpolateErrors(this.component, errors, this.t.bind(this));\n        return lodash_1.default.map(interpolatedErrors, 'message').join('\\n\\n');\n    }\n    /**\n     * Returns if the component is valid or not.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    isValid(data, dirty) {\n        return !this.invalidMessage(data, dirty);\n    }\n    setComponentValidity(errors, dirty, silentCheck) {\n        if (silentCheck) {\n            return [];\n        }\n        const messages = errors.filter(message => !message.fromServer);\n        if (errors.length && !!messages.length && (!this.isEmpty(this.defaultValue) || dirty || !this.pristine)) {\n            return this.setCustomValidity(messages, dirty);\n        }\n        else {\n            return this.setCustomValidity('');\n        }\n    }\n    /**\n     * Interpolate errors from the validation methods.\n     * @param {Array<any>} errors - An array of errors to interpolate.\n     * @returns {Array<any>} - The interpolated errors.\n     */\n    interpolateErrors(errors) {\n        var _a;\n        const interpolatedErrors = utils_1.default.interpolateErrors(this.component, errors, this.t.bind(this));\n        return ((_a = this.serverErrors) === null || _a === void 0 ? void 0 : _a.length) ? [...interpolatedErrors, ...this.serverErrors] : interpolatedErrors;\n    }\n    /**\n     * Show component validation errors.\n     * @param {*} errors - An array of errors that have occured.\n     * @param {*} data - The root submission data.\n     * @param {*} row - The contextual row data.\n     * @param {*} flags - The flags to perform validation.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    showValidationErrors(errors, data, row, flags) {\n        if (flags.silentCheck) {\n            return [];\n        }\n        let isDirty = (flags.dirty === false) ? false : (this.dirty || flags.dirty);\n        if (this.options.alwaysDirty) {\n            isDirty = true;\n        }\n        this.setDirty(isDirty);\n        return this.setComponentValidity(errors, isDirty, flags.silentCheck, flags.fromSubmission);\n    }\n    /**\n     * Perform a component validation.\n     * @param {*} data - The root data you wish to use for this component.\n     * @param {*} row - The contextual row data you wish to use for this component.\n     * @param {*} flags - The flags to control the behavior of the validation.\n     * @returns {Array<any>} - An array of errors if the component is invalid.\n     */\n    validateComponent(data = null, row = null, flags = {}) {\n        var _a;\n        data = data || this.rootValue;\n        row = row || this.data;\n        const { async = false } = flags;\n        if (this.shouldSkipValidation(data, row, flags)) {\n            return async ? Promise.resolve([]) : [];\n        }\n        const processContext = {\n            component: this.component,\n            data,\n            row,\n            local: !!flags.local,\n            value: this.validationValue,\n            parent: (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component,\n            paths: this.paths,\n            path: this.path || this.component.key,\n            instance: this,\n            form: this.root ? this.root._form : {},\n            scope: { errors: [] },\n            processors: [\n                process_1.validateProcessInfo\n            ]\n        };\n        if (async) {\n            return (0, process_1.processOne)(processContext).then(() => {\n                this._errors = this.interpolateErrors(processContext.scope.errors);\n                return this._errors;\n            });\n        }\n        (0, process_1.processOneSync)(processContext);\n        this._errors = this.interpolateErrors(processContext.scope.errors);\n        return this._errors;\n    }\n    /**\n     * Checks the validity of this component and sets the error message if it is invalid.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {*} row - The contextual row data for this component.\n     * @param {*} flags - The flags to use when checking the validity.\n     * @param {Array<any>} allErrors - An array of all errors that have occured so that it can be appended when another one occurs here.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    checkComponentValidity(data = null, dirty = false, row = null, flags = {}, allErrors = []) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        flags.dirty = dirty || false;\n        if (flags.async) {\n            return this.validateComponent(data, row, flags).then((errors) => {\n                allErrors.push(...errors);\n                if (this.parent && this.parent.childErrors) {\n                    if (errors.length) {\n                        this.parent.childErrors.push(...errors);\n                    }\n                    else {\n                        lodash_1.default.remove(this.parent.childErrors, (err) => { var _a, _b; return (((_a = err === null || err === void 0 ? void 0 : err.component) === null || _a === void 0 ? void 0 : _a.key) || ((_b = err === null || err === void 0 ? void 0 : err.context) === null || _b === void 0 ? void 0 : _b.key)) === this.component.key; });\n                    }\n                }\n                this.showValidationErrors(errors, data, row, flags);\n                return errors.length === 0;\n            });\n        }\n        else {\n            const errors = this.validateComponent(data, row, flags);\n            this.showValidationErrors(errors, data, row, flags);\n            allErrors.push(...errors);\n            if (this.parent && this.parent.childErrors) {\n                if (errors.length) {\n                    this.parent.childErrors.push(...errors);\n                }\n                else {\n                    lodash_1.default.remove(this.parent.childErrors, (err) => { var _a, _b; return (((_a = err === null || err === void 0 ? void 0 : err.component) === null || _a === void 0 ? void 0 : _a.key) || ((_b = err === null || err === void 0 ? void 0 : err.context) === null || _b === void 0 ? void 0 : _b.key)) === this.component.key; });\n                }\n            }\n            return errors.length === 0;\n        }\n    }\n    /**\n     * Checks the validity of the component.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {*} row - The contextual row data for this component.\n     * @param {boolean} silentCheck - If the check should be silent and not set the error messages.\n     * @param {Array<any>} errors - An array of all errors that have occured so that it can be appended when another one occurs here.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    checkValidity(data = null, dirty = false, row = null, silentCheck = false, errors = []) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        return this.checkComponentValidity(data, dirty, row, { silentCheck }, errors);\n    }\n    checkAsyncValidity(data = null, dirty = false, row = null, silentCheck = false, errors = []) {\n        return this.checkComponentValidity(data, dirty, row, { async: true, silentCheck }, errors);\n    }\n    /**\n     * Check the conditions, calculations, and validity of a single component and triggers an update if\n     * something changed.\n     * @param {*} data - The root data of the change event.\n     * @param {*} flags - The flags from this change event.\n     * @param {*} row - The contextual row data for this component.\n     * @returns {void|boolean} - TRUE if no check should be performed on the component.\n     */\n    checkData(data = null, flags = null, row = null) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        // Some components (for legacy reasons) have calls to \"checkData\" in inappropriate places such\n        // as setValue. Historically, this was bypassed by a series of cached states around the data model\n        // which caused its own problems. We need to ensure that premium and custom components do not fall into\n        // an infinite loop by only checking this component once.\n        if (this.checkingData) {\n            return;\n        }\n        this.checkingData = true;\n        // Needs for Nextgen Rules Engine\n        this.resetCaches();\n        // Do not trigger refresh if change was triggered on blur event since components with Refresh on Blur have their own listeners\n        if (!flags.fromBlur) {\n            this.checkRefreshOn(flags.changes, flags);\n        }\n        if (flags.noCheck) {\n            return true;\n        }\n        this.checkComponentConditions(data, flags, row);\n        if (this.id !== flags.triggeredComponentId) {\n            this.calculateComponentValue(data, flags, row);\n        }\n        // We are done checking data.\n        this.checkingData = false;\n    }\n    checkModal(errors = [], dirty = false) {\n        const messages = errors.filter(error => !error.fromServer);\n        const isValid = errors.length === 0;\n        if (!this.component.modalEdit || !this.componentModal) {\n            return;\n        }\n        if (dirty && !isValid) {\n            this.setErrorClasses([this.refs.openModal], dirty, !isValid, !!messages.length, this.refs.openModalWrapper);\n        }\n        else {\n            this.clearErrorClasses(this.refs.openModalWrapper);\n        }\n    }\n    get validationValue() {\n        return this.dataValue;\n    }\n    isEmpty(value = this.dataValue) {\n        const isEmptyArray = (lodash_1.default.isArray(value) && value.length === 1) ? lodash_1.default.isEqual(value[0], this.emptyValue) : false;\n        return value == null || value.length === 0 || lodash_1.default.isEqual(value, this.emptyValue) || isEmptyArray;\n    }\n    isEqual(valueA, valueB = this.dataValue) {\n        return (this.isEmpty(valueA) && this.isEmpty(valueB)) || lodash_1.default.isEqual(valueA, valueB);\n    }\n    /**\n     * Check if a component is eligible for multiple validation\n     * @returns {boolean} - TRUE if the component is eligible for multiple validation.\n     */\n    validateMultiple() {\n        return true;\n    }\n    clearErrorClasses(element = this.element) {\n        this.removeClass(element, this.options.componentErrorClass);\n        this.removeClass(element, 'alert alert-danger');\n        this.removeClass(element, 'has-error');\n        this.removeClass(element, 'has-message');\n    }\n    setInputWidgetErrorClasses(inputRefs, hasErrors) {\n        if (!this.isInputComponent || !this.component.widget || !(inputRefs === null || inputRefs === void 0 ? void 0 : inputRefs.length)) {\n            return;\n        }\n        inputRefs.forEach((input) => {\n            if ((input === null || input === void 0 ? void 0 : input.widget) && input.widget.setErrorClasses) {\n                input.widget.setErrorClasses(hasErrors);\n            }\n        });\n    }\n    addFocusBlurEvents(element) {\n        this.addEventListener(element, 'focus', () => {\n            if (this.root.focusedComponent !== this) {\n                if (this.root.pendingBlur) {\n                    this.root.pendingBlur();\n                }\n                this.root.focusedComponent = this;\n                this.emit('focus', this);\n            }\n            else if (this.root.focusedComponent === this && this.root.pendingBlur) {\n                this.root.pendingBlur.cancel();\n                this.root.pendingBlur = null;\n            }\n        });\n        this.addEventListener(element, 'blur', () => {\n            this.root.pendingBlur = utils_1.default.delay(() => {\n                this.emit('blur', this);\n                if (this.component.validateOn === 'blur') {\n                    this.root.triggerChange({ fromBlur: true }, {\n                        instance: this,\n                        component: this.component,\n                        value: this.dataValue,\n                        flags: { fromBlur: true }\n                    });\n                }\n                this.root.focusedComponent = null;\n                this.root.pendingBlur = null;\n            });\n        });\n    }\n    // eslint-disable-next-line max-statements\n    setCustomValidity(messages, dirty, external) {\n        const inputRefs = this.isInputComponent ? this.refs.input || [] : null;\n        if (typeof messages === 'string' && messages) {\n            messages = {\n                level: 'error',\n                message: messages,\n                component: this.component,\n            };\n        }\n        if (!Array.isArray(messages)) {\n            if (messages) {\n                messages = [messages];\n            }\n            else {\n                messages = [];\n            }\n        }\n        const errors = messages.filter(message => message.level === 'error');\n        let invalidInputRefs = inputRefs;\n        // Filter the invalid input refs in multiple components\n        if (this.component.multiple) {\n            const refsArray = Array.from(inputRefs);\n            refsArray.forEach((input) => {\n                this.setElementInvalid(this.performInputMapping(input), false);\n            });\n            this.setInputWidgetErrorClasses(refsArray, false);\n            invalidInputRefs = refsArray.filter((ref, index) => {\n                var _a;\n                return (_a = messages.some) === null || _a === void 0 ? void 0 : _a.call(messages, (msg) => {\n                    var _a;\n                    return ((_a = msg === null || msg === void 0 ? void 0 : msg.context) === null || _a === void 0 ? void 0 : _a.index) === index;\n                });\n            });\n        }\n        if (messages.length) {\n            if (this.refs.messageContainer) {\n                this.empty(this.refs.messageContainer);\n            }\n            this.emit('componentError', {\n                instance: this,\n                component: this.component,\n                message: messages[0].message,\n                messages,\n                external: !!external,\n            });\n            this.addMessages(messages, dirty, invalidInputRefs);\n            if (invalidInputRefs) {\n                this.setErrorClasses(invalidInputRefs, dirty, !!errors.length, !!messages.length);\n            }\n        }\n        else if (!errors.length || (errors[0].external === !!external)) {\n            if (this.refs.messageContainer) {\n                this.empty(this.refs.messageContainer);\n            }\n            if (this.refs.modalMessageContainer) {\n                this.empty(this.refs.modalMessageContainer);\n            }\n            if (invalidInputRefs) {\n                this.setErrorClasses(invalidInputRefs, dirty, !!errors.length, !!messages.length);\n            }\n            this.clearErrorClasses();\n        }\n        this._visibleErrors = messages;\n        return messages;\n    }\n    /**\n     * Determines if the value of this component is hidden from the user as if it is coming from the server, but is\n     * protected.\n     * @returns {boolean|*} - TRUE if the value is hidden.\n     */\n    isValueHidden() {\n        if (this.component.protected && this.root.editing) {\n            return false;\n        }\n        if (!this.root || !this.root.hasOwnProperty('editing')) {\n            return false;\n        }\n        if (!this.root || !this.root.editing) {\n            return false;\n        }\n        return (this.component.protected || !this.component.persistent || (this.component.persistent === 'client-only'));\n    }\n    shouldSkipValidation(data, row, flags = {}) {\n        const rules = [\n            // Do not validate if the flags say not too.\n            () => flags.noValidate,\n            // Force valid if component is read-only\n            () => this.options.readOnly,\n            // Do not check validations if component is not an input component.\n            () => !this.hasInput,\n            // Check to see if we are editing and if so, check component persistence.\n            () => this.isValueHidden(),\n            // Force valid if component is hidden.\n            () => {\n                if (!this.component.validateWhenHidden && (!this.visible || !this.checkCondition(row, data))) {\n                    // If this component is forced valid when it is hidden, then we also need to reset the errors for this component.\n                    this._errors = [];\n                    return true;\n                }\n                return false;\n            }\n        ];\n        return rules.some(pred => pred());\n    }\n    // Maintain reverse compatibility.\n    whenReady() {\n        console.warn('The whenReady() method has been deprecated. Please use the dataReady property instead.');\n        return this.dataReady;\n    }\n    get dataReady() {\n        return Promise.resolve();\n    }\n    /**\n     * Prints out the value of this component as a string value.\n     * @param {*} value - The value to print out.\n     * @returns {string} - The string representation of the value.\n     */\n    asString(value) {\n        value = value || this.getValue();\n        return (Array.isArray(value) ? value : [value]).map(lodash_1.default.toString).join(', ');\n    }\n    /**\n     * Return if the component is disabled.\n     * @returns {boolean} - TRUE if the component is disabled.\n     */\n    get disabled() {\n        return this._disabled || this.parentDisabled;\n    }\n    /**\n     * Disable this component.\n     * @param {boolean} disabled - TRUE to disable the component.\n     */\n    set disabled(disabled) {\n        this._disabled = disabled;\n    }\n    setDisabled(element, disabled) {\n        if (!element) {\n            return;\n        }\n        element.disabled = disabled;\n        if (disabled) {\n            element.setAttribute('disabled', 'disabled');\n        }\n        else {\n            element.removeAttribute('disabled');\n        }\n    }\n    setLoading(element, loading) {\n        if (!element || (element.loading === loading)) {\n            return;\n        }\n        element.loading = loading;\n        if (!element.loader && loading) {\n            element.loader = this.ce('i', {\n                class: `${this.iconClass('refresh', true)} button-icon-right`\n            });\n        }\n        if (element.loader) {\n            if (loading) {\n                this.appendTo(element.loader, element);\n            }\n            else {\n                this.removeChildFrom(element.loader, element);\n            }\n        }\n    }\n    selectOptions(select, tag, options, defaultValue) {\n        lodash_1.default.each(options, (option) => {\n            const attrs = {\n                value: option.value\n            };\n            if (defaultValue !== undefined && (option.value === defaultValue)) {\n                attrs.selected = 'selected';\n            }\n            const optionElement = this.ce('option', attrs);\n            optionElement.appendChild(this.text(option.label));\n            select.appendChild(optionElement);\n        });\n    }\n    setSelectValue(select, value) {\n        const options = select.querySelectorAll('option');\n        lodash_1.default.each(options, (option) => {\n            if (option.value === value) {\n                option.setAttribute('selected', 'selected');\n            }\n            else {\n                option.removeAttribute('selected');\n            }\n        });\n        if (select.onchange) {\n            select.onchange();\n        }\n        if (select.onselect) {\n            select.onselect();\n        }\n    }\n    getRelativePath(path) {\n        const keyPart = `.${this.key}`;\n        const thisPath = this.isInputComponent ? this.path\n            : this.path.slice(0).replace(keyPart, '');\n        return path.replace(thisPath, '');\n    }\n    clear() {\n        this.detach();\n        this.empty(this.getElement());\n    }\n    append(element) {\n        this.appendTo(element, this.element);\n    }\n    prepend(element) {\n        this.prependTo(element, this.element);\n    }\n    removeChild(element) {\n        this.removeChildFrom(element, this.element);\n    }\n    detachLogic() {\n        this.logic.forEach(logic => {\n            if (logic.trigger.type === 'event') {\n                const event = this.interpolate(logic.trigger.event);\n                this.off(event); // only applies to callbacks on this component\n            }\n        });\n    }\n    attachLogic() {\n        // Do not attach logic during builder mode.\n        if (this.builderMode) {\n            return;\n        }\n        this.logic.forEach((logic) => {\n            if (logic.trigger.type === 'event') {\n                const event = this.interpolate(logic.trigger.event);\n                this.on(event, (...args) => {\n                    const newComponent = (0, utils_2.fastCloneDeep)(this.originalComponent);\n                    if (this.applyActions(newComponent, logic.actions, args)) {\n                        // If component definition changed, replace it.\n                        if (!lodash_1.default.isEqual(this.component, newComponent)) {\n                            this.component = newComponent;\n                            const visible = this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden;\n                            const disabled = this.shouldDisabled;\n                            // Change states which won't be recalculated during redrawing\n                            if (this.visible !== visible) {\n                                this.visible = visible;\n                            }\n                            if (this.disabled !== disabled) {\n                                this.disabled = disabled;\n                            }\n                            this.redraw();\n                        }\n                    }\n                }, true);\n            }\n        });\n    }\n    /**\n     * Get the element information.\n     * @returns {*} - The components \"input\" DOM element information.\n     */\n    elementInfo() {\n        const attributes = {\n            name: this.options.name,\n            type: this.component.inputType || 'text',\n            class: 'form-control',\n            lang: this.options.language\n        };\n        if (this.component.placeholder) {\n            attributes.placeholder = this.t(this.component.placeholder, { _userInput: true });\n        }\n        if (this.component.tabindex) {\n            attributes.tabindex = this.component.tabindex;\n        }\n        if (this.disabled) {\n            attributes.disabled = 'disabled';\n        }\n        lodash_1.default.defaults(attributes, this.component.attributes);\n        return {\n            type: 'input',\n            component: this.component,\n            changeEvent: 'change',\n            attr: attributes\n        };\n    }\n    autofocus() {\n        const hasAutofocus = this.component.autofocus && !this.builderMode && !this.options.preview;\n        if (hasAutofocus) {\n            this.on('render', () => this.focus(), true);\n        }\n    }\n    scrollIntoView(element = this.element, verticalOnly) {\n        if (!element) {\n            return;\n        }\n        const { left, top } = element.getBoundingClientRect();\n        window.scrollTo(verticalOnly ? window.scrollX : left + window.scrollX, top + window.scrollY);\n    }\n    focus(index) {\n        var _a, _b, _c, _d;\n        if ('beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n        if (!index && !lodash_1.default.isNumber(index) && ((_b = (_a = this.refs) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.length)) {\n            index = this.refs.input.length - 1;\n        }\n        if ((_c = this.refs.input) === null || _c === void 0 ? void 0 : _c.length) {\n            const focusingInput = this.refs.input[index];\n            if (((_d = this.component.widget) === null || _d === void 0 ? void 0 : _d.type) === 'calendar') {\n                const sibling = focusingInput.nextSibling;\n                if (sibling) {\n                    sibling.focus();\n                }\n            }\n            else {\n                focusingInput.focus();\n            }\n        }\n        if (this.refs.openModal) {\n            this.refs.openModal.focus();\n        }\n        if (this.parent.refs.openModal) {\n            this.parent.refs.openModal.focus();\n        }\n    }\n    /**\n     * Get `Formio` instance for working with files\n     * @returns {import('@formio/core').Formio} - The Formio instance file service.\n     */\n    get fileService() {\n        if (this.options.fileService) {\n            return this.options.fileService;\n        }\n        if (this.options.formio) {\n            return this.options.formio;\n        }\n        if (this.root && this.root.formio) {\n            return this.root.formio;\n        }\n        const formio = new Formio_1.Formio();\n        // If a form is loaded, then make sure to set the correct formUrl.\n        if (this.root && this.root._form && this.root._form._id) {\n            formio.formUrl = `${formio.projectUrl}/form/${this.root._form._id}`;\n        }\n        return formio;\n    }\n    resetCaches() { }\n    get previewMode() {\n        return false;\n    }\n}\nexports[\"default\"] = Component;\nComponent.externalLibraries = {};\nComponent.requireLibrary = function (name, property, src, polling) {\n    if (!Component.externalLibraries.hasOwnProperty(name)) {\n        Component.externalLibraries[name] = {};\n        Component.externalLibraries[name].ready = new Promise((resolve, reject) => {\n            Component.externalLibraries[name].resolve = resolve;\n            Component.externalLibraries[name].reject = reject;\n        });\n        const callbackName = `${name}Callback`;\n        if (!polling && !window[callbackName]) {\n            window[callbackName] = function () {\n                this.resolve();\n            }.bind(Component.externalLibraries[name]);\n        }\n        // See if the plugin already exists.\n        const plugin = (0, utils_2.getScriptPlugin)(property);\n        if (plugin) {\n            Component.externalLibraries[name].resolve(plugin);\n        }\n        else {\n            src = Array.isArray(src) ? src : [src];\n            src.forEach((lib) => {\n                let attrs = {};\n                let elementType = '';\n                if (typeof lib === 'string') {\n                    lib = {\n                        type: 'script',\n                        src: lib\n                    };\n                }\n                switch (lib.type) {\n                    case 'script':\n                        elementType = 'script';\n                        attrs = {\n                            src: lib.src,\n                            type: 'text/javascript',\n                            defer: true,\n                            async: true\n                        };\n                        break;\n                    case 'styles':\n                        elementType = 'link';\n                        attrs = {\n                            href: lib.src,\n                            rel: 'stylesheet'\n                        };\n                        break;\n                }\n                // Add the script to the top page.\n                const script = document.createElement(elementType);\n                for (const attr in attrs) {\n                    script.setAttribute(attr, attrs[attr]);\n                }\n                document.getElementsByTagName('head')[0].appendChild(script);\n            });\n            // if no callback is provided, then check periodically for the script.\n            if (polling) {\n                setTimeout(function checkLibrary() {\n                    const plugin = (0, utils_2.getScriptPlugin)(property);\n                    if (plugin) {\n                        Component.externalLibraries[name].resolve(plugin);\n                    }\n                    else {\n                        // check again after 200 ms.\n                        setTimeout(checkLibrary, 200);\n                    }\n                }, 200);\n            }\n        }\n    }\n    return Component.externalLibraries[name].ready;\n};\nComponent.libraryReady = function (name) {\n    if (Component.externalLibraries.hasOwnProperty(name) &&\n        Component.externalLibraries[name].ready) {\n        return Component.externalLibraries[name].ready;\n    }\n    return Promise.reject(`${name} library was not required.`);\n};\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/component/Component.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n/* globals Quill, ClassicEditor, CKEDITOR */\nconst vanilla_text_mask_1 = __webpack_require__(/*! @formio/vanilla-text-mask */ \"./node_modules/@formio/vanilla-text-mask/dist/vanillaTextMask.js\");\nconst tippy_js_1 = __importDefault(__webpack_require__(/*! tippy.js */ \"./node_modules/tippy.js/dist/tippy.esm.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst ismobilejs_1 = __importDefault(__webpack_require__(/*! ismobilejs */ \"./node_modules/ismobilejs/esm/index.js\"));\nconst process_1 = __webpack_require__(/*! @formio/core/process */ \"./node_modules/@formio/core/lib/process/index.js\");\nconst Formio_1 = __webpack_require__(/*! ../../../Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __importDefault(__webpack_require__(/*! ../../../utils */ \"./lib/cjs/utils/index.js\"));\nconst utils_2 = __webpack_require__(/*! ../../../utils */ \"./lib/cjs/utils/index.js\");\nconst Element_1 = __importDefault(__webpack_require__(/*! ../../../Element */ \"./lib/cjs/Element.js\"));\nconst ComponentModal_1 = __importDefault(__webpack_require__(/*! ../componentModal/ComponentModal */ \"./lib/cjs/components/_classes/componentModal/ComponentModal.js\"));\nconst widgets_1 = __importDefault(__webpack_require__(/*! ../../../widgets */ \"./lib/cjs/widgets/index.js\"));\nconst addons_1 = __importDefault(__webpack_require__(/*! ../../../addons */ \"./lib/cjs/addons/index.js\"));\nconst uploadAdapter_1 = __webpack_require__(/*! ../../../providers/storage/uploadAdapter */ \"./lib/cjs/providers/storage/uploadAdapter.js\");\nconst en_1 = __importDefault(__webpack_require__(/*! ../../../translations/en */ \"./lib/cjs/translations/en.js\"));\nconst Templates_1 = __importDefault(__webpack_require__(/*! ../../../templates/Templates */ \"./lib/cjs/templates/Templates.js\"));\nconst isIEBrowser = utils_1.default.getBrowserInfo().ie;\n/**\n * This is the Component class\n which all elements within the FormioForm derive from.\n */\nclass Component extends Element_1.default {\n    static schema(...sources) {\n        return lodash_1.default.merge({\n            /**\n             * Determines if this component provides an input.\n             */\n            input: true,\n            /**\n             * The data key for this component (how the data is stored in the database).\n             */\n            key: '',\n            /**\n             * The input placeholder for this component.\n             */\n            placeholder: '',\n            /**\n             * The input prefix\n             */\n            prefix: '',\n            /**\n             * The custom CSS class to provide to this component.\n             */\n            customClass: '',\n            /**\n             * The input suffix.\n             */\n            suffix: '',\n            /**\n             * If this component should allow an array of values to be captured.\n             */\n            multiple: false,\n            /**\n             * The default value of this component.\n             */\n            defaultValue: null,\n            /**\n             * If the data of this component should be protected (no GET api requests can see the data)\n             */\n            protected: false,\n            /**\n             * Validate if the value of this component should be unique within the form.\n             */\n            unique: false,\n            /**\n             * If the value of this component should be persisted within the backend api database.\n             */\n            persistent: true,\n            /**\n             * Determines if the component should be within the form, but not visible.\n             */\n            hidden: false,\n            /**\n             * If the component should be cleared when hidden.\n             */\n            clearOnHide: true,\n            /**\n             * This will refresh this component options when this field changes.\n             */\n            refreshOn: '',\n            /**\n             * This will redraw the component when this field changes.\n             */\n            redrawOn: '',\n            /**\n             * If this component should be included as a column within a submission table.\n             */\n            tableView: false,\n            /**\n             * If this component should be rendering in modal.\n             */\n            modalEdit: false,\n            /**\n             * The input label provided to this component.\n             */\n            label: '',\n            dataGridLabel: false,\n            labelPosition: 'top',\n            description: '',\n            errorLabel: '',\n            tooltip: '',\n            hideLabel: false,\n            tabindex: '',\n            disabled: false,\n            autofocus: false,\n            dbIndex: false,\n            customDefaultValue: '',\n            calculateValue: '',\n            calculateServer: false,\n            widget: null,\n            /**\n             * Attributes that will be assigned to the input elements of this component.\n             */\n            attributes: {},\n            /**\n             * This will perform the validation on either \"change\" or \"blur\" of the input element.\n             */\n            validateOn: 'change',\n            /**\n             * The validation criteria for this component.\n             */\n            validate: {\n                /**\n                 * If this component is required.\n                 */\n                required: false,\n                /**\n                 * Custom JavaScript validation.\n                 */\n                custom: '',\n                /**\n                 * If the custom validation should remain private (only the backend will see it and execute it).\n                 */\n                customPrivate: false,\n                /**\n                 * If this component should implement a strict date validation if the Calendar widget is implemented.\n                 */\n                strictDateValidation: false,\n                multiple: false,\n                unique: false\n            },\n            /**\n             * The simple conditional settings for a component.\n             */\n            conditional: {\n                show: null,\n                when: null,\n                eq: ''\n            },\n            overlay: {\n                style: '',\n                left: '',\n                top: '',\n                width: '',\n                height: '',\n            },\n            allowCalculateOverride: false,\n            encrypted: false,\n            showCharCount: false,\n            showWordCount: false,\n            properties: {},\n            allowMultipleMasks: false,\n            addons: [],\n        }, ...sources);\n    }\n    /**\n     * Return the simple condition settings as part of the component.\n     * @returns {object} - The simple conditional settings.\n     */\n    static get conditionOperatorsSettings() {\n        return {\n            operators: ['isEqual', 'isNotEqual', 'isEmpty', 'isNotEmpty'],\n            valueComponent() {\n                return {\n                    type: 'textfield',\n                    widget: {\n                        type: 'input'\n                    }\n                };\n            }\n        };\n    }\n    /**\n     * Return the array of possible types of component value absed on its schema.\n     * @param schema\n     * @returns {Array}\n     */\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return utils_1.default.getComponentSavedTypes(schema) || [utils_1.default.componentValueTypes.any];\n    }\n    /**\n     * Provides a table view for this component. Override if you wish to do something different than using getView\n     * method of your instance.\n     * @param value\n     * @param options\n     */\n    /* eslint-disable no-unused-vars */\n    static tableView(value, options) { }\n    /* eslint-enable no-unused-vars */\n    /**\n     * Initialize a new Component.\n     * @param {object} component - The component JSON you wish to initialize.\n     * @param {object} options - The options for this component.\n     * @param {object} data - The global data submission object this component will belong.\n     */\n    /* eslint-disable max-statements */\n    constructor(component, options, data) {\n        var _a, _b, _c, _d;\n        super(Object.assign({\n            renderMode: 'form',\n            attachMode: 'full',\n            noDefaults: false\n        }, options || {}));\n        // Restore the component id.\n        if (component && component.id) {\n            this.id = component.id;\n        }\n        /**\n         * Determines if this component has a condition assigned to it.\n         * @type {null}\n         * @private\n         */\n        this._hasCondition = null;\n        /**\n         * The row index for this component.\n         */\n        this._rowIndex = undefined;\n        /**\n         * References to dom elements\n         */\n        this.refs = {};\n        // Allow global override for any component JSON.\n        if (component &&\n            this.options.components &&\n            this.options.components[component.type]) {\n            lodash_1.default.merge(component, this.options.components[component.type]);\n        }\n        /**\n         * An array of all the children components errors.\n         */\n        this.childErrors = [];\n        /**\n         * Last validation errors that have occured.\n         */\n        this._errors = [];\n        this._visibleErrors = [];\n        /**\n         * The Form.io component JSON schema.\n         * @type {*}\n         */\n        this.component = this.mergeSchema(component || {});\n        // Add the id to the component.\n        this.component.id = this.id;\n        this.afterComponentAssign();\n        // Save off the original component to be used in logic.\n        this.originalComponent = (0, utils_2.fastCloneDeep)(this.component);\n        /**\n         * If the component has been attached\n         */\n        this.attached = false;\n        /**\n         * If the component has been rendered\n         */\n        this.rendered = false;\n        /**\n         * The data object in which this component resides.\n         * @type {*}\n         */\n        this._data = data || {};\n        /**\n         * Tool tip text after processing\n         * @type {string}\n         */\n        this.tooltip = '';\n        /**\n         * The row path of this component.\n         * @type {number}\n         */\n        this.row = this.options.row;\n        /**\n         * Points to a flat map of child components (if applicable).\n         * @type {object}\n         */\n        this.childComponentsMap = {};\n        /**\n         * Determines if this component is disabled, or not.\n         * @type {boolean}\n         */\n        this._disabled = (0, utils_2.boolValue)(this.component.disabled) ? this.component.disabled : false;\n        /**\n         * Points to the root component, usually the FormComponent.\n         * @type {Component}\n         */\n        this.root = this.options.root || this;\n        this.localRoot = this.options.localRoot || this;\n        /**\n         * If this input has been input and provided value.\n         * @type {boolean}\n         */\n        this.pristine = true;\n        /**\n         * Points to the parent component.\n         * @type {Component}\n         */\n        this.parent = this.options.parent;\n        /**\n         * The component paths for this component.\n         * @type {import('@formio/core').ComponentPaths} - The component paths.\n         */\n        this.paths = utils_1.default.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths), { dataIndex: this.options.rowIndex === undefined ? (_d = (_c = this.parent) === null || _c === void 0 ? void 0 : _c.paths) === null || _d === void 0 ? void 0 : _d.dataIndex : this.options.rowIndex }));\n        this.options.name = this.options.name || 'data';\n        this._path = '';\n        // Needs for Nextgen Rules Engine\n        this.resetCaches();\n        /**\n         * Determines if this component is visible, or not.\n         */\n        this._parentVisible = this.options.hasOwnProperty('parentVisible') ? this.options.parentVisible : true;\n        this._visible = this._parentVisible && (this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden);\n        this._parentDisabled = false;\n        /**\n         * The reference attribute name for this component\n         */\n        this._referenceAttributeName = 'ref';\n        /**\n         * Used to trigger a new change in this component.\n         * @type {Function} - Call to trigger a change in this component.\n         */\n        let changes = [];\n        let lastChanged = null;\n        let triggerArgs = [];\n        const _triggerChange = lodash_1.default.debounce((...args) => {\n            if (this.root) {\n                this.root.changing = false;\n            }\n            triggerArgs = [];\n            if (!args[1] && lastChanged) {\n                // Set the changed component if one isn't provided.\n                args[1] = lastChanged;\n            }\n            if (lodash_1.default.isEmpty(args[0]) && lastChanged) {\n                // Set the flags if it is empty and lastChanged exists.\n                args[0] = lastChanged.flags;\n            }\n            lastChanged = null;\n            args[3] = changes;\n            const retVal = this.onChange(...args);\n            changes = [];\n            return retVal;\n        }, 100);\n        this.triggerChange = (...args) => {\n            if (args[1]) {\n                // Make sure that during the debounce that we always track lastChanged component, even if they\n                // don't provide one later.\n                lastChanged = args[1];\n                changes.push(lastChanged);\n            }\n            if (this.root) {\n                this.root.changing = true;\n            }\n            if (args.length) {\n                triggerArgs = args;\n            }\n            return _triggerChange(...triggerArgs);\n        };\n        /**\n         * Used to trigger a redraw event within this component.\n         * @type {Function}\n         */\n        this.triggerRedraw = lodash_1.default.debounce(this.redraw.bind(this), 100);\n        /**\n         * list of attached tooltips\n         * @type {Array}\n         */\n        this.tooltips = [];\n        /**\n         * List of attached addons\n         * @type {Array}\n         */\n        this.addons = [];\n        // To force this component to be invalid.\n        this.invalid = false;\n        if (this.component) {\n            this.type = this.component.type;\n            if (this.allowData && this.key) {\n                this.options.name += `[${this.key}]`;\n                // If component is visible or not set to clear on hide, set the default value.\n                if (!this.shouldConditionallyClear()) {\n                    if (!this.hasValue()) {\n                        if (this.shouldAddDefaultValue) {\n                            this.dataValue = this.defaultValue;\n                        }\n                    }\n                    else {\n                        // Ensure the dataValue is set.\n                        /* eslint-disable  no-self-assign */\n                        this.dataValue = this.dataValue;\n                        /* eslint-enable  no-self-assign */\n                    }\n                }\n            }\n            /**\n             * The element information for creating the input element.\n             * @type {*}\n             */\n            this.info = this.elementInfo();\n        }\n        // Allow anyone to hook into the component creation.\n        this.hook('component');\n        if (!this.options.skipInit) {\n            this.init();\n        }\n    }\n    /* eslint-enable max-statements */\n    get componentsMap() {\n        var _a;\n        return ((_a = this.root) === null || _a === void 0 ? void 0 : _a.childComponentsMap) || {};\n    }\n    /**\n     * Returns if the parent should conditionally clear.\n     *\n     * @returns {boolean} - If the parent should conditionally clear.\n     */\n    parentShouldConditionallyClear() {\n        let currentParent = this.parent;\n        while (currentParent) {\n            if ((currentParent.allowData && currentParent._conditionallyClear) ||\n                (!currentParent.allowData && currentParent._conditionallyHidden)) {\n                return true;\n            }\n            currentParent = currentParent.parent;\n        }\n        return false;\n    }\n    parentConditionallyHidden() {\n        let currentParent = this.parent;\n        while (currentParent) {\n            if (currentParent._conditionallyHidden) {\n                return true;\n            }\n            currentParent = currentParent.parent;\n        }\n        return false;\n    }\n    /**\n     * Returns true if any of the parents default their component \"hidden\" property to true.\n     * @returns {boolean} - If any parent defaults the hidden property to true.\n     */\n    anyParentDefaultsHidden() {\n        let currentParent = this.parent;\n        while (currentParent) {\n            if (currentParent.component.hidden) {\n                return true;\n            }\n            currentParent = currentParent.parent;\n        }\n        return false;\n    }\n    get data() {\n        return this._data;\n    }\n    set data(value) {\n        this._data = value;\n    }\n    mergeSchema(component = {}) {\n        return lodash_1.default.defaultsDeep(component, this.defaultSchema);\n    }\n    // Allow componets to notify when ready.\n    get ready() {\n        return Promise.resolve(this);\n    }\n    get isPDFReadOnlyMode() {\n        return this.parent &&\n            this.parent.form &&\n            (this.parent.form.display === 'pdf') &&\n            this.options.readOnly;\n    }\n    get labelInfo() {\n        const label = {};\n        label.hidden = this.labelIsHidden();\n        label.className = '';\n        label.labelPosition = this.component.labelPosition;\n        label.tooltipClass = `${this.iconClass('question-sign')} text-muted`;\n        const isPDFReadOnlyMode = this.isPDFReadOnlyMode;\n        if (this.hasInput && this.component.validate && (0, utils_2.boolValue)(this.component.validate.required) && !isPDFReadOnlyMode) {\n            label.className += ' field-required';\n        }\n        if (label.hidden) {\n            label.className += ' control-label--hidden';\n        }\n        if (this.info.attr.id) {\n            label.for = this.info.attr.id;\n        }\n        return label;\n    }\n    init() {\n        var _a;\n        this.disabled = this.shouldDisabled;\n        this._visible = (this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden);\n        if ((_a = this.component.addons) === null || _a === void 0 ? void 0 : _a.length) {\n            this.component.addons.forEach((addon) => this.createAddon(addon));\n        }\n    }\n    /**\n     * Get Row Index.\n     * @returns {number} - The row index.\n     */\n    get rowIndex() {\n        return this._rowIndex;\n    }\n    /**\n     * Set Row Index to row and update each component.\n     * @param {number} value - The row index.\n     * @returns {void}\n     */\n    set rowIndex(value) {\n        var _a, _b;\n        this.paths = utils_1.default.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths) || {})), { dataIndex: value }));\n        this._rowIndex = value;\n    }\n    afterComponentAssign() {\n        //implement in extended classes\n    }\n    createAddon(addonConfiguration) {\n        var _a;\n        const name = addonConfiguration.name;\n        if (!name) {\n            return;\n        }\n        const settings = ((_a = addonConfiguration.settings) === null || _a === void 0 ? void 0 : _a.data) || {};\n        const Addon = addons_1.default[name.value];\n        let addon = null;\n        if (Addon) {\n            const supportedComponents = Addon.info.supportedComponents;\n            const supportsThisComponentType = !(supportedComponents === null || supportedComponents === void 0 ? void 0 : supportedComponents.length) ||\n                supportedComponents.indexOf(this.component.type) !== -1;\n            if (supportsThisComponentType) {\n                addon = new Addon(settings, this);\n                this.addons.push(addon);\n            }\n            else {\n                console.warn(`Addon ${name.label} does not support component of type ${this.component.type}.`);\n            }\n        }\n        return addon;\n    }\n    teardown() {\n        if (this.element) {\n            delete this.element.component;\n            delete this.element;\n        }\n        delete this._currentForm;\n        delete this.parent;\n        delete this.root;\n        delete this.triggerChange;\n        delete this.triggerRedraw;\n        if (this.options) {\n            delete this.options.root;\n            delete this.options.parent;\n            delete this.options.i18next;\n        }\n        super.teardown();\n    }\n    destroy(all = false) {\n        super.destroy(all);\n        this.detach();\n        this.addons.forEach((addon) => addon.destroy());\n        if (all) {\n            this.teardown();\n        }\n    }\n    get shouldDisabled() {\n        return this.options.readOnly || this.component.disabled || (this.options.hasOwnProperty('disabled') && this.options.disabled[this.key]);\n    }\n    get isInputComponent() {\n        return !this.component.hasOwnProperty('input') || this.component.input;\n    }\n    get allowData() {\n        return this.hasInput;\n    }\n    get hasInput() {\n        return this.isInputComponent || (this.refs.input && this.refs.input.length);\n    }\n    get defaultSchema() {\n        return Component.schema();\n    }\n    get key() {\n        return lodash_1.default.get(this.component, 'key', '');\n    }\n    get path() {\n        return this.paths.dataPath;\n    }\n    set path(path) {\n        throw new Error('Should not be setting the path of a component.');\n    }\n    set parentVisible(value) {\n        this._parentVisible = value;\n    }\n    get parentVisible() {\n        return this._parentVisible;\n    }\n    set parentDisabled(value) {\n        this._parentDisabled = value;\n    }\n    get parentDisabled() {\n        return this._parentDisabled;\n    }\n    shouldForceVisibility(component, visibility) {\n        if (!this.options[visibility]) {\n            return false;\n        }\n        if (!component) {\n            component = this.component;\n        }\n        if (lodash_1.default.isArray(this.options[visibility])) {\n            return this.options[visibility].includes(component.key);\n        }\n        return this.options[visibility][component.key];\n    }\n    shouldForceHide(component) {\n        return this.shouldForceVisibility(component, 'hide');\n    }\n    shouldForceShow(component) {\n        return this.shouldForceVisibility(component, 'show');\n    }\n    /**\n     * Sets the component visibility.\n     * @param {boolean} value - Whether the component should be visible or not.\n     */\n    set visible(value) {\n        if (this._visible !== value) {\n            // Skip if this component is set to visible and is supposed to be hidden.\n            if (value && this.shouldForceHide()) {\n                return;\n            }\n            // Skip if this component is set to hidden and is supposed to be shown.\n            if (!value && this.shouldForceShow()) {\n                return;\n            }\n            this._visible = value;\n            this.redraw();\n        }\n    }\n    /**\n     * Returns the component visibility\n     * @returns {boolean} - Whether the component is visible or not.\n     */\n    get visible() {\n        // Show only if visibility changes or if we are in builder mode or if hidden fields should be shown.\n        if (this.builderMode || this.previewMode || this.options.showHiddenFields) {\n            return true;\n        }\n        if (this.shouldForceHide()) {\n            return false;\n        }\n        if (this.shouldForceShow()) {\n            return true;\n        }\n        return this._visible && this._parentVisible;\n    }\n    get logicallyHidden() {\n        if (this._logicallyHidden && !this.component.hidden) {\n            this._logicallyHidden = false;\n        }\n        return this._logicallyHidden;\n    }\n    /**\n     * Determines if the component should clear its value when the root form is pristine.\n     * @returns {boolean} - If the component should clear its value when the root form is pristine.\n     */\n    shouldConditionallyClearOnPristine() {\n        // If the form is pristine, we should NOT clear the value of a conditionally hidden child component\n        // of a layout component that defaults to hidden using the \"hidden\" component property.\n        return !this.anyParentDefaultsHidden();\n    }\n    /**\n     * Returns if the component should clear its value when conditionally hidden.\n     * @returns {boolean} - If the component should clear its value when conditionally hidden.\n     */\n    shouldConditionallyClear() {\n        // Skip if this component has clearOnHide set to false.\n        if (this.component.clearOnHide === false) {\n            this._conditionallyClear = false;\n            return this._conditionallyClear;\n        }\n        // If the component is logically hidden, then it is conditionally hidden and should clear.\n        if (this.logicallyHidden) {\n            this._conditionallyClear = true;\n            return this._conditionallyClear;\n        }\n        // If we have a condition and it is not conditionally visible, the it should conditionally clear.\n        if (this.hasCondition() &&\n            !this.conditionallyVisible() &&\n            (!this.rootPristine || this.shouldConditionallyClearOnPristine())) {\n            this._conditionallyClear = true;\n            return this._conditionallyClear;\n        }\n        this._conditionallyClear = this.hasSetValue ? false : this.parentShouldConditionallyClear();\n        return this._conditionallyClear;\n    }\n    /**\n     * Returns if the component is conditionally hidden.\n     * @returns {boolean} - If the component is conditionally hidden.\n     */\n    conditionallyHidden() {\n        // If it is logically hidden, then it is conditionally hidden.\n        if (this.logicallyHidden) {\n            this._conditionallyHidden = true;\n            return this._conditionallyHidden;\n        }\n        // If it has a condition, and is not conditionally visible, then it is conditionally hidden.\n        if (this.hasCondition() && !this.conditionallyVisible()) {\n            this._conditionallyHidden = true;\n            return this._conditionallyHidden;\n        }\n        // It is conditionally hidden if its parent is conditionally hidden.\n        this._conditionallyHidden = this.parentConditionallyHidden();\n        return this._conditionallyHidden;\n    }\n    get currentForm() {\n        return this._currentForm;\n    }\n    set currentForm(instance) {\n        this._currentForm = instance;\n    }\n    get fullMode() {\n        return this.options.attachMode === 'full';\n    }\n    get builderMode() {\n        return this.options.attachMode === 'builder';\n    }\n    get calculatedPath() {\n        console.error('component.calculatedPath was deprecated, use component.path instead.');\n        return this.path;\n    }\n    get labelPosition() {\n        return this.component.labelPosition;\n    }\n    get labelWidth() {\n        const width = this.component.labelWidth;\n        return width >= 0 ? width : 30;\n    }\n    get labelMargin() {\n        const margin = this.component.labelMargin;\n        return margin >= 0 ? margin : 3;\n    }\n    get isAdvancedLabel() {\n        return [\n            'left-left',\n            'left-right',\n            'right-left',\n            'right-right'\n        ].includes(this.labelPosition);\n    }\n    get labelPositions() {\n        return this.labelPosition.split('-');\n    }\n    get skipInEmail() {\n        return false;\n    }\n    rightDirection(direction) {\n        if (this.options.condensedMode) {\n            return false;\n        }\n        return direction === 'right';\n    }\n    getLabelInfo(isCondensed = false) {\n        const isRightPosition = this.rightDirection(this.labelPositions[0]);\n        const isLeftPosition = this.labelPositions[0] === 'left' || isCondensed;\n        const isRightAlign = this.rightDirection(this.labelPositions[1]);\n        let contentMargin = '';\n        if (this.component.hideLabel) {\n            const margin = isCondensed ? 0 : this.labelWidth + this.labelMargin;\n            contentMargin = isRightPosition ? `margin-right: ${margin}%` : '';\n            contentMargin = isLeftPosition ? `margin-left: ${margin}%` : '';\n        }\n        const labelStyles = `\n      flex: ${this.labelWidth};\n      ${isRightPosition ? 'margin-left' : 'margin-right'}: ${this.labelMargin}%;\n    `;\n        const contentStyles = `\n      flex: ${100 - this.labelWidth - this.labelMargin};\n      ${contentMargin};\n      ${this.component.hideLabel ? `max-width: ${100 - this.labelWidth - this.labelMargin}` : ''};\n    `;\n        return {\n            isRightPosition,\n            isRightAlign,\n            labelStyles,\n            contentStyles\n        };\n    }\n    /**\n     * Returns only the schema that is different from the default.\n     * @param {object} schema - The \"full\" json schema for the component.\n     * @param {object} defaultSchema - The \"default\" json schema for the component.\n     * @param {boolean} recursion - If we are currently in a recursive loop.\n     * @returns {object} - The minified json schema for this component.\n     */\n    getModifiedSchema(schema, defaultSchema, recursion) {\n        const modified = {};\n        if (!defaultSchema) {\n            return schema;\n        }\n        lodash_1.default.each(schema, (val, key) => {\n            if (!lodash_1.default.isArray(val) && lodash_1.default.isObject(val) && defaultSchema.hasOwnProperty(key)) {\n                const subModified = this.getModifiedSchema(val, defaultSchema[key], true);\n                if (!lodash_1.default.isEmpty(subModified)) {\n                    modified[key] = subModified;\n                }\n            }\n            else if (lodash_1.default.isArray(val)) {\n                if (val.length !== 0 && !lodash_1.default.isEqual(val, defaultSchema[key])) {\n                    modified[key] = val;\n                }\n            }\n            else if ((!recursion && (key === 'type')) ||\n                (!recursion && (key === 'key')) ||\n                (!recursion && (key === 'label')) ||\n                (!recursion && (key === 'input')) ||\n                (!recursion && (key === 'tableView')) ||\n                (val !== '' && !defaultSchema.hasOwnProperty(key)) ||\n                (val !== '' && val !== defaultSchema[key]) ||\n                (defaultSchema[key] && val !== defaultSchema[key])) {\n                modified[key] = val;\n            }\n        });\n        return modified;\n    }\n    /**\n     * Returns the JSON schema for this component.\n     * @returns {object} - The JSON schema for this component.\n     */\n    get schema() {\n        return (0, utils_2.fastCloneDeep)(this.getModifiedSchema(lodash_1.default.omit(this.component, 'id'), this.defaultSchema));\n    }\n    /**\n     * Returns true if component is inside DataGrid\n     * @returns {boolean} - True if component is inside DataGrid\n     */\n    get isInDataGrid() {\n        return this.inDataGrid;\n    }\n    /**\n     * Translate a text using the i18n system.\n     * @param {string} text - The i18n identifier.\n     * @param {object} params - The i18n parameters to use for translation.\n     * @param {...any} args - Additional arguments to pass to the translation library.\n     * @returns {string} - The translated text.\n     */\n    t(text, params = {}, ...args) {\n        if (!text) {\n            return '';\n        }\n        // Use _userInput: true to ignore translations from defaults\n        if (text in en_1.default && params._userInput) {\n            return text;\n        }\n        params.data = params.data || this.rootValue;\n        params.row = params.row || this.data;\n        params.component = params.component || this.component;\n        return super.t(text, params, ...args);\n    }\n    labelIsHidden() {\n        return !this.component.label ||\n            ((!this.isInDataGrid && this.component.hideLabel) ||\n                (this.isInDataGrid && !this.component.dataGridLabel) ||\n                this.options.floatingLabels ||\n                this.options.inputsOnly) && !this.builderMode;\n    }\n    transform(type, value) {\n        const frameworkTemplates = this.options.template ? Templates_1.default.templates[this.options.template] : Templates_1.default.current;\n        return frameworkTemplates.hasOwnProperty('transform')\n            ? frameworkTemplates.transform(type, value, this)\n            : (type, value) => value;\n    }\n    getTemplate(names, modes) {\n        modes = Array.isArray(modes) ? modes : [modes];\n        names = Array.isArray(names) ? names : [names];\n        if (!modes.includes('form')) {\n            modes.push('form');\n        }\n        let result = null;\n        if (this.options.templates) {\n            result = this.checkTemplate(this.options.templates, names, modes);\n            if (result) {\n                return result;\n            }\n        }\n        const frameworkTemplates = this.options.template ? Templates_1.default.templates[this.options.template] : Templates_1.default.current;\n        result = this.checkTemplate(frameworkTemplates, names, modes);\n        if (result) {\n            return result;\n        }\n        // Default back to bootstrap if not defined.\n        const name = names[names.length - 1];\n        const templatesByName = Templates_1.default.defaultTemplates[name];\n        if (!templatesByName) {\n            return { template: `Unknown template: ${name}` };\n        }\n        const templateByMode = this.checkTemplateMode(templatesByName, modes);\n        if (templateByMode) {\n            return { template: templateByMode };\n        }\n        return { template: templatesByName.form };\n    }\n    checkTemplate(templates, names, modes) {\n        for (const name of names) {\n            const templatesByName = templates[name];\n            if (templatesByName) {\n                const { referenceAttributeName } = templatesByName;\n                const templateByMode = this.checkTemplateMode(templatesByName, modes);\n                if (templateByMode) {\n                    return { template: templateByMode, referenceAttributeName };\n                }\n            }\n        }\n        return null;\n    }\n    checkTemplateMode(templatesByName, modes) {\n        for (const mode of modes) {\n            const templateByMode = templatesByName[mode];\n            if (templateByMode) {\n                return templateByMode;\n            }\n        }\n        return null;\n    }\n    getFormattedAttribute(attr) {\n        return attr ? this.t(attr, { _userInput: true }).replace(/\"/g, '&quot;') : '';\n    }\n    getFormattedTooltip(tooltipValue) {\n        const tooltip = this.interpolate(tooltipValue || '').replace(/(?:\\r\\n|\\r|\\n)/g, '<br />');\n        return this.getFormattedAttribute(tooltip);\n    }\n    isHtmlRenderMode() {\n        return this.options.renderMode === 'html';\n    }\n    renderTemplate(name, data = {}, modeOption = '') {\n        // Need to make this fall back to form if renderMode is not found similar to how we search templates.\n        const mode = modeOption || this.options.renderMode || 'form';\n        data.component = this.component;\n        data.self = this;\n        data.options = this.options;\n        data.readOnly = this.options.readOnly;\n        data.iconClass = this.iconClass.bind(this);\n        data.size = this.size.bind(this);\n        data.t = this.t.bind(this);\n        data.transform = this.transform.bind(this);\n        data.id = data.id || this.id;\n        data.key = data.key || this.key;\n        data.value = data.value || this.dataValue;\n        data.disabled = this.disabled;\n        data.builder = this.builderMode;\n        data.render = (...args) => {\n            console.warn(`Form.io 'render' template function is deprecated.\n      If you need to render template (template A) inside of another template (template B),\n      pass pre-compiled template A (use this.renderTemplate('template_A_name') as template context variable for template B`);\n            return this.renderTemplate(...args);\n        };\n        data.label = data.labelInfo || this.labelInfo;\n        data.tooltip = this.getFormattedTooltip(this.component.tooltip);\n        // Allow more specific template names\n        const names = [\n            `${name}-${this.component.type}-${this.key}`,\n            `${name}-${this.component.type}`,\n            `${name}-${this.key}`,\n            `${name}`,\n        ];\n        // Allow template alters.\n        const { referenceAttributeName, template } = this.getTemplate(names, mode);\n        if (referenceAttributeName) {\n            this._referenceAttributeName = referenceAttributeName;\n        }\n        return this.hook(`render${name.charAt(0).toUpperCase() + name.substring(1, name.length)}`, this.interpolate(template, data), data, mode);\n    }\n    /**\n     * Sanitize an html string.\n     * @param {string} dirty - The dirty html string to sanitize.\n     * @param {boolean} forceSanitize - If we should force the sanitize to occur.\n     * @param {object} options - The options for the sanitize.\n     * @returns {*} - The sanitized html string.\n     */\n    sanitize(dirty, forceSanitize = false, options = {}) {\n        var _a;\n        if (!this.shouldSanitizeValue && !forceSanitize) {\n            return dirty;\n        }\n        return utils_1.default.sanitize(dirty, {\n            sanitizeConfig: lodash_1.default.merge(((_a = this.options) === null || _a === void 0 ? void 0 : _a.sanitizeConfig) || {}, options || {}),\n        });\n    }\n    /**\n     * Render a template string into html.\n     * @param {string} template - The template to render.\n     * @param {object} data - The data to provide to the template.\n     * @returns {HTMLElement | string} - The created element or an empty string if template is not specified.\n     */\n    renderString(template, data) {\n        if (!template) {\n            return '';\n        }\n        // Interpolate the template and populate\n        return this.interpolate(template, data);\n    }\n    /**\n     * Allows for modification of the component value prior to submission.\n     * @param {*} input - The input to be modified.\n     * @returns {*} - The modified input mapping for the extended component.\n     */\n    performInputMapping(input) {\n        return input;\n    }\n    /**\n     * Returns the component \"widget\" if one is available.\n     * @returns {Widget|null} - The widget instance. null if not available.\n     */\n    get widget() {\n        var _a;\n        const settings = this.component.widget;\n        if (settings && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.shadowRoot)) {\n            settings.shadowRoot = this.root.shadowRoot;\n        }\n        const widget = settings && widgets_1.default[settings.type] ? new widgets_1.default[settings.type](settings, this.component, this) : null;\n        return widget;\n    }\n    /**\n     * Returns the native supported browser language.\n     * @returns {string|null} - The native browser language that is supported.\n     */\n    getBrowserLanguage() {\n        const nav = window.navigator;\n        const browserLanguagePropertyKeys = ['language', 'browserLanguage', 'systemLanguage', 'userLanguage'];\n        let language;\n        // support for HTML 5.1 \"navigator.languages\"\n        if (Array.isArray(nav.languages)) {\n            for (let i = 0; i < nav.languages.length; i++) {\n                language = nav.languages[i];\n                if (language && language.length) {\n                    return language.split(';')[0];\n                }\n            }\n        }\n        // support for other well known properties in browsers\n        for (let i = 0; i < browserLanguagePropertyKeys.length; i++) {\n            language = nav[browserLanguagePropertyKeys[i]];\n            if (language && language.length) {\n                return language.split(';')[0];\n            }\n        }\n        return null;\n    }\n    /**\n     * Called before a next and previous page is triggered allowing the components to perform special functions.\n     * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the next/previous page navigation.\n     */\n    beforePage() {\n        return Promise.resolve(true);\n    }\n    /**\n     * Called before the next page is triggered allowing the components to hook into the page navigation and perform tasks.\n     * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the next page navigation.\n     */\n    beforeNext() {\n        return this.beforePage(true);\n    }\n    /**\n     * Called before a submission is triggered allowing the components to perform special async functions.\n     * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the submission.\n     */\n    beforeSubmit() {\n        return Promise.resolve(true);\n    }\n    /**\n     * Return the submission timezone.\n     * @returns {string} - The submission timezone.\n     */\n    get submissionTimezone() {\n        this.options.submissionTimezone = this.options.submissionTimezone || lodash_1.default.get(this.root, 'options.submissionTimezone');\n        return this.options.submissionTimezone;\n    }\n    /**\n     * Return the current timezone.\n     * @returns {string} - The current timezone.\n     */\n    get timezone() {\n        return this.getTimezone(this.component);\n    }\n    /**\n     * Return the current timezone.\n     * @param {object} settings - Settings to control how the timezone should be returned.\n     * @returns {string} - The current timezone.\n     */\n    getTimezone(settings) {\n        if (settings.timezone) {\n            return settings.timezone;\n        }\n        if (settings.displayInTimezone === 'utc') {\n            return 'UTC';\n        }\n        const submissionTimezone = this.submissionTimezone;\n        if (submissionTimezone &&\n            ((settings.displayInTimezone === 'submission') ||\n                ((this.options.pdf || this.options.server) && (settings.displayInTimezone === 'viewer')))) {\n            return submissionTimezone;\n        }\n        // Return current timezone if none are provided.\n        return (0, utils_2.currentTimezone)();\n    }\n    /**\n     *\n     * @param {HTMLElement} element - The containing DOM element to query for the ref value.\n     * @param {object} refs - The references to load.\n     * @param {string} [referenceAttributeName] - The attribute name to use for the reference.\n     */\n    loadRefs(element, refs, referenceAttributeName) {\n        if (!element) {\n            return;\n        }\n        for (const ref in refs) {\n            const refType = refs[ref];\n            const isString = typeof refType === 'string';\n            const selector = isString && refType.includes('scope')\n                ? `:scope > [${referenceAttributeName || this._referenceAttributeName || 'ref'}=\"${ref}\"]`\n                : `[${referenceAttributeName || this._referenceAttributeName || 'ref'}=\"${ref}\"]`;\n            if (isString && refType.startsWith('single')) {\n                this.refs[ref] = element.querySelector(selector);\n            }\n            else {\n                this.refs[ref] = element.querySelectorAll(selector);\n            }\n        }\n    }\n    /**\n     * Opens the modal element.\n     * @param {string} template - The template to use for the modal dialog.\n     */\n    setOpenModalElement(template = null) {\n        this.componentModal.setOpenModalElement(template || this.getModalPreviewTemplate());\n    }\n    /**\n     * Renders a modal preview template and returns the markup as a string\n     * @param {object|null|undefined} ctx - The rendering context\n     * @returns {string} - The modal preview markup\n     */\n    renderModalPreview(ctx) {\n        return this.renderTemplate('modalPreview', ctx || {});\n    }\n    /**\n     * Returns the modal preview template.\n     * @returns {string} - The modal preview template.\n     */\n    getModalPreviewTemplate() {\n        var _a;\n        const dataValue = this.component.type === 'password' ? this.dataValue.replace(/./g, '•') : this.dataValue;\n        let modalLabel;\n        if (this.hasInput && ((_a = this.component.validate) === null || _a === void 0 ? void 0 : _a.required) && !this.isPDFReadOnlyMode) {\n            modalLabel = { className: 'field-required' };\n        }\n        return this.renderModalPreview({\n            previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('Click to set value'),\n            messages: '',\n            labelInfo: modalLabel,\n        });\n    }\n    /**\n     * Performs a complete build of a component, which empties, renders, sets the content in the DOM, and then finally attaches events.\n     * @param {HTMLElement} element - The element to attach this component to.\n     * @returns {Promise<void>} - A promise that resolves when the component has been built.\n     */\n    build(element) {\n        element = element || this.element;\n        this.empty(element);\n        this.setContent(element, this.render());\n        return this.attach(element);\n    }\n    get hasModalSaveButton() {\n        return true;\n    }\n    /**\n     * Renders a component as an HTML string.\n     * @param {string} children - The contents of all the children HTML as a string.\n     * @param {boolean} topLevel - If this is the topmost component that is being rendered.\n     * @returns {string} - The rendered HTML string of a component.\n     */\n    render(children = `Unknown component: ${this.component.type}`, topLevel = false) {\n        const isVisible = this.visible;\n        this.rendered = true;\n        if (!this.builderMode && !this.previewMode && this.component.modalEdit) {\n            return ComponentModal_1.default.render(this, {\n                visible: isVisible,\n                showSaveButton: this.hasModalSaveButton,\n                id: this.id,\n                classes: this.className,\n                styles: this.customStyle,\n                children\n            }, topLevel);\n        }\n        else {\n            return this.renderTemplate('component', {\n                visible: isVisible,\n                id: this.id,\n                classes: this.className,\n                styles: this.customStyle,\n                children\n            }, topLevel);\n        }\n    }\n    /**\n     * Creates the tooltip instance using tippy.js and returns it\n     * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip\n     * @param {object|null|undefined} settings - tippy.js options\n     * @returns {import('tippy.js').Tippy} - tippy.js instance\n     */\n    createTooltip(tooltipEl, settings = {}) {\n        const tooltipAttribute = tooltipEl.getAttribute('data-tooltip');\n        const tooltipDataTitle = tooltipEl.getAttribute('data-title');\n        const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)\n            .replace(/(?:\\r\\n|\\r|\\n)/g, '<br />');\n        return (0, tippy_js_1.default)(tooltipEl, Object.assign(Object.assign({ allowHTML: true, trigger: 'mouseenter click focus', placement: 'right', zIndex: 10000, interactive: true }, settings), { content: this.t(this.sanitize(tooltipText), { _userInput: true }) }));\n    }\n    /**\n     * Attaches all the tooltips provided the refs object.\n     * @param {object} toolTipsRefs - The refs for the tooltips within your template.\n     * @returns {void}\n     */\n    attachTooltips(toolTipsRefs) {\n        toolTipsRefs === null || toolTipsRefs === void 0 ? void 0 : toolTipsRefs.forEach((tooltip, index) => {\n            if (tooltip) {\n                this.tooltips[index] = this.createTooltip(tooltip);\n            }\n        });\n    }\n    /**\n     * Create a new component modal for this component.\n     * @param {HTMLElement} element - The element to attach the modal to.\n     * @param {boolean} modalShouldBeOpened - TRUE if the modal should open immediately.\n     * @param {any} currentValue - The current value of the component.\n     * @returns {ComponentModal} - The created component modal.\n     */\n    createComponentModal(element, modalShouldBeOpened, currentValue) {\n        return new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);\n    }\n    /**\n     * Attaches all event listensers for this component to the DOM elements that were rendered.\n     * @param {HTMLElement} element - The element to attach the listeners to.\n     * @returns {Promise<void>} - Resolves when the component is done attaching to the DOM.\n     */\n    attach(element) {\n        if (!this.builderMode && !this.previewMode && this.component.modalEdit) {\n            const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;\n            const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;\n            const openModalTemplate = this.componentModal && modalShouldBeOpened\n                ? this.componentModal.openModalTemplate\n                : null;\n            this.componentModal = this.createComponentModal(element, modalShouldBeOpened, currentValue);\n            this.setOpenModalElement(openModalTemplate);\n        }\n        this.attached = true;\n        this.setElement(element);\n        element.component = this;\n        // If this already has an id, get it from the dom. If SSR, it could be different from the initiated id.\n        if (this.element.id) {\n            this.id = this.element.id;\n            this.component.id = this.id;\n        }\n        this.loadRefs(element, {\n            messageContainer: 'single',\n            tooltip: 'multiple'\n        });\n        this.attachTooltips(this.refs.tooltip);\n        // Attach logic.\n        this.attachLogic();\n        this.autofocus();\n        // Allow global attach.\n        this.hook('attachComponent', element, this);\n        // Allow attach per component type.\n        const type = this.component.type;\n        if (type) {\n            this.hook(`attach${type.charAt(0).toUpperCase() + type.substring(1, type.length)}`, element, this);\n        }\n        this.restoreFocus();\n        this.addons.forEach((addon) => addon.attach(element));\n        return Promise.resolve();\n    }\n    /**\n     * Restors the \"focus\" on a component after a redraw event has occured.\n     */\n    restoreFocus() {\n        var _a, _b, _c;\n        const isFocused = ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.focusedComponent) === null || _b === void 0 ? void 0 : _b.path) === this.path;\n        if (isFocused) {\n            this.loadRefs(this.element, { input: 'multiple' });\n            this.focus((_c = this.root.currentSelection) === null || _c === void 0 ? void 0 : _c.index);\n            this.restoreCaretPosition();\n        }\n    }\n    /**\n     * Adds a keyboard shortcut to this component.\n     * @param {HTMLElement} element - The element to attach the keyboard shortcut to.\n     * @param {string} shortcut - The keyboard shortcut to add.\n     * @returns {void}\n     */\n    addShortcut(element, shortcut) {\n        // Avoid infinite recursion.\n        if (!element || !this.root || (this.root === this)) {\n            return;\n        }\n        if (!shortcut) {\n            shortcut = this.component.shortcut;\n        }\n        this.root.addShortcut(element, shortcut);\n    }\n    /**\n     * Removes a keyboard shortcut from this component.\n     * @param {HTMLElement} element - The element to remove the keyboard shortcut from.\n     * @param {string} shortcut - The keyboard shortcut to remove.\n     * @returns {void}\n     */\n    removeShortcut(element, shortcut) {\n        // Avoid infinite recursion.\n        if (!element || (this.root === this)) {\n            return;\n        }\n        if (!shortcut) {\n            shortcut = this.component.shortcut;\n        }\n        this.root.removeShortcut(element, shortcut);\n    }\n    /**\n     * Remove all event handlers.\n     */\n    detach() {\n        // First iterate through each ref and delete the component so there are no dangling component references.\n        lodash_1.default.each(this.refs, (ref) => {\n            if (ref instanceof NodeList) {\n                ref.forEach((elem) => {\n                    delete elem.component;\n                });\n            }\n            else if (ref) {\n                delete ref.component;\n            }\n        });\n        this.refs = {};\n        this.removeEventListeners();\n        this.detachLogic();\n        if (this.tooltip) {\n            this.tooltip.destroy();\n        }\n    }\n    /**\n     * Determines if the component should be refreshed based on the path of another component that changed.\n     * @param {string} refreshData - The path of the data that needs to trigger a refresh.\n     * @param {boolean} changed - Flag that is true if the data has been changed.\n     * @param {any} flags - The flags for the checkData procedure.\n     * @returns {void}\n     */\n    checkRefresh(refreshData, changed, flags) {\n        var _a, _b;\n        const changePath = lodash_1.default.get(changed, 'instance.path', false);\n        // Don't let components change themselves.\n        if (changePath && this.path === changePath) {\n            return;\n        }\n        if (refreshData === 'data') {\n            this.refresh(this.data, changed, flags);\n        }\n        else if ((changePath && (((_b = (_a = changed.instance) === null || _a === void 0 ? void 0 : _a.paths) === null || _b === void 0 ? void 0 : _b.localPath) === refreshData)) && changed && changed.instance &&\n            // Make sure the changed component is not in a different \"context\". Solves issues where refreshOn being set\n            // in fields inside EditGrids could alter their state from other rows (which is bad).\n            this.inContext(changed.instance)) {\n            this.refresh(changed.value, changed, flags);\n        }\n    }\n    /**\n     * Iterates over a list of changes, and determines if the component should be refreshed if it is configured to refresh on any of those components.\n     * @param {Array<any>} changes - The list of components that have changed.\n     * @param {any} flags - The checkData flags.\n     * @returns {void}\n     */\n    checkRefreshOn(changes, flags = {}) {\n        changes = changes || [];\n        if (flags.noRefresh) {\n            return;\n        }\n        if (!changes.length && flags.changed) {\n            changes = [flags.changed];\n        }\n        const refreshOn = flags.fromBlur ? this.component.refreshOnBlur : this.component.refreshOn || this.component.redrawOn;\n        // If they wish to refresh on a value, then add that here.\n        if (refreshOn) {\n            if (Array.isArray(refreshOn)) {\n                refreshOn.forEach(refreshData => changes.forEach(changed => this.checkRefresh(refreshData, changed, flags)));\n            }\n            else {\n                changes.forEach(changed => this.checkRefresh(refreshOn, changed, flags));\n            }\n        }\n    }\n    /**\n     * Refreshes the component with a new value.\n     * @param {any} value - The latest value of the component to check if it needs to be refreshed.\n     * @returns {void}\n     */\n    refresh(value) {\n        if (this.hasOwnProperty('refreshOnValue')) {\n            this.refreshOnChanged = !lodash_1.default.isEqual(value, this.refreshOnValue);\n        }\n        else {\n            this.refreshOnChanged = true;\n        }\n        this.refreshOnValue = (0, utils_2.fastCloneDeep)(value);\n        if (this.refreshOnChanged) {\n            if (this.component.clearOnRefresh) {\n                this.setValue(null);\n            }\n            this.triggerRedraw();\n        }\n    }\n    /**\n     * Checks to see if a separate component is in the \"context\" of this component. This is determined by first checking\n     * if they share the same \"data\" object. It will then walk up the parent tree and compare its parents data objects\n     * with the components data and returns true if they are in the same context.\n     *\n     * Different rows of the same EditGrid, for example, are in different contexts.\n     * @param {any} component - The component to check if it is in the same context as this component.\n     * @returns {boolean} - TRUE if the component is in the same context as this component.\n     */\n    inContext(component) {\n        if (component.data === this.data) {\n            return true;\n        }\n        let parent = this.parent;\n        while (parent) {\n            if (parent.data === component.data) {\n                return true;\n            }\n            parent = parent.parent;\n        }\n        return false;\n    }\n    /**\n     * Determines if we are in \"view\" only mode.\n     * @returns {boolean} - TRUE if we are in \"view\" only mode.\n     */\n    get viewOnly() {\n        return this.options.readOnly && this.options.viewAsHtml;\n    }\n    /**\n     * Sets the HTMLElement for this component.\n     * @param {HTMLElement} element - The element that is attached to this component.\n     * @returns {void}\n     */\n    setElement(element) {\n        if (this.element) {\n            delete this.element.component;\n            delete this.element;\n        }\n        this.element = element;\n    }\n    /**\n     * Creates an element to hold the \"view only\" version of this component.\n     * @returns {HTMLElement} - The element for this component.\n     */\n    createViewOnlyElement() {\n        this.setElement(this.ce('dl', {\n            id: this.id\n        }));\n        if (this.element) {\n            // Ensure you can get the component info from the element.\n            this.element.component = this;\n        }\n        return this.element;\n    }\n    /**\n     * The default value for the \"view only\" mode of a component if the value is not provided.\n     * @returns {string} - The default value for this component.\n     */\n    get defaultViewOnlyValue() {\n        return '-';\n    }\n    /**\n     * Uses the widget to determine the output string.\n     * @param {any} value - The current value of the component.\n     * @param {any} options - The options for getValueAsString.\n     * @returns {any|Array<any>} - The value as a string.\n     */\n    getWidgetValueAsString(value, options) {\n        const noInputWidget = !this.refs.input || !this.refs.input[0] || !this.refs.input[0].widget;\n        if (!value || noInputWidget) {\n            if (!this.widget || !value) {\n                return value;\n            }\n            else {\n                return this.widget.getValueAsString(value);\n            }\n        }\n        if (Array.isArray(value)) {\n            const values = [];\n            value.forEach((val, index) => {\n                const widget = this.refs.input[index] && this.refs.input[index].widget;\n                if (widget) {\n                    values.push(widget.getValueAsString(val, options));\n                }\n            });\n            return values;\n        }\n        const widget = this.refs.input[0].widget;\n        return widget.getValueAsString(value, options);\n    }\n    /**\n     * Returns the value of the component as a string.\n     * @param {any} value - The value for this component.\n     * @param {any} options - The options for this component.\n     * @returns {string} - The string representation of the value of this component.\n     */\n    getValueAsString(value, options) {\n        if (!value) {\n            return '';\n        }\n        value = this.getWidgetValueAsString(value, options);\n        if (Array.isArray(value)) {\n            return value.join(', ');\n        }\n        if (lodash_1.default.isPlainObject(value)) {\n            return JSON.stringify(value);\n        }\n        if (value === null || value === undefined) {\n            return '';\n        }\n        const stringValue = value.toString();\n        return this.sanitize(stringValue);\n    }\n    /**\n     * Returns the string representation \"view\" of the component value.\n     * @param {any} value - The value of the component.\n     * @param {any} options - The options for this component.\n     * @returns {string} - The string representation of the value of this component.\n     */\n    getView(value, options) {\n        if (this.component.protected) {\n            return '--- PROTECTED ---';\n        }\n        return this.getValueAsString(value, options);\n    }\n    /**\n     * Updates the items list for this component. Useful for Select and other List component types.\n     * @param {...any} args - The arguments to pass to the onChange event.\n     * @returns {void}\n     */\n    updateItems(...args) {\n        this.restoreValue();\n        this.onChange(...args);\n    }\n    /**\n     * Returns the value for a specific item in a List type component.\n     * @param {any} data - The data for this component.\n     * @param {boolean} [forceUseValue] - if true, return 'value' property of the data\n     * @returns {any} - The value of the item.\n     */\n    itemValue(data, forceUseValue = false) {\n        if (lodash_1.default.isObject(data) && !lodash_1.default.isArray(data)) {\n            if (this.valueProperty) {\n                return lodash_1.default.get(data, this.valueProperty);\n            }\n            if (forceUseValue) {\n                return data.value;\n            }\n        }\n        return data;\n    }\n    /**\n     * Returns the item value for html mode.\n     * @param {any} value - The value for this component.\n     * @returns {any} - The value of the item for html mode.\n     */\n    itemValueForHTMLMode(value) {\n        if (Array.isArray(value)) {\n            const values = value.map(item => Array.isArray(item) ? this.itemValueForHTMLMode(item) : this.itemValue(item));\n            return values.join(', ');\n        }\n        return this.itemValue(value);\n    }\n    /**\n     * Creates a modal to input the value of this component.\n     * @param {HTMLElement} element - The element to attach the modal to.\n     * @param {any} attr - A list of attributes to add to the modal.\n     * @param {boolean} confirm - If we should add a confirmation to the modal that keeps it from closing unless confirmed.\n     * @returns {HTMLElement} - The created modal element.\n     */\n    createModal(element, attr, confirm) {\n        const dialog = this.ce('div', attr || {});\n        this.setContent(dialog, this.renderTemplate('dialog'));\n        // Add refs to dialog, not \"this\".\n        dialog.refs = {};\n        this.loadRefs.call(dialog, dialog, {\n            dialogOverlay: 'single',\n            dialogContents: 'single',\n            dialogClose: 'single',\n        });\n        dialog.refs.dialogContents.appendChild(element);\n        document.body.appendChild(dialog);\n        document.body.classList.add('modal-open');\n        dialog.close = () => {\n            document.body.classList.remove('modal-open');\n            dialog.dispatchEvent(new CustomEvent('close'));\n        };\n        this.addEventListener(dialog, 'close', () => this.removeChildFrom(dialog, document.body));\n        const close = (event) => {\n            event.preventDefault();\n            dialog.close();\n        };\n        const handleCloseClick = (e) => {\n            if (confirm) {\n                confirm().then(() => close(e))\n                    .catch(() => { });\n            }\n            else {\n                close(e);\n            }\n        };\n        this.addEventListener(dialog.refs.dialogOverlay, 'click', handleCloseClick);\n        this.addEventListener(dialog.refs.dialogClose, 'click', handleCloseClick);\n        return dialog;\n    }\n    /**\n     * Uses CSS classes to show or hide an element.\n     * @returns {boolean} - TRUE if the element has been css removed.\n     */\n    get optimizeRedraw() {\n        if (this.options.optimizeRedraw && this.element && !this.visible) {\n            this.addClass(this.element, 'formio-removed');\n            return true;\n        }\n        return false;\n    }\n    /**\n     * Retrieves the CSS class name of this component.\n     * @returns {string} - The class name of this component.\n     */\n    get className() {\n        let className = this.hasInput ? `${this.transform('class', 'form-group')} has-feedback ` : '';\n        className += `formio-component formio-component-${this.component.type} `;\n        // TODO: find proper way to avoid overriding of default type-based component styles\n        if (this.key && this.key !== 'form') {\n            className += `formio-component-${this.key} `;\n        }\n        if (this.component.multiple) {\n            className += 'formio-component-multiple ';\n        }\n        if (this.component.customClass) {\n            className += this.component.customClass;\n        }\n        if (this.hasInput && this.component.validate && (0, utils_2.boolValue)(this.component.validate.required)) {\n            className += ' required';\n        }\n        if (this.labelIsHidden()) {\n            className += ' formio-component-label-hidden';\n        }\n        if (!this.visible) {\n            className += ' formio-hidden';\n        }\n        return className;\n    }\n    /**\n     * Build the custom style from the layout values\n     * @returns {string} - The custom style\n     */\n    get customStyle() {\n        let customCSS = '';\n        lodash_1.default.each(this.component.style, (value, key) => {\n            if (value !== '') {\n                customCSS += `${key}:${value};`;\n            }\n        });\n        return customCSS;\n    }\n    /**\n     * Returns the component condition operator settings if available.\n     * @returns {object} - The component condition operator settings.\n     */\n    static get serverConditionSettings() {\n        return Component.conditionOperatorsSettings;\n    }\n    /**\n     * Returns if the application is on a mobile device.\n     * @returns {boolean} - TRUE if the application is on a mobile device.\n     */\n    get isMobile() {\n        return (0, ismobilejs_1.default)();\n    }\n    /**\n     * Returns the outside wrapping element of this component.\n     * @returns {HTMLElement} - The wrapping element of this component.\n     */\n    getElement() {\n        return this.element;\n    }\n    /**\n     * Create an evaluation context for all script executions and interpolations.\n     * @param {any} additional - Additional context to provide.\n     * @returns {any} - The evaluation context.\n     */\n    evalContext(additional) {\n        return super.evalContext(Object.assign({\n            component: this.component,\n            row: this.data,\n            rowIndex: this.rowIndex,\n            data: this.rootValue,\n            iconClass: this.iconClass.bind(this),\n            // Bind the translate function to the data context of any interpolated string.\n            // It is useful to translate strings in different scenarions (eg: custom edit grid templates, custom error messages etc.)\n            // and desirable to be publicly available rather than calling the internal {instance.t} function in the template string.\n            t: this.t.bind(this),\n            submission: (this.root ? this.root._submission : {\n                data: this.rootValue\n            }),\n            form: this.root ? this.root._form : {},\n            options: this.options,\n        }, additional));\n    }\n    /**\n     * Sets the pristine flag for this component.\n     * @param {boolean} pristine - TRUE to make pristine, FALSE not pristine.\n     */\n    setPristine(pristine) {\n        this.pristine = pristine;\n    }\n    /**\n     * Returns if the component is pristine.\n     * @returns {boolean} - TRUE if the component is pristine.\n     */\n    get isPristine() {\n        return this.pristine;\n    }\n    /**\n     * Sets the dirty flag for this component.\n     * @param {boolean} dirty - TRUE to make dirty, FALSE not dirty.\n     */\n    setDirty(dirty) {\n        this.dirty = dirty;\n    }\n    /**\n     * Returns if the component is dirty.\n     * @returns {boolean} - TRUE if the component is dirty.\n     */\n    get isDirty() {\n        return this.dirty;\n    }\n    /**\n     * Removes a value out of the data array and rebuild the rows.\n     * @param {number} index - The index of the data element to remove.\n     */\n    removeValue(index) {\n        this.splice(index);\n        this.redraw();\n        this.restoreValue();\n        this.triggerRootChange();\n    }\n    /**\n     * Returns the icon class for a given icon name.\n     * @param {string} name - The name of the icon you wish to fetch provided the icon class. This is the \"font awesome\" version of the name of the icon.\n     * @param {boolean} spinning - If the component should be spinning.\n     * @returns {string} - The icon class for the equivalent icon in the iconset we are using.\n     */\n    iconClass(name, spinning) {\n        const iconset = this.options.iconset || Templates_1.default.current.defaultIconset || 'fa';\n        return Templates_1.default.current.hasOwnProperty('iconClass')\n            ? Templates_1.default.current.iconClass(iconset, name, spinning)\n            : this.options.iconset === 'fa' ? Templates_1.default.defaultTemplates.iconClass(iconset, name, spinning) : name;\n    }\n    /**\n     * Returns the size css class names for our current template.\n     * @param {string} size - The size class name for the default iconset.\n     * @returns {string} - The size class for our component.\n     */\n    size(size) {\n        return Templates_1.default.current.hasOwnProperty('size')\n            ? Templates_1.default.current.size(size)\n            : size;\n    }\n    /**\n     * The readible name for this component.\n     * @returns {string} - The name of the component.\n     */\n    get name() {\n        return this.t(this.component.label || this.component.placeholder || this.key, { _userInput: true });\n    }\n    /**\n     * Returns the visible errors for this component.\n     * @returns {Array<object>} - The visible errors for this component.\n     */\n    get visibleErrors() {\n        return this._visibleErrors;\n    }\n    /**\n     * Returns all the errors for this component, visible or not.\n     * @returns {Array<object>} - All the errors for this component.\n     */\n    get errors() {\n        return this._errors;\n    }\n    /**\n     * Returns the error label for this component.\n     * @returns {string} - The error label for this component.\n     */\n    get errorLabel() {\n        return this.t(this.component.errorLabel\n            || this.component.label\n            || this.component.placeholder\n            || this.key);\n    }\n    /**\n     * Get the error message provided a certain type of error.\n     * @param {string} type - The type of error to fetch the message for.\n     * @returns {string} - The error message configured for this component.\n     */\n    errorMessage(type) {\n        return (this.component.errors && this.component.errors[type]) ? this.component.errors[type] : type;\n    }\n    /**\n     * Sets the content, innerHTML, of an element to the sanitized content.\n     * @param {HTMLElement} element - The element to set the innerHTML to.\n     * @param {string} content - The HTML string content that we wish to set.\n     * @param {boolean} forceSanitize - If we should force the content to be sanitized.\n     * @param {any} sanitizeOptions - The options for the sanitize function.\n     * @returns {boolean} - TRUE if the content was sanitized and set.\n     */\n    setContent(element, content, forceSanitize, sanitizeOptions) {\n        if (element instanceof HTMLElement) {\n            element.innerHTML = this.sanitize(content, forceSanitize, sanitizeOptions);\n            return true;\n        }\n        return false;\n    }\n    /**\n     * Restores the caret position in the input element after a refresh occurs.\n     */\n    restoreCaretPosition() {\n        var _a, _b, _c;\n        if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.currentSelection) {\n            if ((_b = this.refs.input) === null || _b === void 0 ? void 0 : _b.length) {\n                const { index } = this.root.currentSelection;\n                let input = this.refs.input[index];\n                const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test((i === null || i === void 0 ? void 0 : i.type) || '');\n                if (input) {\n                    if (isInputRangeSelectable(input)) {\n                        input.setSelectionRange(input.value.length, input.value.length);\n                    }\n                }\n                else {\n                    input = this.refs.input[this.refs.input.length];\n                    const lastCharacter = ((_c = input.value) === null || _c === void 0 ? void 0 : _c.length) || 0;\n                    if (isInputRangeSelectable(input)) {\n                        input.setSelectionRange(lastCharacter, lastCharacter);\n                    }\n                }\n            }\n        }\n    }\n    /**\n     * Redraw the component.\n     * @returns {Promise<void>} - A promise that resolves when the component is done redrawing.\n     */\n    redraw() {\n        // Don't bother if we have not built yet.\n        if (!this.element || !this.element.parentNode || this.optimizeRedraw) {\n            // Return a non-resolving promise.\n            return Promise.resolve();\n        }\n        this.detach();\n        this.emit('redraw');\n        // Since we are going to replace the element, we need to know it's position so we can find it in the parent's children.\n        const parent = this.element.parentNode;\n        const index = Array.prototype.indexOf.call(parent.children, this.element);\n        this.element.outerHTML = this.sanitize(this.render());\n        this.setElement(parent.children[index]);\n        return this.attach(this.element);\n    }\n    /**\n     * Rebuild and redraw a component.\n     * @returns {Promise<void>} - A promise that resolves when the component is done rebuilding and redrawing.\n     */\n    rebuild() {\n        this.destroy();\n        this.init();\n        this.visible = this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden;\n        return this.redraw();\n    }\n    /**\n     * Removes all event listeners attached to this component.\n     */\n    removeEventListeners() {\n        super.removeEventListeners();\n        this.tooltips.forEach(tooltip => tooltip.destroy());\n        this.tooltips = [];\n    }\n    /**\n     * Returns if the dom node has the classes provided.\n     * @param {HTMLElement} element - The element to check for the class.\n     * @param {string} className - The name of the class to check.\n     * @returns {boolean|void} - TRUE if the element has the class.\n     */\n    hasClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.hasClass(element, this.transform('class', className));\n    }\n    /**\n     * Adds a class to an HTML element.\n     * @param {HTMLElement} element - The dom element to add the class to.\n     * @param {string} className - The class name you wish to add.\n     * @returns {this|void} - The component instance.\n     */\n    addClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.addClass(element, this.transform('class', className));\n    }\n    /**\n     * Removes a class from an element.\n     * @param {HTMLElement} element - The element to remove the class from.\n     * @param {string} className - The class name to remove.\n     * @returns {this|void} - The component instance.\n     */\n    removeClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.removeClass(element, this.transform('class', className));\n    }\n    /**\n     * Determines if this component has a condition defined.\n     * @returns {boolean} - TRUE if the component has a condition defined.\n     */\n    hasCondition() {\n        if (this._hasCondition !== null) {\n            return this._hasCondition;\n        }\n        this._hasCondition = utils_1.default.hasCondition(this.component);\n        return this._hasCondition;\n    }\n    /**\n     * Check if this component is conditionally visible.\n     * @param {any} data - The data to check against.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean} - TRUE if the component is conditionally visible.\n     */\n    conditionallyVisible(data, row) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        if (this.builderMode || this.previewMode) {\n            return true;\n        }\n        data = data || (this.root ? this.root.data : {});\n        return this.checkCondition(row, data);\n    }\n    /**\n     * Checks the condition of this component.\n     *\n     * TODO: Switch row and data parameters to be consistent with other methods.\n     * @param {any} row - The row contextual data.\n     * @param {any} data - The global data object.\n     * @returns {boolean} - True if the condition applies to this component.\n     */\n    checkCondition(row, data) {\n        return utils_1.default.checkCondition(this.component, row || this.data, data || this.rootValue, this.root ? this.root._form : {}, this);\n    }\n    /**\n     * Check for conditionals and hide/show the element based on those conditions.\n     * @param {any} data - The data to check against.\n     * @param {any} flags - The flags passed to checkData function.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean} - TRUE if the component is visible.\n     */\n    checkComponentConditions(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        if (!this.builderMode & !this.previewMode && this.fieldLogic(data, row)) {\n            this.redraw();\n        }\n        // Check visibility\n        const visible = (this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden);\n        if (this.visible !== visible) {\n            this.visible = visible;\n        }\n        this.clearComponentOnHide();\n        return visible;\n    }\n    /**\n     * Checks conditions for this component and any sub components.\n     * @param {any} data - The data to check against.\n     * @param {any} flags - The flags passed to checkData function.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean} - TRUE if the component is visible.\n     */\n    checkConditions(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        return this.checkComponentConditions(data, flags, row);\n    }\n    /**\n     * Returns the component logic if applicable.\n     * @returns {Array<object>} - The component logic.\n     */\n    get logic() {\n        return this.component.logic || [];\n    }\n    /**\n     * Check all triggers and apply necessary actions.\n     * @param {any} data - The data to check against.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean|void} - TRUE if the component was altered.\n     */\n    fieldLogic(data = this.rootValue, row = this.data) {\n        const logics = this.logic;\n        // If there aren't logic, don't go further.\n        if (logics.length === 0) {\n            return;\n        }\n        const newComponent = (0, utils_2.fastCloneDeep)(this.originalComponent);\n        let changed = logics.reduce((changed, logic) => {\n            const result = utils_1.default.checkTrigger(newComponent, logic.trigger, row, data, this.root ? this.root._form : {}, this);\n            return (result ? this.applyActions(newComponent, logic.actions, result, row, data) : false) || changed;\n        }, false);\n        // If component definition changed, replace and mark as changed.\n        if (!lodash_1.default.isEqual(this.component, newComponent)) {\n            this.component = newComponent;\n            changed = true;\n            const disabled = this.shouldDisabled;\n            // Change disabled state if it has changed\n            if (this.disabled !== disabled) {\n                this.disabled = disabled;\n            }\n        }\n        return changed;\n    }\n    /**\n     * Retuns if the browser is Internet Explorer.\n     * @returns {boolean} - TRUE if the browser is IE.\n     */\n    isIE() {\n        if (typeof window === 'undefined') {\n            return false;\n        }\n        const userAgent = window.navigator.userAgent;\n        const msie = userAgent.indexOf('MSIE ');\n        if (msie > 0) {\n            // IE 10 or older => return version number\n            return parseInt(userAgent.substring(msie + 5, userAgent.indexOf('.', msie)), 10);\n        }\n        const trident = userAgent.indexOf('Trident/');\n        if (trident > 0) {\n            // IE 11 => return version number\n            const rv = userAgent.indexOf('rv:');\n            return parseInt(userAgent.substring(rv + 3, userAgent.indexOf('.', rv)), 10);\n        }\n        const edge = userAgent.indexOf('Edge/');\n        if (edge > 0) {\n            // IE 12 (aka Edge) => return version number\n            return parseInt(userAgent.substring(edge + 5, userAgent.indexOf('.', edge)), 10);\n        }\n        // other browser\n        return false;\n    }\n    /**\n     * Defines the logic action value through evaluation.\n     * @param {object} action - The action within the Logic system to perform.\n     * @param {object} argsObject - The arguments to pass to the evaluation.\n     * @returns {any} - The result of the evaluation.\n     */\n    defineActionValue(action, argsObject) {\n        return this.evaluate(action.value, argsObject, 'value');\n    }\n    /**\n     * Apply the actions of Logic for a component once the conditions have been met.\n     * @param {object} newComponent - The new component to apply the actions to.\n     * @param {Array<object>} actions - An array of actions\n     * @param {any} result - The result of the conditional check in order to evaluate the actions.\n     * @param {any} row - The contextual row data for this component.\n     * @param {any} data - The global data object for the submission.\n     * @returns {boolean} - TRUE if the component was altered.\n     */\n    applyActions(newComponent, actions, result, row, data) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        return actions.reduce((changed, action) => {\n            switch (action.type) {\n                case 'property': {\n                    utils_1.default.setActionProperty(newComponent, action, result, row, data, this);\n                    const property = action.property.value;\n                    if (!lodash_1.default.isEqual(lodash_1.default.get(this.component, property), lodash_1.default.get(newComponent, property))) {\n                        // Advanced Logic can modify the component's hidden property; because we track conditionally hidden state\n                        // separately from the component's hidden property, and technically this Advanced Logic conditionally hides\n                        // a component, we need to set a temporary variable to the new value\n                        if (property === 'hidden') {\n                            this._logicallyHidden = newComponent.hidden;\n                        }\n                        changed = true;\n                    }\n                    break;\n                }\n                case 'value': {\n                    const oldValue = this.getValue();\n                    const newValue = this.defineActionValue(action, {\n                        value: lodash_1.default.clone(oldValue),\n                        data,\n                        row,\n                        component: newComponent,\n                        result,\n                    });\n                    if (!lodash_1.default.isEqual(oldValue, newValue) && !this.shouldConditionallyClear()) {\n                        this.setValue(newValue);\n                        if (this.viewOnly) {\n                            this.dataValue = newValue;\n                        }\n                        changed = true;\n                    }\n                    break;\n                }\n                case 'mergeComponentSchema': {\n                    const schema = this.evaluate(action.schemaDefinition, {\n                        value: lodash_1.default.clone(this.getValue()),\n                        data,\n                        row,\n                        component: newComponent,\n                        result,\n                    }, 'schema');\n                    lodash_1.default.assign(newComponent, schema);\n                    if (!lodash_1.default.isEqual(this.component, newComponent)) {\n                        changed = true;\n                    }\n                    break;\n                }\n                case 'customAction': {\n                    const oldValue = this.getValue();\n                    const newValue = this.evaluate(action.customAction, {\n                        value: lodash_1.default.clone(oldValue),\n                        data,\n                        row,\n                        input: oldValue,\n                        component: newComponent,\n                        result,\n                    }, 'value');\n                    if (!lodash_1.default.isEqual(oldValue, newValue) && !this.shouldConditionallyClear()) {\n                        this.setValue(newValue);\n                        if (this.viewOnly) {\n                            this.dataValue = newValue;\n                        }\n                        changed = true;\n                    }\n                    break;\n                }\n            }\n            return changed;\n        }, false);\n    }\n    // Deprecated\n    addInputError(message, dirty, elements) {\n        this.addMessages(message);\n        this.setErrorClasses(elements, dirty, !!message);\n    }\n    // Deprecated\n    removeInputError(elements) {\n        this.setErrorClasses(elements, true, false);\n    }\n    /**\n     * Add a new input error to this element.\n     * @param {Array<object>|string} messages - An array of messages to add to the element.\n     * @returns {void}\n     */\n    addMessages(messages) {\n        if (!messages) {\n            return;\n        }\n        // Standardize on array of objects for message.\n        if (typeof messages === 'string') {\n            messages = {\n                messages,\n                level: 'error',\n            };\n        }\n        if (!Array.isArray(messages)) {\n            messages = [messages];\n        }\n        messages = lodash_1.default.uniqBy(messages, message => message.message);\n        if (this.refs.messageContainer) {\n            this.setContent(this.refs.messageContainer, messages.map((message) => {\n                return this.renderTemplate('message', Object.assign({}, message));\n            }).join(''));\n        }\n    }\n    /**\n     * Sets the form input widget error classes.\n     * @param {Array<HTMLElement>} elements - An array of DOM elements to set the error classes on.\n     * @param {boolean} dirty - If the input is dirty.\n     * @param {boolean} hasErrors - If the input has errors.\n     * @param {boolean} hasMessages - If the input has messages.\n     * @param {HTMLElement} element - The wrapper element for all the other elements passed in first argument.\n     * @returns {void}\n     */\n    setErrorClasses(elements, dirty, hasErrors, hasMessages, element = this.element) {\n        this.clearErrorClasses();\n        elements.forEach((element) => {\n            this.setElementInvalid(this.performInputMapping(element), false);\n        });\n        this.setInputWidgetErrorClasses(elements, hasErrors);\n        // do not set error classes for hidden components\n        if (!this.visible) {\n            return;\n        }\n        if (hasErrors) {\n            // Add error classes\n            elements.forEach((input) => {\n                this.setElementInvalid(this.performInputMapping(input), true);\n            });\n            if (dirty && this.options.highlightErrors) {\n                this.addClass(element, this.options.componentErrorClass);\n            }\n            else {\n                this.addClass(element, 'has-error');\n            }\n        }\n        if (hasMessages) {\n            this.addClass(element, 'has-message');\n        }\n    }\n    /**\n     * Adds the classes necessary to mark an element as invalid.\n     * @param {HTMLElement} element - The element you wish to add the invalid classes to.\n     * @param {boolean} invalid - TRUE if the component is invalid, FALSE otherwise.\n     * @returns {void}\n     */\n    setElementInvalid(element, invalid) {\n        if (!element)\n            return;\n        if (invalid) {\n            this.addClass(element, 'is-invalid');\n        }\n        else {\n            this.removeClass(element, 'is-invalid');\n        }\n        element.setAttribute('aria-invalid', invalid ? 'true' : 'false');\n    }\n    /**\n     * Clear any conditionally hidden components for this component only.\n     */\n    clearComponentOnHide() {\n        // clearOnHide defaults to true for old forms (without the value set) so only trigger if the value is false.\n        if (this.component.clearOnHide !== false && !this.options.readOnly && !this.options.showHiddenFields) {\n            if (this.shouldConditionallyClear()) {\n                this.deleteValue();\n            }\n            else if (!this.hasValue() && this.shouldAddDefaultValue) {\n                // If shown, ensure the default is set.\n                this.setValue(this.defaultValue, {\n                    noUpdateEvent: true\n                });\n            }\n        }\n    }\n    /**\n     * Clears the components data if it is conditionally hidden AND clearOnHide is set to true for this component.\n     */\n    clearOnHide() {\n        this.clearComponentOnHide();\n    }\n    /**\n     * Triggers a debounced onChange event for the root component (usually Webform).\n     * @param {...any} args - The arguments to pass to the onChange event.\n     */\n    triggerRootChange(...args) {\n        if (this.options.onChange) {\n            this.options.onChange(...args);\n        }\n        else if (this.root && this.root.triggerChange) {\n            this.root.triggerChange(...args);\n        }\n    }\n    /**\n     * Called when the component value has been changed. This will then trigger the root level onChange handler which\n     * propagates the checkData methods for the full component tree.\n     * @param {any} flags - The flags for the change event propagation.\n     * @param {boolean} fromRoot - If the change event is from the root component.\n     * @returns {boolean} - TRUE if the component has changed.\n     */\n    onChange(flags, fromRoot) {\n        flags = flags || {};\n        if (flags.modified) {\n            if (!flags.noPristineChangeOnModified) {\n                this.pristine = false;\n            }\n            this.addClass(this.getElement(), 'formio-modified');\n        }\n        // If we are supposed to validate on blur, then don't trigger validation yet.\n        if (this.component.validateOn === 'blur' || this.component.validateOn === 'submit') {\n            flags.noValidate = true;\n        }\n        if (this.component.onChange) {\n            this.evaluate(this.component.onChange, {\n                flags\n            });\n        }\n        // Set the changed variable.\n        const changed = {\n            instance: this,\n            component: this.component,\n            value: this.dataValue,\n            flags: flags\n        };\n        // Emit the change.\n        this.emit('componentChange', changed);\n        // Do not propogate the modified flag.\n        let modified = false;\n        if (flags.modified) {\n            modified = true;\n            delete flags.modified;\n        }\n        // Bubble this change up to the top.\n        if (!fromRoot) {\n            this.triggerRootChange(flags, changed, modified);\n        }\n        return changed;\n    }\n    get wysiwygDefault() {\n        return {\n            quill: {\n                theme: 'snow',\n                placeholder: this.t(this.component.placeholder, { _userInput: true }),\n                modules: {\n                    toolbar: [\n                        [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown\n                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],\n                        [{ 'font': [] }],\n                        ['bold', 'italic', 'underline', 'strike', { 'script': 'sub' }, { 'script': 'super' }, 'clean'],\n                        [{ 'color': [] }, { 'background': [] }],\n                        [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }, { 'align': [] }],\n                        ['blockquote', 'code-block'],\n                        ['link', 'image', 'video', 'formula', 'source']\n                    ]\n                }\n            },\n            ace: {\n                theme: 'ace/theme/xcode',\n                maxLines: 12,\n                minLines: 12,\n                tabSize: 2,\n                mode: 'ace/mode/javascript',\n                placeholder: this.t(this.component.placeholder, { _userInput: true })\n            },\n            ckeditor: {\n                image: {\n                    toolbar: [\n                        'imageTextAlternative',\n                        '|',\n                        'imageStyle:full',\n                        'imageStyle:alignLeft',\n                        'imageStyle:alignCenter',\n                        'imageStyle:alignRight'\n                    ],\n                    styles: [\n                        'full',\n                        'alignLeft',\n                        'alignCenter',\n                        'alignRight'\n                    ]\n                },\n                extraPlugins: []\n            },\n            default: {}\n        };\n    }\n    addCKE(element, settings, onChange) {\n        settings = lodash_1.default.isEmpty(settings) ? {} : settings;\n        settings.base64Upload = this.component.isUploadEnabled ? false : true;\n        settings.mediaEmbed = { previewsInData: true };\n        settings = lodash_1.default.merge(this.wysiwygDefault.ckeditor, lodash_1.default.get(this.options, 'editors.ckeditor.settings', {}), settings);\n        if (this.component.isUploadEnabled) {\n            settings.extraPlugins.push((0, uploadAdapter_1.getFormioUploadAdapterPlugin)(this.fileService, this));\n        }\n        return Formio_1.Formio.requireLibrary('ckeditor', isIEBrowser ? 'CKEDITOR' : 'ClassicEditor', lodash_1.default.get(this.options, 'editors.ckeditor.src', `${Formio_1.Formio.cdn.ckeditor}/ckeditor.js`), true)\n            .then(() => {\n            if (!element.parentNode) {\n                return Promise.reject();\n            }\n            if (isIEBrowser) {\n                const editor = CKEDITOR.replace(element);\n                editor.on('change', () => onChange(editor.getData()));\n                return Promise.resolve(editor);\n            }\n            else {\n                return ClassicEditor.create(element, settings).then(editor => {\n                    editor.model.document.on('change', () => onChange(editor.data.get()));\n                    return editor;\n                });\n            }\n        });\n    }\n    addQuill(element, settings, onChange) {\n        settings = lodash_1.default.isEmpty(settings) ? this.wysiwygDefault.quill : settings;\n        settings = lodash_1.default.merge(this.wysiwygDefault.quill, lodash_1.default.get(this.options, 'editors.quill.settings', {}), settings);\n        settings = Object.assign(Object.assign({}, settings), { modules: Object.assign({ table: true }, settings.modules) });\n        // Lazy load the quill css.\n        Formio_1.Formio.requireLibrary(`quill-css-${settings.theme}`, 'Quill', [\n            { type: 'styles', src: `${Formio_1.Formio.cdn.quill}/quill.${settings.theme}.css` }\n        ], true);\n        // Lazy load the quill library.\n        return Formio_1.Formio.requireLibrary('quill', 'Quill', lodash_1.default.get(this.options, 'editors.quill.src', `${Formio_1.Formio.cdn.quill}/quill.min.js`), true)\n            .then(() => {\n            return Formio_1.Formio.requireLibrary('quill-table', 'Quill', `${Formio_1.Formio.cdn.baseUrl}/quill/quill-table.js`, true)\n                .then(() => {\n                if (!element.parentNode) {\n                    return Promise.reject();\n                }\n                this.quill = new Quill(element, isIEBrowser ? Object.assign(Object.assign({}, settings), { modules: {} }) : settings);\n                /** This block of code adds the [source] capabilities.  See https://codepen.io/anon/pen/ZyEjrQ */\n                const txtArea = document.createElement('textarea');\n                txtArea.setAttribute('class', 'quill-source-code');\n                this.quill.addContainer('ql-custom').appendChild(txtArea);\n                const qlSource = element.parentNode.querySelector('.ql-source');\n                if (qlSource) {\n                    this.addEventListener(qlSource, 'click', (event) => {\n                        event.preventDefault();\n                        if (txtArea.style.display === 'inherit') {\n                            this.quill.setContents(this.quill.clipboard.convert({ html: txtArea.value }));\n                        }\n                        txtArea.style.display = (txtArea.style.display === 'none') ? 'inherit' : 'none';\n                    });\n                }\n                /** END CODEBLOCK */\n                // Make sure to select cursor when they click on the element.\n                this.addEventListener(element, 'click', () => this.quill.focus());\n                // Allows users to skip toolbar items when tabbing though form\n                const elm = document.querySelectorAll('.ql-formats > button');\n                for (let i = 0; i < elm.length; i++) {\n                    elm[i].setAttribute('tabindex', '-1');\n                }\n                this.quill.on('text-change', () => {\n                    txtArea.value = this.quill.root.innerHTML;\n                    onChange(txtArea);\n                });\n                return this.quill;\n            });\n        });\n    }\n    get shouldSanitizeValue() {\n        var _a;\n        // Sanitize value if sanitizing for thw whole content is turned off\n        return (((_a = this.options) === null || _a === void 0 ? void 0 : _a.sanitize) !== false);\n    }\n    addAce(element, settings, onChange) {\n        if (!settings || (settings.theme === 'snow')) {\n            const mode = settings ? settings.mode : '';\n            settings = {};\n            if (mode) {\n                settings.mode = mode;\n            }\n        }\n        settings = lodash_1.default.merge(this.wysiwygDefault.ace, lodash_1.default.get(this.options, 'editors.ace.settings', {}), settings || {});\n        return Formio_1.Formio.requireLibrary('ace', 'ace', lodash_1.default.get(this.options, 'editors.ace.src', `${Formio_1.Formio.cdn.ace}/ace.js`), true)\n            .then((editor) => {\n            editor = editor.edit(element);\n            editor.removeAllListeners('change');\n            editor.setOptions(settings);\n            editor.getSession().setMode(settings.mode);\n            editor.on('change', () => onChange(editor.getValue()));\n            if (settings.isUseWorkerDisabled) {\n                editor.session.setUseWorker(false);\n            }\n            return editor;\n        });\n    }\n    get tree() {\n        return this.component.tree || false;\n    }\n    /**\n     * The empty value for this component.\n     * @returns {null} - The empty value for this component.\n     */\n    get emptyValue() {\n        return null;\n    }\n    /**\n     * Returns if this component has a value set.\n     * @param {any} data - The global data object.\n     * @returns {boolean} - TRUE if a value is set.\n     */\n    hasValue(data) {\n        return !lodash_1.default.isUndefined(lodash_1.default.get(data || this.data, this.key));\n    }\n    /**\n     * Get the data value at the root level.\n     * @returns {*} - The root value for the component, typically the Webform data object.\n     */\n    get rootValue() {\n        return this.root ? this.root.data : this.data;\n    }\n    get rootPristine() {\n        return lodash_1.default.get(this, 'root.pristine', false);\n    }\n    /**\n     * Get the static value of this component.\n     * @returns {*} - The value for this component.\n     */\n    get dataValue() {\n        if (!this.key) {\n            return this.component.multiple ? [] : this.emptyValue;\n        }\n        return lodash_1.default.get(this._data, this.key, this.component.multiple ? [] : this.emptyValue);\n    }\n    /**\n     * Sets the static value of this component.\n     * @param {*} value - The value to set for this component.\n     */\n    set dataValue(value) {\n        if (!this.allowData || !this.key) {\n            return;\n        }\n        if ((value !== null) && (value !== undefined)) {\n            value = this.hook('setDataValue', value, this.key, this._data);\n        }\n        if ((value === null) || (value === undefined)) {\n            this.unset();\n            return;\n        }\n        lodash_1.default.set(this._data, this.key, value);\n        return;\n    }\n    /**\n     * Splice a value from the dataValue.\n     * @param {number} index - The index to splice for an array component values.\n     * @param {*} flags - The flags to use when splicing the value.\n     */\n    splice(index, flags = {}) {\n        if (this.hasValue()) {\n            const dataValue = this.dataValue || [];\n            if (lodash_1.default.isArray(dataValue) && dataValue.hasOwnProperty(index)) {\n                dataValue.splice(index, 1);\n                this.dataValue = dataValue;\n                this.triggerChange(flags);\n            }\n        }\n    }\n    unset() {\n        lodash_1.default.unset(this._data, this.key);\n    }\n    /**\n     * Deletes the value of the component.\n     */\n    deleteValue() {\n        this.setValue(null, {\n            noUpdateEvent: true,\n            noDefault: true\n        });\n        this.unset();\n    }\n    getCustomDefaultValue(defaultValue) {\n        if (this.component.customDefaultValue && !this.options.preview) {\n            defaultValue = this.evaluate(this.component.customDefaultValue, { value: this.dataValue }, 'value');\n        }\n        return defaultValue;\n    }\n    /**\n     * Returns if a component has a default value set.\n     * @returns {boolean} - TRUE if a default value is set.\n     */\n    get hasDefaultValue() {\n        return this.component.customDefaultValue || (this.component.hasOwnProperty('defaultValue') &&\n            (this.component.defaultValue !== null) &&\n            (this.component.defaultValue !== undefined));\n    }\n    /**\n     * Determine if we should add a default value for this component.\n     * @returns {boolean} - TRUE if a default value should be set\n     */\n    get shouldAddDefaultValue() {\n        return this.pristine && this.allowData && (this.hasDefaultValue || !this.options.noDefaults);\n    }\n    /**\n     * Get the default value of this component.\n     * @returns {*} - The default value for this component.\n     */\n    get defaultValue() {\n        let defaultValue = this.emptyValue;\n        if (this.component.defaultValue) {\n            defaultValue = this.component.defaultValue;\n        }\n        defaultValue = this.getCustomDefaultValue(defaultValue);\n        const checkMask = (value) => {\n            if (typeof value === 'string') {\n                if (this.component.type !== 'textfield') {\n                    const placeholderChar = this.placeholderChar;\n                    value = (0, vanilla_text_mask_1.conformToMask)(value, this.defaultMask, { placeholderChar }).conformedValue;\n                    if (!utils_1.default.matchInputMask(value, this.defaultMask)) {\n                        value = '';\n                    }\n                }\n            }\n            else {\n                value = '';\n            }\n            return value;\n        };\n        if (Array.isArray(this.defaultMask) ? this.defaultMask.length > 0 : this.defaultMask) {\n            if (Array.isArray(defaultValue)) {\n                defaultValue = defaultValue.map(checkMask);\n            }\n            else {\n                defaultValue = checkMask(defaultValue);\n            }\n        }\n        // Clone so that it creates a new instance.\n        return lodash_1.default.cloneDeep(defaultValue);\n    }\n    /**\n     * Get the input value of this component.\n     * @returns {*} - The value for the component.\n     */\n    getValue() {\n        if (!this.hasInput || this.viewOnly || !this.refs.input || !this.refs.input.length) {\n            return this.dataValue;\n        }\n        const values = [];\n        for (const i in this.refs.input) {\n            if (this.refs.input.hasOwnProperty(i)) {\n                if (!this.component.multiple) {\n                    return this.getValueAt(i);\n                }\n                values.push(this.getValueAt(i));\n            }\n        }\n        if (values.length === 0 && !this.component.multiple) {\n            return '';\n        }\n        return values;\n    }\n    /**\n     * Get the value at a specific index.\n     * @param {number} index - For an array component or multiple values, this returns the value at a specific index.\n     * @returns {*} - The value at the specified index.\n     */\n    getValueAt(index) {\n        const input = this.performInputMapping(this.refs.input[index]);\n        return input ? input.value : undefined;\n    }\n    /**\n     * Set the value of this component.\n     * @param {*} value - The value to set for this component.\n     * @param {*} flags - The flags to use when setting the value.\n     * @returns {boolean} - If the value changed.\n     */\n    setValue(value, flags = {}) {\n        const changed = this.updateValue(value, flags);\n        value = this.dataValue;\n        if (!this.hasInput) {\n            return changed;\n        }\n        const isArray = Array.isArray(value);\n        const valueInput = this.refs.fileLink || this.refs.input;\n        const isFilelink = !!this.refs.fileLink;\n        if (isArray &&\n            Array.isArray(this.defaultValue) &&\n            this.refs.hasOwnProperty('input') &&\n            valueInput &&\n            (valueInput.length !== value.length) &&\n            this.visible) {\n            if (isFilelink || valueInput.length) {\n                this.redraw();\n            }\n        }\n        if (this.isHtmlRenderMode() && flags && flags.fromSubmission && changed) {\n            this.redraw();\n            return changed;\n        }\n        for (const i in this.refs.input) {\n            if (this.refs.input.hasOwnProperty(i)) {\n                this.setValueAt(i, isArray && !this.isSingleInputValue() ? value[i] : value, flags);\n            }\n        }\n        return changed;\n    }\n    /**\n     * Returns if the value (e.g. array) should be divided between several inputs\n     * @returns {boolean}\n     */\n    isSingleInputValue() {\n        return false;\n    }\n    /**\n     * Set the value at a specific index.\n     * @param {number} index - The index to set the value at.\n     * @param {*} value - The value to set at the specified index.\n     * @param {*} flags - The flags to use when setting the value.\n     */\n    setValueAt(index, value, flags = {}) {\n        if (!flags.noDefault && (value === null || value === undefined) && !this.component.multiple) {\n            value = this.defaultValue;\n        }\n        const input = this.performInputMapping(this.refs.input[index]);\n        const valueMaskInput = this.refs.valueMaskInput;\n        if ((valueMaskInput === null || valueMaskInput === void 0 ? void 0 : valueMaskInput.mask) && valueMaskInput.mask.textMaskInputElement) {\n            valueMaskInput.mask.textMaskInputElement.update(value);\n        }\n        if (input.mask && input.mask.textMaskInputElement) {\n            input.mask.textMaskInputElement.update(value);\n        }\n        else if (input.widget && input.widget.setValue) {\n            input.widget.setValue(value);\n        }\n        else {\n            input.value = value;\n        }\n    }\n    get hasSetValue() {\n        return this.hasValue() && !this.isEmpty(this.dataValue);\n    }\n    setDefaultValue() {\n        if (this.defaultValue && this.shouldAddDefaultValue) {\n            const defaultValue = (this.component.multiple && !this.dataValue.length) ? [] : this.defaultValue;\n            this.setValue(defaultValue, {\n                noUpdateEvent: true\n            });\n        }\n    }\n    /**\n     * Restore the value of a control.\n     */\n    restoreValue() {\n        if (this.hasSetValue) {\n            this.setValue(this.dataValue, {\n                noUpdateEvent: true\n            });\n        }\n        else {\n            this.setDefaultValue();\n        }\n    }\n    /**\n     * Normalize values coming into updateValue.\n     * @param {*} value - The value to normalize before setting.\n     * @returns {*} - The normalized value.\n     */\n    normalizeValue(value) {\n        return value;\n    }\n    /**\n     * Update a value of this component.\n     * @param {*} value - The value to update.\n     * @param {*} flags - The flags to use when updating the value.\n     * @returns {boolean} - If the value changed.\n     */\n    updateComponentValue(value, flags = {}) {\n        let newValue = (!flags.resetValue && (value === undefined || value === null)) ? this.getValue() : value;\n        newValue = this.normalizeValue(newValue, flags);\n        const oldValue = this.dataValue;\n        let changed = ((newValue !== undefined) ? this.hasChanged(newValue, oldValue) : false);\n        if (changed) {\n            this.dataValue = newValue;\n            changed = this.dataValue !== oldValue;\n            this.updateOnChange(flags, changed);\n        }\n        if (this.componentModal && flags && flags.fromSubmission) {\n            this.componentModal.setValue(value);\n        }\n        return changed;\n    }\n    /**\n     * Updates the value of this component plus all sub-components.\n     * @param {...any} args - The arguments to pass to updateValue.\n     * @returns {boolean} - If the value changed.\n     */\n    updateValue(...args) {\n        return this.updateComponentValue(...args);\n    }\n    getIcon(name, content, styles, ref = 'icon') {\n        return this.renderTemplate('icon', {\n            className: this.iconClass(name),\n            ref,\n            styles,\n            content\n        });\n    }\n    /**\n     * Resets the value of this component.\n     */\n    resetValue() {\n        this.unset();\n        this.setValue(this.defaultValue || this.emptyValue, {\n            noUpdateEvent: true,\n            noValidate: true,\n            resetValue: true\n        });\n    }\n    /**\n     * Determine if the value of this component has changed.\n     * @param {*} newValue - The new value to check.\n     * @param {*} oldValue - The existing value of the component.\n     * @returns {boolean} - TRUE if the value has changed.\n     */\n    hasChanged(newValue, oldValue) {\n        if (((newValue === undefined) || (newValue === null)) &&\n            ((oldValue === undefined) || (oldValue === null) || this.isEmpty(oldValue))) {\n            return false;\n        }\n        // If we do not have a value and are getting set to anything other than undefined or null, then we changed.\n        if (newValue !== undefined &&\n            newValue !== null &&\n            this.allowData &&\n            !this.hasValue()) {\n            return true;\n        }\n        return !lodash_1.default.isEqual(newValue, oldValue);\n    }\n    /**\n     * Update the value on change.\n     * @param {*} flags - The flags to use when triggering the on change event.\n     * @param {boolean} changed - If the value has changed.\n     * @returns {boolean} - If the value changed.\n     */\n    updateOnChange(flags = {}, changed = false) {\n        if (!flags.noUpdateEvent && changed) {\n            if (flags.fromSubmission) {\n                // Reset the errors when a submission has been made and allow it to revalidate.\n                this._errors = [];\n            }\n            this.triggerChange(flags);\n            return true;\n        }\n        return false;\n    }\n    convertNumberOrBoolToString(value) {\n        if (typeof value === 'number' || typeof value === 'boolean') {\n            return value.toString();\n        }\n        return value;\n    }\n    doValueCalculation(dataValue, data, row) {\n        var _a;\n        return this.evaluate(this.component.calculateValue, {\n            value: dataValue,\n            data,\n            row: row || this.data,\n            submission: ((_a = this.root) === null || _a === void 0 ? void 0 : _a._submission) || {\n                data: this.rootValue\n            }\n        }, 'value');\n    }\n    /* eslint-disable max-statements */\n    calculateComponentValue(data, flags, row) {\n        // Skip value calculation for the component if we don't have entire form data set or in builder mode\n        if (this.builderMode || lodash_1.default.isUndefined(lodash_1.default.get(this, 'root.data'))) {\n            return false;\n        }\n        // If no calculated value or\n        // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)\n        const allowOverride = lodash_1.default.get(this.component, 'allowCalculateOverride', false);\n        if (this.shouldConditionallyClear()) {\n            // remove calculated value so that the value is recalculated once component becomes visible\n            if (this.hasOwnProperty('calculatedValue') && allowOverride) {\n                lodash_1.default.unset(this, 'calculatedValue');\n            }\n            return false;\n        }\n        // Handle all cases when calculated values should not fire.\n        if ((this.options.readOnly && !this.options.pdf && !this.component.calculateValue) ||\n            !(this.component.calculateValue || this.component.calculateValueVariable) ||\n            (this.options.server && !this.component.calculateServer) ||\n            (flags.dataSourceInitialLoading && allowOverride) ||\n            (this.options.readOnly && this.options.pdf && allowOverride && lodash_1.default.get(this.root, 'submission._id', false))) {\n            return false;\n        }\n        const dataValue = this.dataValue;\n        // Calculate the new value.\n        let calculatedValue = this.doValueCalculation(dataValue, data, row, flags);\n        if (this.options.readOnly && dataValue && !calculatedValue) {\n            return false;\n        }\n        if (lodash_1.default.isNil(calculatedValue)) {\n            calculatedValue = this.emptyValue;\n        }\n        const changed = !lodash_1.default.isEqual(dataValue, calculatedValue);\n        // Do not override calculations on server if they have calculateServer set.\n        if (allowOverride) {\n            // The value is considered locked if it is not empty and comes from a submission value.\n            const fromSubmission = (flags.fromSubmission && this.component.persistent === true);\n            if (this.isEmpty(dataValue)) {\n                // Reset the calculation lock if ever the data is cleared.\n                this.calculationLocked = false;\n            }\n            else if (this.calculationLocked || fromSubmission) {\n                this.calculationLocked = true;\n                return false;\n            }\n            const firstPass = (this.calculatedValue === undefined) || flags.resetValue;\n            if (firstPass) {\n                this.calculatedValue = null;\n            }\n            const newCalculatedValue = this.normalizeValue(this.convertNumberOrBoolToString(calculatedValue));\n            const previousCalculatedValue = this.normalizeValue(this.convertNumberOrBoolToString(this.calculatedValue));\n            const normalizedDataValue = this.normalizeValue(this.convertNumberOrBoolToString(dataValue));\n            const calculationChanged = !lodash_1.default.isEqual(previousCalculatedValue, newCalculatedValue);\n            const previousChanged = !lodash_1.default.isEqual(normalizedDataValue, previousCalculatedValue);\n            if (calculationChanged && previousChanged && !firstPass) {\n                return false;\n            }\n            // Check to ensure that the calculated value is different than the previously calculated value.\n            if (previousCalculatedValue && previousChanged && !calculationChanged) {\n                this.calculatedValue = null;\n                return false;\n            }\n            if (flags.isReordered || !calculationChanged) {\n                return false;\n            }\n            if (fromSubmission) {\n                // If we set value from submission and it differs from calculated one, set the calculated value to prevent overriding dataValue in the next pass\n                this.calculatedValue = (0, utils_2.fastCloneDeep)(calculatedValue);\n                return false;\n            }\n            // If this is the firstPass, and the dataValue is different than to the calculatedValue.\n            if (firstPass && !this.isEmpty(dataValue) && changed && calculationChanged) {\n                // Return that we have a change so it will perform another pass.\n                return true;\n            }\n        }\n        this.calculatedValue = (0, utils_2.fastCloneDeep)(calculatedValue);\n        if (changed) {\n            if (!flags.noPristineChangeOnModified && this.root.initialized) {\n                this.pristine = false;\n            }\n            flags.triggeredComponentId = this.id;\n            return this.setValue(calculatedValue, flags);\n        }\n        return false;\n    }\n    /* eslint-enable max-statements */\n    /**\n     * Performs calculations in this component plus any child components.\n     * @param {*} data - The data to perform the calculation with.\n     * @param {*} flags - The flags to use when calculating the value.\n     * @param {*} row - The contextual row data to use when performing the calculation.\n     * @returns {boolean} - TRUE if the value changed.\n     */\n    calculateValue(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        return this.calculateComponentValue(data, flags, row);\n    }\n    /**\n     * Get this component's label text.\n     * @returns {string} - The label text for this component.\n     */\n    get label() {\n        return this.component.label;\n    }\n    /**\n     * Set this component's label text and render it.\n     * @param {string} value - The new label text.\n     */\n    set label(value) {\n        this.component.label = value;\n        if (this.labelElement) {\n            this.labelElement.innerText = value;\n        }\n    }\n    /**\n     * Get FormioForm element at the root of this component tree.\n     * @returns {*} root - The root component to search from.\n     */\n    getRoot() {\n        return this.root;\n    }\n    /**\n     * Returns the invalid message, or empty string if the component is valid.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {boolean} ignoreCondition - If conditions for the component should be ignored when checking validity.\n     * @param {*} row - Contextual row data for this component.\n     * @param {*} options - Additional options for validation.\n     * @returns {string} - The message to show when the component is invalid.\n     */\n    invalidMessage(data, dirty, ignoreCondition, row, options = {}) {\n        var _a;\n        const { local } = options;\n        if (!row) {\n            row = (0, utils_2.getContextualRowData)(this.component, data, this.paths);\n        }\n        if (!ignoreCondition && !this.checkCondition(row, data)) {\n            return '';\n        }\n        // See if this is forced invalid.\n        if (this.invalid) {\n            return this.invalid;\n        }\n        // No need to check for errors if there is no input or if it is pristine.\n        if (!this.hasInput || (!dirty && this.pristine)) {\n            return '';\n        }\n        const validationScope = { errors: [] };\n        (0, process_1.processOneSync)({\n            component: this.component,\n            data,\n            row,\n            local,\n            path: this.path || this.component.key,\n            parent: (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component,\n            paths: this.paths,\n            scope: validationScope,\n            instance: this,\n            processors: [\n                process_1.validateProcessInfo\n            ]\n        });\n        const errors = validationScope.errors;\n        const interpolatedErrors = utils_1.default.interpolateErrors(this.component, errors, this.t.bind(this));\n        return lodash_1.default.map(interpolatedErrors, 'message').join('\\n\\n');\n    }\n    /**\n     * Returns if the component is valid or not.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    isValid(data, dirty) {\n        return !this.invalidMessage(data, dirty);\n    }\n    setComponentValidity(errors, dirty, silentCheck) {\n        if (silentCheck) {\n            return [];\n        }\n        const messages = errors.filter(message => !message.fromServer);\n        if (errors.length && !!messages.length && (!this.isEmpty(this.defaultValue) || dirty || !this.pristine)) {\n            return this.setCustomValidity(messages, dirty);\n        }\n        else {\n            return this.setCustomValidity('');\n        }\n    }\n    /**\n     * Interpolate errors from the validation methods.\n     * @param {Array<any>} errors - An array of errors to interpolate.\n     * @returns {Array<any>} - The interpolated errors.\n     */\n    interpolateErrors(errors) {\n        var _a;\n        const interpolatedErrors = utils_1.default.interpolateErrors(this.component, errors, this.t.bind(this));\n        return ((_a = this.serverErrors) === null || _a === void 0 ? void 0 : _a.length) ? [...interpolatedErrors, ...this.serverErrors] : interpolatedErrors;\n    }\n    /**\n     * Show component validation errors.\n     * @param {*} errors - An array of errors that have occured.\n     * @param {*} data - The root submission data.\n     * @param {*} row - The contextual row data.\n     * @param {*} flags - The flags to perform validation.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    showValidationErrors(errors, data, row, flags) {\n        if (flags.silentCheck) {\n            return [];\n        }\n        let isDirty = (flags.dirty === false) ? false : (this.dirty || flags.dirty);\n        if (this.options.alwaysDirty) {\n            isDirty = true;\n        }\n        this.setDirty(isDirty);\n        return this.setComponentValidity(errors, isDirty, flags.silentCheck, flags.fromSubmission);\n    }\n    /**\n     * Perform a component validation.\n     * @param {*} data - The root data you wish to use for this component.\n     * @param {*} row - The contextual row data you wish to use for this component.\n     * @param {*} flags - The flags to control the behavior of the validation.\n     * @returns {Array<any>} - An array of errors if the component is invalid.\n     */\n    validateComponent(data = null, row = null, flags = {}) {\n        var _a;\n        data = data || this.rootValue;\n        row = row || this.data;\n        const { async = false } = flags;\n        if (this.shouldSkipValidation(data, row, flags)) {\n            return async ? Promise.resolve([]) : [];\n        }\n        const processContext = {\n            component: this.component,\n            data,\n            row,\n            local: !!flags.local,\n            value: this.validationValue,\n            parent: (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component,\n            paths: this.paths,\n            path: this.path || this.component.key,\n            instance: this,\n            form: this.root ? this.root._form : {},\n            scope: { errors: [] },\n            processors: [\n                process_1.validateProcessInfo\n            ]\n        };\n        if (async) {\n            return (0, process_1.processOne)(processContext).then(() => {\n                this._errors = this.interpolateErrors(processContext.scope.errors);\n                return this._errors;\n            });\n        }\n        (0, process_1.processOneSync)(processContext);\n        this._errors = this.interpolateErrors(processContext.scope.errors);\n        return this._errors;\n    }\n    /**\n     * Checks the validity of this component and sets the error message if it is invalid.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {*} row - The contextual row data for this component.\n     * @param {*} flags - The flags to use when checking the validity.\n     * @param {Array<any>} allErrors - An array of all errors that have occured so that it can be appended when another one occurs here.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    checkComponentValidity(data = null, dirty = false, row = null, flags = {}, allErrors = []) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        flags.dirty = dirty || false;\n        if (flags.async) {\n            return this.validateComponent(data, row, flags).then((errors) => {\n                allErrors.push(...errors);\n                if (this.parent && this.parent.childErrors) {\n                    if (errors.length) {\n                        this.parent.childErrors.push(...errors);\n                    }\n                    else {\n                        lodash_1.default.remove(this.parent.childErrors, (err) => { var _a, _b; return (((_a = err === null || err === void 0 ? void 0 : err.component) === null || _a === void 0 ? void 0 : _a.key) || ((_b = err === null || err === void 0 ? void 0 : err.context) === null || _b === void 0 ? void 0 : _b.key)) === this.component.key; });\n                    }\n                }\n                this.showValidationErrors(errors, data, row, flags);\n                return errors.length === 0;\n            });\n        }\n        else {\n            const errors = this.validateComponent(data, row, flags);\n            this.showValidationErrors(errors, data, row, flags);\n            allErrors.push(...errors);\n            if (this.parent && this.parent.childErrors) {\n                if (errors.length) {\n                    this.parent.childErrors.push(...errors);\n                }\n                else {\n                    lodash_1.default.remove(this.parent.childErrors, (err) => { var _a, _b; return (((_a = err === null || err === void 0 ? void 0 : err.component) === null || _a === void 0 ? void 0 : _a.key) || ((_b = err === null || err === void 0 ? void 0 : err.context) === null || _b === void 0 ? void 0 : _b.key)) === this.component.key; });\n                }\n            }\n            return errors.length === 0;\n        }\n    }\n    /**\n     * Checks the validity of the component.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {*} row - The contextual row data for this component.\n     * @param {boolean} silentCheck - If the check should be silent and not set the error messages.\n     * @param {Array<any>} errors - An array of all errors that have occured so that it can be appended when another one occurs here.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    checkValidity(data = null, dirty = false, row = null, silentCheck = false, errors = []) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        return this.checkComponentValidity(data, dirty, row, { silentCheck }, errors);\n    }\n    checkAsyncValidity(data = null, dirty = false, row = null, silentCheck = false, errors = []) {\n        return this.checkComponentValidity(data, dirty, row, { async: true, silentCheck }, errors);\n    }\n    /**\n     * Check the conditions, calculations, and validity of a single component and triggers an update if\n     * something changed.\n     * @param {*} data - The root data of the change event.\n     * @param {*} flags - The flags from this change event.\n     * @param {*} row - The contextual row data for this component.\n     * @returns {void|boolean} - TRUE if no check should be performed on the component.\n     */\n    checkData(data = null, flags = null, row = null) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        if (flags.noCheck) {\n            return true;\n        }\n        // Some components (for legacy reasons) have calls to \"checkData\" in inappropriate places such\n        // as setValue. Historically, this was bypassed by a series of cached states around the data model\n        // which caused its own problems. We need to ensure that premium and custom components do not fall into\n        // an infinite loop by only checking this component once.\n        if (this.checkingData) {\n            return;\n        }\n        this.checkingData = true;\n        // Needs for Nextgen Rules Engine\n        this.resetCaches();\n        // Do not trigger refresh if change was triggered on blur event since components with Refresh on Blur have their own listeners\n        if (!flags.fromBlur) {\n            this.checkRefreshOn(flags.changes, flags);\n        }\n        this.checkComponentConditions(data, flags, row);\n        if (this.id !== flags.triggeredComponentId) {\n            this.calculateComponentValue(data, flags, row);\n        }\n        // We are done checking data.\n        this.checkingData = false;\n    }\n    checkModal(errors = [], dirty = false) {\n        const messages = errors.filter(error => !error.fromServer);\n        const isValid = errors.length === 0;\n        if (!this.component.modalEdit || !this.componentModal) {\n            return;\n        }\n        if (dirty && !isValid) {\n            this.setErrorClasses([this.refs.openModal], dirty, !isValid, !!messages.length, this.refs.openModalWrapper);\n        }\n        else {\n            this.clearErrorClasses(this.refs.openModalWrapper);\n        }\n    }\n    get validationValue() {\n        return this.dataValue;\n    }\n    isEmpty(value = this.dataValue) {\n        const isEmptyArray = (lodash_1.default.isArray(value) && value.length === 1) ? lodash_1.default.isEqual(value[0], this.emptyValue) : false;\n        return value == null || value.length === 0 || lodash_1.default.isEqual(value, this.emptyValue) || isEmptyArray;\n    }\n    isEqual(valueA, valueB = this.dataValue) {\n        return (this.isEmpty(valueA) && this.isEmpty(valueB)) || lodash_1.default.isEqual(valueA, valueB);\n    }\n    /**\n     * Check if a component is eligible for multiple validation\n     * @returns {boolean} - TRUE if the component is eligible for multiple validation.\n     */\n    validateMultiple() {\n        return true;\n    }\n    clearErrorClasses(element = this.element) {\n        this.removeClass(element, this.options.componentErrorClass);\n        this.removeClass(element, 'alert alert-danger');\n        this.removeClass(element, 'has-error');\n        this.removeClass(element, 'has-message');\n    }\n    setInputWidgetErrorClasses(inputRefs, hasErrors) {\n        if (!this.isInputComponent || !this.component.widget || !(inputRefs === null || inputRefs === void 0 ? void 0 : inputRefs.length)) {\n            return;\n        }\n        inputRefs.forEach((input) => {\n            if ((input === null || input === void 0 ? void 0 : input.widget) && input.widget.setErrorClasses) {\n                input.widget.setErrorClasses(hasErrors);\n            }\n        });\n    }\n    addFocusBlurEvents(element) {\n        this.addEventListener(element, 'focus', () => {\n            if (this.root.focusedComponent !== this) {\n                if (this.root.pendingBlur) {\n                    this.root.pendingBlur();\n                }\n                this.root.focusedComponent = this;\n                this.emit('focus', this);\n            }\n            else if (this.root.focusedComponent === this && this.root.pendingBlur) {\n                this.root.pendingBlur.cancel();\n                this.root.pendingBlur = null;\n            }\n        });\n        this.addEventListener(element, 'blur', () => {\n            this.root.pendingBlur = utils_1.default.delay(() => {\n                this.emit('blur', this);\n                if (this.component.validateOn === 'blur') {\n                    this.root.triggerChange({ fromBlur: true }, {\n                        instance: this,\n                        component: this.component,\n                        value: this.dataValue,\n                        flags: { fromBlur: true }\n                    });\n                }\n                this.root.focusedComponent = null;\n                this.root.pendingBlur = null;\n            });\n        });\n    }\n    // eslint-disable-next-line max-statements\n    setCustomValidity(messages, dirty, external) {\n        const inputRefs = this.isInputComponent ? this.refs.input || [] : null;\n        if (typeof messages === 'string' && messages) {\n            messages = {\n                level: 'error',\n                message: messages,\n                component: this.component,\n            };\n        }\n        if (!Array.isArray(messages)) {\n            if (messages) {\n                messages = [messages];\n            }\n            else {\n                messages = [];\n            }\n        }\n        const errors = messages.filter(message => message.level === 'error');\n        let invalidInputRefs = inputRefs;\n        // Filter the invalid input refs in multiple components\n        if (this.component.multiple) {\n            const refsArray = Array.from(inputRefs);\n            refsArray.forEach((input) => {\n                this.setElementInvalid(this.performInputMapping(input), false);\n            });\n            this.setInputWidgetErrorClasses(refsArray, false);\n            invalidInputRefs = refsArray.filter((ref, index) => {\n                var _a;\n                return (_a = messages.some) === null || _a === void 0 ? void 0 : _a.call(messages, (msg) => {\n                    var _a;\n                    return ((_a = msg === null || msg === void 0 ? void 0 : msg.context) === null || _a === void 0 ? void 0 : _a.index) === index;\n                });\n            });\n        }\n        if (messages.length) {\n            if (this.refs.messageContainer) {\n                this.empty(this.refs.messageContainer);\n            }\n            this.emit('componentError', {\n                instance: this,\n                component: this.component,\n                message: messages[0].message,\n                messages,\n                external: !!external,\n            });\n            this.addMessages(messages, dirty, invalidInputRefs);\n            if (invalidInputRefs) {\n                this.setErrorClasses(invalidInputRefs, dirty, !!errors.length, !!messages.length);\n            }\n        }\n        else if (!errors.length || (errors[0].external === !!external)) {\n            if (this.refs.messageContainer) {\n                this.empty(this.refs.messageContainer);\n            }\n            if (this.refs.modalMessageContainer) {\n                this.empty(this.refs.modalMessageContainer);\n            }\n            if (invalidInputRefs) {\n                this.setErrorClasses(invalidInputRefs, dirty, !!errors.length, !!messages.length);\n            }\n            this.clearErrorClasses();\n        }\n        this._visibleErrors = messages;\n        return messages;\n    }\n    /**\n     * Determines if the value of this component is hidden from the user as if it is coming from the server, but is\n     * protected.\n     * @returns {boolean|*} - TRUE if the value is hidden.\n     */\n    isValueHidden() {\n        if (this.component.protected && this.root.editing) {\n            return false;\n        }\n        if (!this.root || !this.root.hasOwnProperty('editing')) {\n            return false;\n        }\n        if (!this.root || !this.root.editing) {\n            return false;\n        }\n        return (this.component.protected || !this.component.persistent || (this.component.persistent === 'client-only'));\n    }\n    shouldSkipValidation(data, row, flags = {}) {\n        const rules = [\n            // Do not validate if the flags say not too.\n            () => flags.noValidate,\n            // Force valid if component is read-only\n            () => this.options.readOnly,\n            // Do not check validations if component is not an input component.\n            () => !this.hasInput,\n            // Check to see if we are editing and if so, check component persistence.\n            () => this.isValueHidden(),\n            // Force valid if component is hidden.\n            () => {\n                if (!this.component.validateWhenHidden && (!this.visible || !this.checkCondition(row, data))) {\n                    // If this component is forced valid when it is hidden, then we also need to reset the errors for this component.\n                    this._errors = [];\n                    return true;\n                }\n                return false;\n            }\n        ];\n        return rules.some(pred => pred());\n    }\n    // Maintain reverse compatibility.\n    whenReady() {\n        console.warn('The whenReady() method has been deprecated. Please use the dataReady property instead.');\n        return this.dataReady;\n    }\n    get dataReady() {\n        return Promise.resolve();\n    }\n    /**\n     * Prints out the value of this component as a string value.\n     * @param {*} value - The value to print out.\n     * @returns {string} - The string representation of the value.\n     */\n    asString(value) {\n        value = value || this.getValue();\n        return (Array.isArray(value) ? value : [value]).map(lodash_1.default.toString).join(', ');\n    }\n    /**\n     * Return if the component is disabled.\n     * @returns {boolean} - TRUE if the component is disabled.\n     */\n    get disabled() {\n        return this._disabled || this.parentDisabled;\n    }\n    /**\n     * Disable this component.\n     * @param {boolean} disabled - TRUE to disable the component.\n     */\n    set disabled(disabled) {\n        this._disabled = disabled;\n    }\n    setDisabled(element, disabled) {\n        if (!element) {\n            return;\n        }\n        element.disabled = disabled;\n        if (disabled) {\n            element.setAttribute('disabled', 'disabled');\n        }\n        else {\n            element.removeAttribute('disabled');\n        }\n    }\n    setLoading(element, loading) {\n        if (!element || (element.loading === loading)) {\n            return;\n        }\n        element.loading = loading;\n        if (!element.loader && loading) {\n            element.loader = this.ce('i', {\n                class: `${this.iconClass('refresh', true)} button-icon-right`\n            });\n        }\n        if (element.loader) {\n            if (loading) {\n                this.appendTo(element.loader, element);\n            }\n            else {\n                this.removeChildFrom(element.loader, element);\n            }\n        }\n    }\n    selectOptions(select, tag, options, defaultValue) {\n        lodash_1.default.each(options, (option) => {\n            const attrs = {\n                value: option.value\n            };\n            if (defaultValue !== undefined && (option.value === defaultValue)) {\n                attrs.selected = 'selected';\n            }\n            const optionElement = this.ce('option', attrs);\n            optionElement.appendChild(this.text(option.label));\n            select.appendChild(optionElement);\n        });\n    }\n    setSelectValue(select, value) {\n        const options = select.querySelectorAll('option');\n        lodash_1.default.each(options, (option) => {\n            if (option.value === value) {\n                option.setAttribute('selected', 'selected');\n            }\n            else {\n                option.removeAttribute('selected');\n            }\n        });\n        if (select.onchange) {\n            select.onchange();\n        }\n        if (select.onselect) {\n            select.onselect();\n        }\n    }\n    getRelativePath(path) {\n        const keyPart = `.${this.key}`;\n        const thisPath = this.isInputComponent ? this.path\n            : this.path.slice(0).replace(keyPart, '');\n        return path.replace(thisPath, '');\n    }\n    clear() {\n        this.detach();\n        this.empty(this.getElement());\n    }\n    append(element) {\n        this.appendTo(element, this.element);\n    }\n    prepend(element) {\n        this.prependTo(element, this.element);\n    }\n    removeChild(element) {\n        this.removeChildFrom(element, this.element);\n    }\n    detachLogic() {\n        this.logic.forEach(logic => {\n            if (logic.trigger.type === 'event') {\n                const event = this.interpolate(logic.trigger.event);\n                this.off(event); // only applies to callbacks on this component\n            }\n        });\n    }\n    attachLogic() {\n        // Do not attach logic during builder mode.\n        if (this.builderMode) {\n            return;\n        }\n        this.logic.forEach((logic) => {\n            if (logic.trigger.type === 'event') {\n                const event = this.interpolate(logic.trigger.event);\n                this.on(event, (...args) => {\n                    const newComponent = (0, utils_2.fastCloneDeep)(this.originalComponent);\n                    if (this.applyActions(newComponent, logic.actions, args)) {\n                        // If component definition changed, replace it.\n                        if (!lodash_1.default.isEqual(this.component, newComponent)) {\n                            this.component = newComponent;\n                            const visible = this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden;\n                            const disabled = this.shouldDisabled;\n                            // Change states which won't be recalculated during redrawing\n                            if (this.visible !== visible) {\n                                this.visible = visible;\n                            }\n                            if (this.disabled !== disabled) {\n                                this.disabled = disabled;\n                            }\n                            this.redraw();\n                        }\n                    }\n                }, true);\n            }\n        });\n    }\n    /**\n     * Get the element information.\n     * @returns {*} - The components \"input\" DOM element information.\n     */\n    elementInfo() {\n        const attributes = {\n            name: this.options.name,\n            type: this.component.inputType || 'text',\n            class: 'form-control',\n            lang: this.options.language\n        };\n        if (this.component.placeholder) {\n            attributes.placeholder = this.t(this.component.placeholder, { _userInput: true });\n        }\n        if (this.component.tabindex) {\n            attributes.tabindex = this.component.tabindex;\n        }\n        if (this.disabled) {\n            attributes.disabled = 'disabled';\n        }\n        lodash_1.default.defaults(attributes, this.component.attributes);\n        return {\n            type: 'input',\n            component: this.component,\n            changeEvent: 'change',\n            attr: attributes\n        };\n    }\n    autofocus() {\n        const hasAutofocus = this.component.autofocus && !this.builderMode && !this.options.preview;\n        if (hasAutofocus) {\n            this.on('render', () => this.focus(), true);\n        }\n    }\n    scrollIntoView(element = this.element, verticalOnly) {\n        if (!element) {\n            return;\n        }\n        const { left, top } = element.getBoundingClientRect();\n        window.scrollTo(verticalOnly ? window.scrollX : left + window.scrollX, top + window.scrollY);\n    }\n    focus(index) {\n        var _a, _b, _c, _d;\n        if ('beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n        if (!index && !lodash_1.default.isNumber(index) && ((_b = (_a = this.refs) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.length)) {\n            index = this.refs.input.length - 1;\n        }\n        if ((_c = this.refs.input) === null || _c === void 0 ? void 0 : _c.length) {\n            const focusingInput = this.refs.input[index];\n            if (((_d = this.component.widget) === null || _d === void 0 ? void 0 : _d.type) === 'calendar') {\n                const sibling = focusingInput.nextSibling;\n                if (sibling) {\n                    sibling.focus();\n                }\n            }\n            else {\n                focusingInput.focus();\n            }\n        }\n        if (this.refs.openModal) {\n            this.refs.openModal.focus();\n        }\n        if (this.parent.refs.openModal) {\n            this.parent.refs.openModal.focus();\n        }\n    }\n    /**\n     * Get `Formio` instance for working with files\n     * @returns {import('@formio/core').Formio} - The Formio instance file service.\n     */\n    get fileService() {\n        if (this.options.fileService) {\n            return this.options.fileService;\n        }\n        if (this.options.formio) {\n            return this.options.formio;\n        }\n        if (this.root && this.root.formio) {\n            return this.root.formio;\n        }\n        const formio = new Formio_1.Formio();\n        // If a form is loaded, then make sure to set the correct formUrl.\n        if (this.root && this.root._form && this.root._form._id) {\n            formio.formUrl = `${formio.projectUrl}/form/${this.root._form._id}`;\n        }\n        return formio;\n    }\n    resetCaches() { }\n    get previewMode() {\n        return false;\n    }\n}\nexports[\"default\"] = Component;\nComponent.externalLibraries = {};\nComponent.requireLibrary = function (name, property, src, polling) {\n    if (!Component.externalLibraries.hasOwnProperty(name)) {\n        Component.externalLibraries[name] = {};\n        Component.externalLibraries[name].ready = new Promise((resolve, reject) => {\n            Component.externalLibraries[name].resolve = resolve;\n            Component.externalLibraries[name].reject = reject;\n        });\n        const callbackName = `${name}Callback`;\n        if (!polling && !window[callbackName]) {\n            window[callbackName] = function () {\n                this.resolve();\n            }.bind(Component.externalLibraries[name]);\n        }\n        // See if the plugin already exists.\n        const plugin = (0, utils_2.getScriptPlugin)(property);\n        if (plugin) {\n            Component.externalLibraries[name].resolve(plugin);\n        }\n        else {\n            src = Array.isArray(src) ? src : [src];\n            src.forEach((lib) => {\n                let attrs = {};\n                let elementType = '';\n                if (typeof lib === 'string') {\n                    lib = {\n                        type: 'script',\n                        src: lib\n                    };\n                }\n                switch (lib.type) {\n                    case 'script':\n                        elementType = 'script';\n                        attrs = {\n                            src: lib.src,\n                            type: 'text/javascript',\n                            defer: true,\n                            async: true\n                        };\n                        break;\n                    case 'styles':\n                        elementType = 'link';\n                        attrs = {\n                            href: lib.src,\n                            rel: 'stylesheet'\n                        };\n                        break;\n                }\n                // Add the script to the top page.\n                const script = document.createElement(elementType);\n                for (const attr in attrs) {\n                    script.setAttribute(attr, attrs[attr]);\n                }\n                document.getElementsByTagName('head')[0].appendChild(script);\n            });\n            // if no callback is provided, then check periodically for the script.\n            if (polling) {\n                setTimeout(function checkLibrary() {\n                    const plugin = (0, utils_2.getScriptPlugin)(property);\n                    if (plugin) {\n                        Component.externalLibraries[name].resolve(plugin);\n                    }\n                    else {\n                        // check again after 200 ms.\n                        setTimeout(checkLibrary, 200);\n                    }\n                }, 200);\n            }\n        }\n    }\n    return Component.externalLibraries[name].ready;\n};\nComponent.libraryReady = function (name) {\n    if (Component.externalLibraries.hasOwnProperty(name) &&\n        Component.externalLibraries[name].ready) {\n        return Component.externalLibraries[name].ready;\n    }\n    return Promise.reject(`${name} library was not required.`);\n};\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/component/Component.js?");
 
 /***/ }),
 
@@ -5103,7 +5103,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Field_1 = __importDefault(__webpack_require__(/*! ../field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst Components_1 = __importDefault(__webpack_require__(/*! ../../Components */ \"./lib/cjs/components/Components.js\"));\n'';\nconst utils_1 = __importDefault(__webpack_require__(/*! ../../../utils */ \"./lib/cjs/utils/index.js\"));\nconst process_1 = __webpack_require__(/*! @formio/core/process */ \"./node_modules/@formio/core/lib/process/index.js\");\n/**\n * NestedComponent class.\n * @augments Field\n */\nclass NestedComponent extends Field_1.default {\n    static schema(...extend) {\n        return Field_1.default.schema({\n            tree: false,\n            lazyLoad: false,\n        }, ...extend);\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        this.type = 'components';\n        /**\n         * The collapsed state of this NestedComponent.\n         * @type {boolean}\n         * @default false\n         * @private\n         */\n        this._collapsed = !!this.component.collapsed;\n    }\n    get defaultSchema() {\n        return NestedComponent.schema();\n    }\n    /**\n     * Get the schema for the NestedComponent.\n     * @returns {object} The schema for the NestedComponent.\n     * @override\n     */\n    get schema() {\n        const schema = super.schema;\n        const components = lodash_1.default.uniqBy(this.getComponents(), 'component.key');\n        schema.components = lodash_1.default.map(components, 'schema');\n        return schema;\n    }\n    /**\n     * Get collapsed state.\n     * @returns {boolean} The collapsed state.\n     */\n    get collapsed() {\n        return this._collapsed;\n    }\n    /**\n     * Set collapsed state.\n     * @param {boolean} value - The collapsed state.\n     * @returns {void}\n     */\n    collapse(value) {\n        const promise = this.redraw();\n        if (!value) {\n            this.checkValidity(this.data, !this.pristine);\n        }\n        return promise;\n    }\n    /**\n     * Set collapsed state.\n     * @param {boolean} value - The collapsed state.\n     * @returns {void}\n     */\n    set collapsed(value) {\n        this._collapsed = value;\n        this.collapse(value);\n    }\n    /**\n     * Set visible state of parent and each child component.\n     * @param {boolean} value - The visible state.\n     * @returns {void}\n     */\n    set visible(value) {\n        // DO NOT CALL super here.  There is an issue where clearOnHide was getting triggered with\n        // subcomponents because the \"parentVisible\" flag was set to false when it should really be\n        // set to true.\n        const visibilityChanged = this._visible !== value;\n        this._visible = value;\n        const isVisible = this.visible;\n        const forceShow = this.shouldForceShow();\n        const forceHide = this.shouldForceHide();\n        this.components.forEach((component) => {\n            // Set the parent visibility first since we may have nested components within nested components\n            // and they need to be able to determine their visibility based on the parent visibility.\n            component.parentVisible = isVisible;\n            let visible;\n            if (component.hasCondition()) {\n                visible = !component.conditionallyHidden();\n            }\n            else {\n                visible = !component.component.hidden;\n            }\n            if (forceShow || visible) {\n                component.visible = true;\n            }\n            else if (forceHide || !isVisible || !visible) {\n                component.visible = false;\n            }\n            // If hiding a nested component, clear all errors below.\n            if (!component.visible) {\n                component.error = '';\n            }\n        });\n        if (visibilityChanged) {\n            this.redraw();\n        }\n    }\n    /**\n     * Get visible state.\n     * @returns {boolean} The visible state.\n     */\n    get visible() {\n        return super.visible;\n    }\n    /**\n     * Set parent visibility.\n     * @param {boolean} value - The parent visibility.\n     * @returns {void}\n     */\n    set parentVisible(value) {\n        super.parentVisible = value;\n        this.components.forEach(component => component.parentVisible = this.visible);\n    }\n    /**\n     * Get parent visibility.\n     * @returns {boolean} The parent visibility.\n     */\n    get parentVisible() {\n        return super.parentVisible;\n    }\n    /**\n     * Get the disabled state.\n     * @returns {boolean} - The disabled state.\n     */\n    get disabled() {\n        return super.disabled;\n    }\n    /**\n     * Set the disabled state.\n     * @param {boolean} disabled - The disabled state.\n     */\n    set disabled(disabled) {\n        super.disabled = disabled;\n        this.components.forEach((component) => component.parentDisabled = disabled);\n    }\n    /**\n     * Set parent disabled state.\n     * @param {boolean} value - The parent disabled state.\n     * @returns {void}\n     */\n    set parentDisabled(value) {\n        super.parentDisabled = value;\n        this.components.forEach(component => {\n            component.parentDisabled = this.disabled;\n        });\n    }\n    /**\n     * Get parent disabled state.\n     * @returns {boolean} The parent disabled state.\n     */\n    get parentDisabled() {\n        return super.parentDisabled;\n    }\n    /**\n     * Get ready state from all components.\n     * @returns {Promise<Array>} - The promise that resolves when all components are ready.\n     */\n    get ready() {\n        return Promise.all(this.getComponents().map(component => component.ready));\n    }\n    /**\n     * Get currentForm object.\n     * @returns {object} - The current form object.\n     */\n    get currentForm() {\n        return super.currentForm;\n    }\n    /**\n     * Set currentForm object.\n     * @param {object} instance - The current form object.\n     * @returns {void}\n     */\n    set currentForm(instance) {\n        super.currentForm = instance;\n        this.getComponents().forEach(component => {\n            component.currentForm = instance;\n        });\n    }\n    /**\n     * Get Row Index.\n     * @returns {number} - The row index.\n     */\n    get rowIndex() {\n        return this._rowIndex;\n    }\n    /**\n     * Set Row Index to row and update each component.\n     * @param {number} value - The row index.\n     * @returns {void}\n     */\n    set rowIndex(value) {\n        var _a, _b;\n        this._rowIndex = value;\n        this.paths = utils_1.default.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths) || {})), { dataIndex: value }));\n        this.eachComponent((component) => {\n            component.rowIndex = value;\n        });\n    }\n    /**\n     * Get Contextual data of the component.\n     * @returns {object} - The contextual data of the component.\n     * @override\n     */\n    componentContext() {\n        return this._data;\n    }\n    /**\n     * Get the data of the component.\n     * @returns {object} - The data of the component.\n     * @override\n     */\n    get data() {\n        return this._data;\n    }\n    /**\n     * Set the data of the component.\n     * @param {object} value - The data of the component.\n     * @returns {void}\n     */\n    set data(value) {\n        this._data = value;\n        this.eachComponent((component) => {\n            component.data = this.componentContext(component);\n        });\n    }\n    /**\n     * Get components array.\n     * @returns {Array} - The components array.\n     */\n    getComponents() {\n        return this.components || [];\n    }\n    /**\n     * Perform a deep iteration over every component, including those\n     * within other container based components.\n     * @param {Function} fn - Called for every component.\n     * @param {any} options - The options to include with this everyComponent call.\n     */\n    everyComponent(fn, options = {}) {\n        const components = this.getComponents();\n        lodash_1.default.each(components, (component, index) => {\n            if (fn(component, components, index) === false) {\n                return false;\n            }\n            if (typeof component.everyComponent === 'function') {\n                if (component.everyComponent(fn, options) === false) {\n                    return false;\n                }\n            }\n        });\n    }\n    /**\n     * Check if the component has a component.\n     * @param {import('@formio/core').Component} component - The component to check.\n     * @returns {boolean} - TRUE if the component has a component, FALSE otherwise.\n     */\n    hasComponent(component) {\n        let result = false;\n        this.everyComponent((comp) => {\n            if (comp === component) {\n                result = true;\n                return false;\n            }\n        });\n        return result;\n    }\n    /**\n     * Get the flattened components of this NestedComponent.\n     * @returns {object} - The flattened components of this NestedComponent.\n     */\n    flattenComponents() {\n        const result = {};\n        this.everyComponent((component) => {\n            result[component.component.flattenAs || component.key] = component;\n        });\n        return result;\n    }\n    /**\n     * Perform an iteration over each component within this container component.\n     * @param {Function} fn - Called for each component\n     */\n    eachComponent(fn) {\n        lodash_1.default.each(this.getComponents(), (component, index) => {\n            if (fn(component, index) === false) {\n                return false;\n            }\n        });\n    }\n    /**\n     * Returns a component provided a key. This performs a deep search within the component tree.\n     * @param {string} path - The path to the component.\n     * @returns {any} - The component that is located.\n     */\n    getComponent(path) {\n        var _a;\n        // If the component is found\n        if (!this.componentMatches) {\n            this.componentMatches = {};\n        }\n        if (this.componentMatches && this.componentMatches[path]) {\n            return this.componentMatches[path];\n        }\n        path = utils_1.default.getStringFromComponentPath(path);\n        const matches = {\n            path: undefined,\n            fullPath: undefined,\n            localPath: undefined,\n            fullLocalPath: undefined,\n            dataPath: undefined,\n            localDataPath: undefined,\n            key: undefined,\n        };\n        this.everyComponent((component) => {\n            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;\n            // All searches are relative to this component so replace this path from the child paths.\n            utils_1.default.componentMatches(component.component, {\n                path: (_b = (_a = component.paths) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.replace(new RegExp(`^${(_c = this.paths) === null || _c === void 0 ? void 0 : _c.path}\\\\.?`), ''),\n                fullPath: (_e = (_d = component.paths) === null || _d === void 0 ? void 0 : _d.fullPath) === null || _e === void 0 ? void 0 : _e.replace(new RegExp(`^${(_f = this.paths) === null || _f === void 0 ? void 0 : _f.fullPath}\\\\.?`), ''),\n                localPath: (_h = (_g = component.paths) === null || _g === void 0 ? void 0 : _g.localPath) === null || _h === void 0 ? void 0 : _h.replace(new RegExp(`^${(_j = this.paths) === null || _j === void 0 ? void 0 : _j.localPath}\\\\.?`), ''),\n                fullLocalPath: (_l = (_k = component.paths) === null || _k === void 0 ? void 0 : _k.fullLocalPath) === null || _l === void 0 ? void 0 : _l.replace(new RegExp(`^${(_m = this.paths) === null || _m === void 0 ? void 0 : _m.fullLocalPath}\\\\.?`), ''),\n                dataPath: (_p = (_o = component.paths) === null || _o === void 0 ? void 0 : _o.dataPath) === null || _p === void 0 ? void 0 : _p.replace(new RegExp(`^${(_q = this.paths) === null || _q === void 0 ? void 0 : _q.dataPath}\\\\.?`), ''),\n                localDataPath: (_s = (_r = component.paths) === null || _r === void 0 ? void 0 : _r.localDataPath) === null || _s === void 0 ? void 0 : _s.replace(new RegExp(`^${(_t = this.paths) === null || _t === void 0 ? void 0 : _t.localDataPath}\\\\.?`), ''),\n            }, path, this.rowIndex, matches, (type, match) => {\n                match.instance = component;\n                return match;\n            });\n        });\n        this.componentMatches[path] = (_a = utils_1.default.getBestMatch(matches)) === null || _a === void 0 ? void 0 : _a.instance;\n        return this.componentMatches[path];\n    }\n    /**\n     * Return a component provided the Id of the component.\n     * @param {string} id - The Id of the component.\n     * @param {Function} fn - Called with the component once it is retrieved.\n     * @returns {object} - The component retrieved.\n     */\n    getComponentById(id, fn = null) {\n        let comp = null;\n        this.everyComponent((component, components) => {\n            if (component.id === id) {\n                comp = component;\n                if (fn) {\n                    fn(component, components);\n                }\n                return false;\n            }\n        });\n        return comp;\n    }\n    /**\n     * Create a new component and add it to the components array.\n     * @param {import('@formio/core').Component} component - The component JSON schema to create.\n     * @param {object} options - The options to create the component with.\n     * @param {import('@formio/core').DataObject} data - The submission data object to house the data for this component.\n     * @param {import('@formio/core').Component} [before] - The component before which to add this component.\n     * @param {import('@formio/core').Component} [replacedComp] - The component to replace with this component.\n     * @returns {any} - The created component instance.\n     */\n    createComponent(component, options, data, before, replacedComp) {\n        if (!component) {\n            return;\n        }\n        options = options || this.options;\n        data = data || this.data;\n        options.parent = this;\n        options.parentVisible = this.visible;\n        options.root = (options === null || options === void 0 ? void 0 : options.root) || this.root || this;\n        options.localRoot = this.localRoot;\n        options.skipInit = true;\n        if (!(options.display === 'pdf' && this.builderMode)) {\n            component.id = utils_1.default.getRandomComponentId();\n        }\n        const comp = Components_1.default.create(component, options, data, true);\n        comp.init();\n        if (component.internal) {\n            return comp;\n        }\n        if (before) {\n            const index = lodash_1.default.findIndex(this.components, { id: before.id });\n            if (index !== -1) {\n                this.components.splice(index, 0, comp);\n            }\n            else {\n                this.components.push(comp);\n            }\n        }\n        else if (replacedComp) {\n            const index = lodash_1.default.findIndex(this.components, { id: replacedComp.id });\n            if (index !== -1) {\n                this.components[index] = comp;\n            }\n            else {\n                this.components.push(comp);\n            }\n        }\n        else {\n            this.components.push(comp);\n        }\n        return comp;\n    }\n    getContainer() {\n        return this.element;\n    }\n    get componentComponents() {\n        return this.component.components || [];\n    }\n    get nestedKey() {\n        return `nested-${this.key}`;\n    }\n    get templateName() {\n        return 'container';\n    }\n    init() {\n        this.components = this.components || [];\n        this.addComponents();\n        return super.init();\n    }\n    /**\n     * Add a new component instance to the components array.\n     * @param {import('@formio/core').DataObject} [data] - The Submission data for this component.\n     * @param {object} [options] - The options for this component.\n     */\n    addComponents(data, options) {\n        data = data || this.data;\n        this.components = this.components || [];\n        options = options || this.options;\n        if (options.components) {\n            this.components = options.components;\n        }\n        else {\n            const components = this.hook('addComponents', this.componentComponents, this) || [];\n            components.forEach((component) => this.addComponent(component, data));\n        }\n    }\n    /**\n     * Add a new component to the components array.\n     * @param {import('@formio/core').Component} component - The component JSON schema to add.\n     * @param {object} data - The submission data object to house the data for this component.\n     * @param {HTMLElement} before - A DOM element to insert this element before.\n     * @param {boolean} [noAdd] - A possibly extraneous boolean flag.\n     * @returns {any} - The created component instance.\n     */\n    addComponent(component, data = null, before = null, noAdd = false) {\n        data = data || this.data;\n        this.components = this.components || [];\n        component = this.hook('addComponent', component, data, before, noAdd);\n        const comp = this.createComponent(component, this.options, data, before ? before : null);\n        if (noAdd) {\n            return comp;\n        }\n        return comp;\n    }\n    beforeFocus() {\n        if (this.parent && 'beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n    }\n    render(children) {\n        // If already rendering, don't re-render.\n        return super.render(children || this.renderTemplate(this.templateName, {\n            children: !this.visible ? '' : this.renderComponents(),\n            nestedKey: this.nestedKey,\n            collapsed: this.options.pdf ? false : this.collapsed,\n        }));\n    }\n    renderComponents(components) {\n        components = components || this.getComponents();\n        const children = components.map(component => component.render());\n        return this.renderTemplate('components', {\n            children,\n            components,\n        });\n    }\n    attach(element) {\n        const superPromise = super.attach(element);\n        this.loadRefs(element, {\n            header: 'single',\n            collapsed: this.collapsed,\n            [this.nestedKey]: 'single',\n            messageContainer: 'single-scope',\n        });\n        let childPromise = Promise.resolve();\n        if (this.refs[this.nestedKey]) {\n            childPromise = this.attachComponents(this.refs[this.nestedKey]);\n        }\n        if (!this.visible) {\n            this.attachComponentsLogic();\n        }\n        if (this.component.collapsible && this.refs.header) {\n            this.addEventListener(this.refs.header, 'click', () => {\n                this.collapsed = !this.collapsed;\n            });\n            this.addEventListener(this.refs.header, 'keydown', (e) => {\n                if (e.keyCode === 13 || e.keyCode === 32) {\n                    e.preventDefault();\n                    this.collapsed = !this.collapsed;\n                }\n            });\n        }\n        return Promise.all([\n            superPromise,\n            childPromise,\n        ]);\n    }\n    /**\n     * Attach the logic to the components.\n     * @param {import('@formio/core').Component[]} components - The components to attach logic to.\n     */\n    attachComponentsLogic(components) {\n        components = components || this.components;\n        lodash_1.default.each(components, (comp) => {\n            comp.attachLogic();\n            if (lodash_1.default.isFunction(comp.attachComponentsLogic)) {\n                comp.attachComponentsLogic();\n            }\n        });\n    }\n    attachComponents(element, components, container) {\n        components = components || this.components;\n        container = container || this.component.components;\n        element = this.hook('attachComponents', element, components, container, this);\n        if (!element) {\n            // Return a non-resolving promise.\n            return (new Promise(() => { }));\n        }\n        let index = 0;\n        const promises = [];\n        Array.prototype.slice.call(element.children).forEach(child => {\n            if (!child.getAttribute('data-noattach') && components[index]) {\n                promises.push(components[index].attach(child));\n                index++;\n            }\n        });\n        return Promise.all(promises);\n    }\n    /**\n     * Remove a component from the components array and from the children object\n     * @param {import('@formio/core').Component} component - The component to remove from the components.\n     * @param {import('@formio/core').Component[]} components - An array of components to remove this component from.\n     * @param {boolean} [all] - If set to TRUE will cascade remove all components.\n     */\n    removeComponent(component, components, all = false) {\n        components = components || this.components;\n        component.destroy(all);\n        lodash_1.default.remove(components, { id: component.id });\n        if (this.componentsMap[component.path]) {\n            delete this.componentsMap[component.path];\n        }\n    }\n    /**\n     * Removes a component provided the API key of that component.\n     * @param {string} key - The API key of the component to remove.\n     * @param {Function} fn - Called once the component is removed.\n     * @returns {null|void} - Returns nothing if the component is not found.\n     */\n    removeComponentByKey(key, fn = null) {\n        const comp = this.getComponent(key, (component, components) => {\n            this.removeComponent(component, components);\n            if (fn) {\n                fn(component, components);\n            }\n        });\n        if (!comp) {\n            if (fn) {\n                fn(null);\n            }\n            return null;\n        }\n    }\n    /**\n     * Removes a component provided the Id of the component.\n     * @param {string} id - The Id of the component to remove.\n     * @param {Function} fn - Called when the component is removed.\n     * @returns {null|void} - Returns nothing if the component is not found.\n     */\n    removeComponentById(id, fn = null) {\n        const comp = this.getComponentById(id, (component, components) => {\n            this.removeComponent(component, components);\n            if (fn) {\n                fn(component, components);\n            }\n        });\n        if (!comp) {\n            if (fn) {\n                fn(null);\n            }\n            return null;\n        }\n    }\n    updateValue(value, flags = {}) {\n        return this.components.reduce((changed, comp) => {\n            return comp.updateValue(null, flags) || changed;\n        }, super.updateValue(value, flags));\n    }\n    shouldSkipValidation(data, row, flags) {\n        // Nested components with no input should not be validated.\n        if (!this.component.input) {\n            return true;\n        }\n        else {\n            return super.shouldSkipValidation(data, row, flags);\n        }\n    }\n    checkData(data, flags, row, components) {\n        if (this.builderMode) {\n            return true;\n        }\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        components = components && lodash_1.default.isArray(components) ? components : this.getComponents();\n        super.checkData(data, Object.assign({}, flags), row);\n        components.forEach((comp) => comp.checkData(data, Object.assign({}, flags), row));\n    }\n    checkConditions(data, flags, row) {\n        // check conditions of parent component first, because it may influence on visibility of it's children\n        const check = super.checkConditions(data, flags, row);\n        //row data of parent component not always corresponds to row of nested components, use comp.data as row data for children instead\n        this.getComponents().forEach(comp => comp.checkConditions(data, flags, comp.data));\n        return check;\n    }\n    clearOnHide(show) {\n        super.clearOnHide(show);\n        this.getComponents().forEach(component => component.clearOnHide(show));\n    }\n    /**\n     * Allow components to hook into the next page trigger to perform their own logic.\n     * @param {Function} next - The callback to continue to the next page.\n     * @returns {Promise} - A promise when the page has been processed.\n     */\n    beforePage(next) {\n        return Promise.all(this.getComponents().map((comp) => comp.beforePage(next)));\n    }\n    /**\n     * Allow components to hook into the submission to provide their own async data.\n     * @returns {Promise} - Returns a promise when the constituent beforeSubmit functions are complete.\n     */\n    beforeSubmit() {\n        return Promise.allSettled(this.getComponents().map((comp) => comp.beforeSubmit()));\n    }\n    calculateValue(data, flags, row) {\n        // Do not iterate into children and calculateValues if this nested component is conditionally hidden.\n        if (this.conditionallyHidden()) {\n            return false;\n        }\n        return this.getComponents().reduce((changed, comp) => comp.calculateValue(data, flags, row) || changed, super.calculateValue(data, flags, row));\n    }\n    isLastPage() {\n        return this.pages.length - 1 === this.page;\n    }\n    isValid(data, dirty) {\n        return this.getComponents().reduce((valid, comp) => comp.isValid(data, dirty) && valid, super.isValid(data, dirty));\n    }\n    validationProcessor({ scope, data, row, instance, paths }, flags) {\n        var _a;\n        const { dirty } = flags;\n        if (this.root.hasExtraPages && this.page !== this.root.page) {\n            instance = ((_a = this.componentsMap) === null || _a === void 0 ? void 0 : _a.hasOwnProperty(paths.dataPath))\n                ? this.componentsMap[paths.dataPath]\n                : this.getComponent(paths.dataPath);\n        }\n        if (!instance) {\n            return;\n        }\n        instance.checkComponentValidity(data, dirty, row, flags, scope.errors);\n        if (instance.processOwnValidation) {\n            scope.noRecurse = true;\n        }\n    }\n    /**\n     * Perform a validation on all child components of this nested component.\n     * @param {import('@formio/core').Component[]} components - The components to validate.\n     * @param {import('@formio/core').DataObject} data - The data to validate.\n     * @param {object} flags - The flags to use when validating.\n     * @returns {Promise<Array>|Array} - The errors if any exist.\n     */\n    validateComponents(components = null, data = null, flags = {}) {\n        components = components || this.component.components;\n        data = data || this.rootValue;\n        const { async, dirty, process } = flags;\n        const validationProcessorProcess = (context) => this.validationProcessor(context, flags);\n        const checkModalProcessorProcess = ({ instance, component, components }) => {\n            // If we just validated the last component, and there are errors from our parent, then we need to show a model of those errors.\n            if (instance &&\n                instance.parent &&\n                (component === components[components.length - 1]) &&\n                instance.parent.componentModal) {\n                instance.parent.checkModal(instance.parent.childErrors, dirty);\n            }\n        };\n        const processorContext = {\n            process: process || 'unknown',\n            components,\n            instances: this.componentsMap,\n            data: data,\n            local: !!flags.local,\n            scope: { errors: [] },\n            parent: this.component,\n            parentPaths: this.paths,\n            processors: [\n                {\n                    process: validationProcessorProcess,\n                    processSync: validationProcessorProcess\n                },\n                {\n                    process: checkModalProcessorProcess,\n                    processSync: checkModalProcessorProcess\n                }\n            ]\n        };\n        return async ? (0, process_1.process)(processorContext).then((scope) => scope.errors) : (0, process_1.processSync)(processorContext).errors;\n    }\n    /**\n     * Validate a nested component with data, or its own internal data.\n     * @param {import('@formio/core').DataObject} data - The data to validate.\n     * @param {object} flags - The flags to use when validating.\n     * @returns {Array} - The errors if any exist.\n     */\n    validate(data = null, flags = {}) {\n        data = data || this.rootValue;\n        return this.validateComponents(this.getComponents().map((component) => component.component), data, flags);\n    }\n    checkComponentValidity(data = null, dirty = false, row = null, flags = {}, allErrors = []) {\n        this.childErrors = [];\n        return super.checkComponentValidity(data, dirty, row, flags, allErrors);\n    }\n    /**\n     * Checks the validity of the component.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {*} row - The contextual row data for this component.\n     * @param {boolean} silentCheck - If the check should be silent and not set the error messages.\n     * @param {Array<any>} childErrors - An array of all errors that have occured so that it can be appended when another one occurs here.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    checkValidity(data = null, dirty = false, row = null, silentCheck = false, childErrors = []) {\n        childErrors.push(...this.validate(data, { dirty, silentCheck }));\n        return this.checkComponentValidity(data, dirty, row, { dirty, silentCheck }, childErrors) && childErrors.length === 0;\n    }\n    checkAsyncValidity(data = null, dirty = false, row = null, silentCheck = false) {\n        return this.ready.then(() => {\n            return this.validate(data, { dirty, silentCheck, async: true }).then((childErrors) => {\n                return this.checkComponentValidity(data, dirty, row, { dirty, silentCheck, async: true }, childErrors).then((valid) => {\n                    return valid && childErrors.length === 0;\n                });\n            });\n        });\n    }\n    setPristine(pristine) {\n        super.setPristine(pristine);\n        this.getComponents().forEach((comp) => comp.setPristine(pristine));\n    }\n    get isPristine() {\n        return this.pristine && this.getComponents().every((c) => c.isPristine);\n    }\n    get isDirty() {\n        return this.dirty && this.getComponents().every((c) => c.isDirty);\n    }\n    detach() {\n        this.components.forEach(component => {\n            component.detach();\n        });\n        super.detach();\n    }\n    clear() {\n        this.components.forEach(component => {\n            component.clear();\n        });\n        super.clear();\n    }\n    destroy(all = false) {\n        this.destroyComponents(all);\n        super.destroy(all);\n    }\n    destroyComponents(all = false) {\n        const components = this.getComponents().slice();\n        components.forEach((comp) => this.removeComponent(comp, this.components, all));\n        this.components = [];\n    }\n    get visibleErrors() {\n        return this.getComponents().reduce((errors, comp) => errors.concat(comp.visibleErrors || []), super.visibleErrors);\n    }\n    get errors() {\n        const thisErrors = super.errors;\n        return this.getComponents()\n            .reduce((errors, comp) => errors.concat(comp.errors || []), thisErrors)\n            .filter(err => err.level !== 'hidden');\n    }\n    getValue() {\n        return this.data;\n    }\n    resetValue() {\n        super.resetValue();\n        this.getComponents().forEach((comp) => comp.resetValue());\n        this.setPristine(true);\n    }\n    get dataReady() {\n        return Promise.all(this.getComponents().map((component) => component.dataReady));\n    }\n    setNestedValue(component, value, flags = {}) {\n        component._data = this.componentContext(component);\n        if (component.type === 'button') {\n            return false;\n        }\n        if (component.type === 'components') {\n            if (component.tree && component.hasValue(value)) {\n                return component.setValue(lodash_1.default.get(value, component.key), flags);\n            }\n            return component.setValue(value, flags);\n        }\n        else if (value && component.hasValue(value)) {\n            return component.setValue(lodash_1.default.get(value, component.key), flags);\n        }\n        else if ((!this.rootPristine || component.visible) && (flags.resetValue || component.shouldAddDefaultValue)) {\n            flags.noValidate = !flags.dirty;\n            flags.resetValue = true;\n            return component.setValue(component.defaultValue, flags);\n        }\n    }\n    setValue(value, flags = {}) {\n        if (!value) {\n            return false;\n        }\n        // If the value is equal to the empty value, then this means we need to reset the values.\n        if (lodash_1.default.isEqual(value, this.emptyValue)) {\n            // TO-DO: For a future major release, we need to investigate removing the need for the\n            // \"resetValue\" flag. This seems like a hack that is no longer necessary and the renderer\n            // may behave more deterministically without it.\n            flags.resetValue = true;\n        }\n        return this.getComponents().reduce((changed, component) => {\n            return this.setNestedValue(component, value, flags, changed) || changed;\n        }, false);\n    }\n    get lazyLoad() {\n        var _a;\n        return (_a = this.component.lazyLoad) !== null && _a !== void 0 ? _a : false;\n    }\n}\nexports[\"default\"] = NestedComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/nested/NestedComponent.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Field_1 = __importDefault(__webpack_require__(/*! ../field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst Components_1 = __importDefault(__webpack_require__(/*! ../../Components */ \"./lib/cjs/components/Components.js\"));\n'';\nconst utils_1 = __importDefault(__webpack_require__(/*! ../../../utils */ \"./lib/cjs/utils/index.js\"));\nconst process_1 = __webpack_require__(/*! @formio/core/process */ \"./node_modules/@formio/core/lib/process/index.js\");\n/**\n * NestedComponent class.\n * @augments Field\n */\nclass NestedComponent extends Field_1.default {\n    static schema(...extend) {\n        return Field_1.default.schema({\n            tree: false,\n            lazyLoad: false,\n        }, ...extend);\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        this.type = 'components';\n        /**\n         * The collapsed state of this NestedComponent.\n         * @type {boolean}\n         * @default false\n         * @private\n         */\n        this._collapsed = !!this.component.collapsed;\n    }\n    get defaultSchema() {\n        return NestedComponent.schema();\n    }\n    /**\n     * Get the schema for the NestedComponent.\n     * @returns {object} The schema for the NestedComponent.\n     * @override\n     */\n    get schema() {\n        const schema = super.schema;\n        const components = lodash_1.default.uniqBy(this.getComponents(), 'component.key');\n        schema.components = lodash_1.default.map(components, 'schema');\n        return schema;\n    }\n    /**\n     * Get collapsed state.\n     * @returns {boolean} The collapsed state.\n     */\n    get collapsed() {\n        return this._collapsed;\n    }\n    /**\n     * Set collapsed state.\n     * @param {boolean} value - The collapsed state.\n     * @returns {void}\n     */\n    collapse(value) {\n        const promise = this.redraw();\n        if (!value) {\n            this.checkValidity(this.data, !this.pristine);\n        }\n        return promise;\n    }\n    /**\n     * Set collapsed state.\n     * @param {boolean} value - The collapsed state.\n     * @returns {void}\n     */\n    set collapsed(value) {\n        this._collapsed = value;\n        this.collapse(value);\n    }\n    /**\n     * Set visible state of parent and each child component.\n     * @param {boolean} value - The visible state.\n     * @returns {void}\n     */\n    set visible(value) {\n        // DO NOT CALL super here.  There is an issue where clearOnHide was getting triggered with\n        // subcomponents because the \"parentVisible\" flag was set to false when it should really be\n        // set to true.\n        const visibilityChanged = this._visible !== value;\n        this._visible = value;\n        const isVisible = this.visible;\n        const forceShow = this.shouldForceShow();\n        const forceHide = this.shouldForceHide();\n        this.components.forEach((component) => {\n            // Set the parent visibility first since we may have nested components within nested components\n            // and they need to be able to determine their visibility based on the parent visibility.\n            component.parentVisible = isVisible;\n            let visible;\n            if (component.hasCondition()) {\n                visible = !component.conditionallyHidden();\n            }\n            else {\n                visible = !component.component.hidden;\n            }\n            if (forceShow || visible) {\n                component.visible = true;\n            }\n            else if (forceHide || !isVisible || !visible) {\n                component.visible = false;\n            }\n            // If hiding a nested component, clear all errors below.\n            if (!component.visible) {\n                component.error = '';\n            }\n        });\n        if (visibilityChanged) {\n            this.redraw();\n        }\n    }\n    /**\n     * Get visible state.\n     * @returns {boolean} The visible state.\n     */\n    get visible() {\n        return super.visible;\n    }\n    /**\n     * Set parent visibility.\n     * @param {boolean} value - The parent visibility.\n     * @returns {void}\n     */\n    set parentVisible(value) {\n        super.parentVisible = value;\n        this.components.forEach(component => component.parentVisible = this.visible);\n    }\n    /**\n     * Get parent visibility.\n     * @returns {boolean} The parent visibility.\n     */\n    get parentVisible() {\n        return super.parentVisible;\n    }\n    /**\n     * Get the disabled state.\n     * @returns {boolean} - The disabled state.\n     */\n    get disabled() {\n        return super.disabled;\n    }\n    /**\n     * Set the disabled state.\n     * @param {boolean} disabled - The disabled state.\n     */\n    set disabled(disabled) {\n        super.disabled = disabled;\n        this.components.forEach((component) => component.parentDisabled = disabled);\n    }\n    /**\n     * Set parent disabled state.\n     * @param {boolean} value - The parent disabled state.\n     * @returns {void}\n     */\n    set parentDisabled(value) {\n        super.parentDisabled = value;\n        this.components.forEach(component => {\n            component.parentDisabled = this.disabled;\n        });\n    }\n    /**\n     * Get parent disabled state.\n     * @returns {boolean} The parent disabled state.\n     */\n    get parentDisabled() {\n        return super.parentDisabled;\n    }\n    /**\n     * Get ready state from all components.\n     * @returns {Promise<Array>} - The promise that resolves when all components are ready.\n     */\n    get ready() {\n        return Promise.all(this.getComponents().map(component => component.ready));\n    }\n    /**\n     * Get currentForm object.\n     * @returns {object} - The current form object.\n     */\n    get currentForm() {\n        return super.currentForm;\n    }\n    /**\n     * Set currentForm object.\n     * @param {object} instance - The current form object.\n     * @returns {void}\n     */\n    set currentForm(instance) {\n        super.currentForm = instance;\n        this.getComponents().forEach(component => {\n            component.currentForm = instance;\n        });\n    }\n    /**\n     * Get Row Index.\n     * @returns {number} - The row index.\n     */\n    get rowIndex() {\n        return this._rowIndex;\n    }\n    /**\n     * Set Row Index to row and update each component.\n     * @param {number} value - The row index.\n     * @returns {void}\n     */\n    set rowIndex(value) {\n        var _a, _b;\n        this._rowIndex = value;\n        this.paths = utils_1.default.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths) || {})), { dataIndex: value }));\n        this.eachComponent((component) => {\n            component.rowIndex = value;\n        });\n    }\n    /**\n     * Get Contextual data of the component.\n     * @returns {object} - The contextual data of the component.\n     * @override\n     */\n    componentContext() {\n        return this._data;\n    }\n    /**\n     * Get the data of the component.\n     * @returns {object} - The data of the component.\n     * @override\n     */\n    get data() {\n        return this._data;\n    }\n    /**\n     * Set the data of the component.\n     * @param {object} value - The data of the component.\n     * @returns {void}\n     */\n    set data(value) {\n        this._data = value;\n        this.eachComponent((component) => {\n            component.data = this.componentContext(component);\n        });\n    }\n    /**\n     * Get components array.\n     * @returns {Array} - The components array.\n     */\n    getComponents() {\n        return this.components || [];\n    }\n    /**\n     * Perform a deep iteration over every component, including those\n     * within other container based components.\n     * @param {Function} fn - Called for every component.\n     * @param {any} options - The options to include with this everyComponent call.\n     */\n    everyComponent(fn, options = {}) {\n        const components = this.getComponents();\n        lodash_1.default.each(components, (component, index) => {\n            if (fn(component, components, index) === false) {\n                return false;\n            }\n            if (typeof component.everyComponent === 'function') {\n                if (component.everyComponent(fn, options) === false) {\n                    return false;\n                }\n            }\n        });\n    }\n    /**\n     * Check if the component has a component.\n     * @param {import('@formio/core').Component} component - The component to check.\n     * @returns {boolean} - TRUE if the component has a component, FALSE otherwise.\n     */\n    hasComponent(component) {\n        let result = false;\n        this.everyComponent((comp) => {\n            if (comp === component) {\n                result = true;\n                return false;\n            }\n        });\n        return result;\n    }\n    /**\n     * Get the flattened components of this NestedComponent.\n     * @returns {object} - The flattened components of this NestedComponent.\n     */\n    flattenComponents() {\n        const result = {};\n        this.everyComponent((component) => {\n            result[component.component.flattenAs || component.key] = component;\n        });\n        return result;\n    }\n    /**\n     * Perform an iteration over each component within this container component.\n     * @param {Function} fn - Called for each component\n     */\n    eachComponent(fn) {\n        lodash_1.default.each(this.getComponents(), (component, index) => {\n            if (fn(component, index) === false) {\n                return false;\n            }\n        });\n    }\n    /**\n     * Returns a component provided a key. This performs a deep search within the component tree.\n     * @param {string} path - The path to the component.\n     * @returns {any} - The component that is located.\n     */\n    getComponent(path) {\n        var _a;\n        // If the component is found\n        if (!this.componentMatches) {\n            this.componentMatches = {};\n        }\n        if (this.componentMatches && this.componentMatches[path]) {\n            return this.componentMatches[path];\n        }\n        path = utils_1.default.getStringFromComponentPath(path);\n        const matches = {\n            path: undefined,\n            fullPath: undefined,\n            localPath: undefined,\n            fullLocalPath: undefined,\n            dataPath: undefined,\n            localDataPath: undefined,\n            key: undefined,\n        };\n        this.everyComponent((component) => {\n            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;\n            // All searches are relative to this component so replace this path from the child paths.\n            utils_1.default.componentMatches(component.component, {\n                path: (_b = (_a = component.paths) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.replace(new RegExp(`^${(_c = this.paths) === null || _c === void 0 ? void 0 : _c.path}\\\\.?`), ''),\n                fullPath: (_e = (_d = component.paths) === null || _d === void 0 ? void 0 : _d.fullPath) === null || _e === void 0 ? void 0 : _e.replace(new RegExp(`^${(_f = this.paths) === null || _f === void 0 ? void 0 : _f.fullPath}\\\\.?`), ''),\n                localPath: (_h = (_g = component.paths) === null || _g === void 0 ? void 0 : _g.localPath) === null || _h === void 0 ? void 0 : _h.replace(new RegExp(`^${(_j = this.paths) === null || _j === void 0 ? void 0 : _j.localPath}\\\\.?`), ''),\n                fullLocalPath: (_l = (_k = component.paths) === null || _k === void 0 ? void 0 : _k.fullLocalPath) === null || _l === void 0 ? void 0 : _l.replace(new RegExp(`^${(_m = this.paths) === null || _m === void 0 ? void 0 : _m.fullLocalPath}\\\\.?`), ''),\n                dataPath: (_p = (_o = component.paths) === null || _o === void 0 ? void 0 : _o.dataPath) === null || _p === void 0 ? void 0 : _p.replace(new RegExp(`^${(_q = this.paths) === null || _q === void 0 ? void 0 : _q.dataPath}\\\\.?`), ''),\n                localDataPath: (_s = (_r = component.paths) === null || _r === void 0 ? void 0 : _r.localDataPath) === null || _s === void 0 ? void 0 : _s.replace(new RegExp(`^${(_t = this.paths) === null || _t === void 0 ? void 0 : _t.localDataPath}\\\\.?`), ''),\n            }, path, this.rowIndex, matches, (type, match) => {\n                match.instance = component;\n                return match;\n            });\n        });\n        this.componentMatches[path] = (_a = utils_1.default.getBestMatch(matches)) === null || _a === void 0 ? void 0 : _a.instance;\n        return this.componentMatches[path];\n    }\n    /**\n     * Return a component provided the Id of the component.\n     * @param {string} id - The Id of the component.\n     * @param {Function} fn - Called with the component once it is retrieved.\n     * @returns {object} - The component retrieved.\n     */\n    getComponentById(id, fn = null) {\n        let comp = null;\n        this.everyComponent((component, components) => {\n            if (component.id === id) {\n                comp = component;\n                if (fn) {\n                    fn(component, components);\n                }\n                return false;\n            }\n        });\n        return comp;\n    }\n    /**\n     * Create a new component and add it to the components array.\n     * @param {import('@formio/core').Component} component - The component JSON schema to create.\n     * @param {object} options - The options to create the component with.\n     * @param {import('@formio/core').DataObject} data - The submission data object to house the data for this component.\n     * @param {import('@formio/core').Component} [before] - The component before which to add this component.\n     * @param {import('@formio/core').Component} [replacedComp] - The component to replace with this component.\n     * @returns {any} - The created component instance.\n     */\n    createComponent(component, options, data, before, replacedComp) {\n        if (!component) {\n            return;\n        }\n        options = options || this.options;\n        data = data || this.data;\n        options.parent = this;\n        options.parentVisible = this.visible;\n        options.root = (options === null || options === void 0 ? void 0 : options.root) || this.root || this;\n        options.localRoot = this.localRoot;\n        options.skipInit = true;\n        if (!(options.display === 'pdf' && this.builderMode)) {\n            component.id = utils_1.default.getRandomComponentId();\n        }\n        const comp = Components_1.default.create(component, options, data, true);\n        comp.init();\n        if (component.internal) {\n            return comp;\n        }\n        if (before) {\n            const index = lodash_1.default.findIndex(this.components, { id: before.id });\n            if (index !== -1) {\n                this.components.splice(index, 0, comp);\n            }\n            else {\n                this.components.push(comp);\n            }\n        }\n        else if (replacedComp) {\n            const index = lodash_1.default.findIndex(this.components, { id: replacedComp.id });\n            if (index !== -1) {\n                this.components[index] = comp;\n            }\n            else {\n                this.components.push(comp);\n            }\n        }\n        else {\n            this.components.push(comp);\n        }\n        return comp;\n    }\n    getContainer() {\n        return this.element;\n    }\n    get componentComponents() {\n        return this.component.components || [];\n    }\n    get nestedKey() {\n        return `nested-${this.key}`;\n    }\n    get templateName() {\n        return 'container';\n    }\n    init() {\n        this.components = this.components || [];\n        this.addComponents();\n        return super.init();\n    }\n    /**\n     * Add a new component instance to the components array.\n     * @param {import('@formio/core').DataObject} [data] - The Submission data for this component.\n     * @param {object} [options] - The options for this component.\n     */\n    addComponents(data, options) {\n        data = data || this.data;\n        this.components = this.components || [];\n        options = options || this.options;\n        if (options.components) {\n            this.components = options.components;\n        }\n        else {\n            const components = this.hook('addComponents', this.componentComponents, this) || [];\n            components.forEach((component) => this.addComponent(component, data));\n        }\n    }\n    /**\n     * Add a new component to the components array.\n     * @param {import('@formio/core').Component} component - The component JSON schema to add.\n     * @param {object} data - The submission data object to house the data for this component.\n     * @param {HTMLElement} before - A DOM element to insert this element before.\n     * @param {boolean} [noAdd] - A possibly extraneous boolean flag.\n     * @returns {any} - The created component instance.\n     */\n    addComponent(component, data = null, before = null, noAdd = false) {\n        data = data || this.data;\n        this.components = this.components || [];\n        component = this.hook('addComponent', component, data, before, noAdd);\n        const comp = this.createComponent(component, this.options, data, before ? before : null);\n        if (noAdd) {\n            return comp;\n        }\n        return comp;\n    }\n    beforeFocus() {\n        if (this.parent && 'beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n    }\n    render(children) {\n        // If already rendering, don't re-render.\n        return super.render(children || this.renderTemplate(this.templateName, {\n            children: !this.visible ? '' : this.renderComponents(),\n            nestedKey: this.nestedKey,\n            collapsed: this.options.pdf ? false : this.collapsed,\n        }));\n    }\n    renderComponents(components) {\n        components = components || this.getComponents();\n        const children = components.map(component => component.render());\n        return this.renderTemplate('components', {\n            children,\n            components,\n        });\n    }\n    attach(element) {\n        const superPromise = super.attach(element);\n        this.loadRefs(element, {\n            header: 'single',\n            collapsed: this.collapsed,\n            [this.nestedKey]: 'single',\n            messageContainer: 'single-scope',\n        });\n        let childPromise = Promise.resolve();\n        if (this.refs[this.nestedKey]) {\n            childPromise = this.attachComponents(this.refs[this.nestedKey]);\n        }\n        if (!this.visible) {\n            this.attachComponentsLogic();\n        }\n        if (this.component.collapsible && this.refs.header) {\n            this.addEventListener(this.refs.header, 'click', () => {\n                this.collapsed = !this.collapsed;\n            });\n            this.addEventListener(this.refs.header, 'keydown', (e) => {\n                if (e.keyCode === 13 || e.keyCode === 32) {\n                    e.preventDefault();\n                    this.collapsed = !this.collapsed;\n                }\n            });\n        }\n        return Promise.all([\n            superPromise,\n            childPromise,\n        ]);\n    }\n    /**\n     * Attach the logic to the components.\n     * @param {import('@formio/core').Component[]} components - The components to attach logic to.\n     */\n    attachComponentsLogic(components) {\n        components = components || this.components;\n        lodash_1.default.each(components, (comp) => {\n            comp.attachLogic();\n            if (lodash_1.default.isFunction(comp.attachComponentsLogic)) {\n                comp.attachComponentsLogic();\n            }\n        });\n    }\n    attachComponents(element, components, container) {\n        components = components || this.components;\n        container = container || this.component.components;\n        element = this.hook('attachComponents', element, components, container, this);\n        if (!element) {\n            // Return a non-resolving promise.\n            return (new Promise(() => { }));\n        }\n        let index = 0;\n        const promises = [];\n        Array.prototype.slice.call(element.children).forEach(child => {\n            if (!child.getAttribute('data-noattach') && components[index]) {\n                promises.push(components[index].attach(child));\n                index++;\n            }\n        });\n        return Promise.all(promises);\n    }\n    /**\n     * Remove a component from the components array and from the children object\n     * @param {import('@formio/core').Component} component - The component to remove from the components.\n     * @param {import('@formio/core').Component[]} components - An array of components to remove this component from.\n     * @param {boolean} [all] - If set to TRUE will cascade remove all components.\n     */\n    removeComponent(component, components, all = false) {\n        components = components || this.components;\n        component.destroy(all);\n        lodash_1.default.remove(components, { id: component.id });\n        if (this.componentsMap[component.path]) {\n            delete this.componentsMap[component.path];\n        }\n    }\n    /**\n     * Removes a component provided the API key of that component.\n     * @param {string} key - The API key of the component to remove.\n     * @param {Function} fn - Called once the component is removed.\n     * @returns {null|void} - Returns nothing if the component is not found.\n     */\n    removeComponentByKey(key, fn = null) {\n        const comp = this.getComponent(key, (component, components) => {\n            this.removeComponent(component, components);\n            if (fn) {\n                fn(component, components);\n            }\n        });\n        if (!comp) {\n            if (fn) {\n                fn(null);\n            }\n            return null;\n        }\n    }\n    /**\n     * Removes a component provided the Id of the component.\n     * @param {string} id - The Id of the component to remove.\n     * @param {Function} fn - Called when the component is removed.\n     * @returns {null|void} - Returns nothing if the component is not found.\n     */\n    removeComponentById(id, fn = null) {\n        const comp = this.getComponentById(id, (component, components) => {\n            this.removeComponent(component, components);\n            if (fn) {\n                fn(component, components);\n            }\n        });\n        if (!comp) {\n            if (fn) {\n                fn(null);\n            }\n            return null;\n        }\n    }\n    updateValue(value, flags = {}) {\n        return this.components.reduce((changed, comp) => {\n            return comp.updateValue(null, flags) || changed;\n        }, super.updateValue(value, flags));\n    }\n    shouldSkipValidation(data, row, flags) {\n        // Nested components with no input should not be validated.\n        if (!this.component.input) {\n            return true;\n        }\n        else {\n            return super.shouldSkipValidation(data, row, flags);\n        }\n    }\n    checkData(data, flags, row, components) {\n        if (this.builderMode) {\n            return true;\n        }\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        components = components && lodash_1.default.isArray(components) ? components : this.getComponents();\n        super.checkData(data, Object.assign({}, flags), row);\n        components.forEach((comp) => comp.checkData(data, Object.assign({}, flags), row));\n    }\n    checkConditions(data, flags, row) {\n        // check conditions of parent component first, because it may influence on visibility of it's children\n        const check = super.checkConditions(data, flags, row);\n        //row data of parent component not always corresponds to row of nested components, use comp.data as row data for children instead\n        this.getComponents().forEach(comp => comp.checkConditions(data, flags, comp.data));\n        return check;\n    }\n    clearOnHide(show) {\n        super.clearOnHide(show);\n        this.getComponents().forEach(component => component.clearOnHide(show));\n    }\n    /**\n     * Allow components to hook into the next page trigger to perform their own logic.\n     * @param {Function} next - The callback to continue to the next page.\n     * @returns {Promise} - A promise when the page has been processed.\n     */\n    beforePage(next) {\n        return Promise.all(this.getComponents().map((comp) => comp.beforePage(next)));\n    }\n    /**\n     * Allow components to hook into the submission to provide their own async data.\n     * @returns {Promise} - Returns a promise when the constituent beforeSubmit functions are complete.\n     */\n    beforeSubmit() {\n        return Promise.allSettled(this.getComponents().map((comp) => comp.beforeSubmit()));\n    }\n    calculateValue(data, flags, row) {\n        // Do not iterate into children and calculateValues if this nested component is conditionally hidden.\n        if (this.conditionallyHidden()) {\n            return false;\n        }\n        return this.getComponents().reduce((changed, comp) => comp.calculateValue(data, flags, row) || changed, super.calculateValue(data, flags, row));\n    }\n    isLastPage() {\n        return this.pages.length - 1 === this.page;\n    }\n    isValid(data, dirty) {\n        return this.getComponents().reduce((valid, comp) => comp.isValid(data, dirty) && valid, super.isValid(data, dirty));\n    }\n    validationProcessor({ scope, data, row, instance, paths }, flags) {\n        var _a;\n        const { dirty } = flags;\n        if (this.root && this.root.hasSubWizards && this.page !== this.root.page) {\n            instance = ((_a = this.componentsMap) === null || _a === void 0 ? void 0 : _a.hasOwnProperty(paths.dataPath))\n                ? this.componentsMap[paths.dataPath]\n                : this.getComponent(paths.dataPath);\n        }\n        if (!instance) {\n            return;\n        }\n        instance.checkComponentValidity(data, dirty, row, flags, scope.errors);\n        if (instance.processOwnValidation) {\n            scope.noRecurse = true;\n        }\n    }\n    /**\n     * Perform a validation on all child components of this nested component.\n     * @param {import('@formio/core').Component[]} components - The components to validate.\n     * @param {import('@formio/core').DataObject} data - The data to validate.\n     * @param {object} flags - The flags to use when validating.\n     * @returns {Promise<Array>|Array} - The errors if any exist.\n     */\n    validateComponents(components = null, data = null, flags = {}) {\n        components = components || this.component.components;\n        data = data || this.rootValue;\n        const { async, dirty, process } = flags;\n        const validationProcessorProcess = (context) => this.validationProcessor(context, flags);\n        const checkModalProcessorProcess = ({ instance, component, components }) => {\n            // If we just validated the last component, and there are errors from our parent, then we need to show a model of those errors.\n            if (instance &&\n                instance.parent &&\n                (component === components[components.length - 1]) &&\n                instance.parent.componentModal) {\n                instance.parent.checkModal(instance.parent.childErrors, dirty);\n            }\n        };\n        const processorContext = {\n            process: process || 'unknown',\n            components,\n            instances: this.componentsMap,\n            data: data,\n            local: !!flags.local,\n            scope: { errors: [] },\n            parent: this.component,\n            parentPaths: this.paths,\n            processors: [\n                {\n                    process: validationProcessorProcess,\n                    processSync: validationProcessorProcess\n                },\n                {\n                    process: checkModalProcessorProcess,\n                    processSync: checkModalProcessorProcess\n                }\n            ]\n        };\n        return async ? (0, process_1.process)(processorContext).then((scope) => scope.errors) : (0, process_1.processSync)(processorContext).errors;\n    }\n    /**\n     * Validate a nested component with data, or its own internal data.\n     * @param {import('@formio/core').DataObject} data - The data to validate.\n     * @param {object} flags - The flags to use when validating.\n     * @returns {Array} - The errors if any exist.\n     */\n    validate(data = null, flags = {}) {\n        data = data || this.rootValue;\n        return this.validateComponents(this.getComponents().map((component) => component.component), data, flags);\n    }\n    checkComponentValidity(data = null, dirty = false, row = null, flags = {}, allErrors = []) {\n        this.childErrors = [];\n        return super.checkComponentValidity(data, dirty, row, flags, allErrors);\n    }\n    /**\n     * Checks the validity of the component.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {*} row - The contextual row data for this component.\n     * @param {boolean} silentCheck - If the check should be silent and not set the error messages.\n     * @param {Array<any>} childErrors - An array of all errors that have occured so that it can be appended when another one occurs here.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    checkValidity(data = null, dirty = false, row = null, silentCheck = false, childErrors = []) {\n        childErrors.push(...this.validate(data, { dirty, silentCheck }));\n        return this.checkComponentValidity(data, dirty, row, { dirty, silentCheck }, childErrors) && childErrors.length === 0;\n    }\n    checkAsyncValidity(data = null, dirty = false, row = null, silentCheck = false) {\n        return this.ready.then(() => {\n            return this.validate(data, { dirty, silentCheck, async: true }).then((childErrors) => {\n                return this.checkComponentValidity(data, dirty, row, { dirty, silentCheck, async: true }, childErrors).then((valid) => {\n                    return valid && childErrors.length === 0;\n                });\n            });\n        });\n    }\n    setPristine(pristine) {\n        super.setPristine(pristine);\n        this.getComponents().forEach((comp) => comp.setPristine(pristine));\n    }\n    get isPristine() {\n        return this.pristine && this.getComponents().every((c) => c.isPristine);\n    }\n    get isDirty() {\n        return this.dirty && this.getComponents().every((c) => c.isDirty);\n    }\n    detach() {\n        this.components.forEach(component => {\n            component.detach();\n        });\n        super.detach();\n    }\n    clear() {\n        this.components.forEach(component => {\n            component.clear();\n        });\n        super.clear();\n    }\n    destroy(all = false) {\n        this.destroyComponents(all);\n        super.destroy(all);\n    }\n    destroyComponents(all = false) {\n        const components = this.getComponents().slice();\n        components.forEach((comp) => this.removeComponent(comp, this.components, all));\n        this.components = [];\n    }\n    get visibleErrors() {\n        return this.getComponents().reduce((errors, comp) => errors.concat(comp.visibleErrors || []), super.visibleErrors);\n    }\n    get errors() {\n        const thisErrors = super.errors;\n        return this.getComponents()\n            .reduce((errors, comp) => errors.concat(comp.errors || []), thisErrors)\n            .filter(err => err.level !== 'hidden');\n    }\n    getValue() {\n        return this.data;\n    }\n    resetValue() {\n        super.resetValue();\n        this.getComponents().forEach((comp) => comp.resetValue());\n        this.setPristine(true);\n    }\n    get dataReady() {\n        return Promise.all(this.getComponents().map((component) => component.dataReady));\n    }\n    setNestedValue(component, value, flags = {}) {\n        component._data = this.componentContext(component);\n        if (component.type === 'button') {\n            return false;\n        }\n        if (component.type === 'components') {\n            if ((component.tree || component.hasInput) && component.hasValue(value)) {\n                return component.setValue(lodash_1.default.get(value, component.key), flags);\n            }\n            return component.setValue(value, flags);\n        }\n        else if (value && component.hasValue(value)) {\n            return component.setValue(lodash_1.default.get(value, component.key), flags);\n        }\n        else if ((!this.rootPristine || component.visible) && (flags.resetValue || component.shouldAddDefaultValue)) {\n            flags.noValidate = !flags.dirty;\n            flags.resetValue = true;\n            return component.setValue(component.defaultValue, flags);\n        }\n    }\n    setValue(value, flags = {}) {\n        if (!value) {\n            return false;\n        }\n        // If the value is equal to the empty value, then this means we need to reset the values.\n        if (lodash_1.default.isEqual(value, this.emptyValue)) {\n            // TO-DO: For a future major release, we need to investigate removing the need for the\n            // \"resetValue\" flag. This seems like a hack that is no longer necessary and the renderer\n            // may behave more deterministically without it.\n            flags.resetValue = true;\n        }\n        return this.getComponents().reduce((changed, component) => {\n            return this.setNestedValue(component, value, flags, changed) || changed;\n        }, false);\n    }\n    get lazyLoad() {\n        var _a;\n        return (_a = this.component.lazyLoad) !== null && _a !== void 0 ? _a : false;\n    }\n}\nexports[\"default\"] = NestedComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/nested/NestedComponent.js?");
 
 /***/ }),
 
@@ -5301,7 +5301,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 */ \"./lib/cjs/utils/index.js\");\nconst downloadjs_1 = __importDefault(__webpack_require__(/*! downloadjs */ \"./node_modules/downloadjs/download.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst fileProcessor_1 = __importDefault(__webpack_require__(/*! ../../providers/processor/fileProcessor */ \"./lib/cjs/providers/processor/fileProcessor.js\"));\nconst browser_md5_file_1 = __importDefault(__webpack_require__(/*! browser-md5-file */ \"./node_modules/browser-md5-file/dist/index.umd.js\"));\nlet Camera;\nlet webViewCamera = 'undefined' !== typeof window ? navigator.camera : Camera;\n// canvas.toBlob polyfill.\nlet htmlCanvasElement;\nif (typeof window !== 'undefined') {\n    htmlCanvasElement = window.HTMLCanvasElement;\n}\nelse if (typeof __webpack_require__.g !== 'undefined') {\n    htmlCanvasElement = __webpack_require__.g.HTMLCanvasElement;\n}\nif (htmlCanvasElement && !htmlCanvasElement.prototype.toBlob) {\n    Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {\n        value: function (callback, type, quality) {\n            var canvas = this;\n            setTimeout(function () {\n                var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]), len = binStr.length, arr = new Uint8Array(len);\n                for (var i = 0; i < len; i++) {\n                    arr[i] = binStr.charCodeAt(i);\n                }\n                callback(new Blob([arr], { type: type || 'image/png' }));\n            });\n        }\n    });\n}\nconst createRandomString = () => Math.random().toString(36).substring(2, 15);\nclass FileComponent extends Field_1.default {\n    static schema(...extend) {\n        return Field_1.default.schema({\n            type: 'file',\n            label: 'Upload',\n            key: 'file',\n            image: false,\n            privateDownload: false,\n            imageSize: '200',\n            filePattern: '*',\n            fileMinSize: '0KB',\n            fileMaxSize: '1GB',\n            uploadOnly: false,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'File',\n            group: 'premium',\n            icon: 'file',\n            documentation: '/userguide/form-building/premium-components#file',\n            weight: 100,\n            schema: FileComponent.schema(),\n        };\n    }\n    static get serverConditionSettings() {\n        return FileComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEmpty', 'isNotEmpty'] });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];\n    }\n    init() {\n        super.init();\n        webViewCamera = navigator.camera || Camera;\n        const fileReaderSupported = (typeof FileReader !== 'undefined');\n        const formDataSupported = typeof window !== 'undefined' ? Boolean(window.FormData) : false;\n        const progressSupported = (typeof window !== 'undefined' && window.XMLHttpRequest) ? ('upload' in new XMLHttpRequest) : false;\n        this.support = {\n            filereader: fileReaderSupported,\n            formdata: formDataSupported,\n            hasWarning: !fileReaderSupported || !formDataSupported || !progressSupported,\n            progress: progressSupported,\n        };\n        this.cameraMode = false;\n        this.fileDropHidden = false;\n        this.filesToSync = {\n            filesToUpload: [],\n            filesToDelete: [],\n        };\n        this.isSyncing = false;\n        this.abortUploads = [];\n    }\n    get dataReady() {\n        return this.filesReady || Promise.resolve();\n    }\n    get defaultSchema() {\n        return FileComponent.schema();\n    }\n    loadImage(fileInfo) {\n        if (this.component.privateDownload) {\n            fileInfo.private = true;\n        }\n        return this.fileService.downloadFile(fileInfo).then((result) => result.url);\n    }\n    get emptyValue() {\n        return [];\n    }\n    getValueAsString(value) {\n        if (lodash_1.default.isArray(value)) {\n            return lodash_1.default.map(value, 'originalName').join(', ');\n        }\n        return lodash_1.default.get(value, 'originalName', '');\n    }\n    getValue() {\n        return this.dataValue;\n    }\n    get defaultValue() {\n        const value = super.defaultValue;\n        return Array.isArray(value) ? value : [];\n    }\n    get hasTypes() {\n        return this.component.fileTypes &&\n            Array.isArray(this.component.fileTypes) &&\n            this.component.fileTypes.length !== 0 &&\n            (this.component.fileTypes[0].label !== '' || this.component.fileTypes[0].value !== '');\n    }\n    get fileDropHidden() {\n        return this._fileBrowseHidden;\n    }\n    set fileDropHidden(value) {\n        if (typeof value !== 'boolean' || this.component.multiple) {\n            return;\n        }\n        this._fileBrowseHidden = value;\n    }\n    get shouldSyncFiles() {\n        return Boolean(this.filesToSync.filesToDelete.length || this.filesToSync.filesToUpload.length);\n    }\n    get autoSync() {\n        // Disable autoSync for now\n        return false;\n        // return _.get(this, 'component.autoSync', false);\n    }\n    get columnsSize() {\n        const actionsColumn = this.disabled ? 0 : this.autoSync ? 2 : 1;\n        const typeColumn = this.hasTypes ? 2 : 0;\n        const sizeColumn = 2;\n        const nameColumn = 12 - actionsColumn - typeColumn - sizeColumn;\n        return {\n            name: nameColumn,\n            size: sizeColumn,\n            type: typeColumn,\n            actions: actionsColumn,\n        };\n    }\n    render() {\n        const { filesToDelete, filesToUpload } = this.filesToSync;\n        return super.render(this.renderTemplate('file', {\n            fileSize: this.fileSize,\n            files: this.dataValue || [],\n            filesToDelete,\n            filesToUpload,\n            disabled: this.disabled,\n            support: this.support,\n            fileDropHidden: this.fileDropHidden,\n            showSyncButton: this.autoSync && (filesToDelete.length || filesToUpload.length),\n            isSyncing: this.isSyncing,\n            columns: this.columnsSize,\n        }));\n    }\n    getVideoStream(constraints) {\n        return navigator.mediaDevices.getUserMedia({\n            video: Object.assign({ width: { min: 640, ideal: 1920 }, height: { min: 360, ideal: 1080 }, aspectRatio: { ideal: 16 / 9 } }, constraints),\n            audio: false,\n        });\n    }\n    stopVideoStream(videoStream) {\n        videoStream.getVideoTracks().forEach((track) => track.stop());\n    }\n    getFrame(videoPlayer) {\n        return new Promise((resolve) => {\n            const canvas = document.createElement('canvas');\n            canvas.height = videoPlayer.videoHeight;\n            canvas.width = videoPlayer.videoWidth;\n            const context = canvas.getContext('2d');\n            context.drawImage(videoPlayer, 0, 0);\n            canvas.toBlob(resolve);\n        });\n    }\n    startVideo() {\n        this.getVideoStream()\n            .then((stream) => {\n            this.videoStream = stream;\n            const { videoPlayer } = this.refs;\n            if (!videoPlayer) {\n                console.warn('Video player not found in template.');\n                this.cameraMode = false;\n                this.redraw();\n                return;\n            }\n            videoPlayer.srcObject = stream;\n            const width = parseInt(this.component.webcamSize) || 320;\n            videoPlayer.setAttribute('width', width);\n            videoPlayer.play();\n        })\n            .catch((err) => {\n            console.error(err);\n            this.cameraMode = false;\n            this.redraw();\n        });\n    }\n    stopVideo() {\n        if (this.videoStream) {\n            this.stopVideoStream(this.videoStream);\n            this.videoStream = null;\n        }\n    }\n    takePicture() {\n        const { videoPlayer } = this.refs;\n        if (!videoPlayer) {\n            console.warn('Video player not found in template.');\n            this.cameraMode = false;\n            this.redraw();\n            return;\n        }\n        this.getFrame(videoPlayer)\n            .then((frame) => {\n            frame.name = `photo-${Date.now()}.png`;\n            this.handleFilesToUpload([frame]);\n            this.cameraMode = false;\n            this.redraw();\n        });\n    }\n    browseFiles(attrs = {}) {\n        return new Promise((resolve) => {\n            const fileInput = this.ce('input', Object.assign({ type: 'file', style: 'height: 0; width: 0; visibility: hidden;', tabindex: '-1' }, attrs));\n            document.body.appendChild(fileInput);\n            fileInput.addEventListener('change', () => {\n                resolve(fileInput.files);\n                document.body.removeChild(fileInput);\n            }, true);\n            // There is no direct way to trigger a file dialog. To work around this, create an input of type file and trigger\n            // a click event on it.\n            if (typeof fileInput.trigger === 'function') {\n                fileInput.trigger('click');\n            }\n            else {\n                fileInput.click();\n            }\n        });\n    }\n    set cameraMode(value) {\n        this._cameraMode = value;\n        if (value) {\n            this.startVideo();\n        }\n        else {\n            this.stopVideo();\n        }\n    }\n    get cameraMode() {\n        return this._cameraMode;\n    }\n    get useWebViewCamera() {\n        return this.imageUpload && webViewCamera;\n    }\n    get imageUpload() {\n        return Boolean(this.component.image);\n    }\n    get browseOptions() {\n        const options = {};\n        if (this.component.multiple) {\n            options.multiple = true;\n        }\n        if (this.component.capture) {\n            options.capture = this.component.capture;\n        }\n        //use \"accept\" attribute only for desktop devices because of its limited support by mobile browsers\n        const filePattern = this.component.filePattern.trim() || '';\n        if (!this.isMobile.any) {\n            const imagesPattern = 'image/*';\n            if (this.imageUpload && (!filePattern || filePattern === '*')) {\n                options.accept = imagesPattern;\n            }\n            else if (this.imageUpload && !filePattern.includes(imagesPattern)) {\n                options.accept = `${imagesPattern},${filePattern}`;\n            }\n            else {\n                options.accept = filePattern;\n            }\n        }\n        // if input capture is set, we need the \"accept\" attribute to determine which device to launch\n        else if (this.component.capture) {\n            if (filePattern.includes('video')) {\n                options.accept = 'video/*';\n            }\n            else if (filePattern.includes('audio')) {\n                options.accept = 'audio/*';\n            }\n            else {\n                options.accept = 'image/*';\n            }\n        }\n        return options;\n    }\n    get actions() {\n        return {\n            abort: this.abortRequest.bind(this),\n        };\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            fileDrop: 'single',\n            fileBrowse: 'single',\n            galleryButton: 'single',\n            cameraButton: 'single',\n            takePictureButton: 'single',\n            toggleCameraMode: 'single',\n            videoPlayer: 'single',\n            fileLink: 'multiple',\n            removeLink: 'multiple',\n            fileToSyncRemove: 'multiple',\n            fileImage: 'multiple',\n            fileType: 'multiple',\n            fileProcessingLoader: 'single',\n            syncNow: 'single',\n            restoreFile: 'multiple',\n            progress: 'multiple',\n        });\n        // Ensure we have an empty input refs. We need this for the setValue method to redraw the control when it is set.\n        this.refs.input = [];\n        const superAttach = super.attach(element);\n        if (this.refs.fileDrop) {\n            // if (!this.statuses.length) {\n            //   this.refs.fileDrop.removeAttribute('hidden');\n            // }\n            const _this = this;\n            this.addEventListener(this.refs.fileDrop, 'dragover', function (event) {\n                this.className = 'fileSelector fileDragOver';\n                event.preventDefault();\n            });\n            this.addEventListener(this.refs.fileDrop, 'dragleave', function (event) {\n                this.className = 'fileSelector';\n                event.preventDefault();\n            });\n            this.addEventListener(this.refs.fileDrop, 'drop', function (event) {\n                this.className = 'fileSelector';\n                event.preventDefault();\n                _this.handleFilesToUpload(event.dataTransfer.files);\n            });\n        }\n        this.addEventListener(element, 'click', (event) => {\n            this.handleAction(event);\n        });\n        if (this.refs.fileBrowse) {\n            this.addEventListener(this.refs.fileBrowse, 'click', (event) => {\n                event.preventDefault();\n                this.browseFiles(this.browseOptions)\n                    .then((files) => {\n                    this.handleFilesToUpload(files);\n                });\n            });\n        }\n        this.refs.fileLink.forEach((fileLink, index) => {\n            this.addEventListener(fileLink, 'click', (event) => {\n                event.preventDefault();\n                this.getFile(this.dataValue[index]);\n            });\n        });\n        this.refs.removeLink.forEach((removeLink, index) => {\n            this.addEventListener(removeLink, 'click', (event) => {\n                event.preventDefault();\n                const fileInfo = this.dataValue[index];\n                this.handleFileToRemove(fileInfo);\n            });\n        });\n        this.refs.fileToSyncRemove.forEach((fileToSyncRemove, index) => {\n            this.addEventListener(fileToSyncRemove, 'click', (event) => {\n                event.preventDefault();\n                this.filesToSync.filesToUpload.splice(index, 1);\n                this.redraw();\n            });\n        });\n        this.refs.restoreFile.forEach((fileToRestore, index) => {\n            this.addEventListener(fileToRestore, 'click', (event) => {\n                event.preventDefault();\n                const fileInfo = this.filesToSync.filesToDelete[index];\n                delete fileInfo.status;\n                delete fileInfo.message;\n                this.filesToSync.filesToDelete.splice(index, 1);\n                this.dataValue.push(fileInfo);\n                this.triggerChange();\n                this.redraw();\n            });\n        });\n        if (this.refs.galleryButton && webViewCamera) {\n            this.addEventListener(this.refs.galleryButton, 'click', (event) => {\n                event.preventDefault();\n                webViewCamera.getPicture((success) => {\n                    window.resolveLocalFileSystemURL(success, (fileEntry) => {\n                        fileEntry.file((file) => {\n                            const reader = new FileReader();\n                            reader.onloadend = (evt) => {\n                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });\n                                blob.name = file.name;\n                                this.handleFilesToUpload([blob]);\n                            };\n                            reader.readAsArrayBuffer(file);\n                        });\n                    });\n                }, (err) => {\n                    console.error(err);\n                }, {\n                    sourceType: webViewCamera.PictureSourceType.PHOTOLIBRARY,\n                });\n            });\n        }\n        if (this.refs.cameraButton && webViewCamera) {\n            this.addEventListener(this.refs.cameraButton, 'click', (event) => {\n                event.preventDefault();\n                webViewCamera.getPicture((success) => {\n                    window.resolveLocalFileSystemURL(success, (fileEntry) => {\n                        fileEntry.file((file) => {\n                            const reader = new FileReader();\n                            reader.onloadend = (evt) => {\n                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });\n                                blob.name = file.name;\n                                this.handleFilesToUpload([blob]);\n                            };\n                            reader.readAsArrayBuffer(file);\n                        });\n                    });\n                }, (err) => {\n                    console.error(err);\n                }, {\n                    sourceType: webViewCamera.PictureSourceType.CAMERA,\n                    encodingType: webViewCamera.EncodingType.PNG,\n                    mediaType: webViewCamera.MediaType.PICTURE,\n                    saveToPhotoAlbum: true,\n                    correctOrientation: false,\n                });\n            });\n        }\n        if (this.refs.takePictureButton) {\n            this.addEventListener(this.refs.takePictureButton, 'click', (event) => {\n                event.preventDefault();\n                this.takePicture();\n            });\n        }\n        if (this.refs.toggleCameraMode) {\n            this.addEventListener(this.refs.toggleCameraMode, 'click', (event) => {\n                event.preventDefault();\n                this.cameraMode = !this.cameraMode;\n                this.redraw();\n            });\n        }\n        this.refs.fileType.forEach((fileType, index) => {\n            if (!this.dataValue[index]) {\n                return;\n            }\n            this.dataValue[index].fileType = this.dataValue[index].fileType || this.component.fileTypes[0].label;\n            this.addEventListener(fileType, 'change', (event) => {\n                event.preventDefault();\n                const fileType = this.component.fileTypes.find((typeObj) => typeObj.value === event.target.value);\n                this.dataValue[index].fileType = fileType.label;\n            });\n        });\n        this.addEventListener(this.refs.syncNow, 'click', (event) => {\n            event.preventDefault();\n            this.syncFiles();\n        });\n        const fileService = this.fileService;\n        if (fileService) {\n            const loadingImages = [];\n            this.filesReady = new Promise((resolve, reject) => {\n                this.filesReadyResolve = resolve;\n                this.filesReadyReject = reject;\n            });\n            this.refs.fileImage.forEach((image, index) => {\n                loadingImages.push(this.loadImage(this.dataValue[index]).then((url) => (image.src = url)));\n            });\n            if (loadingImages.length) {\n                Promise.all(loadingImages).then(() => {\n                    this.filesReadyResolve();\n                }).catch(() => this.filesReadyReject());\n            }\n            else {\n                this.filesReadyResolve();\n            }\n        }\n        return superAttach;\n    }\n    /* eslint-disable max-len */\n    fileSize(a, b, c, d, e) {\n        return `${(b = Math, c = b.log, d = 1024, e = c(a) / c(d) | 0, a / b.pow(d, e)).toFixed(2)} ${e ? `${'kMGTPEZY'[--e]}B` : 'Bytes'}`;\n    }\n    /* eslint-enable max-len */\n    /* eslint-disable max-depth */\n    globStringToRegex(str) {\n        str = str.replace(/\\s/g, '');\n        let regexp = '', excludes = [];\n        if (str.length > 2 && str[0] === '/' && str[str.length - 1] === '/') {\n            regexp = str.substring(1, str.length - 1);\n        }\n        else {\n            const split = str.split(',');\n            if (split.length > 1) {\n                for (let i = 0; i < split.length; i++) {\n                    const r = this.globStringToRegex(split[i]);\n                    if (r.regexp) {\n                        regexp += `(${r.regexp})`;\n                        if (i < split.length - 1) {\n                            regexp += '|';\n                        }\n                    }\n                    else {\n                        excludes = excludes.concat(r.excludes);\n                    }\n                }\n            }\n            else {\n                if (str.startsWith('!')) {\n                    excludes.push(`^((?!${this.globStringToRegex(str.substring(1)).regexp}).)*$`);\n                }\n                else {\n                    if (str.startsWith('.')) {\n                        str = `*${str}`;\n                    }\n                    regexp = `^${str.replace(new RegExp('[.\\\\\\\\+*?\\\\[\\\\^\\\\]$(){}=!<>|:\\\\-]', 'g'), '\\\\$&')}$`;\n                    regexp = regexp.replace(/\\\\\\*/g, '.*').replace(/\\\\\\?/g, '.');\n                }\n            }\n        }\n        return { regexp, excludes };\n    }\n    /* eslint-enable max-depth */\n    translateScalars(str) {\n        if (typeof str === 'string') {\n            if (str.search(/kb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024);\n            }\n            if (str.search(/mb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024 * 1024);\n            }\n            if (str.search(/gb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024 * 1024 * 1024);\n            }\n            if (str.search(/b/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1));\n            }\n            if (str.search(/s/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1));\n            }\n            if (str.search(/m/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1) * 60);\n            }\n            if (str.search(/h/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1) * 3600);\n            }\n        }\n        return str;\n    }\n    validatePattern(file, val) {\n        if (!val) {\n            return true;\n        }\n        const pattern = this.globStringToRegex(val);\n        let valid = true;\n        if (pattern.regexp && pattern.regexp.length) {\n            const regexp = new RegExp(pattern.regexp, 'i');\n            valid = (!lodash_1.default.isNil(file.type) && regexp.test(file.type)) ||\n                (!lodash_1.default.isNil(file.name) && regexp.test(file.name));\n        }\n        valid = pattern.excludes.reduce((result, excludePattern) => {\n            const exclude = new RegExp(excludePattern, 'i');\n            return result && (lodash_1.default.isNil(file.type) || exclude.test(file.type)) &&\n                (lodash_1.default.isNil(file.name) || exclude.test(file.name));\n        }, valid);\n        return valid;\n    }\n    validateMinSize(file, val) {\n        return file.size + 0.1 >= this.translateScalars(val);\n    }\n    validateMaxSize(file, val) {\n        return file.size - 0.1 <= this.translateScalars(val);\n    }\n    abortRequest(id) {\n        const abortUpload = this.abortUploads.find(abortUpload => abortUpload.id === id);\n        if (abortUpload) {\n            abortUpload.abort();\n        }\n    }\n    handleAction(event) {\n        const target = event.target;\n        if (!target.id) {\n            return;\n        }\n        const [action, id] = target.id.split('-');\n        if (!action || !id || !this.actions[action]) {\n            return;\n        }\n        this.actions[action](id);\n    }\n    getFileName(file) {\n        return (0, utils_1.uniqueName)(file.name, this.component.fileNameTemplate, this.evalContext());\n    }\n    getInitFileToSync(file) {\n        const escapedFileName = file.name ? file.name.replaceAll('<', '&lt;').replaceAll('>', '&gt;') : file.name;\n        return {\n            id: createRandomString(),\n            // Get a unique name for this file to keep file collisions from occurring.\n            dir: this.interpolate(this.component.dir || ''),\n            name: this.getFileName(file),\n            originalName: escapedFileName,\n            fileKey: this.component.fileKey || 'file',\n            storage: this.component.storage,\n            options: this.component.options,\n            file,\n            size: file.size,\n            status: 'info',\n            message: this.t('Processing file. Please wait...'),\n            hash: '',\n        };\n    }\n    handleSubmissionRevisions(file) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (this.root.form.submissionRevisions !== 'true') {\n                return '';\n            }\n            const bmf = new browser_md5_file_1.default();\n            const hash = yield new Promise((resolve, reject) => {\n                this.emit('fileUploadingStart');\n                bmf.md5(file, (err, md5) => {\n                    if (err) {\n                        return reject(err);\n                    }\n                    return resolve(md5);\n                });\n            });\n            this.emit('fileUploadingEnd');\n            return hash;\n        });\n    }\n    validateFileName(file) {\n        // Check if file with the same name is being uploaded\n        const fileWithSameNameUploading = this.filesToSync.filesToUpload\n            .some(fileToSync => { var _a; return ((_a = fileToSync.file) === null || _a === void 0 ? void 0 : _a.name) === file.name; });\n        const fileWithSameNameUploaded = lodash_1.default.some(this.dataValue, fileStatus => fileStatus.originalName === file.name);\n        return fileWithSameNameUploaded || fileWithSameNameUploading\n            ? {\n                status: 'error',\n                message: this.t(`File with the same name is already ${fileWithSameNameUploading ? 'being ' : ''}uploaded`),\n            }\n            : {};\n    }\n    validateFileSettings(file) {\n        // Check file pattern\n        if (this.component.filePattern && !this.validatePattern(file, this.component.filePattern)) {\n            return {\n                status: 'error',\n                message: this.t('File is the wrong type; it must be {{ pattern }}', {\n                    pattern: this.component.filePattern,\n                }),\n            };\n        }\n        // Check file minimum size\n        if (this.component.fileMinSize && !this.validateMinSize(file, this.component.fileMinSize)) {\n            return {\n                status: 'error',\n                message: this.t('File is too small; it must be at least {{ size }}', {\n                    size: this.component.fileMinSize,\n                }),\n            };\n        }\n        // Check file maximum size\n        if (this.component.fileMaxSize && !this.validateMaxSize(file, this.component.fileMaxSize)) {\n            return {\n                status: 'error',\n                message: this.t('File is too big; it must be at most {{ size }}', {\n                    size: this.component.fileMaxSize,\n                }),\n            };\n        }\n        return {};\n    }\n    validateFileService() {\n        const { fileService } = this;\n        return !fileService\n            ? {\n                status: 'error',\n                message: this.t('File Service not provided.'),\n            }\n            : {};\n    }\n    validateFile(file) {\n        const fileServiceValidation = this.validateFileService();\n        if (fileServiceValidation.status === 'error') {\n            return fileServiceValidation;\n        }\n        const fileNameValidation = this.validateFileName(file);\n        if (fileNameValidation.status === 'error') {\n            return fileNameValidation;\n        }\n        return this.validateFileSettings(file);\n    }\n    getGroupPermissions() {\n        let groupKey = null;\n        let groupPermissions = null;\n        //Iterate through form components to find group resource if one exists\n        this.root.everyComponent((element) => {\n            var _a, _b;\n            if (((_a = element.component) === null || _a === void 0 ? void 0 : _a.submissionAccess) || ((_b = element.component) === null || _b === void 0 ? void 0 : _b.defaultPermission)) {\n                groupPermissions = !element.component.submissionAccess ? [\n                    {\n                        type: element.component.defaultPermission,\n                        roles: [],\n                    },\n                ] : element.component.submissionAccess;\n                groupPermissions.forEach((permission) => {\n                    groupKey = ['admin', 'write', 'create'].includes(permission.type) ? element.component.key : null;\n                });\n            }\n        });\n        return { groupKey, groupPermissions };\n    }\n    triggerFileProcessor(file) {\n        return __awaiter(this, void 0, void 0, function* () {\n            let processedFile = null;\n            if (this.root.options.fileProcessor) {\n                try {\n                    if (this.refs.fileProcessingLoader) {\n                        this.refs.fileProcessingLoader.style.display = 'block';\n                    }\n                    const fileProcessorHandler = (0, fileProcessor_1.default)(this.fileService, this.root.options.fileProcessor);\n                    processedFile = yield fileProcessorHandler(file, this.component.properties);\n                }\n                catch (err) {\n                    this.fileDropHidden = false;\n                    return {\n                        status: 'error',\n                        message: this.t('File processing has been failed.'),\n                    };\n                }\n                finally {\n                    if (this.refs.fileProcessingLoader) {\n                        this.refs.fileProcessingLoader.style.display = 'none';\n                    }\n                }\n            }\n            return {\n                file: processedFile,\n            };\n        });\n    }\n    prepareFileToUpload(file) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const fileToSync = this.getInitFileToSync(file);\n            fileToSync.hash = yield this.handleSubmissionRevisions(file);\n            const { status, message } = this.validateFile(file);\n            if (status === 'error') {\n                fileToSync.isValidationError = true;\n                fileToSync.status = status;\n                fileToSync.message = message;\n                return this.filesToSync.filesToUpload.push(fileToSync);\n            }\n            if (this.component.privateDownload) {\n                file.private = true;\n            }\n            const { groupKey, groupPermissions } = this.getGroupPermissions();\n            const processedFile = yield this.triggerFileProcessor(file);\n            if (processedFile.status === 'error') {\n                fileToSync.status === 'error';\n                fileToSync.message = processedFile.message;\n                return this.filesToSync.filesToUpload.push(fileToSync);\n            }\n            if (this.autoSync) {\n                fileToSync.message = this.t('Ready to be uploaded into storage');\n            }\n            this.filesToSync.filesToUpload.push(Object.assign(Object.assign({}, fileToSync), { message: fileToSync.message, file: processedFile.file || file, url: this.interpolate(this.component.url, { file: fileToSync }), groupPermissions, groupResourceId: groupKey ? this.currentForm.submission.data[groupKey]._id : null }));\n        });\n    }\n    prepareFilesToUpload(files) {\n        return __awaiter(this, void 0, void 0, function* () {\n            // Only allow one upload if not multiple.\n            if (!this.component.multiple) {\n                files = Array.prototype.slice.call(files, 0, 1);\n            }\n            if (this.component.storage && files && files.length) {\n                this.fileDropHidden = true;\n                return Promise.all([...files].map((file) => __awaiter(this, void 0, void 0, function* () {\n                    yield this.prepareFileToUpload(file);\n                    this.redraw();\n                })));\n            }\n            else {\n                return Promise.resolve();\n            }\n        });\n    }\n    handleFilesToUpload(files) {\n        return __awaiter(this, void 0, void 0, function* () {\n            yield this.prepareFilesToUpload(files);\n            if (!this.autoSync) {\n                yield this.syncFiles();\n            }\n        });\n    }\n    prepareFileToDelete(fileInfo) {\n        this.filesToSync.filesToDelete.push(Object.assign(Object.assign({}, fileInfo), { status: 'info', message: this.autoSync\n                ? this.t('Ready to be removed from storage')\n                : this.t('Preparing file to remove') }));\n        const index = this.dataValue.findIndex(file => file.name === fileInfo.name);\n        this.splice(index);\n        this.redraw();\n    }\n    handleFileToRemove(fileInfo) {\n        this.prepareFileToDelete(fileInfo);\n        if (!this.autoSync) {\n            this.syncFiles();\n        }\n    }\n    deleteFile(fileInfo) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const { options = {} } = this.component;\n            if (fileInfo && (['url', 'indexeddb', 's3', 'azure', 'googledrive'].includes(this.component.storage))) {\n                const { fileService } = this;\n                if (fileService && typeof fileService.deleteFile === 'function') {\n                    return yield fileService.deleteFile(fileInfo, options);\n                }\n                else {\n                    const formio = this.options.formio || (this.root && this.root.formio);\n                    if (formio) {\n                        return yield formio.makeRequest('', fileInfo.url, 'delete');\n                    }\n                }\n            }\n        });\n    }\n    delete() {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!this.filesToSync.filesToDelete.length) {\n                return Promise.resolve();\n            }\n            return yield Promise.all(this.filesToSync.filesToDelete.map((fileToSync) => __awaiter(this, void 0, void 0, function* () {\n                try {\n                    if (fileToSync.isValidationError) {\n                        return { fileToSync };\n                    }\n                    yield this.deleteFile(fileToSync);\n                    fileToSync.status = 'success';\n                    fileToSync.message = this.t('Succefully removed');\n                }\n                catch (response) {\n                    fileToSync.status = 'error';\n                    fileToSync.message = typeof response === 'string' ? response : response.toString();\n                }\n                finally {\n                    this.redraw();\n                }\n                return { fileToSync };\n            })));\n        });\n    }\n    updateProgress(fileInfo, progressEvent) {\n        fileInfo.progress = parseInt(100.0 * progressEvent.loaded / progressEvent.total);\n        if (fileInfo.status !== 'progress') {\n            fileInfo.status = 'progress';\n            delete fileInfo.message;\n            this.redraw();\n        }\n        else {\n            const progress = Array.prototype.find.call(this.refs.progress, progressElement => progressElement.id === fileInfo.id);\n            progress.innerHTML = `<span class=\"visually-hidden\">${fileInfo.progress}% ${this.t('Complete')}</span>`;\n            progress.style.width = `${fileInfo.progress}%`;\n            progress.ariaValueNow = fileInfo.progress.toString();\n        }\n    }\n    getMultipartOptions(fileToSync) {\n        let count = 0;\n        return this.component.useMultipartUpload && this.component.multipart ? Object.assign(Object.assign({}, this.component.multipart), { progressCallback: (total) => {\n                count++;\n                fileToSync.status = 'progress';\n                fileToSync.progress = parseInt(100 * count / total);\n                delete fileToSync.message;\n                this.redraw();\n            }, changeMessage: (message) => {\n                fileToSync.message = message;\n                this.redraw();\n            } }) : false;\n    }\n    uploadFile(fileToSync) {\n        return __awaiter(this, void 0, void 0, function* () {\n            return yield this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, \n            // Progress callback\n            this.updateProgress.bind(this, fileToSync), fileToSync.url, fileToSync.options, fileToSync.fileKey, fileToSync.groupPermissions, fileToSync.groupResourceId, () => {\n                this.emit('fileUploadingStart');\n            }, \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                    this.emit('fileUploadingEnd');\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('fileUploadingEnd');\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 */ \"./lib/cjs/utils/index.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        // Disable autoSync for now\n        return false;\n        // return _.get(this, 'component.autoSync', false);\n    }\n    get columnsSize() {\n        const actionsColumn = this.disabled ? 0 : this.autoSync ? 2 : 1;\n        const typeColumn = this.hasTypes ? 2 : 0;\n        const sizeColumn = 2;\n        const nameColumn = 12 - actionsColumn - typeColumn - sizeColumn;\n        return {\n            name: nameColumn,\n            size: sizeColumn,\n            type: typeColumn,\n            actions: actionsColumn,\n        };\n    }\n    render() {\n        const { filesToDelete, filesToUpload } = this.filesToSync;\n        return super.render(this.renderTemplate('file', {\n            fileSize: this.fileSize,\n            files: this.dataValue || [],\n            filesToDelete,\n            filesToUpload,\n            disabled: this.disabled,\n            support: this.support,\n            fileDropHidden: this.fileDropHidden,\n            showSyncButton: this.autoSync && (filesToDelete.length || filesToUpload.length),\n            isSyncing: this.isSyncing,\n            columns: this.columnsSize,\n        }));\n    }\n    getVideoStream(constraints) {\n        return navigator.mediaDevices.getUserMedia({\n            video: Object.assign({ width: { min: 640, ideal: 1920 }, height: { min: 360, ideal: 1080 }, aspectRatio: { ideal: 16 / 9 } }, constraints),\n            audio: false,\n        });\n    }\n    stopVideoStream(videoStream) {\n        videoStream.getVideoTracks().forEach((track) => track.stop());\n    }\n    getFrame(videoPlayer) {\n        return new Promise((resolve) => {\n            const canvas = document.createElement('canvas');\n            canvas.height = videoPlayer.videoHeight;\n            canvas.width = videoPlayer.videoWidth;\n            const context = canvas.getContext('2d');\n            context.drawImage(videoPlayer, 0, 0);\n            canvas.toBlob(resolve);\n        });\n    }\n    startVideo() {\n        this.getVideoStream()\n            .then((stream) => {\n            this.videoStream = stream;\n            const { videoPlayer } = this.refs;\n            if (!videoPlayer) {\n                console.warn('Video player not found in template.');\n                this.cameraMode = false;\n                this.redraw();\n                return;\n            }\n            videoPlayer.srcObject = stream;\n            const width = parseInt(this.component.webcamSize) || 320;\n            videoPlayer.setAttribute('width', width);\n            videoPlayer.play();\n        })\n            .catch((err) => {\n            console.error(err);\n            this.cameraMode = false;\n            this.redraw();\n        });\n    }\n    stopVideo() {\n        if (this.videoStream) {\n            this.stopVideoStream(this.videoStream);\n            this.videoStream = null;\n        }\n    }\n    takePicture() {\n        const { videoPlayer } = this.refs;\n        if (!videoPlayer) {\n            console.warn('Video player not found in template.');\n            this.cameraMode = false;\n            this.redraw();\n            return;\n        }\n        this.getFrame(videoPlayer)\n            .then((frame) => {\n            frame.name = `photo-${Date.now()}.png`;\n            this.handleFilesToUpload([frame]);\n            this.cameraMode = false;\n            this.redraw();\n        });\n    }\n    browseFiles(attrs = {}) {\n        return new Promise((resolve) => {\n            const fileInput = this.ce('input', Object.assign({ type: 'file', style: 'height: 0; width: 0; visibility: hidden;', tabindex: '-1' }, attrs));\n            document.body.appendChild(fileInput);\n            fileInput.addEventListener('change', () => {\n                resolve(fileInput.files);\n                document.body.removeChild(fileInput);\n            }, true);\n            // There is no direct way to trigger a file dialog. To work around this, create an input of type file and trigger\n            // a click event on it.\n            if (typeof fileInput.trigger === 'function') {\n                fileInput.trigger('click');\n            }\n            else {\n                fileInput.click();\n            }\n        });\n    }\n    set cameraMode(value) {\n        this._cameraMode = value;\n        if (value) {\n            this.startVideo();\n        }\n        else {\n            this.stopVideo();\n        }\n    }\n    get cameraMode() {\n        return this._cameraMode;\n    }\n    get useWebViewCamera() {\n        return this.imageUpload && webViewCamera;\n    }\n    get imageUpload() {\n        return Boolean(this.component.image);\n    }\n    get browseOptions() {\n        const options = {};\n        if (this.component.multiple) {\n            options.multiple = true;\n        }\n        if (this.component.capture) {\n            options.capture = this.component.capture;\n        }\n        //use \"accept\" attribute only for desktop devices because of its limited support by mobile browsers\n        const filePattern = this.component.filePattern.trim() || '';\n        if (!this.isMobile.any) {\n            const imagesPattern = 'image/*';\n            if (this.imageUpload && (!filePattern || filePattern === '*')) {\n                options.accept = imagesPattern;\n            }\n            else if (this.imageUpload && !filePattern.includes(imagesPattern)) {\n                options.accept = `${imagesPattern},${filePattern}`;\n            }\n            else {\n                options.accept = filePattern;\n            }\n        }\n        // if input capture is set, we need the \"accept\" attribute to determine which device to launch\n        else if (this.component.capture) {\n            if (filePattern.includes('video')) {\n                options.accept = 'video/*';\n            }\n            else if (filePattern.includes('audio')) {\n                options.accept = 'audio/*';\n            }\n            else {\n                options.accept = 'image/*';\n            }\n        }\n        return options;\n    }\n    get actions() {\n        return {\n            abort: this.abortRequest.bind(this),\n        };\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            fileDrop: 'single',\n            fileBrowse: 'single',\n            galleryButton: 'single',\n            cameraButton: 'single',\n            takePictureButton: 'single',\n            toggleCameraMode: 'single',\n            videoPlayer: 'single',\n            fileLink: 'multiple',\n            removeLink: 'multiple',\n            fileToSyncRemove: 'multiple',\n            fileImage: 'multiple',\n            fileType: 'multiple',\n            fileProcessingLoader: 'single',\n            syncNow: 'single',\n            restoreFile: 'multiple',\n            progress: 'multiple',\n        });\n        // Ensure we have an empty input refs. We need this for the setValue method to redraw the control when it is set.\n        this.refs.input = [];\n        const superAttach = super.attach(element);\n        if (this.refs.fileDrop) {\n            // if (!this.statuses.length) {\n            //   this.refs.fileDrop.removeAttribute('hidden');\n            // }\n            const _this = this;\n            this.addEventListener(this.refs.fileDrop, 'dragover', function (event) {\n                this.className = 'fileSelector fileDragOver';\n                event.preventDefault();\n            });\n            this.addEventListener(this.refs.fileDrop, 'dragleave', function (event) {\n                this.className = 'fileSelector';\n                event.preventDefault();\n            });\n            this.addEventListener(this.refs.fileDrop, 'drop', function (event) {\n                this.className = 'fileSelector';\n                event.preventDefault();\n                _this.handleFilesToUpload(event.dataTransfer.files);\n            });\n        }\n        this.addEventListener(element, 'click', (event) => {\n            this.handleAction(event);\n        });\n        if (this.refs.fileBrowse) {\n            this.addEventListener(this.refs.fileBrowse, 'click', (event) => {\n                event.preventDefault();\n                this.browseFiles(this.browseOptions)\n                    .then((files) => {\n                    this.handleFilesToUpload(files);\n                });\n            });\n        }\n        this.refs.fileLink.forEach((fileLink, index) => {\n            this.addEventListener(fileLink, 'click', (event) => {\n                event.preventDefault();\n                this.getFile(this.dataValue[index]);\n            });\n        });\n        this.refs.removeLink.forEach((removeLink, index) => {\n            this.addEventListener(removeLink, 'click', (event) => {\n                event.preventDefault();\n                const fileInfo = this.dataValue[index];\n                this.handleFileToRemove(fileInfo);\n            });\n        });\n        this.refs.fileToSyncRemove.forEach((fileToSyncRemove, index) => {\n            this.addEventListener(fileToSyncRemove, 'click', (event) => {\n                event.preventDefault();\n                this.filesToSync.filesToUpload.splice(index, 1);\n                this.redraw();\n            });\n        });\n        this.refs.restoreFile.forEach((fileToRestore, index) => {\n            this.addEventListener(fileToRestore, 'click', (event) => {\n                event.preventDefault();\n                const fileInfo = this.filesToSync.filesToDelete[index];\n                delete fileInfo.status;\n                delete fileInfo.message;\n                this.filesToSync.filesToDelete.splice(index, 1);\n                this.dataValue.push(fileInfo);\n                this.triggerChange();\n                this.redraw();\n            });\n        });\n        if (this.refs.galleryButton && webViewCamera) {\n            this.addEventListener(this.refs.galleryButton, 'click', (event) => {\n                event.preventDefault();\n                webViewCamera.getPicture((success) => {\n                    window.resolveLocalFileSystemURL(success, (fileEntry) => {\n                        fileEntry.file((file) => {\n                            const reader = new FileReader();\n                            reader.onloadend = (evt) => {\n                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });\n                                blob.name = file.name;\n                                this.handleFilesToUpload([blob]);\n                            };\n                            reader.readAsArrayBuffer(file);\n                        });\n                    });\n                }, (err) => {\n                    console.error(err);\n                }, {\n                    sourceType: webViewCamera.PictureSourceType.PHOTOLIBRARY,\n                });\n            });\n        }\n        if (this.refs.cameraButton && webViewCamera) {\n            this.addEventListener(this.refs.cameraButton, 'click', (event) => {\n                event.preventDefault();\n                webViewCamera.getPicture((success) => {\n                    window.resolveLocalFileSystemURL(success, (fileEntry) => {\n                        fileEntry.file((file) => {\n                            const reader = new FileReader();\n                            reader.onloadend = (evt) => {\n                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });\n                                blob.name = file.name;\n                                this.handleFilesToUpload([blob]);\n                            };\n                            reader.readAsArrayBuffer(file);\n                        });\n                    });\n                }, (err) => {\n                    console.error(err);\n                }, {\n                    sourceType: webViewCamera.PictureSourceType.CAMERA,\n                    encodingType: webViewCamera.EncodingType.PNG,\n                    mediaType: webViewCamera.MediaType.PICTURE,\n                    saveToPhotoAlbum: true,\n                    correctOrientation: false,\n                });\n            });\n        }\n        if (this.refs.takePictureButton) {\n            this.addEventListener(this.refs.takePictureButton, 'click', (event) => {\n                event.preventDefault();\n                this.takePicture();\n            });\n        }\n        if (this.refs.toggleCameraMode) {\n            this.addEventListener(this.refs.toggleCameraMode, 'click', (event) => {\n                event.preventDefault();\n                this.cameraMode = !this.cameraMode;\n                this.redraw();\n            });\n        }\n        this.refs.fileType.forEach((fileType, index) => {\n            if (!this.dataValue[index]) {\n                return;\n            }\n            this.dataValue[index].fileType = this.dataValue[index].fileType || this.component.fileTypes[0].label;\n            this.addEventListener(fileType, 'change', (event) => {\n                event.preventDefault();\n                const fileType = this.component.fileTypes.find((typeObj) => typeObj.value === event.target.value);\n                this.dataValue[index].fileType = fileType.label;\n            });\n        });\n        this.addEventListener(this.refs.syncNow, 'click', (event) => {\n            event.preventDefault();\n            this.syncFiles();\n        });\n        const fileService = this.fileService;\n        if (fileService) {\n            const loadingImages = [];\n            this.filesReady = new Promise((resolve, reject) => {\n                this.filesReadyResolve = resolve;\n                this.filesReadyReject = reject;\n            });\n            this.refs.fileImage.forEach((image, index) => {\n                loadingImages.push(this.loadImage(this.dataValue[index]).then((url) => (image.src = url)));\n            });\n            if (loadingImages.length) {\n                Promise.all(loadingImages).then(() => {\n                    this.filesReadyResolve();\n                }).catch(() => this.filesReadyReject());\n            }\n            else {\n                this.filesReadyResolve();\n            }\n        }\n        return superAttach;\n    }\n    /* eslint-disable max-len */\n    fileSize(a, b, c, d, e) {\n        return `${(b = Math, c = b.log, d = 1024, e = c(a) / c(d) | 0, a / b.pow(d, e)).toFixed(2)} ${e ? `${'kMGTPEZY'[--e]}B` : 'Bytes'}`;\n    }\n    /* eslint-enable max-len */\n    /* eslint-disable max-depth */\n    globStringToRegex(str) {\n        str = str.replace(/\\s/g, '');\n        let regexp = '', excludes = [];\n        if (str.length > 2 && str[0] === '/' && str[str.length - 1] === '/') {\n            regexp = str.substring(1, str.length - 1);\n        }\n        else {\n            const split = str.split(',');\n            if (split.length > 1) {\n                for (let i = 0; i < split.length; i++) {\n                    const r = this.globStringToRegex(split[i]);\n                    if (r.regexp) {\n                        regexp += `(${r.regexp})`;\n                        if (i < split.length - 1) {\n                            regexp += '|';\n                        }\n                    }\n                    else {\n                        excludes = excludes.concat(r.excludes);\n                    }\n                }\n            }\n            else {\n                if (str.startsWith('!')) {\n                    excludes.push(`^((?!${this.globStringToRegex(str.substring(1)).regexp}).)*$`);\n                }\n                else {\n                    if (str.startsWith('.')) {\n                        str = `*${str}`;\n                    }\n                    regexp = `^${str.replace(new RegExp('[.\\\\\\\\+*?\\\\[\\\\^\\\\]$(){}=!<>|:\\\\-]', 'g'), '\\\\$&')}$`;\n                    regexp = regexp.replace(/\\\\\\*/g, '.*').replace(/\\\\\\?/g, '.');\n                }\n            }\n        }\n        return { regexp, excludes };\n    }\n    /* eslint-enable max-depth */\n    translateScalars(str) {\n        if (typeof str === 'string') {\n            if (str.search(/kb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024);\n            }\n            if (str.search(/mb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024 * 1024);\n            }\n            if (str.search(/gb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024 * 1024 * 1024);\n            }\n            if (str.search(/b/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1));\n            }\n            if (str.search(/s/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1));\n            }\n            if (str.search(/m/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1) * 60);\n            }\n            if (str.search(/h/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1) * 3600);\n            }\n        }\n        return str;\n    }\n    validatePattern(file, val) {\n        if (!val) {\n            return true;\n        }\n        const pattern = this.globStringToRegex(val);\n        let valid = true;\n        if (pattern.regexp && pattern.regexp.length) {\n            const regexp = new RegExp(pattern.regexp, 'i');\n            valid = (!lodash_1.default.isNil(file.type) && regexp.test(file.type)) ||\n                (!lodash_1.default.isNil(file.name) && regexp.test(file.name));\n        }\n        valid = pattern.excludes.reduce((result, excludePattern) => {\n            const exclude = new RegExp(excludePattern, 'i');\n            return result && (lodash_1.default.isNil(file.type) || exclude.test(file.type)) &&\n                (lodash_1.default.isNil(file.name) || exclude.test(file.name));\n        }, valid);\n        return valid;\n    }\n    validateMinSize(file, val) {\n        return file.size + 0.1 >= this.translateScalars(val);\n    }\n    validateMaxSize(file, val) {\n        return file.size - 0.1 <= this.translateScalars(val);\n    }\n    abortRequest(id) {\n        const abortUpload = this.abortUploads.find(abortUpload => abortUpload.id === id);\n        if (abortUpload) {\n            abortUpload.abort();\n        }\n    }\n    handleAction(event) {\n        const target = event.target;\n        if (!target.id) {\n            return;\n        }\n        const [action, id] = target.id.split('-');\n        if (!action || !id || !this.actions[action]) {\n            return;\n        }\n        this.actions[action](id);\n    }\n    getFileName(file) {\n        return (0, utils_1.uniqueName)(file.name, this.component.fileNameTemplate, this.evalContext());\n    }\n    getInitFileToSync(file) {\n        const escapedFileName = file.name ? file.name.replaceAll('<', '&lt;').replaceAll('>', '&gt;') : file.name;\n        return {\n            id: createRandomString(),\n            // Get a unique name for this file to keep file collisions from occurring.\n            dir: this.interpolate(this.component.dir || ''),\n            name: this.getFileName(file),\n            originalName: escapedFileName,\n            fileKey: this.component.fileKey || 'file',\n            storage: this.component.storage,\n            options: this.component.options,\n            file,\n            size: file.size,\n            status: 'info',\n            message: this.t('Processing file. Please wait...'),\n            hash: '',\n        };\n    }\n    handleSubmissionRevisions(file) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (this.root.form.submissionRevisions !== 'true') {\n                return '';\n            }\n            const bmf = new browser_md5_file_1.default();\n            const hash = yield new Promise((resolve, reject) => {\n                this.emit('fileUploadingStart');\n                bmf.md5(file, (err, md5) => {\n                    if (err) {\n                        return reject(err);\n                    }\n                    return resolve(md5);\n                });\n            });\n            this.emit('fileUploadingEnd');\n            return hash;\n        });\n    }\n    validateFileName(file) {\n        // Check if file with the same name is being uploaded\n        const fileWithSameNameUploading = this.filesToSync.filesToUpload\n            .some(fileToSync => { var _a; return ((_a = fileToSync.file) === null || _a === void 0 ? void 0 : _a.name) === file.name; });\n        const fileWithSameNameUploaded = lodash_1.default.some(this.dataValue, fileStatus => fileStatus.originalName === file.name);\n        return fileWithSameNameUploaded || fileWithSameNameUploading\n            ? {\n                status: 'error',\n                message: this.t(`File with the same name is already ${fileWithSameNameUploading ? 'being ' : ''}uploaded`),\n            }\n            : {};\n    }\n    validateFileSettings(file) {\n        // Check file pattern\n        if (this.component.filePattern && !this.validatePattern(file, this.component.filePattern)) {\n            return {\n                status: 'error',\n                message: this.t('File is the wrong type; it must be {{ pattern }}', {\n                    pattern: this.component.filePattern,\n                }),\n            };\n        }\n        // Check file minimum size\n        if (this.component.fileMinSize && !this.validateMinSize(file, this.component.fileMinSize)) {\n            return {\n                status: 'error',\n                message: this.t('File is too small; it must be at least {{ size }}', {\n                    size: this.component.fileMinSize,\n                }),\n            };\n        }\n        // Check file maximum size\n        if (this.component.fileMaxSize && !this.validateMaxSize(file, this.component.fileMaxSize)) {\n            return {\n                status: 'error',\n                message: this.t('File is too big; it must be at most {{ size }}', {\n                    size: this.component.fileMaxSize,\n                }),\n            };\n        }\n        return {};\n    }\n    validateFileService() {\n        const { fileService } = this;\n        return !fileService\n            ? {\n                status: 'error',\n                message: this.t('File Service not provided.'),\n            }\n            : {};\n    }\n    validateFile(file) {\n        const fileServiceValidation = this.validateFileService();\n        if (fileServiceValidation.status === 'error') {\n            return fileServiceValidation;\n        }\n        const fileNameValidation = this.validateFileName(file);\n        if (fileNameValidation.status === 'error') {\n            return fileNameValidation;\n        }\n        return this.validateFileSettings(file);\n    }\n    getGroupPermissions() {\n        let groupKey = null;\n        let groupPermissions = null;\n        //Iterate through form components to find group resource if one exists\n        this.root.everyComponent((element) => {\n            var _a, _b;\n            if (((_a = element.component) === null || _a === void 0 ? void 0 : _a.submissionAccess) || ((_b = element.component) === null || _b === void 0 ? void 0 : _b.defaultPermission)) {\n                groupPermissions = !element.component.submissionAccess ? [\n                    {\n                        type: element.component.defaultPermission,\n                        roles: [],\n                    },\n                ] : element.component.submissionAccess;\n                groupPermissions.forEach((permission) => {\n                    groupKey = ['admin', 'write', 'create'].includes(permission.type) ? element.component.key : null;\n                });\n            }\n        });\n        return { groupKey, groupPermissions };\n    }\n    triggerFileProcessor(file) {\n        return __awaiter(this, void 0, void 0, function* () {\n            let processedFile = null;\n            if (this.root.options.fileProcessor) {\n                try {\n                    if (this.refs.fileProcessingLoader) {\n                        this.refs.fileProcessingLoader.style.display = 'block';\n                    }\n                    const fileProcessorHandler = (0, fileProcessor_1.default)(this.fileService, this.root.options.fileProcessor);\n                    processedFile = yield fileProcessorHandler(file, this.component.properties);\n                }\n                catch (err) {\n                    this.fileDropHidden = false;\n                    return {\n                        status: 'error',\n                        message: this.t('File processing has been failed.'),\n                    };\n                }\n                finally {\n                    if (this.refs.fileProcessingLoader) {\n                        this.refs.fileProcessingLoader.style.display = 'none';\n                    }\n                }\n            }\n            return {\n                file: processedFile,\n            };\n        });\n    }\n    prepareFileToUpload(file) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const fileToSync = this.getInitFileToSync(file);\n            fileToSync.hash = yield this.handleSubmissionRevisions(file);\n            const { status, message } = this.validateFile(file);\n            if (status === 'error') {\n                fileToSync.isValidationError = true;\n                fileToSync.status = status;\n                fileToSync.message = message;\n                return this.filesToSync.filesToUpload.push(fileToSync);\n            }\n            if (this.component.privateDownload) {\n                file.private = true;\n            }\n            const { groupKey, groupPermissions } = this.getGroupPermissions();\n            const processedFile = yield this.triggerFileProcessor(file);\n            if (processedFile.status === 'error') {\n                fileToSync.status === 'error';\n                fileToSync.message = processedFile.message;\n                return this.filesToSync.filesToUpload.push(fileToSync);\n            }\n            if (this.autoSync) {\n                fileToSync.message = this.t('Ready to be uploaded into storage');\n            }\n            this.filesToSync.filesToUpload.push(Object.assign(Object.assign({}, fileToSync), { message: fileToSync.message, file: processedFile.file || file, url: this.interpolate(this.component.url, { file: fileToSync }), groupPermissions, groupResourceId: groupKey ? this.currentForm.submission.data[groupKey]._id : null }));\n        });\n    }\n    prepareFilesToUpload(files) {\n        return __awaiter(this, void 0, void 0, function* () {\n            // Only allow one upload if not multiple.\n            if (!this.component.multiple) {\n                files = Array.prototype.slice.call(files, 0, 1);\n            }\n            if (this.component.storage && files && files.length) {\n                this.fileDropHidden = true;\n                return Promise.all([...files].map((file) => __awaiter(this, void 0, void 0, function* () {\n                    yield this.prepareFileToUpload(file);\n                    this.redraw();\n                })));\n            }\n            else {\n                return Promise.resolve();\n            }\n        });\n    }\n    handleFilesToUpload(files) {\n        return __awaiter(this, void 0, void 0, function* () {\n            yield this.prepareFilesToUpload(files);\n            if (!this.autoSync) {\n                yield this.syncFiles();\n            }\n        });\n    }\n    prepareFileToDelete(fileInfo) {\n        this.filesToSync.filesToDelete.push(Object.assign(Object.assign({}, fileInfo), { status: 'info', message: this.autoSync\n                ? this.t('Ready to be removed from storage')\n                : this.t('Preparing file to remove') }));\n        const index = this.dataValue.findIndex(file => file.name === fileInfo.name);\n        this.splice(index);\n        this.redraw();\n    }\n    handleFileToRemove(fileInfo) {\n        this.prepareFileToDelete(fileInfo);\n        if (!this.autoSync) {\n            this.syncFiles();\n        }\n    }\n    deleteFile(fileInfo) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const { options = {} } = this.component;\n            if (fileInfo && (['url', 'indexeddb', 's3', 'azure', 'googledrive'].includes(this.component.storage))) {\n                const { fileService } = this;\n                if (fileService && typeof fileService.deleteFile === 'function') {\n                    return yield fileService.deleteFile(fileInfo, options);\n                }\n                else {\n                    const formio = this.options.formio || (this.root && this.root.formio);\n                    if (formio) {\n                        return yield formio.makeRequest('', fileInfo.url, 'delete');\n                    }\n                }\n            }\n        });\n    }\n    delete() {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!this.filesToSync.filesToDelete.length) {\n                return Promise.resolve();\n            }\n            return yield Promise.all(this.filesToSync.filesToDelete.map((fileToSync) => __awaiter(this, void 0, void 0, function* () {\n                try {\n                    if (fileToSync.isValidationError) {\n                        return { fileToSync };\n                    }\n                    yield this.deleteFile(fileToSync);\n                    fileToSync.status = 'success';\n                    fileToSync.message = this.t('Succefully removed');\n                }\n                catch (response) {\n                    fileToSync.status = 'error';\n                    fileToSync.message = typeof response === 'string' ? response : response.toString();\n                }\n                finally {\n                    this.redraw();\n                }\n                return { fileToSync };\n            })));\n        });\n    }\n    updateProgress(fileInfo, progressEvent) {\n        fileInfo.progress = parseInt(100.0 * progressEvent.loaded / progressEvent.total);\n        if (fileInfo.status !== 'progress') {\n            fileInfo.status = 'progress';\n            delete fileInfo.message;\n            this.redraw();\n        }\n        else {\n            const progress = Array.prototype.find.call(this.refs.progress, progressElement => progressElement.id === fileInfo.id);\n            progress.innerHTML = `<span class=\"visually-hidden\">${fileInfo.progress}% ${this.t('Complete')}</span>`;\n            progress.style.width = `${fileInfo.progress}%`;\n            progress.ariaValueNow = fileInfo.progress.toString();\n        }\n    }\n    getMultipartOptions(fileToSync) {\n        let count = 0;\n        return this.component.useMultipartUpload && this.component.multipart ? Object.assign(Object.assign({}, this.component.multipart), { progressCallback: (total) => {\n                count++;\n                fileToSync.status = 'progress';\n                fileToSync.progress = parseInt(100 * count / total);\n                delete fileToSync.message;\n                this.redraw();\n            }, changeMessage: (message) => {\n                fileToSync.message = message;\n                this.redraw();\n            } }) : false;\n    }\n    uploadFile(fileToSync) {\n        return __awaiter(this, void 0, void 0, function* () {\n            return yield this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, \n            // Progress callback\n            this.updateProgress.bind(this, fileToSync), fileToSync.url, fileToSync.options, fileToSync.fileKey, fileToSync.groupPermissions, fileToSync.groupResourceId, () => {\n                this.emit('fileUploadingStart');\n            }, \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                    this.emit('fileUploadingEnd');\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('fileUploadingEnd');\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?");
 
 /***/ }),
 
@@ -5312,7 +5312,7 @@ eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _argument
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n/* eslint-disable max-statements */\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Component_1 = __importDefault(__webpack_require__(/*! ../_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst ComponentModal_1 = __importDefault(__webpack_require__(/*! ../_classes/componentModal/ComponentModal */ \"./lib/cjs/components/_classes/componentModal/ComponentModal.js\"));\nconst eventemitter3_1 = __importDefault(__webpack_require__(/*! eventemitter3 */ \"./node_modules/eventemitter3/index.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./lib/cjs/utils/index.js\");\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst Form_1 = __importDefault(__webpack_require__(/*! ../../Form */ \"./lib/cjs/Form.js\"));\nclass FormComponent extends Component_1.default {\n    static schema(...extend) {\n        return Component_1.default.schema({\n            label: 'Form',\n            type: 'form',\n            key: 'form',\n            src: '',\n            reference: true,\n            form: '',\n            path: '',\n            tableView: true,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Nested Form',\n            icon: 'wpforms',\n            group: 'premium',\n            documentation: '/userguide/form-building/premium-components#nested-form',\n            weight: 110,\n            schema: FormComponent.schema()\n        };\n    }\n    static savedValueTypes() {\n        return [utils_1.componentValueTypes.object];\n    }\n    init() {\n        super.init();\n        this.formObj = {\n            display: this.component.display,\n            settings: this.component.settings,\n            components: this.component.components\n        };\n        this.valueChanged = false;\n        this.subForm = null;\n        this.formSrc = '';\n        if (this.component.src) {\n            this.formSrc = this.component.src;\n        }\n        if (!this.component.src &&\n            !this.options.formio &&\n            (this.component.form || this.component.path)) {\n            if (this.component.project) {\n                this.formSrc = Formio_1.Formio.getBaseUrl();\n                // Check to see if it is a MongoID.\n                if ((0, utils_1.isMongoId)(this.component.project)) {\n                    this.formSrc += '/project';\n                }\n                this.formSrc += `/${this.component.project}`;\n                this.options.project = this.formSrc;\n            }\n            else {\n                this.formSrc = Formio_1.Formio.getProjectUrl();\n                this.options.project = this.formSrc;\n            }\n            if (this.component.form) {\n                if ((0, utils_1.isMongoId)(this.component.form)) {\n                    this.formSrc += `/form/${this.component.form}`;\n                }\n                else {\n                    this.formSrc += `/${this.component.form}`;\n                }\n            }\n            else if (this.component.path) {\n                this.formSrc += `/${this.component.path}`;\n            }\n        }\n        // Build the source based on the root src path.\n        if (!this.formSrc && this.options.formio) {\n            const rootSrc = this.options.formio.formsUrl;\n            if (this.component.form && (0, utils_1.isMongoId)(this.component.form)) {\n                this.formSrc = `${rootSrc}/${this.component.form}`;\n            }\n            else {\n                const formPath = this.component.path || this.component.form;\n                this.formSrc = `${rootSrc.replace(/\\/form$/, '')}/${formPath}`;\n            }\n        }\n        if (this.builderMode && this.component.hasOwnProperty('formRevision')) {\n            this.component.revision = this.component.formRevision;\n            delete this.component.formRevision;\n        }\n        // Add revision version if set.\n        if (this.component.revision || this.component.revision === 0 ||\n            this.component.formRevision || this.component.formRevision === 0\n            || this.component.revisionId) {\n            this.setFormRevision(this.component.revisionId || this.component.revision || this.component.formRevision);\n        }\n        return this.createSubForm();\n    }\n    get dataReady() {\n        return this.subFormReady || Promise.resolve();\n    }\n    get defaultValue() {\n        // Not not provide a default value unless the subform is ready so that it will initialize correctly.\n        return this.subForm ? super.defaultValue : null;\n    }\n    get defaultSchema() {\n        return FormComponent.schema();\n    }\n    get emptyValue() {\n        return { data: {} };\n    }\n    // In order for the subform values to set properly, we must always say that nested forms have a default value.\n    get hasDefaultValue() {\n        return true;\n    }\n    get ready() {\n        return this.subFormReady || Promise.resolve();\n    }\n    get useOriginalRevision() {\n        var _a, _b;\n        return ((_a = this.component) === null || _a === void 0 ? void 0 : _a.useOriginalRevision) && !!((_b = this.formObj) === null || _b === void 0 ? void 0 : _b.revisions);\n    }\n    setFormRevision(rev) {\n        // Remove current revisions from src if it is\n        this.formSrc = this.formSrc.replace(/\\/v\\/[0-9a-z]+/, '');\n        const revNumber = Number.parseInt(rev);\n        if (!isNaN(revNumber)) {\n            this.subFormRevision = rev;\n            this.formSrc += `/v/${rev}`;\n        }\n        else {\n            this.subFormRevision = undefined;\n        }\n    }\n    getComponent(path) {\n        if (!this.subForm) {\n            return null;\n        }\n        return this.subForm.getComponent(path);\n    }\n    /* eslint-disable max-statements */\n    getSubOptions(options = {}) {\n        options.events = this.createEmitter();\n        // Make sure to not show the submit button in wizards in the nested forms.\n        lodash_1.default.set(options, 'buttonSettings.showSubmit', false);\n        // Set the parent option to the subform so those references are stable when the subform is created\n        options.parent = this;\n        if (!this.options) {\n            return options;\n        }\n        if (this.options.base) {\n            options.base = this.options.base;\n        }\n        if (this.options.project) {\n            options.project = this.options.project;\n        }\n        if (this.options.readOnly || this.component.disabled) {\n            options.readOnly = this.options.readOnly || this.component.disabled;\n        }\n        if (this.options.breadcrumbSettings) {\n            options.breadcrumbSettings = this.options.breadcrumbSettings;\n        }\n        if (this.options.buttonSettings) {\n            options.buttonSettings = lodash_1.default.clone(this.options.buttonSettings);\n        }\n        if (this.options.viewAsHtml) {\n            options.viewAsHtml = this.options.viewAsHtml;\n        }\n        if (this.options.language) {\n            options.language = this.options.language;\n        }\n        if (this.options.template) {\n            options.template = this.options.template;\n        }\n        if (this.options.templates) {\n            options.templates = this.options.templates;\n        }\n        if (this.options.renderMode) {\n            options.renderMode = this.options.renderMode;\n        }\n        if (this.options.attachMode) {\n            options.attachMode = this.options.attachMode;\n        }\n        if (this.options.iconset) {\n            options.iconset = this.options.iconset;\n        }\n        if (this.options.fileService) {\n            options.fileService = this.options.fileService;\n        }\n        if (this.options.onChange) {\n            options.onChange = this.options.onChange;\n        }\n        if (this.options.preview) {\n            options.preview = this.options.preview;\n        }\n        if (this.options.inEditGrid) {\n            options.inEditGrid = this.options.inEditGrid;\n        }\n        if (this.options.saveDraft) {\n            options.saveDraft = this.options.saveDraft;\n            options.formio = new Formio_1.Formio(this.formSrc);\n        }\n        if (this.options.saveDraftThrottle) {\n            options.saveDraftThrottle = this.options.saveDraftThrottle;\n        }\n        if (this.options.skipDraftRestore) {\n            options.skipDraftRestore = this.options.skipDraftRestore;\n        }\n        options.parent = this;\n        return options;\n    }\n    /* eslint-enable max-statements */\n    render() {\n        if (this.builderMode) {\n            return super.render(this.component.label || 'Nested form');\n        }\n        const subform = this.subForm ? this.subForm.render() : this.renderTemplate('loading');\n        return super.render(subform);\n    }\n    asString(value) {\n        return this.getValueAsString(value);\n    }\n    /**\n     * Prints out the value of form components as a datagrid value.\n     */\n    getValueAsString(value, options) {\n        if (!value) {\n            return 'No data provided';\n        }\n        if (!value.data && value._id) {\n            return value._id;\n        }\n        if (!value.data || !Object.keys(value.data).length) {\n            return 'No data provided';\n        }\n        if (options === null || options === void 0 ? void 0 : options.email) {\n            let result = (`\n        <table border=\"1\" style=\"width:100%\">\n          <tbody>\n      `);\n            this.everyComponent((component) => {\n                if (component.isInputComponent && component.visible && !component.skipInEmail) {\n                    result += (`\n            <tr>\n              <th style=\"padding: 5px 10px;\">${component.label}</th>\n              <td style=\"width:100%;padding:5px 10px;\">${component.getView(component.dataValue, options)}</td>\n            </tr>\n          `);\n                }\n            }, Object.assign(Object.assign({}, options), { fromRoot: true }));\n            result += (`\n          </tbody>\n        </table>\n      `);\n            return result;\n        }\n        if (lodash_1.default.isEmpty(value)) {\n            return '';\n        }\n        return '[Complex Data]';\n    }\n    attach(element) {\n        // Don't attach in builder.\n        if (this.builderMode) {\n            return super.attach(element);\n        }\n        return super.attach(element)\n            .then(() => {\n            if (this.isSubFormLazyLoad() && !this.hasLoadedForm && !this.subFormLoading) {\n                this.createSubForm(true);\n            }\n            if (!this.subFormReady) {\n                return Promise.resolve();\n            }\n            return this.subFormReady.then(() => {\n                this.empty(element);\n                if (this.options.builder) {\n                    this.setContent(element, this.ce('div', {\n                        class: 'text-muted text-center p-2'\n                    }, this.text(this.formObj.title)));\n                    return;\n                }\n                this.setContent(element, this.render());\n                if (this.subForm) {\n                    if (this.isNestedWizard) {\n                        element = this.root.element;\n                    }\n                    this.subForm.attach(element);\n                    this.valueChanged = this.hasSetValue;\n                    if (!this.valueChanged && this.dataValue.state !== 'submitted') {\n                        this.setDefaultValue();\n                    }\n                    else {\n                        this.restoreValue();\n                    }\n                }\n                if (!this.builderMode && this.component.modalEdit) {\n                    const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;\n                    const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;\n                    this.componentModal = new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);\n                    this.subForm.element = this.componentModal.refs.componentContent || this.subForm.element;\n                    this.setOpenModalElement();\n                }\n                this.calculateValue();\n            });\n        });\n    }\n    detach() {\n        if (this.subForm) {\n            this.subForm.detach();\n        }\n        super.detach();\n    }\n    get currentForm() {\n        return this._currentForm;\n    }\n    get hasLoadedForm() {\n        return this.formObj\n            && this.formObj.components\n            && Array.isArray(this.formObj.components)\n            && this.formObj.components.length;\n    }\n    set currentForm(instance) {\n        this._currentForm = instance;\n        if (!this.subForm) {\n            return;\n        }\n        this.subForm.getComponents().forEach(component => {\n            component.currentForm = this;\n        });\n    }\n    get isRevisionChanged() {\n        return lodash_1.default.isNumber(this.subFormRevision)\n            && lodash_1.default.isNumber(this.formObj._vid)\n            && this.formObj._vid !== this.subFormRevision;\n    }\n    get subFormData() {\n        var _a;\n        return ((_a = this.dataValue) === null || _a === void 0 ? void 0 : _a.data) || {};\n    }\n    destroy(all = false) {\n        if (this.subForm) {\n            this.subForm.destroy(all);\n            this.subForm = null;\n            this.subFormReady = null;\n        }\n        super.destroy(all);\n    }\n    redraw() {\n        if (this.subForm) {\n            this.subForm.form = this.formObj;\n            this.setSubFormDisabled(this.subForm);\n        }\n        return super.redraw();\n    }\n    /**\n     * Pass everyComponent to subform.\n     * @param {any[]} args - Arguments to pass through to the subform's everyComponent method.\n     * @returns {*} - The result of the subform's everyComponent method.\n     */\n    everyComponent(...args) {\n        if (this.subForm) {\n            this.subForm.everyComponent(...args);\n        }\n    }\n    setSubFormDisabled(subForm) {\n        subForm.disabled = this.disabled; // When the Nested Form is disabled make the subForm disabled\n    }\n    updateSubWizards(subForm) {\n        var _a, _b;\n        if (this.isNestedWizard && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.subWizards) && ((_b = subForm === null || subForm === void 0 ? void 0 : subForm._form) === null || _b === void 0 ? void 0 : _b.display) === 'wizard') {\n            const existedForm = this.root.subWizards.findIndex(form => form.component.form === this.component.form);\n            if (existedForm !== -1) {\n                this.root.subWizards[existedForm] = this;\n            }\n            else {\n                this.root.subWizards.push(this);\n            }\n            this.emit('subWizardsUpdated', subForm);\n        }\n    }\n    /**\n     * Create a subform instance.\n     * @param {boolean} [fromAttach] - This function is being called from an `attach` method.\n     * @param {boolean} [beforeSubmit] - This function is being called from a `beforeSubmit` method.\n     * @returns {*} - The subform instance.\n     */\n    createSubForm(fromAttach, beforeSubmit) {\n        this.subFormReady = this.loadSubForm(fromAttach, beforeSubmit).then((form) => {\n            if (!form) {\n                return;\n            }\n            // Iterate through every component and hide the submit button.\n            (0, utils_1.eachComponent)(form.components, (component) => {\n                this.hideSubmitButton(component);\n            });\n            // If the subform is already created then destroy the old one.\n            if (this.subForm) {\n                this.subForm.destroy();\n            }\n            // Render the form.\n            return (new Form_1.default(form, this.getSubOptions())).ready.then((instance) => {\n                var _a, _b;\n                this.subForm = instance;\n                this.subForm.currentForm = this;\n                this.subForm.parentVisible = this.visible;\n                const componentsMap = this.componentsMap;\n                const formComponentsMap = this.subForm.componentsMap;\n                lodash_1.default.assign(componentsMap, formComponentsMap);\n                this.component.components = (_a = this.subForm._form) === null || _a === void 0 ? void 0 : _a.components;\n                this.component.display = (_b = this.subForm._form) === null || _b === void 0 ? void 0 : _b.display;\n                this.subForm.on('change', () => {\n                    if (this.subForm) {\n                        this.dataValue = this.subForm.getValue();\n                        this.triggerChange({\n                            noEmit: true\n                        });\n                    }\n                });\n                this.subForm.url = this.formSrc;\n                this.subForm.nosubmit = true;\n                this.subForm.root = this.root;\n                this.subForm.localRoot = this.isNestedWizard ? this.localRoot : this.subForm;\n                this.restoreValue();\n                this.valueChanged = this.hasSetValue;\n                this.onChange();\n                return this.subForm;\n            }).catch((err) => {\n                console.log(err);\n            });\n        }).then((subForm) => {\n            this.updateSubWizards(subForm);\n            return subForm;\n        });\n        return this.subFormReady;\n    }\n    hideSubmitButton(component) {\n        const isSubmitButton = component.type === 'button' && (component.action === 'submit' || !component.action);\n        if (isSubmitButton) {\n            component.hidden = true;\n            // clearOnHide no longer clears from the JSON `hidden` flag, so we make the button conditionally hidden to clear its data\n            component.customConditional = 'show = false';\n        }\n    }\n    /**\n     * Load the subform.\n     * @param {boolean} fromAttach - This function is being called from an `attach` method.\n     * @param {boolean} beforeSubmit - This function is being called from a `beforeSubmit` method.\n     * @returns {Promise} - The promise that resolves when the subform is loaded.\n     */\n    loadSubForm(fromAttach, beforeSubmit) {\n        var _a, _b, _c, _d, _e;\n        const loadHiddenForm = beforeSubmit && !this.component.clearOnHide;\n        if (this.builderMode || (this.conditionallyHidden() && !loadHiddenForm) || (this.isSubFormLazyLoad() && !fromAttach)) {\n            return Promise.resolve();\n        }\n        if (this.hasLoadedForm && !this.isRevisionChanged &&\n            !(this.options.pdf && ((_a = this.component) === null || _a === void 0 ? void 0 : _a.useOriginalRevision) && lodash_1.default.isNull(this.subForm) && !this.subFormLoading)) {\n            // Pass config down to sub forms.\n            if (this.root && this.root.form && this.root.form.config && !this.formObj.config) {\n                this.formObj.config = this.root.form.config;\n            }\n            return Promise.resolve(this.formObj);\n        }\n        else if (this.formSrc) {\n            this.subFormLoading = true;\n            const options = ((_c = (_b = this.root) === null || _b === void 0 ? void 0 : _b.formio) === null || _c === void 0 ? void 0 : _c.base) && ((_e = (_d = this.root) === null || _d === void 0 ? void 0 : _d.formio) === null || _e === void 0 ? void 0 : _e.projectUrl)\n                ? {\n                    base: this.root.formio.base,\n                    project: this.root.formio.projectUrl,\n                }\n                : {};\n            return (new Formio_1.Formio(this.formSrc, options)).loadForm({ params: { live: 1 } })\n                .then((formObj) => {\n                this.formObj = formObj;\n                if (this.options.pdf && this.component.useOriginalRevision) {\n                    this.formObj.display = 'form';\n                }\n                this.subFormLoading = false;\n                return formObj;\n            })\n                .catch((err) => {\n                console.log(err);\n                return null;\n            });\n        }\n        return Promise.resolve();\n    }\n    checkComponentConditions(data, flags, row) {\n        const visible = super.checkComponentConditions(data, flags, row);\n        // Return if already hidden\n        if (!visible) {\n            return visible;\n        }\n        if (this.subForm) {\n            return this.subForm.checkConditions(this.subFormData, flags);\n        }\n        // There are few cases when subForm is not loaded when a change is triggered,\n        // so we need to perform checkConditions after it is ready, or some conditional fields might be hidden in View mode\n        else if (this.subFormReady) {\n            this.subFormReady.then(() => {\n                if (this.subForm) {\n                    return this.subForm.checkConditions(this.subFormData, flags);\n                }\n            });\n        }\n        return visible;\n    }\n    calculateValue(data, flags, row) {\n        if (this.subForm) {\n            return this.subForm.calculateValue(this.subFormData, flags);\n        }\n        return super.calculateValue(data, flags, row);\n    }\n    setPristine(pristine) {\n        super.setPristine(pristine);\n        if (this.subForm) {\n            this.subForm.setPristine(pristine);\n        }\n    }\n    /**\n     * Determine if the subform should be submitted.\n     * @returns {*|boolean} - TRUE if the subform should be submitted, FALSE if it should not.\n     */\n    get shouldSubmit() {\n        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.shouldConditionallyClear();\n    }\n    /**\n     * Returns the data for the subform.\n     * @returns {*} - the data for the subform.\n     */\n    getSubFormData() {\n        if (lodash_1.default.get(this.subForm, 'form.display') === 'pdf') {\n            return this.subForm.getSubmission();\n        }\n        else {\n            return Promise.resolve(this.dataValue);\n        }\n    }\n    /**\n     * Submit the subform if configured to do so.\n     * @returns {Promise} - The promise that resolves when the subform is submitted.\n     */\n    submitSubForm() {\n        // If we wish to submit the form on next page, then do that here.\n        if (this.shouldSubmit) {\n            return this.subFormReady.then(() => {\n                if (!this.subForm) {\n                    return this.dataValue;\n                }\n                this.subForm.nosubmit = false;\n                this.subForm.submitted = true;\n                return this.subForm.submitForm({}, true).then(result => {\n                    this.subForm.loading = false;\n                    this.subForm.showAllErrors = false;\n                    this.dataValue = result.submission;\n                    return this.dataValue;\n                }).catch(err => {\n                    this.subForm.showAllErrors = true;\n                    this.subForm.onSubmissionError(err);\n                    return Promise.reject(err);\n                });\n            });\n        }\n        return this.getSubFormData();\n    }\n    /**\n     * Submit the form before the next page is triggered.\n     * @param {Function} next - The function to trigger the next page.\n     * @returns {Promise} - The promise that resolves when the subform submission is complete (if necessary) and the next page is triggered.\n     */\n    beforePage(next) {\n        // Should not submit child forms if we are going to the previous page\n        if (!next) {\n            return super.beforePage(next);\n        }\n        return this.submitSubForm(true).then(() => super.beforePage(next));\n    }\n    /**\n     * Submit the form before the whole form is triggered.\n     * @returns {Promise} - The promise that resolves when the subform submission is complete (if necessary) and the form is submitted.\n     */\n    beforeSubmit() {\n        var _a, _b, _c;\n        const submission = this.dataValue;\n        // Cancel triggered saveDraft\n        if (((_a = this.subForm) === null || _a === void 0 ? void 0 : _a.draftEnabled) && ((_b = this.subForm.triggerSaveDraft) === null || _b === void 0 ? void 0 : _b.cancel)) {\n            this.subForm.triggerSaveDraft.cancel();\n        }\n        const isAlreadySubmitted = submission && submission._id && submission.form;\n        const isDraftSubmission = this.options.saveDraft && submission.state === 'draft';\n        // This submission has already been submitted, so just return the reference data.\n        if (isAlreadySubmitted && !((_c = this.subForm) === null || _c === void 0 ? void 0 : _c.wizard) && !isDraftSubmission) {\n            this.dataValue = submission;\n            return Promise.resolve(this.dataValue);\n        }\n        // we need to load a hidden form (when clearOnHide is disabled) in order to get and submit (if needed) its data\n        const loadHiddenForm = !this.component.clearOnHide;\n        if ((this.isSubFormLazyLoad() || loadHiddenForm) && !this.subFormLoading && !this.subForm) {\n            return this.createSubForm(true, true)\n                .then(() => this.submitSubForm(false))\n                .then(() => this.dataValue)\n                .then(() => super.beforeSubmit());\n        }\n        else {\n            return this.submitSubForm(false)\n                .then(() => this.dataValue)\n                .then(() => super.beforeSubmit());\n        }\n    }\n    isSubFormLazyLoad() {\n        var _a, _b;\n        return ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a._form) === null || _b === void 0 ? void 0 : _b.display) === 'wizard' && this.component.lazyLoad;\n    }\n    isHidden() {\n        if (!this.visible) {\n            return true;\n        }\n        return !super.checkConditions(this.rootValue);\n    }\n    setValue(submission, flags = {}) {\n        var _a;\n        const changed = super.setValue(submission, flags);\n        this.valueChanged = true;\n        if (this.subForm) {\n            const revisionPath = submission._frid ? '_frid' : '_vid';\n            const shouldLoadOriginalRevision = this.useOriginalRevision\n                && (lodash_1.default.isNumber(submission[revisionPath]) || lodash_1.default.isNumber(submission._fvid))\n                && lodash_1.default.isNumber((_a = this.subForm.form) === null || _a === void 0 ? void 0 : _a[revisionPath])\n                && submission._fvid !== this.subForm.form[revisionPath];\n            if (shouldLoadOriginalRevision) {\n                this.setFormRevision(submission._frid || submission._fvid);\n                this.createSubForm().then(() => {\n                    this.attach(this.element);\n                });\n            }\n            else {\n                this.setSubFormValue(submission, flags);\n            }\n        }\n        return changed;\n    }\n    setSubFormValue(submission, flags) {\n        var _a, _b, _c, _d;\n        const shouldLoadSubmissionById = submission\n            && submission._id\n            && this.subForm.formio\n            && lodash_1.default.isEmpty(submission.data);\n        const shouldLoadDraftById = this.options.saveDraft && lodash_1.default.isEmpty(submission.data) && lodash_1.default.get(this.subForm, 'submission._id');\n        if (shouldLoadSubmissionById || shouldLoadDraftById) {\n            const formId = submission.form || this.formObj.form || this.component.form;\n            const submissionUrl = `${this.subForm.formio.formsUrl}/${formId}/submission/${submission._id || this.subForm.submission._id}`;\n            const options = ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.formio) === null || _b === void 0 ? void 0 : _b.base) && ((_d = (_c = this.root) === null || _c === void 0 ? void 0 : _c.formio) === null || _d === void 0 ? void 0 : _d.projectUrl)\n                ? {\n                    base: this.root.formio.base,\n                    project: this.root.formio.projectUrl,\n                }\n                : {};\n            this.subForm.setUrl(submissionUrl, Object.assign(Object.assign({}, this.options), options));\n            this.subForm.loadSubmission().catch((err) => {\n                console.error(`Unable to load subform submission ${submission._id}:`, err);\n            });\n        }\n        else {\n            this.onSetSubFormValue(submission, flags);\n        }\n    }\n    /**\n     * Sets the subform value\n     * @param {object|null|undefined} submission - The submission to set.\n     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.\n     * @returns {void}\n     */\n    onSetSubFormValue(submission, flags) {\n        this.subForm.setValue(submission, flags);\n    }\n    isEmpty(value = this.dataValue) {\n        return value === null || lodash_1.default.isEqual(value, this.emptyValue) || (this.areAllComponentsEmpty(value === null || value === void 0 ? void 0 : value.data) && !(value === null || value === void 0 ? void 0 : value._id));\n    }\n    areAllComponentsEmpty(data) {\n        let res = true;\n        if (this.subForm) {\n            this.subForm.everyComponent((comp) => {\n                const componentValue = lodash_1.default.get(data, comp.key);\n                res &= comp.isEmpty(componentValue);\n            });\n        }\n        else {\n            res = false;\n        }\n        return res;\n    }\n    getValue() {\n        if (this.subForm) {\n            return this.subForm.getValue();\n        }\n        return this.dataValue;\n    }\n    get errors() {\n        let errors = super.errors;\n        if (this.subForm) {\n            errors = errors.concat(this.subForm.errors);\n        }\n        return errors;\n    }\n    conditionallyHidden() {\n        const conditionallyHidden = super.conditionallyHidden();\n        if (this.subForm) {\n            this.subForm._conditionallyHidden = conditionallyHidden;\n        }\n        return conditionallyHidden;\n    }\n    updateSubFormVisibility() {\n        if (this.subForm) {\n            this.subForm.parentVisible = this.visible;\n        }\n    }\n    /**\n     * Determines if this form is a Nested Wizard\n     * which means it should be a Wizard itself and should be a direct child of a Wizard's page\n     * @returns {boolean} - TRUE if this form is a Nested Wizard, FALSE otherwise\n     */\n    get isNestedWizard() {\n        var _a, _b, _c, _d, _e;\n        return ((_b = (_a = this.subForm) === null || _a === void 0 ? void 0 : _a._form) === null || _b === void 0 ? void 0 : _b.display) === 'wizard' && ((_e = (_d = (_c = this.parent) === null || _c === void 0 ? void 0 : _c.parent) === null || _d === void 0 ? void 0 : _d._form) === null || _e === void 0 ? void 0 : _e.display) === 'wizard';\n    }\n    get visible() {\n        return super.visible;\n    }\n    set visible(value) {\n        const isNestedWizard = this.isNestedWizard;\n        if (this._visible !== value) {\n            this._visible = value;\n            // Form doesn't load if hidden. If it becomes visible, create the form.\n            if (!this.subForm && value) {\n                this.createSubForm();\n                this.subFormReady.then(() => {\n                    this.updateSubFormVisibility();\n                    this.clearOnHide();\n                });\n                this.redraw();\n                return;\n            }\n            this.updateSubFormVisibility();\n            this.clearOnHide();\n            isNestedWizard ? this.rebuild() : this.redraw();\n        }\n        if (!value && isNestedWizard) {\n            this.root.redraw();\n        }\n    }\n    get parentVisible() {\n        return super.parentVisible;\n    }\n    set parentVisible(value) {\n        if (this._parentVisible !== value) {\n            this._parentVisible = value;\n            this.clearOnHide();\n            // Form doesn't load if hidden. If it becomes visible, create the form.\n            if (!this.subForm && value) {\n                this.createSubForm();\n                this.subFormReady.then(() => {\n                    this.updateSubFormVisibility();\n                });\n                this.redraw();\n                return;\n            }\n            this.updateSubFormVisibility();\n            this.redraw();\n        }\n    }\n    isInternalEvent(event) {\n        switch (event) {\n            case 'focus':\n            case 'blur':\n            case 'componentChange':\n            case 'componentError':\n            case 'error':\n            case 'formLoad':\n            case 'languageChanged':\n            case 'render':\n            case 'checkValidity':\n            case 'initialized':\n            case 'submit':\n            case 'submitButton':\n            case 'nosubmit':\n            case 'updateComponent':\n            case 'submitDone':\n            case 'submissionDeleted':\n            case 'requestDone':\n            case 'nextPage':\n            case 'prevPage':\n            case 'wizardNavigationClicked':\n            case 'updateWizardNav':\n            case 'restoreDraft':\n            case 'saveDraft':\n            case 'saveComponent':\n            case 'pdfUploaded':\n                return true;\n            default:\n                return false;\n        }\n    }\n    createEmitter() {\n        const emitter = new eventemitter3_1.default();\n        const nativeEmit = emitter.emit;\n        const that = this;\n        emitter.emit = function (event, ...args) {\n            const eventType = event.replace(`${that.options.namespace}.`, '');\n            nativeEmit.call(this, event, ...args);\n            if (!that.isInternalEvent(eventType)) {\n                that.emit(eventType, ...args);\n            }\n        };\n        return emitter;\n    }\n    deleteValue() {\n        super.setValue(null, {\n            noUpdateEvent: true,\n            noDefault: true\n        });\n        this.unset();\n    }\n}\nexports[\"default\"] = FormComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/form/Form.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n/* eslint-disable max-statements */\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Component_1 = __importDefault(__webpack_require__(/*! ../_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst ComponentModal_1 = __importDefault(__webpack_require__(/*! ../_classes/componentModal/ComponentModal */ \"./lib/cjs/components/_classes/componentModal/ComponentModal.js\"));\nconst eventemitter3_1 = __importDefault(__webpack_require__(/*! eventemitter3 */ \"./node_modules/eventemitter3/index.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./lib/cjs/utils/index.js\");\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst Form_1 = __importDefault(__webpack_require__(/*! ../../Form */ \"./lib/cjs/Form.js\"));\nclass FormComponent extends Component_1.default {\n    static schema(...extend) {\n        return Component_1.default.schema({\n            label: 'Form',\n            type: 'form',\n            key: 'form',\n            src: '',\n            reference: true,\n            form: '',\n            path: '',\n            tableView: true,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Nested Form',\n            icon: 'wpforms',\n            group: 'premium',\n            documentation: '/userguide/form-building/premium-components#nested-form',\n            weight: 110,\n            schema: FormComponent.schema()\n        };\n    }\n    static savedValueTypes() {\n        return [utils_1.componentValueTypes.object];\n    }\n    init() {\n        super.init();\n        this.formObj = {\n            display: this.component.display,\n            settings: this.component.settings,\n            components: this.component.components\n        };\n        this.valueChanged = false;\n        this.subForm = null;\n        this.formSrc = '';\n        if (this.component.src) {\n            this.formSrc = this.component.src;\n        }\n        if (!this.component.src &&\n            !this.options.formio &&\n            (this.component.form || this.component.path)) {\n            if (this.component.project) {\n                this.formSrc = Formio_1.Formio.getBaseUrl();\n                // Check to see if it is a MongoID.\n                if ((0, utils_1.isMongoId)(this.component.project)) {\n                    this.formSrc += '/project';\n                }\n                this.formSrc += `/${this.component.project}`;\n                this.options.project = this.formSrc;\n            }\n            else {\n                this.formSrc = Formio_1.Formio.getProjectUrl();\n                this.options.project = this.formSrc;\n            }\n            if (this.component.form) {\n                if ((0, utils_1.isMongoId)(this.component.form)) {\n                    this.formSrc += `/form/${this.component.form}`;\n                }\n                else {\n                    this.formSrc += `/${this.component.form}`;\n                }\n            }\n            else if (this.component.path) {\n                this.formSrc += `/${this.component.path}`;\n            }\n        }\n        // Build the source based on the root src path.\n        if (!this.formSrc && this.options.formio) {\n            const rootSrc = this.options.formio.formsUrl;\n            if (this.component.form && (0, utils_1.isMongoId)(this.component.form)) {\n                this.formSrc = `${rootSrc}/${this.component.form}`;\n            }\n            else {\n                const formPath = this.component.path || this.component.form;\n                this.formSrc = `${rootSrc.replace(/\\/form$/, '')}/${formPath}`;\n            }\n        }\n        if (this.builderMode && this.component.hasOwnProperty('formRevision')) {\n            this.component.revision = this.component.formRevision;\n            delete this.component.formRevision;\n        }\n        // Add revision version if set.\n        if (this.component.revision || this.component.revision === 0 ||\n            this.component.formRevision || this.component.formRevision === 0\n            || this.component.revisionId) {\n            this.setFormRevision(this.component.revisionId || this.component.revision || this.component.formRevision);\n        }\n        return this.createSubForm();\n    }\n    shouldConditionallyClearOnPristine() {\n        return !this.hasSetValue && super.shouldConditionallyClearOnPristine();\n    }\n    get dataReady() {\n        return this.subFormReady || Promise.resolve();\n    }\n    get defaultValue() {\n        // Not not provide a default value unless the subform is ready so that it will initialize correctly.\n        return this.subForm ? super.defaultValue : null;\n    }\n    get defaultSchema() {\n        return FormComponent.schema();\n    }\n    get emptyValue() {\n        return { data: {} };\n    }\n    // In order for the subform values to set properly, we must always say that nested forms have a default value.\n    get hasDefaultValue() {\n        return true;\n    }\n    get ready() {\n        return this.subFormReady || Promise.resolve();\n    }\n    get useOriginalRevision() {\n        var _a, _b;\n        return ((_a = this.component) === null || _a === void 0 ? void 0 : _a.useOriginalRevision) && !!((_b = this.formObj) === null || _b === void 0 ? void 0 : _b.revisions);\n    }\n    setFormRevision(rev) {\n        // Remove current revisions from src if it is\n        this.formSrc = this.formSrc.replace(/\\/v\\/[0-9a-z]+/, '');\n        const revNumber = Number.parseInt(rev);\n        if (!isNaN(revNumber)) {\n            this.subFormRevision = rev;\n            this.formSrc += `/v/${rev}`;\n        }\n        else {\n            this.subFormRevision = undefined;\n        }\n    }\n    getComponent(path) {\n        if (!this.subForm) {\n            return null;\n        }\n        return this.subForm.getComponent(path);\n    }\n    /* eslint-disable max-statements */\n    getSubOptions(options = {}) {\n        options.events = this.createEmitter();\n        // Make sure to not show the submit button in wizards in the nested forms.\n        lodash_1.default.set(options, 'buttonSettings.showSubmit', false);\n        // Set the parent option to the subform so those references are stable when the subform is created\n        options.parent = this;\n        if (!this.options) {\n            return options;\n        }\n        if (this.options.base) {\n            options.base = this.options.base;\n        }\n        if (this.options.project) {\n            options.project = this.options.project;\n        }\n        if (this.options.readOnly || this.component.disabled) {\n            options.readOnly = this.options.readOnly || this.component.disabled;\n        }\n        if (this.options.breadcrumbSettings) {\n            options.breadcrumbSettings = this.options.breadcrumbSettings;\n        }\n        if (this.options.buttonSettings) {\n            options.buttonSettings = lodash_1.default.clone(this.options.buttonSettings);\n        }\n        if (this.options.viewAsHtml) {\n            options.viewAsHtml = this.options.viewAsHtml;\n        }\n        if (this.options.language) {\n            options.language = this.options.language;\n        }\n        if (this.options.template) {\n            options.template = this.options.template;\n        }\n        if (this.options.templates) {\n            options.templates = this.options.templates;\n        }\n        if (this.options.renderMode) {\n            options.renderMode = this.options.renderMode;\n        }\n        if (this.options.attachMode) {\n            options.attachMode = this.options.attachMode;\n        }\n        if (this.options.iconset) {\n            options.iconset = this.options.iconset;\n        }\n        if (this.options.fileService) {\n            options.fileService = this.options.fileService;\n        }\n        if (this.options.onChange) {\n            options.onChange = this.options.onChange;\n        }\n        if (this.options.preview) {\n            options.preview = this.options.preview;\n        }\n        if (this.options.inEditGrid) {\n            options.inEditGrid = this.options.inEditGrid;\n        }\n        if (this.options.saveDraft) {\n            options.saveDraft = this.options.saveDraft;\n            options.formio = new Formio_1.Formio(this.formSrc);\n        }\n        if (this.options.saveDraftThrottle) {\n            options.saveDraftThrottle = this.options.saveDraftThrottle;\n        }\n        if (this.options.skipDraftRestore) {\n            options.skipDraftRestore = this.options.skipDraftRestore;\n        }\n        options.parent = this;\n        return options;\n    }\n    /* eslint-enable max-statements */\n    render() {\n        if (this.builderMode) {\n            return super.render(this.component.label || 'Nested form');\n        }\n        const subform = this.subForm ? this.subForm.render() : this.renderTemplate('loading');\n        return super.render(subform);\n    }\n    asString(value) {\n        return this.getValueAsString(value);\n    }\n    /**\n     * Prints out the value of form components as a datagrid value.\n     */\n    getValueAsString(value, options) {\n        if (!value) {\n            return 'No data provided';\n        }\n        if (!value.data && value._id) {\n            return value._id;\n        }\n        if (!value.data || !Object.keys(value.data).length) {\n            return 'No data provided';\n        }\n        if (options === null || options === void 0 ? void 0 : options.email) {\n            let result = (`\n        <table border=\"1\" style=\"width:100%\">\n          <tbody>\n      `);\n            this.everyComponent((component) => {\n                if (component.isInputComponent && component.visible && !component.skipInEmail) {\n                    result += (`\n            <tr>\n              <th style=\"padding: 5px 10px;\">${component.label}</th>\n              <td style=\"width:100%;padding:5px 10px;\">${component.getView(component.dataValue, options)}</td>\n            </tr>\n          `);\n                }\n            }, Object.assign(Object.assign({}, options), { fromRoot: true }));\n            result += (`\n          </tbody>\n        </table>\n      `);\n            return result;\n        }\n        if (lodash_1.default.isEmpty(value)) {\n            return '';\n        }\n        return '[Complex Data]';\n    }\n    attach(element) {\n        // Don't attach in builder.\n        if (this.builderMode) {\n            return super.attach(element);\n        }\n        return super.attach(element)\n            .then(() => {\n            if (this.isSubFormLazyLoad() && !this.hasLoadedForm && !this.subFormLoading) {\n                this.createSubForm(true);\n            }\n            if (!this.subFormReady) {\n                return Promise.resolve();\n            }\n            return this.subFormReady.then(() => {\n                this.empty(element);\n                if (this.options.builder) {\n                    this.setContent(element, this.ce('div', {\n                        class: 'text-muted text-center p-2'\n                    }, this.text(this.formObj.title)));\n                    return;\n                }\n                this.setContent(element, this.render());\n                if (this.subForm) {\n                    if (this.isNestedWizard) {\n                        element = this.root.element;\n                    }\n                    this.subForm.attach(element);\n                    this.valueChanged = this.hasSetValue;\n                    if (!this.shouldConditionallyClear()) {\n                        if (!this.valueChanged && this.dataValue.state !== 'submitted') {\n                            this.setDefaultValue();\n                        }\n                        else {\n                            this.restoreValue();\n                        }\n                    }\n                }\n                if (!this.builderMode && this.component.modalEdit) {\n                    const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;\n                    const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;\n                    this.componentModal = new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);\n                    this.subForm.element = this.componentModal.refs.componentContent || this.subForm.element;\n                    this.setOpenModalElement();\n                }\n                this.calculateValue();\n            });\n        });\n    }\n    detach() {\n        if (this.subForm) {\n            this.subForm.detach();\n        }\n        super.detach();\n    }\n    get currentForm() {\n        return this._currentForm;\n    }\n    get hasLoadedForm() {\n        return this.formObj\n            && this.formObj.components\n            && Array.isArray(this.formObj.components)\n            && this.formObj.components.length;\n    }\n    set currentForm(instance) {\n        this._currentForm = instance;\n        if (!this.subForm) {\n            return;\n        }\n        this.subForm.getComponents().forEach(component => {\n            component.currentForm = this;\n        });\n    }\n    get isRevisionChanged() {\n        return lodash_1.default.isNumber(this.subFormRevision)\n            && lodash_1.default.isNumber(this.formObj._vid)\n            && this.formObj._vid !== this.subFormRevision;\n    }\n    get subFormData() {\n        var _a;\n        return ((_a = this.dataValue) === null || _a === void 0 ? void 0 : _a.data) || {};\n    }\n    destroy(all = false) {\n        if (this.subForm) {\n            this.subForm.destroy(all);\n            this.subForm = null;\n            this.subFormReady = null;\n        }\n        super.destroy(all);\n    }\n    redraw() {\n        if (this.subForm) {\n            this.subForm.form = this.formObj;\n            this.setSubFormDisabled(this.subForm);\n        }\n        return super.redraw();\n    }\n    /**\n     * Pass everyComponent to subform.\n     * @param {any[]} args - Arguments to pass through to the subform's everyComponent method.\n     * @returns {*} - The result of the subform's everyComponent method.\n     */\n    everyComponent(...args) {\n        if (this.subForm) {\n            this.subForm.everyComponent(...args);\n        }\n    }\n    setSubFormDisabled(subForm) {\n        subForm.disabled = this.disabled; // When the Nested Form is disabled make the subForm disabled\n    }\n    updateSubWizards(subForm) {\n        var _a, _b;\n        if (this.isNestedWizard && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.subWizards) && ((_b = subForm === null || subForm === void 0 ? void 0 : subForm._form) === null || _b === void 0 ? void 0 : _b.display) === 'wizard') {\n            const existedForm = this.root.subWizards.findIndex(form => form.component.form === this.component.form);\n            if (existedForm !== -1) {\n                this.root.subWizards[existedForm] = this;\n            }\n            else {\n                this.root.subWizards.push(this);\n            }\n            this.emit('subWizardsUpdated', subForm);\n        }\n    }\n    /**\n     * Create a subform instance.\n     * @param {boolean} [fromAttach] - This function is being called from an `attach` method.\n     * @param {boolean} [beforeSubmit] - This function is being called from a `beforeSubmit` method.\n     * @returns {*} - The subform instance.\n     */\n    createSubForm(fromAttach, beforeSubmit) {\n        this.subFormReady = this.loadSubForm(fromAttach, beforeSubmit).then((form) => {\n            if (!form) {\n                return;\n            }\n            // Iterate through every component and hide the submit button.\n            (0, utils_1.eachComponent)(form.components, (component) => {\n                this.hideSubmitButton(component);\n            });\n            // If the subform is already created then destroy the old one.\n            if (this.subForm) {\n                this.subForm.destroy();\n            }\n            // Render the form.\n            return (new Form_1.default(form, this.getSubOptions())).ready.then((instance) => {\n                var _a, _b;\n                this.subForm = instance;\n                this.subForm.currentForm = this;\n                this.subForm.parentVisible = this.visible;\n                const componentsMap = this.componentsMap;\n                const formComponentsMap = this.subForm.componentsMap;\n                lodash_1.default.assign(componentsMap, formComponentsMap);\n                this.component.components = (_a = this.subForm._form) === null || _a === void 0 ? void 0 : _a.components;\n                this.component.display = (_b = this.subForm._form) === null || _b === void 0 ? void 0 : _b.display;\n                this.subForm.on('change', () => {\n                    if (this.subForm && !this.shouldConditionallyClear()) {\n                        this.dataValue = this.subForm.getValue();\n                        this.triggerChange({\n                            noEmit: true\n                        });\n                    }\n                });\n                this.subForm.url = this.formSrc;\n                this.subForm.nosubmit = true;\n                this.subForm.root = this.root;\n                this.subForm.localRoot = this.isNestedWizard ? this.localRoot : this.subForm;\n                this.restoreValue();\n                this.valueChanged = this.hasSetValue;\n                this.onChange();\n                return this.subForm;\n            }).catch((err) => {\n                console.log(err);\n            });\n        }).then((subForm) => {\n            this.updateSubWizards(subForm);\n            return subForm;\n        });\n        return this.subFormReady;\n    }\n    hideSubmitButton(component) {\n        const isSubmitButton = component.type === 'button' && (component.action === 'submit' || !component.action);\n        if (isSubmitButton) {\n            component.hidden = true;\n            // clearOnHide no longer clears from the JSON `hidden` flag, so we make the button conditionally hidden to clear its data\n            component.customConditional = 'show = false';\n        }\n    }\n    /**\n     * Load the subform.\n     * @param {boolean} fromAttach - This function is being called from an `attach` method.\n     * @param {boolean} beforeSubmit - This function is being called from a `beforeSubmit` method.\n     * @returns {Promise} - The promise that resolves when the subform is loaded.\n     */\n    loadSubForm(fromAttach, beforeSubmit) {\n        var _a, _b, _c, _d, _e;\n        const loadHiddenForm = beforeSubmit && !this.component.clearOnHide;\n        if (this.builderMode || (this.conditionallyHidden() && !loadHiddenForm) || (this.isSubFormLazyLoad() && !fromAttach)) {\n            return Promise.resolve();\n        }\n        if (this.hasLoadedForm && !this.isRevisionChanged &&\n            !(this.options.pdf && ((_a = this.component) === null || _a === void 0 ? void 0 : _a.useOriginalRevision) && lodash_1.default.isNull(this.subForm) && !this.subFormLoading)) {\n            // Pass config down to sub forms.\n            if (this.root && this.root.form && this.root.form.config && !this.formObj.config) {\n                this.formObj.config = this.root.form.config;\n            }\n            return Promise.resolve(this.formObj);\n        }\n        else if (this.formSrc) {\n            this.subFormLoading = true;\n            const options = ((_c = (_b = this.root) === null || _b === void 0 ? void 0 : _b.formio) === null || _c === void 0 ? void 0 : _c.base) && ((_e = (_d = this.root) === null || _d === void 0 ? void 0 : _d.formio) === null || _e === void 0 ? void 0 : _e.projectUrl)\n                ? {\n                    base: this.root.formio.base,\n                    project: this.root.formio.projectUrl,\n                }\n                : {};\n            return (new Formio_1.Formio(this.formSrc, options)).loadForm({ params: { live: 1 } })\n                .then((formObj) => {\n                this.formObj = formObj;\n                if (this.options.pdf && this.component.useOriginalRevision) {\n                    this.formObj.display = 'form';\n                }\n                this.subFormLoading = false;\n                return formObj;\n            })\n                .catch((err) => {\n                console.log(err);\n                return null;\n            });\n        }\n        return Promise.resolve();\n    }\n    checkComponentConditions(data, flags, row) {\n        const visible = super.checkComponentConditions(data, flags, row);\n        // Return if already hidden\n        if (!visible) {\n            return visible;\n        }\n        if (this.subForm) {\n            return this.subForm.checkConditions(this.subFormData, flags);\n        }\n        // There are few cases when subForm is not loaded when a change is triggered,\n        // so we need to perform checkConditions after it is ready, or some conditional fields might be hidden in View mode\n        else if (this.subFormReady) {\n            this.subFormReady.then(() => {\n                if (this.subForm) {\n                    return this.subForm.checkConditions(this.subFormData, flags);\n                }\n            });\n        }\n        return visible;\n    }\n    calculateValue(data, flags, row) {\n        if (this.subForm) {\n            return this.subForm.calculateValue(this.subFormData, flags);\n        }\n        return super.calculateValue(data, flags, row);\n    }\n    setPristine(pristine) {\n        super.setPristine(pristine);\n        if (this.subForm) {\n            this.subForm.setPristine(pristine);\n        }\n    }\n    /**\n     * Determine if the subform should be submitted.\n     * @returns {*|boolean} - TRUE if the subform should be submitted, FALSE if it should not.\n     */\n    get shouldSubmit() {\n        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.shouldConditionallyClear();\n    }\n    /**\n     * Returns the data for the subform.\n     * @returns {*} - the data for the subform.\n     */\n    getSubFormData() {\n        if (lodash_1.default.get(this.subForm, 'form.display') === 'pdf') {\n            return this.subForm.getSubmission();\n        }\n        else {\n            return Promise.resolve(this.dataValue);\n        }\n    }\n    /**\n     * Submit the subform if configured to do so.\n     * @returns {Promise} - The promise that resolves when the subform is submitted.\n     */\n    submitSubForm() {\n        // If we wish to submit the form on next page, then do that here.\n        if (this.shouldSubmit) {\n            return this.subFormReady.then(() => {\n                if (!this.subForm) {\n                    return this.dataValue;\n                }\n                this.subForm.nosubmit = false;\n                this.subForm.submitted = true;\n                return this.subForm.submitForm({}, true).then(result => {\n                    this.subForm.loading = false;\n                    this.subForm.showAllErrors = false;\n                    this.dataValue = result.submission;\n                    return this.dataValue;\n                }).catch(err => {\n                    this.subForm.showAllErrors = true;\n                    this.subForm.onSubmissionError(err);\n                    return Promise.reject(err);\n                });\n            });\n        }\n        return this.getSubFormData();\n    }\n    /**\n     * Submit the form before the next page is triggered.\n     * @param {Function} next - The function to trigger the next page.\n     * @returns {Promise} - The promise that resolves when the subform submission is complete (if necessary) and the next page is triggered.\n     */\n    beforePage(next) {\n        // Should not submit child forms if we are going to the previous page\n        if (!next) {\n            return super.beforePage(next);\n        }\n        return this.submitSubForm(true).then(() => super.beforePage(next));\n    }\n    /**\n     * Submit the form before the whole form is triggered.\n     * @returns {Promise} - The promise that resolves when the subform submission is complete (if necessary) and the form is submitted.\n     */\n    beforeSubmit() {\n        var _a, _b, _c;\n        const submission = this.dataValue;\n        // Cancel triggered saveDraft\n        if (((_a = this.subForm) === null || _a === void 0 ? void 0 : _a.draftEnabled) && ((_b = this.subForm.triggerSaveDraft) === null || _b === void 0 ? void 0 : _b.cancel)) {\n            this.subForm.triggerSaveDraft.cancel();\n        }\n        const isAlreadySubmitted = submission && submission._id && submission.form;\n        const isDraftSubmission = this.options.saveDraft && submission.state === 'draft';\n        // This submission has already been submitted, so just return the reference data.\n        if (isAlreadySubmitted && !((_c = this.subForm) === null || _c === void 0 ? void 0 : _c.wizard) && !isDraftSubmission) {\n            this.dataValue = submission;\n            return Promise.resolve(this.dataValue);\n        }\n        // we need to load a hidden form (when clearOnHide is disabled) in order to get and submit (if needed) its data\n        const loadHiddenForm = !this.component.clearOnHide;\n        if ((this.isSubFormLazyLoad() || loadHiddenForm) && !this.subFormLoading && !this.subForm) {\n            return this.createSubForm(true, true)\n                .then(() => this.submitSubForm(false))\n                .then(() => this.dataValue)\n                .then(() => super.beforeSubmit());\n        }\n        else {\n            return this.submitSubForm(false)\n                .then(() => this.dataValue)\n                .then(() => super.beforeSubmit());\n        }\n    }\n    isSubFormLazyLoad() {\n        var _a, _b;\n        return ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a._form) === null || _b === void 0 ? void 0 : _b.display) === 'wizard' && this.component.lazyLoad;\n    }\n    isHidden() {\n        if (!this.visible) {\n            return true;\n        }\n        return !super.checkConditions(this.rootValue);\n    }\n    setValue(submission, flags = {}) {\n        var _a;\n        const changed = super.setValue(submission, flags);\n        this.valueChanged = true;\n        if (this.subForm) {\n            const revisionPath = submission._frid ? '_frid' : '_vid';\n            const shouldLoadOriginalRevision = this.useOriginalRevision\n                && (lodash_1.default.isNumber(submission[revisionPath]) || lodash_1.default.isNumber(submission._fvid))\n                && lodash_1.default.isNumber((_a = this.subForm.form) === null || _a === void 0 ? void 0 : _a[revisionPath])\n                && submission._fvid !== this.subForm.form[revisionPath];\n            if (shouldLoadOriginalRevision) {\n                this.setFormRevision(submission._frid || submission._fvid);\n                this.createSubForm().then(() => {\n                    this.attach(this.element);\n                });\n            }\n            else {\n                this.setSubFormValue(submission, flags);\n            }\n        }\n        return changed;\n    }\n    setSubFormValue(submission, flags) {\n        var _a, _b, _c, _d;\n        const shouldLoadSubmissionById = submission\n            && submission._id\n            && this.subForm.formio\n            && lodash_1.default.isEmpty(submission.data);\n        const shouldLoadDraftById = this.options.saveDraft && lodash_1.default.isEmpty(submission.data) && lodash_1.default.get(this.subForm, 'submission._id');\n        if (shouldLoadSubmissionById || shouldLoadDraftById) {\n            const formId = submission.form || this.formObj.form || this.component.form;\n            const submissionUrl = `${this.subForm.formio.formsUrl}/${formId}/submission/${submission._id || this.subForm.submission._id}`;\n            const options = ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.formio) === null || _b === void 0 ? void 0 : _b.base) && ((_d = (_c = this.root) === null || _c === void 0 ? void 0 : _c.formio) === null || _d === void 0 ? void 0 : _d.projectUrl)\n                ? {\n                    base: this.root.formio.base,\n                    project: this.root.formio.projectUrl,\n                }\n                : {};\n            this.subForm.setUrl(submissionUrl, Object.assign(Object.assign({}, this.options), options));\n            this.subForm.loadSubmission().catch((err) => {\n                console.error(`Unable to load subform submission ${submission._id}:`, err);\n            });\n        }\n        else {\n            this.onSetSubFormValue(submission, flags);\n        }\n    }\n    /**\n     * Sets the subform value\n     * @param {object|null|undefined} submission - The submission to set.\n     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.\n     * @returns {void}\n     */\n    onSetSubFormValue(submission, flags) {\n        this.subForm.setValue(submission, flags);\n    }\n    isEmpty(value = this.dataValue) {\n        return value === null || lodash_1.default.isEqual(value, this.emptyValue);\n    }\n    getValue() {\n        if (this.subForm) {\n            return this.subForm.getValue();\n        }\n        return this.dataValue;\n    }\n    get errors() {\n        let errors = super.errors;\n        if (this.subForm) {\n            errors = errors.concat(this.subForm.errors);\n        }\n        return errors;\n    }\n    conditionallyHidden() {\n        const conditionallyHidden = super.conditionallyHidden();\n        if (this.subForm) {\n            this.subForm._conditionallyHidden = conditionallyHidden;\n        }\n        return conditionallyHidden;\n    }\n    updateSubFormVisibility() {\n        if (this.subForm) {\n            this.subForm.parentVisible = this.visible;\n        }\n    }\n    /**\n     * Determines if this form is a Nested Wizard\n     * which means it should be a Wizard itself and should be a direct child of a Wizard's page\n     * @returns {boolean} - TRUE if this form is a Nested Wizard, FALSE otherwise\n     */\n    get isNestedWizard() {\n        var _a, _b, _c, _d, _e;\n        return ((_b = (_a = this.subForm) === null || _a === void 0 ? void 0 : _a._form) === null || _b === void 0 ? void 0 : _b.display) === 'wizard' && ((_e = (_d = (_c = this.parent) === null || _c === void 0 ? void 0 : _c.parent) === null || _d === void 0 ? void 0 : _d._form) === null || _e === void 0 ? void 0 : _e.display) === 'wizard';\n    }\n    get visible() {\n        return super.visible;\n    }\n    set visible(value) {\n        const isNestedWizard = this.isNestedWizard;\n        if (this._visible !== value) {\n            this._visible = value;\n            // Form doesn't load if hidden. If it becomes visible, create the form.\n            if (!this.subForm && value) {\n                this.createSubForm();\n                this.subFormReady.then(() => {\n                    this.updateSubFormVisibility();\n                    this.clearOnHide();\n                });\n                this.redraw();\n                return;\n            }\n            this.updateSubFormVisibility();\n            this.clearOnHide();\n            isNestedWizard ? this.rebuild() : this.redraw();\n        }\n        if (!value && isNestedWizard) {\n            this.root.redraw();\n        }\n    }\n    get parentVisible() {\n        return super.parentVisible;\n    }\n    set parentVisible(value) {\n        if (this._parentVisible !== value) {\n            this._parentVisible = value;\n            this.clearOnHide();\n            // Form doesn't load if hidden. If it becomes visible, create the form.\n            if (!this.subForm && value) {\n                this.createSubForm();\n                this.subFormReady.then(() => {\n                    this.updateSubFormVisibility();\n                });\n                this.redraw();\n                return;\n            }\n            this.updateSubFormVisibility();\n            this.redraw();\n        }\n    }\n    isInternalEvent(event) {\n        switch (event) {\n            case 'focus':\n            case 'blur':\n            case 'componentChange':\n            case 'componentError':\n            case 'error':\n            case 'formLoad':\n            case 'languageChanged':\n            case 'render':\n            case 'checkValidity':\n            case 'initialized':\n            case 'submit':\n            case 'submitButton':\n            case 'nosubmit':\n            case 'updateComponent':\n            case 'submitDone':\n            case 'submissionDeleted':\n            case 'requestDone':\n            case 'nextPage':\n            case 'prevPage':\n            case 'wizardNavigationClicked':\n            case 'updateWizardNav':\n            case 'restoreDraft':\n            case 'saveDraft':\n            case 'saveComponent':\n            case 'pdfUploaded':\n                return true;\n            default:\n                return false;\n        }\n    }\n    createEmitter() {\n        const emitter = new eventemitter3_1.default();\n        const nativeEmit = emitter.emit;\n        const that = this;\n        emitter.emit = function (event, ...args) {\n            const eventType = event.replace(`${that.options.namespace}.`, '');\n            nativeEmit.call(this, event, ...args);\n            if (!that.isInternalEvent(eventType)) {\n                that.emit(eventType, ...args);\n            }\n        };\n        return emitter;\n    }\n    deleteValue() {\n        super.setValue(null, {\n            noUpdateEvent: true,\n            noDefault: true\n        });\n        this.unset();\n    }\n}\nexports[\"default\"] = FormComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/form/Form.js?");
 
 /***/ }),
 
@@ -5422,7 +5422,7 @@ eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _argument
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst ListComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/list/ListComponent */ \"./lib/cjs/components/_classes/list/ListComponent.js\"));\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst Form_1 = __importDefault(__webpack_require__(/*! ../../Form */ \"./lib/cjs/Form.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./lib/cjs/utils/index.js\");\nconst ChoicesWrapper_1 = __importDefault(__webpack_require__(/*! ../../utils/ChoicesWrapper */ \"./lib/cjs/utils/ChoicesWrapper.js\"));\nclass SelectComponent extends ListComponent_1.default {\n    static schema(...extend) {\n        return ListComponent_1.default.schema({\n            type: 'select',\n            label: 'Select',\n            key: 'select',\n            idPath: 'id',\n            data: {\n                values: [{ label: '', value: '' }],\n                json: '',\n                url: '',\n                resource: '',\n                custom: ''\n            },\n            clearOnRefresh: false,\n            limit: 100,\n            valueProperty: '',\n            lazyLoad: true,\n            filter: '',\n            searchEnabled: true,\n            searchDebounce: 0.3,\n            searchField: '',\n            minSearch: 0,\n            readOnlyValue: false,\n            selectFields: '',\n            selectThreshold: 0.3,\n            uniqueOptions: false,\n            tableView: true,\n            fuseOptions: {\n                include: 'score',\n                threshold: 0.3,\n            },\n            indexeddb: {\n                filter: {}\n            },\n            customOptions: {},\n            useExactSearch: false,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Select',\n            group: 'basic',\n            icon: 'th-list',\n            weight: 70,\n            documentation: '/userguide/form-building/form-components#select',\n            schema: SelectComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return SelectComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        const numberType = () => ({ type: 'number' });\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {\n                const valueComp = Object.assign(Object.assign({}, classComp), { type: 'select' });\n                if ((0, utils_1.isSelectResourceWithObjectValue)(classComp)) {\n                    valueComp.reference = false;\n                    valueComp.onSetItems = `\n            var templateKeys = utils.getItemTemplateKeys(component.template) || [];\n            items = _.map(items || [], i => {\n              var item = {};\n              _.each(templateKeys, k =>  _.set(item, k, _.get(i, k)));\n              return item;\n            })\n          `;\n                }\n                return valueComp;\n            }, dataTypeOperators: {\n                number: ['lessThan', 'greaterThan', 'lessThanOrEqual', 'greaterThanOrEqual'],\n            }, dataTypeValueComponents: {\n                number: {\n                    lessThan: numberType,\n                    greaterThan: numberType,\n                    lessThanOrEqual: numberType,\n                    greaterThanOrEqual: numberType,\n                },\n            } });\n    }\n    static savedValueTypes(schema) {\n        const { boolean, string, number, object, array } = utils_1.componentValueTypes;\n        const { dataType, reference } = schema;\n        const types = (0, utils_1.getComponentSavedTypes)(schema);\n        if (types) {\n            return types;\n        }\n        if (reference) {\n            return [object];\n        }\n        if (dataType === 'object') {\n            return [object, array];\n        }\n        if (utils_1.componentValueTypes[dataType]) {\n            return [utils_1.componentValueTypes[dataType]];\n        }\n        return [boolean, string, number, object, array];\n    }\n    init() {\n        super.init();\n        this.templateData = {};\n        // Trigger an update.\n        let updateArgs = [];\n        const triggerUpdate = lodash_1.default.debounce((...args) => {\n            updateArgs = [];\n            return this.updateItems.apply(this, args);\n        }, 100);\n        this.triggerUpdate = (...args) => {\n            // Make sure we always resolve the previous promise before reassign it\n            if (typeof this.itemsLoadedResolve === 'function') {\n                this.itemsLoadedResolve();\n            }\n            this.itemsLoaded = new Promise((resolve) => {\n                this.itemsLoadedResolve = resolve;\n            });\n            if (args.length) {\n                updateArgs = args;\n            }\n            return triggerUpdate(...updateArgs);\n        };\n        // Keep track of the select options.\n        this.selectOptions = [];\n        if (this.itemsFromUrl) {\n            this.isFromSearch = false;\n            this.searchServerCount = null;\n            this.defaultServerCount = null;\n            this.isScrollLoading = false;\n            this.searchDownloadedResources = [];\n            this.defaultDownloadedResources = [];\n        }\n        // If this component has been activated.//\n        this.activated = false;\n        this.itemsLoaded = new Promise((resolve) => {\n            this.itemsLoadedResolve = resolve;\n        });\n        this.shouldPositionDropdown = this.hasDataGridAncestor();\n        if (this.isHtmlRenderMode()) {\n            this.activate();\n        }\n        // Get the template keys for this select component.\n        this.getTemplateKeys();\n    }\n    get defaultSchema() {\n        return SelectComponent.schema();\n    }\n    get emptyValue() {\n        if (this.component.multiple) {\n            return [];\n        }\n        // if select has JSON data source type, we are defining if empty value would be an object or a string by checking JSON's first item\n        if (this.component.dataSrc === 'json' && this.component.data.json) {\n            const firstItem = this.component.data.json[0];\n            let firstValue;\n            if (this.valueProperty) {\n                firstValue = lodash_1.default.get(firstItem, this.valueProperty);\n            }\n            else {\n                firstValue = firstItem;\n            }\n            if (firstValue && typeof firstValue === 'string') {\n                return '';\n            }\n            else {\n                return {};\n            }\n        }\n        if (this.valueProperty) {\n            return '';\n        }\n        return {};\n    }\n    get valueProperty() {\n        if (this.component.valueProperty) {\n            return this.component.valueProperty;\n        }\n        // Force values datasource to use values without actually setting it on the component settings.\n        if (this.component.dataSrc === 'values') {\n            return 'value';\n        }\n        return '';\n    }\n    get inputInfo() {\n        const info = super.elementInfo();\n        info.type = 'select';\n        info.changeEvent = 'change';\n        return info;\n    }\n    get isSelectResource() {\n        return this.component.dataSrc === 'resource';\n    }\n    get itemsFromUrl() {\n        return this.isSelectResource || this.isSelectURL;\n    }\n    get isInfiniteScrollProvided() {\n        return this.itemsFromUrl;\n    }\n    get shouldDisabled() {\n        return super.shouldDisabled || this.parentDisabled;\n    }\n    get shouldInitialLoad() {\n        if (this.component.widget === 'html5' &&\n            this.isEntireObjectDisplay() &&\n            this.component.searchField &&\n            this.dataValue) {\n            return false;\n        }\n        return super.shouldLoad;\n    }\n    get selectMetadata() {\n        return super.selectData;\n    }\n    get selectData() {\n        return this.selectMetadata || this.component.selectData;\n    }\n    isEntireObjectDisplay() {\n        return this.component.dataSrc === 'resource' && this.valueProperty === 'data';\n    }\n    selectValueAndLabel(data) {\n        const value = this.getOptionValue((this.isEntireObjectDisplay() && !this.itemValue(data)) ? data : this.itemValue(data));\n        return {\n            value,\n            label: this.itemTemplate((this.isEntireObjectDisplay() && !lodash_1.default.isObject(data.data)) ? { data: data } : data, value)\n        };\n    }\n    itemTemplate(data, value) {\n        if (!lodash_1.default.isNumber(data) && lodash_1.default.isEmpty(data)) {\n            return '';\n        }\n        // If they wish to show the value in read only mode, then just return the itemValue here.\n        if (this.options.readOnly && this.component.readOnlyValue) {\n            return this.itemValue(data);\n        }\n        // Perform a fast interpretation if we should not use the template.\n        if (data && !this.component.template) {\n            const itemLabel = data.label || data;\n            const value = (typeof itemLabel === 'string') ? this.t(itemLabel, { _userInput: true }) : itemLabel;\n            return this.sanitize(value, this.shouldSanitizeValue);\n        }\n        // Inside DataTable component won't have dataValue set\n        const shouldUseSelectData = (this.component.multiple && lodash_1.default.isArray(this.dataValue)\n            ? this.dataValue.find((val) => this.normalizeSingleValue(value) === val)\n            : (this.dataValue === this.normalizeSingleValue(value))) || this.inDataTable;\n        if (shouldUseSelectData) {\n            const selectData = this.selectData;\n            if (selectData) {\n                const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;\n                if (!this.templateData || !this.templateData[templateValue]) {\n                    this.getOptionTemplate(data, value);\n                }\n                if (this.component.multiple) {\n                    if (selectData[templateValue]) {\n                        data = selectData[templateValue];\n                    }\n                }\n                else {\n                    data = selectData;\n                }\n            }\n        }\n        if (typeof data === 'string' || typeof data === 'number') {\n            return this.sanitize(this.t(data, { _userInput: true }), this.shouldSanitizeValue);\n        }\n        if (Array.isArray(data)) {\n            return data.map((val) => {\n                if (typeof val === 'string' || typeof val === 'number') {\n                    return this.sanitize(this.t(val, { _userInput: true }), this.shouldSanitizeValue);\n                }\n                return val;\n            });\n        }\n        if (data.data) {\n            // checking additional fields in the template for the selected Entire Object option\n            const hasNestedFields = /item\\.data\\.\\w*/g.test(this.component.template);\n            data.data = this.isEntireObjectDisplay() && lodash_1.default.isObject(data.data) && !hasNestedFields\n                ? JSON.stringify(data.data)\n                : data.data;\n        }\n        return super.itemTemplate(data, value);\n    }\n    /**\n     * Adds an option to the select dropdown.\n     * @param {*} value - The value of the new option.\n     * @param {string} label - The label of the new option.\n     * @param {object} [attrs] - Additional value attributes. Defaults to {}.\n     * @param {string} [id] - An id. Defaults to a random string.\n     */\n    addOption(value, label, attrs = {}, id = (0, utils_1.getRandomComponentId)()) {\n        if (lodash_1.default.isNil(label))\n            return;\n        const idPath = this.component.idPath\n            ? this.component.idPath.split('.').reduceRight((obj, key) => ({ [key]: obj }), id)\n            : {};\n        const option = Object.assign({ value: this.getOptionValue(value), label }, idPath);\n        const skipOption = this.component.uniqueOptions\n            ? !!this.selectOptions.find((selectOption) => lodash_1.default.isEqual(selectOption.value, option.value))\n            : false;\n        if (skipOption) {\n            return;\n        }\n        if (value) {\n            this.selectOptions.push(option);\n        }\n        if (this.refs.selectContainer && (this.component.widget === 'html5')) {\n            // Replace an empty Object value to an empty String.\n            if (option.value && lodash_1.default.isObject(option.value) && lodash_1.default.isEmpty(option.value)) {\n                option.value = '';\n            }\n            // Add element to option so we can reference it later.\n            const div = document.createElement('div');\n            div.innerHTML = this.sanitize(this.renderTemplate('selectOption', {\n                selected: lodash_1.default.isEqual(this.getOptionValue(this.dataValue), option.value),\n                option,\n                attrs,\n                id,\n                useId: (this.valueProperty === '' || this.isEntireObjectDisplay()) && lodash_1.default.isObject(value) && id,\n            }), this.shouldSanitizeValue).trim();\n            option.element = div.firstChild;\n            this.refs.selectContainer.appendChild(option.element);\n        }\n    }\n    addValueOptions(items) {\n        items = items || [];\n        let added = false;\n        let data = this.dataValue;\n        // preset submission value with value property before request.\n        if (this.options.pdf && !items.length && this.component.dataSrc === 'url' && this.valueProperty) {\n            data = Array.isArray(data)\n                ? data.map(item => lodash_1.default.set({}, this.valueProperty, item))\n                : lodash_1.default.set({}, this.valueProperty, data);\n        }\n        if (!this.selectOptions.length) {\n            // Add the currently selected choices if they don't already exist.\n            const currentChoices = Array.isArray(data) && this.component.multiple ? data : [data];\n            added = this.addCurrentChoices(currentChoices, items);\n            if (!added && !this.component.multiple) {\n                this.addPlaceholder();\n            }\n        }\n        return added;\n    }\n    disableInfiniteScroll() {\n        if (!this.downloadedResources) {\n            return;\n        }\n        this.downloadedResources.serverCount = this.downloadedResources.length;\n        this.serverCount = this.downloadedResources.length;\n    }\n    /* eslint-disable max-statements */\n    setItems(items, fromSearch) {\n        var _a, _b;\n        this.selectItems = items;\n        // If the items is a string, then parse as JSON.\n        if (typeof items == 'string') {\n            try {\n                items = JSON.parse(items);\n            }\n            catch (err) {\n                console.warn(err.message);\n                items = [];\n            }\n        }\n        // Allow js processing (needed for form builder)\n        if (this.component.onSetItems) {\n            const newItems = typeof this.component.onSetItems === 'function'\n                ? this.component.onSetItems(this, items)\n                : this.evaluate(this.component.onSetItems, { items: items }, 'items');\n            if (newItems) {\n                items = newItems;\n            }\n        }\n        if (!this.choices && this.refs.selectContainer) {\n            this.empty(this.refs.selectContainer);\n        }\n        // If they provided select values, then we need to get them instead.\n        if (this.component.selectValues) {\n            items = lodash_1.default.get(items, this.component.selectValues, items) || [];\n        }\n        let areItemsEqual;\n        if (this.itemsFromUrl) {\n            areItemsEqual = this.isSelectURL ? lodash_1.default.isEqual(items, this.downloadedResources) : false;\n            const areItemsEnded = this.component.limit > items.length;\n            const areItemsDownloaded = areItemsEqual\n                && this.downloadedResources\n                && this.downloadedResources.length === items.length;\n            if (areItemsEnded) {\n                this.disableInfiniteScroll();\n            }\n            else if (areItemsDownloaded) {\n                this.selectOptions = [];\n            }\n            else {\n                this.serverCount = items.serverCount;\n            }\n        }\n        if (this.isScrollLoading && items) {\n            if (!areItemsEqual) {\n                this.downloadedResources = this.downloadedResources\n                    ? this.downloadedResources.concat(items)\n                    : items;\n            }\n            this.downloadedResources.serverCount = items.serverCount || this.downloadedResources.serverCount;\n        }\n        else {\n            this.downloadedResources = items || [];\n            this.selectOptions = [];\n            // If there is new select option with same id as already selected, set the new one\n            if (!lodash_1.default.isEmpty(this.dataValue) && this.component.idPath) {\n                const selectedOptionId = lodash_1.default.get(this.dataValue, this.component.idPath, null);\n                const newOptionWithSameId = !lodash_1.default.isNil(selectedOptionId) && items.find(item => {\n                    const itemId = lodash_1.default.get(item, this.component.idPath);\n                    return itemId === selectedOptionId;\n                });\n                if (newOptionWithSameId) {\n                    this.setValue(newOptionWithSameId);\n                }\n            }\n        }\n        // Add the value options.\n        if (!fromSearch) {\n            this.addValueOptions(items);\n        }\n        if (this.component.widget === 'html5' && !this.component.placeholder) {\n            this.addOption(null, '');\n        }\n        // Iterate through each of the items.\n        lodash_1.default.each(items, (item, index) => {\n            // preventing references of the components inside the form to the parent form when building forms\n            if (this.root && this.root.options.editForm && this.root.options.editForm._id && this.root.options.editForm._id === item._id)\n                return;\n            const itemValueAndLabel = this.selectValueAndLabel(item);\n            this.addOption(itemValueAndLabel.value, itemValueAndLabel.label, {}, lodash_1.default.get(item, this.component.idPath, String(index)));\n        });\n        if (this.choices) {\n            this.choices.setChoices(this.selectOptions, 'value', 'label', true);\n        }\n        else if (this.loading) {\n            // Re-attach select input.\n            // this.appendTo(this.refs.input[0], this.selectContainer);\n        }\n        // We are no longer loading.\n        this.isScrollLoading = false;\n        this.loading = false;\n        const searching = fromSearch && ((_b = (_a = this.choices) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.isFocussed);\n        if (!searching) {\n            // If a value is provided, then select it.\n            if (!this.isEmpty() || this.isRemoveButtonPressed) {\n                this.setValue(this.dataValue, {\n                    noUpdateEvent: true\n                });\n            }\n            else if (this.shouldAddDefaultValue && !this.options.readOnly) {\n                // If a default value is provided then select it.\n                const defaultValue = this.defaultValue;\n                if (!this.isEmpty(defaultValue)) {\n                    this.setValue(defaultValue);\n                }\n            }\n        }\n        // Say we are done loading the items.\n        this.itemsLoadedResolve();\n    }\n    getSingleItemValueForHTMLMode(data) {\n        var _a;\n        const option = (_a = this.selectOptions) === null || _a === void 0 ? void 0 : _a.find(({ value }) => lodash_1.default.isEqual(value, data));\n        if (option) {\n            return option.label || data;\n        }\n        return data;\n    }\n    itemValueForHTMLMode(value) {\n        if (!this.isHtmlRenderMode()) {\n            return super.itemValueForHTMLMode(value);\n        }\n        if (Array.isArray(value)) {\n            const values = value.map(item => Array.isArray(item)\n                ? this.itemValueForHTMLMode(item)\n                : this.getSingleItemValueForHTMLMode(item));\n            return values.join(', ');\n        }\n        return this.getSingleItemValueForHTMLMode(value);\n    }\n    /* eslint-enable max-statements */\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (!defaultValue && (this.component.defaultValue === false || this.component.defaultValue === 0)) {\n            defaultValue = this.component.defaultValue;\n        }\n        return defaultValue;\n    }\n    get loadingError() {\n        return !this.component.refreshOn && !this.component.refreshOnBlur && this.networkError;\n    }\n    loadItems(url, search, headers, options, method, body) {\n        options = options || {};\n        // See if we should load items or not.\n        if (!this.shouldLoad || (!this.itemsFromUrl && this.options.readOnly)) {\n            this.isScrollLoading = false;\n            this.loading = false;\n            this.itemsLoadedResolve();\n            return;\n        }\n        // See if they have not met the minimum search requirements.\n        const minSearch = parseInt(this.component.minSearch, 10);\n        if (this.component.searchField &&\n            (minSearch > 0) &&\n            (!search || (search.length < minSearch))) {\n            // Set empty items.\n            return this.setItems([]);\n        }\n        // Ensure we have a method and remove any body if method is get\n        method = method || 'GET';\n        if (method.toUpperCase() === 'GET') {\n            body = null;\n        }\n        const limit = this.component.limit || 100;\n        const skip = this.isScrollLoading ? this.selectOptions.length : 0;\n        const query = this.component.disableLimit ? {} : {\n            limit,\n            skip,\n        };\n        // Allow for url interpolation.\n        url = this.sanitize(this.interpolate(url, {\n            formioBase: Formio_1.Formio.getBaseUrl(),\n            search,\n            limit,\n            skip,\n            page: Math.abs(Math.floor(skip / limit))\n        }), this.shouldSanitizeValue);\n        // Add search capability.\n        if (this.component.searchField && search) {\n            const searchValue = Array.isArray(search)\n                ? search.join(',')\n                : typeof search === 'object'\n                    ? JSON.stringify(search)\n                    : search;\n            query[this.component.searchField] = this.component.searchField.endsWith('__regex')\n                ? lodash_1.default.escapeRegExp(searchValue)\n                : searchValue;\n        }\n        // If they wish to return only some fields.\n        if (this.component.selectFields) {\n            query.select = this.component.selectFields;\n        }\n        // Add sort capability\n        if (this.component.sort) {\n            query.sort = this.component.sort;\n        }\n        if (!lodash_1.default.isEmpty(query)) {\n            // Add the query string.\n            url += (!url.includes('?') ? '?' : '&') + Formio_1.Formio.serialize(query, (item) => this.interpolate(item));\n        }\n        // Add filter capability\n        if (this.component.filter) {\n            url += (!url.includes('?') ? '?' : '&') + this.interpolate(this.component.filter);\n        }\n        // Set ignoreCache if it is\n        options.ignoreCache = this.component.ignoreCache;\n        // Make the request.\n        options.header = headers;\n        this.loading = true;\n        Formio_1.Formio.makeRequest(this.options.formio, 'select', url, method, body, options)\n            .then((response) => {\n            this.loading = false;\n            this.setItems(response, !!search);\n        })\n            .catch((err) => {\n            if (this.itemsFromUrl) {\n                this.setItems([]);\n                this.disableInfiniteScroll();\n            }\n            this.isScrollLoading = false;\n            this.handleLoadingError(err);\n        });\n    }\n    handleLoadingError(err) {\n        this.loading = false;\n        if (err.networkError) {\n            this.networkError = true;\n        }\n        this.itemsLoadedResolve();\n        this.emit('componentError', {\n            component: this.component,\n            message: err.toString(),\n        });\n        console.warn(`Unable to load resources for ${this.key}`);\n    }\n    /**\n     * Get the request headers for this select dropdown.\n     * @returns {*} - Returns the request headers for this select dropdown.\n     */\n    get requestHeaders() {\n        // Create the headers object.\n        const headers = new Formio_1.Formio.Headers();\n        // Add custom headers to the url.\n        if (this.component.data && this.component.data.headers) {\n            try {\n                lodash_1.default.each(this.component.data.headers, (header) => {\n                    if (header.key) {\n                        headers.set(header.key, this.interpolate(header.value));\n                    }\n                });\n            }\n            catch (err) {\n                console.warn(err.message);\n            }\n        }\n        return headers;\n    }\n    getCustomItems() {\n        const customItems = this.evaluate(this.component.data.custom, {\n            values: []\n        }, 'values');\n        this.asyncValues = (0, utils_1.isPromise)(customItems);\n        return customItems;\n    }\n    asyncCustomValues() {\n        if (!lodash_1.default.isBoolean(this.asyncValues)) {\n            this.getCustomItems();\n        }\n        return this.asyncValues;\n    }\n    updateCustomItems(forceUpdate) {\n        if (this.asyncCustomValues()) {\n            if (!forceUpdate && !this.active) {\n                this.itemsLoadedResolve();\n                return;\n            }\n            this.loading = true;\n            this.getCustomItems()\n                .then(items => {\n                this.loading = false;\n                this.setItems(items || []);\n            })\n                .catch(err => {\n                this.handleLoadingError(err);\n            });\n        }\n        else {\n            this.setItems(this.getCustomItems() || []);\n        }\n    }\n    isEmpty(value = this.dataValue) {\n        return super.isEmpty(value) || value === undefined;\n    }\n    refresh(value, { instance }) {\n        if (this.component.clearOnRefresh && (instance && !instance.pristine)) {\n            this.setValue(this.emptyValue);\n        }\n        this.updateItems(null, true);\n    }\n    get additionalResourcesAvailable() {\n        return lodash_1.default.isNil(this.serverCount) || (this.serverCount > this.downloadedResources.length);\n    }\n    get serverCount() {\n        if (this.isFromSearch) {\n            return this.searchServerCount;\n        }\n        return this.defaultServerCount;\n    }\n    set serverCount(value) {\n        if (this.isFromSearch) {\n            this.searchServerCount = value;\n        }\n        else {\n            this.defaultServerCount = value;\n        }\n    }\n    get downloadedResources() {\n        if (this.isFromSearch) {\n            return this.searchDownloadedResources;\n        }\n        return this.defaultDownloadedResources;\n    }\n    set downloadedResources(value) {\n        if (this.isFromSearch) {\n            this.searchDownloadedResources = value;\n        }\n        else {\n            this.defaultDownloadedResources = value;\n        }\n    }\n    addPlaceholder() {\n        if (!this.component.placeholder) {\n            return;\n        }\n        this.addOption('', this.component.placeholder, { placeholder: true });\n    }\n    /**\n     * Activate this select control.\n     */\n    activate() {\n        if (this.loading || !this.active) {\n            this.setLoadingItem();\n        }\n        if (this.active) {\n            return;\n        }\n        this.activated = true;\n        this.triggerUpdate();\n    }\n    setLoadingItem(addToCurrentList = false) {\n        if (this.choices) {\n            if (addToCurrentList) {\n                this.choices.setChoices([{\n                        value: `${this.id}-loading`,\n                        label: 'Loading...',\n                        disabled: true,\n                    }], 'value', 'label');\n            }\n            else {\n                this.choices.setChoices([{\n                        value: '',\n                        label: `<i class=\"${this.iconClass('refresh')}\" style=\"font-size:1.3em;\"></i>`,\n                        disabled: true,\n                    }], 'value', 'label', true);\n            }\n        }\n        else if (this.component.dataSrc === 'url' || this.component.dataSrc === 'resource') {\n            this.addOption('', this.t('loading...'));\n        }\n    }\n    get active() {\n        return !this.component.lazyLoad || this.activated;\n    }\n    render() {\n        const info = this.inputInfo;\n        info.attr = info.attr || {};\n        info.multiple = this.component.multiple;\n        return super.render(this.wrapElement(this.renderTemplate('select', {\n            input: info,\n            selectOptions: '',\n            index: null,\n        })));\n    }\n    wrapElement(element) {\n        return this.component.addResource && !this.options.readOnly\n            ? (this.renderTemplate('resourceAdd', {\n                element\n            }))\n            : element;\n    }\n    choicesOptions() {\n        const useSearch = this.component.hasOwnProperty('searchEnabled') ? this.component.searchEnabled : true;\n        const placeholderValue = this.t(this.component.placeholder, { _userInput: true });\n        let customOptions = this.component.customOptions || {};\n        if (typeof customOptions == 'string') {\n            try {\n                customOptions = JSON.parse(customOptions);\n            }\n            catch (err) {\n                console.warn(err.message);\n                customOptions = {};\n            }\n        }\n        const commonFuseOptions = {\n            maxPatternLength: 1000,\n            distance: 1000,\n        };\n        return Object.assign({ removeItemButton: this.component.disabled ? false : lodash_1.default.get(this.component, 'removeItemButton', true), itemSelectText: '', classNames: {\n                containerOuter: 'choices form-group formio-choices',\n                containerInner: this.transform('class', 'form-control ui fluid selection dropdown')\n            }, addItemText: false, allowHTML: true, placeholder: !!this.component.placeholder, placeholderValue: placeholderValue, noResultsText: this.t('No results found'), noChoicesText: this.t('No choices to choose from'), searchPlaceholderValue: this.t('Type to search'), shouldSort: false, position: (this.component.dropdown || 'auto'), searchEnabled: useSearch, searchChoices: !this.component.searchField, searchFields: lodash_1.default.get(this, 'component.searchFields', ['label']), shadowRoot: this.root ? this.root.shadowRoot : null, fuseOptions: this.component.useExactSearch\n                ? Object.assign({ tokenize: true, matchAllTokens: true }, commonFuseOptions) : Object.assign({}, lodash_1.default.get(this, 'component.fuseOptions', {}), Object.assign({ include: 'score', threshold: lodash_1.default.get(this, 'component.selectThreshold', 0.3) }, commonFuseOptions)), valueComparer: lodash_1.default.isEqual, resetScrollPosition: false }, customOptions);\n    }\n    /* eslint-disable max-statements */\n    attach(element) {\n        var _a, _b, _c;\n        const superAttach = super.attach(element);\n        this.loadRefs(element, {\n            selectContainer: 'single',\n            addResource: 'single',\n            autocompleteInput: 'single'\n        });\n        //enable autocomplete for select\n        const autocompleteInput = this.refs.autocompleteInput;\n        if (autocompleteInput) {\n            this.addEventListener(autocompleteInput, 'change', (event) => {\n                this.setValue(event.target.value);\n            });\n        }\n        const input = this.refs.selectContainer;\n        if (!input) {\n            return;\n        }\n        this.addEventListener(input, this.inputInfo.changeEvent, () => this.updateValue(null, {\n            modified: true\n        }));\n        this.attachRefreshOnBlur();\n        if (this.component.widget === 'html5') {\n            this.addFocusBlurEvents(input);\n            this.triggerUpdate(null, true);\n            if (this.visible) {\n                this.setItems(this.selectItems || []);\n            }\n            this.focusableElement = input;\n            if (this.component.dataSrc === 'custom') {\n                this.addEventListener(input, 'focus', () => this.updateCustomItems());\n            }\n            this.addEventListener(input, 'keydown', (event) => {\n                const { key } = event;\n                if (['Backspace', 'Delete'].includes(key)) {\n                    this.setValue(this.emptyValue);\n                }\n            });\n            return;\n        }\n        const tabIndex = input.tabIndex;\n        this.addPlaceholder();\n        if (this.i18next) {\n            input.setAttribute('dir', this.i18next.dir());\n        }\n        if ((_c = (_b = (_a = this.choices) === null || _a === void 0 ? void 0 : _a.containerOuter) === null || _b === void 0 ? void 0 : _b.element) === null || _c === void 0 ? void 0 : _c.parentNode) {\n            this.choices.destroy();\n        }\n        const choicesOptions = this.choicesOptions();\n        if (ChoicesWrapper_1.default) {\n            this.choices = new ChoicesWrapper_1.default(input, choicesOptions);\n            if (this.selectOptions && this.selectOptions.length) {\n                this.choices.setChoices(this.selectOptions, 'value', 'label', true);\n            }\n            if (this.component.multiple) {\n                this.focusableElement = this.choices.input.element;\n            }\n            else {\n                this.focusableElement = this.choices.containerInner.element;\n                this.choices.containerOuter.element.setAttribute('tabIndex', '-1');\n                this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());\n            }\n            Input_1.default.prototype.addFocusBlurEvents.call(this, this.focusableElement);\n            if (this.itemsFromUrl && !this.component.noRefreshOnScroll) {\n                this.scrollList = this.choices.choiceList.element;\n                this.addEventListener(this.scrollList, 'scroll', () => this.onScroll());\n            }\n            if (choicesOptions.removeItemButton) {\n                this.addEventListener(input, 'removeItem', () => {\n                    this.isRemoveButtonPressed = true;\n                });\n            }\n        }\n        if (window && this.choices && this.shouldPositionDropdown) {\n            this.addEventListener(window.document, 'scroll', () => {\n                this.positionDropdown(true);\n            }, false, true);\n        }\n        this.focusableElement.setAttribute('tabIndex', tabIndex);\n        // If a search field is provided, then add an event listener to update items on search.\n        if (this.component.searchField) {\n            // Make sure to clear the search when no value is provided.\n            if (this.choices && this.choices.input && this.choices.input.element) {\n                this.addEventListener(this.choices.input.element, 'input', (event) => {\n                    this.isFromSearch = !!event.target.value;\n                    if (!event.target.value) {\n                        this.triggerUpdate();\n                    }\n                    else {\n                        this.serverCount = null;\n                        this.downloadedResources = [];\n                    }\n                });\n            }\n            this.addEventListener(input, 'choice', () => {\n                if (this.component.multiple && this.component.dataSrc === 'resource' && this.isFromSearch) {\n                    this.triggerUpdate();\n                }\n                this.isFromSearch = false;\n            });\n            // avoid spamming the resource/url endpoint when we have server side filtering enabled.\n            const debounceTimeout = this.component.searchField && (this.isSelectResource || this.isSelectURL) ?\n                (this.component.searchDebounce === 0 ? 0 : this.component.searchDebounce || this.defaultSchema.searchDebounce) * 1000\n                : 0;\n            const updateComponent = (evt) => {\n                this.triggerUpdate(evt.detail.value);\n            };\n            this.addEventListener(input, 'search', lodash_1.default.debounce((e) => {\n                updateComponent(e);\n                this.positionDropdown();\n            }, debounceTimeout));\n            this.addEventListener(input, 'stopSearch', () => this.triggerUpdate());\n            this.addEventListener(input, 'hideDropdown', () => {\n                if (this.choices && this.choices.input && this.choices.input.element) {\n                    this.choices.input.element.value = '';\n                }\n                this.updateItems(null, true);\n            });\n        }\n        this.addEventListener(input, 'showDropdown', () => {\n            this.update();\n            this.positionDropdown();\n        });\n        if (this.shouldPositionDropdown) {\n            this.addEventListener(input, 'highlightChoice', () => {\n                this.positionDropdown();\n            });\n        }\n        if (this.choices && choicesOptions.placeholderValue && this.choices._isSelectOneElement) {\n            this.addPlaceholderItem(choicesOptions.placeholderValue);\n            this.addEventListener(input, 'removeItem', () => {\n                this.addPlaceholderItem(choicesOptions.placeholderValue);\n            });\n        }\n        // Add value options.\n        this.addValueOptions();\n        this.setChoicesValue(this.dataValue);\n        if (this.isSelectResource && this.refs.addResource) {\n            this.addEventListener(this.refs.addResource, 'click', (event) => {\n                event.preventDefault();\n                const formioForm = this.ce('div');\n                const dialog = this.createModal(formioForm);\n                const projectUrl = lodash_1.default.get(this.root, 'formio.projectUrl', Formio_1.Formio.getProjectUrl());\n                const formUrl = `${projectUrl}/form/${this.component.data.resource}`;\n                new Form_1.default(formioForm, formUrl, {}).ready\n                    .then((form) => {\n                    form.on('submit', (submission) => {\n                        // If valueProperty is set, replace the submission with the corresponding value\n                        let value = this.valueProperty ? lodash_1.default.get(submission, this.valueProperty) : submission;\n                        if (this.component.multiple) {\n                            value = [...this.dataValue, value];\n                        }\n                        this.setValue(value);\n                        this.triggerUpdate();\n                        dialog.close();\n                    });\n                });\n            });\n        }\n        // Force the disabled state with getters and setters.\n        this.disabled = this.shouldDisabled;\n        this.triggerUpdate();\n        return superAttach;\n    }\n    setDropdownPosition() {\n        var _a, _b, _c, _d;\n        const dropdown = (_b = (_a = this.choices) === null || _a === void 0 ? void 0 : _a.dropdown) === null || _b === void 0 ? void 0 : _b.element;\n        const container = (_d = (_c = this.choices) === null || _c === void 0 ? void 0 : _c.containerOuter) === null || _d === void 0 ? void 0 : _d.element;\n        if (!dropdown || !container) {\n            return;\n        }\n        const containerPosition = container.getBoundingClientRect();\n        const isFlipped = container.classList.contains('is-flipped');\n        lodash_1.default.assign(dropdown.style, {\n            top: `${isFlipped ? containerPosition.top - dropdown.offsetHeight : containerPosition.top + containerPosition.height}px`,\n            left: `${containerPosition.left}px`,\n            width: `${containerPosition.width}px`,\n            position: 'fixed',\n            bottom: 'unset',\n            right: 'unset',\n        });\n    }\n    hasDataGridAncestor(comp) {\n        comp = comp || this;\n        if (comp.inDataGrid || comp.type === 'datagrid') {\n            return true;\n        }\n        else if (comp.parent) {\n            return this.hasDataGridAncestor(comp.parent);\n        }\n        else {\n            return false;\n        }\n    }\n    positionDropdown(scroll) {\n        var _a;\n        if (!this.shouldPositionDropdown || !this.choices || (!((_a = this.choices.dropdown) === null || _a === void 0 ? void 0 : _a.isActive) && scroll)) {\n            return;\n        }\n        this.setDropdownPosition();\n        this.itemsLoaded.then(() => {\n            this.setDropdownPosition();\n        });\n    }\n    get isLoadingAvailable() {\n        return !this.isScrollLoading && this.additionalResourcesAvailable;\n    }\n    onScroll() {\n        if (this.isLoadingAvailable) {\n            this.isScrollLoading = true;\n            this.setLoadingItem(true);\n            this.triggerUpdate(this.choices.input.element.value);\n        }\n    }\n    attachRefreshOnBlur() {\n        if (this.component.refreshOnBlur) {\n            this.on('blur', (instance) => {\n                this.checkRefreshOn([{ instance, value: instance.dataValue }], { fromBlur: true });\n            });\n        }\n    }\n    addPlaceholderItem(placeholderValue) {\n        const items = this.choices._store.activeItems;\n        if (!items.length) {\n            this.choices._addItem({\n                value: '',\n                label: placeholderValue,\n                choiceId: 0,\n                groupId: -1,\n                customProperties: null,\n                placeholder: true,\n                keyCode: null\n            });\n        }\n    }\n    /* eslint-enable max-statements */\n    update() {\n        if (this.component.dataSrc === 'custom') {\n            this.updateCustomItems();\n        }\n        // Activate the control.\n        this.activate();\n    }\n    set disabled(disabled) {\n        super.disabled = disabled;\n        if (!this.choices) {\n            return;\n        }\n        if (disabled) {\n            this.setDisabled(this.choices.containerInner.element, true);\n            this.focusableElement.removeAttribute('tabIndex');\n            this.choices.disable();\n        }\n        else {\n            this.setDisabled(this.choices.containerInner.element, false);\n            this.focusableElement.setAttribute('tabIndex', this.component.tabindex || 0);\n            this.choices.enable();\n        }\n    }\n    get disabled() {\n        return super.disabled;\n    }\n    set visible(value) {\n        // If we go from hidden to visible, trigger a refresh.\n        if (value && (!this._visible !== !value)) {\n            this.triggerUpdate();\n        }\n        super.visible = value;\n    }\n    get visible() {\n        return super.visible;\n    }\n    addCurrentChoices(values, items, keyValue) {\n        if (!values) {\n            return false;\n        }\n        const notFoundValuesToAdd = [];\n        const added = values.reduce((defaultAdded, value) => {\n            if (!value || lodash_1.default.isEmpty(value)) {\n                return defaultAdded;\n            }\n            let found = false;\n            // Make sure that `items` and `this.selectOptions` points\n            // to the same reference. Because `this.selectOptions` is\n            // internal property and all items are populated by\n            // `this.addOption` method, we assume that items has\n            // 'label' and 'value' properties. This assumption allows\n            // us to read correct value from the item.\n            const isSelectOptions = items === this.selectOptions;\n            if (items && items.length) {\n                lodash_1.default.each(items, (choice) => {\n                    if (choice._id && value._id && (choice._id === value._id)) {\n                        found = true;\n                        return false;\n                    }\n                    const itemValue = keyValue ? choice.value : this.itemValue(choice, isSelectOptions);\n                    found |= lodash_1.default.isEqual(itemValue, value);\n                    return found ? false : true;\n                });\n            }\n            // Add the default option if no item is found.\n            if (!found) {\n                notFoundValuesToAdd.push(this.selectValueAndLabel(value));\n                return true;\n            }\n            return found || defaultAdded;\n        }, false);\n        if (notFoundValuesToAdd.length) {\n            if (this.choices) {\n                this.choices.setChoices(notFoundValuesToAdd, 'value', 'label');\n            }\n            notFoundValuesToAdd.map(notFoundValue => {\n                this.addOption(notFoundValue.value, notFoundValue.label);\n            });\n        }\n        return added;\n    }\n    getValueAsString(data, options) {\n        return (this.component.multiple && Array.isArray(data))\n            ? data.map((v) => this.asString(v, options)).join(', ')\n            : this.asString(data, options);\n    }\n    getValue() {\n        // If the widget isn't active.\n        if (this.viewOnly || this.loading\n            || (!this.component.lazyLoad && !this.selectOptions.length)\n            || !this.element) {\n            return this.dataValue;\n        }\n        let value = this.emptyValue;\n        if (this.choices) {\n            value = this.choices.getValue(true);\n            // Make sure we don't get the placeholder\n            if (!this.component.multiple &&\n                this.component.placeholder &&\n                (value === this.t(this.component.placeholder, { _userInput: true }))) {\n                value = this.emptyValue;\n            }\n        }\n        else if (this.refs.selectContainer) {\n            value = this.refs.selectContainer.value;\n            if (this.valueProperty === '' || this.isEntireObjectDisplay()) {\n                if (value === '') {\n                    return {};\n                }\n                const option = this.selectOptions[value] ||\n                    this.selectOptions.find(option => option.id === value);\n                if (option && lodash_1.default.isObject(option.value)) {\n                    value = option.value;\n                }\n            }\n        }\n        else {\n            value = this.dataValue;\n        }\n        // Choices will return undefined if nothing is selected. We really want '' to be empty.\n        if (value === undefined || value === null) {\n            value = '';\n        }\n        return value;\n    }\n    redraw() {\n        const done = super.redraw();\n        this.triggerUpdate();\n        return done;\n    }\n    normalizeSingleValue(value) {\n        if (lodash_1.default.isNil(value)) {\n            return;\n        }\n        const valueIsObject = lodash_1.default.isObject(value);\n        //check if value equals to default emptyValue\n        if (valueIsObject && Object.keys(value).length === 0) {\n            return value;\n        }\n        const dataType = this.component.dataType || 'auto';\n        const normalize = {\n            value,\n            number() {\n                const numberValue = Number(this.value);\n                const isEquivalent = value.toString() === numberValue.toString();\n                if (!Number.isNaN(numberValue) && Number.isFinite(numberValue) && value !== '' && isEquivalent) {\n                    this.value = numberValue;\n                }\n                return this;\n            },\n            boolean() {\n                if (lodash_1.default.isString(this.value)\n                    && (this.value.toLowerCase() === 'true'\n                        || this.value.toLowerCase() === 'false')) {\n                    this.value = (this.value.toLowerCase() === 'true');\n                }\n                return this;\n            },\n            string() {\n                this.value = String(this.value);\n                return this;\n            },\n            object() {\n                return this;\n            },\n            auto() {\n                if (lodash_1.default.isObject(this.value)) {\n                    this.value = this.object().value;\n                }\n                else {\n                    this.value = this.string().number().boolean().value;\n                }\n                return this;\n            }\n        };\n        try {\n            return normalize[dataType]().value;\n        }\n        catch (err) {\n            console.warn('Failed to normalize value', err);\n            return value;\n        }\n    }\n    /**\n     * Normalize values coming into updateValue. For example, depending on the configuration, string value `\"true\"` will be normalized to boolean `true`.\n     * @param {*} value - The value to normalize\n     * @returns {*} - Returns the normalized value\n     */\n    normalizeValue(value) {\n        if (this.component.multiple && Array.isArray(value)) {\n            return value.map((singleValue) => this.normalizeSingleValue(singleValue));\n        }\n        return super.normalizeValue(this.normalizeSingleValue(value));\n    }\n    setMetadata(value, flags = {}) {\n        var _a, _b;\n        if (lodash_1.default.isNil(value)) {\n            return;\n        }\n        const valueIsObject = lodash_1.default.isObject(value);\n        //check if value equals to default emptyValue\n        if (valueIsObject && Object.keys(value).length === 0) {\n            return value;\n        }\n        // Check to see if we need to save off the template data into our metadata.\n        const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;\n        const shouldSaveData = (!valueIsObject || this.component.reference) && !this.inDataTable;\n        if (!lodash_1.default.isNil(templateValue) && shouldSaveData && this.templateData && this.templateData[templateValue] && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submission)) {\n            const submission = this.root.submission;\n            if (!submission.metadata) {\n                submission.metadata = {};\n            }\n            if (!submission.metadata.selectData) {\n                submission.metadata.selectData = {};\n            }\n            let templateData = this.templateData[templateValue];\n            if (this.component.multiple) {\n                templateData = {};\n                const dataValue = this.dataValue;\n                if (dataValue && lodash_1.default.isArray(dataValue) && dataValue.length) {\n                    dataValue.forEach((dataValueItem) => {\n                        const dataValueItemValue = this.component.reference ? dataValueItem._id.toString() : dataValueItem;\n                        templateData[dataValueItemValue] = this.templateData[dataValueItemValue];\n                    });\n                }\n                templateData[value] = this.templateData[value];\n            }\n            lodash_1.default.set(submission.metadata.selectData, this.path, templateData);\n        }\n        if (flags.resetValue && ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submission) && !this.options.readOnly) {\n            const submission = this.root.submission;\n            if (!submission.metadata) {\n                submission.metadata = {};\n            }\n            submission.metadata.selectData = {};\n        }\n    }\n    updateValue(value, flags) {\n        const changed = super.updateValue(value, flags);\n        if (changed || !this.selectMetadata || flags.resetValue) {\n            if (this.component.multiple && Array.isArray(this.dataValue)) {\n                this.dataValue.forEach(singleValue => this.setMetadata(singleValue, flags));\n            }\n            else {\n                this.setMetadata(this.dataValue, flags);\n            }\n        }\n        return changed;\n    }\n    undoValueTyping(value) {\n        let untypedValue = value;\n        if (this.component.multiple && Array.isArray(value)) {\n            untypedValue = value.map(v => {\n                if (typeof v === 'boolean' || typeof v === 'number') {\n                    return v.toString();\n                }\n                return v;\n            });\n        }\n        else {\n            if (typeof value === 'boolean' || typeof value === 'number') {\n                untypedValue = value.toString();\n            }\n        }\n        return untypedValue;\n    }\n    setValue(value, flags = {}) {\n        const previousValue = this.dataValue;\n        const changed = this.updateValue(value, flags);\n        if (this.component.widget === 'html5' && (lodash_1.default.isEqual(value, previousValue) || lodash_1.default.isEqual(previousValue, {}) && lodash_1.default.isEqual(flags, {})) && !flags.fromSubmission) {\n            return false;\n        }\n        value = this.dataValue;\n        const hasPreviousValue = !this.isEmpty(previousValue);\n        const hasValue = !this.isEmpty(value);\n        // Undo typing when searching to set the value.\n        value = this.undoValueTyping(value);\n        if (this.isHtmlRenderMode() && flags && flags.fromSubmission && changed) {\n            this.itemsLoaded.then(() => {\n                this.redraw();\n            });\n            return changed;\n        }\n        // Do not set the value if we are loading... that will happen after it is done.\n        if (this.loading) {\n            return changed;\n        }\n        // Determine if we need to perform an initial lazyLoad api call if searchField is provided.\n        if (this.isInitApiCallNeeded(hasValue)) {\n            this.loading = true;\n            this.lazyLoadInit = true;\n            const searchProperty = this.component.searchField || this.component.valueProperty;\n            this.triggerUpdate(lodash_1.default.get(value.data || value, searchProperty, value), true);\n            return changed;\n        }\n        // Add the value options.\n        this.itemsLoaded.then(() => {\n            this.addValueOptions();\n            this.setChoicesValue(value, hasPreviousValue, flags);\n        });\n        return changed;\n    }\n    isInitApiCallNeeded(hasValue) {\n        return this.component.lazyLoad &&\n            !this.lazyLoadInit &&\n            !this.active &&\n            !this.selectOptions.length &&\n            hasValue &&\n            this.shouldInitialLoad &&\n            this.visible && (this.component.searchField || this.component.valueProperty);\n    }\n    setChoicesValue(value, hasPreviousValue, flags = {}) {\n        const hasValue = !this.isEmpty(value) || flags.fromSubmission;\n        hasPreviousValue = (hasPreviousValue === undefined) ? true : hasPreviousValue;\n        if (this.choices) {\n            // Now set the value.\n            if (hasValue) {\n                this.choices.removeActiveItems();\n                // Add the currently selected choices if they don't already exist.\n                const currentChoices = Array.isArray(value) && this.component.multiple ? value : [value];\n                if (!this.addCurrentChoices(currentChoices, this.selectOptions, true)) {\n                    this.choices.setChoices(this.selectOptions, 'value', 'label', true);\n                }\n                this.choices.setChoiceByValue(currentChoices);\n            }\n            else if (hasPreviousValue || flags.resetValue) {\n                this.choices.removeActiveItems();\n            }\n        }\n        else {\n            if (hasValue) {\n                const values = Array.isArray(value) ? value : [value];\n                if (!lodash_1.default.isEqual(this.dataValue, this.defaultValue) && this.selectOptions.length < 2\n                    || (this.selectData && flags.fromSubmission)) {\n                    const { value, label } = this.selectValueAndLabel(this.dataValue);\n                    this.addOption(value, label);\n                }\n                lodash_1.default.each(this.selectOptions, (selectOption) => {\n                    lodash_1.default.each(values, (val) => {\n                        if (selectOption.value === '') {\n                            selectOption.value = {};\n                        }\n                        if (lodash_1.default.isEqual(val, selectOption.value) && selectOption.element) {\n                            selectOption.element.selected = true;\n                            selectOption.element.setAttribute('selected', 'selected');\n                            return false;\n                        }\n                    });\n                });\n            }\n            else {\n                lodash_1.default.each(this.selectOptions, (selectOption) => {\n                    if (selectOption.element) {\n                        selectOption.element.selected = false;\n                        selectOption.element.removeAttribute('selected');\n                    }\n                });\n            }\n        }\n    }\n    validateValueAvailability(setting, value) {\n        if (!(0, utils_1.boolValue)(setting) || !value) {\n            return true;\n        }\n        const values = this.getOptionsValues();\n        if (values) {\n            if (lodash_1.default.isObject(value)) {\n                const compareComplexValues = (optionValue) => {\n                    const normalizedOptionValue = this.normalizeSingleValue(optionValue);\n                    if (!lodash_1.default.isObject(normalizedOptionValue)) {\n                        return false;\n                    }\n                    try {\n                        return (JSON.stringify(normalizedOptionValue) === JSON.stringify(value));\n                    }\n                    catch (err) {\n                        console.warn.error('Error while comparing items', err);\n                        return false;\n                    }\n                };\n                return values.findIndex((optionValue) => compareComplexValues(optionValue)) !== -1;\n            }\n            return values.findIndex((optionValue) => this.normalizeSingleValue(optionValue) === value) !== -1;\n        }\n        return false;\n    }\n    /**\n     * Performs required transformations on the initial value to use in selectOptions\n     * @param {*} value - The value to transform.\n     * @returns {*} - Returns the options value.\n     */\n    getOptionValue(value) {\n        return lodash_1.default.isObject(value) && this.isEntireObjectDisplay()\n            ? this.normalizeSingleValue(value)\n            : lodash_1.default.isObject(value) && (this.valueProperty || this.component.key !== 'resource')\n                ? value\n                : lodash_1.default.isObject(value) && !this.valueProperty\n                    ? this.interpolate(this.component.template, { item: value }).replace(/<\\/?[^>]+(>|$)/g, '')\n                    : lodash_1.default.isNull(value)\n                        ? this.emptyValue\n                        : String(this.normalizeSingleValue(value));\n    }\n    /**\n     * If component has static values (values, json) or custom values, returns an array of them\n     * @returns {Array<*>|undefined} - Returns an array of the static or custom values.\n     */\n    getOptionsValues() {\n        let rawItems = [];\n        switch (this.component.dataSrc) {\n            case 'values':\n                rawItems = this.component.data.values;\n                break;\n            case 'json':\n                rawItems = this.component.data.json;\n                break;\n            case 'custom':\n                rawItems = this.getCustomItems();\n                break;\n            case 'url':\n                rawItems = this.selectItems;\n                break;\n        }\n        if (typeof rawItems === 'string') {\n            try {\n                rawItems = JSON.parse(rawItems);\n            }\n            catch (err) {\n                console.warn(err.message);\n                rawItems = [];\n            }\n        }\n        if (!Array.isArray(rawItems)) {\n            return;\n        }\n        return rawItems.map((item) => this.getOptionValue(this.itemValue(item)));\n    }\n    /**\n     * Deletes the value of the component.\n     */\n    deleteValue() {\n        this.setValue('', {\n            noUpdateEvent: true\n        });\n        this.unset();\n    }\n    /**\n     * Check if a component is eligible for multiple validation\n     * @returns {boolean} - Returns FALSE for select components.\n     */\n    validateMultiple() {\n        // Select component will contain one input when flagged as multiple.\n        return false;\n    }\n    /**\n     * Output this select dropdown as a string value.\n     * @returns {*}\n     */\n    isBooleanOrNumber(value) {\n        return typeof value === 'number' || typeof value === 'boolean';\n    }\n    getNormalizedValues() {\n        if (!this.component || !this.component.data || !this.component.data.values) {\n            return;\n        }\n        return this.component.data.values.map(value => ({ label: value.label, value: String(this.normalizeSingleValue(value.value)) }));\n    }\n    asString(value, options = {}) {\n        var _a;\n        value = value !== null && value !== void 0 ? value : this.getValue();\n        if (options.modalPreview || this.inDataTable) {\n            if (this.inDataTable) {\n                value = this.undoValueTyping(value);\n            }\n            const templateValue = (this.isEntireObjectDisplay() && !lodash_1.default.isObject(value.data)) ? { data: value } : value;\n            const template = this.itemTemplate(templateValue, value, options);\n            return template;\n        }\n        //need to convert values to strings to be able to compare values with available options that are strings\n        const convertToString = (data, valueProperty) => {\n            if (valueProperty) {\n                if (Array.isArray(data)) {\n                    data.forEach((item) => item[valueProperty] = item[valueProperty].toString());\n                }\n                else if (lodash_1.default.isObject(data)) {\n                    data[valueProperty] = data[valueProperty].toString();\n                }\n                return data;\n            }\n            if (this.isBooleanOrNumber(data)) {\n                data = data.toString();\n            }\n            if (Array.isArray(data) && data.some(item => this.isBooleanOrNumber(item))) {\n                data = data.map(item => this.isBooleanOrNumber(item) ? item.toString() : item);\n            }\n            return data;\n        };\n        value = convertToString(value);\n        if (['values', 'custom'].includes(this.component.dataSrc) && !this.asyncCustomValues()) {\n            const { items, valueProperty, } = this.component.dataSrc === 'values'\n                ? {\n                    items: convertToString(this.getNormalizedValues(), 'value'),\n                    valueProperty: 'value',\n                }\n                : {\n                    items: convertToString(this.getCustomItems(), this.valueProperty),\n                    valueProperty: this.valueProperty,\n                };\n            const getFromValues = () => {\n                const initialValue = lodash_1.default.find(items, [valueProperty, value]);\n                const values = this.defaultSchema.data.values || [];\n                return lodash_1.default.isEqual(initialValue, values[0]) ? '-' : initialValue;\n            };\n            value = (this.component.multiple && Array.isArray(value))\n                ? lodash_1.default.filter(items, (item) => value.includes(item.value))\n                : (valueProperty && items)\n                    ? (_a = getFromValues()) !== null && _a !== void 0 ? _a : { value, label: value }\n                    : value;\n        }\n        if (lodash_1.default.isString(value)) {\n            return value;\n        }\n        const getTemplateValue = (v) => {\n            const itemTemplate = this.itemTemplate(v);\n            return options.csv && itemTemplate\n                ? (0, utils_1.removeHTML)(itemTemplate)\n                : itemTemplate;\n        };\n        if (Array.isArray(value)) {\n            const items = [];\n            value.forEach(item => items.push(getTemplateValue(item)));\n            if (this.component.dataSrc === 'resource' && items.length > 0) {\n                return items.join(', ');\n            }\n            else if (items.length > 0) {\n                return items.join('<br />');\n            }\n            else {\n                return '-';\n            }\n        }\n        if (this.isEntireObjectDisplay() && lodash_1.default.isObject(value)) {\n            return JSON.stringify(value);\n        }\n        return !lodash_1.default.isNil(value)\n            ? getTemplateValue(value)\n            : '-';\n    }\n    detach() {\n        var _a, _b;\n        this.off('blur');\n        if (this.choices) {\n            if ((_b = (_a = this.choices.containerOuter) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.parentNode) {\n                this.choices.destroy();\n            }\n            this.choices = null;\n        }\n        super.detach();\n    }\n    focus() {\n        super.focus.call(this);\n        if (this.focusableElement) {\n            this.focusableElement.focus();\n        }\n    }\n    setErrorClasses(elements, dirty, hasError, hasMessages, element = this.element) {\n        super.setErrorClasses(elements, dirty, hasError, hasMessages, element);\n        if (this.choices) {\n            super.setErrorClasses([this.choices.containerInner.element], dirty, hasError, hasMessages, element);\n        }\n        else {\n            super.setErrorClasses([this.refs.selectContainer], dirty, hasError, hasMessages, element);\n        }\n    }\n}\nexports[\"default\"] = SelectComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/select/Select.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst ListComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/list/ListComponent */ \"./lib/cjs/components/_classes/list/ListComponent.js\"));\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst Form_1 = __importDefault(__webpack_require__(/*! ../../Form */ \"./lib/cjs/Form.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./lib/cjs/utils/index.js\");\nconst ChoicesWrapper_1 = __importDefault(__webpack_require__(/*! ../../utils/ChoicesWrapper */ \"./lib/cjs/utils/ChoicesWrapper.js\"));\nclass SelectComponent extends ListComponent_1.default {\n    static schema(...extend) {\n        return ListComponent_1.default.schema({\n            type: 'select',\n            label: 'Select',\n            key: 'select',\n            idPath: 'id',\n            data: {\n                values: [{ label: '', value: '' }],\n                json: '',\n                url: '',\n                resource: '',\n                custom: ''\n            },\n            clearOnRefresh: false,\n            limit: 100,\n            valueProperty: '',\n            lazyLoad: true,\n            filter: '',\n            searchEnabled: true,\n            searchDebounce: 0.3,\n            searchField: '',\n            minSearch: 0,\n            readOnlyValue: false,\n            selectFields: '',\n            selectThreshold: 0.3,\n            uniqueOptions: false,\n            tableView: true,\n            fuseOptions: {\n                include: 'score',\n                threshold: 0.3,\n            },\n            indexeddb: {\n                filter: {}\n            },\n            customOptions: {},\n            useExactSearch: false,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Select',\n            group: 'basic',\n            icon: 'th-list',\n            weight: 70,\n            documentation: '/userguide/form-building/form-components#select',\n            schema: SelectComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return SelectComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        const numberType = () => ({ type: 'number' });\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {\n                const valueComp = Object.assign(Object.assign({}, classComp), { type: 'select' });\n                if ((0, utils_1.isSelectResourceWithObjectValue)(classComp)) {\n                    valueComp.reference = false;\n                    valueComp.onSetItems = `\n            var templateKeys = utils.getItemTemplateKeys(component.template) || [];\n            items = _.map(items || [], i => {\n              var item = {};\n              _.each(templateKeys, k =>  _.set(item, k, _.get(i, k)));\n              return item;\n            })\n          `;\n                }\n                return valueComp;\n            }, dataTypeOperators: {\n                number: ['lessThan', 'greaterThan', 'lessThanOrEqual', 'greaterThanOrEqual'],\n            }, dataTypeValueComponents: {\n                number: {\n                    lessThan: numberType,\n                    greaterThan: numberType,\n                    lessThanOrEqual: numberType,\n                    greaterThanOrEqual: numberType,\n                },\n            } });\n    }\n    static savedValueTypes(schema) {\n        const { boolean, string, number, object, array } = utils_1.componentValueTypes;\n        const { dataType, reference } = schema;\n        const types = (0, utils_1.getComponentSavedTypes)(schema);\n        if (types) {\n            return types;\n        }\n        if (reference) {\n            return [object];\n        }\n        if (dataType === 'object') {\n            return [object, array];\n        }\n        if (utils_1.componentValueTypes[dataType]) {\n            return [utils_1.componentValueTypes[dataType]];\n        }\n        return [boolean, string, number, object, array];\n    }\n    init() {\n        super.init();\n        this.templateData = {};\n        // Trigger an update.\n        let updateArgs = [];\n        const triggerUpdate = lodash_1.default.debounce((...args) => {\n            updateArgs = [];\n            return this.updateItems.apply(this, args);\n        }, 100);\n        this.triggerUpdate = (...args) => {\n            // Make sure we always resolve the previous promise before reassign it\n            if (typeof this.itemsLoadedResolve === 'function') {\n                this.itemsLoadedResolve();\n            }\n            this.itemsLoaded = new Promise((resolve) => {\n                this.itemsLoadedResolve = resolve;\n            });\n            if (args.length) {\n                updateArgs = args;\n            }\n            return triggerUpdate(...updateArgs);\n        };\n        // Keep track of the select options.\n        this.selectOptions = [];\n        if (this.itemsFromUrl) {\n            this.isFromSearch = false;\n            this.searchServerCount = null;\n            this.defaultServerCount = null;\n            this.isScrollLoading = false;\n            this.searchDownloadedResources = [];\n            this.defaultDownloadedResources = [];\n        }\n        // If this component has been activated.//\n        this.activated = false;\n        this.itemsLoaded = new Promise((resolve) => {\n            this.itemsLoadedResolve = resolve;\n        });\n        this.shouldPositionDropdown = this.hasDataGridAncestor();\n        if (this.isHtmlRenderMode()) {\n            this.activate();\n        }\n        // Get the template keys for this select component.\n        this.getTemplateKeys();\n    }\n    get defaultSchema() {\n        return SelectComponent.schema();\n    }\n    get emptyValue() {\n        if (this.component.multiple) {\n            return [];\n        }\n        // if select has JSON data source type, we are defining if empty value would be an object or a string by checking JSON's first item\n        if (this.component.dataSrc === 'json' && this.component.data.json) {\n            const firstItem = this.component.data.json[0];\n            let firstValue;\n            if (this.valueProperty) {\n                firstValue = lodash_1.default.get(firstItem, this.valueProperty);\n            }\n            else {\n                firstValue = firstItem;\n            }\n            if (firstValue && typeof firstValue === 'string') {\n                return '';\n            }\n            else {\n                return {};\n            }\n        }\n        if (this.valueProperty) {\n            return '';\n        }\n        return {};\n    }\n    get valueProperty() {\n        if (this.component.valueProperty) {\n            return this.component.valueProperty;\n        }\n        // Force values datasource to use values without actually setting it on the component settings.\n        if (this.component.dataSrc === 'values') {\n            return 'value';\n        }\n        return '';\n    }\n    get inputInfo() {\n        const info = super.elementInfo();\n        info.type = 'select';\n        info.changeEvent = 'change';\n        return info;\n    }\n    get isSelectResource() {\n        return this.component.dataSrc === 'resource';\n    }\n    get itemsFromUrl() {\n        return this.isSelectResource || this.isSelectURL;\n    }\n    get isInfiniteScrollProvided() {\n        return this.itemsFromUrl;\n    }\n    get shouldDisabled() {\n        return super.shouldDisabled || this.parentDisabled;\n    }\n    get shouldInitialLoad() {\n        if (this.component.widget === 'html5' &&\n            this.isEntireObjectDisplay() &&\n            this.component.searchField &&\n            this.dataValue) {\n            return false;\n        }\n        return super.shouldLoad;\n    }\n    get selectMetadata() {\n        return super.selectData;\n    }\n    get selectData() {\n        return this.selectMetadata || this.component.selectData;\n    }\n    isEntireObjectDisplay() {\n        return this.component.dataSrc === 'resource' && this.valueProperty === 'data';\n    }\n    selectValueAndLabel(data) {\n        const value = this.getOptionValue((this.isEntireObjectDisplay() && !this.itemValue(data)) ? data : this.itemValue(data));\n        return {\n            value,\n            label: this.itemTemplate((this.isEntireObjectDisplay() && !lodash_1.default.isObject(data.data)) ? { data: data } : data, value)\n        };\n    }\n    itemTemplate(data, value) {\n        if (!lodash_1.default.isNumber(data) && lodash_1.default.isEmpty(data)) {\n            return '';\n        }\n        // If they wish to show the value in read only mode, then just return the itemValue here.\n        if (this.options.readOnly && this.component.readOnlyValue) {\n            return this.itemValue(data);\n        }\n        // Perform a fast interpretation if we should not use the template.\n        if (data && !this.component.template) {\n            const itemLabel = data.label || data;\n            const value = (typeof itemLabel === 'string') ? this.t(itemLabel, { _userInput: true }) : itemLabel;\n            return this.sanitize(value, this.shouldSanitizeValue);\n        }\n        // Inside DataTable component won't have dataValue set\n        const shouldUseSelectData = (this.component.multiple && lodash_1.default.isArray(this.dataValue)\n            ? this.dataValue.find((val) => this.normalizeSingleValue(value) === val)\n            : (this.dataValue === this.normalizeSingleValue(value))) || this.inDataTable;\n        if (shouldUseSelectData) {\n            const selectData = this.selectData;\n            if (selectData) {\n                const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;\n                if (!this.templateData || !this.templateData[templateValue]) {\n                    this.getOptionTemplate(data, value);\n                }\n                if (this.component.multiple) {\n                    if (selectData[templateValue]) {\n                        data = selectData[templateValue];\n                    }\n                }\n                else {\n                    data = selectData;\n                }\n            }\n        }\n        if (typeof data === 'string' || typeof data === 'number') {\n            return this.sanitize(this.t(data, { _userInput: true }), this.shouldSanitizeValue);\n        }\n        if (Array.isArray(data)) {\n            return data.map((val) => {\n                if (typeof val === 'string' || typeof val === 'number') {\n                    return this.sanitize(this.t(val, { _userInput: true }), this.shouldSanitizeValue);\n                }\n                return val;\n            });\n        }\n        if (data.data) {\n            // checking additional fields in the template for the selected Entire Object option\n            const hasNestedFields = /item\\.data\\.\\w*/g.test(this.component.template);\n            data.data = this.isEntireObjectDisplay() && lodash_1.default.isObject(data.data) && !hasNestedFields\n                ? JSON.stringify(data.data)\n                : data.data;\n        }\n        return super.itemTemplate(data, value);\n    }\n    /**\n     * Adds an option to the select dropdown.\n     * @param {*} value - The value of the new option.\n     * @param {string} label - The label of the new option.\n     * @param {object} [attrs] - Additional value attributes. Defaults to {}.\n     * @param {string} [id] - An id. Defaults to a random string.\n     */\n    addOption(value, label, attrs = {}, id = (0, utils_1.getRandomComponentId)()) {\n        if (lodash_1.default.isNil(label))\n            return;\n        const idPath = this.component.idPath\n            ? this.component.idPath.split('.').reduceRight((obj, key) => ({ [key]: obj }), id)\n            : {};\n        const option = Object.assign({ value: this.getOptionValue(value), label }, idPath);\n        const skipOption = this.component.uniqueOptions\n            ? !!this.selectOptions.find((selectOption) => lodash_1.default.isEqual(selectOption.value, option.value))\n            : false;\n        if (skipOption) {\n            return;\n        }\n        if (value) {\n            this.selectOptions.push(option);\n        }\n        if (this.refs.selectContainer && (this.component.widget === 'html5')) {\n            // Replace an empty Object value to an empty String.\n            if (option.value && lodash_1.default.isObject(option.value) && lodash_1.default.isEmpty(option.value)) {\n                option.value = '';\n            }\n            // Add element to option so we can reference it later.\n            const div = document.createElement('div');\n            div.innerHTML = this.sanitize(this.renderTemplate('selectOption', {\n                selected: lodash_1.default.isEqual(this.getOptionValue(this.dataValue), option.value),\n                option,\n                attrs,\n                id,\n                useId: (this.valueProperty === '' || this.isEntireObjectDisplay()) && lodash_1.default.isObject(value) && id,\n            }), this.shouldSanitizeValue).trim();\n            option.element = div.firstChild;\n            this.refs.selectContainer.appendChild(option.element);\n        }\n    }\n    addValueOptions(items) {\n        items = items || [];\n        let added = false;\n        let data = this.dataValue;\n        // preset submission value with value property before request.\n        if (this.options.pdf && !items.length && this.component.dataSrc === 'url' && this.valueProperty) {\n            data = Array.isArray(data)\n                ? data.map(item => lodash_1.default.set({}, this.valueProperty, item))\n                : lodash_1.default.set({}, this.valueProperty, data);\n        }\n        if (!this.selectOptions.length) {\n            // Add the currently selected choices if they don't already exist.\n            const currentChoices = Array.isArray(data) && this.component.multiple ? data : [data];\n            added = this.addCurrentChoices(currentChoices, items);\n            if (!added && !this.component.multiple) {\n                this.addPlaceholder();\n            }\n        }\n        return added;\n    }\n    disableInfiniteScroll() {\n        if (!this.downloadedResources) {\n            return;\n        }\n        this.downloadedResources.serverCount = this.downloadedResources.length;\n        this.serverCount = this.downloadedResources.length;\n    }\n    shouldResetChoicesItems(items) {\n        if (this.choices._store.choices.length !== items.length) {\n            return true;\n        }\n        for (let item of items) {\n            const choicesItem = this.choices._store.choices.find((i) => i.label === item.label);\n            if (!choicesItem) {\n                return true;\n            }\n        }\n        return false;\n    }\n    /* eslint-disable max-statements */\n    setItems(items, fromSearch) {\n        var _a, _b;\n        this.selectItems = items;\n        // If the items is a string, then parse as JSON.\n        if (typeof items == 'string') {\n            try {\n                items = JSON.parse(items);\n            }\n            catch (err) {\n                console.warn(err.message);\n                items = [];\n            }\n        }\n        // Allow js processing (needed for form builder)\n        if (this.component.onSetItems) {\n            const newItems = typeof this.component.onSetItems === 'function'\n                ? this.component.onSetItems(this, items)\n                : this.evaluate(this.component.onSetItems, { items: items }, 'items');\n            if (newItems) {\n                items = newItems;\n            }\n        }\n        if (!this.choices && this.refs.selectContainer) {\n            this.empty(this.refs.selectContainer);\n        }\n        // If they provided select values, then we need to get them instead.\n        if (this.component.selectValues) {\n            items = lodash_1.default.get(items, this.component.selectValues, items) || [];\n        }\n        let areItemsEqual;\n        if (this.itemsFromUrl) {\n            areItemsEqual = this.isSelectURL ? lodash_1.default.isEqual(items, this.downloadedResources) : false;\n            const areItemsEnded = this.component.limit > items.length;\n            const areItemsDownloaded = areItemsEqual\n                && this.downloadedResources\n                && this.downloadedResources.length === items.length;\n            if (areItemsEnded) {\n                this.disableInfiniteScroll();\n            }\n            else if (areItemsDownloaded) {\n                this.selectOptions = [];\n            }\n            else {\n                this.serverCount = items.serverCount;\n            }\n        }\n        if (this.isScrollLoading && items) {\n            if (!areItemsEqual) {\n                this.downloadedResources = this.downloadedResources\n                    ? this.downloadedResources.concat(items)\n                    : items;\n            }\n            this.downloadedResources.serverCount = items.serverCount || this.downloadedResources.serverCount;\n        }\n        else {\n            this.downloadedResources = items || [];\n            this.selectOptions = [];\n            // If there is new select option with same id as already selected, set the new one\n            if (!lodash_1.default.isEmpty(this.dataValue) && this.component.idPath) {\n                const selectedOptionId = lodash_1.default.get(this.dataValue, this.component.idPath, null);\n                const newOptionWithSameId = !lodash_1.default.isNil(selectedOptionId) && items.find(item => {\n                    const itemId = lodash_1.default.get(item, this.component.idPath);\n                    return itemId === selectedOptionId;\n                });\n                if (newOptionWithSameId) {\n                    this.setValue(newOptionWithSameId);\n                }\n            }\n        }\n        // Add the value options.\n        if (!fromSearch) {\n            this.addValueOptions(items);\n        }\n        if (this.component.widget === 'html5' && !this.component.placeholder) {\n            this.addOption(null, '');\n        }\n        // Iterate through each of the items.\n        lodash_1.default.each(items, (item, index) => {\n            // preventing references of the components inside the form to the parent form when building forms\n            if (this.root && this.root.options.editForm && this.root.options.editForm._id && this.root.options.editForm._id === item._id)\n                return;\n            const itemValueAndLabel = this.selectValueAndLabel(item);\n            this.addOption(itemValueAndLabel.value, itemValueAndLabel.label, {}, lodash_1.default.get(item, this.component.idPath, String(index)));\n        });\n        if (this.choices) {\n            this.choices.setChoices(this.selectOptions, 'value', 'label', true, true, !fromSearch && this.shouldResetChoicesItems(this.selectOptions));\n        }\n        else if (this.loading) {\n            // Re-attach select input.\n            // this.appendTo(this.refs.input[0], this.selectContainer);\n        }\n        // We are no longer loading.\n        this.isScrollLoading = false;\n        this.loading = false;\n        const searching = fromSearch && ((_b = (_a = this.choices) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.isFocussed);\n        if (!searching) {\n            // If a value is provided, then select it.\n            if (!this.isEmpty() || this.isRemoveButtonPressed) {\n                this.setValue(this.dataValue, {\n                    noUpdateEvent: true\n                });\n            }\n            else if (this.shouldAddDefaultValue && !this.options.readOnly) {\n                // If a default value is provided then select it.\n                const defaultValue = this.defaultValue;\n                if (!this.isEmpty(defaultValue)) {\n                    this.setValue(defaultValue);\n                }\n            }\n        }\n        // Say we are done loading the items.\n        this.itemsLoadedResolve();\n    }\n    getSingleItemValueForHTMLMode(data) {\n        var _a;\n        const option = (_a = this.selectOptions) === null || _a === void 0 ? void 0 : _a.find(({ value }) => lodash_1.default.isEqual(value, data));\n        if (option) {\n            return option.label || data;\n        }\n        return data;\n    }\n    itemValueForHTMLMode(value) {\n        if (!this.isHtmlRenderMode()) {\n            return super.itemValueForHTMLMode(value);\n        }\n        if (Array.isArray(value)) {\n            const values = value.map(item => Array.isArray(item)\n                ? this.itemValueForHTMLMode(item)\n                : this.getSingleItemValueForHTMLMode(item));\n            return values.join(', ');\n        }\n        return this.getSingleItemValueForHTMLMode(value);\n    }\n    /* eslint-enable max-statements */\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (!defaultValue && (this.component.defaultValue === false || this.component.defaultValue === 0)) {\n            defaultValue = this.component.defaultValue;\n        }\n        return defaultValue;\n    }\n    get loadingError() {\n        return !this.component.refreshOn && !this.component.refreshOnBlur && this.networkError;\n    }\n    loadItems(url, search, headers, options, method, body) {\n        options = options || {};\n        // See if we should load items or not.\n        if (!this.shouldLoad || (!this.itemsFromUrl && this.options.readOnly)) {\n            this.isScrollLoading = false;\n            this.loading = false;\n            this.itemsLoadedResolve();\n            return;\n        }\n        // See if they have not met the minimum search requirements.\n        const minSearch = parseInt(this.component.minSearch, 10);\n        if (this.component.searchField &&\n            (minSearch > 0) &&\n            (!search || (search.length < minSearch))) {\n            // Set empty items.\n            return this.setItems([]);\n        }\n        // Ensure we have a method and remove any body if method is get\n        method = method || 'GET';\n        if (method.toUpperCase() === 'GET') {\n            body = null;\n        }\n        const limit = this.component.limit || 100;\n        const skip = this.isScrollLoading ? this.selectOptions.length : 0;\n        const query = this.component.disableLimit ? {} : {\n            limit,\n            skip,\n        };\n        // Allow for url interpolation.\n        url = this.sanitize(this.interpolate(url, {\n            formioBase: Formio_1.Formio.getBaseUrl(),\n            search,\n            limit,\n            skip,\n            page: Math.abs(Math.floor(skip / limit))\n        }), this.shouldSanitizeValue);\n        // Add search capability.\n        if (this.component.searchField && search) {\n            const searchValue = Array.isArray(search)\n                ? search.join(',')\n                : typeof search === 'object'\n                    ? JSON.stringify(search)\n                    : search;\n            query[this.component.searchField] = this.component.searchField.endsWith('__regex')\n                ? lodash_1.default.escapeRegExp(searchValue)\n                : searchValue;\n        }\n        // If they wish to return only some fields.\n        if (this.component.selectFields) {\n            query.select = this.component.selectFields;\n        }\n        // Add sort capability\n        if (this.component.sort) {\n            query.sort = this.component.sort;\n        }\n        if (!lodash_1.default.isEmpty(query)) {\n            // Add the query string.\n            url += (!url.includes('?') ? '?' : '&') + Formio_1.Formio.serialize(query, (item) => this.interpolate(item));\n        }\n        // Add filter capability\n        if (this.component.filter) {\n            url += (!url.includes('?') ? '?' : '&') + this.interpolate(this.component.filter);\n        }\n        // Set ignoreCache if it is\n        options.ignoreCache = this.component.ignoreCache;\n        // Make the request.\n        options.header = headers;\n        this.loading = true;\n        Formio_1.Formio.makeRequest(this.options.formio, 'select', url, method, body, options)\n            .then((response) => {\n            this.loading = false;\n            this.setItems(response, !!search);\n        })\n            .catch((err) => {\n            if (this.itemsFromUrl) {\n                this.setItems([]);\n                this.disableInfiniteScroll();\n            }\n            this.isScrollLoading = false;\n            this.handleLoadingError(err);\n        });\n    }\n    handleLoadingError(err) {\n        this.loading = false;\n        if (err.networkError) {\n            this.networkError = true;\n        }\n        this.itemsLoadedResolve();\n        this.emit('componentError', {\n            component: this.component,\n            message: err.toString(),\n        });\n        console.warn(`Unable to load resources for ${this.key}`);\n    }\n    /**\n     * Get the request headers for this select dropdown.\n     * @returns {*} - Returns the request headers for this select dropdown.\n     */\n    get requestHeaders() {\n        // Create the headers object.\n        const headers = new Formio_1.Formio.Headers();\n        // Add custom headers to the url.\n        if (this.component.data && this.component.data.headers) {\n            try {\n                lodash_1.default.each(this.component.data.headers, (header) => {\n                    if (header.key) {\n                        headers.set(header.key, this.interpolate(header.value));\n                    }\n                });\n            }\n            catch (err) {\n                console.warn(err.message);\n            }\n        }\n        return headers;\n    }\n    getCustomItems() {\n        const customItems = this.evaluate(this.component.data.custom, {\n            values: []\n        }, 'values');\n        this.asyncValues = (0, utils_1.isPromise)(customItems);\n        return customItems;\n    }\n    asyncCustomValues() {\n        if (!lodash_1.default.isBoolean(this.asyncValues)) {\n            this.getCustomItems();\n        }\n        return this.asyncValues;\n    }\n    updateCustomItems(forceUpdate) {\n        if (this.asyncCustomValues()) {\n            if (!forceUpdate && !this.active) {\n                this.itemsLoadedResolve();\n                return;\n            }\n            this.loading = true;\n            this.getCustomItems()\n                .then(items => {\n                this.loading = false;\n                this.setItems(items || []);\n            })\n                .catch(err => {\n                this.handleLoadingError(err);\n            });\n        }\n        else {\n            this.setItems(this.getCustomItems() || []);\n        }\n    }\n    isEmpty(value = this.dataValue) {\n        return super.isEmpty(value) || value === undefined;\n    }\n    refresh(value, { instance }) {\n        if (this.component.clearOnRefresh && (instance && !instance.pristine)) {\n            this.setValue(this.emptyValue);\n        }\n        this.updateItems(null, true);\n    }\n    get additionalResourcesAvailable() {\n        return lodash_1.default.isNil(this.serverCount) || (this.serverCount > this.downloadedResources.length);\n    }\n    get serverCount() {\n        if (this.isFromSearch) {\n            return this.searchServerCount;\n        }\n        return this.defaultServerCount;\n    }\n    set serverCount(value) {\n        if (this.isFromSearch) {\n            this.searchServerCount = value;\n        }\n        else {\n            this.defaultServerCount = value;\n        }\n    }\n    get downloadedResources() {\n        if (this.isFromSearch) {\n            return this.searchDownloadedResources;\n        }\n        return this.defaultDownloadedResources;\n    }\n    set downloadedResources(value) {\n        if (this.isFromSearch) {\n            this.searchDownloadedResources = value;\n        }\n        else {\n            this.defaultDownloadedResources = value;\n        }\n    }\n    addPlaceholder() {\n        if (!this.component.placeholder) {\n            return;\n        }\n        this.addOption('', this.component.placeholder, { placeholder: true });\n    }\n    /**\n     * Activate this select control.\n     */\n    activate() {\n        if (this.loading || !this.active) {\n            this.setLoadingItem();\n        }\n        if (this.active) {\n            return;\n        }\n        this.activated = true;\n        this.triggerUpdate();\n    }\n    setLoadingItem(addToCurrentList = false) {\n        if (this.choices) {\n            if (addToCurrentList) {\n                this.choices.setChoices([{\n                        value: `${this.id}-loading`,\n                        label: 'Loading...',\n                        disabled: true,\n                    }], 'value', 'label');\n            }\n            else {\n                this.choices.setChoices([{\n                        value: '',\n                        label: `<i class=\"${this.iconClass('refresh')}\" style=\"font-size:1.3em;\"></i>`,\n                        disabled: true,\n                    }], 'value', 'label', true);\n            }\n        }\n        else if (this.component.dataSrc === 'url' || this.component.dataSrc === 'resource') {\n            this.addOption('', this.t('loading...'));\n        }\n    }\n    get active() {\n        return !this.component.lazyLoad || this.activated;\n    }\n    render() {\n        const info = this.inputInfo;\n        info.attr = info.attr || {};\n        info.multiple = this.component.multiple;\n        return super.render(this.wrapElement(this.renderTemplate('select', {\n            input: info,\n            selectOptions: '',\n            index: null,\n        })));\n    }\n    wrapElement(element) {\n        return this.component.addResource && !this.options.readOnly\n            ? (this.renderTemplate('resourceAdd', {\n                element\n            }))\n            : element;\n    }\n    choicesOptions() {\n        const useSearch = this.component.hasOwnProperty('searchEnabled') ? this.component.searchEnabled : true;\n        const placeholderValue = this.t(this.component.placeholder, { _userInput: true });\n        let customOptions = this.component.customOptions || {};\n        if (typeof customOptions == 'string') {\n            try {\n                customOptions = JSON.parse(customOptions);\n            }\n            catch (err) {\n                console.warn(err.message);\n                customOptions = {};\n            }\n        }\n        const commonFuseOptions = {\n            maxPatternLength: 1000,\n            distance: 1000,\n        };\n        return Object.assign({ removeItemButton: this.component.disabled ? false : lodash_1.default.get(this.component, 'removeItemButton', true), itemSelectText: '', classNames: {\n                containerOuter: ['choices', 'form-group', 'formio-choices'],\n                containerInner: this.transform('class', 'form-control ui fluid selection dropdown').split(' '),\n            }, addItemText: false, allowHTML: true, placeholder: !!this.component.placeholder, placeholderValue: placeholderValue, noResultsText: this.t('No results found'), noChoicesText: this.t('No choices to choose from'), searchPlaceholderValue: this.t('Type to search'), shouldSort: false, position: (this.component.dropdown || 'auto'), searchEnabled: useSearch, searchChoices: !this.component.searchField, searchFields: lodash_1.default.get(this, 'component.searchFields', ['label']), shadowRoot: this.root ? this.root.shadowRoot : null, fuseOptions: this.component.useExactSearch\n                ? Object.assign({ tokenize: true, matchAllTokens: true }, commonFuseOptions) : Object.assign({}, lodash_1.default.get(this, 'component.fuseOptions', {}), Object.assign({ include: 'score', threshold: lodash_1.default.get(this, 'component.selectThreshold', 0.3) }, commonFuseOptions)), valueComparer: lodash_1.default.isEqual, resetScrollPosition: false, duplicateItemsAllowed: false }, customOptions);\n    }\n    /* eslint-disable max-statements */\n    attach(element) {\n        var _a, _b, _c;\n        const superAttach = super.attach(element);\n        this.loadRefs(element, {\n            selectContainer: 'single',\n            addResource: 'single',\n            autocompleteInput: 'single'\n        });\n        //enable autocomplete for select\n        const autocompleteInput = this.refs.autocompleteInput;\n        if (autocompleteInput) {\n            this.addEventListener(autocompleteInput, 'change', (event) => {\n                this.setValue(event.target.value);\n            });\n        }\n        const input = this.refs.selectContainer;\n        if (!input) {\n            return;\n        }\n        this.addEventListener(input, this.inputInfo.changeEvent, () => this.updateValue(null, {\n            modified: true\n        }));\n        this.attachRefreshOnBlur();\n        if (this.component.widget === 'html5') {\n            this.addFocusBlurEvents(input);\n            this.triggerUpdate(null, true);\n            if (this.visible) {\n                this.setItems(this.selectItems || []);\n            }\n            this.focusableElement = input;\n            if (this.component.dataSrc === 'custom') {\n                this.addEventListener(input, 'focus', () => this.updateCustomItems());\n            }\n            this.addEventListener(input, 'keydown', (event) => {\n                const { key } = event;\n                if (['Backspace', 'Delete'].includes(key)) {\n                    this.setValue(this.emptyValue);\n                }\n            });\n            return;\n        }\n        const tabIndex = input.tabIndex;\n        this.addPlaceholder();\n        if (this.i18next) {\n            input.setAttribute('dir', this.i18next.dir());\n        }\n        if ((_c = (_b = (_a = this.choices) === null || _a === void 0 ? void 0 : _a.containerOuter) === null || _b === void 0 ? void 0 : _b.element) === null || _c === void 0 ? void 0 : _c.parentNode) {\n            this.choices.destroy();\n        }\n        const choicesOptions = this.choicesOptions();\n        if (ChoicesWrapper_1.default) {\n            this.choices = new ChoicesWrapper_1.default(input, choicesOptions);\n            if (this.selectOptions && this.selectOptions.length) {\n                this.choices.setChoices(this.selectOptions, 'value', 'label', true);\n            }\n            if (this.component.multiple) {\n                this.focusableElement = this.choices.input.element;\n            }\n            else {\n                this.focusableElement = this.choices.containerInner.element;\n                this.choices.containerOuter.element.setAttribute('tabIndex', '-1');\n                this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());\n            }\n            Input_1.default.prototype.addFocusBlurEvents.call(this, this.focusableElement);\n            if (this.itemsFromUrl && !this.component.noRefreshOnScroll) {\n                this.scrollList = this.choices.choiceList.element;\n                this.addEventListener(this.scrollList, 'scroll', () => this.onScroll());\n            }\n            if (choicesOptions.removeItemButton) {\n                this.addEventListener(input, 'removeItem', () => {\n                    this.isRemoveButtonPressed = true;\n                });\n            }\n        }\n        if (window && this.choices && this.shouldPositionDropdown) {\n            this.addEventListener(window.document, 'scroll', () => {\n                this.positionDropdown(true);\n            }, false, true);\n        }\n        this.focusableElement.setAttribute('tabIndex', tabIndex);\n        // If a search field is provided, then add an event listener to update items on search.\n        if (this.component.searchField) {\n            // Make sure to clear the search when no value is provided.\n            if (this.choices && this.choices.input && this.choices.input.element) {\n                this.addEventListener(this.choices.input.element, 'input', (event) => {\n                    this.isFromSearch = !!event.target.value;\n                    if (!event.target.value) {\n                        this.triggerUpdate();\n                    }\n                    else {\n                        this.serverCount = null;\n                        this.downloadedResources = [];\n                    }\n                });\n            }\n            this.addEventListener(input, 'choice', () => {\n                if (this.component.multiple && this.component.dataSrc === 'resource' && this.isFromSearch) {\n                    this.triggerUpdate();\n                }\n                this.isFromSearch = false;\n            });\n            // avoid spamming the resource/url endpoint when we have server side filtering enabled.\n            const debounceTimeout = this.component.searchField && (this.isSelectResource || this.isSelectURL) ?\n                (this.component.searchDebounce === 0 ? 0 : this.component.searchDebounce || this.defaultSchema.searchDebounce) * 1000\n                : 0;\n            const updateComponent = (evt) => {\n                this.triggerUpdate(evt.detail.value);\n            };\n            this.addEventListener(input, 'search', lodash_1.default.debounce((e) => {\n                updateComponent(e);\n                this.positionDropdown();\n            }, debounceTimeout));\n            this.addEventListener(input, 'stopSearch', () => this.triggerUpdate());\n            this.addEventListener(input, 'hideDropdown', () => {\n                if (this.choices && this.choices.input && this.choices.input.element) {\n                    this.choices.input.element.value = '';\n                }\n                this.updateItems(null, true);\n            });\n        }\n        this.addEventListener(input, 'showDropdown', () => {\n            this.update();\n            this.positionDropdown();\n        });\n        if (this.shouldPositionDropdown) {\n            this.addEventListener(input, 'highlightChoice', () => {\n                this.positionDropdown();\n            });\n        }\n        // Add value options.\n        this.addValueOptions();\n        this.setChoicesValue(this.dataValue);\n        if (this.isSelectResource && this.refs.addResource) {\n            this.addEventListener(this.refs.addResource, 'click', (event) => {\n                event.preventDefault();\n                const formioForm = this.ce('div');\n                const dialog = this.createModal(formioForm);\n                const projectUrl = lodash_1.default.get(this.root, 'formio.projectUrl', Formio_1.Formio.getProjectUrl());\n                const formUrl = `${projectUrl}/form/${this.component.data.resource}`;\n                new Form_1.default(formioForm, formUrl, {}).ready\n                    .then((form) => {\n                    form.on('submit', (submission) => {\n                        // If valueProperty is set, replace the submission with the corresponding value\n                        let value = this.valueProperty ? lodash_1.default.get(submission, this.valueProperty) : submission;\n                        if (this.component.multiple) {\n                            value = [...this.dataValue, value];\n                        }\n                        this.setValue(value);\n                        this.triggerUpdate();\n                        dialog.close();\n                    });\n                });\n            });\n        }\n        // Force the disabled state with getters and setters.\n        this.disabled = this.shouldDisabled;\n        this.triggerUpdate();\n        return superAttach;\n    }\n    setDropdownPosition() {\n        var _a, _b, _c, _d;\n        const dropdown = (_b = (_a = this.choices) === null || _a === void 0 ? void 0 : _a.dropdown) === null || _b === void 0 ? void 0 : _b.element;\n        const container = (_d = (_c = this.choices) === null || _c === void 0 ? void 0 : _c.containerOuter) === null || _d === void 0 ? void 0 : _d.element;\n        if (!dropdown || !container) {\n            return;\n        }\n        const containerPosition = container.getBoundingClientRect();\n        const isFlipped = container.classList.contains('is-flipped');\n        lodash_1.default.assign(dropdown.style, {\n            top: `${isFlipped ? containerPosition.top - dropdown.offsetHeight : containerPosition.top + containerPosition.height}px`,\n            left: `${containerPosition.left}px`,\n            width: `${containerPosition.width}px`,\n            position: 'fixed',\n            bottom: 'unset',\n            right: 'unset',\n        });\n    }\n    hasDataGridAncestor(comp) {\n        comp = comp || this;\n        if (comp.inDataGrid || comp.type === 'datagrid') {\n            return true;\n        }\n        else if (comp.parent) {\n            return this.hasDataGridAncestor(comp.parent);\n        }\n        else {\n            return false;\n        }\n    }\n    positionDropdown(scroll) {\n        var _a;\n        if (!this.shouldPositionDropdown || !this.choices || (!((_a = this.choices.dropdown) === null || _a === void 0 ? void 0 : _a.isActive) && scroll)) {\n            return;\n        }\n        this.setDropdownPosition();\n        this.itemsLoaded.then(() => {\n            this.setDropdownPosition();\n        });\n    }\n    get isLoadingAvailable() {\n        return !this.isScrollLoading && this.additionalResourcesAvailable;\n    }\n    onScroll() {\n        if (this.isLoadingAvailable) {\n            this.isScrollLoading = true;\n            this.setLoadingItem(true);\n            this.triggerUpdate(this.choices.input.element.value);\n        }\n    }\n    attachRefreshOnBlur() {\n        if (this.component.refreshOnBlur) {\n            this.on('blur', (instance) => {\n                this.checkRefreshOn([{ instance, value: instance.dataValue }], { fromBlur: true });\n            });\n        }\n    }\n    /* eslint-enable max-statements */\n    update() {\n        if (this.component.dataSrc === 'custom') {\n            this.updateCustomItems();\n        }\n        // Activate the control.\n        this.activate();\n    }\n    set disabled(disabled) {\n        super.disabled = disabled;\n        if (!this.choices) {\n            return;\n        }\n        if (disabled) {\n            this.setDisabled(this.choices.containerInner.element, true);\n            this.focusableElement.removeAttribute('tabIndex');\n            this.choices.disable();\n        }\n        else {\n            this.setDisabled(this.choices.containerInner.element, false);\n            this.focusableElement.setAttribute('tabIndex', this.component.tabindex || 0);\n            this.choices.enable();\n        }\n    }\n    get disabled() {\n        return super.disabled;\n    }\n    set visible(value) {\n        // If we go from hidden to visible, trigger a refresh.\n        if (value && (!this._visible !== !value)) {\n            this.triggerUpdate();\n        }\n        super.visible = value;\n    }\n    get visible() {\n        return super.visible;\n    }\n    addCurrentChoices(values, items, keyValue) {\n        if (!values) {\n            return false;\n        }\n        const notFoundValuesToAdd = [];\n        const added = values.reduce((defaultAdded, value) => {\n            if (!value || lodash_1.default.isEmpty(value)) {\n                return defaultAdded;\n            }\n            let found = false;\n            // Make sure that `items` and `this.selectOptions` points\n            // to the same reference. Because `this.selectOptions` is\n            // internal property and all items are populated by\n            // `this.addOption` method, we assume that items has\n            // 'label' and 'value' properties. This assumption allows\n            // us to read correct value from the item.\n            const isSelectOptions = items === this.selectOptions;\n            if (items && items.length) {\n                lodash_1.default.each(items, (choice) => {\n                    if (choice._id && value._id && (choice._id === value._id)) {\n                        found = true;\n                        return false;\n                    }\n                    const itemValue = keyValue ? choice.value : this.itemValue(choice, isSelectOptions);\n                    found |= lodash_1.default.isEqual(itemValue, value);\n                    return found ? false : true;\n                });\n            }\n            // Add the default option if no item is found.\n            if (!found) {\n                notFoundValuesToAdd.push(this.selectValueAndLabel(value));\n                return true;\n            }\n            return found || defaultAdded;\n        }, false);\n        if (notFoundValuesToAdd.length) {\n            if (this.choices) {\n                this.choices.setChoices(notFoundValuesToAdd, 'value', 'label');\n            }\n            notFoundValuesToAdd.map(notFoundValue => {\n                this.addOption(notFoundValue.value, notFoundValue.label);\n            });\n        }\n        return added;\n    }\n    getValueAsString(data, options) {\n        return (this.component.multiple && Array.isArray(data))\n            ? data.map((v) => this.asString(v, options)).join(', ')\n            : this.asString(data, options);\n    }\n    getValue() {\n        // If the widget isn't active.\n        if (this.viewOnly || this.loading\n            || (!this.component.lazyLoad && !this.selectOptions.length)\n            || !this.element) {\n            return this.dataValue;\n        }\n        let value = this.emptyValue;\n        if (this.choices) {\n            value = this.choices.getValue(true);\n            // Make sure we don't get the placeholder\n            if (!this.component.multiple &&\n                this.component.placeholder &&\n                (value === this.t(this.component.placeholder, { _userInput: true }))) {\n                value = this.emptyValue;\n            }\n        }\n        else if (this.refs.selectContainer) {\n            value = this.refs.selectContainer.value;\n            if (this.valueProperty === '' || this.isEntireObjectDisplay()) {\n                if (value === '') {\n                    return {};\n                }\n                const option = this.selectOptions[value] ||\n                    this.selectOptions.find(option => option.id === value);\n                if (option && lodash_1.default.isObject(option.value)) {\n                    value = option.value;\n                }\n            }\n        }\n        else {\n            value = this.dataValue;\n        }\n        // Choices will return undefined if nothing is selected. We really want '' to be empty.\n        if (value === undefined || value === null) {\n            value = '';\n        }\n        return value;\n    }\n    redraw() {\n        const done = super.redraw();\n        this.triggerUpdate();\n        return done;\n    }\n    normalizeSingleValue(value) {\n        if (lodash_1.default.isNil(value)) {\n            return;\n        }\n        const valueIsObject = lodash_1.default.isObject(value);\n        //check if value equals to default emptyValue\n        if (valueIsObject && Object.keys(value).length === 0) {\n            return value;\n        }\n        const dataType = this.component.dataType || 'auto';\n        const normalize = {\n            value,\n            number() {\n                const numberValue = Number(this.value);\n                const isEquivalent = value.toString() === numberValue.toString();\n                if (!Number.isNaN(numberValue) && Number.isFinite(numberValue) && value !== '' && isEquivalent) {\n                    this.value = numberValue;\n                }\n                return this;\n            },\n            boolean() {\n                if (lodash_1.default.isString(this.value)\n                    && (this.value.toLowerCase() === 'true'\n                        || this.value.toLowerCase() === 'false')) {\n                    this.value = (this.value.toLowerCase() === 'true');\n                }\n                return this;\n            },\n            string() {\n                this.value = String(this.value);\n                return this;\n            },\n            object() {\n                return this;\n            },\n            auto() {\n                if (lodash_1.default.isObject(this.value)) {\n                    this.value = this.object().value;\n                }\n                else {\n                    this.value = this.string().number().boolean().value;\n                }\n                return this;\n            }\n        };\n        try {\n            return normalize[dataType]().value;\n        }\n        catch (err) {\n            console.warn('Failed to normalize value', err);\n            return value;\n        }\n    }\n    /**\n     * Normalize values coming into updateValue. For example, depending on the configuration, string value `\"true\"` will be normalized to boolean `true`.\n     * @param {*} value - The value to normalize\n     * @returns {*} - Returns the normalized value\n     */\n    normalizeValue(value) {\n        if (this.component.multiple && Array.isArray(value)) {\n            return value.map((singleValue) => this.normalizeSingleValue(singleValue));\n        }\n        return super.normalizeValue(this.normalizeSingleValue(value));\n    }\n    setMetadata(value, flags = {}) {\n        var _a, _b;\n        if (lodash_1.default.isNil(value)) {\n            return;\n        }\n        const valueIsObject = lodash_1.default.isObject(value);\n        //check if value equals to default emptyValue\n        if (valueIsObject && Object.keys(value).length === 0) {\n            return value;\n        }\n        // Check to see if we need to save off the template data into our metadata.\n        const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;\n        const shouldSaveData = (!valueIsObject || this.component.reference) && !this.inDataTable;\n        if (!lodash_1.default.isNil(templateValue) && shouldSaveData && this.templateData && this.templateData[templateValue] && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submission)) {\n            const submission = this.root.submission;\n            if (!submission.metadata) {\n                submission.metadata = {};\n            }\n            if (!submission.metadata.selectData) {\n                submission.metadata.selectData = {};\n            }\n            let templateData = this.templateData[templateValue];\n            if (this.component.multiple) {\n                templateData = {};\n                const dataValue = this.dataValue;\n                if (dataValue && lodash_1.default.isArray(dataValue) && dataValue.length) {\n                    dataValue.forEach((dataValueItem) => {\n                        const dataValueItemValue = this.component.reference ? dataValueItem._id.toString() : dataValueItem;\n                        templateData[dataValueItemValue] = this.templateData[dataValueItemValue];\n                    });\n                }\n                templateData[value] = this.templateData[value];\n            }\n            lodash_1.default.set(submission.metadata.selectData, this.path, templateData);\n        }\n        if (flags.resetValue && ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submission) && !this.options.readOnly) {\n            const submission = this.root.submission;\n            if (!submission.metadata) {\n                submission.metadata = {};\n            }\n            submission.metadata.selectData = {};\n        }\n    }\n    updateValue(value, flags) {\n        const changed = super.updateValue(value, flags);\n        if (changed || !this.selectMetadata || flags.resetValue) {\n            if (this.component.multiple && Array.isArray(this.dataValue)) {\n                this.dataValue.forEach(singleValue => this.setMetadata(singleValue, flags));\n            }\n            else {\n                this.setMetadata(this.dataValue, flags);\n            }\n        }\n        return changed;\n    }\n    undoValueTyping(value) {\n        let untypedValue = value;\n        if (this.component.multiple && Array.isArray(value)) {\n            untypedValue = value.map(v => {\n                if (typeof v === 'boolean' || typeof v === 'number') {\n                    return v.toString();\n                }\n                return v;\n            });\n        }\n        else {\n            if (typeof value === 'boolean' || typeof value === 'number') {\n                untypedValue = value.toString();\n            }\n        }\n        return untypedValue;\n    }\n    setValue(value, flags = {}) {\n        const previousValue = this.dataValue;\n        const changed = this.updateValue(value, flags);\n        if (this.component.widget === 'html5' && (lodash_1.default.isEqual(value, previousValue) || lodash_1.default.isEqual(previousValue, {}) && lodash_1.default.isEqual(flags, {})) && !flags.fromSubmission) {\n            return false;\n        }\n        value = this.dataValue;\n        const hasPreviousValue = !this.isEmpty(previousValue);\n        const hasValue = !this.isEmpty(value);\n        // Undo typing when searching to set the value.\n        value = this.undoValueTyping(value);\n        if (this.isHtmlRenderMode() && flags && flags.fromSubmission && changed) {\n            this.itemsLoaded.then(() => {\n                this.redraw();\n            });\n            return changed;\n        }\n        // Do not set the value if we are loading... that will happen after it is done.\n        if (this.loading) {\n            return changed;\n        }\n        // Determine if we need to perform an initial lazyLoad api call if searchField is provided.\n        if (this.isInitApiCallNeeded(hasValue)) {\n            this.loading = true;\n            this.lazyLoadInit = true;\n            const searchProperty = this.component.searchField || this.component.valueProperty;\n            this.triggerUpdate(lodash_1.default.get(value.data || value, searchProperty, value), true);\n            return changed;\n        }\n        // Add the value options.\n        this.itemsLoaded.then(() => {\n            this.addValueOptions();\n            this.setChoicesValue(value, hasPreviousValue, flags);\n        });\n        return changed;\n    }\n    isInitApiCallNeeded(hasValue) {\n        return this.component.lazyLoad &&\n            !this.lazyLoadInit &&\n            !this.active &&\n            !this.selectOptions.length &&\n            hasValue &&\n            this.shouldInitialLoad &&\n            this.visible && (this.component.searchField || this.component.valueProperty);\n    }\n    setChoicesValue(value, hasPreviousValue, flags = {}) {\n        const hasValue = !this.isEmpty(value) || flags.fromSubmission;\n        hasPreviousValue = (hasPreviousValue === undefined) ? true : hasPreviousValue;\n        if (this.choices) {\n            // Now set the value.\n            if (hasValue) {\n                this.choices.removeActiveItems();\n                // Add the currently selected choices if they don't already exist.\n                const currentChoices = Array.isArray(value) && this.component.multiple ? value : [value];\n                if (!this.addCurrentChoices(currentChoices, this.selectOptions, true)) {\n                    this.choices.setChoices(this.selectOptions, 'value', 'label', true);\n                }\n                this.choices.setChoiceByValue(currentChoices);\n            }\n            else if (hasPreviousValue || flags.resetValue) {\n                this.choices.removeActiveItems();\n            }\n        }\n        else {\n            if (hasValue) {\n                const values = Array.isArray(value) ? value : [value];\n                if (!lodash_1.default.isEqual(this.dataValue, this.defaultValue) && this.selectOptions.length < 2\n                    || (this.selectData && flags.fromSubmission)) {\n                    const { value, label } = this.selectValueAndLabel(this.dataValue);\n                    this.addOption(value, label);\n                }\n                lodash_1.default.each(this.selectOptions, (selectOption) => {\n                    lodash_1.default.each(values, (val) => {\n                        if (selectOption.value === '') {\n                            selectOption.value = {};\n                        }\n                        if (lodash_1.default.isEqual(val, selectOption.value) && selectOption.element) {\n                            selectOption.element.selected = true;\n                            selectOption.element.setAttribute('selected', 'selected');\n                            return false;\n                        }\n                    });\n                });\n            }\n            else {\n                lodash_1.default.each(this.selectOptions, (selectOption) => {\n                    if (selectOption.element) {\n                        selectOption.element.selected = false;\n                        selectOption.element.removeAttribute('selected');\n                    }\n                });\n            }\n        }\n    }\n    validateValueAvailability(setting, value) {\n        if (!(0, utils_1.boolValue)(setting) || !value) {\n            return true;\n        }\n        const values = this.getOptionsValues();\n        if (values) {\n            if (lodash_1.default.isObject(value)) {\n                const compareComplexValues = (optionValue) => {\n                    const normalizedOptionValue = this.normalizeSingleValue(optionValue);\n                    if (!lodash_1.default.isObject(normalizedOptionValue)) {\n                        return false;\n                    }\n                    try {\n                        return (JSON.stringify(normalizedOptionValue) === JSON.stringify(value));\n                    }\n                    catch (err) {\n                        console.warn.error('Error while comparing items', err);\n                        return false;\n                    }\n                };\n                return values.findIndex((optionValue) => compareComplexValues(optionValue)) !== -1;\n            }\n            return values.findIndex((optionValue) => this.normalizeSingleValue(optionValue) === value) !== -1;\n        }\n        return false;\n    }\n    /**\n     * Performs required transformations on the initial value to use in selectOptions\n     * @param {*} value - The value to transform.\n     * @returns {*} - Returns the options value.\n     */\n    getOptionValue(value) {\n        return lodash_1.default.isObject(value) && this.isEntireObjectDisplay()\n            ? this.normalizeSingleValue(value)\n            : lodash_1.default.isObject(value) && (this.valueProperty || this.component.key !== 'resource')\n                ? value\n                : lodash_1.default.isObject(value) && !this.valueProperty\n                    ? this.interpolate(this.component.template, { item: value }).replace(/<\\/?[^>]+(>|$)/g, '')\n                    : lodash_1.default.isNull(value)\n                        ? this.emptyValue\n                        : String(this.normalizeSingleValue(value));\n    }\n    /**\n     * If component has static values (values, json) or custom values, returns an array of them\n     * @returns {Array<*>|undefined} - Returns an array of the static or custom values.\n     */\n    getOptionsValues() {\n        let rawItems = [];\n        switch (this.component.dataSrc) {\n            case 'values':\n                rawItems = this.component.data.values;\n                break;\n            case 'json':\n                rawItems = this.component.data.json;\n                break;\n            case 'custom':\n                rawItems = this.getCustomItems();\n                break;\n            case 'url':\n                rawItems = this.selectItems;\n                break;\n        }\n        if (typeof rawItems === 'string') {\n            try {\n                rawItems = JSON.parse(rawItems);\n            }\n            catch (err) {\n                console.warn(err.message);\n                rawItems = [];\n            }\n        }\n        if (!Array.isArray(rawItems)) {\n            return;\n        }\n        return rawItems.map((item) => this.getOptionValue(this.itemValue(item)));\n    }\n    /**\n     * Deletes the value of the component.\n     */\n    deleteValue() {\n        this.setValue('', {\n            noUpdateEvent: true\n        });\n        this.unset();\n    }\n    /**\n     * Check if a component is eligible for multiple validation\n     * @returns {boolean} - Returns FALSE for select components.\n     */\n    validateMultiple() {\n        // Select component will contain one input when flagged as multiple.\n        return false;\n    }\n    /**\n     * Output this select dropdown as a string value.\n     * @returns {*}\n     */\n    isBooleanOrNumber(value) {\n        return typeof value === 'number' || typeof value === 'boolean';\n    }\n    getNormalizedValues() {\n        if (!this.component || !this.component.data || !this.component.data.values) {\n            return;\n        }\n        return this.component.data.values.map(value => ({ label: value.label, value: String(this.normalizeSingleValue(value.value)) }));\n    }\n    asString(value, options = {}) {\n        var _a;\n        value = value !== null && value !== void 0 ? value : this.getValue();\n        if (options.modalPreview || this.inDataTable) {\n            if (this.inDataTable) {\n                value = this.undoValueTyping(value);\n            }\n            const templateValue = (this.isEntireObjectDisplay() && !lodash_1.default.isObject(value.data)) ? { data: value } : value;\n            const template = this.itemTemplate(templateValue, value, options);\n            return template;\n        }\n        //need to convert values to strings to be able to compare values with available options that are strings\n        const convertToString = (data, valueProperty) => {\n            if (valueProperty) {\n                if (Array.isArray(data)) {\n                    data.forEach((item) => item[valueProperty] = item[valueProperty].toString());\n                }\n                else if (lodash_1.default.isObject(data)) {\n                    data[valueProperty] = data[valueProperty].toString();\n                }\n                return data;\n            }\n            if (this.isBooleanOrNumber(data)) {\n                data = data.toString();\n            }\n            if (Array.isArray(data) && data.some(item => this.isBooleanOrNumber(item))) {\n                data = data.map(item => this.isBooleanOrNumber(item) ? item.toString() : item);\n            }\n            return data;\n        };\n        value = convertToString(value);\n        if (['values', 'custom'].includes(this.component.dataSrc) && !this.asyncCustomValues()) {\n            const { items, valueProperty, } = this.component.dataSrc === 'values'\n                ? {\n                    items: convertToString(this.getNormalizedValues(), 'value'),\n                    valueProperty: 'value',\n                }\n                : {\n                    items: convertToString(this.getCustomItems(), this.valueProperty),\n                    valueProperty: this.valueProperty,\n                };\n            const getFromValues = () => {\n                const initialValue = lodash_1.default.find(items, [valueProperty, value]);\n                const values = this.defaultSchema.data.values || [];\n                return lodash_1.default.isEqual(initialValue, values[0]) ? '-' : initialValue;\n            };\n            value = (this.component.multiple && Array.isArray(value))\n                ? lodash_1.default.filter(items, (item) => value.includes(item.value))\n                : (valueProperty && items)\n                    ? (_a = getFromValues()) !== null && _a !== void 0 ? _a : { value, label: value }\n                    : value;\n        }\n        if (lodash_1.default.isString(value)) {\n            return value;\n        }\n        const getTemplateValue = (v) => {\n            const itemTemplate = this.itemTemplate(v);\n            return options.csv && itemTemplate\n                ? (0, utils_1.removeHTML)(itemTemplate)\n                : itemTemplate;\n        };\n        if (Array.isArray(value)) {\n            const items = [];\n            value.forEach(item => items.push(getTemplateValue(item)));\n            if (this.component.dataSrc === 'resource' && items.length > 0) {\n                return items.join(', ');\n            }\n            else if (items.length > 0) {\n                return items.join('<br />');\n            }\n            else {\n                return '-';\n            }\n        }\n        if (this.isEntireObjectDisplay() && lodash_1.default.isObject(value)) {\n            return JSON.stringify(value);\n        }\n        return !lodash_1.default.isNil(value)\n            ? getTemplateValue(value)\n            : '-';\n    }\n    detach() {\n        var _a, _b;\n        this.off('blur');\n        if (this.choices) {\n            if ((_b = (_a = this.choices.containerOuter) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.parentNode) {\n                this.choices.destroy();\n            }\n            this.choices = null;\n        }\n        super.detach();\n    }\n    focus() {\n        super.focus.call(this);\n        if (this.focusableElement) {\n            this.focusableElement.focus();\n        }\n    }\n    setErrorClasses(elements, dirty, hasError, hasMessages, element = this.element) {\n        super.setErrorClasses(elements, dirty, hasError, hasMessages, element);\n        if (this.choices) {\n            super.setErrorClasses([this.choices.containerInner.element], dirty, hasError, hasMessages, element);\n        }\n        else {\n            super.setErrorClasses([this.refs.selectContainer], dirty, hasError, hasMessages, element);\n        }\n    }\n}\nexports[\"default\"] = SelectComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/select/Select.js?");
 
 /***/ }),
 
@@ -5488,7 +5488,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./lib/cjs/utils/index.js\");\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst choices_js_1 = __importDefault(__webpack_require__(/*! @formio/choices.js */ \"./node_modules/@formio/choices.js/public/assets/scripts/choices.js\"));\nclass TagsComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            type: 'tags',\n            label: 'Tags',\n            key: 'tags',\n            delimeter: ',',\n            storeas: 'string',\n            maxTags: 0\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Tags',\n            icon: 'tags',\n            group: 'advanced',\n            documentation: '/userguide/form-building/advanced-components#tags',\n            weight: 30,\n            schema: TagsComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return TagsComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: [...super.conditionOperatorsSettings.operators, 'includes', 'notIncludes'] });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes[schema.storeas] || utils_1.componentValueTypes.string];\n    }\n    init() {\n        super.init();\n    }\n    get emptyValue() {\n        return (this.component.storeas === 'string') ? '' : [];\n    }\n    get defaultSchema() {\n        return TagsComponent.schema();\n    }\n    get inputInfo() {\n        const info = super.inputInfo;\n        info.type = 'input';\n        info.attr.type = 'text';\n        info.changeEvent = 'change';\n        return info;\n    }\n    get delimiter() {\n        return this.component.delimeter || ',';\n    }\n    attachElement(element, index) {\n        super.attachElement(element, index);\n        if (!element) {\n            return;\n        }\n        if (this.i18next) {\n            element.setAttribute('dir', this.i18next.dir());\n        }\n        if (this.choices) {\n            this.choices.destroy();\n        }\n        if (!choices_js_1.default) {\n            return;\n        }\n        const hasPlaceholder = !!this.component.placeholder;\n        this.choices = new choices_js_1.default(element, {\n            delimiter: this.delimiter,\n            editItems: true,\n            allowHTML: true,\n            maxItemCount: this.component.maxTags,\n            removeItemButton: true,\n            duplicateItemsAllowed: false,\n            shadowRoot: this.root ? this.root.shadowRoot : null,\n            placeholder: hasPlaceholder,\n            placeholderValue: hasPlaceholder ? this.t(this.component.placeholder, { _userInput: true }) : null,\n        });\n        this.choices.itemList.element.tabIndex = element.tabIndex;\n        this.addEventListener(this.choices.input.element, 'blur', () => {\n            // Emit event to the native Formio input, so the listener attached in the Input.js will be invoked\n            element.dispatchEvent(new Event('blur'));\n            const value = this.choices.input.value;\n            const maxTagsNumber = this.component.maxTags;\n            const valuesCount = this.choices.getValue(true).length;\n            const isRepeatedValue = this.choices.getValue(true).some(existingValue => existingValue.trim() === value.trim());\n            if (value) {\n                if (maxTagsNumber && valuesCount === maxTagsNumber) {\n                    this.choices.addItems = false;\n                    this.choices.clearInput();\n                }\n                else if (isRepeatedValue) {\n                    this.choices.clearInput();\n                }\n                else {\n                    this.choices.setValue([value]);\n                    this.choices.clearInput();\n                    this.choices.hideDropdown(true);\n                    this.updateValue(null, {\n                        modified: true\n                    });\n                }\n            }\n        });\n    }\n    detach() {\n        if (this.choices) {\n            this.choices.destroy();\n            this.choices = null;\n        }\n        super.detach();\n    }\n    normalizeValue(value) {\n        if (this.component.storeas === 'string' && Array.isArray(value)) {\n            return super.normalizeValue(value.join(this.delimiter));\n        }\n        else if (this.component.storeas === 'array' && typeof value === 'string') {\n            return super.normalizeValue(value.split(this.delimiter).filter(result => result));\n        }\n        return super.normalizeValue(value);\n    }\n    setValue(value, flags = {}) {\n        const changed = super.setValue(value, flags);\n        if (this.choices) {\n            let dataValue = this.dataValue;\n            this.choices.removeActiveItems();\n            if (dataValue) {\n                if (typeof dataValue === 'string') {\n                    dataValue = dataValue.split(this.delimiter).filter(result => result);\n                }\n                const value = Array.isArray(dataValue) ? dataValue : [dataValue];\n                this.choices.setValue(value.map((val) => this.sanitize(val, this.shouldSanitizeValue)));\n            }\n        }\n        return changed;\n    }\n    set disabled(disabled) {\n        super.disabled = disabled;\n        if (!this.choices) {\n            return;\n        }\n        if (disabled) {\n            this.choices.disable();\n        }\n        else {\n            this.choices.enable();\n        }\n    }\n    get disabled() {\n        return super.disabled;\n    }\n    focus() {\n        if (this.refs.input && this.refs.input.length) {\n            this.refs.input[0].parentNode.lastChild.focus();\n        }\n    }\n    getValueAsString(value) {\n        if (!value) {\n            return '';\n        }\n        if (Array.isArray(value)) {\n            return value.join(`${this.delimiter || ','} `);\n        }\n        const stringValue = value.toString();\n        return this.sanitize(stringValue, this.shouldSanitizeValue);\n    }\n}\nexports[\"default\"] = TagsComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/tags/Tags.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./lib/cjs/utils/index.js\");\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst choices_js_1 = __importDefault(__webpack_require__(/*! choices.js */ \"./node_modules/choices.js/public/assets/scripts/choices.js\"));\nclass TagsComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            type: 'tags',\n            label: 'Tags',\n            key: 'tags',\n            delimeter: ',',\n            storeas: 'string',\n            maxTags: 0\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Tags',\n            icon: 'tags',\n            group: 'advanced',\n            documentation: '/userguide/form-building/advanced-components#tags',\n            weight: 30,\n            schema: TagsComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return TagsComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: [...super.conditionOperatorsSettings.operators, 'includes', 'notIncludes'] });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes[schema.storeas] || utils_1.componentValueTypes.string];\n    }\n    init() {\n        super.init();\n    }\n    get emptyValue() {\n        return (this.component.storeas === 'string') ? '' : [];\n    }\n    get defaultSchema() {\n        return TagsComponent.schema();\n    }\n    get inputInfo() {\n        const info = super.inputInfo;\n        info.type = 'input';\n        info.attr.type = 'text';\n        info.changeEvent = 'change';\n        return info;\n    }\n    get delimiter() {\n        return this.component.delimeter || ',';\n    }\n    attachElement(element, index) {\n        super.attachElement(element, index);\n        if (!element) {\n            return;\n        }\n        if (this.i18next) {\n            element.setAttribute('dir', this.i18next.dir());\n        }\n        if (this.choices) {\n            this.choices.destroy();\n        }\n        if (!choices_js_1.default) {\n            return;\n        }\n        const hasPlaceholder = !!this.component.placeholder;\n        this.choices = new choices_js_1.default(element, {\n            delimiter: this.delimiter,\n            editItems: true,\n            allowHTML: true,\n            maxItemCount: this.component.maxTags,\n            removeItemButton: true,\n            duplicateItemsAllowed: false,\n            shadowRoot: this.root ? this.root.shadowRoot : null,\n            placeholder: hasPlaceholder,\n            placeholderValue: hasPlaceholder ? this.t(this.component.placeholder, { _userInput: true }) : null,\n        });\n        this.choices.itemList.element.tabIndex = element.tabIndex;\n        this.addEventListener(this.choices.input.element, 'blur', () => {\n            // Emit event to the native Formio input, so the listener attached in the Input.js will be invoked\n            element.dispatchEvent(new Event('blur'));\n            const value = this.choices.input.value;\n            const maxTagsNumber = this.component.maxTags;\n            const valuesCount = this.choices.getValue(true).length;\n            const isRepeatedValue = this.choices.getValue(true).some(existingValue => existingValue.trim() === value.trim());\n            if (value) {\n                if (maxTagsNumber && valuesCount === maxTagsNumber) {\n                    this.choices.addItems = false;\n                    this.choices.clearInput();\n                }\n                else if (isRepeatedValue) {\n                    this.choices.clearInput();\n                }\n                else {\n                    this.choices.setValue([value]);\n                    this.choices.clearInput();\n                    this.choices.hideDropdown(true);\n                    this.updateValue(null, {\n                        modified: true\n                    });\n                }\n            }\n        });\n    }\n    detach() {\n        if (this.choices) {\n            this.choices.destroy();\n            this.choices = null;\n        }\n        super.detach();\n    }\n    normalizeValue(value) {\n        if (this.component.storeas === 'string' && Array.isArray(value)) {\n            return super.normalizeValue(value.join(this.delimiter));\n        }\n        else if (this.component.storeas === 'array' && typeof value === 'string') {\n            return super.normalizeValue(value.split(this.delimiter).filter(result => result));\n        }\n        return super.normalizeValue(value);\n    }\n    setValue(value, flags = {}) {\n        const changed = super.setValue(value, flags);\n        if (this.choices) {\n            let dataValue = this.dataValue;\n            this.choices.clearStore();\n            if (dataValue) {\n                if (typeof dataValue === 'string') {\n                    dataValue = dataValue.split(this.delimiter).filter(result => result);\n                }\n                const value = Array.isArray(dataValue) ? dataValue : [dataValue];\n                this.choices.setValue(value.map((val) => this.sanitize(val, this.shouldSanitizeValue)));\n            }\n        }\n        return changed;\n    }\n    set disabled(disabled) {\n        super.disabled = disabled;\n        if (!this.choices) {\n            return;\n        }\n        if (disabled) {\n            this.choices.disable();\n        }\n        else {\n            this.choices.enable();\n        }\n    }\n    get disabled() {\n        return super.disabled;\n    }\n    focus() {\n        if (this.refs.input && this.refs.input.length) {\n            this.refs.input[0].parentNode.lastChild.focus();\n        }\n    }\n    getValueAsString(value) {\n        if (!value) {\n            return '';\n        }\n        if (Array.isArray(value)) {\n            return value.join(`${this.delimiter || ','} `);\n        }\n        const stringValue = value.toString();\n        return this.sanitize(stringValue, this.shouldSanitizeValue);\n    }\n}\nexports[\"default\"] = TagsComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/tags/Tags.js?");
 
 /***/ }),
 
@@ -5587,7 +5587,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Webform = exports.EventEmitter = exports.Licenses = exports.Formio = exports.Form = exports.Utils = exports.Templates = exports.Widgets = exports.Providers = exports.Displays = exports.Components = exports.FormioCore = exports.useModule = exports.registerModule = void 0;\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nObject.defineProperty(exports, \"Formio\", ({ enumerable: true, get: function () { return Formio_1.Formio; } }));\nconst components_1 = __importDefault(__webpack_require__(/*! ./components */ \"./lib/cjs/components/index.js\"));\nconst Components_1 = __importDefault(__webpack_require__(/*! ./components/Components */ \"./lib/cjs/components/Components.js\"));\nexports.Components = Components_1.default;\nconst Displays_1 = __importDefault(__webpack_require__(/*! ./displays/Displays */ \"./lib/cjs/displays/Displays.js\"));\nexports.Displays = Displays_1.default;\nconst Templates_1 = __importDefault(__webpack_require__(/*! ./templates/Templates */ \"./lib/cjs/templates/Templates.js\"));\nexports.Templates = Templates_1.default;\nconst providers_1 = __importDefault(__webpack_require__(/*! ./providers */ \"./lib/cjs/providers/index.js\"));\nexports.Providers = providers_1.default;\nconst widgets_1 = __importDefault(__webpack_require__(/*! ./widgets */ \"./lib/cjs/widgets/index.js\"));\nexports.Widgets = widgets_1.default;\nconst Form_1 = __importDefault(__webpack_require__(/*! ./Form */ \"./lib/cjs/Form.js\"));\nexports.Form = Form_1.default;\nconst utils_1 = __importDefault(__webpack_require__(/*! ./utils */ \"./lib/cjs/utils/index.js\"));\nexports.Utils = utils_1.default;\nconst licenses_1 = __importDefault(__webpack_require__(/*! ./licenses */ \"./lib/cjs/licenses/index.js\"));\nexports.Licenses = licenses_1.default;\nconst EventEmitter_1 = __importDefault(__webpack_require__(/*! ./EventEmitter */ \"./lib/cjs/EventEmitter.js\"));\nexports.EventEmitter = EventEmitter_1.default;\nconst Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.js\"));\nexports.Webform = Webform_1.default;\nconst utils_2 = __webpack_require__(/*! ./utils */ \"./lib/cjs/utils/index.js\");\nFormio_1.Formio.loadModules = (path = `${Formio_1.Formio.getApiUrl()}/externalModules.js`, name = 'externalModules') => {\n    Formio_1.Formio.requireLibrary(name, name, path, true)\n        .then((modules) => {\n        Formio_1.Formio.use(modules);\n    });\n};\n// This is needed to maintain correct imports using the \"dist\" file.\nFormio_1.Formio.isRenderer = true;\nFormio_1.Formio.Components = Components_1.default;\nFormio_1.Formio.Templates = Templates_1.default;\nFormio_1.Formio.Utils = utils_1.default;\nFormio_1.Formio.Form = Form_1.default;\nFormio_1.Formio.Displays = Displays_1.default;\nFormio_1.Formio.Providers = providers_1.default;\nFormio_1.Formio.Widgets = widgets_1.default;\nFormio_1.Formio.Evaluator = utils_2.Evaluator;\nFormio_1.Formio.AllComponents = components_1.default;\nFormio_1.Formio.Licenses = licenses_1.default;\n// This is strange, but is needed for \"premium\" components to import correctly.\nFormio_1.Formio.Formio = Formio_1.Formio;\nFormio_1.Formio.Components.setComponents(components_1.default);\n/**\n * Register a module\n * @param {any} mod - The module object to register. This can also be a function which accepts Formio as an argument.\n * @param {Function|null} [defaultFn] - The default function to call if the module does not have a known key.\n * @param {any} options - Options for the module.\n * @returns {void}\n */\nfunction registerModule(mod, defaultFn = null, options = {}) {\n    if (typeof mod === 'function') {\n        return registerModule(mod(Formio_1.Formio), defaultFn, options);\n    }\n    if (typeof mod !== 'object') {\n        return;\n    }\n    for (const key of Object.keys(mod)) {\n        const current = mod.framework || Formio_1.Formio.Templates.framework || 'bootstrap';\n        switch (key) {\n            case 'options':\n                Formio_1.Formio.options = lodash_1.default.merge(Formio_1.Formio.options, mod.options);\n                break;\n            case 'templates':\n                for (const framework of Object.keys(mod.templates)) {\n                    Formio_1.Formio.Templates.extendTemplate(framework, mod.templates[framework]);\n                }\n                if (mod.templates[current]) {\n                    Formio_1.Formio.Templates.current = mod.templates[current];\n                }\n                break;\n            case 'components':\n                Formio_1.Formio.Components.setComponents(mod.components);\n                break;\n            case 'framework':\n                Formio_1.Formio.Templates.framework = mod.framework;\n                break;\n            case 'fetch':\n                for (const name of Object.keys(mod.fetch)) {\n                    Formio_1.Formio.registerPlugin(mod.fetch[name], name);\n                }\n                break;\n            case 'providers':\n                for (const type of Object.keys(mod.providers)) {\n                    Formio_1.Formio.Providers.addProviders(type, mod.providers[type]);\n                }\n                break;\n            case 'displays':\n                Formio_1.Formio.Displays.addDisplays(mod.displays);\n                break;\n            case 'evaluator':\n                (0, utils_2.registerEvaluator)(mod.evaluator);\n                break;\n            case 'library':\n                options.license\n                    ? Formio_1.Formio.Licenses.addLicense(mod.library, options.license)\n                    : Formio_1.Formio.Licenses.removeLicense(mod.library);\n                break;\n            default:\n                if (defaultFn) {\n                    if (!defaultFn(key, mod)) {\n                        console.warn('Unknown module option', key);\n                    }\n                    break;\n                }\n                console.log('Unknown module option', key);\n        }\n    }\n}\nexports.registerModule = registerModule;\n/**\n * @param {Function|null} defaultFn - The default function to call if the module does not have a known key.\n * @returns {void}\n */\nfunction useModule(defaultFn = null) {\n    return (plugins, options = {}) => {\n        plugins = lodash_1.default.isArray(plugins) ? plugins : [plugins];\n        plugins.forEach((plugin) => {\n            if (Array.isArray(plugin)) {\n                plugin.forEach(p => registerModule(p, defaultFn, options));\n            }\n            else {\n                registerModule(plugin, defaultFn, options);\n            }\n        });\n    };\n}\nexports.useModule = useModule;\n/**\n * Allows passing in plugins as an array of plugins or a single plugin.\n *\n * Formio.plugins(plugin1, options);\n * Formio.plugins([plugin1, plugin2, etc], options);\n */\nFormio_1.Formio.use = useModule();\nvar Formio_2 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nObject.defineProperty(exports, \"FormioCore\", ({ enumerable: true, get: function () { return Formio_2.Formio; } }));\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/formio.form.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Webform = exports.EventEmitter = exports.Licenses = exports.Formio = exports.Form = exports.Utils = exports.Templates = exports.Widgets = exports.Providers = exports.Displays = exports.Components = exports.FormioCore = exports.useModule = exports.registerModule = void 0;\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nObject.defineProperty(exports, \"Formio\", ({ enumerable: true, get: function () { return Formio_1.Formio; } }));\nconst components_1 = __importDefault(__webpack_require__(/*! ./components */ \"./lib/cjs/components/index.js\"));\nconst Components_1 = __importDefault(__webpack_require__(/*! ./components/Components */ \"./lib/cjs/components/Components.js\"));\nexports.Components = Components_1.default;\nconst Displays_1 = __importDefault(__webpack_require__(/*! ./displays/Displays */ \"./lib/cjs/displays/Displays.js\"));\nexports.Displays = Displays_1.default;\nconst Templates_1 = __importDefault(__webpack_require__(/*! ./templates/Templates */ \"./lib/cjs/templates/Templates.js\"));\nexports.Templates = Templates_1.default;\nconst providers_1 = __importDefault(__webpack_require__(/*! ./providers */ \"./lib/cjs/providers/index.js\"));\nexports.Providers = providers_1.default;\nconst widgets_1 = __importDefault(__webpack_require__(/*! ./widgets */ \"./lib/cjs/widgets/index.js\"));\nexports.Widgets = widgets_1.default;\nconst Form_1 = __importDefault(__webpack_require__(/*! ./Form */ \"./lib/cjs/Form.js\"));\nexports.Form = Form_1.default;\nconst utils_1 = __importDefault(__webpack_require__(/*! ./utils */ \"./lib/cjs/utils/index.js\"));\nexports.Utils = utils_1.default;\nconst licenses_1 = __importDefault(__webpack_require__(/*! ./licenses */ \"./lib/cjs/licenses/index.js\"));\nexports.Licenses = licenses_1.default;\nconst EventEmitter_1 = __importDefault(__webpack_require__(/*! ./EventEmitter */ \"./lib/cjs/EventEmitter.js\"));\nexports.EventEmitter = EventEmitter_1.default;\nconst Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.js\"));\nexports.Webform = Webform_1.default;\nconst utils_2 = __webpack_require__(/*! ./utils */ \"./lib/cjs/utils/index.js\");\nFormio_1.Formio.loadModules = (path = `${Formio_1.Formio.getApiUrl()}/externalModules.js`, name = 'externalModules') => {\n    Formio_1.Formio.requireLibrary(name, name, path, true)\n        .then((modules) => {\n        Formio_1.Formio.use(modules);\n    });\n};\n// This is needed to maintain correct imports using the \"dist\" file.\nFormio_1.Formio.isRenderer = true;\nFormio_1.Formio.Components = Components_1.default;\nFormio_1.Formio.Templates = Templates_1.default;\nFormio_1.Formio.Utils = utils_1.default;\nFormio_1.Formio.Form = Form_1.default;\nFormio_1.Formio.Displays = Displays_1.default;\nFormio_1.Formio.Providers = providers_1.default;\nFormio_1.Formio.Widgets = widgets_1.default;\nFormio_1.Formio.Evaluator = utils_2.Evaluator;\nFormio_1.Formio.AllComponents = components_1.default;\nFormio_1.Formio.Licenses = licenses_1.default;\n// This is strange, but is needed for \"premium\" components to import correctly.\nFormio_1.Formio.Formio = Formio_1.Formio;\nFormio_1.Formio.Components.setComponents(components_1.default);\n/**\n * Register a module\n * @param {any} mod - The module object to register. This can also be a function which accepts Formio as an argument.\n * @param {Function|null} [defaultFn] - The default function to call if the module does not have a known key.\n * @param {any} options - Options for the module.\n * @returns {void}\n */\nfunction registerModule(mod, defaultFn = null, options = {}) {\n    if (typeof mod === 'function') {\n        return registerModule(mod(Formio_1.Formio), defaultFn, options);\n    }\n    if (typeof mod !== 'object') {\n        return;\n    }\n    for (const key of Object.keys(mod)) {\n        const current = mod.framework || Formio_1.Formio.Templates.framework || 'bootstrap';\n        switch (key) {\n            case 'options':\n                Formio_1.Formio.options = lodash_1.default.merge(Formio_1.Formio.options, mod.options);\n                break;\n            case 'templates':\n                for (const framework of Object.keys(mod.templates)) {\n                    Formio_1.Formio.Templates.extendTemplate(framework, mod.templates[framework]);\n                    Formio_1.Formio.Templates.defaultTemplates = lodash_1.default.defaults(mod.templates[framework], Formio_1.Formio.Templates.defaultTemplates);\n                }\n                if (mod.templates[current]) {\n                    Formio_1.Formio.Templates.current = mod.templates[current];\n                }\n                break;\n            case 'components':\n                Formio_1.Formio.Components.setComponents(mod.components);\n                break;\n            case 'framework':\n                Formio_1.Formio.Templates.framework = mod.framework;\n                break;\n            case 'fetch':\n                for (const name of Object.keys(mod.fetch)) {\n                    Formio_1.Formio.registerPlugin(mod.fetch[name], name);\n                }\n                break;\n            case 'providers':\n                for (const type of Object.keys(mod.providers)) {\n                    Formio_1.Formio.Providers.addProviders(type, mod.providers[type]);\n                }\n                break;\n            case 'displays':\n                Formio_1.Formio.Displays.addDisplays(mod.displays);\n                break;\n            case 'evaluator':\n                (0, utils_2.registerEvaluator)(mod.evaluator);\n                break;\n            case 'library':\n                options.license\n                    ? Formio_1.Formio.Licenses.addLicense(mod.library, options.license)\n                    : Formio_1.Formio.Licenses.removeLicense(mod.library);\n                break;\n            default:\n                if (defaultFn) {\n                    if (!defaultFn(key, mod)) {\n                        console.warn('Unknown module option', key);\n                    }\n                    break;\n                }\n                console.log('Unknown module option', key);\n        }\n    }\n}\nexports.registerModule = registerModule;\n/**\n * @param {Function|null} defaultFn - The default function to call if the module does not have a known key.\n * @returns {void}\n */\nfunction useModule(defaultFn = null) {\n    return (plugins, options = {}) => {\n        plugins = lodash_1.default.isArray(plugins) ? plugins : [plugins];\n        plugins.forEach((plugin) => {\n            if (Array.isArray(plugin)) {\n                plugin.forEach(p => registerModule(p, defaultFn, options));\n            }\n            else {\n                registerModule(plugin, defaultFn, options);\n            }\n        });\n    };\n}\nexports.useModule = useModule;\n/**\n * Allows passing in plugins as an array of plugins or a single plugin.\n *\n * Formio.plugins(plugin1, options);\n * Formio.plugins([plugin1, plugin2, etc], options);\n */\nFormio_1.Formio.use = useModule();\nvar Formio_2 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nObject.defineProperty(exports, \"FormioCore\", ({ enumerable: true, get: function () { return Formio_2.Formio; } }));\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/formio.form.js?");
 
 /***/ }),
 
@@ -5884,7 +5884,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.KEY_CODES = void 0;\nconst choices_js_1 = __importDefault(__webpack_require__(/*! @formio/choices.js */ \"./node_modules/@formio/choices.js/public/assets/scripts/choices.js\"));\n/**\n * TODO: REMOVE THIS ONCE THE PULL REQUEST HAS BEEN RESOLVED.\n *\n * https://github.com/jshjohnson/Choices/pull/788\n *\n * This is intentionally not part of the extended class, since other components use Choices and need this fix as well.\n * @type {Choices._generatePlaceholderValue}\n * @private\n */\nchoices_js_1.default.prototype._generatePlaceholderValue = function () {\n    if (this._isSelectElement && this.passedElement.placeholderOption) {\n        const { placeholderOption } = this.passedElement;\n        return placeholderOption ? placeholderOption.text : false;\n    }\n    const { placeholder, placeholderValue } = this.config;\n    const { element: { dataset }, } = this.passedElement;\n    if (placeholder) {\n        if (placeholderValue) {\n            return placeholderValue;\n        }\n        if (dataset.placeholder) {\n            return dataset.placeholder;\n        }\n    }\n    return false;\n};\nexports.KEY_CODES = {\n    BACK_KEY: 46,\n    DELETE_KEY: 8,\n    TAB_KEY: 9,\n    ENTER_KEY: 13,\n    A_KEY: 65,\n    ESC_KEY: 27,\n    UP_KEY: 38,\n    DOWN_KEY: 40,\n    PAGE_UP_KEY: 33,\n    PAGE_DOWN_KEY: 34,\n};\nclass ChoicesWrapper extends choices_js_1.default {\n    constructor(...args) {\n        super(...args);\n        this._onTabKey = this._onTabKey.bind(this);\n        this.isDirectionUsing = false;\n        this.shouldOpenDropDown = true;\n    }\n    _onTouchEnd(event) {\n        var target = (event || event.touches[0]).target;\n        var touchWasWithinContainer = this._wasTap && this.containerOuter.element.contains(target);\n        if (touchWasWithinContainer) {\n            var containerWasExactTarget = target === this.containerOuter.element || target === this.containerInner.element;\n            if (containerWasExactTarget) {\n                if (this._isTextElement) {\n                    this.input.focus();\n                }\n                else if (this._isSelectMultipleElement) {\n                    this.input.focus();\n                    this.showDropdown();\n                }\n            }\n            // Prevents focus event firing\n            event.stopPropagation();\n        }\n        this._wasTap = true;\n    }\n    _handleButtonAction(activeItems, element) {\n        if (!this._isSelectOneElement) {\n            return super._handleButtonAction(activeItems, element);\n        }\n        if (!activeItems ||\n            !element ||\n            !this.config.removeItems ||\n            !this.config.removeItemButton) {\n            return;\n        }\n        super._handleButtonAction(activeItems, element);\n    }\n    _onEnterKey(args) {\n        // Prevent dropdown form opening when removeItemButton was pressed using 'Enter' on keyboard\n        if (args.event.target.className === 'choices__button') {\n            this.shouldOpenDropDown = false;\n        }\n        super._onEnterKey(args);\n    }\n    _onDirectionKey(...args) {\n        if (!this._isSelectOneElement) {\n            return super._onDirectionKey(...args);\n        }\n        this.isDirectionUsing = true;\n        super._onDirectionKey(...args);\n        this.onSelectValue(...args);\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n            this.isDirectionUsing = false;\n        }, 250);\n    }\n    _onTabKey({ activeItems, hasActiveDropdown }) {\n        if (hasActiveDropdown) {\n            this._selectHighlightedChoice(activeItems);\n        }\n    }\n    _selectHighlightedChoice() {\n        const highlightedChoice = this.dropdown.getChild(`.${this.config.classNames.highlightedState}`);\n        if (highlightedChoice) {\n            const id = highlightedChoice.dataset.id;\n            const choice = id && this._store.getChoiceById(id);\n            this._addItem({\n                value: choice.value,\n                label: choice.label,\n                choiceId: choice.id,\n                groupId: choice.groupId,\n                customProperties: choice.customProperties,\n                placeholder: choice.placeholder,\n                keyCode: choice.keyCode\n            });\n            this._triggerChange(choice.value);\n        }\n        event.preventDefault();\n    }\n    _onKeyDown(event) {\n        if (!this._isSelectOneElement) {\n            return super._onKeyDown(event);\n        }\n        const { target, keyCode, ctrlKey, metaKey } = event;\n        if (target !== this.input.element &&\n            !this.containerOuter.element.contains(target)) {\n            return;\n        }\n        const activeItems = this._store.activeItems;\n        const hasFocusedInput = this.input.isFocussed;\n        const hasActiveDropdown = this.dropdown.isActive;\n        const hasItems = this.itemList.hasChildren;\n        const keyString = String.fromCharCode(keyCode);\n        const { BACK_KEY, DELETE_KEY, TAB_KEY, ENTER_KEY, A_KEY, ESC_KEY, UP_KEY, DOWN_KEY, PAGE_UP_KEY, PAGE_DOWN_KEY, } = exports.KEY_CODES;\n        const hasCtrlDownKeyPressed = ctrlKey || metaKey;\n        // If a user is typing and the dropdown is not active\n        if (!hasActiveDropdown && !this._isTextElement && /[a-zA-Z0-9-_ ]/.test(keyString)) {\n            const currentValue = this.input.element.value;\n            this.input.element.value = currentValue ? `${currentValue}${keyString}` : keyString;\n            this.showDropdown();\n        }\n        // Map keys to key actions\n        const keyDownActions = {\n            [A_KEY]: this._onAKey,\n            [TAB_KEY]: this._onTabKey,\n            [ENTER_KEY]: this._onEnterKey,\n            [ESC_KEY]: this._onEscapeKey,\n            [UP_KEY]: this._onDirectionKey,\n            [PAGE_UP_KEY]: this._onDirectionKey,\n            [DOWN_KEY]: this._onDirectionKey,\n            [PAGE_DOWN_KEY]: this._onDirectionKey,\n            [DELETE_KEY]: this._onDeleteKey,\n            [BACK_KEY]: this._onDeleteKey,\n        };\n        // If keycode has a function, run it\n        if (keyDownActions[keyCode]) {\n            keyDownActions[keyCode]({\n                event,\n                target,\n                keyCode,\n                metaKey,\n                activeItems,\n                hasFocusedInput,\n                hasActiveDropdown,\n                hasItems,\n                hasCtrlDownKeyPressed,\n            });\n        }\n    }\n    onSelectValue({ event, activeItems, hasActiveDropdown }) {\n        if (hasActiveDropdown) {\n            this._selectHighlightedChoice(activeItems);\n        }\n        else if (this._isSelectOneElement) {\n            this.showDropdown();\n            event.preventDefault();\n        }\n    }\n    showDropdown(...args) {\n        if (!this.shouldOpenDropDown) {\n            this.shouldOpenDropDown = true;\n            return;\n        }\n        super.showDropdown(...args);\n    }\n    hideDropdown(...args) {\n        if (this.isDirectionUsing) {\n            return;\n        }\n        super.hideDropdown(...args);\n    }\n    _onBlur(...args) {\n        if (this._isScrollingOnIe) {\n            return;\n        }\n        super._onBlur(...args);\n    }\n}\nexports[\"default\"] = ChoicesWrapper;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/utils/ChoicesWrapper.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};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst choices_js_1 = __importStar(__webpack_require__(/*! choices.js */ \"./node_modules/choices.js/public/assets/scripts/choices.js\"));\nconst ExtendedKeyCodeMap = Object.assign(Object.assign({}, choices_js_1.KeyCodeMap), { TAB_KEY: 9 });\nclass ChoicesWrapper extends choices_js_1.default {\n    constructor(...args) {\n        super(...args);\n        this._onTabKey = this._onTabKey.bind(this);\n        this.isDirectionUsing = false;\n        this.shouldOpenDropDown = true;\n    }\n    _onTouchEnd(event) {\n        var target = (event || event.touches[0]).target;\n        var touchWasWithinContainer = this._wasTap && this.containerOuter.element.contains(target);\n        if (touchWasWithinContainer) {\n            var containerWasExactTarget = target === this.containerOuter.element || target === this.containerInner.element;\n            if (containerWasExactTarget) {\n                if (this._isTextElement) {\n                    this.input.focus();\n                }\n                else if (this._isSelectMultipleElement) {\n                    this.input.focus();\n                    this.showDropdown();\n                }\n            }\n            // Prevents focus event firing\n            event.stopPropagation();\n        }\n        this._wasTap = true;\n    }\n    _onEnterKey(...args) {\n        const [event] = args;\n        // Prevent dropdown form opening when removeItemButton was pressed using 'Enter' on keyboard\n        if (event.target.className === 'choices__button') {\n            this.shouldOpenDropDown = false;\n        }\n        super._onEnterKey(...args);\n    }\n    _onDirectionKey(...args) {\n        if (!this._isSelectOneElement) {\n            return super._onDirectionKey(...args);\n        }\n        this.isDirectionUsing = true;\n        super._onDirectionKey(...args);\n        this.onSelectValue(...args);\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n            this.isDirectionUsing = false;\n        }, 250);\n    }\n    _onTabKey() {\n        if (this.dropdown.isActive) {\n            this._selectHighlightedChoice();\n        }\n    }\n    _selectHighlightedChoice() {\n        const highlightedChoice = this.dropdown.element.querySelector(`.${this.config.classNames.highlightedState}`);\n        if (highlightedChoice) {\n            const id = highlightedChoice.dataset.id;\n            const choice = id && this._store.getChoiceById(Number(id));\n            this._addItem({\n                id: choice.id,\n                value: choice.value,\n                label: choice.label,\n                choiceId: choice.id,\n                groupId: choice.groupId,\n                customProperties: choice.customProperties,\n                placeholder: choice.placeholder,\n                keyCode: choice.keyCode\n            });\n            this._triggerChange(choice.value);\n        }\n    }\n    _onKeyDown(event) {\n        const keyCode = event.keyCode;\n        return this._isSelectOneElement && keyCode === ExtendedKeyCodeMap.TAB_KEY\n            ? this._onTabKey()\n            : super._onKeyDown(event);\n    }\n    onSelectValue(event, hasActiveDropdown) {\n        if (hasActiveDropdown) {\n            this._selectHighlightedChoice();\n        }\n        else if (this._isSelectOneElement) {\n            this.showDropdown();\n            event.preventDefault();\n        }\n    }\n    showDropdown(...args) {\n        setTimeout(() => {\n            if (!this.shouldOpenDropDown) {\n                this.shouldOpenDropDown = true;\n                return;\n            }\n            super.showDropdown(...args);\n        }, 0);\n    }\n    hideDropdown(...args) {\n        if (this.isDirectionUsing) {\n            return;\n        }\n        super.hideDropdown(...args);\n    }\n}\nexports[\"default\"] = ChoicesWrapper;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/utils/ChoicesWrapper.js?");
 
 /***/ }),
 
@@ -6170,7 +6170,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.getContextComponents = exports.observeOverload = exports.withSwitch = exports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.removeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = void 0;\nexports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports.getFocusableElements = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = void 0;\n/* global jQuery */\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst moment_timezone_1 = __importDefault(__webpack_require__(/*! moment-timezone/moment-timezone */ \"./node_modules/moment-timezone/moment-timezone.js\"));\nconst jstimezonedetect_1 = __importDefault(__webpack_require__(/*! jstimezonedetect */ \"./node_modules/jstimezonedetect/dist/jstz.min.js\"));\nconst dompurify_1 = __importDefault(__webpack_require__(/*! dompurify */ \"./node_modules/dompurify/dist/purify.cjs.js\"));\nconst formUtils_1 = __webpack_require__(/*! ./formUtils */ \"./lib/cjs/utils/formUtils.js\");\nconst Evaluator_1 = __webpack_require__(/*! ./Evaluator */ \"./lib/cjs/utils/Evaluator.js\");\nconst conditionOperators_1 = __importDefault(__webpack_require__(/*! ./conditionOperators */ \"./lib/cjs/utils/conditionOperators/index.js\"));\nconst core_1 = __webpack_require__(/*! @formio/core */ \"./node_modules/@formio/core/lib/index.js\");\n/**\n * Evaluate a method.\n * @param {Function|string|object} func - The function to evaluate.\n * @param {*} args - A map of arguments to pass to the function.\n * @param {string} ret - The name of the \"return\" variable in the script.\n * @param {boolean} interpolate - True if the script should be interpolated before being executed.\n * @param {import('@formio/core').EvaluatorOptions} options - The evaluator options.\n * @returns {*} - The result of the evaluation.\n */\nfunction evaluate(func, args, ret, interpolate, options = {}) {\n    return Evaluator_1.Evaluator.evaluate(func, args, ret, interpolate, undefined, options);\n}\nexports.evaluate = evaluate;\n/**\n * Returns a random compoennt ID.\n * @returns {string} - A random component ID.\n */\nfunction getRandomComponentId() {\n    return `e${Math.random().toString(36).substring(7)}`;\n}\nexports.getRandomComponentId = getRandomComponentId;\n/**\n * Get a property value of an element.\n * @param {CSSStyleDeclaration} style - The style element to get the property value from.\n * @param {string} prop - The property to get the value for.\n * @returns {number} - The value of the property.\n */\nfunction getPropertyValue(style, prop) {\n    let value = style.getPropertyValue(prop);\n    value = value ? value.replace(/[^0-9.]/g, '') : '0';\n    return parseFloat(value);\n}\nexports.getPropertyValue = getPropertyValue;\n/**\n * Get an elements bounding rectagle.\n * @param {HTMLElement} element - A DOM element to get the bounding rectangle for.\n * @returns {{x: number, y: number, width: number, height: number}} - The bounding rectangle.\n */\nfunction getElementRect(element) {\n    const style = window.getComputedStyle(element, null);\n    return {\n        x: getPropertyValue(style, 'left'),\n        y: getPropertyValue(style, 'top'),\n        width: getPropertyValue(style, 'width'),\n        height: getPropertyValue(style, 'height')\n    };\n}\nexports.getElementRect = getElementRect;\n/**\n * Get non HTMLElement property in the window object\n * @param {string} property - The window property to fetch the script plugin from.\n * @returns {any | undefined} - The HTML Element property on the window object.\n */\nfunction getScriptPlugin(property) {\n    const obj = window[property];\n    if (typeof HTMLElement === 'object' ? obj instanceof HTMLElement : //DOM2\n        obj && typeof obj === 'object' && true && obj.nodeType === 1 && typeof obj.nodeName === 'string') {\n        return undefined;\n    }\n    return obj;\n}\nexports.getScriptPlugin = getScriptPlugin;\n/**\n * Determines the boolean value of a setting.\n * @param {string|boolean} value - A string or boolean value to convert to boolean.\n * @returns {boolean} - The boolean value of the setting.\n */\nfunction boolValue(value) {\n    if (lodash_1.default.isBoolean(value)) {\n        return value;\n    }\n    else if (lodash_1.default.isString(value)) {\n        return (value.toLowerCase() === 'true');\n    }\n    else {\n        return !!value;\n    }\n}\nexports.boolValue = boolValue;\n/**\n * Check to see if an ID is a mongoID.\n * @param {string} text - The text to check if it is a mongoID.\n * @returns {boolean} - TRUE if the text is a mongoID; FALSE otherwise.\n */\nfunction isMongoId(text) {\n    return !!text.toString().match(/^[0-9a-fA-F]{24}$/);\n}\nexports.isMongoId = isMongoId;\n/**\n * Checks the calculated value for a provided component and data.\n * @param {import('@formio/core').Component} component - The component to check for the calculated value.\n * @param {import('@formio/core').Submission} submission - A submission object.\n * @param {*} rowData - The contextual row data for the component.\n */\nfunction checkCalculated(component, submission, rowData) {\n    // Process calculated value stuff if present.\n    if (component.calculateValue) {\n        lodash_1.default.set(rowData, component.key, evaluate(component.calculateValue, {\n            value: undefined,\n            data: submission ? submission.data : rowData,\n            row: rowData,\n            util: this,\n            component\n        }, 'value'));\n    }\n}\nexports.checkCalculated = checkCalculated;\n/**\n * Check if a simple conditional evaluates to true.\n * @param {import('@formio/core').Component} component - The component to check for the conditional.\n * @param {import('@formio/core').SimpleConditional} condition - The condition to check.\n * @param {*} row - The row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The instance of the component.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\n/**\n *\n * @param conditionPaths\n * @param data\n */\nfunction getConditionalPathsRecursive(conditionPaths, data) {\n    let currentGlobalIndex = 0;\n    const conditionalPathsArray = [];\n    const getConditionalPaths = (data, currentPath = '', localIndex = 0) => {\n        currentPath = currentPath.replace(/^\\.+|\\.+$/g, '');\n        const currentLocalIndex = localIndex;\n        const currentData = lodash_1.default.get(data, currentPath);\n        if (Array.isArray(currentData) && currentData.filter(Boolean).length > 0) {\n            if (currentData.some(element => typeof element !== 'object')) {\n                return;\n            }\n            const hasInnerDataArray = currentData.find(x => Array.isArray(x[conditionPaths[currentLocalIndex]]));\n            if (hasInnerDataArray) {\n                currentData.forEach((_, indexOutside) => {\n                    const innerCompDataPath = `${currentPath}[${indexOutside}].${conditionPaths[currentLocalIndex]}`;\n                    getConditionalPaths(data, innerCompDataPath, currentLocalIndex + 1);\n                });\n            }\n            else {\n                currentData.forEach((x, index) => {\n                    if (!lodash_1.default.isNil(x[conditionPaths[currentLocalIndex]])) {\n                        const compDataPath = `${currentPath}[${index}].${conditionPaths[currentLocalIndex]}`;\n                        conditionalPathsArray.push(compDataPath);\n                    }\n                });\n            }\n        }\n        else {\n            if (!conditionPaths[currentGlobalIndex]) {\n                return;\n            }\n            currentGlobalIndex = currentGlobalIndex + 1;\n            getConditionalPaths(data, `${currentPath}.${conditionPaths[currentGlobalIndex - 1]}`, currentGlobalIndex);\n        }\n    };\n    getConditionalPaths(data);\n    return conditionalPathsArray;\n}\n/**\n *\n * @param component\n * @param condition\n * @param row\n * @param data\n * @param instance\n */\nfunction checkSimpleConditional(component, condition, row, data, instance) {\n    if (condition.when) {\n        const value = getComponentActualValue(condition.when, data, row);\n        const eq = String(condition.eq);\n        const show = String(condition.show);\n        // Special check for selectboxes component.\n        if (lodash_1.default.isObject(value) && lodash_1.default.has(value, condition.eq)) {\n            return String(value[condition.eq]) === show;\n        }\n        // FOR-179 - Check for multiple values.\n        if (Array.isArray(value) && value.map(String).includes(eq)) {\n            return show === 'true';\n        }\n        return (String(value) === eq) === (show === 'true');\n    }\n    else {\n        const { conditions = [], conjunction = 'all', show = true } = condition;\n        if (!conditions.length) {\n            return true;\n        }\n        const conditionsResult = lodash_1.default.map(conditions, (cond) => {\n            var _a, _b;\n            const { value: comparedValue, operator, component: conditionComponentPath } = cond;\n            if (!conditionComponentPath) {\n                return true;\n            }\n            const splittedConditionPath = conditionComponentPath.split('.');\n            const conditionalPaths = ((_a = instance === null || instance === void 0 ? void 0 : instance.parent) === null || _a === void 0 ? void 0 : _a.type) === 'datagrid' || ((_b = instance === null || instance === void 0 ? void 0 : instance.parent) === null || _b === void 0 ? void 0 : _b.type) === 'editgrid' ? [] : getConditionalPathsRecursive(splittedConditionPath, data);\n            if (conditionalPaths.length > 0) {\n                return conditionalPaths.map((path) => {\n                    const value = getComponentActualValue(path, data, row);\n                    const ConditionOperator = conditionOperators_1.default[operator];\n                    return ConditionOperator\n                        ? new ConditionOperator().getResult({ value, comparedValue, instance, component, path })\n                        : true;\n                });\n            }\n            else {\n                const value = getComponentActualValue(conditionComponentPath, data, row);\n                const СonditionOperator = conditionOperators_1.default[operator];\n                return СonditionOperator\n                    ? new СonditionOperator().getResult({ value, comparedValue, instance, component, path: conditionComponentPath })\n                    : true;\n            }\n        });\n        let result = false;\n        switch (conjunction) {\n            case 'any':\n                result = lodash_1.default.some(conditionsResult.flat(), res => !!res);\n                break;\n            default:\n                result = lodash_1.default.every(conditionsResult.flat(), res => !!res);\n        }\n        return (0, core_1.convertShowToBoolean)(show) ? result : !result;\n    }\n}\nexports.checkSimpleConditional = checkSimpleConditional;\n/**\n * Returns a components normalized value.\n * @param {string} compPath - The full path to the component.\n * @param {*} data - The data object to get the value from.\n * @param {*} row - The contextual row data for the component.\n * @returns {*} - The normalized value of the component.\n */\nfunction getComponentActualValue(compPath, data, row) {\n    let value = null;\n    if (data) {\n        value = (0, formUtils_1.getValue)({ data }, compPath);\n    }\n    if (row && lodash_1.default.isNil(value)) {\n        value = (0, formUtils_1.getValue)({ data: row }, compPath);\n    }\n    // FOR-400 - Fix issue where falsey values were being evaluated as show=true\n    if (lodash_1.default.isNil(value) || (lodash_1.default.isObject(value) && lodash_1.default.isEmpty(value))) {\n        value = '';\n    }\n    return value;\n}\nexports.getComponentActualValue = getComponentActualValue;\n/**\n * Check custom javascript conditional.\n * @param {import('@formio/core').Component} component - The component to check for the conditional.\n * @param {string} custom - The custom conditional string to evaluate.\n * @param {*} row - The row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {string} variable - The variable name for the result of the custom conditional.\n * @param {*} onError - A custom return if there is an error or the value is null from the evaluation.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @returns {*} - The result of the evaulation.\n */\nfunction checkCustomConditional(component, custom, row, data, form, variable, onError, instance) {\n    if (typeof custom === 'string') {\n        custom = `var ${variable} = true; ${custom}; return ${variable};`;\n    }\n    const value = (instance && instance.evaluate) ?\n        instance.evaluate(custom, { row, data, form }) :\n        evaluate(custom, { row, data, form });\n    if (value === null) {\n        return onError;\n    }\n    return value;\n}\nexports.checkCustomConditional = checkCustomConditional;\n/**\n * Check a component for JSON conditionals.\n * @param {import('@formio/core').Component} component - The component\n * @param {import('@formio/core').JSONConditional} json - The json conditional to check.\n * @param {*} row - The contextual row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The Form JSON of the form.\n * @param {*} onError - Custom return value if there is an error.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\nfunction checkJsonConditional(component, json, row, data, form, onError) {\n    try {\n        return core_1.jsonLogic.apply(json, {\n            data,\n            row,\n            form,\n            _: lodash_1.default,\n        });\n    }\n    catch (err) {\n        console.warn(`An error occurred in jsonLogic advanced condition for ${component.key}`, err);\n        return onError;\n    }\n}\nexports.checkJsonConditional = checkJsonConditional;\n/**\n * Returns the contextual row data for a component.\n * @param {import('@formio/core').Component} component - The component to get the row data for.\n * @param {*} row - The row data for the component.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @param {*} conditional - The component conditional.\n * @returns {*} - The contextual row data for the component.\n */\nfunction getRow(component, row, instance, conditional) {\n    var _a, _b, _c;\n    const condition = conditional || component.conditional;\n    // If no component's instance passed (happens only in 6.x server), calculate its path based on the schema\n    if (!instance) {\n        instance = lodash_1.default.cloneDeep(component);\n    }\n    const dataParent = getDataParentComponent(instance);\n    if (dataParent) {\n        const parentPath = (_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localDataPath;\n        const isTriggerCondtionComponentPath = condition.when || !condition.conditions\n            ? (_b = condition.when) === null || _b === void 0 ? void 0 : _b.startsWith((_c = dataParent.paths) === null || _c === void 0 ? void 0 : _c.localPath)\n            : lodash_1.default.some(condition.conditions, cond => { var _a; return cond.component.startsWith((_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localPath); });\n        if (isTriggerCondtionComponentPath) {\n            const newRow = {};\n            lodash_1.default.set(newRow, parentPath, row);\n            row = newRow;\n        }\n    }\n    return row;\n}\n/**\n * Checks the conditions for a provided component and data.\n * @param {import('@formio/core').Component} component - The component to check for the condition.\n * @param {*} row - The data within a row\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\nfunction checkCondition(component, row, data, form, instance) {\n    const { customConditional, conditional } = component;\n    if (customConditional) {\n        return checkCustomConditional(component, customConditional, row, data, form, 'show', true, instance);\n    }\n    else if (conditional && (conditional.when || lodash_1.default.some(conditional.conditions || [], condition => condition.component && condition.operator))) {\n        row = getRow(component, row, instance);\n        return checkSimpleConditional(component, conditional, row, data, instance);\n    }\n    else if (conditional && conditional.json) {\n        return checkJsonConditional(component, conditional.json, row, data, form, true);\n    }\n    // Default to show.\n    return true;\n}\nexports.checkCondition = checkCondition;\n/**\n * Test a trigger on a component.\n * @param {import('@formio/core').Component} component - The component to test the trigger against.\n * @param {import('@formio/core').LogicTrigger} trigger - The trigger configuration.\n * @param {import('@formio/core').DataObject} row - The contextual row data.\n * @param {import('@formio/core').DataObject} data - The root data object.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {any} instance - The component that is performing the trigger.\n * @returns {boolean} - TRUE if the trigger should fire; FALSE otherwise.\n */\nfunction checkTrigger(component, trigger, row, data, form, instance) {\n    // If trigger is empty, don't fire it\n    if (!trigger || !trigger[trigger.type]) {\n        return false;\n    }\n    switch (trigger.type) {\n        case 'simple':\n            row = getRow(component, row, instance, trigger.simple);\n            return checkSimpleConditional(component, trigger.simple, row, data, instance);\n        case 'javascript':\n            return checkCustomConditional(component, trigger.javascript, row, data, form, 'result', false, instance);\n        case 'json':\n            return checkJsonConditional(component, trigger.json, row, data, form, false);\n    }\n    // If none of the types matched, don't fire the trigger.\n    return false;\n}\nexports.checkTrigger = checkTrigger;\n/**\n * Sets a property on a component via an executed Logic action.\n * @param {import('@formio/core').Component} component - The component to set the property on.\n * @param {import('@formio/core').LogicAction} action - The action to perform on the component.\n * @param {string} result - The name of the variable in the evaulation to use as the result.\n * @param {import('@formio/core').DataObject} row - The contextual row data.\n * @param {import('@formio/core').DataObject} data - The full submission data.\n * @param {any} instance - The component instance.\n * @returns {import('@formio/core').Component} - The modified component.\n */\nfunction setActionProperty(component, action, result, row, data, instance) {\n    const property = action.property.value;\n    switch (action.property.type) {\n        case 'boolean': {\n            const currentValue = lodash_1.default.get(component, property, false).toString();\n            const newValue = action.state.toString();\n            if (currentValue !== newValue) {\n                lodash_1.default.set(component, property, newValue === 'true');\n            }\n            break;\n        }\n        case 'string': {\n            const evalData = {\n                data,\n                row,\n                component,\n                result,\n            };\n            const textValue = action.property.component ? action[action.property.component] : action.text;\n            const currentValue = lodash_1.default.get(component, property, '');\n            const newValue = (instance && instance.interpolate)\n                ? instance.interpolate(textValue, evalData)\n                : Evaluator_1.Evaluator.interpolate(textValue, evalData);\n            if (newValue !== currentValue) {\n                lodash_1.default.set(component, property, newValue);\n            }\n            break;\n        }\n    }\n    return component;\n}\nexports.setActionProperty = setActionProperty;\n/**\n * Removes HTML tags from string e.g. <div>Hello World</div> => Hello World\n * @param {string} str - The string to remove HTML tags from.\n * @returns {string} - The string without HTML tags.\n */\nfunction removeHTML(str) {\n    const doc = new window.DOMParser().parseFromString(str, 'text/html');\n    return (doc.body.textContent || '').trim();\n}\nexports.removeHTML = removeHTML;\n/**\n * Unescape HTML characters like &lt, &gt, &amp and etc.\n * @param {string} str - The string to unescape.\n * @returns {string} - The unescaped string.\n */\nfunction unescapeHTML(str) {\n    if (typeof window === 'undefined' || !('DOMParser' in window)) {\n        return str;\n    }\n    const elem = document.createElement('textarea');\n    elem.innerHTML = str;\n    return elem.value;\n}\nexports.unescapeHTML = unescapeHTML;\n/**\n * Make HTML element from string\n * @param {string} str - The string to convert to an HTML element.\n * @param {string} selector - The selector to use to get the element once it is created.\n * @returns {HTMLElement} - The HTML element that was created.\n */\nfunction convertStringToHTMLElement(str, selector) {\n    const doc = new window.DOMParser().parseFromString(str, 'text/html');\n    return doc.body.querySelector(selector);\n}\nexports.convertStringToHTMLElement = convertStringToHTMLElement;\n/**\n * Make a filename guaranteed to be unique.\n * @param {string} name - The original name of the file.\n * @param {string} template - The template to use for the unique name.\n * @param {object} evalContext - The context to use for the evaluation.\n * @returns {string} - A unique filename.\n */\nfunction uniqueName(name, template, evalContext) {\n    template = template || '{{fileName}}-{{guid}}';\n    //include guid in template anyway, to prevent overwriting issue if filename matches existing file\n    if (!template.includes('{{guid}}')) {\n        template = `${template}-{{guid}}`;\n    }\n    const parts = name.split('.');\n    let fileName = parts.slice(0, parts.length - 1).join('.');\n    const extension = parts.length > 1\n        ? `.${lodash_1.default.last(parts)}`\n        : '';\n    //allow only 100 characters from original name to avoid issues with filename length restrictions\n    fileName = fileName.substr(0, 100);\n    evalContext = Object.assign(evalContext || {}, {\n        fileName,\n        guid: guid()\n    });\n    //only letters, numbers, dots, dashes, underscores and spaces are allowed. Anything else will be replaced with dash\n    const uniqueName = `${Evaluator_1.Evaluator.interpolate(template, evalContext)}${extension}`.replace(/[^0-9a-zA-Z.\\-_ ]/g, '-');\n    return uniqueName;\n}\nexports.uniqueName = uniqueName;\n/**\n * Returns a GUID\n * @returns {string} - A GUID.\n */\nfunction guid() {\n    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {\n        const r = Math.random() * 16 | 0;\n        const v = c === 'x'\n            ? r\n            : (r & 0x3 | 0x8);\n        return v.toString(16);\n    });\n}\nexports.guid = guid;\n/**\n * Return a translated date setting.\n * @param {string|Date} date - The date to translate.\n * @returns {(null|Date)} - The translated date.\n */\nfunction getDateSetting(date) {\n    if (lodash_1.default.isNil(date) || lodash_1.default.isNaN(date) || date === '') {\n        return null;\n    }\n    if (date instanceof Date) {\n        return date;\n    }\n    else if (typeof date.toDate === 'function') {\n        return date.isValid() ? date.toDate() : null;\n    }\n    let dateSetting = ((typeof date !== 'string') || (date.indexOf('moment(') === -1)) ? (0, moment_timezone_1.default)(date) : null;\n    if (dateSetting && dateSetting.isValid()) {\n        return dateSetting.toDate();\n    }\n    dateSetting = null;\n    try {\n        const value = Evaluator_1.Evaluator.evaluator(`return ${date};`, 'moment')(moment_timezone_1.default);\n        if (typeof value === 'string') {\n            dateSetting = (0, moment_timezone_1.default)(value);\n        }\n        else if (typeof value.toDate === 'function') {\n            dateSetting = (0, moment_timezone_1.default)(value.toDate().toUTCString());\n        }\n        else if (value instanceof Date) {\n            dateSetting = (0, moment_timezone_1.default)(value);\n        }\n    }\n    catch (e) {\n        return null;\n    }\n    if (!dateSetting) {\n        return null;\n    }\n    // Ensure this is a date.\n    if (!dateSetting.isValid()) {\n        return null;\n    }\n    return dateSetting.toDate();\n}\nexports.getDateSetting = getDateSetting;\n/**\n * Returns true if the date is a valid date. False otherwise.\n * @param {Date|string} date - The date to check for validity.\n * @returns {boolean} - TRUE if the date is valid; FALSE otherwise.\n */\nfunction isValidDate(date) {\n    return lodash_1.default.isDate(date) && !lodash_1.default.isNaN(date.getDate());\n}\nexports.isValidDate = isValidDate;\n/**\n * Get the current timezone string.\n * @returns {string} - The current timezone.\n */\nfunction currentTimezone() {\n    if (moment_timezone_1.default.currentTimezone) {\n        return moment_timezone_1.default.currentTimezone;\n    }\n    moment_timezone_1.default.currentTimezone = jstimezonedetect_1.default.determine().name();\n    return moment_timezone_1.default.currentTimezone;\n}\nexports.currentTimezone = currentTimezone;\n/**\n * Get an offset date provided a date object and timezone object.\n * @param {Date} date - The date to offset.\n * @param {string} timezone - The timezone to offset the date to.\n * @returns {Date} - The offset date.\n */\nfunction offsetDate(date, timezone) {\n    if (timezone === 'UTC') {\n        return {\n            date: new Date(date.getTime() + (date.getTimezoneOffset() * 60000)),\n            abbr: 'UTC'\n        };\n    }\n    const dateMoment = (0, moment_timezone_1.default)(date).tz(timezone);\n    return {\n        date: new Date(date.getTime() + ((dateMoment.utcOffset() + date.getTimezoneOffset()) * 60000)),\n        abbr: dateMoment.format('z')\n    };\n}\nexports.offsetDate = offsetDate;\n/**\n * Returns if the zones are loaded.\n * @returns {boolean} - TRUE if the zones are loaded; FALSE otherwise.\n */\nfunction zonesLoaded() {\n    return moment_timezone_1.default.zonesLoaded;\n}\nexports.zonesLoaded = zonesLoaded;\n/**\n * Returns if we should load the zones.\n * @param {string} timezone - The timezone to check if we should load the zones.\n * @returns {boolean} - TRUE if we should load the zones; FALSE otherwise.\n */\nfunction shouldLoadZones(timezone) {\n    if (timezone === currentTimezone() || timezone === 'UTC') {\n        return false;\n    }\n    return true;\n}\nexports.shouldLoadZones = shouldLoadZones;\n/**\n * Externally load the timezone data.\n * @param {string} url - The URL to load the timezone data from.\n * @param {string} timezone - The timezone to load.\n * @returns {Promise<any> | *} - Resolves when the zones for this timezone are loaded.\n */\nfunction loadZones(url, timezone) {\n    if (timezone && !shouldLoadZones(timezone)) {\n        // Return non-resolving promise.\n        return new Promise(lodash_1.default.noop);\n    }\n    if (moment_timezone_1.default.zonesPromise) {\n        return moment_timezone_1.default.zonesPromise;\n    }\n    return moment_timezone_1.default.zonesPromise = fetch(url)\n        .then(resp => resp.json().then(zones => {\n        moment_timezone_1.default.tz.load(zones);\n        moment_timezone_1.default.zonesLoaded = true;\n        // Trigger a global event that the timezones have finished loading.\n        if (document && document.createEvent && document.body && document.body.dispatchEvent) {\n            var event = document.createEvent('Event');\n            event.initEvent('zonesLoaded', true, true);\n            document.body.dispatchEvent(event);\n        }\n    }));\n}\nexports.loadZones = loadZones;\n/**\n * Get the moment date object for translating dates with timezones.\n * @param {string|Date} value - The value to convert into a moment date.\n * @param {string} format - The format to convert the date to.\n * @param {string} timezone - The timezone to convert the date to.\n * @param {object} options - The options object\n * @returns {Date} - The moment date object.\n */\nfunction momentDate(value, format, timezone, options) {\n    const momentDate = (0, moment_timezone_1.default)(value);\n    if (!timezone) {\n        return momentDate;\n    }\n    if (timezone === 'UTC') {\n        timezone = 'Etc/UTC';\n    }\n    if ((timezone !== currentTimezone() || (format && format.match(/\\s(z$|z\\s)/))) && (moment_timezone_1.default.zonesLoaded || (options === null || options === void 0 ? void 0 : options.email))) {\n        return momentDate.tz(timezone);\n    }\n    return momentDate;\n}\nexports.momentDate = momentDate;\n/**\n * Format a date provided a value, format, and timezone object.\n * @param {string} timezonesUrl - The URL to load the timezone data from.\n * @param {string|Date} value - The value to format.\n * @param {string} format - The format to format the date to.\n * @param {string} timezone - The timezone to format the date to.\n * @param {string} flatPickrInputFormat - The format to use for flatpickr input.\n * @returns {string} - The formatted date.\n */\nfunction formatDate(timezonesUrl, value, format, timezone, flatPickrInputFormat) {\n    const momentDate = (0, moment_timezone_1.default)(value, flatPickrInputFormat || undefined);\n    if (timezone === currentTimezone()) {\n        // See if our format contains a \"z\" timezone character.\n        if (format.match(/\\s(z$|z\\s)/)) {\n            loadZones(timezonesUrl);\n            if (moment_timezone_1.default.zonesLoaded) {\n                return momentDate.tz(timezone).format(convertFormatToMoment(format));\n            }\n            else {\n                return momentDate.format(convertFormatToMoment(format.replace(/\\s(z$|z\\s)/, '')));\n            }\n        }\n        // Return the standard format.\n        return momentDate.format(convertFormatToMoment(format));\n    }\n    if (timezone === 'UTC') {\n        const offset = offsetDate(momentDate.toDate(), 'UTC');\n        return `${(0, moment_timezone_1.default)(offset.date).format(convertFormatToMoment(format))} UTC`;\n    }\n    // Load the zones since we need timezone information.\n    loadZones(timezonesUrl);\n    if (moment_timezone_1.default.zonesLoaded && timezone) {\n        return momentDate.tz(timezone).format(`${convertFormatToMoment(format)} z`);\n    }\n    else {\n        return momentDate.format(convertFormatToMoment(format));\n    }\n}\nexports.formatDate = formatDate;\n/**\n * Pass a format function to format within a timezone.\n * @param {string} timezonesUrl - The URL to load the timezone data from.\n * @param {Function} formatFn - The format function to use.\n * @param {Date|string} date - The date to format.\n * @param {string} format - The format to format the date to.\n * @param {string} timezone - The timezone to format the date to.\n * @returns {string} - The formatted date.\n */\nfunction formatOffset(timezonesUrl, formatFn, date, format, timezone) {\n    if (timezone === currentTimezone()) {\n        return formatFn(date, format);\n    }\n    if (timezone === 'UTC') {\n        return `${formatFn(offsetDate(date, 'UTC').date, format)} UTC`;\n    }\n    // Load the zones since we need timezone information.\n    loadZones(timezonesUrl);\n    if (moment_timezone_1.default.zonesLoaded) {\n        const offset = offsetDate(date, timezone);\n        return `${formatFn(offset.date, format)} ${offset.abbr}`;\n    }\n    else {\n        return formatFn(date, format);\n    }\n}\nexports.formatOffset = formatOffset;\n/**\n * Returns the local date format information.\n * @param {Intl.LocalesArgument} locale - The locale to get the date format for.\n * @returns {object} - The local date format information.\n */\nfunction getLocaleDateFormatInfo(locale) {\n    const formatInfo = {};\n    const day = 21;\n    const exampleDate = new Date(2017, 11, day);\n    const localDateString = exampleDate.toLocaleDateString(locale);\n    formatInfo.dayFirst = localDateString.slice(0, 2) === day.toString();\n    return formatInfo;\n}\nexports.getLocaleDateFormatInfo = getLocaleDateFormatInfo;\n/**\n * Convert the format from the angular-datepicker module to flatpickr format.\n * @param {string} format - The format to convert.\n * @returns {string} - The converted format.\n */\nfunction convertFormatToFlatpickr(format) {\n    return format\n        // Remove the Z timezone offset, not supported by flatpickr.\n        .replace(/Z/g, '')\n        // Year conversion.\n        .replace(/y/g, 'Y')\n        .replace('YYYY', 'Y')\n        .replace('YY', 'y')\n        // Month conversion.\n        .replace('MMMM', 'F')\n        .replace(/M/g, 'n')\n        .replace('nnn', 'M')\n        .replace('nn', 'm')\n        // Day in month.\n        .replace(/d/g, 'j')\n        .replace(/jj/g, 'd')\n        // Day in week.\n        .replace('EEEE', 'l')\n        .replace('EEE', 'D')\n        // Hours, minutes, seconds\n        .replace('HH', 'H')\n        .replace('hh', 'G')\n        .replace('mm', 'i')\n        .replace('ss', 'S')\n        .replace(/a/g, 'K');\n}\nexports.convertFormatToFlatpickr = convertFormatToFlatpickr;\n/**\n * Convert the format from the angular-datepicker module to moment format.\n * @param {string} format - The format to convert.\n * @returns {string} - The converted format.\n */\nfunction convertFormatToMoment(format) {\n    return format\n        // Year conversion.\n        .replace(/y/g, 'Y')\n        // Day in month.\n        .replace(/d/g, 'D')\n        // Day in week.\n        .replace(/E/g, 'd')\n        // AM/PM marker\n        .replace(/a/g, 'A')\n        // Unix Timestamp\n        .replace(/U/g, 'X');\n}\nexports.convertFormatToMoment = convertFormatToMoment;\n/**\n * Convert the format from the angular-datepicker module to mask format.\n * @param {string} format - The format to convert.\n * @returns {string} - The converted format.\n */\nfunction convertFormatToMask(format) {\n    return format\n        // Long month replacement.\n        .replace(/M{4}/g, 'MM')\n        // Initial short month conversion.\n        .replace(/M{3}/g, '***')\n        // Short month conversion if input as text.\n        .replace(/e/g, 'Q')\n        // Month number conversion.\n        .replace(/W/g, '99')\n        // Year conversion.\n        .replace(/[ydhmswHMG]/g, '9')\n        // AM/PM conversion.\n        .replace(/a/g, 'AA');\n}\nexports.convertFormatToMask = convertFormatToMask;\n/**\n * Returns an input mask that is compatible with the input mask library.\n * @param {string} mask - The Form.io input mask.\n * @param {string} placeholderChar - Char which is used as a placeholder.\n * @returns {Array} - The input mask for the mask library.\n */\nfunction getInputMask(mask, placeholderChar) {\n    if (mask instanceof Array) {\n        return mask;\n    }\n    const maskArray = [];\n    maskArray.numeric = true;\n    for (let i = 0; i < mask.length; i++) {\n        switch (mask[i]) {\n            case '9':\n                maskArray.push(/\\d/);\n                break;\n            case 'A':\n                maskArray.numeric = false;\n                maskArray.push(/[a-zA-Z]/);\n                break;\n            case 'a':\n                maskArray.numeric = false;\n                maskArray.push(/[a-z]/);\n                break;\n            case '*':\n                maskArray.numeric = false;\n                maskArray.push(/[a-zA-Z0-9]/);\n                break;\n            // If char which is used inside mask placeholder was used in the mask, replace it with space to prevent errors\n            case placeholderChar:\n                maskArray.numeric = false;\n                maskArray.push(' ');\n                break;\n            default:\n                maskArray.numeric = false;\n                maskArray.push(mask[i]);\n                break;\n        }\n    }\n    return maskArray;\n}\nexports.getInputMask = getInputMask;\n/**\n * Unmasks a value using the provided mask and placeholder characters.\n * @param {string} value - The value to unmask.\n * @param {string} mask - The mask to use for unmasking.\n * @param {string} placeholderChar - The placeholder character to use for unmasking.\n * @returns {string} - The unmasked value.\n */\nfunction unmaskValue(value, mask, placeholderChar) {\n    if (!mask || !value || value.length > mask.length) {\n        return value;\n    }\n    let unmaskedValue = value.split('');\n    for (let i = 0; i < mask.length; i++) {\n        const char = value[i] || '';\n        const charPart = mask[i];\n        if (!lodash_1.default.isRegExp(charPart) && char === charPart) {\n            unmaskedValue[i] = '';\n        }\n    }\n    unmaskedValue = unmaskedValue.join('').replace(placeholderChar, '');\n    return unmaskedValue;\n}\nexports.unmaskValue = unmaskValue;\n/**\n * Returns true if the value matches the input mask format.\n * @param {string} value - The value to check.\n * @param {string} inputMask - The input mask to check against.\n * @returns {boolean} - TRUE if the value matches the input mask; FALSE otherwise.\n */\nfunction matchInputMask(value, inputMask) {\n    if (!inputMask) {\n        return true;\n    }\n    // If value is longer than mask, it isn't valid.\n    if (value.length > inputMask.length) {\n        return false;\n    }\n    for (let i = 0; i < inputMask.length; i++) {\n        const char = value[i] || '';\n        const charPart = inputMask[i];\n        if (!(lodash_1.default.isRegExp(charPart) && charPart.test(char) || charPart === char)) {\n            return false;\n        }\n    }\n    return true;\n}\nexports.matchInputMask = matchInputMask;\n/**\n * Returns the number separators (i.e. 1,000) for the provided language.\n * @param {string} lang - The language code to get the number separators for.\n * @returns {{delimiter: string, decimalSeparator: string}} - The number separators.\n */\nfunction getNumberSeparators(lang = 'en') {\n    const formattedNumberString = (12345.6789).toLocaleString(lang);\n    const delimeters = formattedNumberString.match(/..(.)...(.)../);\n    if (!delimeters) {\n        return {\n            delimiter: ',',\n            decimalSeparator: '.'\n        };\n    }\n    return {\n        delimiter: (delimeters.length > 1) ? delimeters[1] : ',',\n        decimalSeparator: (delimeters.length > 2) ? delimeters[2] : '.',\n    };\n}\nexports.getNumberSeparators = getNumberSeparators;\n/**\n * Returns the number for the maximum amount of decimal places for a number.\n * @param {import('@formio/core').Component} component - The component to check for decimal limits.\n * @param {number} defaultLimit - The default limit to use if none is provided in the component.\n * @returns {number} - The number of decimal places allowed.\n */\nfunction getNumberDecimalLimit(component, defaultLimit) {\n    if (lodash_1.default.has(component, 'decimalLimit')) {\n        return lodash_1.default.get(component, 'decimalLimit');\n    }\n    // Determine the decimal limit. Defaults to 20 but can be overridden by validate.step or decimalLimit settings.\n    let decimalLimit = defaultLimit || 20;\n    const step = lodash_1.default.get(component, 'validate.step', 'any');\n    if (step !== 'any') {\n        const parts = step.toString().split('.');\n        if (parts.length > 1) {\n            decimalLimit = parts[1].length;\n        }\n    }\n    return decimalLimit;\n}\nexports.getNumberDecimalLimit = getNumberDecimalLimit;\n/**\n * Returns the currency affixes for a specific language.\n * @param {object} arg0 - The arguments object.\n * @param {string} arg0.currency - The currency code to get the affixes for.\n * @param {number} arg0.decimalLimit - The number of decimal places to use.\n * @param {string} arg0.decimalSeparator - The decimal separator to use.\n * @param {string} arg0.lang - The language code to use.\n * @returns {{prefix: string, suffix: string}} - The currency affixes.\n */\nfunction getCurrencyAffixes({ currency, decimalLimit, decimalSeparator, lang, }) {\n    // Get the prefix and suffix from the localized string.\n    let regex = `(.*)?${(100).toLocaleString(lang)}`;\n    if (decimalLimit) {\n        regex += `${decimalSeparator === '.' ? '\\\\.' : decimalSeparator}${(0).toLocaleString(lang)}{${decimalLimit}}`;\n    }\n    regex += '(.*)?';\n    const parts = (100).toLocaleString(lang, {\n        style: 'currency',\n        currency: currency ? currency : 'USD',\n        useGrouping: true,\n        maximumFractionDigits: decimalLimit || 0,\n        minimumFractionDigits: decimalLimit || 0\n    }).replace('.', decimalSeparator).match(new RegExp(regex));\n    return {\n        prefix: (parts === null || parts === void 0 ? void 0 : parts[1]) || '',\n        suffix: (parts === null || parts === void 0 ? void 0 : parts[2]) || ''\n    };\n}\nexports.getCurrencyAffixes = getCurrencyAffixes;\n/**\n * Fetch the field data provided a component.\n * @param {import('@formio/core').DataObject} data - The data object to fetch the field data from.\n * @param {import('@formio/core').Component} component - The component to fetch the field data for.\n * @returns {*} - The field data.\n */\nfunction fieldData(data, component) {\n    if (!data) {\n        return '';\n    }\n    if (!component || !component.key) {\n        return data;\n    }\n    if (component.key.includes('.')) {\n        let value = data;\n        const parts = component.key.split('.');\n        let key = '';\n        for (let i = 0; i < parts.length; i++) {\n            key = parts[i];\n            // Handle nested resources\n            if (value.hasOwnProperty('_id')) {\n                value = value.data;\n            }\n            // Return if the key is not found on the value.\n            if (!value.hasOwnProperty(key)) {\n                return;\n            }\n            // Convert old single field data in submissions to multiple\n            if (key === parts[parts.length - 1] && component.multiple && !Array.isArray(value[key])) {\n                value[key] = [value[key]];\n            }\n            // Set the value of this key.\n            value = value[key];\n        }\n        return value;\n    }\n    else {\n        // Convert old single field data in submissions to multiple\n        if (component.multiple && !Array.isArray(data[component.key])) {\n            data[component.key] = [data[component.key]];\n        }\n        // Fix for checkbox type radio submission values in tableView\n        if (component.type === 'checkbox' && component.inputType === 'radio') {\n            return data[component.name] === component.value;\n        }\n        return data[component.key];\n    }\n}\nexports.fieldData = fieldData;\n/**\n * Delays function execution with possibility to execute function synchronously or cancel it.\n * @param {Function} fn - Function to delay\n * @param {number} delay - Delay time\n * @param {...any} args - Arguments to pass to the function\n * @returns {*} - Function to cancel the delay\n */\nfunction delay(fn, delay = 0, ...args) {\n    const timer = setTimeout(fn, delay, ...args);\n    /**\n     *\n     */\n    function cancel() {\n        clearTimeout(timer);\n    }\n    /**\n     * Execute the function early.\n     * @returns {*} - The result of the function.\n     */\n    function earlyCall() {\n        cancel();\n        return fn(...args);\n    }\n    earlyCall.timer = timer;\n    earlyCall.cancel = cancel;\n    return earlyCall;\n}\nexports.delay = delay;\n/**\n * Iterate the given key to make it unique.\n * @param {string} key\n *   Modify the component key to be unique.\n * @returns {string}\n *   The new component key.\n */\nfunction iterateKey(key) {\n    if (!key.match(/(\\d+)$/)) {\n        return `${key}1`;\n    }\n    return key.replace(/(\\d+)$/, function (suffix) {\n        return Number(suffix) + 1;\n    });\n}\nexports.iterateKey = iterateKey;\n/**\n * Determines a unique key within a map provided the base key.\n * @param {Record<string, string>} map - The map to check for uniqueness.\n * @param {string} base - The base path of the key.\n * @returns {string} - The unique key.\n */\nfunction uniqueKey(map, base) {\n    let newKey = base;\n    while (map.hasOwnProperty(newKey)) {\n        newKey = iterateKey(newKey);\n    }\n    return newKey;\n}\nexports.uniqueKey = uniqueKey;\n/**\n * Determines the major version number of bootstrap.\n * @param {object} options - The options to check for bootstrap version.\n * @param {string} options.bootstrap - The bootstrap version to use.\n * @returns {number} - The bootstrap version.\n */\nfunction bootstrapVersion(options) {\n    if (options.bootstrap) {\n        return options.bootstrap;\n    }\n    if ((typeof jQuery === 'function') && (typeof jQuery().collapse === 'function')) {\n        return parseInt(jQuery.fn.collapse.Constructor.VERSION.split('.')[0], 10);\n    }\n    if (window.bootstrap && window.bootstrap.Collapse) {\n        return parseInt(window.bootstrap.Collapse.VERSION.split('.')[0], 10);\n    }\n    return 0;\n}\nexports.bootstrapVersion = bootstrapVersion;\n/**\n * Retrun provided argument.\n * If argument is a function, returns the result of a function call.\n * @param {Function|any} e - The argument to check if a function and call if so.\n * @returns {any} - Either the result of the function call (e) or e if it is not a function.\n */\nfunction unfold(e) {\n    if (typeof e === 'function') {\n        return e();\n    }\n    return e;\n}\nexports.unfold = unfold;\n/**\n * Map values through unfold and return first non-nil value.\n * @param {Array<T>} collection - The collection to map through unfold.;\n * @returns {T} - The first non-nil value.\n */\nexports.firstNonNil = lodash_1.default.flow([\n    lodash_1.default.partialRight(lodash_1.default.map, unfold),\n    lodash_1.default.partialRight(lodash_1.default.find, v => !lodash_1.default.isUndefined(v))\n]);\n/**\n * Create enclosed state. Returns functions to getting and cycling between states.\n * @param {*} a - initial state.\n * @param {*} b - next state.\n * @returns {Functions[]} -- [get, toggle];\n */\nfunction withSwitch(a, b) {\n    let state = a;\n    let next = b;\n    /**\n     * Returns the state of the switch.\n     * @returns {*} - The current state.\n     */\n    function get() {\n        return state;\n    }\n    /**\n     * Toggles the state of the switch.\n     */\n    function toggle() {\n        const prev = state;\n        state = next;\n        next = prev;\n    }\n    return [get, toggle];\n}\nexports.withSwitch = withSwitch;\n/**\n * Create a function that will call the provided function only the provided limit.\n * @param {Function} callback - The callback to call.\n * @param {object} options - The options to use.\n * @param {number} options.limit - The limit to call the callback.\n * @param {number} options.delay - The delay to wait before resetting the call count.\n * @returns {Function} - The function that will call the callback only the provided limit.\n */\nfunction observeOverload(callback, options = {}) {\n    const { limit = 50, delay = 500 } = options;\n    let callCount = 0;\n    let timeoutID = 0;\n    const reset = () => callCount = 0;\n    return () => {\n        if (timeoutID !== 0) {\n            clearTimeout(timeoutID);\n            timeoutID = 0;\n        }\n        timeoutID = setTimeout(reset, delay);\n        callCount += 1;\n        if (callCount >= limit) {\n            clearTimeout(timeoutID);\n            reset();\n            return callback();\n        }\n    };\n}\nexports.observeOverload = observeOverload;\n/**\n * Returns the components that are provided within an evaluation context.\n * @param {any} context - The evaluation context to get the components from.\n * @param {boolean} excludeNested - Exclude nested components.\n * @param {Array<string>} excludedTypes - The types of components to exclude.\n * @returns {Array} - The components within the evaluation context.\n */\nfunction getContextComponents(context, excludeNested, excludedTypes = []) {\n    const values = [];\n    context.utils.eachComponent(context.instance.options.editForm.components, (component, path) => {\n        const addToContextComponents = excludeNested ? !component.tree : true;\n        if (component.key !== context.data.key && addToContextComponents && !lodash_1.default.includes(excludedTypes, component.type)) {\n            values.push({\n                label: `${component.label || component.key} (${path})`,\n                value: path,\n            });\n        }\n    });\n    return values;\n}\nexports.getContextComponents = getContextComponents;\n/**\n * Returns the button components that are within an evaluation context.\n * @param {any} context - The evaluation context to get the components from.\n * @returns {Array} - The button components within the evaluation context.\n */\nfunction getContextButtons(context) {\n    const values = [];\n    context.utils.eachComponent(context.instance.options.editForm.components, (component) => {\n        if (component.type === 'button') {\n            values.push({\n                label: `${component.key} (${component.label})`,\n                value: component.key,\n            });\n        }\n    });\n    return values;\n}\nexports.getContextButtons = getContextButtons;\n// Tags that could be in text, that should be ommited or handled in a special way\nconst inTextTags = ['#text', 'A', 'B', 'EM', 'I', 'SMALL', 'STRONG', 'SUB', 'SUP', 'INS', 'DEL', 'MARK', 'CODE'];\n/**\n * Helper function for 'translateHTMLTemplate'. Translates text value of the passed html element.\n * @param {HTMLElement} elem - The element to translate.\n * @param {Function} translate - The translation function.\n * @returns {string} - Translated element template.\n */\nfunction translateElemValue(elem, translate) {\n    if (!elem.innerText) {\n        return elem.innerHTML;\n    }\n    const elemValue = elem.innerText.replace(Evaluator_1.Evaluator.templateSettings.interpolate, '').replace(/\\s\\s+/g, ' ').trim();\n    const translatedValue = translate(elemValue);\n    if (elemValue !== translatedValue) {\n        const links = elem.innerHTML.match(/<a[^>]*>(.*?)<\\/a>/g);\n        if (links && links.length) {\n            if (links.length === 1 && links[0].length === elem.innerHTML.length) {\n                return elem.innerHTML.replace(elemValue, translatedValue);\n            }\n            const translatedLinks = links.map(link => {\n                const linkElem = document.createElement('a');\n                linkElem.innerHTML = link;\n                return translateElemValue(linkElem, translate);\n            });\n            return `${translatedValue} (${translatedLinks.join(', ')})`;\n        }\n        else {\n            return elem.innerText.replace(elemValue, translatedValue);\n        }\n    }\n    else {\n        return elem.innerHTML;\n    }\n}\n/**\n * Helper function for 'translateHTMLTemplate'. Goes deep through html tag children and calls function to translate their text values.\n * @param {HTMLElement} tag - The tag to translate.\n * @param {Function} translate - The translation function.\n * @returns {void}\n */\nfunction translateDeepTag(tag, translate) {\n    const children = tag.children.length && [...tag.children];\n    const shouldTranslateEntireContent = children && children.every(child => child.children.length === 0\n        && inTextTags.some(tag => child.nodeName === tag));\n    if (!children || shouldTranslateEntireContent) {\n        tag.innerHTML = translateElemValue(tag, translate);\n    }\n    else {\n        children.forEach(child => translateDeepTag(child, translate));\n    }\n}\n/**\n * Translates text values in html template.\n * @param {string} template - The template to translate.\n * @param {Function} translate - The translation function.\n * @returns {string} - Html template with translated values.\n */\nfunction translateHTMLTemplate(template, translate) {\n    const isHTML = /<[^>]*>/.test(template);\n    if (!isHTML) {\n        return translate(template);\n    }\n    const tempElem = document.createElement('div');\n    tempElem.innerHTML = template;\n    if (tempElem.innerText && tempElem.children.length) {\n        translateDeepTag(tempElem, translate);\n        return tempElem.innerHTML;\n    }\n    return template;\n}\nexports.translateHTMLTemplate = translateHTMLTemplate;\n/**\n * Sanitize an html string.\n * @param {string} string - The string to sanitize.\n * @param {any} options - The options to use for sanitization.\n * @returns {string} - The sanitized html string.\n */\nfunction sanitize(string, options) {\n    if (typeof dompurify_1.default.sanitize !== 'function') {\n        return string;\n    }\n    // Dompurify configuration\n    const sanitizeOptions = {\n        ADD_ATTR: ['ref', 'target'],\n        USE_PROFILES: { html: true }\n    };\n    // Use profiles\n    if (options.sanitizeConfig && options.sanitizeConfig.useProfiles) {\n        Object.keys(options.sanitizeConfig.useProfiles).forEach(key => {\n            sanitizeOptions.USE_PROFILES[key] = options.sanitizeConfig.useProfiles[key];\n        });\n    }\n    // Add attrs\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addAttr) && options.sanitizeConfig.addAttr.length > 0) {\n        options.sanitizeConfig.addAttr.forEach((attr) => {\n            sanitizeOptions.ADD_ATTR.push(attr);\n        });\n    }\n    // Add tags\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addTags) && options.sanitizeConfig.addTags.length > 0) {\n        sanitizeOptions.ADD_TAGS = options.sanitizeConfig.addTags;\n    }\n    // Allow tags\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.allowedTags) && options.sanitizeConfig.allowedTags.length > 0) {\n        sanitizeOptions.ALLOWED_TAGS = options.sanitizeConfig.allowedTags;\n    }\n    // Allow attributes\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.allowedAttrs) && options.sanitizeConfig.allowedAttrs.length > 0) {\n        sanitizeOptions.ALLOWED_ATTR = options.sanitizeConfig.allowedAttrs;\n    }\n    // Allowd URI Regex\n    if (options.sanitizeConfig && options.sanitizeConfig.allowedUriRegex) {\n        const allowedUriRegex = options.sanitizeConfig.allowedUriRegex;\n        sanitizeOptions.ALLOWED_URI_REGEXP = lodash_1.default.isString(allowedUriRegex) ? new RegExp(allowedUriRegex) : allowedUriRegex;\n    }\n    // Allow to extend the existing array of elements that are safe for URI-like values\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addUriSafeAttr) && options.sanitizeConfig.addUriSafeAttr.length > 0) {\n        sanitizeOptions.ADD_URI_SAFE_ATTR = options.sanitizeConfig.addUriSafeAttr;\n    }\n    return dompurify_1.default.sanitize(string, sanitizeOptions);\n}\nexports.sanitize = sanitize;\n/**\n * Fast cloneDeep for JSON objects only.\n * @param {any} obj - The object to perform a fast clone deep against.\n * @returns {any} - The cloned object.\n */\nfunction fastCloneDeep(obj) {\n    return obj ? JSON.parse(JSON.stringify(obj)) : obj;\n}\nexports.fastCloneDeep = fastCloneDeep;\n/**\n * Returns if the component is an input component.\n * @param {import('@formio/core').Component} componentJson - The JSON of a component.\n * @returns {bool} - TRUE if the component is an input component; FALSE otherwise.\n */\nfunction isInputComponent(componentJson) {\n    if (componentJson.input === false || componentJson.input === true) {\n        return componentJson.input;\n    }\n    switch (componentJson.type) {\n        case 'htmlelement':\n        case 'content':\n        case 'columns':\n        case 'fieldset':\n        case 'panel':\n        case 'table':\n        case 'tabs':\n        case 'well':\n        case 'button':\n            return false;\n        default:\n            return true;\n    }\n}\nexports.isInputComponent = isInputComponent;\n/**\n * Takes a component path, and returns a component path array.\n * @param {string} pathStr - The path string to convert to an array.\n * @returns {Arryay<number>} - The array of paths.\n */\nfunction getArrayFromComponentPath(pathStr) {\n    if (!pathStr || !lodash_1.default.isString(pathStr)) {\n        if (!lodash_1.default.isArray(pathStr)) {\n            return [pathStr];\n        }\n        return pathStr;\n    }\n    return pathStr.replace(/[[\\]]/g, '.')\n        .replace(/\\.\\./g, '.')\n        .replace(/(^\\.)|(\\.$)/g, '')\n        .split('.')\n        .map(part => lodash_1.default.defaultTo(lodash_1.default.toNumber(part), part));\n}\nexports.getArrayFromComponentPath = getArrayFromComponentPath;\n/**\n * Returns true if the component is a child of the parent.\n * @param {any} child - The child component to check.\n * @param {any} parent - The parent component to check.\n * @returns {boolean} - TRUE if the child is a child of the parent; FALSE otherwise.\n */\nfunction isChildOf(child, parent) {\n    while (child && child.parent) {\n        if (child.parent === parent) {\n            return true;\n        }\n        child = child.parent;\n    }\n    return false;\n}\nexports.isChildOf = isChildOf;\n/**\n * Takes an array of component path indexes, and returns a string version of that array.\n * @param {Array<number>} path - The path array to convert to a string.\n * @returns {string} - The string version of the path.\n */\nfunction getStringFromComponentPath(path) {\n    if (!lodash_1.default.isArray(path)) {\n        return path;\n    }\n    let strPath = '';\n    path.forEach((part, i) => {\n        if (lodash_1.default.isNumber(part)) {\n            strPath += `[${part}]`;\n        }\n        else {\n            strPath += i === 0 ? part : `.${part}`;\n        }\n    });\n    return strPath;\n}\nexports.getStringFromComponentPath = getStringFromComponentPath;\n/**\n * Takes a number and rounds it to the provided precision amount.\n * @param {number} number - The number to round.\n * @param {number} precision - The precision to round the number to.\n * @returns {string} - The rounded number.\n */\nfunction round(number, precision) {\n    if (lodash_1.default.isNumber(number)) {\n        return number.toFixed(precision);\n    }\n    return number.toString();\n}\nexports.round = round;\n/**\n * Check for Internet Explorer browser version\n * @returns {(number|null)} - The IE browser version or null if not IE\n */\nfunction getIEBrowserVersion() {\n    const { ie, version } = getBrowserInfo();\n    return ie ? version : null;\n}\nexports.getIEBrowserVersion = getIEBrowserVersion;\n/**\n * Get browser name and version (modified from 'jquery-browser-plugin')\n * @returns {object} -- {{browser name, version, isWebkit?}}\n * Possible browser names: chrome, safari, ie, edge, opera, mozilla, yabrowser\n */\nfunction getBrowserInfo() {\n    const browser = {};\n    if (typeof window === 'undefined') {\n        return browser;\n    }\n    const ua = window.navigator.userAgent.toLowerCase();\n    const match = /(edge|edg)\\/([\\w.]+)/.exec(ua) ||\n        /(opr)[/]([\\w.]+)/.exec(ua) ||\n        /(yabrowser)[ /]([\\w.]+)/.exec(ua) ||\n        /(chrome)[ /]([\\w.]+)/.exec(ua) ||\n        /(iemobile)[/]([\\w.]+)/.exec(ua) ||\n        /(version)(applewebkit)[ /]([\\w.]+).*(safari)[ /]([\\w.]+)/.exec(ua) ||\n        /(webkit)[ /]([\\w.]+).*(version)[ /]([\\w.]+).*(safari)[ /]([\\w.]+)/.exec(ua) ||\n        /(webkit)[ /]([\\w.]+)/.exec(ua) ||\n        /(opera)(?:.*version|)[ /]([\\w.]+)/.exec(ua) ||\n        /(msie) ([\\w.]+)/.exec(ua) ||\n        ua.indexOf('trident') >= 0 && /(rv)(?::| )([\\w.]+)/.exec(ua) ||\n        ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\\w.]+)|)/.exec(ua) ||\n        [];\n    const matched = {\n        browser: match[5] || match[3] || match[1] || '',\n        version: match[4] || match[2] || '0'\n    };\n    if (matched.browser) {\n        browser[matched.browser] = true;\n        browser.version = parseInt(matched.version, 10);\n    }\n    // Chrome, Opera 15+, Safari and Yandex.Browser are webkit based browsers\n    if (browser.chrome || browser.opr || browser.safari || browser.edg || browser.yabrowser) {\n        browser.isWebkit = true;\n    }\n    // IE11 has a new token so we will assign it ie to avoid breaking changes\n    if (browser.rv || browser.iemobile) {\n        browser.ie = true;\n    }\n    // Edge has a new token since it became webkit based\n    if (browser.edg) {\n        browser.edge = true;\n    }\n    // Opera 15+ are identified as opr\n    if (browser.opr) {\n        browser.opera = true;\n    }\n    return browser;\n}\nexports.getBrowserInfo = getBrowserInfo;\n/**\n * Takes a component path, which may include array indicies (i.e. [0][1]), and returns the compoennt path without the indicies.\n * @param {string} path - The path to remove the indicies from.\n * @returns {string} - The path without the indicies.\n */\nfunction getComponentPathWithoutIndicies(path = '') {\n    return path.replace(/\\[\\d+\\]/, '');\n}\nexports.getComponentPathWithoutIndicies = getComponentPathWithoutIndicies;\n/**\n * Returns a path to the component which based on its schema\n * @param {import('@formio/core').Component} component - Component containing link to its parent's schema in the 'parent' property\n * @returns {string} - Path to the component\n */\nfunction getComponentPath(component) {\n    return component.paths.localDataPath;\n}\nexports.getComponentPath = getComponentPath;\n/**\n * Returns a parent component of the passed component instance skipping all the Layout components\n * @param {Component} componentInstance - The component to check for the parent.\n * @returns {Component|undefined} - The parent data component.\n */\nfunction getDataParentComponent(componentInstance) {\n    if (!componentInstance) {\n        return;\n    }\n    const { parent } = componentInstance;\n    if (parent && (parent.isInputComponent || parent.input)) {\n        return parent;\n    }\n    else {\n        return getDataParentComponent(parent);\n    }\n}\nexports.getDataParentComponent = getDataParentComponent;\n/**\n * Returns whether the value is a promise\n * @param {any} value - The value to check\n * @returns {boolean} - TRUE if the value is a promise; FALSE otherwise\n */\nfunction isPromise(value) {\n    return value\n        && value.then\n        && typeof value.then === 'function'\n        && Object.prototype.toString.call(value) === '[object Promise]';\n}\nexports.isPromise = isPromise;\n/**\n * Returns all the focusable elements within the provided dom element.\n * @param {HTMLElement} element - The element to get the focusable elements from.\n * @returns {NodeList<HTMLElement>} - The focusable elements within the provided element.\n */\nfunction getFocusableElements(element) {\n    const focusableSelector = `button:not([disabled]), input:not([disabled]), select:not([disabled]),\n    textarea:not([disabled]), button:not([disabled]), [href]`;\n    return element.querySelectorAll(focusableSelector);\n}\nexports.getFocusableElements = getFocusableElements;\nexports.componentValueTypes = {\n    number: 'number',\n    string: 'string',\n    boolean: 'boolean',\n    array: 'array',\n    object: 'object',\n    date: 'date',\n    any: 'any',\n};\n/**\n * Returns the saved types for the component\n * @param {import('@formio/core').Component} fullSchema - The component schema\n * @returns {Array<string>|null} - The saved types for the component\n */\nfunction getComponentSavedTypes(fullSchema) {\n    const schema = fullSchema || {};\n    if (schema.persistent !== true) {\n        return [];\n    }\n    if (schema.multiple) {\n        return [exports.componentValueTypes.array];\n    }\n    return null;\n}\nexports.getComponentSavedTypes = getComponentSavedTypes;\n/**\n * Interpolates @formio/core errors so that they are compatible with the renderer\n * @param {Component} component - The component to interpolate the errors for\n * @param {FieldError[]} errors - The errors to interpolate\n * @param {Function} interpolateFn - The interpolation function\n * @returns {[]} - The interpolated errors\n */\nconst interpolateErrors = (component, errors, interpolateFn) => {\n    return errors.map((error) => {\n        error.component = component;\n        const { errorKeyOrMessage, context } = error;\n        const toInterpolate = component.errors && component.errors[errorKeyOrMessage] ? component.errors[errorKeyOrMessage] : errorKeyOrMessage;\n        return Object.assign(Object.assign({}, error), { message: unescapeHTML(interpolateFn(toInterpolate, context)), context: Object.assign({}, context) });\n    });\n};\nexports.interpolateErrors = interpolateErrors;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/utils/utils.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.getContextComponents = exports.observeOverload = exports.withSwitch = exports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.removeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = void 0;\nexports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports.getFocusableElements = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = void 0;\n/* global jQuery */\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst moment_timezone_1 = __importDefault(__webpack_require__(/*! moment-timezone/moment-timezone */ \"./node_modules/moment-timezone/moment-timezone.js\"));\nconst jstimezonedetect_1 = __importDefault(__webpack_require__(/*! jstimezonedetect */ \"./node_modules/jstimezonedetect/dist/jstz.min.js\"));\nconst dompurify_1 = __importDefault(__webpack_require__(/*! dompurify */ \"./node_modules/dompurify/dist/purify.cjs.js\"));\nconst formUtils_1 = __webpack_require__(/*! ./formUtils */ \"./lib/cjs/utils/formUtils.js\");\nconst Evaluator_1 = __webpack_require__(/*! ./Evaluator */ \"./lib/cjs/utils/Evaluator.js\");\nconst conditionOperators_1 = __importDefault(__webpack_require__(/*! ./conditionOperators */ \"./lib/cjs/utils/conditionOperators/index.js\"));\nconst core_1 = __webpack_require__(/*! @formio/core */ \"./node_modules/@formio/core/lib/index.js\");\n/**\n * Evaluate a method.\n * @param {Function|string|object} func - The function to evaluate.\n * @param {*} args - A map of arguments to pass to the function.\n * @param {string} ret - The name of the \"return\" variable in the script.\n * @param {boolean} interpolate - True if the script should be interpolated before being executed.\n * @param {import('@formio/core').EvaluatorOptions} options - The evaluator options.\n * @returns {*} - The result of the evaluation.\n */\nfunction evaluate(func, args, ret, interpolate, options = {}) {\n    return Evaluator_1.Evaluator.evaluate(func, args, ret, interpolate, undefined, options);\n}\nexports.evaluate = evaluate;\n/**\n * Returns a random compoennt ID.\n * @returns {string} - A random component ID.\n */\nfunction getRandomComponentId() {\n    return `e${Math.random().toString(36).substring(7)}`;\n}\nexports.getRandomComponentId = getRandomComponentId;\n/**\n * Get a property value of an element.\n * @param {CSSStyleDeclaration} style - The style element to get the property value from.\n * @param {string} prop - The property to get the value for.\n * @returns {number} - The value of the property.\n */\nfunction getPropertyValue(style, prop) {\n    let value = style.getPropertyValue(prop);\n    value = value ? value.replace(/[^0-9.]/g, '') : '0';\n    return parseFloat(value);\n}\nexports.getPropertyValue = getPropertyValue;\n/**\n * Get an elements bounding rectagle.\n * @param {HTMLElement} element - A DOM element to get the bounding rectangle for.\n * @returns {{x: number, y: number, width: number, height: number}} - The bounding rectangle.\n */\nfunction getElementRect(element) {\n    const style = window.getComputedStyle(element, null);\n    return {\n        x: getPropertyValue(style, 'left'),\n        y: getPropertyValue(style, 'top'),\n        width: getPropertyValue(style, 'width'),\n        height: getPropertyValue(style, 'height')\n    };\n}\nexports.getElementRect = getElementRect;\n/**\n * Get non HTMLElement property in the window object\n * @param {string} property - The window property to fetch the script plugin from.\n * @returns {any | undefined} - The HTML Element property on the window object.\n */\nfunction getScriptPlugin(property) {\n    const obj = window[property];\n    if (typeof HTMLElement === 'object' ? obj instanceof HTMLElement : //DOM2\n        obj && typeof obj === 'object' && true && obj.nodeType === 1 && typeof obj.nodeName === 'string') {\n        return undefined;\n    }\n    return obj;\n}\nexports.getScriptPlugin = getScriptPlugin;\n/**\n * Determines the boolean value of a setting.\n * @param {string|boolean} value - A string or boolean value to convert to boolean.\n * @returns {boolean} - The boolean value of the setting.\n */\nfunction boolValue(value) {\n    if (lodash_1.default.isBoolean(value)) {\n        return value;\n    }\n    else if (lodash_1.default.isString(value)) {\n        return (value.toLowerCase() === 'true');\n    }\n    else {\n        return !!value;\n    }\n}\nexports.boolValue = boolValue;\n/**\n * Check to see if an ID is a mongoID.\n * @param {string} text - The text to check if it is a mongoID.\n * @returns {boolean} - TRUE if the text is a mongoID; FALSE otherwise.\n */\nfunction isMongoId(text) {\n    return !!text.toString().match(/^[0-9a-fA-F]{24}$/);\n}\nexports.isMongoId = isMongoId;\n/**\n * Checks the calculated value for a provided component and data.\n * @param {import('@formio/core').Component} component - The component to check for the calculated value.\n * @param {import('@formio/core').Submission} submission - A submission object.\n * @param {*} rowData - The contextual row data for the component.\n */\nfunction checkCalculated(component, submission, rowData) {\n    // Process calculated value stuff if present.\n    if (component.calculateValue) {\n        lodash_1.default.set(rowData, component.key, evaluate(component.calculateValue, {\n            value: undefined,\n            data: submission ? submission.data : rowData,\n            row: rowData,\n            util: this,\n            component\n        }, 'value'));\n    }\n}\nexports.checkCalculated = checkCalculated;\n/**\n * Check if a simple conditional evaluates to true.\n * @param {import('@formio/core').Component} component - The component to check for the conditional.\n * @param {import('@formio/core').SimpleConditional} condition - The condition to check.\n * @param {*} row - The row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The instance of the component.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\n/**\n *\n * @param conditionPaths\n * @param data\n */\nfunction getConditionalPathsRecursive(conditionPaths, data) {\n    let currentGlobalIndex = 0;\n    const conditionalPathsArray = [];\n    const getConditionalPaths = (data, currentPath = '', localIndex = 0) => {\n        currentPath = currentPath.replace(/^\\.+|\\.+$/g, '');\n        const currentLocalIndex = localIndex;\n        const currentData = lodash_1.default.get(data, currentPath);\n        if (Array.isArray(currentData) && currentData.filter(Boolean).length > 0) {\n            if (currentData.some(element => typeof element !== 'object')) {\n                return;\n            }\n            const hasInnerDataArray = currentData.find(x => Array.isArray(x[conditionPaths[currentLocalIndex]]));\n            if (hasInnerDataArray) {\n                currentData.forEach((_, indexOutside) => {\n                    const innerCompDataPath = `${currentPath}[${indexOutside}].${conditionPaths[currentLocalIndex]}`;\n                    getConditionalPaths(data, innerCompDataPath, currentLocalIndex + 1);\n                });\n            }\n            else {\n                currentData.forEach((x, index) => {\n                    if (!lodash_1.default.isNil(x[conditionPaths[currentLocalIndex]])) {\n                        const compDataPath = `${currentPath}[${index}].${conditionPaths[currentLocalIndex]}`;\n                        conditionalPathsArray.push(compDataPath);\n                    }\n                });\n            }\n        }\n        else {\n            if (!conditionPaths[currentGlobalIndex]) {\n                return;\n            }\n            currentGlobalIndex = currentGlobalIndex + 1;\n            getConditionalPaths(data, `${currentPath}.${conditionPaths[currentGlobalIndex - 1]}`, currentGlobalIndex);\n        }\n    };\n    getConditionalPaths(data);\n    return conditionalPathsArray;\n}\n/**\n *\n * @param component\n * @param condition\n * @param row\n * @param data\n * @param instance\n */\nfunction checkSimpleConditional(component, condition, row, data, instance) {\n    if (condition.when) {\n        const value = getComponentActualValue(condition.when, data, row);\n        const eq = String(condition.eq);\n        const show = String(condition.show);\n        // Special check for selectboxes component.\n        if (lodash_1.default.isObject(value) && lodash_1.default.has(value, condition.eq)) {\n            return String(value[condition.eq]) === show;\n        }\n        // FOR-179 - Check for multiple values.\n        if (Array.isArray(value) && value.map(String).includes(eq)) {\n            return show === 'true';\n        }\n        return (String(value) === eq) === (show === 'true');\n    }\n    else {\n        const { conditions = [], conjunction = 'all', show = true } = condition;\n        if (!conditions.length) {\n            return true;\n        }\n        const conditionsResult = lodash_1.default.map(conditions, (cond) => {\n            var _a, _b;\n            const { value: comparedValue, operator, component: conditionComponentPath } = cond;\n            if (!conditionComponentPath) {\n                return true;\n            }\n            const splittedConditionPath = conditionComponentPath.split('.');\n            const conditionalPaths = ((_a = instance === null || instance === void 0 ? void 0 : instance.parent) === null || _a === void 0 ? void 0 : _a.type) === 'datagrid' || ((_b = instance === null || instance === void 0 ? void 0 : instance.parent) === null || _b === void 0 ? void 0 : _b.type) === 'editgrid' ? [] : getConditionalPathsRecursive(splittedConditionPath, data);\n            if (conditionalPaths.length > 0) {\n                return conditionalPaths.map((path) => {\n                    const value = getComponentActualValue(path, data, row);\n                    const ConditionOperator = conditionOperators_1.default[operator];\n                    return ConditionOperator\n                        ? new ConditionOperator().getResult({ value, comparedValue, instance, component, path })\n                        : true;\n                });\n            }\n            else {\n                const value = getComponentActualValue(conditionComponentPath, data, row);\n                const СonditionOperator = conditionOperators_1.default[operator];\n                return СonditionOperator\n                    ? new СonditionOperator().getResult({ value, comparedValue, instance, component, path: conditionComponentPath })\n                    : true;\n            }\n        });\n        let result = false;\n        switch (conjunction) {\n            case 'any':\n                result = lodash_1.default.some(conditionsResult.flat(), res => !!res);\n                break;\n            default:\n                result = lodash_1.default.every(conditionsResult.flat(), res => !!res);\n        }\n        return (0, core_1.convertShowToBoolean)(show) ? result : !result;\n    }\n}\nexports.checkSimpleConditional = checkSimpleConditional;\n/**\n * Returns a components normalized value.\n * @param {string} compPath - The full path to the component.\n * @param {*} data - The data object to get the value from.\n * @param {*} row - The contextual row data for the component.\n * @returns {*} - The normalized value of the component.\n */\nfunction getComponentActualValue(compPath, data, row) {\n    let value = null;\n    if (data) {\n        value = (0, formUtils_1.getValue)({ data }, compPath);\n    }\n    if (row && lodash_1.default.isNil(value)) {\n        value = (0, formUtils_1.getValue)({ data: row }, compPath);\n    }\n    // FOR-400 - Fix issue where falsey values were being evaluated as show=true\n    if (lodash_1.default.isNil(value) || (lodash_1.default.isObject(value) && lodash_1.default.isEmpty(value))) {\n        value = '';\n    }\n    return value;\n}\nexports.getComponentActualValue = getComponentActualValue;\n/**\n * Check custom javascript conditional.\n * @param {import('@formio/core').Component} component - The component to check for the conditional.\n * @param {string} custom - The custom conditional string to evaluate.\n * @param {*} row - The row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {string} variable - The variable name for the result of the custom conditional.\n * @param {*} onError - A custom return if there is an error or the value is null from the evaluation.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @returns {*} - The result of the evaulation.\n */\nfunction checkCustomConditional(component, custom, row, data, form, variable, onError, instance) {\n    if (typeof custom === 'string') {\n        custom = `var ${variable} = true; ${custom}; return ${variable};`;\n    }\n    const value = (instance && instance.evaluate) ?\n        instance.evaluate(custom, { row, data, form }) :\n        evaluate(custom, { row, data, form });\n    if (value === null) {\n        return onError;\n    }\n    return value;\n}\nexports.checkCustomConditional = checkCustomConditional;\n/**\n * Check a component for JSON conditionals.\n * @param {import('@formio/core').Component} component - The component\n * @param {import('@formio/core').JSONConditional} json - The json conditional to check.\n * @param {*} row - The contextual row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The Form JSON of the form.\n * @param {*} onError - Custom return value if there is an error.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\nfunction checkJsonConditional(component, json, row, data, form, onError) {\n    try {\n        return core_1.jsonLogic.apply(json, {\n            data,\n            row,\n            form,\n            _: lodash_1.default,\n        });\n    }\n    catch (err) {\n        console.warn(`An error occurred in jsonLogic advanced condition for ${component.key}`, err);\n        return onError;\n    }\n}\nexports.checkJsonConditional = checkJsonConditional;\n/**\n * Returns the contextual row data for a component.\n * @param {import('@formio/core').Component} component - The component to get the row data for.\n * @param {*} row - The row data for the component.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @param {*} conditional - The component conditional.\n * @returns {*} - The contextual row data for the component.\n */\nfunction getRow(component, row, instance, conditional) {\n    var _a, _b, _c;\n    const condition = conditional || component.conditional;\n    // If no component's instance passed (happens only in 6.x server), calculate its path based on the schema\n    if (!instance) {\n        instance = lodash_1.default.cloneDeep(component);\n    }\n    const dataParent = getDataParentComponent(instance);\n    if (dataParent) {\n        const parentPath = (_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localDataPath;\n        const isTriggerCondtionComponentPath = condition.when || !condition.conditions\n            ? (_b = condition.when) === null || _b === void 0 ? void 0 : _b.startsWith((_c = dataParent.paths) === null || _c === void 0 ? void 0 : _c.localPath)\n            : lodash_1.default.some(condition.conditions, cond => { var _a; return cond.component.startsWith((_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localPath); });\n        if (isTriggerCondtionComponentPath) {\n            const newRow = {};\n            lodash_1.default.set(newRow, parentPath, row);\n            row = newRow;\n        }\n    }\n    return row;\n}\n/**\n * Checks the conditions for a provided component and data.\n * @param {import('@formio/core').Component} component - The component to check for the condition.\n * @param {*} row - The data within a row\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\nfunction checkCondition(component, row, data, form, instance) {\n    const { customConditional, conditional } = component;\n    if (customConditional) {\n        return checkCustomConditional(component, customConditional, row, data, form, 'show', true, instance);\n    }\n    else if (conditional && (conditional.when || lodash_1.default.some(conditional.conditions || [], condition => condition.component && condition.operator))) {\n        row = getRow(component, row, instance);\n        return checkSimpleConditional(component, conditional, row, data, instance);\n    }\n    else if (conditional && conditional.json) {\n        return checkJsonConditional(component, conditional.json, row, data, form, true);\n    }\n    // Default to show.\n    return true;\n}\nexports.checkCondition = checkCondition;\n/**\n * Test a trigger on a component.\n * @param {import('@formio/core').Component} component - The component to test the trigger against.\n * @param {import('@formio/core').LogicTrigger} trigger - The trigger configuration.\n * @param {import('@formio/core').DataObject} row - The contextual row data.\n * @param {import('@formio/core').DataObject} data - The root data object.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {any} instance - The component that is performing the trigger.\n * @returns {boolean} - TRUE if the trigger should fire; FALSE otherwise.\n */\nfunction checkTrigger(component, trigger, row, data, form, instance) {\n    // If trigger is empty, don't fire it\n    if (!trigger || !trigger[trigger.type]) {\n        return false;\n    }\n    switch (trigger.type) {\n        case 'simple':\n            row = getRow(component, row, instance, trigger.simple);\n            return checkSimpleConditional(component, trigger.simple, row, data, instance);\n        case 'javascript':\n            return checkCustomConditional(component, trigger.javascript, row, data, form, 'result', false, instance);\n        case 'json':\n            return checkJsonConditional(component, trigger.json, row, data, form, false);\n    }\n    // If none of the types matched, don't fire the trigger.\n    return false;\n}\nexports.checkTrigger = checkTrigger;\n/**\n * Sets a property on a component via an executed Logic action.\n * @param {import('@formio/core').Component} component - The component to set the property on.\n * @param {import('@formio/core').LogicAction} action - The action to perform on the component.\n * @param {string} result - The name of the variable in the evaulation to use as the result.\n * @param {import('@formio/core').DataObject} row - The contextual row data.\n * @param {import('@formio/core').DataObject} data - The full submission data.\n * @param {any} instance - The component instance.\n * @returns {import('@formio/core').Component} - The modified component.\n */\nfunction setActionProperty(component, action, result, row, data, instance) {\n    const property = action.property.value;\n    switch (action.property.type) {\n        case 'boolean': {\n            const currentValue = lodash_1.default.get(component, property, false).toString();\n            const newValue = action.state.toString();\n            if (currentValue !== newValue) {\n                lodash_1.default.set(component, property, newValue === 'true');\n            }\n            break;\n        }\n        case 'string': {\n            const evalData = {\n                data,\n                row,\n                component,\n                result,\n            };\n            const textValue = action.property.component ? action[action.property.component] : action.text;\n            const currentValue = lodash_1.default.get(component, property, '');\n            const newValue = (instance && instance.interpolate)\n                ? instance.interpolate(textValue, evalData)\n                : Evaluator_1.Evaluator.interpolate(textValue, evalData);\n            if (newValue !== currentValue) {\n                lodash_1.default.set(component, property, newValue);\n            }\n            break;\n        }\n    }\n    return component;\n}\nexports.setActionProperty = setActionProperty;\n/**\n * Removes HTML tags from string e.g. <div>Hello World</div> => Hello World\n * @param {string} str - The string to remove HTML tags from.\n * @returns {string} - The string without HTML tags.\n */\nfunction removeHTML(str) {\n    const doc = new window.DOMParser().parseFromString(str, 'text/html');\n    return (doc.body.textContent || '').trim();\n}\nexports.removeHTML = removeHTML;\n/**\n * Unescape HTML characters like &lt, &gt, &amp and etc.\n * @param {string} str - The string to unescape.\n * @returns {string} - The unescaped string.\n */\nfunction unescapeHTML(str) {\n    if (typeof window === 'undefined' || !('DOMParser' in window)) {\n        return str;\n    }\n    const elem = document.createElement('textarea');\n    elem.innerHTML = str;\n    return elem.value;\n}\nexports.unescapeHTML = unescapeHTML;\n/**\n * Make HTML element from string\n * @param {string} str - The string to convert to an HTML element.\n * @param {string} selector - The selector to use to get the element once it is created.\n * @returns {HTMLElement} - The HTML element that was created.\n */\nfunction convertStringToHTMLElement(str, selector) {\n    const doc = new window.DOMParser().parseFromString(str, 'text/html');\n    return doc.body.querySelector(selector);\n}\nexports.convertStringToHTMLElement = convertStringToHTMLElement;\n/**\n * Make a filename guaranteed to be unique.\n * @param {string} name - The original name of the file.\n * @param {string} template - The template to use for the unique name.\n * @param {object} evalContext - The context to use for the evaluation.\n * @returns {string} - A unique filename.\n */\nfunction uniqueName(name, template, evalContext) {\n    template = template || '{{fileName}}-{{guid}}';\n    //include guid in template anyway, to prevent overwriting issue if filename matches existing file\n    if (!template.includes('{{guid}}')) {\n        template = `${template}-{{guid}}`;\n    }\n    const parts = name.split('.');\n    let fileName = parts.slice(0, parts.length - 1).join('.');\n    const extension = parts.length > 1\n        ? `.${lodash_1.default.last(parts)}`\n        : '';\n    //allow only 100 characters from original name to avoid issues with filename length restrictions\n    fileName = fileName.substr(0, 100);\n    evalContext = Object.assign(evalContext || {}, {\n        fileName,\n        guid: guid()\n    });\n    //only letters, numbers, dots, dashes, underscores and spaces are allowed. Anything else will be replaced with dash\n    const uniqueName = `${Evaluator_1.Evaluator.interpolate(template, evalContext)}${extension}`.replace(/[^0-9a-zA-Z.\\-_ ]/g, '-');\n    return uniqueName;\n}\nexports.uniqueName = uniqueName;\n/**\n * Returns a GUID\n * @returns {string} - A GUID.\n */\nfunction guid() {\n    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {\n        const r = Math.random() * 16 | 0;\n        const v = c === 'x'\n            ? r\n            : (r & 0x3 | 0x8);\n        return v.toString(16);\n    });\n}\nexports.guid = guid;\n/**\n * Return a translated date setting.\n * @param {string|Date} date - The date to translate.\n * @returns {(null|Date)} - The translated date.\n */\nfunction getDateSetting(date) {\n    if (lodash_1.default.isNil(date) || lodash_1.default.isNaN(date) || date === '') {\n        return null;\n    }\n    if (date instanceof Date) {\n        return date;\n    }\n    else if (typeof date.toDate === 'function') {\n        return date.isValid() ? date.toDate() : null;\n    }\n    let dateSetting = ((typeof date !== 'string') || (date.indexOf('moment(') === -1)) ? (0, moment_timezone_1.default)(date) : null;\n    if (dateSetting && dateSetting.isValid()) {\n        return dateSetting.toDate();\n    }\n    dateSetting = null;\n    try {\n        const value = Evaluator_1.Evaluator.evaluator(`return ${date};`, 'moment')(moment_timezone_1.default);\n        if (typeof value === 'string') {\n            dateSetting = (0, moment_timezone_1.default)(value);\n        }\n        else if (typeof value.toDate === 'function') {\n            dateSetting = (0, moment_timezone_1.default)(value.toDate().toUTCString());\n        }\n        else if (value instanceof Date) {\n            dateSetting = (0, moment_timezone_1.default)(value);\n        }\n    }\n    catch (e) {\n        return null;\n    }\n    if (!dateSetting) {\n        return null;\n    }\n    // Ensure this is a date.\n    if (!dateSetting.isValid()) {\n        return null;\n    }\n    return dateSetting.toDate();\n}\nexports.getDateSetting = getDateSetting;\n/**\n * Returns true if the date is a valid date. False otherwise.\n * @param {Date|string} date - The date to check for validity.\n * @returns {boolean} - TRUE if the date is valid; FALSE otherwise.\n */\nfunction isValidDate(date) {\n    return lodash_1.default.isDate(date) && !lodash_1.default.isNaN(date.getDate());\n}\nexports.isValidDate = isValidDate;\n/**\n * Get the current timezone string.\n * @returns {string} - The current timezone.\n */\nfunction currentTimezone() {\n    if (moment_timezone_1.default.currentTimezone) {\n        return moment_timezone_1.default.currentTimezone;\n    }\n    moment_timezone_1.default.currentTimezone = jstimezonedetect_1.default.determine().name();\n    return moment_timezone_1.default.currentTimezone;\n}\nexports.currentTimezone = currentTimezone;\n/**\n * Get an offset date provided a date object and timezone object.\n * @param {Date} date - The date to offset.\n * @param {string} timezone - The timezone to offset the date to.\n * @returns {Date} - The offset date.\n */\nfunction offsetDate(date, timezone) {\n    if (timezone === 'UTC') {\n        return {\n            date: new Date(date.getTime() + (date.getTimezoneOffset() * 60000)),\n            abbr: 'UTC'\n        };\n    }\n    const dateMoment = (0, moment_timezone_1.default)(date).tz(timezone);\n    return {\n        date: new Date(date.getTime() + ((dateMoment.utcOffset() + date.getTimezoneOffset()) * 60000)),\n        abbr: dateMoment.format('z')\n    };\n}\nexports.offsetDate = offsetDate;\n/**\n * Returns if the zones are loaded.\n * @returns {boolean} - TRUE if the zones are loaded; FALSE otherwise.\n */\nfunction zonesLoaded() {\n    return moment_timezone_1.default.zonesLoaded;\n}\nexports.zonesLoaded = zonesLoaded;\n/**\n * Returns if we should load the zones.\n * @param {string} timezone - The timezone to check if we should load the zones.\n * @returns {boolean} - TRUE if we should load the zones; FALSE otherwise.\n */\nfunction shouldLoadZones(timezone) {\n    if (timezone === currentTimezone() || timezone === 'UTC') {\n        return false;\n    }\n    return true;\n}\nexports.shouldLoadZones = shouldLoadZones;\n/**\n * Externally load the timezone data.\n * @param {string} url - The URL to load the timezone data from.\n * @param {string} timezone - The timezone to load.\n * @returns {Promise<any> | *} - Resolves when the zones for this timezone are loaded.\n */\nfunction loadZones(url, timezone) {\n    if (timezone && !shouldLoadZones(timezone)) {\n        // Return non-resolving promise.\n        return new Promise(lodash_1.default.noop);\n    }\n    if (moment_timezone_1.default.zonesPromise) {\n        return moment_timezone_1.default.zonesPromise;\n    }\n    return moment_timezone_1.default.zonesPromise = fetch(url)\n        .then(resp => resp.json().then(zones => {\n        moment_timezone_1.default.tz.load(zones);\n        moment_timezone_1.default.zonesLoaded = true;\n        // Trigger a global event that the timezones have finished loading.\n        if (document && document.createEvent && document.body && document.body.dispatchEvent) {\n            var event = document.createEvent('Event');\n            event.initEvent('zonesLoaded', true, true);\n            document.body.dispatchEvent(event);\n        }\n    }));\n}\nexports.loadZones = loadZones;\n/**\n * Get the moment date object for translating dates with timezones.\n * @param {string|Date} value - The value to convert into a moment date.\n * @param {string} format - The format to convert the date to.\n * @param {string} timezone - The timezone to convert the date to.\n * @param {object} options - The options object\n * @returns {Date} - The moment date object.\n */\nfunction momentDate(value, format, timezone, options) {\n    const momentDate = (0, moment_timezone_1.default)(value);\n    if (!timezone) {\n        return momentDate;\n    }\n    if (timezone === 'UTC') {\n        timezone = 'Etc/UTC';\n    }\n    if ((timezone !== currentTimezone() || (format && format.match(/\\s(z$|z\\s)/))) && (moment_timezone_1.default.zonesLoaded || (options === null || options === void 0 ? void 0 : options.email))) {\n        return momentDate.tz(timezone);\n    }\n    return momentDate;\n}\nexports.momentDate = momentDate;\n/**\n * Format a date provided a value, format, and timezone object.\n * @param {string} timezonesUrl - The URL to load the timezone data from.\n * @param {string|Date} value - The value to format.\n * @param {string} format - The format to format the date to.\n * @param {string} timezone - The timezone to format the date to.\n * @param {string} flatPickrInputFormat - The format to use for flatpickr input.\n * @returns {string} - The formatted date.\n */\nfunction formatDate(timezonesUrl, value, format, timezone, flatPickrInputFormat) {\n    const momentDate = (0, moment_timezone_1.default)(value, flatPickrInputFormat || undefined);\n    if (timezone === currentTimezone()) {\n        // See if our format contains a \"z\" timezone character.\n        if (format.match(/\\s(z$|z\\s)/)) {\n            loadZones(timezonesUrl);\n            if (moment_timezone_1.default.zonesLoaded) {\n                return momentDate.tz(timezone).format(convertFormatToMoment(format));\n            }\n            else {\n                return momentDate.format(convertFormatToMoment(format.replace(/\\s(z$|z\\s)/, '')));\n            }\n        }\n        // Return the standard format.\n        return momentDate.format(convertFormatToMoment(format));\n    }\n    if (timezone === 'UTC') {\n        const offset = offsetDate(momentDate.toDate(), 'UTC');\n        return `${(0, moment_timezone_1.default)(offset.date).format(convertFormatToMoment(format))} UTC`;\n    }\n    // Load the zones since we need timezone information.\n    loadZones(timezonesUrl);\n    if (moment_timezone_1.default.zonesLoaded && timezone) {\n        return momentDate.tz(timezone).format(`${convertFormatToMoment(format)} z`);\n    }\n    else {\n        return momentDate.format(convertFormatToMoment(format));\n    }\n}\nexports.formatDate = formatDate;\n/**\n * Pass a format function to format within a timezone.\n * @param {string} timezonesUrl - The URL to load the timezone data from.\n * @param {Function} formatFn - The format function to use.\n * @param {Date|string} date - The date to format.\n * @param {string} format - The format to format the date to.\n * @param {string} timezone - The timezone to format the date to.\n * @returns {string} - The formatted date.\n */\nfunction formatOffset(timezonesUrl, formatFn, date, format, timezone) {\n    if (timezone === currentTimezone()) {\n        return formatFn(date, format);\n    }\n    if (timezone === 'UTC') {\n        return `${formatFn(offsetDate(date, 'UTC').date, format)} UTC`;\n    }\n    // Load the zones since we need timezone information.\n    loadZones(timezonesUrl);\n    if (moment_timezone_1.default.zonesLoaded) {\n        const offset = offsetDate(date, timezone);\n        return `${formatFn(offset.date, format)} ${offset.abbr}`;\n    }\n    else {\n        return formatFn(date, format);\n    }\n}\nexports.formatOffset = formatOffset;\n/**\n * Returns the local date format information.\n * @param {Intl.LocalesArgument} locale - The locale to get the date format for.\n * @returns {object} - The local date format information.\n */\nfunction getLocaleDateFormatInfo(locale) {\n    const formatInfo = {};\n    const day = 21;\n    const exampleDate = new Date(2017, 11, day);\n    const localDateString = exampleDate.toLocaleDateString(locale);\n    formatInfo.dayFirst = localDateString.slice(0, 2) === day.toString();\n    return formatInfo;\n}\nexports.getLocaleDateFormatInfo = getLocaleDateFormatInfo;\n/**\n * Convert the format from the angular-datepicker module to flatpickr format.\n * @param {string} format - The format to convert.\n * @returns {string} - The converted format.\n */\nfunction convertFormatToFlatpickr(format) {\n    return format\n        // Remove the Z timezone offset, not supported by flatpickr.\n        .replace(/Z/g, '')\n        // Year conversion.\n        .replace(/y/g, 'Y')\n        .replace('YYYY', 'Y')\n        .replace('YY', 'y')\n        // Month conversion.\n        .replace('MMMM', 'F')\n        .replace(/M/g, 'n')\n        .replace('nnn', 'M')\n        .replace('nn', 'm')\n        // Day in month.\n        .replace(/d/g, 'j')\n        .replace(/jj/g, 'd')\n        // Day in week.\n        .replace('EEEE', 'l')\n        .replace('EEE', 'D')\n        // Hours, minutes, seconds\n        .replace('HH', 'H')\n        .replace('hh', 'G')\n        .replace('mm', 'i')\n        .replace('ss', 'S')\n        .replace(/a/g, 'K');\n}\nexports.convertFormatToFlatpickr = convertFormatToFlatpickr;\n/**\n * Convert the format from the angular-datepicker module to moment format.\n * @param {string} format - The format to convert.\n * @returns {string} - The converted format.\n */\nfunction convertFormatToMoment(format) {\n    return format\n        // Year conversion.\n        .replace(/y/g, 'Y')\n        // Day in month.\n        .replace(/d/g, 'D')\n        // Day in week.\n        .replace(/E/g, 'd')\n        // AM/PM marker\n        .replace(/a/g, 'A')\n        // Unix Timestamp\n        .replace(/U/g, 'X');\n}\nexports.convertFormatToMoment = convertFormatToMoment;\n/**\n * Convert the format from the angular-datepicker module to mask format.\n * @param {string} format - The format to convert.\n * @returns {string} - The converted format.\n */\nfunction convertFormatToMask(format) {\n    return format\n        // Long month replacement.\n        .replace(/M{4}/g, 'MM')\n        // Initial short month conversion.\n        .replace(/M{3}/g, '***')\n        // Short month conversion if input as text.\n        .replace(/e/g, 'Q')\n        // Month number conversion.\n        .replace(/W/g, '99')\n        // Year conversion.\n        .replace(/[ydhmswHMG]/g, '9')\n        // AM/PM conversion.\n        .replace(/a/g, 'AA');\n}\nexports.convertFormatToMask = convertFormatToMask;\n/**\n * Returns an input mask that is compatible with the input mask library.\n * @param {string} mask - The Form.io input mask.\n * @param {string} placeholderChar - Char which is used as a placeholder.\n * @returns {Array} - The input mask for the mask library.\n */\nfunction getInputMask(mask, placeholderChar) {\n    if (mask instanceof Array) {\n        return mask;\n    }\n    const maskArray = [];\n    maskArray.numeric = true;\n    for (let i = 0; i < mask.length; i++) {\n        switch (mask[i]) {\n            case '9':\n                maskArray.push(/\\d/);\n                break;\n            case 'A':\n                maskArray.numeric = false;\n                maskArray.push(/[a-zA-Z]/);\n                break;\n            case 'a':\n                maskArray.numeric = false;\n                maskArray.push(/[a-z]/);\n                break;\n            case '*':\n                maskArray.numeric = false;\n                maskArray.push(/[a-zA-Z0-9]/);\n                break;\n            // If char which is used inside mask placeholder was used in the mask, replace it with space to prevent errors\n            case placeholderChar:\n                maskArray.numeric = false;\n                maskArray.push(' ');\n                break;\n            default:\n                maskArray.numeric = false;\n                maskArray.push(mask[i]);\n                break;\n        }\n    }\n    return maskArray;\n}\nexports.getInputMask = getInputMask;\n/**\n * Unmasks a value using the provided mask and placeholder characters.\n * @param {string} value - The value to unmask.\n * @param {string} mask - The mask to use for unmasking.\n * @param {string} placeholderChar - The placeholder character to use for unmasking.\n * @returns {string} - The unmasked value.\n */\nfunction unmaskValue(value, mask, placeholderChar) {\n    if (!mask || !value || value.length > mask.length) {\n        return value;\n    }\n    let unmaskedValue = value.split('');\n    for (let i = 0; i < mask.length; i++) {\n        const char = value[i] || '';\n        const charPart = mask[i];\n        if (!lodash_1.default.isRegExp(charPart) && char === charPart) {\n            unmaskedValue[i] = '';\n        }\n    }\n    unmaskedValue = unmaskedValue.join('').replace(placeholderChar, '');\n    return unmaskedValue;\n}\nexports.unmaskValue = unmaskValue;\n/**\n * Returns true if the value matches the input mask format.\n * @param {string} value - The value to check.\n * @param {string} inputMask - The input mask to check against.\n * @returns {boolean} - TRUE if the value matches the input mask; FALSE otherwise.\n */\nfunction matchInputMask(value, inputMask) {\n    if (!inputMask) {\n        return true;\n    }\n    // If value is longer than mask, it isn't valid.\n    if (value.length > inputMask.length) {\n        return false;\n    }\n    for (let i = 0; i < inputMask.length; i++) {\n        const char = value[i] || '';\n        const charPart = inputMask[i];\n        if (!(lodash_1.default.isRegExp(charPart) && charPart.test(char) || charPart === char)) {\n            return false;\n        }\n    }\n    return true;\n}\nexports.matchInputMask = matchInputMask;\n/**\n * Returns the number separators (i.e. 1,000) for the provided language.\n * @param {string} lang - The language code to get the number separators for.\n * @returns {{delimiter: string, decimalSeparator: string}} - The number separators.\n */\nfunction getNumberSeparators(lang = 'en') {\n    const formattedNumberString = (12345.6789).toLocaleString(lang);\n    const delimeters = formattedNumberString.match(/..(.)...(.)../);\n    if (!delimeters) {\n        return {\n            delimiter: ',',\n            decimalSeparator: '.'\n        };\n    }\n    return {\n        delimiter: (delimeters.length > 1) ? delimeters[1] : ',',\n        decimalSeparator: (delimeters.length > 2) ? delimeters[2] : '.',\n    };\n}\nexports.getNumberSeparators = getNumberSeparators;\n/**\n * Returns the number for the maximum amount of decimal places for a number.\n * @param {import('@formio/core').Component} component - The component to check for decimal limits.\n * @param {number} defaultLimit - The default limit to use if none is provided in the component.\n * @returns {number} - The number of decimal places allowed.\n */\nfunction getNumberDecimalLimit(component, defaultLimit) {\n    if (lodash_1.default.has(component, 'decimalLimit')) {\n        return lodash_1.default.get(component, 'decimalLimit');\n    }\n    // Determine the decimal limit. Defaults to 20 but can be overridden by validate.step or decimalLimit settings.\n    let decimalLimit = defaultLimit || 20;\n    const step = lodash_1.default.get(component, 'validate.step', 'any');\n    if (step !== 'any') {\n        const parts = step.toString().split('.');\n        if (parts.length > 1) {\n            decimalLimit = parts[1].length;\n        }\n    }\n    return decimalLimit;\n}\nexports.getNumberDecimalLimit = getNumberDecimalLimit;\n/**\n * Returns the currency affixes for a specific language.\n * @param {object} arg0 - The arguments object.\n * @param {string} arg0.currency - The currency code to get the affixes for.\n * @param {number} arg0.decimalLimit - The number of decimal places to use.\n * @param {string} arg0.decimalSeparator - The decimal separator to use.\n * @param {string} arg0.lang - The language code to use.\n * @returns {{prefix: string, suffix: string}} - The currency affixes.\n */\nfunction getCurrencyAffixes({ currency, decimalLimit, decimalSeparator, lang, }) {\n    // Get the prefix and suffix from the localized string.\n    let regex = `(.*)?${(100).toLocaleString(lang)}`;\n    if (decimalLimit) {\n        regex += `${decimalSeparator === '.' ? '\\\\.' : decimalSeparator}${(0).toLocaleString(lang)}{${decimalLimit}}`;\n    }\n    regex += '(.*)?';\n    const parts = (100).toLocaleString(lang, {\n        style: 'currency',\n        currency: currency ? currency : 'USD',\n        useGrouping: true,\n        maximumFractionDigits: decimalLimit || 0,\n        minimumFractionDigits: decimalLimit || 0\n    }).replace('.', decimalSeparator).match(new RegExp(regex));\n    return {\n        prefix: (parts === null || parts === void 0 ? void 0 : parts[1]) || '',\n        suffix: (parts === null || parts === void 0 ? void 0 : parts[2]) || ''\n    };\n}\nexports.getCurrencyAffixes = getCurrencyAffixes;\n/**\n * Fetch the field data provided a component.\n * @param {import('@formio/core').DataObject} data - The data object to fetch the field data from.\n * @param {import('@formio/core').Component} component - The component to fetch the field data for.\n * @returns {*} - The field data.\n */\nfunction fieldData(data, component) {\n    if (!data) {\n        return '';\n    }\n    if (!component || !component.key) {\n        return data;\n    }\n    if (component.key.includes('.')) {\n        let value = data;\n        const parts = component.key.split('.');\n        let key = '';\n        for (let i = 0; i < parts.length; i++) {\n            key = parts[i];\n            // Handle nested resources\n            if (value.hasOwnProperty('_id')) {\n                value = value.data;\n            }\n            // Return if the key is not found on the value.\n            if (!value.hasOwnProperty(key)) {\n                return;\n            }\n            // Convert old single field data in submissions to multiple\n            if (key === parts[parts.length - 1] && component.multiple && !Array.isArray(value[key])) {\n                value[key] = [value[key]];\n            }\n            // Set the value of this key.\n            value = value[key];\n        }\n        return value;\n    }\n    else {\n        // Convert old single field data in submissions to multiple\n        if (component.multiple && !Array.isArray(data[component.key])) {\n            data[component.key] = [data[component.key]];\n        }\n        // Fix for checkbox type radio submission values in tableView\n        if (component.type === 'checkbox' && component.inputType === 'radio') {\n            return data[component.name] === component.value;\n        }\n        return data[component.key];\n    }\n}\nexports.fieldData = fieldData;\n/**\n * Delays function execution with possibility to execute function synchronously or cancel it.\n * @param {Function} fn - Function to delay\n * @param {number} delay - Delay time\n * @param {...any} args - Arguments to pass to the function\n * @returns {*} - Function to cancel the delay\n */\nfunction delay(fn, delay = 0, ...args) {\n    const timer = setTimeout(fn, delay, ...args);\n    /**\n     *\n     */\n    function cancel() {\n        clearTimeout(timer);\n    }\n    /**\n     * Execute the function early.\n     * @returns {*} - The result of the function.\n     */\n    function earlyCall() {\n        cancel();\n        return fn(...args);\n    }\n    earlyCall.timer = timer;\n    earlyCall.cancel = cancel;\n    return earlyCall;\n}\nexports.delay = delay;\n/**\n * Iterate the given key to make it unique.\n * @param {string} key\n *   Modify the component key to be unique.\n * @returns {string}\n *   The new component key.\n */\nfunction iterateKey(key) {\n    if (!key.match(/(\\d+)$/)) {\n        return `${key}1`;\n    }\n    return key.replace(/(\\d+)$/, function (suffix) {\n        return Number(suffix) + 1;\n    });\n}\nexports.iterateKey = iterateKey;\n/**\n * Determines a unique key within a map provided the base key.\n * @param {Record<string, string>} map - The map to check for uniqueness.\n * @param {string} base - The base path of the key.\n * @returns {string} - The unique key.\n */\nfunction uniqueKey(map, base) {\n    let newKey = base;\n    while (map.hasOwnProperty(newKey)) {\n        newKey = iterateKey(newKey);\n    }\n    return newKey;\n}\nexports.uniqueKey = uniqueKey;\n/**\n * Determines the major version number of bootstrap.\n * @param {object} options - The options to check for bootstrap version.\n * @param {string} options.bootstrap - The bootstrap version to use.\n * @returns {number} - The bootstrap version.\n */\nfunction bootstrapVersion(options) {\n    if (options.bootstrap) {\n        return options.bootstrap;\n    }\n    if ((typeof jQuery === 'function') && (typeof jQuery().collapse === 'function')) {\n        return parseInt(jQuery.fn.collapse.Constructor.VERSION.split('.')[0], 10);\n    }\n    if (window.bootstrap && window.bootstrap.Collapse) {\n        return parseInt(window.bootstrap.Collapse.VERSION.split('.')[0], 10);\n    }\n    return 0;\n}\nexports.bootstrapVersion = bootstrapVersion;\n/**\n * Retrun provided argument.\n * If argument is a function, returns the result of a function call.\n * @param {Function|any} e - The argument to check if a function and call if so.\n * @returns {any} - Either the result of the function call (e) or e if it is not a function.\n */\nfunction unfold(e) {\n    if (typeof e === 'function') {\n        return e();\n    }\n    return e;\n}\nexports.unfold = unfold;\n/**\n * Map values through unfold and return first non-nil value.\n * @param {Array<T>} collection - The collection to map through unfold.;\n * @returns {T} - The first non-nil value.\n */\nexports.firstNonNil = lodash_1.default.flow([\n    lodash_1.default.partialRight(lodash_1.default.map, unfold),\n    lodash_1.default.partialRight(lodash_1.default.find, v => !lodash_1.default.isUndefined(v))\n]);\n/**\n * Create enclosed state. Returns functions to getting and cycling between states.\n * @param {*} a - initial state.\n * @param {*} b - next state.\n * @returns {Functions[]} -- [get, toggle];\n */\nfunction withSwitch(a, b) {\n    let state = a;\n    let next = b;\n    /**\n     * Returns the state of the switch.\n     * @returns {*} - The current state.\n     */\n    function get() {\n        return state;\n    }\n    /**\n     * Toggles the state of the switch.\n     */\n    function toggle() {\n        const prev = state;\n        state = next;\n        next = prev;\n    }\n    return [get, toggle];\n}\nexports.withSwitch = withSwitch;\n/**\n * Create a function that will call the provided function only the provided limit.\n * @param {Function} callback - The callback to call.\n * @param {object} options - The options to use.\n * @param {number} options.limit - The limit to call the callback.\n * @param {number} options.delay - The delay to wait before resetting the call count.\n * @returns {Function} - The function that will call the callback only the provided limit.\n */\nfunction observeOverload(callback, options = {}) {\n    const { limit = 50, delay = 500 } = options;\n    let callCount = 0;\n    let timeoutID = 0;\n    const reset = () => callCount = 0;\n    return () => {\n        if (timeoutID !== 0) {\n            clearTimeout(timeoutID);\n            timeoutID = 0;\n        }\n        timeoutID = setTimeout(reset, delay);\n        callCount += 1;\n        if (callCount >= limit) {\n            clearTimeout(timeoutID);\n            reset();\n            return callback();\n        }\n    };\n}\nexports.observeOverload = observeOverload;\n/**\n * Returns the components that are provided within an evaluation context.\n * @param {any} context - The evaluation context to get the components from.\n * @param {boolean} excludeNested - Exclude nested components.\n * @param {Array<string>} excludedTypes - The types of components to exclude.\n * @returns {Array} - The components within the evaluation context.\n */\nfunction getContextComponents(context, excludeNested, excludedTypes = []) {\n    const values = [];\n    context.utils.eachComponent(context.instance.options.editForm.components, (component, path) => {\n        const addToContextComponents = excludeNested ? !component.tree : true;\n        if (component.key !== context.data.key && addToContextComponents && !lodash_1.default.includes(excludedTypes, component.type)) {\n            values.push({\n                label: `${component.label || component.key} (${path})`,\n                value: path,\n            });\n        }\n    });\n    return values;\n}\nexports.getContextComponents = getContextComponents;\n/**\n * Returns the button components that are within an evaluation context.\n * @param {any} context - The evaluation context to get the components from.\n * @returns {Array} - The button components within the evaluation context.\n */\nfunction getContextButtons(context) {\n    const values = [];\n    context.utils.eachComponent(context.instance.options.editForm.components, (component) => {\n        if (component.type === 'button') {\n            values.push({\n                label: `${component.key} (${component.label})`,\n                value: component.key,\n            });\n        }\n    });\n    return values;\n}\nexports.getContextButtons = getContextButtons;\n// Tags that could be in text, that should be ommited or handled in a special way\nconst inTextTags = ['#text', 'A', 'B', 'EM', 'I', 'SMALL', 'STRONG', 'SUB', 'SUP', 'INS', 'DEL', 'MARK', 'CODE'];\n/**\n * Helper function for 'translateHTMLTemplate'. Translates text value of the passed html element.\n * @param {HTMLElement} elem - The element to translate.\n * @param {Function} translate - The translation function.\n * @returns {string} - Translated element template.\n */\nfunction translateElemValue(elem, translate) {\n    if (!elem.innerText) {\n        return elem.innerHTML;\n    }\n    const elemValue = elem.innerText.replace(Evaluator_1.Evaluator.templateSettings.interpolate, '').replace(/\\s\\s+/g, ' ').trim();\n    const translatedValue = translate(elemValue);\n    if (elemValue !== translatedValue) {\n        const links = elem.innerHTML.match(/<a[^>]*>(.*?)<\\/a>/g);\n        if (links && links.length) {\n            if (links.length === 1 && links[0].length === elem.innerHTML.length) {\n                return elem.innerHTML.replace(elemValue, translatedValue);\n            }\n            const translatedLinks = links.map(link => {\n                const linkElem = document.createElement('a');\n                linkElem.innerHTML = link;\n                return translateElemValue(linkElem, translate);\n            });\n            return `${translatedValue} (${translatedLinks.join(', ')})`;\n        }\n        else {\n            return elem.innerText.replace(elemValue, translatedValue);\n        }\n    }\n    else {\n        return elem.innerHTML;\n    }\n}\n/**\n * Helper function for 'translateHTMLTemplate'. Goes deep through html tag children and calls function to translate their text values.\n * @param {HTMLElement} tag - The tag to translate.\n * @param {Function} translate - The translation function.\n * @returns {void}\n */\nfunction translateDeepTag(tag, translate) {\n    const children = tag.children.length && [...tag.children];\n    const shouldTranslateEntireContent = children && children.every(child => child.children.length === 0\n        && inTextTags.some(tag => child.nodeName === tag));\n    if (!children || shouldTranslateEntireContent) {\n        tag.innerHTML = translateElemValue(tag, translate);\n    }\n    else {\n        children.forEach(child => translateDeepTag(child, translate));\n    }\n}\n/**\n * Translates text values in html template.\n * @param {string} template - The template to translate.\n * @param {Function} translate - The translation function.\n * @returns {string} - Html template with translated values.\n */\nfunction translateHTMLTemplate(template, translate) {\n    const isHTML = /<[^>]*>/.test(template);\n    if (!isHTML) {\n        return translate(template);\n    }\n    const tempElem = document.createElement('div');\n    tempElem.innerHTML = template;\n    if (tempElem.innerText && tempElem.children.length) {\n        translateDeepTag(tempElem, translate);\n        return tempElem.innerHTML;\n    }\n    return template;\n}\nexports.translateHTMLTemplate = translateHTMLTemplate;\n/**\n * Sanitize an html string.\n * @param {string} string - The string to sanitize.\n * @param {any} options - The options to use for sanitization.\n * @returns {string} - The sanitized html string.\n */\nfunction sanitize(string, options) {\n    if (typeof dompurify_1.default.sanitize !== 'function') {\n        return string;\n    }\n    // Dompurify configuration\n    const sanitizeOptions = {\n        ADD_ATTR: ['ref', 'target'],\n        USE_PROFILES: { html: true }\n    };\n    // Use profiles\n    if (options.sanitizeConfig && options.sanitizeConfig.useProfiles) {\n        Object.keys(options.sanitizeConfig.useProfiles).forEach(key => {\n            sanitizeOptions.USE_PROFILES[key] = options.sanitizeConfig.useProfiles[key];\n        });\n    }\n    // Add attrs\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addAttr) && options.sanitizeConfig.addAttr.length > 0) {\n        options.sanitizeConfig.addAttr.forEach((attr) => {\n            sanitizeOptions.ADD_ATTR.push(attr);\n        });\n    }\n    // Add tags\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addTags) && options.sanitizeConfig.addTags.length > 0) {\n        sanitizeOptions.ADD_TAGS = options.sanitizeConfig.addTags;\n    }\n    // Allow tags\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.allowedTags) && options.sanitizeConfig.allowedTags.length > 0) {\n        sanitizeOptions.ALLOWED_TAGS = options.sanitizeConfig.allowedTags;\n    }\n    // Allow attributes\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.allowedAttrs) && options.sanitizeConfig.allowedAttrs.length > 0) {\n        sanitizeOptions.ALLOWED_ATTR = options.sanitizeConfig.allowedAttrs;\n    }\n    // Allowd URI Regex\n    if (options.sanitizeConfig && options.sanitizeConfig.allowedUriRegex) {\n        const allowedUriRegex = options.sanitizeConfig.allowedUriRegex;\n        sanitizeOptions.ALLOWED_URI_REGEXP = lodash_1.default.isString(allowedUriRegex) ? new RegExp(allowedUriRegex) : allowedUriRegex;\n    }\n    // Allow to extend the existing array of elements that are safe for URI-like values\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addUriSafeAttr) && options.sanitizeConfig.addUriSafeAttr.length > 0) {\n        sanitizeOptions.ADD_URI_SAFE_ATTR = options.sanitizeConfig.addUriSafeAttr;\n    }\n    return dompurify_1.default.sanitize(string, sanitizeOptions);\n}\nexports.sanitize = sanitize;\n/**\n * Fast cloneDeep for JSON objects only.\n * @param {any} obj - The object to perform a fast clone deep against.\n * @returns {any} - The cloned object.\n */\nfunction fastCloneDeep(obj) {\n    return obj ? JSON.parse(JSON.stringify(obj)) : obj;\n}\nexports.fastCloneDeep = fastCloneDeep;\n/**\n * Returns if the component is an input component.\n * @param {import('@formio/core').Component} componentJson - The JSON of a component.\n * @returns {boolean} - TRUE if the component is an input component; FALSE otherwise.\n */\nfunction isInputComponent(componentJson) {\n    if (componentJson.input === false || componentJson.input === true) {\n        return componentJson.input;\n    }\n    switch (componentJson.type) {\n        case 'htmlelement':\n        case 'content':\n        case 'columns':\n        case 'fieldset':\n        case 'panel':\n        case 'table':\n        case 'tabs':\n        case 'well':\n        case 'button':\n            return false;\n        default:\n            return true;\n    }\n}\nexports.isInputComponent = isInputComponent;\n/**\n * Takes a component path, and returns a component path array.\n * @param {string} pathStr - The path string to convert to an array.\n * @returns {Array<string>} - The array of paths.\n */\nfunction getArrayFromComponentPath(pathStr) {\n    if (!pathStr || !lodash_1.default.isString(pathStr)) {\n        if (!lodash_1.default.isArray(pathStr)) {\n            return [pathStr];\n        }\n        return pathStr;\n    }\n    return pathStr.replace(/[[\\]]/g, '.')\n        .replace(/\\.\\./g, '.')\n        .replace(/(^\\.)|(\\.$)/g, '')\n        .split('.')\n        .map(part => lodash_1.default.defaultTo(lodash_1.default.toNumber(part), part));\n}\nexports.getArrayFromComponentPath = getArrayFromComponentPath;\n/**\n * Returns true if the component is a child of the parent.\n * @param {any} child - The child component to check.\n * @param {any} parent - The parent component to check.\n * @returns {boolean} - TRUE if the child is a child of the parent; FALSE otherwise.\n */\nfunction isChildOf(child, parent) {\n    while (child && child.parent) {\n        if (child.parent === parent) {\n            return true;\n        }\n        child = child.parent;\n    }\n    return false;\n}\nexports.isChildOf = isChildOf;\n/**\n * Takes an array of component path indexes, and returns a string version of that array.\n * @param {Array<number>} path - The path array to convert to a string.\n * @returns {string} - The string version of the path.\n */\nfunction getStringFromComponentPath(path) {\n    if (!lodash_1.default.isArray(path)) {\n        return path;\n    }\n    let strPath = '';\n    path.forEach((part, i) => {\n        if (lodash_1.default.isNumber(part)) {\n            strPath += `[${part}]`;\n        }\n        else {\n            strPath += i === 0 ? part : `.${part}`;\n        }\n    });\n    return strPath;\n}\nexports.getStringFromComponentPath = getStringFromComponentPath;\n/**\n * Takes a number and rounds it to the provided precision amount.\n * @param {number} number - The number to round.\n * @param {number} precision - The precision to round the number to.\n * @returns {string} - The rounded number.\n */\nfunction round(number, precision) {\n    if (lodash_1.default.isNumber(number)) {\n        return number.toFixed(precision);\n    }\n    return number.toString();\n}\nexports.round = round;\n/**\n * Check for Internet Explorer browser version\n * @returns {(number|null)} - The IE browser version or null if not IE\n */\nfunction getIEBrowserVersion() {\n    const { ie, version } = getBrowserInfo();\n    return ie ? version : null;\n}\nexports.getIEBrowserVersion = getIEBrowserVersion;\n/**\n * Get browser name and version (modified from 'jquery-browser-plugin')\n * @returns {object} -- {{browser name, version, isWebkit?}}\n * Possible browser names: chrome, safari, ie, edge, opera, mozilla, yabrowser\n */\nfunction getBrowserInfo() {\n    const browser = {};\n    if (typeof window === 'undefined') {\n        return browser;\n    }\n    const ua = window.navigator.userAgent.toLowerCase();\n    const match = /(edge|edg)\\/([\\w.]+)/.exec(ua) ||\n        /(opr)[/]([\\w.]+)/.exec(ua) ||\n        /(yabrowser)[ /]([\\w.]+)/.exec(ua) ||\n        /(chrome)[ /]([\\w.]+)/.exec(ua) ||\n        /(iemobile)[/]([\\w.]+)/.exec(ua) ||\n        /(version)(applewebkit)[ /]([\\w.]+).*(safari)[ /]([\\w.]+)/.exec(ua) ||\n        /(webkit)[ /]([\\w.]+).*(version)[ /]([\\w.]+).*(safari)[ /]([\\w.]+)/.exec(ua) ||\n        /(webkit)[ /]([\\w.]+)/.exec(ua) ||\n        /(opera)(?:.*version|)[ /]([\\w.]+)/.exec(ua) ||\n        /(msie) ([\\w.]+)/.exec(ua) ||\n        ua.indexOf('trident') >= 0 && /(rv)(?::| )([\\w.]+)/.exec(ua) ||\n        ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\\w.]+)|)/.exec(ua) ||\n        [];\n    const matched = {\n        browser: match[5] || match[3] || match[1] || '',\n        version: match[4] || match[2] || '0'\n    };\n    if (matched.browser) {\n        browser[matched.browser] = true;\n        browser.version = parseInt(matched.version, 10);\n    }\n    // Chrome, Opera 15+, Safari and Yandex.Browser are webkit based browsers\n    if (browser.chrome || browser.opr || browser.safari || browser.edg || browser.yabrowser) {\n        browser.isWebkit = true;\n    }\n    // IE11 has a new token so we will assign it ie to avoid breaking changes\n    if (browser.rv || browser.iemobile) {\n        browser.ie = true;\n    }\n    // Edge has a new token since it became webkit based\n    if (browser.edg) {\n        browser.edge = true;\n    }\n    // Opera 15+ are identified as opr\n    if (browser.opr) {\n        browser.opera = true;\n    }\n    return browser;\n}\nexports.getBrowserInfo = getBrowserInfo;\n/**\n * Takes a component path, which may include array indicies (i.e. [0][1]), and returns the compoennt path without the indicies.\n * @param {string} path - The path to remove the indicies from.\n * @returns {string} - The path without the indicies.\n */\nfunction getComponentPathWithoutIndicies(path = '') {\n    return path.replace(/\\[\\d+\\]/, '');\n}\nexports.getComponentPathWithoutIndicies = getComponentPathWithoutIndicies;\n/**\n * Returns a path to the component which based on its schema\n * @param {import('@formio/core').Component} component - Component containing link to its parent's schema in the 'parent' property\n * @returns {string} - Path to the component\n */\nfunction getComponentPath(component) {\n    return component.paths.localDataPath;\n}\nexports.getComponentPath = getComponentPath;\n/**\n * Returns a parent component of the passed component instance skipping all the Layout components\n * @param {Component} componentInstance - The component to check for the parent.\n * @returns {Component|undefined} - The parent data component.\n */\nfunction getDataParentComponent(componentInstance) {\n    if (!componentInstance) {\n        return;\n    }\n    const { parent } = componentInstance;\n    if (parent && (parent.isInputComponent || parent.input)) {\n        return parent;\n    }\n    else {\n        return getDataParentComponent(parent);\n    }\n}\nexports.getDataParentComponent = getDataParentComponent;\n/**\n * Returns whether the value is a promise\n * @param {any} value - The value to check\n * @returns {boolean} - TRUE if the value is a promise; FALSE otherwise\n */\nfunction isPromise(value) {\n    return value\n        && value.then\n        && typeof value.then === 'function'\n        && Object.prototype.toString.call(value) === '[object Promise]';\n}\nexports.isPromise = isPromise;\n/**\n * Returns all the focusable elements within the provided dom element.\n * @param {HTMLElement} element - The element to get the focusable elements from.\n * @returns {NodeList<HTMLElement>} - The focusable elements within the provided element.\n */\nfunction getFocusableElements(element) {\n    const focusableSelector = `button:not([disabled]), input:not([disabled]), select:not([disabled]),\n    textarea:not([disabled]), button:not([disabled]), [href]`;\n    return element.querySelectorAll(focusableSelector);\n}\nexports.getFocusableElements = getFocusableElements;\nexports.componentValueTypes = {\n    number: 'number',\n    string: 'string',\n    boolean: 'boolean',\n    array: 'array',\n    object: 'object',\n    date: 'date',\n    any: 'any',\n};\n/**\n * Returns the saved types for the component\n * @param {import('@formio/core').Component} fullSchema - The component schema\n * @returns {Array<string>|null} - The saved types for the component\n */\nfunction getComponentSavedTypes(fullSchema) {\n    const schema = fullSchema || {};\n    if (schema.persistent !== true) {\n        return [];\n    }\n    if (schema.multiple) {\n        return [exports.componentValueTypes.array];\n    }\n    return null;\n}\nexports.getComponentSavedTypes = getComponentSavedTypes;\n/**\n * Interpolates @formio/core errors so that they are compatible with the renderer\n * @param {Component} component - The component to interpolate the errors for\n * @param {FieldError[]} errors - The errors to interpolate\n * @param {Function} interpolateFn - The interpolation function\n * @returns {[]} - The interpolated errors\n */\nconst interpolateErrors = (component, errors, interpolateFn) => {\n    return errors.map((error) => {\n        error.component = component;\n        const { errorKeyOrMessage, context } = error;\n        const toInterpolate = component.errors && component.errors[errorKeyOrMessage] ? component.errors[errorKeyOrMessage] : errorKeyOrMessage;\n        return Object.assign(Object.assign({}, error), { message: unescapeHTML(interpolateFn(toInterpolate, context)), context: Object.assign({}, context) });\n    });\n};\nexports.interpolateErrors = interpolateErrors;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/utils/utils.js?");
 
 /***/ }),
 
@@ -6181,7 +6181,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 Formio_1 = __webpack_require__(/*! ../Formio */ \"./lib/cjs/Formio.js\");\nconst InputWidget_1 = __importDefault(__webpack_require__(/*! ./InputWidget */ \"./lib/cjs/widgets/InputWidget.js\"));\nconst utils_1 = __webpack_require__(/*! ../utils */ \"./lib/cjs/utils/index.js\");\nconst moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst DEFAULT_FORMAT = 'yyyy-MM-dd hh:mm a';\nconst ISO_8601_FORMAT = 'yyyy-MM-ddTHH:mm:ssZ';\nconst isIEBrowser = (0, utils_1.getBrowserInfo)().ie;\nclass CalendarWidget extends InputWidget_1.default {\n    /* eslint-disable camelcase */\n    static get defaultSettings() {\n        return {\n            type: 'calendar',\n            altInput: true,\n            allowInput: true,\n            clickOpens: true,\n            enableDate: true,\n            enableTime: true,\n            mode: 'single',\n            noCalendar: false,\n            format: DEFAULT_FORMAT,\n            dateFormat: ISO_8601_FORMAT,\n            useLocaleSettings: false,\n            language: 'us-en',\n            hourIncrement: 1,\n            minuteIncrement: 5,\n            time_24hr: false,\n            saveAs: 'date',\n            displayInTimezone: '',\n            timezone: '',\n            disable: [],\n            minDate: '',\n            maxDate: ''\n        };\n    }\n    /* eslint-enable camelcase */\n    constructor(settings, component, instance, index) {\n        super(settings, component, instance, index);\n        // Change the format to map to the settings.\n        if (this.settings.noCalendar) {\n            this.settings.format = this.settings.format.replace(/yyyy-MM-dd /g, '');\n        }\n        if (!this.settings.enableTime) {\n            this.settings.format = this.settings.format.replace(/ hh:mm a$/g, '');\n        }\n        else if (this.settings.time_24hr) {\n            this.settings.format = this.settings.format.replace(/hh:mm a$/g, 'HH:mm');\n        }\n        this.zoneLoading = false;\n        this.timezonesUrl = `${Formio_1.Formio.cdn['moment-timezone']}/data/packed/latest.json`;\n    }\n    /**\n     * Load the timezones.\n     * @returns {boolean} TRUE if the zones are loading, FALSE otherwise.\n     */\n    loadZones() {\n        const timezone = this.timezone;\n        if (this.zoneLoading) {\n            return true;\n        }\n        if (!(0, utils_1.zonesLoaded)() && (0, utils_1.shouldLoadZones)(timezone)) {\n            this.zoneLoading = true;\n            (0, utils_1.loadZones)(this.timezonesUrl, timezone).then(() => {\n                this.zoneLoading = false;\n                this.emit('redraw');\n            });\n            // Return zones are loading.\n            return true;\n        }\n        // Zones are already loaded.\n        return false;\n    }\n    attach(input) {\n        var _a;\n        const superAttach = super.attach(input);\n        const dateFormatInfo = (0, utils_1.getLocaleDateFormatInfo)(this.settings.language);\n        this.defaultFormat = {\n            date: dateFormatInfo.dayFirst ? 'd/m/Y ' : 'm/d/Y ',\n            time: 'G:i K'\n        };\n        this.closedOn = 0;\n        this.valueFormat = (this.settings.saveAs === 'date') ? ISO_8601_FORMAT : this.settings.dateFormat || ISO_8601_FORMAT;\n        this.valueMomentFormat = (0, utils_1.convertFormatToMoment)(this.valueFormat);\n        const isReadOnly = this.settings.readOnly;\n        this.settings.minDate = isReadOnly ? null : (0, utils_1.getDateSetting)(this.settings.minDate);\n        this.settings.maxDate = isReadOnly ? null : (0, utils_1.getDateSetting)(this.settings.maxDate);\n        this.settings.disable = this.disabledDates;\n        this.settings.disableWeekends ? this.settings.disable.push(this.disableWeekends) : '';\n        this.settings.disableWeekdays ? this.settings.disable.push(this.disableWeekdays) : '';\n        this.settings.disableFunction ? this.settings.disable.push(this.disableFunction) : '';\n        this.settings.wasDefaultValueChanged = false;\n        this.settings.defaultValue = '';\n        this.settings.manualInputValue = '';\n        this.settings.isManuallyOverriddenValue = false;\n        this.settings.currentValue = '';\n        this.settings.altFormat = (0, utils_1.convertFormatToFlatpickr)(this.settings.format);\n        this.settings.dateFormat = (0, utils_1.convertFormatToFlatpickr)(this.settings.dateFormat);\n        this.settings.position = 'auto center';\n        this.settings.onChange = () => {\n            if (this.settings.allowInput) {\n                if (this.settings.isManuallyOverriddenValue && this.settings.enableTime) {\n                    this.calendar._input.value = this.settings.manualInputValue;\n                }\n                else {\n                    this.settings.manualInputValue = '';\n                }\n                this.settings.isManuallyOverriddenValue = false;\n            }\n            this.emit('update');\n        };\n        this.settings.onOpen = () => this.hook('onCalendarOpen');\n        this.settings.onClose = () => {\n            this.hook('onCalendarClose');\n            this.closedOn = Date.now();\n            if (this.settings.allowInput && this.settings.enableTime) {\n                this.calendar._input.value = this.settings.manualInputValue || this.calendar._input.value;\n                this.settings.isManuallyOverriddenValue = false;\n                this.emit('update');\n            }\n            if (this.settings.wasDefaultValueChanged) {\n                this.calendar._input.value = this.settings.defaultValue;\n                this.settings.wasDefaultValueChanged = false;\n            }\n            if (this.calendar) {\n                this.emit('blur');\n            }\n        };\n        Formio_1.Formio.requireLibrary('flatpickr-css', 'flatpickr', [\n            { type: 'styles', src: `${Formio_1.Formio.cdn['flatpickr-formio']}/flatpickr.min.css` }\n        ], true);\n        if (this.component.shortcutButtons) {\n            this.component.shortcutButtons = this.component.shortcutButtons.filter((btn) => btn.label && btn.onClick);\n        }\n        if ((_a = this.component.shortcutButtons) === null || _a === void 0 ? void 0 : _a.length) {\n            Formio_1.Formio.requireLibrary('shortcut-buttons-flatpickr-css', 'ShortcutButtonsPlugin', [\n                { type: 'styles', src: `${Formio_1.Formio.cdn['shortcut-buttons-flatpickr']}/themes/light.min.css` }\n            ], true);\n        }\n        return superAttach\n            .then(() => {\n            var _a;\n            if ((_a = this.component.shortcutButtons) === null || _a === void 0 ? void 0 : _a.length) {\n                return Formio_1.Formio.requireLibrary('shortcut-buttons-flatpickr', 'ShortcutButtonsPlugin', `${Formio_1.Formio.cdn['shortcut-buttons-flatpickr']}/shortcut-buttons-flatpickr.min.js`, true);\n            }\n        })\n            .then((ShortcutButtonsPlugin) => {\n            return Formio_1.Formio.requireLibrary('flatpickr', 'flatpickr', `${Formio_1.Formio.cdn['flatpickr-formio']}/flatpickr.min.js`, true)\n                .then((Flatpickr) => {\n                var _a;\n                if (((_a = this.component.shortcutButtons) === null || _a === void 0 ? void 0 : _a.length) && ShortcutButtonsPlugin) {\n                    this.initShortcutButtonsPlugin(ShortcutButtonsPlugin);\n                }\n                this.settings.formatDate = this.getFlatpickrFormatDate(Flatpickr);\n                if (this._input) {\n                    const { locale } = this.settings;\n                    if (locale && locale.length >= 2 && locale !== 'en') {\n                        return Formio_1.Formio.requireLibrary(`flatpickr-${locale}`, `flatpickr-${locale}`, `${Formio_1.Formio.cdn['flatpickr-formio']}/l10n/flatpickr-${locale}.js`, true).then(() => this.initFlatpickr(Flatpickr));\n                    }\n                    else {\n                        this.initFlatpickr(Flatpickr);\n                    }\n                }\n            });\n        })\n            .catch((err) => {\n            console.warn(err);\n        });\n    }\n    get disableWeekends() {\n        return function (date) {\n            return (date.getDay() === 0 || date.getDay() === 6);\n        };\n    }\n    get disableWeekdays() {\n        return (date) => !this.disableWeekends(date);\n    }\n    get disableFunction() {\n        return (date) => this.evaluate(`return ${this.settings.disableFunction}`, {\n            date\n        });\n    }\n    get timezone() {\n        return this.componentInstance.getTimezone(this.settings);\n    }\n    get defaultSettings() {\n        return CalendarWidget.defaultSettings;\n    }\n    addSuffix(suffix) {\n        this.addEventListener(suffix, 'click', () => {\n            setTimeout(() => {\n                if (this.calendar) {\n                    if (!this.calendar.isOpen && ((Date.now() - this.closedOn) > 200)) {\n                        this.calendar.open();\n                    }\n                    else if (this.calendar.isOpen) {\n                        this.calendar.close();\n                    }\n                }\n            }, 0);\n        });\n        return suffix;\n    }\n    set disabled(disabled) {\n        super.disabled = disabled;\n        if (this.calendar) {\n            if (disabled) {\n                this.calendar._input.setAttribute('disabled', 'disabled');\n            }\n            else {\n                this.calendar._input.removeAttribute('disabled');\n            }\n            this.calendar.close();\n            this.calendar.redraw();\n        }\n    }\n    get input() {\n        return this.calendar ? this.calendar.altInput : null;\n    }\n    get disabledDates() {\n        if (this.settings.disabledDates) {\n            const disabledDates = this.settings.disabledDates.split(',');\n            return disabledDates.map((item) => {\n                const dateMask = /\\d{4}-\\d{2}-\\d{2}/g;\n                const dates = item.match(dateMask);\n                if (dates && dates.length) {\n                    return dates.length === 1 ? item.match(dateMask)[0] : {\n                        from: item.match(dateMask)[0],\n                        to: item.match(dateMask)[1],\n                    };\n                }\n            });\n        }\n        return [];\n    }\n    get localeFormat() {\n        let format = '';\n        if (this.settings.enableDate) {\n            format += this.defaultFormat.date;\n        }\n        if (this.settings.enableTime) {\n            format += this.defaultFormat.time;\n        }\n        return format;\n    }\n    get dateTimeFormat() {\n        return this.settings.useLocaleSettings ? this.localeFormat : (0, utils_1.convertFormatToFlatpickr)(this.dateFormat);\n    }\n    get dateFormat() {\n        return lodash_1.default.get(this.settings, 'format', DEFAULT_FORMAT);\n    }\n    /**\n     * Return the date value as a string.\n     * @param {string|Date} date - The date object or a date string that is momentjs compatible.\n     * @param {string} format - The DateParser code format.\n     * @param {boolean} [useTimezone] - If the timezone should be used.\n     * @returns {string} - Returns the formatted date string.\n     */\n    getDateValue(date, format, useTimezone) {\n        if (useTimezone) {\n            return (0, utils_1.momentDate)(date, this.valueFormat, this.timezone).format((0, utils_1.convertFormatToMoment)(format));\n        }\n        return (0, moment_1.default)(date).format((0, utils_1.convertFormatToMoment)(format));\n    }\n    /**\n     * Return the value of the selected date.\n     * @returns {*} - The value of the selected date.\n     */\n    getValue() {\n        // Standard output format.\n        if (!this.calendar) {\n            return super.getValue();\n        }\n        // Get the selected dates from the calendar widget.\n        const dates = this.calendar.selectedDates;\n        if (!dates || !dates.length) {\n            return super.getValue();\n        }\n        if (!(dates[0] instanceof Date)) {\n            return 'Invalid Date';\n        }\n        return this.getDateValue(dates[0], this.valueFormat, (this.settings.saveAs === 'date'));\n    }\n    isValueISO8601(value) {\n        return value && (typeof value === 'string') && value.match(/-[0-9]{2}T[0-9]{2}:/);\n    }\n    /**\n     * Set the selected date value.\n     * @param {*} value - The value to set.\n     * @returns {void}\n     */\n    setValue(value) {\n        const saveAsText = (this.settings.saveAs === 'text');\n        if (!this.calendar) {\n            value = value ? (0, utils_1.formatDate)(this.timezonesUrl, value, (0, utils_1.convertFormatToMoment)(this.settings.format), this.timezone, (0, utils_1.convertFormatToMoment)(this.valueMomentFormat)) : value;\n            return super.setValue(value);\n        }\n        const zonesLoading = this.loadZones();\n        if (value) {\n            if (!saveAsText && this.settings.readOnly && !zonesLoading) {\n                this.calendar.setDate((0, utils_1.momentDate)(value, this.valueFormat, this.timezone).format(), false);\n            }\n            else if (this.isValueISO8601(value)) {\n                this.calendar.setDate(value, false);\n            }\n            else {\n                this.calendar.setDate((0, moment_1.default)(value, this.valueMomentFormat).toDate(), false);\n            }\n        }\n        else {\n            this.calendar.clear(false);\n        }\n    }\n    getValueAsString(value, format) {\n        const inputFormat = format || this.dateFormat;\n        const valueFormat = this.calendar ? this.valueFormat : this.settings.dateFormat;\n        if (this.settings.saveAs === 'text' && this.componentInstance.parent && !this.settings.readOnly) {\n            return (0, moment_1.default)(value, (0, utils_1.convertFormatToMoment)(valueFormat)).format((0, utils_1.convertFormatToMoment)(valueFormat));\n        }\n        return (0, utils_1.formatDate)(this.timezonesUrl, value, inputFormat, this.timezone, (0, utils_1.convertFormatToMoment)(valueFormat));\n    }\n    setErrorClasses(hasErrors) {\n        if (!this.input) {\n            return;\n        }\n        if (hasErrors) {\n            this.addClass(this.input, 'is-invalid');\n            this.input.setAttribute('aria-invalid', 'true');\n        }\n        else {\n            this.removeClass(this.input, 'is-invalid');\n            this.input.setAttribute('aria-invalid', 'false');\n        }\n    }\n    get validationValue() {\n        const value = this.dataValue;\n        if (typeof value === 'string') {\n            return new Date(value);\n        }\n        return value.map(val => new Date(val));\n    }\n    isCalendarElement(element) {\n        var _a, _b, _c, _d, _e;\n        if (!element) {\n            return true;\n        }\n        if ((_c = (_b = (_a = this.calendar) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.appendTo) === null || _c === void 0 ? void 0 : _c.contains(element)) {\n            return true;\n        }\n        return (_e = (_d = this.calendar) === null || _d === void 0 ? void 0 : _d.calendarContainer) === null || _e === void 0 ? void 0 : _e.contains(element);\n    }\n    initFlatpickr(Flatpickr) {\n        // Create a new flatpickr.\n        this.calendar = new Flatpickr(this._input, Object.assign(Object.assign({}, this.settings), { disableMobile: true }));\n        this.addEventListener(this.calendar.altInput, 'input', (event) => {\n            if (this.settings.allowInput && this.settings.currentValue !== event.target.value) {\n                this.settings.manualInputValue = event.target.value;\n                this.settings.isManuallyOverriddenValue = true;\n                this.settings.currentValue = event.target.value;\n            }\n            if (event.target.value === '' && this.calendar.selectedDates.length > 0) {\n                this.settings.wasDefaultValueChanged = true;\n                this.settings.defaultValue = event.target.value;\n                this.calendar.clear();\n            }\n            else {\n                this.settings.wasDefaultValueChanged = false;\n            }\n        });\n        const excludedFromMaskFormats = ['MMMM'];\n        if (!this.settings.readOnly && !lodash_1.default.some(excludedFromMaskFormats, format => lodash_1.default.includes(this.settings.format, format))) {\n            // Enforce the input mask of the format.\n            this.setInputMask(this.calendar._input, (0, utils_1.convertFormatToMask)(this.settings.format));\n        }\n        // Fixes an issue with IE11 where value is set only after the second click\n        // TODO: Remove when the issue is solved in the flatpickr library\n        if (isIEBrowser) {\n            // Remove the original blur listener, because value will be set to empty since relatedTarget is null in IE11\n            const originalBlurListener = this.calendar._handlers.find(({ event, element }) => event === 'blur' && element === this.calendar._input);\n            this.calendar._input.removeEventListener('blur', originalBlurListener.handler);\n            // Add the same event listener as in the original library, but with workaround for IE11 issue\n            this.addEventListener(this.calendar._input, 'blur', (event) => {\n                const activeElement = this.settings.shadowRoot ? this.settings.shadowRoot.activeElement : document.activeElement;\n                const relatedTarget = event.relatedTarget ? event.relatedTarget : activeElement;\n                const isInput = event.target === this.calendar._input;\n                if (isInput && !this.isCalendarElement(relatedTarget)) {\n                    this.calendar.setDate(this.calendar._input.value, true, event.target === this.calendar.altInput\n                        ? this.calendar.config.altFormat\n                        : this.calendar.config.dateFormat);\n                }\n            });\n        }\n        // Make sure we commit the value after a blur event occurs.\n        this.addEventListener(this.calendar._input, 'blur', (event) => {\n            var _a, _b, _c, _d;\n            const activeElement = this.settings.shadowRoot ? this.settings.shadowRoot.activeElement : document.activeElement;\n            const relatedTarget = event.relatedTarget ? event.relatedTarget : activeElement;\n            if (!(isIEBrowser && !relatedTarget) && !this.isCalendarElement(relatedTarget)) {\n                const inputValue = this.calendar.input.value;\n                const dateValue = inputValue ? (0, moment_1.default)(this.calendar.input.value, (0, utils_1.convertFormatToMoment)(this.valueFormat)).toDate() : inputValue;\n                this.calendar.setDate(dateValue, true, this.settings.altFormat);\n            }\n            else if (!this.calendar.input.value && this.calendar.config.noCalendar) {\n                const value = (0, moment_1.default)({ hour: (_b = (_a = this.calendar) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.defaultHour, minute: (_d = (_c = this.calendar) === null || _c === void 0 ? void 0 : _c.config) === null || _d === void 0 ? void 0 : _d.defaultMinute }).toDate();\n                this.calendar.setDate(value, true, this.settings.format);\n            }\n        });\n        // FJS-1103: When hit the enter button, the field not saving the year correctly\n        this.addEventListener(this.calendar.altInput, 'keydown', (event) => {\n            if (event.keyCode === 13) {\n                if (this.calendar.isOpen) {\n                    this.calendar.close();\n                    event.stopPropagation();\n                }\n            }\n        });\n        // If other fields are used to calculate disabled dates, we need to redraw calendar to refresh disabled dates\n        if (this.settings.disableFunction && this.componentInstance && this.componentInstance.root) {\n            this.componentInstance.root.on('change', (e) => {\n                if (e.changed && this.calendar) {\n                    this.calendar.redraw();\n                }\n            });\n        }\n        // Restore the calendar value from the component value.\n        this.setValue(this.componentValue);\n    }\n    initShortcutButtonsPlugin(ShortcutButtonsPlugin) {\n        this.settings.plugins = [\n            // eslint-disable-next-line new-cap\n            ShortcutButtonsPlugin({\n                button: this.component.shortcutButtons.map((btn) => ({ label: btn.label, attributes: btn.attribute })),\n                onClick: (index) => {\n                    const getValue = this.component.shortcutButtons[index].onClick;\n                    const date = this.evaluate(getValue, { date: new Date() }, 'date');\n                    this.calendar.setDate(date, true);\n                }\n            })\n        ];\n    }\n    get componentValue() {\n        let compValue = this.componentInstance.dataValue;\n        if (Array.isArray(compValue)) {\n            compValue = compValue[this.valueIndex];\n        }\n        return compValue;\n    }\n    getFlatpickrFormatDate(Flatpickr) {\n        return (date, format) => {\n            // Only format this if this is the altFormat and the form is readOnly.\n            if (this.settings.readOnly && (format === this.settings.altFormat)) {\n                if (!this.settings.enableTime || this.loadZones()) {\n                    return Flatpickr.formatDate(date, format);\n                }\n                const currentValue = new Date(this.getValue());\n                if (currentValue.toString() === date.toString()) {\n                    return (0, utils_1.formatOffset)(this.timezonesUrl, Flatpickr.formatDate.bind(Flatpickr), new Date(this.componentValue), format, this.timezone);\n                }\n                return (0, utils_1.formatOffset)(this.timezonesUrl, Flatpickr.formatDate.bind(Flatpickr), date, format, this.timezone);\n            }\n            return Flatpickr.formatDate(date, format);\n        };\n    }\n    destroy(all = false) {\n        if (this.calendar) {\n            this.calendar.destroy();\n        }\n        super.destroy(all);\n    }\n}\nexports[\"default\"] = CalendarWidget;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/widgets/CalendarWidget.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 Formio_1 = __webpack_require__(/*! ../Formio */ \"./lib/cjs/Formio.js\");\nconst InputWidget_1 = __importDefault(__webpack_require__(/*! ./InputWidget */ \"./lib/cjs/widgets/InputWidget.js\"));\nconst utils_1 = __webpack_require__(/*! ../utils */ \"./lib/cjs/utils/index.js\");\nconst moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst DEFAULT_FORMAT = 'yyyy-MM-dd hh:mm a';\nconst ISO_8601_FORMAT = 'yyyy-MM-ddTHH:mm:ssZ';\nconst isIEBrowser = (0, utils_1.getBrowserInfo)().ie;\nclass CalendarWidget extends InputWidget_1.default {\n    /* eslint-disable camelcase */\n    static get defaultSettings() {\n        return {\n            type: 'calendar',\n            altInput: true,\n            allowInput: true,\n            clickOpens: true,\n            enableDate: true,\n            enableTime: true,\n            mode: 'single',\n            noCalendar: false,\n            format: DEFAULT_FORMAT,\n            dateFormat: ISO_8601_FORMAT,\n            useLocaleSettings: false,\n            language: 'us-en',\n            hourIncrement: 1,\n            minuteIncrement: 5,\n            time_24hr: false,\n            saveAs: 'date',\n            displayInTimezone: '',\n            timezone: '',\n            disable: [],\n            minDate: '',\n            maxDate: ''\n        };\n    }\n    /* eslint-enable camelcase */\n    constructor(settings, component, instance, index) {\n        super(settings, component, instance, index);\n        // Change the format to map to the settings.\n        if (this.settings.noCalendar) {\n            this.settings.format = this.settings.format.replace(/yyyy-MM-dd /g, '');\n        }\n        if (!this.settings.enableTime) {\n            this.settings.format = this.settings.format.replace(/ hh:mm a$/g, '');\n        }\n        else if (this.settings.time_24hr) {\n            this.settings.format = this.settings.format.replace(/hh:mm a$/g, 'HH:mm');\n        }\n        this.zoneLoading = false;\n        this.timezonesUrl = `${Formio_1.Formio.cdn['moment-timezone']}/data/packed/latest.json`;\n    }\n    /**\n     * Load the timezones.\n     * @returns {boolean} TRUE if the zones are loading, FALSE otherwise.\n     */\n    loadZones() {\n        const timezone = this.timezone;\n        if (this.zoneLoading) {\n            return true;\n        }\n        if (!(0, utils_1.zonesLoaded)() && (0, utils_1.shouldLoadZones)(timezone)) {\n            this.zoneLoading = true;\n            (0, utils_1.loadZones)(this.timezonesUrl, timezone).then(() => {\n                this.zoneLoading = false;\n                this.emit('redraw');\n            });\n            // Return zones are loading.\n            return true;\n        }\n        // Zones are already loaded.\n        return false;\n    }\n    attach(input) {\n        var _a;\n        const superAttach = super.attach(input);\n        const dateFormatInfo = (0, utils_1.getLocaleDateFormatInfo)(this.settings.language);\n        this.defaultFormat = {\n            date: dateFormatInfo.dayFirst ? 'd/m/Y ' : 'm/d/Y ',\n            time: 'G:i K'\n        };\n        this.closedOn = 0;\n        this.valueFormat = (this.settings.saveAs === 'date') ? ISO_8601_FORMAT : this.settings.dateFormat || ISO_8601_FORMAT;\n        this.valueMomentFormat = (0, utils_1.convertFormatToMoment)(this.valueFormat);\n        const isReadOnly = this.settings.readOnly;\n        this.settings.minDate = isReadOnly ? null : (0, utils_1.getDateSetting)(this.settings.minDate);\n        this.settings.maxDate = isReadOnly ? null : (0, utils_1.getDateSetting)(this.settings.maxDate);\n        this.settings.disable = this.disabledDates;\n        this.settings.disableWeekends ? this.settings.disable.push(this.disableWeekends) : '';\n        this.settings.disableWeekdays ? this.settings.disable.push(this.disableWeekdays) : '';\n        this.settings.disableFunction ? this.settings.disable.push(this.disableFunction) : '';\n        this.settings.wasDefaultValueChanged = false;\n        this.settings.defaultValue = '';\n        this.settings.manualInputValue = '';\n        this.settings.isManuallyOverriddenValue = false;\n        this.settings.currentValue = '';\n        this.settings.altFormat = (0, utils_1.convertFormatToFlatpickr)(this.settings.format);\n        this.settings.dateFormat = (0, utils_1.convertFormatToFlatpickr)(this.settings.dateFormat);\n        this.settings.position = 'auto center';\n        this.settings.onChange = () => {\n            if (this.settings.allowInput) {\n                if (this.settings.isManuallyOverriddenValue && this.settings.enableTime) {\n                    this.calendar._input.value = this.settings.manualInputValue;\n                }\n                else {\n                    this.settings.manualInputValue = '';\n                }\n                this.settings.isManuallyOverriddenValue = false;\n            }\n            this.emit('update');\n        };\n        this.settings.onOpen = () => this.hook('onCalendarOpen');\n        this.settings.onClose = () => {\n            this.hook('onCalendarClose');\n            this.closedOn = Date.now();\n            if (this.settings.allowInput && this.settings.enableTime) {\n                this.calendar._input.value = this.settings.manualInputValue || this.calendar._input.value;\n                this.settings.isManuallyOverriddenValue = false;\n                this.emit('update');\n            }\n            if (this.settings.wasDefaultValueChanged) {\n                this.calendar._input.value = this.settings.defaultValue;\n                this.settings.wasDefaultValueChanged = false;\n            }\n            if (this.calendar) {\n                this.emit('blur');\n            }\n        };\n        Formio_1.Formio.requireLibrary('flatpickr-css', 'flatpickr', [\n            { type: 'styles', src: `${Formio_1.Formio.cdn['flatpickr-formio']}/flatpickr.min.css` }\n        ], true);\n        if (this.component.shortcutButtons) {\n            this.component.shortcutButtons = this.component.shortcutButtons.filter((btn) => btn.label && btn.onClick);\n        }\n        if ((_a = this.component.shortcutButtons) === null || _a === void 0 ? void 0 : _a.length) {\n            Formio_1.Formio.requireLibrary('shortcut-buttons-flatpickr-css', 'ShortcutButtonsPlugin', [\n                { type: 'styles', src: `${Formio_1.Formio.cdn['shortcut-buttons-flatpickr']}/themes/light.min.css` }\n            ], true);\n        }\n        return superAttach\n            .then(() => {\n            var _a;\n            if ((_a = this.component.shortcutButtons) === null || _a === void 0 ? void 0 : _a.length) {\n                return Formio_1.Formio.requireLibrary('shortcut-buttons-flatpickr', 'ShortcutButtonsPlugin', `${Formio_1.Formio.cdn['shortcut-buttons-flatpickr']}/shortcut-buttons-flatpickr.min.js`, true);\n            }\n        })\n            .then((ShortcutButtonsPlugin) => {\n            return Formio_1.Formio.requireLibrary('flatpickr', 'flatpickr', `${Formio_1.Formio.cdn['flatpickr-formio']}/flatpickr.min.js`, true)\n                .then((Flatpickr) => {\n                var _a;\n                if (((_a = this.component.shortcutButtons) === null || _a === void 0 ? void 0 : _a.length) && ShortcutButtonsPlugin) {\n                    this.initShortcutButtonsPlugin(ShortcutButtonsPlugin);\n                }\n                this.settings.formatDate = this.getFlatpickrFormatDate(Flatpickr);\n                if (this._input) {\n                    const { locale } = this.settings;\n                    if (locale && locale.length >= 2 && locale !== 'en') {\n                        return Formio_1.Formio.requireLibrary(`flatpickr-${locale}`, `flatpickr-${locale}`, `${Formio_1.Formio.cdn['flatpickr-formio']}/l10n/flatpickr-${locale}.js`, true).then(() => this.initFlatpickr(Flatpickr));\n                    }\n                    else {\n                        this.initFlatpickr(Flatpickr);\n                    }\n                }\n            });\n        })\n            .catch((err) => {\n            console.warn(err);\n        });\n    }\n    get disableWeekends() {\n        return function (date) {\n            return (date.getDay() === 0 || date.getDay() === 6);\n        };\n    }\n    get disableWeekdays() {\n        return (date) => !this.disableWeekends(date);\n    }\n    get disableFunction() {\n        return (date) => this.evaluate(`return ${this.settings.disableFunction}`, {\n            date\n        });\n    }\n    get timezone() {\n        return this.componentInstance.getTimezone(this.settings);\n    }\n    get defaultSettings() {\n        return CalendarWidget.defaultSettings;\n    }\n    addSuffix(suffix) {\n        this.addEventListener(suffix, 'click', () => {\n            setTimeout(() => {\n                if (this.calendar) {\n                    if (!this.calendar.isOpen && ((Date.now() - this.closedOn) > 200)) {\n                        this.calendar.open();\n                    }\n                    else if (this.calendar.isOpen) {\n                        this.calendar.close();\n                    }\n                }\n            }, 0);\n        });\n        return suffix;\n    }\n    set disabled(disabled) {\n        super.disabled = disabled;\n        if (this.calendar) {\n            if (disabled) {\n                this.calendar._input.setAttribute('disabled', 'disabled');\n            }\n            else {\n                this.calendar._input.removeAttribute('disabled');\n            }\n            this.calendar.close();\n            this.calendar.redraw();\n        }\n    }\n    get input() {\n        return this.calendar ? this.calendar.altInput : null;\n    }\n    get disabledDates() {\n        if (this.settings.disabledDates) {\n            const disabledDates = this.settings.disabledDates.split(',');\n            return disabledDates.map((item) => {\n                const dateMask = /\\d{4}-\\d{2}-\\d{2}/g;\n                const dates = item.match(dateMask);\n                if (dates && dates.length) {\n                    return dates.length === 1 ? item.match(dateMask)[0] : {\n                        from: item.match(dateMask)[0],\n                        to: item.match(dateMask)[1],\n                    };\n                }\n            });\n        }\n        return [];\n    }\n    get localeFormat() {\n        let format = '';\n        if (this.settings.enableDate) {\n            format += this.defaultFormat.date;\n        }\n        if (this.settings.enableTime) {\n            format += this.defaultFormat.time;\n        }\n        return format;\n    }\n    get dateTimeFormat() {\n        return this.settings.useLocaleSettings ? this.localeFormat : (0, utils_1.convertFormatToFlatpickr)(this.dateFormat);\n    }\n    get dateFormat() {\n        return lodash_1.default.get(this.settings, 'format', DEFAULT_FORMAT);\n    }\n    /**\n     * Return the date value as a string.\n     * @param {string|Date} date - The date object or a date string that is momentjs compatible.\n     * @param {string} format - The DateParser code format.\n     * @param {boolean} [useTimezone] - If the timezone should be used.\n     * @returns {string} - Returns the formatted date string.\n     */\n    getDateValue(date, format, useTimezone) {\n        if (useTimezone) {\n            return (0, utils_1.momentDate)(date, this.valueFormat, this.timezone).format((0, utils_1.convertFormatToMoment)(format));\n        }\n        return (0, moment_1.default)(date).format((0, utils_1.convertFormatToMoment)(format));\n    }\n    /**\n     * Return the value of the selected date.\n     * @returns {*} - The value of the selected date.\n     */\n    getValue() {\n        // Standard output format.\n        if (!this.calendar) {\n            return super.getValue();\n        }\n        // Get the selected dates from the calendar widget.\n        const dates = this.calendar.selectedDates;\n        if (!dates || !dates.length) {\n            return super.getValue();\n        }\n        if (!(dates[0] instanceof Date)) {\n            return 'Invalid Date';\n        }\n        return this.getDateValue(dates[0], this.valueFormat, (this.settings.saveAs === 'date'));\n    }\n    isValueISO8601(value) {\n        return value && (typeof value === 'string') && value.match(/-[0-9]{2}T[0-9]{2}:/);\n    }\n    /**\n     * Set the selected date value.\n     * @param {*} value - The value to set.\n     * @returns {void}\n     */\n    setValue(value) {\n        const saveAsText = (this.settings.saveAs === 'text');\n        if (!this.calendar) {\n            value = value ? (0, utils_1.formatDate)(this.timezonesUrl, value, (0, utils_1.convertFormatToMoment)(this.settings.format), this.timezone, (0, utils_1.convertFormatToMoment)(this.valueMomentFormat)) : value;\n            return super.setValue(value);\n        }\n        const zonesLoading = this.loadZones();\n        if (value) {\n            if (!saveAsText && this.settings.readOnly && !zonesLoading) {\n                this.calendar.setDate((0, utils_1.momentDate)(value, this.valueFormat, this.timezone).format(), false);\n            }\n            else if (this.isValueISO8601(value)) {\n                this.calendar.setDate(value, false);\n            }\n            else {\n                this.calendar.setDate((0, moment_1.default)(value, this.valueMomentFormat).toDate(), false);\n            }\n        }\n        else {\n            this.calendar.clear(false);\n        }\n    }\n    getValueAsString(value, format = '') {\n        const inputFormat = format || this.dateFormat;\n        const valueFormat = this.calendar ? this.valueFormat : this.settings.dateFormat;\n        if (this.settings.saveAs === 'text' && this.componentInstance.parent && !this.settings.readOnly) {\n            return (0, moment_1.default)(value, (0, utils_1.convertFormatToMoment)(valueFormat)).format((0, utils_1.convertFormatToMoment)(valueFormat));\n        }\n        return (0, utils_1.formatDate)(this.timezonesUrl, value, inputFormat, this.timezone, (0, utils_1.convertFormatToMoment)(valueFormat));\n    }\n    setErrorClasses(hasErrors) {\n        if (!this.input) {\n            return;\n        }\n        if (hasErrors) {\n            this.addClass(this.input, 'is-invalid');\n            this.input.setAttribute('aria-invalid', 'true');\n        }\n        else {\n            this.removeClass(this.input, 'is-invalid');\n            this.input.setAttribute('aria-invalid', 'false');\n        }\n    }\n    get validationValue() {\n        const value = this.dataValue;\n        if (typeof value === 'string') {\n            return new Date(value);\n        }\n        return value.map(val => new Date(val));\n    }\n    isCalendarElement(element) {\n        var _a, _b, _c, _d, _e;\n        if (!element) {\n            return true;\n        }\n        if ((_c = (_b = (_a = this.calendar) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.appendTo) === null || _c === void 0 ? void 0 : _c.contains(element)) {\n            return true;\n        }\n        return (_e = (_d = this.calendar) === null || _d === void 0 ? void 0 : _d.calendarContainer) === null || _e === void 0 ? void 0 : _e.contains(element);\n    }\n    initFlatpickr(Flatpickr) {\n        // Create a new flatpickr.\n        this.calendar = new Flatpickr(this._input, Object.assign(Object.assign({}, this.settings), { disableMobile: true }));\n        this.addEventListener(this.calendar.altInput, 'input', (event) => {\n            if (this.settings.allowInput && this.settings.currentValue !== event.target.value) {\n                this.settings.manualInputValue = event.target.value;\n                this.settings.isManuallyOverriddenValue = true;\n                this.settings.currentValue = event.target.value;\n            }\n            if (event.target.value === '' && this.calendar.selectedDates.length > 0) {\n                this.settings.wasDefaultValueChanged = true;\n                this.settings.defaultValue = event.target.value;\n                this.calendar.clear();\n            }\n            else {\n                this.settings.wasDefaultValueChanged = false;\n            }\n        });\n        const excludedFromMaskFormats = ['MMMM'];\n        if (!this.settings.readOnly && !lodash_1.default.some(excludedFromMaskFormats, format => lodash_1.default.includes(this.settings.format, format))) {\n            // Enforce the input mask of the format.\n            this.setInputMask(this.calendar._input, (0, utils_1.convertFormatToMask)(this.settings.format));\n        }\n        // Fixes an issue with IE11 where value is set only after the second click\n        // TODO: Remove when the issue is solved in the flatpickr library\n        if (isIEBrowser) {\n            // Remove the original blur listener, because value will be set to empty since relatedTarget is null in IE11\n            const originalBlurListener = this.calendar._handlers.find(({ event, element }) => event === 'blur' && element === this.calendar._input);\n            this.calendar._input.removeEventListener('blur', originalBlurListener.handler);\n            // Add the same event listener as in the original library, but with workaround for IE11 issue\n            this.addEventListener(this.calendar._input, 'blur', (event) => {\n                const activeElement = this.settings.shadowRoot ? this.settings.shadowRoot.activeElement : document.activeElement;\n                const relatedTarget = event.relatedTarget ? event.relatedTarget : activeElement;\n                const isInput = event.target === this.calendar._input;\n                if (isInput && !this.isCalendarElement(relatedTarget)) {\n                    this.calendar.setDate(this.calendar._input.value, true, event.target === this.calendar.altInput\n                        ? this.calendar.config.altFormat\n                        : this.calendar.config.dateFormat);\n                }\n            });\n        }\n        // Make sure we commit the value after a blur event occurs.\n        this.addEventListener(this.calendar._input, 'blur', (event) => {\n            var _a, _b, _c, _d;\n            const activeElement = this.settings.shadowRoot ? this.settings.shadowRoot.activeElement : document.activeElement;\n            const relatedTarget = event.relatedTarget ? event.relatedTarget : activeElement;\n            if (!(isIEBrowser && !relatedTarget) && !this.isCalendarElement(relatedTarget)) {\n                const inputValue = this.calendar.input.value;\n                const dateValue = inputValue ? (0, moment_1.default)(this.calendar.input.value, (0, utils_1.convertFormatToMoment)(this.valueFormat)).toDate() : inputValue;\n                this.calendar.setDate(dateValue, true, this.settings.altFormat);\n            }\n            else if (!this.calendar.input.value && this.calendar.config.noCalendar) {\n                const value = (0, moment_1.default)({ hour: (_b = (_a = this.calendar) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.defaultHour, minute: (_d = (_c = this.calendar) === null || _c === void 0 ? void 0 : _c.config) === null || _d === void 0 ? void 0 : _d.defaultMinute }).toDate();\n                this.calendar.setDate(value, true, this.settings.format);\n            }\n        });\n        // FJS-1103: When hit the enter button, the field not saving the year correctly\n        this.addEventListener(this.calendar.altInput, 'keydown', (event) => {\n            if (event.keyCode === 13) {\n                if (this.calendar.isOpen) {\n                    this.calendar.close();\n                    event.stopPropagation();\n                }\n            }\n        });\n        // If other fields are used to calculate disabled dates, we need to redraw calendar to refresh disabled dates\n        if (this.settings.disableFunction && this.componentInstance && this.componentInstance.root) {\n            this.componentInstance.root.on('change', (e) => {\n                if (e.changed && this.calendar) {\n                    this.calendar.redraw();\n                }\n            });\n        }\n        // Restore the calendar value from the component value.\n        this.setValue(this.componentValue);\n    }\n    initShortcutButtonsPlugin(ShortcutButtonsPlugin) {\n        this.settings.plugins = [\n            // eslint-disable-next-line new-cap\n            ShortcutButtonsPlugin({\n                button: this.component.shortcutButtons.map((btn) => ({ label: btn.label, attributes: btn.attribute })),\n                onClick: (index) => {\n                    const getValue = this.component.shortcutButtons[index].onClick;\n                    const date = this.evaluate(getValue, { date: new Date() }, 'date');\n                    this.calendar.setDate(date, true);\n                }\n            })\n        ];\n    }\n    get componentValue() {\n        let compValue = this.componentInstance.dataValue;\n        if (Array.isArray(compValue)) {\n            compValue = compValue[this.valueIndex];\n        }\n        return compValue;\n    }\n    getFlatpickrFormatDate(Flatpickr) {\n        return (date, format) => {\n            // Only format this if this is the altFormat and the form is readOnly.\n            if (this.settings.readOnly && (format === this.settings.altFormat)) {\n                if (!this.settings.enableTime || this.loadZones()) {\n                    return Flatpickr.formatDate(date, format);\n                }\n                const currentValue = new Date(this.getValue());\n                if (currentValue.toString() === date.toString()) {\n                    return (0, utils_1.formatOffset)(this.timezonesUrl, Flatpickr.formatDate.bind(Flatpickr), new Date(this.componentValue), format, this.timezone);\n                }\n                return (0, utils_1.formatOffset)(this.timezonesUrl, Flatpickr.formatDate.bind(Flatpickr), date, format, this.timezone);\n            }\n            return Flatpickr.formatDate(date, format);\n        };\n    }\n    destroy(all = false) {\n        if (this.calendar) {\n            this.calendar.destroy();\n        }\n        super.destroy(all);\n    }\n}\nexports[\"default\"] = CalendarWidget;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/widgets/CalendarWidget.js?");
 
 /***/ }),
 
@@ -6622,7 +6622,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
   \******************************************************************************************/
 /***/ (function(__unused_webpack_module, exports) {
 
-eval("Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports[\"default\"]=function(ctx) {\nvar __t, __p = '', __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n__p += '<table class=\"table datagrid-table table-bordered\\n    ' +\n((__t = ( ctx.component.striped ? 'table-striped' : '')) == null ? '' : __t) +\n'\\n    ' +\n((__t = ( ctx.component.hover ? 'table-hover' : '')) == null ? '' : __t) +\n'\\n    ' +\n((__t = ( ctx.component.condensed ? 'table-sm' : '')) == null ? '' : __t) +\n'\\n    \" ';\n if (ctx.component.layoutFixed || ctx.readOnly) { ;\n__p += 'style=\"table-layout: fixed;\"';\n } ;\n__p += '>\\n  ';\n if (ctx.hasHeader) { ;\n__p += '\\n  <thead>\\n    <tr>\\n      ';\n if (ctx.component.reorder) { ;\n__p += '<th></th>';\n } ;\n__p += '\\n      ';\n ctx.columns.forEach(function(col) { ;\n__p += '\\n        <th class=\"' +\n((__t = (col.validate && col.validate.required ? 'field-required' : '')) == null ? '' : __t) +\n'\">\\n          ' +\n((__t = ( col.hideLabel ? '' : ctx.t(col.label || col.title, { _userInput: true }) )) == null ? '' : __t) +\n'\\n          ';\n if (col.tooltip) { ;\n__p += ' <i ref=\"tooltip\" tabindex=\"0\" data-title=\"' +\n((__t = (col.tooltip)) == null ? '' : __t) +\n'\" class=\"' +\n((__t = (ctx.iconClass('question-sign'))) == null ? '' : __t) +\n' text-muted\" data-tooltip=\"' +\n((__t = (col.tooltip)) == null ? '' : __t) +\n'\"></i>';\n } ;\n__p += '\\n        </th>\\n      ';\n }) ;\n__p += '\\n      ';\n if (ctx.hasExtraColumn) { ;\n__p += '\\n      <th>\\n        <span class=\"visually-hidden\">' +\n((__t = ( ctx.t('Add/Remove') )) == null ? '' : __t) +\n'</span>\\n        ';\n if (!ctx.builder && ctx.hasAddButton && ctx.hasTopSubmit) { ;\n__p += '\\n        <button class=\"btn btn-primary formio-button-add-row\" ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-addRow\" tabindex=\"' +\n((__t = (ctx.tabIndex)) == null ? '' : __t) +\n'\">\\n          <i class=\"' +\n((__t = (ctx.iconClass('plus'))) == null ? '' : __t) +\n'\"></i>' +\n((__t = (ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true }))) == null ? '' : __t) +\n'\\n        </button>\\n        ';\n } ;\n__p += '\\n      </th>\\n      ';\n } ;\n__p += '\\n    </tr>\\n  </thead>\\n  ';\n } ;\n__p += '\\n  <tbody ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-tbody\" data-key=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'\">\\n    ';\n ctx.rows.forEach(function(row, index) { ;\n__p += '\\n    ';\n if (ctx.hasGroups && ctx.groups[index]) { ;\n__p += '\\n    <tr ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-group-header\" class=\"datagrid-group-header' +\n((__t = (ctx.hasToggle ? ' clickable' : '')) == null ? '' : __t) +\n'\">\\n      <td\\n        ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-group-label\"\\n        colspan=\"' +\n((__t = (ctx.numColumns)) == null ? '' : __t) +\n'\"\\n        class=\"datagrid-group-label\">' +\n((__t = (ctx.groups[index].label)) == null ? '' : __t) +\n'</td>\\n    </tr>\\n    ';\n } ;\n__p += '\\n    <tr ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-row\">\\n      ';\n if (ctx.component.reorder) { ;\n__p += '\\n        <td class=\"col-1\">\\n          <button type=\"button\" class=\"formio-drag-button btn btn-default bi bi-list\" data-key=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'\"></button>\\n        </td>\\n      ';\n } ;\n__p += '\\n      ';\n ctx.columns.forEach(function(col) { ;\n__p += '\\n        <td ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'\" ';\n if (col.key && col.overlay && col.overlay.width) { ;\n__p += ' style=\"width: ' +\n((__t = (col.overlay.width + 'px')) == null ? '' : __t) +\n'\"';\n } ;\n__p += ' >\\n          ' +\n((__t = (row[col.key])) == null ? '' : __t) +\n'\\n        </td>\\n      ';\n }) ;\n__p += '\\n      ';\n if (ctx.hasExtraColumn) { ;\n__p += '\\n        ';\n if (ctx.hasRemoveButtons) { ;\n__p += '\\n        <td class=\"col-1\">\\n          <button type=\"button\" class=\"btn btn-secondary formio-button-remove-row\" ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-removeRow\" tabindex=\"' +\n((__t = (ctx.tabIndex)) == null ? '' : __t) +\n'\" aria-label=\"' +\n((__t = (ctx.t('remove'))) == null ? '' : __t) +\n'\">\\n            <i class=\"' +\n((__t = (ctx.iconClass('remove-circle'))) == null ? '' : __t) +\n'\"></i>\\n          </button>\\n        </td>\\n        ';\n } ;\n__p += '\\n        ';\n if (ctx.canAddColumn) { ;\n__p += '\\n        <td ref=\"' +\n((__t = (ctx.key)) == null ? '' : __t) +\n'-container\" class=\"col-md-3\">\\n          ' +\n((__t = (ctx.placeholder)) == null ? '' : __t) +\n'\\n        </td>\\n        ';\n } ;\n__p += '\\n      ';\n } ;\n__p += '\\n    </tr>\\n    ';\n }) ;\n__p += '\\n  </tbody>\\n  ';\n if (!ctx.builder && ctx.hasAddButton && ctx.hasBottomSubmit) { ;\n__p += '\\n  <tfoot>\\n    <tr>\\n      <td colspan=\"' +\n((__t = (ctx.component.layoutFixed ? ctx.numColumns :  ctx.numColumns + 1)) == null ? '' : __t) +\n'\">\\n        <button class=\"btn btn-primary formio-button-add-row\" ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-addRow\" tabindex=\"' +\n((__t = (ctx.tabIndex)) == null ? '' : __t) +\n'\">\\n          <i class=\"' +\n((__t = (ctx.iconClass('plus'))) == null ? '' : __t) +\n'\"></i> ' +\n((__t = (ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true }))) == null ? '' : __t) +\n'\\n        </button>\\n      </td>\\n    </tr>\\n  </tfoot>\\n  ';\n } ;\n__p += '\\n</table>\\n';\nreturn __p\n}\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/bootstrap/lib/cjs/templates/bootstrap5/datagrid/form.ejs.js?");
+eval("Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports[\"default\"]=function(ctx) {\nvar __t, __p = '', __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n__p += '<table class=\"table datagrid-table table-bordered\\n    ' +\n((__t = ( ctx.component.striped ? 'table-striped' : '')) == null ? '' : __t) +\n'\\n    ' +\n((__t = ( ctx.component.hover ? 'table-hover' : '')) == null ? '' : __t) +\n'\\n    ' +\n((__t = ( ctx.component.condensed ? 'table-sm' : '')) == null ? '' : __t) +\n'\\n    \" ';\n if (ctx.component.layoutFixed || ctx.readOnly) { ;\n__p += 'style=\"table-layout: fixed;\"';\n } ;\n__p += '>\\n  ';\n if (ctx.hasHeader) { ;\n__p += '\\n  <thead>\\n    <tr>\\n      ';\n if (ctx.component.reorder) { ;\n__p += '<th></th>';\n } ;\n__p += '\\n      ';\n ctx.columns.forEach(function(col) { ;\n__p += '\\n        <th class=\"' +\n((__t = (col.validate && col.validate.required ? 'field-required' : '')) == null ? '' : __t) +\n'\">\\n          ' +\n((__t = ( col.hideLabel ? '' : ctx.t(col.label || col.title, { _userInput: true }) )) == null ? '' : __t) +\n'\\n          ';\n if (col.tooltip) { ;\n__p += ' <i ref=\"tooltip\" tabindex=\"0\" data-title=\"' +\n((__t = (col.tooltip)) == null ? '' : __t) +\n'\" class=\"' +\n((__t = (ctx.iconClass('question-sign'))) == null ? '' : __t) +\n' text-muted\" data-tooltip=\"' +\n((__t = (col.tooltip)) == null ? '' : __t) +\n'\"></i>';\n } ;\n__p += '\\n        </th>\\n      ';\n }) ;\n__p += '\\n      ';\n if (ctx.hasExtraColumn) { ;\n__p += '\\n      <th>\\n        <span class=\"visually-hidden\">' +\n((__t = ( ctx.t('Add/Remove') )) == null ? '' : __t) +\n'</span>\\n        ';\n if (!ctx.builder && ctx.hasAddButton && ctx.hasTopSubmit) { ;\n__p += '\\n        <button class=\"btn btn-primary formio-button-add-row\" ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-addRow\" tabindex=\"' +\n((__t = (ctx.tabIndex)) == null ? '' : __t) +\n'\">\\n          <i class=\"' +\n((__t = (ctx.iconClass('plus'))) == null ? '' : __t) +\n'\"></i>' +\n((__t = (ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true }))) == null ? '' : __t) +\n'\\n        </button>\\n        ';\n } ;\n__p += '\\n      </th>\\n      ';\n } ;\n__p += '\\n    </tr>\\n  </thead>\\n  ';\n } ;\n__p += '\\n  <tbody ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-tbody\" data-key=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'\">\\n    ';\n ctx.rows.forEach(function(row, index) { ;\n__p += '\\n    ';\n if (ctx.hasGroups && ctx.groups[index]) { ;\n__p += '\\n    <tr ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-group-header\" class=\"datagrid-group-header' +\n((__t = (ctx.hasToggle ? ' clickable' : '')) == null ? '' : __t) +\n'\">\\n      <td\\n        ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-group-label\"\\n        colspan=\"' +\n((__t = (ctx.numColumns)) == null ? '' : __t) +\n'\"\\n        class=\"datagrid-group-label\">' +\n((__t = (ctx.groups[index].label)) == null ? '' : __t) +\n'</td>\\n    </tr>\\n    ';\n } ;\n__p += '\\n    <tr ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-row\">\\n      ';\n if (ctx.component.reorder) { ;\n__p += '\\n        <td>\\n          <button type=\"button\" class=\"formio-drag-button btn btn-default bi bi-list\" data-key=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'\" style=\"display: block; margin: 0 auto\"></button>\\n        </td>\\n      ';\n } ;\n__p += '\\n      ';\n ctx.columns.forEach(function(col) { ;\n__p += '\\n        <td ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'\" ';\n if (col.key && col.overlay && col.overlay.width) { ;\n__p += ' style=\"width: ' +\n((__t = (col.overlay.width + 'px')) == null ? '' : __t) +\n'\"';\n } ;\n__p += ' >\\n          ' +\n((__t = (row[col.key])) == null ? '' : __t) +\n'\\n        </td>\\n      ';\n }) ;\n__p += '\\n      ';\n if (ctx.hasExtraColumn) { ;\n__p += '\\n        ';\n if (ctx.hasRemoveButtons) { ;\n__p += '\\n        <td>\\n          <button type=\"button\" class=\"btn btn-secondary formio-button-remove-row\" ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-removeRow\" tabindex=\"' +\n((__t = (ctx.tabIndex)) == null ? '' : __t) +\n'\" aria-label=\"' +\n((__t = (ctx.t('remove'))) == null ? '' : __t) +\n'\" style=\"display: block; margin: 0 auto\">\\n            <i class=\"' +\n((__t = (ctx.iconClass('remove-circle'))) == null ? '' : __t) +\n'\"></i>\\n          </button>\\n        </td>\\n        ';\n } ;\n__p += '\\n        ';\n if (ctx.canAddColumn) { ;\n__p += '\\n        <td ref=\"' +\n((__t = (ctx.key)) == null ? '' : __t) +\n'-container\" class=\"col-md-3\">\\n          ' +\n((__t = (ctx.placeholder)) == null ? '' : __t) +\n'\\n        </td>\\n        ';\n } ;\n__p += '\\n      ';\n } ;\n__p += '\\n    </tr>\\n    ';\n }) ;\n__p += '\\n  </tbody>\\n  ';\n if (!ctx.builder && ctx.hasAddButton && ctx.hasBottomSubmit) { ;\n__p += '\\n  <tfoot>\\n    <tr>\\n      <td colspan=\"' +\n((__t = (ctx.component.layoutFixed ? ctx.numColumns :  ctx.numColumns + 1)) == null ? '' : __t) +\n'\">\\n        <button class=\"btn btn-primary formio-button-add-row\" ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-addRow\" tabindex=\"' +\n((__t = (ctx.tabIndex)) == null ? '' : __t) +\n'\">\\n          <i class=\"' +\n((__t = (ctx.iconClass('plus'))) == null ? '' : __t) +\n'\"></i> ' +\n((__t = (ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true }))) == null ? '' : __t) +\n'\\n        </button>\\n      </td>\\n    </tr>\\n  </tfoot>\\n  ';\n } ;\n__p += '\\n</table>\\n';\nreturn __p\n}\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/bootstrap/lib/cjs/templates/bootstrap5/datagrid/form.ejs.js?");
 
 /***/ }),
 
@@ -6851,7 +6851,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\ncons
   \**************************************************************************************/
 /***/ (function(__unused_webpack_module, exports) {
 
-eval("Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports[\"default\"]=function(ctx) {\nvar __t, __p = '', __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n__p += '<' +\n((__t = (ctx.tag)) == null ? '' : __t) +\n' class=\"formio-component-htmlelement ' +\n((__t = ( ctx.component.className )) == null ? '' : __t) +\n'\" ref=\"html\"\\n  ';\n ctx.attrs.forEach(function(attr) { ;\n__p += '\\n    ' +\n((__t = (attr.attr)) == null ? '' : __t) +\n'=\"' +\n((__t = (attr.value)) == null ? '' : __t) +\n'\"\\n  ';\n }) ;\n__p += '\\n>' +\n((__t = (ctx.t(ctx.content))) == null ? '' : __t);\n if (!ctx.singleTags || ctx.singleTags.indexOf(ctx.tag) === -1) { ;\n__p += '</' +\n((__t = (ctx.tag)) == null ? '' : __t) +\n'>';\n } ;\n__p += '\\n';\nreturn __p\n}\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/bootstrap/lib/cjs/templates/bootstrap5/html/form.ejs.js?");
+eval("Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports[\"default\"]=function(ctx) {\nvar __t, __p = '', __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n__p += '<' +\n((__t = (ctx.tag)) == null ? '' : __t) +\n' class=\"formio-component-htmlelement ' +\n((__t = ( ctx.component.className )) == null ? '' : __t) +\n'\" ref=\"html\"\\n  ';\n ctx.attrs.forEach(function(attr) { ;\n__p += '\\n    ' +\n((__t = (attr.attr)) == null ? '' : __t) +\n'=\"' +\n((__t = (attr.value)) == null ? '' : __t) +\n'\"\\n  ';\n }) ;\n__p += '\\n>' +\n((__t = ( ctx.builder ? ctx.content : ctx.t(ctx.content) )) == null ? '' : __t);\n if (!ctx.singleTags || ctx.singleTags.indexOf(ctx.tag) === -1) { ;\n__p += '</' +\n((__t = (ctx.tag)) == null ? '' : __t) +\n'>';\n } ;\n__p += '\\n';\nreturn __p\n}\n\n//# sourceURL=webpack://Formio/./node_modules/@formio/bootstrap/lib/cjs/templates/bootstrap5/html/form.ejs.js?");
 
 /***/ }),
 
@@ -8905,7 +8905,7 @@ eval("\nvar parent = __webpack_require__(/*! ../../es/object/from-entries */ \".
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nvar _a;\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.FormBuilder = exports.Form = exports.Formio = void 0;\nconst CDN_js_1 = __importDefault(__webpack_require__(/*! ./CDN.js */ \"./lib/cjs/CDN.js\"));\nclass Formio {\n    static setLicense(license, norecurse = false) {\n        _a.license = license;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setLicense(license);\n        }\n    }\n    static setBaseUrl(url, norecurse = false) {\n        _a.baseUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setBaseUrl(url);\n        }\n    }\n    static setApiUrl(url, norecurse = false) {\n        _a.baseUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setApiUrl(url);\n        }\n    }\n    static setProjectUrl(url, norecurse = false) {\n        _a.projectUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setProjectUrl(url);\n        }\n    }\n    static setAppUrl(url, norecurse = false) {\n        _a.projectUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setAppUrl(url);\n        }\n    }\n    static setPathType(type, norecurse = false) {\n        _a.pathType = type;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setPathType(type);\n        }\n    }\n    static debug(...args) {\n        if (_a.config.debug) {\n            console.log(...args);\n        }\n    }\n    static clearCache() {\n        if (_a.FormioClass) {\n            _a.FormioClass.clearCache();\n        }\n    }\n    static global(prop, flag = '') {\n        const globalValue = window[prop];\n        if (flag && globalValue && !globalValue[flag]) {\n            return null;\n        }\n        _a.debug(`Getting global ${prop}`, globalValue);\n        return globalValue;\n    }\n    static use(module) {\n        if (_a.FormioClass && _a.FormioClass.isRenderer) {\n            _a.FormioClass.use(module);\n        }\n        else {\n            _a.modules.push(module);\n        }\n    }\n    static createElement(type, attrs, children) {\n        const element = document.createElement(type);\n        if (!attrs) {\n            return element;\n        }\n        Object.keys(attrs).forEach(key => {\n            element.setAttribute(key, attrs[key]);\n        });\n        (children || []).forEach(child => {\n            element.appendChild(_a.createElement(child.tag, child.attrs, child.children));\n        });\n        return element;\n    }\n    static addScript(wrapper, src, name, flag = '') {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!src) {\n                return Promise.resolve();\n            }\n            if (typeof src !== 'string' && src.length) {\n                return Promise.all(src.map(ref => _a.addScript(wrapper, ref)));\n            }\n            if (name && _a.global(name, flag)) {\n                _a.debug(`${name} already loaded.`);\n                return Promise.resolve(_a.global(name));\n            }\n            _a.debug('Adding Script', src);\n            try {\n                wrapper.appendChild(_a.createElement('script', {\n                    src\n                }));\n            }\n            catch (err) {\n                _a.debug(err);\n                return Promise.resolve();\n            }\n            if (!name) {\n                return Promise.resolve();\n            }\n            return new Promise((resolve) => {\n                _a.debug(`Waiting to load ${name}`);\n                const wait = setInterval(() => {\n                    if (_a.global(name, flag)) {\n                        clearInterval(wait);\n                        _a.debug(`${name} loaded.`);\n                        resolve(_a.global(name));\n                    }\n                }, 100);\n            });\n        });\n    }\n    static addStyles(wrapper, href) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!href) {\n                return;\n            }\n            if (typeof href !== 'string' && href.length) {\n                href.forEach(ref => _a.addStyles(wrapper, ref));\n                return;\n            }\n            _a.debug('Adding Styles', href);\n            wrapper.appendChild(_a.createElement('link', {\n                rel: 'stylesheet',\n                href\n            }));\n        });\n    }\n    static submitDone(instance, submission) {\n        return __awaiter(this, void 0, void 0, function* () {\n            _a.debug('Submision Complete', submission);\n            if (_a.config.submitDone) {\n                _a.config.submitDone(submission, instance);\n            }\n            const successMessage = (_a.config.success || '').toString();\n            if (successMessage && successMessage.toLowerCase() !== 'false' && instance.element) {\n                instance.element.innerHTML = `<div class=\"alert-success\" role=\"alert\">${successMessage}</div>`;\n            }\n            let returnUrl = _a.config.redirect;\n            // Allow form based configuration for return url.\n            if (!returnUrl &&\n                (instance._form &&\n                    instance._form.settings &&\n                    (instance._form.settings.returnUrl ||\n                        instance._form.settings.redirect))) {\n                _a.debug('Return url found in form configuration');\n                returnUrl = instance._form.settings.returnUrl || instance._form.settings.redirect;\n            }\n            if (returnUrl) {\n                const formSrc = instance.formio ? instance.formio.formUrl : '';\n                const hasQuery = !!returnUrl.match(/\\?/);\n                const isOrigin = returnUrl.indexOf(location.origin) === 0;\n                returnUrl += hasQuery ? '&' : '?';\n                returnUrl += `sub=${submission._id}`;\n                if (!isOrigin && formSrc) {\n                    returnUrl += `&form=${encodeURIComponent(formSrc)}`;\n                }\n                _a.debug('Return URL', returnUrl);\n                window.location.href = returnUrl;\n                if (isOrigin) {\n                    window.location.reload();\n                }\n            }\n        });\n    }\n    // Return the full script if the builder is being used.\n    static formioScript(script, builder) {\n        builder = builder || _a.config.includeBuilder;\n        if (_a.fullAdded || builder) {\n            _a.fullAdded = true;\n            return script.replace('formio.form', 'formio.full');\n        }\n        return script;\n    }\n    static addLibrary(libWrapper, lib, name) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!lib) {\n                return;\n            }\n            if (lib.dependencies) {\n                for (let i = 0; i < lib.dependencies.length; i++) {\n                    const libName = lib.dependencies[i];\n                    yield _a.addLibrary(libWrapper, _a.config.libs[libName], libName);\n                }\n            }\n            if (lib.css) {\n                yield _a.addStyles((lib.global ? document.body : libWrapper), lib.css);\n            }\n            if (lib.js) {\n                const module = yield _a.addScript((lib.global ? document.body : libWrapper), lib.js, lib.use ? name : false);\n                if (lib.use) {\n                    _a.debug(`Using ${name}`);\n                    const options = lib.options || {};\n                    if (!options.license && _a.license) {\n                        options.license = _a.license;\n                    }\n                    _a.use((typeof lib.use === 'function' ? lib.use(module) : module), options);\n                }\n            }\n            if (lib.globalStyle) {\n                const style = _a.createElement('style');\n                style.type = 'text/css';\n                style.innerHTML = lib.globalStyle;\n                document.body.appendChild(style);\n            }\n        });\n    }\n    static addLoader(wrapper) {\n        return __awaiter(this, void 0, void 0, function* () {\n            wrapper.appendChild(_a.createElement('div', {\n                'class': 'formio-loader'\n            }, [{\n                    tag: 'div',\n                    attrs: {\n                        class: 'loader-wrapper'\n                    },\n                    children: [{\n                            tag: 'div',\n                            attrs: {\n                                class: 'loader text-center'\n                            }\n                        }]\n                }]));\n        });\n    }\n    // eslint-disable-next-line max-statements\n    static init(element, options = {}, builder = false) {\n        return __awaiter(this, void 0, void 0, function* () {\n            _a.cdn = new CDN_js_1.default(_a.config.cdn, _a.config.cdnUrls || {});\n            _a.config.libs = _a.config.libs || {\n                uswds: {\n                    dependencies: ['fontawesome'],\n                    js: `${_a.cdn.uswds}/uswds.min.js`,\n                    css: `${_a.cdn.uswds}/uswds.min.css`,\n                    use: true\n                },\n                fontawesome: {\n                    // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need\n                    // to do 2 things. 1.) Load the fonts from the global cdn, and 2.) add the font-face to the global styles on the page.\n                    css: `https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css`,\n                    globalStyle: `@font-face {\n                    font-family: 'FontAwesome';\n                    src: url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');\n                    src: url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');\n                    font-weight: normal;\n                    font-style: normal;\n                  }`\n                },\n                bootstrap4: {\n                    dependencies: ['fontawesome'],\n                    css: `${_a.cdn.bootstrap4}/css/bootstrap.min.css`\n                },\n                bootstrap: {\n                    dependencies: ['bootstrap-icons'],\n                    css: `${_a.cdn.bootstrap}/css/bootstrap.min.css`\n                },\n                'bootstrap-icons': {\n                    // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need\n                    // to do 2 things. 1.) Load the fonts from the global cdn, and 2.) add the font-face to the global styles on the page.\n                    css: 'https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.min.css',\n                    globalStyle: `@font-face {\n                    font-display: block;\n                    font-family: \"bootstrap-icons\";\n                    src: url(\"https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6\") format(\"woff2\"),\n                         url(\"https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6\") format(\"woff\");\n                }`\n                }\n            };\n            // Add all bootswatch templates.\n            ['cerulean', 'cosmo', 'cyborg', 'darkly', 'flatly', 'journal', 'litera', 'lumen', 'lux', 'materia', 'minty', 'pulse', 'sandstone', 'simplex', 'sketchy', 'slate', 'solar', 'spacelab', 'superhero', 'united', 'yeti'].forEach((template) => {\n                _a.config.libs[template] = {\n                    dependencies: ['bootstrap-icons'],\n                    css: `${_a.cdn.bootswatch}/dist/${template}/bootstrap.min.css`\n                };\n            });\n            const id = _a.config.id || `formio-${Math.random().toString(36).substring(7)}`;\n            // Create a new wrapper and add the element inside of a new wrapper.\n            let wrapper = _a.createElement('div', {\n                'id': `${id}-wrapper`\n            });\n            element.parentNode.insertBefore(wrapper, element);\n            // If we include the libraries, then we will attempt to run this in shadow dom.\n            const useShadowDom = _a.config.includeLibs && !_a.config.noshadow && (typeof wrapper.attachShadow === 'function');\n            if (useShadowDom) {\n                wrapper = wrapper.attachShadow({\n                    mode: 'open'\n                });\n                options.shadowRoot = wrapper;\n            }\n            element.parentNode.removeChild(element);\n            wrapper.appendChild(element);\n            // If this is inside of shadow dom, then we need to add the styles and scripts to the shadow dom.\n            const libWrapper = useShadowDom ? wrapper : document.body;\n            // Load the renderer styles.\n            yield _a.addStyles(libWrapper, _a.config.embedCSS || `${_a.cdn.js}/formio.embed.css`);\n            // Add a loader.\n            _a.addLoader(wrapper);\n            const formioSrc = _a.config.full ? 'formio.full' : 'formio.form';\n            const renderer = _a.config.debug ? formioSrc : `${formioSrc}.min`;\n            _a.FormioClass = yield _a.addScript(libWrapper, _a.formioScript(_a.config.script || `${_a.cdn.js}/${renderer}.js`, builder), 'Formio', builder ? 'isBuilder' : 'isRenderer');\n            _a.FormioClass.cdn = _a.cdn;\n            _a.FormioClass.setBaseUrl(options.baseUrl || _a.baseUrl || _a.config.base);\n            _a.FormioClass.setProjectUrl(options.projectUrl || _a.projectUrl || _a.config.project);\n            _a.FormioClass.language = _a.language;\n            _a.setLicense(_a.license || _a.config.license || false);\n            _a.modules.forEach((module) => {\n                _a.FormioClass.use(module);\n            });\n            if (_a.icons) {\n                _a.FormioClass.icons = _a.icons;\n            }\n            if (_a.pathType) {\n                _a.FormioClass.setPathType(_a.pathType);\n            }\n            // Add libraries if they wish to include the libs.\n            if (_a.config.template && _a.config.includeLibs) {\n                yield _a.addLibrary(libWrapper, _a.config.libs[_a.config.template], _a.config.template);\n            }\n            if (!_a.config.libraries) {\n                _a.config.libraries = _a.config.modules || {};\n            }\n            // Adding premium if it is provided via the config.\n            if (_a.config.premium) {\n                _a.config.libraries.premium = _a.config.premium;\n            }\n            // Allow adding dynamic modules.\n            if (_a.config.libraries) {\n                for (const name in _a.config.libraries) {\n                    const lib = _a.config.libraries[name];\n                    lib.use = lib.use || true;\n                    yield _a.addLibrary(libWrapper, lib, name);\n                }\n            }\n            yield _a.addStyles(libWrapper, _a.formioScript(_a.config.style || `${_a.cdn.js}/${renderer}.css`, builder));\n            if (_a.config.before) {\n                yield _a.config.before(_a.FormioClass, element, _a.config);\n            }\n            _a.FormioClass.license = true;\n            _a._formioReady(_a.FormioClass);\n            return wrapper;\n        });\n    }\n    // Called after an instance has been created.\n    static afterCreate(instance, wrapper, readyEvent) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const loader = wrapper.querySelector('.formio-loader');\n            if (loader) {\n                wrapper.removeChild(loader);\n            }\n            _a.FormioClass.events.emit(readyEvent, instance);\n            if (_a.config.after) {\n                _a.debug('Calling ready callback');\n                _a.config.after(instance, _a.config);\n            }\n            return instance;\n        });\n    }\n    // Create a new form.\n    static createForm(element, form, options = {}) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (_a.FormioClass) {\n                return _a.FormioClass.createForm(element, form, Object.assign(Object.assign({}, options), { noLoader: true }));\n            }\n            const wrapper = yield _a.init(element, options);\n            return _a.FormioClass.createForm(element, form, Object.assign(Object.assign({}, options), { noLoader: true })).then((instance) => {\n                // Set the default submission data.\n                if (_a.config.submission) {\n                    _a.debug('Setting submission', _a.config.submission);\n                    instance.submission = _a.config.submission;\n                }\n                // Call the after create method.\n                _a.afterCreate(instance, wrapper, 'formEmbedded');\n                return instance;\n            });\n        });\n    }\n    // Create a form builder.\n    static builder(element, form, options = {}) {\n        var _b;\n        return __awaiter(this, void 0, void 0, function* () {\n            if ((_b = _a.FormioClass) === null || _b === void 0 ? void 0 : _b.builder) {\n                return _a.FormioClass.builder(element, form, options);\n            }\n            const wrapper = yield _a.init(element, options, true);\n            return _a.FormioClass.builder(element, form, options).then((instance) => {\n                _a.afterCreate(instance, wrapper, 'builderEmbedded');\n                return instance;\n            });\n        });\n    }\n}\nexports.Formio = Formio;\n_a = Formio;\nFormio.FormioClass = null;\nFormio.config = {};\nFormio.modules = [];\nFormio.icons = '';\nFormio.license = '';\nFormio.formioReady = new Promise((ready, reject) => {\n    _a._formioReady = ready;\n    _a._formioReadyReject = reject;\n});\nFormio.version = '5.2.0';\n// Create a report.\nFormio.Report = {\n    create: (element, submission, options = {}) => __awaiter(void 0, void 0, void 0, function* () {\n        var _b;\n        if ((_b = _a.FormioClass) === null || _b === void 0 ? void 0 : _b.Report) {\n            return _a.FormioClass.Report.create(element, submission, options);\n        }\n        const wrapper = yield _a.init(element, options, true);\n        return _a.FormioClass.Report.create(element, submission, options).then((instance) => {\n            _a.afterCreate(instance, wrapper, 'reportEmbedded');\n            return instance;\n        });\n    })\n};\nCDN_js_1.default.defaultCDN = Formio.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';\nclass Form {\n    constructor(element, form, options) {\n        this.form = form;\n        this.element = element;\n        this.options = options || {};\n        this.init();\n        this.instance = {\n            proxy: true,\n            ready: this.ready,\n            destroy: () => { }\n        };\n    }\n    init() {\n        if (this.instance && !this.instance.proxy) {\n            this.instance.destroy();\n        }\n        this.element.innerHTML = '';\n        this.ready = this.create().then((instance) => {\n            this.instance = instance;\n            this.form = instance.form;\n            return instance;\n        });\n    }\n    create() {\n        return Formio.createForm(this.element, this.form, this.options);\n    }\n    setForm(form) {\n        this.form = form;\n        if (this.instance) {\n            this.instance.setForm(form);\n        }\n    }\n    setDisplay(display) {\n        if (this.instance.proxy) {\n            return this.ready;\n        }\n        this.form.display = display;\n        this.instance.destroy();\n        this.ready = this.create().then((instance) => {\n            this.instance = instance;\n            this.setForm(this.form);\n        });\n        return this.ready;\n    }\n}\nexports.Form = Form;\nclass FormBuilder extends Form {\n    create() {\n        return Formio.builder(this.element, this.form, this.options);\n    }\n}\nexports.FormBuilder = FormBuilder;\nFormio.Form = Form;\nFormio.FormBuilder = FormBuilder;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Embed.js?");
+eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nvar _a;\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.FormBuilder = exports.Form = exports.Formio = void 0;\nconst CDN_js_1 = __importDefault(__webpack_require__(/*! ./CDN.js */ \"./lib/cjs/CDN.js\"));\nclass Formio {\n    static setLicense(license, norecurse = false) {\n        _a.license = license;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setLicense(license);\n        }\n    }\n    static setBaseUrl(url, norecurse = false) {\n        _a.baseUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setBaseUrl(url);\n        }\n    }\n    static setApiUrl(url, norecurse = false) {\n        _a.baseUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setApiUrl(url);\n        }\n    }\n    static setProjectUrl(url, norecurse = false) {\n        _a.projectUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setProjectUrl(url);\n        }\n    }\n    static setAppUrl(url, norecurse = false) {\n        _a.projectUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setAppUrl(url);\n        }\n    }\n    static setPathType(type, norecurse = false) {\n        _a.pathType = type;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setPathType(type);\n        }\n    }\n    static debug(...args) {\n        if (_a.config.debug) {\n            console.log(...args);\n        }\n    }\n    static clearCache() {\n        if (_a.FormioClass) {\n            _a.FormioClass.clearCache();\n        }\n    }\n    static global(prop, flag = '') {\n        const globalValue = window[prop];\n        if (flag && globalValue && !globalValue[flag]) {\n            return null;\n        }\n        _a.debug(`Getting global ${prop}`, globalValue);\n        return globalValue;\n    }\n    static use(module) {\n        if (_a.FormioClass && _a.FormioClass.isRenderer) {\n            _a.FormioClass.use(module);\n        }\n        else {\n            _a.modules.push(module);\n        }\n    }\n    static createElement(type, attrs, children) {\n        const element = document.createElement(type);\n        if (!attrs) {\n            return element;\n        }\n        Object.keys(attrs).forEach(key => {\n            element.setAttribute(key, attrs[key]);\n        });\n        (children || []).forEach(child => {\n            element.appendChild(_a.createElement(child.tag, child.attrs, child.children));\n        });\n        return element;\n    }\n    static addScript(wrapper, src, name, flag = '') {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!src) {\n                return Promise.resolve();\n            }\n            if (typeof src !== 'string' && src.length) {\n                return Promise.all(src.map(ref => _a.addScript(wrapper, ref)));\n            }\n            if (name && _a.global(name, flag)) {\n                _a.debug(`${name} already loaded.`);\n                return Promise.resolve(_a.global(name));\n            }\n            _a.debug('Adding Script', src);\n            try {\n                wrapper.appendChild(_a.createElement('script', {\n                    src\n                }));\n            }\n            catch (err) {\n                _a.debug(err);\n                return Promise.resolve();\n            }\n            if (!name) {\n                return Promise.resolve();\n            }\n            return new Promise((resolve) => {\n                _a.debug(`Waiting to load ${name}`);\n                const wait = setInterval(() => {\n                    if (_a.global(name, flag)) {\n                        clearInterval(wait);\n                        _a.debug(`${name} loaded.`);\n                        resolve(_a.global(name));\n                    }\n                }, 100);\n            });\n        });\n    }\n    static addStyles(wrapper, href) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!href) {\n                return;\n            }\n            if (typeof href !== 'string' && href.length) {\n                href.forEach(ref => _a.addStyles(wrapper, ref));\n                return;\n            }\n            _a.debug('Adding Styles', href);\n            wrapper.appendChild(_a.createElement('link', {\n                rel: 'stylesheet',\n                href\n            }));\n        });\n    }\n    static submitDone(instance, submission) {\n        return __awaiter(this, void 0, void 0, function* () {\n            _a.debug('Submision Complete', submission);\n            if (_a.config.submitDone) {\n                _a.config.submitDone(submission, instance);\n            }\n            const successMessage = (_a.config.success || '').toString();\n            if (successMessage && successMessage.toLowerCase() !== 'false' && instance.element) {\n                instance.element.innerHTML = `<div class=\"alert-success\" role=\"alert\">${successMessage}</div>`;\n            }\n            let returnUrl = _a.config.redirect;\n            // Allow form based configuration for return url.\n            if (!returnUrl &&\n                (instance._form &&\n                    instance._form.settings &&\n                    (instance._form.settings.returnUrl ||\n                        instance._form.settings.redirect))) {\n                _a.debug('Return url found in form configuration');\n                returnUrl = instance._form.settings.returnUrl || instance._form.settings.redirect;\n            }\n            if (returnUrl) {\n                const formSrc = instance.formio ? instance.formio.formUrl : '';\n                const hasQuery = !!returnUrl.match(/\\?/);\n                const isOrigin = returnUrl.indexOf(location.origin) === 0;\n                returnUrl += hasQuery ? '&' : '?';\n                returnUrl += `sub=${submission._id}`;\n                if (!isOrigin && formSrc) {\n                    returnUrl += `&form=${encodeURIComponent(formSrc)}`;\n                }\n                _a.debug('Return URL', returnUrl);\n                window.location.href = returnUrl;\n                if (isOrigin) {\n                    window.location.reload();\n                }\n            }\n        });\n    }\n    // Return the full script if the builder is being used.\n    static formioScript(script, builder) {\n        builder = builder || _a.config.includeBuilder;\n        if (_a.fullAdded || builder) {\n            _a.fullAdded = true;\n            return script.replace('formio.form', 'formio.full');\n        }\n        return script;\n    }\n    static addLibrary(libWrapper, lib, name) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!lib) {\n                return;\n            }\n            if (lib.dependencies) {\n                for (let i = 0; i < lib.dependencies.length; i++) {\n                    const libName = lib.dependencies[i];\n                    yield _a.addLibrary(libWrapper, _a.config.libs[libName], libName);\n                }\n            }\n            if (lib.css) {\n                yield _a.addStyles((lib.global ? document.body : libWrapper), lib.css);\n            }\n            if (lib.js) {\n                const module = yield _a.addScript((lib.global ? document.body : libWrapper), lib.js, lib.use ? name : false);\n                if (lib.use) {\n                    _a.debug(`Using ${name}`);\n                    const options = lib.options || {};\n                    if (!options.license && _a.license) {\n                        options.license = _a.license;\n                    }\n                    _a.use((typeof lib.use === 'function' ? lib.use(module) : module), options);\n                }\n            }\n            if (lib.globalStyle) {\n                const style = _a.createElement('style');\n                style.type = 'text/css';\n                style.innerHTML = lib.globalStyle;\n                document.body.appendChild(style);\n            }\n        });\n    }\n    static addLoader(wrapper) {\n        return __awaiter(this, void 0, void 0, function* () {\n            wrapper.appendChild(_a.createElement('div', {\n                'class': 'formio-loader'\n            }, [{\n                    tag: 'div',\n                    attrs: {\n                        class: 'loader-wrapper'\n                    },\n                    children: [{\n                            tag: 'div',\n                            attrs: {\n                                class: 'loader text-center'\n                            }\n                        }]\n                }]));\n        });\n    }\n    // eslint-disable-next-line max-statements\n    static init(element, options = {}, builder = false) {\n        return __awaiter(this, void 0, void 0, function* () {\n            _a.cdn = new CDN_js_1.default(_a.config.cdn, _a.config.cdnUrls || {});\n            _a.config.libs = _a.config.libs || {\n                uswds: {\n                    dependencies: ['fontawesome'],\n                    js: `${_a.cdn.uswds}/uswds.min.js`,\n                    css: `${_a.cdn.uswds}/uswds.min.css`,\n                    use: true\n                },\n                fontawesome: {\n                    // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need\n                    // to do 2 things. 1.) Load the fonts from the global cdn, and 2.) add the font-face to the global styles on the page.\n                    css: `https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css`,\n                    globalStyle: `@font-face {\n                    font-family: 'FontAwesome';\n                    src: url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');\n                    src: url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');\n                    font-weight: normal;\n                    font-style: normal;\n                  }`\n                },\n                bootstrap4: {\n                    dependencies: ['fontawesome'],\n                    css: `${_a.cdn.bootstrap4}/css/bootstrap.min.css`\n                },\n                bootstrap: {\n                    dependencies: ['bootstrap-icons'],\n                    css: `${_a.cdn.bootstrap}/css/bootstrap.min.css`\n                },\n                'bootstrap-icons': {\n                    // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need\n                    // to do 2 things. 1.) Load the fonts from the global cdn, and 2.) add the font-face to the global styles on the page.\n                    css: 'https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.min.css',\n                    globalStyle: `@font-face {\n                    font-display: block;\n                    font-family: \"bootstrap-icons\";\n                    src: url(\"https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6\") format(\"woff2\"),\n                         url(\"https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6\") format(\"woff\");\n                }`\n                }\n            };\n            // Add all bootswatch templates.\n            ['cerulean', 'cosmo', 'cyborg', 'darkly', 'flatly', 'journal', 'litera', 'lumen', 'lux', 'materia', 'minty', 'pulse', 'sandstone', 'simplex', 'sketchy', 'slate', 'solar', 'spacelab', 'superhero', 'united', 'yeti'].forEach((template) => {\n                _a.config.libs[template] = {\n                    dependencies: ['bootstrap-icons'],\n                    css: `${_a.cdn.bootswatch}/dist/${template}/bootstrap.min.css`\n                };\n            });\n            const id = _a.config.id || `formio-${Math.random().toString(36).substring(7)}`;\n            // Create a new wrapper and add the element inside of a new wrapper.\n            let wrapper = _a.createElement('div', {\n                'id': `${id}-wrapper`\n            });\n            element.parentNode.insertBefore(wrapper, element);\n            // If we include the libraries, then we will attempt to run this in shadow dom.\n            const useShadowDom = _a.config.includeLibs && !_a.config.noshadow && (typeof wrapper.attachShadow === 'function');\n            if (useShadowDom) {\n                wrapper = wrapper.attachShadow({\n                    mode: 'open'\n                });\n                options.shadowRoot = wrapper;\n            }\n            element.parentNode.removeChild(element);\n            wrapper.appendChild(element);\n            // If this is inside of shadow dom, then we need to add the styles and scripts to the shadow dom.\n            const libWrapper = useShadowDom ? wrapper : document.body;\n            // Load the renderer styles.\n            yield _a.addStyles(libWrapper, _a.config.embedCSS || `${_a.cdn.js}/formio.embed.css`);\n            // Add a loader.\n            _a.addLoader(wrapper);\n            const formioSrc = _a.config.full ? 'formio.full' : 'formio.form';\n            const renderer = _a.config.debug ? formioSrc : `${formioSrc}.min`;\n            _a.FormioClass = yield _a.addScript(libWrapper, _a.formioScript(_a.config.script || `${_a.cdn.js}/${renderer}.js`, builder), 'Formio', builder ? 'isBuilder' : 'isRenderer');\n            _a.FormioClass.cdn = _a.cdn;\n            _a.FormioClass.setBaseUrl(options.baseUrl || _a.baseUrl || _a.config.base);\n            _a.FormioClass.setProjectUrl(options.projectUrl || _a.projectUrl || _a.config.project);\n            _a.FormioClass.language = _a.language;\n            _a.setLicense(_a.license || _a.config.license || false);\n            _a.modules.forEach((module) => {\n                _a.FormioClass.use(module);\n            });\n            if (_a.icons) {\n                _a.FormioClass.icons = _a.icons;\n            }\n            if (_a.pathType) {\n                _a.FormioClass.setPathType(_a.pathType);\n            }\n            // Add libraries if they wish to include the libs.\n            if (_a.config.template && _a.config.includeLibs) {\n                yield _a.addLibrary(libWrapper, _a.config.libs[_a.config.template], _a.config.template);\n            }\n            if (!_a.config.libraries) {\n                _a.config.libraries = _a.config.modules || {};\n            }\n            // Adding premium if it is provided via the config.\n            if (_a.config.premium) {\n                _a.config.libraries.premium = _a.config.premium;\n            }\n            // Allow adding dynamic modules.\n            if (_a.config.libraries) {\n                for (const name in _a.config.libraries) {\n                    const lib = _a.config.libraries[name];\n                    lib.use = lib.use || true;\n                    yield _a.addLibrary(libWrapper, lib, name);\n                }\n            }\n            yield _a.addStyles(libWrapper, _a.formioScript(_a.config.style || `${_a.cdn.js}/${renderer}.css`, builder));\n            if (_a.config.before) {\n                yield _a.config.before(_a.FormioClass, element, _a.config);\n            }\n            _a.FormioClass.license = true;\n            _a._formioReady(_a.FormioClass);\n            return wrapper;\n        });\n    }\n    // Called after an instance has been created.\n    static afterCreate(instance, wrapper, readyEvent) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const loader = wrapper.querySelector('.formio-loader');\n            if (loader) {\n                wrapper.removeChild(loader);\n            }\n            _a.FormioClass.events.emit(readyEvent, instance);\n            if (_a.config.after) {\n                _a.debug('Calling ready callback');\n                _a.config.after(instance, _a.config);\n            }\n            return instance;\n        });\n    }\n    // Create a new form.\n    static createForm(element, form, options = {}) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (_a.FormioClass) {\n                return _a.FormioClass.createForm(element, form, Object.assign(Object.assign({}, options), { noLoader: true }));\n            }\n            const wrapper = yield _a.init(element, options);\n            return _a.FormioClass.createForm(element, form, Object.assign(Object.assign({}, options), { noLoader: true })).then((instance) => {\n                // Set the default submission data.\n                if (_a.config.submission) {\n                    _a.debug('Setting submission', _a.config.submission);\n                    instance.submission = _a.config.submission;\n                }\n                // Call the after create method.\n                _a.afterCreate(instance, wrapper, 'formEmbedded');\n                return instance;\n            });\n        });\n    }\n    // Create a form builder.\n    static builder(element, form, options = {}) {\n        var _b;\n        return __awaiter(this, void 0, void 0, function* () {\n            if ((_b = _a.FormioClass) === null || _b === void 0 ? void 0 : _b.builder) {\n                return _a.FormioClass.builder(element, form, options);\n            }\n            const wrapper = yield _a.init(element, options, true);\n            return _a.FormioClass.builder(element, form, options).then((instance) => {\n                _a.afterCreate(instance, wrapper, 'builderEmbedded');\n                return instance;\n            });\n        });\n    }\n}\nexports.Formio = Formio;\n_a = Formio;\nFormio.FormioClass = null;\nFormio.config = {};\nFormio.modules = [];\nFormio.icons = '';\nFormio.license = '';\nFormio.formioReady = new Promise((ready, reject) => {\n    _a._formioReady = ready;\n    _a._formioReadyReject = reject;\n});\nFormio.version = '5.2.1-rc.2';\n// Create a report.\nFormio.Report = {\n    create: (element, submission, options = {}) => __awaiter(void 0, void 0, void 0, function* () {\n        var _b;\n        if ((_b = _a.FormioClass) === null || _b === void 0 ? void 0 : _b.Report) {\n            return _a.FormioClass.Report.create(element, submission, options);\n        }\n        const wrapper = yield _a.init(element, options, true);\n        return _a.FormioClass.Report.create(element, submission, options).then((instance) => {\n            _a.afterCreate(instance, wrapper, 'reportEmbedded');\n            return instance;\n        });\n    })\n};\nCDN_js_1.default.defaultCDN = Formio.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';\nclass Form {\n    constructor(element, form, options) {\n        this.form = form;\n        this.element = element;\n        this.options = options || {};\n        this.init();\n        this.instance = {\n            proxy: true,\n            ready: this.ready,\n            destroy: () => { }\n        };\n    }\n    init() {\n        if (this.instance && !this.instance.proxy) {\n            this.instance.destroy();\n        }\n        this.element.innerHTML = '';\n        this.ready = this.create().then((instance) => {\n            this.instance = instance;\n            this.form = instance.form;\n            return instance;\n        });\n    }\n    create() {\n        return Formio.createForm(this.element, this.form, this.options);\n    }\n    setForm(form) {\n        this.form = form;\n        if (this.instance) {\n            this.instance.setForm(form);\n        }\n    }\n    setDisplay(display) {\n        if (this.instance.proxy) {\n            return this.ready;\n        }\n        this.form.display = display;\n        this.instance.destroy();\n        this.ready = this.create().then((instance) => {\n            this.instance = instance;\n            this.setForm(this.form);\n        });\n        return this.ready;\n    }\n}\nexports.Form = Form;\nclass FormBuilder extends Form {\n    create() {\n        return Formio.builder(this.element, this.form, this.options);\n    }\n}\nexports.FormBuilder = FormBuilder;\nFormio.Form = Form;\nFormio.FormBuilder = FormBuilder;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Embed.js?");
 
 /***/ }),
 
@@ -8916,7 +8916,7 @@ eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _argument
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Formio = void 0;\nconst sdk_1 = __webpack_require__(/*! @formio/core/sdk */ \"./node_modules/@formio/core/lib/sdk/index.js\");\nObject.defineProperty(exports, \"Formio\", ({ enumerable: true, get: function () { return sdk_1.Formio; } }));\nconst Embed_1 = __webpack_require__(/*! ./Embed */ \"./lib/cjs/Embed.js\");\nconst CDN_1 = __importDefault(__webpack_require__(/*! ./CDN */ \"./lib/cjs/CDN.js\"));\nconst providers_1 = __importDefault(__webpack_require__(/*! ./providers */ \"./lib/cjs/providers/index.js\"));\nsdk_1.Formio.cdn = new CDN_1.default();\nsdk_1.Formio.Providers = providers_1.default;\nsdk_1.Formio.version = '5.2.0';\nCDN_1.default.defaultCDN = sdk_1.Formio.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';\nconst isNil = (val) => val === null || val === undefined;\nsdk_1.Formio.prototype.uploadFile = function (storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback, multipartOptions) {\n    const requestArgs = {\n        provider: storage,\n        method: 'upload',\n        file: file,\n        fileName: fileName,\n        dir: dir\n    };\n    fileKey = fileKey || 'file';\n    const request = sdk_1.Formio.pluginWait('preRequest', requestArgs)\n        .then(() => {\n        return sdk_1.Formio.pluginGet('fileRequest', requestArgs)\n            .then((result) => {\n            if (storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    if (uploadStartCallback) {\n                        uploadStartCallback();\n                    }\n                    return provider.uploadFile(file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback, multipartOptions);\n                }\n                else {\n                    throw ('Storage provider not found');\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return sdk_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\nsdk_1.Formio.prototype.downloadFile = function (file, options) {\n    const requestArgs = {\n        method: 'download',\n        file: file\n    };\n    const request = sdk_1.Formio.pluginWait('preRequest', requestArgs)\n        .then(() => {\n        return sdk_1.Formio.pluginGet('fileRequest', requestArgs)\n            .then((result) => {\n            if (file.storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', file.storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    return provider.downloadFile(file, options);\n                }\n                else {\n                    throw ('Storage provider not found');\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return sdk_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\nsdk_1.Formio.prototype.deleteFile = function (file, options) {\n    const requestArgs = {\n        method: 'delete',\n        file: file\n    };\n    const request = sdk_1.Formio.pluginWait('preRequest', requestArgs)\n        .then(() => {\n        return sdk_1.Formio.pluginGet('fileRequest', requestArgs)\n            .then((result) => {\n            if (file.storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', file.storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    return provider.deleteFile(file, options);\n                }\n                else {\n                    throw ('Storage provider not found');\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return sdk_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\n// Esnure we proxy the following methods to the FormioEmbed class.\n['setBaseUrl', 'setApiUrl', 'setAppUrl', 'setProjectUrl', 'setPathType', 'setLicense'].forEach((fn) => {\n    const baseFn = sdk_1.Formio[fn];\n    sdk_1.Formio[fn] = function (arg) {\n        const retVal = Embed_1.Formio[fn](arg, true);\n        return baseFn ? baseFn.call(this, arg) : retVal;\n    };\n});\n// For reverse compatability.\nsdk_1.Formio.Promise = Promise;\nsdk_1.Formio.formioReady = Embed_1.Formio.formioReady;\nsdk_1.Formio.config = Embed_1.Formio.config;\nsdk_1.Formio.builder = Embed_1.Formio.builder;\nsdk_1.Formio.Report = Embed_1.Formio.Report;\nsdk_1.Formio.Form = Embed_1.Formio.Form;\nsdk_1.Formio.FormBuilder = Embed_1.Formio.FormBuilder;\nsdk_1.Formio.use = Embed_1.Formio.use;\nsdk_1.Formio.createForm = Embed_1.Formio.createForm;\nsdk_1.Formio.submitDone = Embed_1.Formio.submitDone;\nsdk_1.Formio.addLibrary = Embed_1.Formio.addLibrary;\nsdk_1.Formio.addLoader = Embed_1.Formio.addLoader;\nsdk_1.Formio.addToGlobal = (global) => {\n    if (typeof global === 'object' && !global.Formio) {\n        global.Formio = sdk_1.Formio;\n    }\n};\nif (typeof __webpack_require__.g !== 'undefined') {\n    sdk_1.Formio.addToGlobal(__webpack_require__.g);\n}\nif (typeof window !== 'undefined') {\n    sdk_1.Formio.addToGlobal(window);\n}\nEmbed_1.Formio._formioReady(sdk_1.Formio);\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Formio.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Formio = void 0;\nconst sdk_1 = __webpack_require__(/*! @formio/core/sdk */ \"./node_modules/@formio/core/lib/sdk/index.js\");\nObject.defineProperty(exports, \"Formio\", ({ enumerable: true, get: function () { return sdk_1.Formio; } }));\nconst Embed_1 = __webpack_require__(/*! ./Embed */ \"./lib/cjs/Embed.js\");\nconst CDN_1 = __importDefault(__webpack_require__(/*! ./CDN */ \"./lib/cjs/CDN.js\"));\nconst providers_1 = __importDefault(__webpack_require__(/*! ./providers */ \"./lib/cjs/providers/index.js\"));\nsdk_1.Formio.cdn = new CDN_1.default();\nsdk_1.Formio.Providers = providers_1.default;\nsdk_1.Formio.version = '5.2.1-rc.2';\nCDN_1.default.defaultCDN = sdk_1.Formio.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';\nconst isNil = (val) => val === null || val === undefined;\nsdk_1.Formio.prototype.uploadFile = function (storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback, multipartOptions) {\n    const requestArgs = {\n        provider: storage,\n        method: 'upload',\n        file: file,\n        fileName: fileName,\n        dir: dir\n    };\n    fileKey = fileKey || 'file';\n    const request = sdk_1.Formio.pluginWait('preRequest', requestArgs)\n        .then(() => {\n        return sdk_1.Formio.pluginGet('fileRequest', requestArgs)\n            .then((result) => {\n            if (storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    if (uploadStartCallback) {\n                        uploadStartCallback();\n                    }\n                    return provider.uploadFile(file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback, multipartOptions);\n                }\n                else {\n                    throw ('Storage provider not found');\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return sdk_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\nsdk_1.Formio.prototype.downloadFile = function (file, options) {\n    const requestArgs = {\n        method: 'download',\n        file: file\n    };\n    const request = sdk_1.Formio.pluginWait('preRequest', requestArgs)\n        .then(() => {\n        return sdk_1.Formio.pluginGet('fileRequest', requestArgs)\n            .then((result) => {\n            if (file.storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', file.storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    return provider.downloadFile(file, options);\n                }\n                else {\n                    throw ('Storage provider not found');\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return sdk_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\nsdk_1.Formio.prototype.deleteFile = function (file, options) {\n    const requestArgs = {\n        method: 'delete',\n        file: file\n    };\n    const request = sdk_1.Formio.pluginWait('preRequest', requestArgs)\n        .then(() => {\n        return sdk_1.Formio.pluginGet('fileRequest', requestArgs)\n            .then((result) => {\n            if (file.storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', file.storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    return provider.deleteFile(file, options);\n                }\n                else {\n                    throw ('Storage provider not found');\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return sdk_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\n// Esnure we proxy the following methods to the FormioEmbed class.\n['setBaseUrl', 'setApiUrl', 'setAppUrl', 'setProjectUrl', 'setPathType', 'setLicense'].forEach((fn) => {\n    const baseFn = sdk_1.Formio[fn];\n    sdk_1.Formio[fn] = function (arg) {\n        const retVal = Embed_1.Formio[fn](arg, true);\n        return baseFn ? baseFn.call(this, arg) : retVal;\n    };\n});\n// For reverse compatability.\nsdk_1.Formio.Promise = Promise;\nsdk_1.Formio.formioReady = Embed_1.Formio.formioReady;\nsdk_1.Formio.config = Embed_1.Formio.config;\nsdk_1.Formio.builder = Embed_1.Formio.builder;\nsdk_1.Formio.Report = Embed_1.Formio.Report;\nsdk_1.Formio.Form = Embed_1.Formio.Form;\nsdk_1.Formio.FormBuilder = Embed_1.Formio.FormBuilder;\nsdk_1.Formio.use = Embed_1.Formio.use;\nsdk_1.Formio.createForm = Embed_1.Formio.createForm;\nsdk_1.Formio.submitDone = Embed_1.Formio.submitDone;\nsdk_1.Formio.addLibrary = Embed_1.Formio.addLibrary;\nsdk_1.Formio.addLoader = Embed_1.Formio.addLoader;\nsdk_1.Formio.addToGlobal = (global) => {\n    if (typeof global === 'object' && !global.Formio) {\n        global.Formio = sdk_1.Formio;\n    }\n};\nif (typeof __webpack_require__.g !== 'undefined') {\n    sdk_1.Formio.addToGlobal(__webpack_require__.g);\n}\nif (typeof window !== 'undefined') {\n    sdk_1.Formio.addToGlobal(window);\n}\nEmbed_1.Formio._formioReady(sdk_1.Formio);\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Formio.js?");
 
 /***/ }),