@formio/js 5.1.0-dev.5976.b0f317d → 5.1.0-dev.5976.f61da27

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("/*! choices.js v11.0.3-rc.1 | © 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, Iterator */\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        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 === undefined) { 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 === undefined) { 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 === undefined ? value : _c;\n        var value2 = _b.value, _d = _b.label, label2 = _d === undefined ? 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 === undefined) { 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 === undefined) { 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 === undefined) { 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 === undefined) { 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.innerHTML,\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.disabled && 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)\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: true,\n        configurable: true,\n        writable: true\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), true).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 (undefined !== 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    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 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 && false) {}\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 === undefined) { 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 === undefined) { element = '[data-choice]'; }\n            if (userConfig === undefined) { 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 === undefined) { 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 === undefined) { 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 === undefined) { 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            requestAnimationFrame(function () {\n                _this.dropdown.show();\n                var rect = _this.dropdown.element.getBoundingClientRect();\n                _this.containerOuter.open(rect.bottom, rect.height);\n                if (!preventInputFocus && _this._canSearch) {\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) {\n            var _this = this;\n            if (choicesArrayOrFetcher === undefined) { choicesArrayOrFetcher = []; }\n            if (value === undefined) { value = 'value'; }\n            if (label === undefined) { label = 'label'; }\n            if (replaceChoices === undefined) { replaceChoices = false; }\n            if (clearSearchFlag === undefined) { clearSearchFlag = true; }\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            // 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) { return requestAnimationFrame(resolve); })\n                        .then(function () { return _this._handleLoadingState(true); })\n                        .then(function () { return fetcher_1; })\n                        .then(function (data) { return _this.setChoices(data, value, label, replaceChoices); })\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                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                        _this._addChoice(mapInputToChoice(choice, false));\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 === undefined) { withEvents = false; }\n            if (selectFirstOption === undefined) { selectFirstOption = false; }\n            if (deselectAll === undefined) { 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 && !choice.disabled) {\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 () {\n            var _this = this;\n            this._store.withTxn(function () {\n                _this._store.choices.forEach(function (choice) {\n                    if (!choice.selected) {\n                        _this._store.dispatch(removeChoice(choice));\n                    }\n                });\n            });\n            // @todo integrate with Store\n            this._searcher.reset();\n            return this;\n        };\n        Choices.prototype.clearStore = function (clearOptions) {\n            if (clearOptions === undefined) { clearOptions = true; }\n            this._stopSearch();\n            if (clearOptions) {\n                this.passedElement.element.replaceChildren('');\n            }\n            this.itemList.element.replaceChildren('');\n            this.choiceList.element.replaceChildren('');\n            this._store.reset();\n            this._lastAddedChoiceId = 0;\n            this._lastAddedGroupId = 0;\n            // @todo integrate with Store\n            this._searcher.reset();\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 === undefined) { 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 (!choice.disabled && (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) {\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 addItems = !!fragment.childNodes.length;\n            if (this._isSelectOneElement && this._hasNonChoicePlaceholder) {\n                var existingItems = itemList.children.length;\n                if (addItems || existingItems > 1) {\n                    var placeholder = itemList.querySelector(getClassNamesSelector(config.classNames.placeholder));\n                    if (placeholder) {\n                        placeholder.remove();\n                    }\n                }\n                else if (!existingItems) {\n                    addItems = true;\n                    addItemToFragment(mapInputToChoice({\n                        selected: true,\n                        value: '',\n                        label: config.placeholderValue || '',\n                        placeholder: true,\n                    }, false));\n                }\n            }\n            if (addItems) {\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 === undefined) { 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._store.choices\n                        .reverse()\n                        .find(function (choice) { return !choice.disabled && 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 === undefined) { 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 === undefined) { 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._displayNotice(typeof maxItemText === 'function' ? maxItemText(maxItemCount) : maxItemText, NoticeTypes.addChoice);\n                return false;\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 (this._isSelectElement) {\n                    // for exact matches, do not prompt to add it as a custom choice\n                    if (foundChoice) {\n                        this._displayNotice('', NoticeTypes.addChoice);\n                        return false;\n                    }\n                }\n                else if (this._isTextElement && !config.duplicateItemsAllowed) {\n                    if (foundChoice) {\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            if (!this._isTextElement && !hasActiveDropdown) {\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.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 = undefined;\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                var targetIsInput = target === this.input.element;\n                if (this._isTextElement || this._isSelectMultipleElement) {\n                    if (targetIsInput) {\n                        containerOuter.removeFocusState();\n                        this.hideDropdown(true);\n                        this.unhighlightAll();\n                    }\n                }\n                else {\n                    containerOuter.removeFocusState();\n                    if (targetIsInput || (target === containerOuter.element && !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 === undefined) { 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 === undefined) { withEvents = true; }\n            if (userTriggered === undefined) { 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            this.passedElement.triggerEvent(EventType.removeItem, this._getChoiceForOutput(item));\n        };\n        Choices.prototype._addChoice = function (choice, withEvents, userTriggered) {\n            if (withEvents === undefined) { withEvents = true; }\n            if (userTriggered === undefined) { 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 ((this._isSelectElement || !config.duplicateItemsAllowed) &&\n                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 === undefined) { 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 === undefined) { selectFirstOption = false; }\n            if (withEvents === undefined) { 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 === undefined) { 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.3-rc.1';\n        return Choices;\n    }());\n\n    return Choices;\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 ***!
@@ -2673,6 +2663,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 ***!
@@ -4743,7 +4743,7 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Element_1 = __importDefault(__webpack_require__(/*! ./Element */ \"./lib/cjs/Element.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst displays_1 = __importDefault(__webpack_require__(/*! ./displays */ \"./lib/cjs/displays/index.js\"));\nconst templates_1 = __importDefault(__webpack_require__(/*! ./templates */ \"./lib/cjs/templates/index.js\"));\nconst FormioUtils = __importStar(__webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\"));\nclass Form extends Element_1.default {\n    constructor(elementOrForm, formOrOptions, options = {}) {\n        let element, form, formOptions;\n        if (elementOrForm instanceof HTMLElement) {\n            element = elementOrForm;\n            form = formOrOptions;\n            formOptions = options;\n        }\n        else {\n            element = null;\n            form = elementOrForm;\n            formOptions = formOrOptions || {};\n        }\n        if (Formio_1.Formio.options && Formio_1.Formio.options.form) {\n            formOptions = Object.assign(formOptions, Formio_1.Formio.options.form);\n        }\n        super(formOptions);\n        if (this.options.useSessionToken) {\n            Formio_1.Formio.useSessionToken(this.options);\n        }\n        this.ready = new Promise((resolve, reject) => {\n            this.readyResolve = resolve;\n            this.readyReject = reject;\n        });\n        this.instance = null;\n        if (element) {\n            if (this.element) {\n                delete this.element.component;\n            }\n            this.element = element;\n        }\n        else {\n            this.element = null;\n        }\n        this.options = formOptions;\n        this.options.events = this.events;\n        if (form) {\n            this.setForm(form)\n                .then(() => this.readyResolve(this.instance))\n                .catch(this.readyReject);\n        }\n        this.display = '';\n    }\n    createElement(tag, attrs, children) {\n        const element = document.createElement(tag);\n        for (const attr in attrs) {\n            if (attrs.hasOwnProperty(attr)) {\n                element.setAttribute(attr, attrs[attr]);\n            }\n        }\n        (children || []).forEach(child => {\n            element.appendChild(this.createElement(child.tag, child.attrs, child.children));\n        });\n        return element;\n    }\n    set loading(load) {\n        if (!this.element || this.options.noLoader) {\n            return;\n        }\n        if (load) {\n            if (this.loader) {\n                return;\n            }\n            this.loader = this.createElement('div', {\n                'class': 'formio-loader'\n            }, [{\n                    tag: 'div',\n                    attrs: {\n                        class: 'loader-wrapper'\n                    },\n                    children: [{\n                            tag: 'div',\n                            attrs: {\n                                class: 'loader text-center'\n                            }\n                        }]\n                }]);\n            this.element.appendChild(this.loader);\n        }\n        else if (this.loader) {\n            if (this.element.contains(this.loader)) {\n                this.element.removeChild(this.loader);\n            }\n            this.loader = null;\n        }\n    }\n    /**\n     * Create a new form instance provided the display of the form.\n     * @param {string} display - The display of the form, either \"wizard\", \"form\", or \"pdf\"\n     * @returns {Webform|Wizard|PDF} - The new form instance for the display.\n     */\n    create(display) {\n        if (this.options && (this.options.flatten || this.options.renderMode === 'flat')) {\n            display = 'form';\n        }\n        this.display = display;\n        if (displays_1.default.displays[display]) {\n            return new displays_1.default.displays[display](this.element, this.options);\n        }\n        else {\n            // eslint-disable-next-line new-cap\n            return new displays_1.default.displays['webform'](this.element, this.options);\n        }\n    }\n    /**\n     * Sets the form. Either as JSON or a URL to a form JSON schema.\n     * @param {string|object} formParam - Either the form JSON or the URL of the form json.\n     * @returns {void}\n     */\n    set form(formParam) {\n        this.setForm(formParam);\n    }\n    errorForm(err) {\n        return {\n            components: [\n                {\n                    'label': 'HTML',\n                    'tag': 'div',\n                    'className': 'error error-message alert alert-danger ui red message',\n                    'attrs': [\n                        {\n                            'attr': 'role',\n                            'value': 'alert'\n                        }\n                    ],\n                    'key': 'errorMessage',\n                    'type': 'htmlelement',\n                    'input': false,\n                    'content': typeof err === 'string' ? err : err.message,\n                }\n            ]\n        };\n    }\n    /**\n     * Check Subdirectories path and provide correct options\n     * @param {string} url - The the URL of the form json.\n     * @param {import('@formio/core').Form} form - The form json.\n     * @returns {object} The initial options with base and project.\n     */\n    getFormInitOptions(url, form) {\n        const options = {};\n        const index = url.indexOf(form === null || form === void 0 ? void 0 : form.path);\n        // form url doesn't include form path\n        if (index === -1) {\n            return options;\n        }\n        const projectUrl = url.substring(0, index - 1);\n        const urlParts = Formio_1.Formio.getUrlParts(projectUrl);\n        // project url doesn't include subdirectories path\n        if (!urlParts || urlParts.filter(part => !!part).length < 4) {\n            return options;\n        }\n        const baseUrl = `${urlParts[1]}${urlParts[2]}`;\n        // Skip if baseUrl has already been set\n        if (baseUrl !== Formio_1.Formio.baseUrl) {\n            return {\n                base: baseUrl,\n                project: projectUrl,\n            };\n        }\n        return {};\n    }\n    /**\n     * Sets the form to the JSON schema of a form.\n     * @param {import('@formio/core').Form | string} formParam - The form JSON to set this form to.\n     * @returns {Promise<Webform|Wizard|PDF>} - The webform instance that was created.\n     */\n    setForm(formParam) {\n        let result;\n        formParam = formParam || this.form;\n        if (typeof formParam === 'string') {\n            const formio = new Formio_1.Formio(formParam);\n            let error;\n            this.loading = true;\n            result = this.getSubmission(formio, this.options)\n                .catch((err) => {\n                error = err;\n            })\n                .then((submission) => {\n                return formio.loadForm()\n                    // If the form returned an error, show it instead of the form.\n                    .catch(err => {\n                    error = err;\n                })\n                    .then((form) => {\n                    // If the submission returned an error, show it instead of the form.\n                    if (error) {\n                        form = this.errorForm(error);\n                    }\n                    this.loading = false;\n                    this.instance = this.instance || this.create(form.display);\n                    // If we're in builder mode, instance.setUrl is not a function, so just manually set the URL.\n                    if (this.instance.setUrl) {\n                        const options = this.getFormInitOptions(formParam, form);\n                        this.instance.setUrl(formParam, options);\n                    }\n                    else {\n                        this.instance.url = formParam;\n                    }\n                    this.instance.nosubmit = false;\n                    this._form = this.instance.form = form;\n                    if (submission) {\n                        this.instance.submission = submission;\n                    }\n                    if (error) {\n                        throw error;\n                    }\n                    return this.instance;\n                });\n            });\n        }\n        else {\n            this.instance = this.instance || this.create(formParam.display);\n            this._form = this.instance.form = formParam;\n            result = this.instance.ready;\n        }\n        // A redraw has occurred so save off the new element in case of a setDisplay causing a rebuild.\n        return result.then(() => {\n            if (this.element) {\n                delete this.element.component;\n            }\n            this.element = this.instance.element;\n            return this.instance;\n        });\n    }\n    getSubmission(formio, opts) {\n        if (formio.submissionId) {\n            return formio.loadSubmission(null, opts);\n        }\n        return Promise.resolve();\n    }\n    /**\n     * Returns the loaded forms JSON.\n     * @returns {object} - The loaded form's JSON\n     */\n    get form() {\n        return this._form;\n    }\n    /**\n     * Changes the display of the form.\n     * @param {string} display - The display to set this form. Either \"wizard\", \"form\", or \"pdf\"\n     * @returns {Promise<Webform|Wizard|PDF>} - The form instance that was created after changing the display.\n     */\n    setDisplay(display) {\n        if ((this.display === display) && this.instance) {\n            return Promise.resolve(this.instance);\n        }\n        this.form.display = display;\n        this.instance.destroy();\n        this.instance = this.create(display);\n        return this.setForm(this.form);\n    }\n    empty() {\n        if (this.element) {\n            while (this.element.firstChild) {\n                this.element.removeChild(this.element.firstChild);\n            }\n        }\n    }\n    static embed(embed) {\n        return new Promise((resolve) => {\n            if (!embed || !embed.src) {\n                resolve();\n            }\n            const id = this.id || `formio-${Math.random().toString(36).substring(7)}`;\n            const className = embed.class || 'formio-form-wrapper';\n            let code = embed.styles ? `<link rel=\"stylesheet\" href=\"${embed.styles}\">` : '';\n            code += `<div id=\"${id}\" class=\"${className}\"></div>`;\n            document.write(code);\n            let attempts = 0;\n            const wait = setInterval(() => {\n                attempts++;\n                const formElement = document.getElementById(id);\n                if (formElement || attempts > 10) {\n                    resolve(new Form(formElement, embed.src).ready);\n                    clearInterval(wait);\n                }\n            }, 10);\n        });\n    }\n    /**\n     * Sanitize an html string.\n     * @param {string} dirty - The dirty html string to sanitize.\n     * @param {boolean} forceSanitize - If the string should be force sanitized.\n     * @returns {string} - The sanitized html string.\n     */\n    sanitize(dirty, forceSanitize) {\n        // If Sanitize is turned off\n        if (this.options.sanitize === false && !forceSanitize) {\n            return dirty;\n        }\n        return FormioUtils.sanitize(dirty, this.options);\n    }\n    setContent(element, content, forceSanitize) {\n        if (element instanceof HTMLElement) {\n            element.innerHTML = this.sanitize(content, forceSanitize);\n            return true;\n        }\n        return false;\n    }\n    /**\n     * Build a new form.\n     * @returns {Promise<Webform|Wizard|PDF>} - The form instance that was created.\n     */\n    build() {\n        if (!this.instance) {\n            return Promise.reject(this.t('formNotReady'));\n        }\n        if (!this.element) {\n            return Promise.reject(this.t('noFormElement'));\n        }\n        // Add temporary loader.\n        const template = (this.options && this.options.template) ? this.options.template : 'bootstrap';\n        const loader = templates_1.default[template].loader || templates_1.default.bootstrap.loader;\n        this.setContent(this.element, loader.form);\n        return this.render().then(html => {\n            this.setContent(this.element, html);\n            return this.attach(this.element).then(() => this.instance);\n        })\n            .then((param) => {\n            this.emit('build', param);\n            return param;\n        });\n    }\n    render() {\n        if (!this.instance) {\n            return Promise.reject(this.t('formNotReady'));\n        }\n        return Promise.resolve(this.instance.render())\n            .then((param) => {\n            this.emit('render', param);\n            return param;\n        });\n    }\n    attach(element) {\n        if (!this.instance) {\n            return Promise.reject(this.t('formNotReady'));\n        }\n        if (this.element) {\n            delete this.element.component;\n        }\n        this.element = element;\n        return this.instance.attach(this.element)\n            .then((param) => {\n            this.emit('attach', param);\n            return param;\n        });\n    }\n    teardown() {\n        super.teardown();\n        delete this.instance;\n        delete this.ready;\n    }\n}\nexports[\"default\"] = Form;\n// Allow simple embedding.\nFormio_1.Formio.embedForm = (embed) => Form.embed(embed);\n/**\n * Creates an easy to use interface for embedding webforms, pdfs, and wizards into your application.\n * @param {object} elementOrForm - The DOM element you wish to render this form within, or the form definition.\n * @param {object | string | FormOptions} formOrOptions - A Form JSON schema, the URL of a hosted form, or the form options.\n * @param {FormOptions} [options] - The options to create a new form instance.\n * @returns {Promise<Webform|Wizard|PDF>} - The form instance that was created.\n * @example\n * import { Formio } from '@formio/js';\n * Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example');\n */\nFormio_1.Formio.createForm = (elementOrForm, formOrOptions, options) => {\n    return (new Form(elementOrForm, formOrOptions, options)).ready;\n};\nFormio_1.Formio.Form = Form;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Form.js?");
+eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Element_1 = __importDefault(__webpack_require__(/*! ./Element */ \"./lib/cjs/Element.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst displays_1 = __importDefault(__webpack_require__(/*! ./displays */ \"./lib/cjs/displays/index.js\"));\nconst templates_1 = __importDefault(__webpack_require__(/*! ./templates */ \"./lib/cjs/templates/index.js\"));\nconst FormioUtils = __importStar(__webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\"));\nclass Form extends Element_1.default {\n    constructor(elementOrForm, formOrOptions, options = {}) {\n        let element, form, formOptions;\n        if (elementOrForm instanceof HTMLElement) {\n            element = elementOrForm;\n            form = formOrOptions;\n            formOptions = options;\n        }\n        else {\n            element = null;\n            form = elementOrForm;\n            formOptions = formOrOptions || {};\n        }\n        if (Formio_1.Formio.options && Formio_1.Formio.options.form) {\n            formOptions = Object.assign(formOptions, Formio_1.Formio.options.form);\n        }\n        super(formOptions);\n        if (this.options.useSessionToken) {\n            Formio_1.Formio.useSessionToken(this.options);\n        }\n        this.ready = new Promise((resolve, reject) => {\n            this.readyResolve = resolve;\n            this.readyReject = reject;\n        });\n        this.instance = null;\n        if (element) {\n            if (this.element) {\n                delete this.element.component;\n            }\n            this.element = element;\n        }\n        else {\n            this.element = null;\n        }\n        this.options = formOptions;\n        this.options.events = this.events;\n        if (form) {\n            this.setForm(form)\n                .then(() => this.readyResolve(this.instance))\n                .catch(this.readyReject);\n        }\n        this.display = '';\n    }\n    createElement(tag, attrs, children) {\n        const element = document.createElement(tag);\n        for (const attr in attrs) {\n            if (attrs.hasOwnProperty(attr)) {\n                element.setAttribute(attr, attrs[attr]);\n            }\n        }\n        (children || []).forEach(child => {\n            element.appendChild(this.createElement(child.tag, child.attrs, child.children));\n        });\n        return element;\n    }\n    set loading(load) {\n        if (!this.element || this.options.noLoader) {\n            return;\n        }\n        if (load) {\n            if (this.loader) {\n                return;\n            }\n            this.loader = this.createElement('div', {\n                'class': 'formio-loader'\n            }, [{\n                    tag: 'div',\n                    attrs: {\n                        class: 'loader-wrapper'\n                    },\n                    children: [{\n                            tag: 'div',\n                            attrs: {\n                                class: 'loader text-center'\n                            }\n                        }]\n                }]);\n            this.element.appendChild(this.loader);\n        }\n        else if (this.loader) {\n            if (this.element.contains(this.loader)) {\n                this.element.removeChild(this.loader);\n            }\n            this.loader = null;\n        }\n    }\n    /**\n     * Create a new form instance provided the display of the form.\n     * @param {string} display - The display of the form, either \"wizard\", \"form\", or \"pdf\"\n     * @returns {Webform|Wizard|PDF} - The new form instance for the display.\n     */\n    create(display) {\n        if (this.options && (this.options.flatten || this.options.renderMode === 'flat')) {\n            display = 'form';\n        }\n        this.display = display;\n        if (displays_1.default.displays[display]) {\n            return new displays_1.default.displays[display](this.element, this.options);\n        }\n        else {\n            // eslint-disable-next-line new-cap\n            return new displays_1.default.displays['webform'](this.element, this.options);\n        }\n    }\n    /**\n     * Sets the form. Either as JSON or a URL to a form JSON schema.\n     * @param {string|object} formParam - Either the form JSON or the URL of the form json.\n     * @returns {void}\n     */\n    set form(formParam) {\n        this.setForm(formParam);\n    }\n    errorForm(err) {\n        return {\n            components: [\n                {\n                    'label': 'HTML',\n                    'tag': 'div',\n                    'className': 'error error-message alert alert-danger ui red message',\n                    'attrs': [\n                        {\n                            'attr': 'role',\n                            'value': 'alert'\n                        }\n                    ],\n                    'key': 'errorMessage',\n                    'type': 'htmlelement',\n                    'input': false,\n                    'content': typeof err === 'string' ? err : err.message,\n                }\n            ]\n        };\n    }\n    /**\n     * Check Subdirectories path and provide correct options\n     * @param {string} url - The the URL of the form json.\n     * @param {import('@formio/core').Form} form - The form json.\n     * @returns {object} The initial options with base and project.\n     */\n    getFormInitOptions(url, form) {\n        const options = {};\n        const index = url.indexOf(form === null || form === void 0 ? void 0 : form.path);\n        // form url doesn't include form path\n        if (index === -1) {\n            return options;\n        }\n        const projectUrl = url.substring(0, index - 1);\n        const urlParts = Formio_1.Formio.getUrlParts(projectUrl);\n        // project url doesn't include subdirectories path\n        if (!urlParts || urlParts.filter(part => !!part).length < 4) {\n            return options;\n        }\n        const baseUrl = `${urlParts[1]}${urlParts[2]}`;\n        // Skip if baseUrl has already been set\n        if (baseUrl !== Formio_1.Formio.baseUrl) {\n            return {\n                base: baseUrl,\n                project: projectUrl,\n            };\n        }\n        return {};\n    }\n    /**\n     * Sets the form to the JSON schema of a form.\n     * @param {import('@formio/core').Form | string} formParam - The form JSON to set this form to.\n     * @returns {Promise<Webform|Wizard|PDF>} - The webform instance that was created.\n     */\n    setForm(formParam) {\n        let result;\n        formParam = formParam || this.form;\n        if (typeof formParam === 'string') {\n            const formio = new Formio_1.Formio(formParam);\n            let error;\n            this.loading = true;\n            result = this.getSubmission(formio, this.options)\n                .catch((err) => {\n                error = err;\n            })\n                .then((submission) => {\n                return formio.loadForm()\n                    // If the form returned an error, show it instead of the form.\n                    .catch(err => {\n                    error = err;\n                })\n                    .then((form) => {\n                    // If the submission returned an error, show it instead of the form.\n                    if (error) {\n                        form = this.errorForm(error);\n                    }\n                    this.loading = false;\n                    this.instance = this.instance || this.create(form.display);\n                    // If we're in builder mode, instance.setUrl is not a function, so just manually set the URL.\n                    if (this.instance.setUrl) {\n                        const options = this.getFormInitOptions(formParam, form);\n                        this.instance.setUrl(formParam, options);\n                    }\n                    else {\n                        this.instance.url = formParam;\n                    }\n                    this.instance.nosubmit = false;\n                    this._form = this.instance.form = form;\n                    if (submission) {\n                        this.instance.submission = submission;\n                    }\n                    if (error) {\n                        throw error;\n                    }\n                    return this.instance;\n                });\n            });\n        }\n        else {\n            this.instance = this.instance || this.create(formParam.display);\n            this._form = this.instance.form = formParam;\n            result = this.instance.ready;\n        }\n        // A redraw has occurred so save off the new element in case of a setDisplay causing a rebuild.\n        return result.then(() => {\n            if (this.element) {\n                delete this.element.component;\n            }\n            this.element = this.instance.element;\n            return this.instance;\n        });\n    }\n    getSubmission(formio, opts) {\n        if (formio.submissionId) {\n            return formio.loadSubmission(null, opts);\n        }\n        return Promise.resolve();\n    }\n    /**\n     * Returns the loaded forms JSON.\n     * @returns {object} - The loaded form's JSON\n     */\n    get form() {\n        return this._form;\n    }\n    /**\n     * Changes the display of the form.\n     * @param {string} display - The display to set this form. Either \"wizard\", \"form\", or \"pdf\"\n     * @returns {Promise<Webform|Wizard|PDF>} - The form instance that was created after changing the display.\n     */\n    setDisplay(display) {\n        if ((this.display === display) && this.instance) {\n            return Promise.resolve(this.instance);\n        }\n        this.form.display = display;\n        this.instance.destroy();\n        this.instance = this.create(display);\n        return this.setForm(this.form).then(() => {\n            this.instance.emit('setDisplay', this.form.display);\n        });\n    }\n    empty() {\n        if (this.element) {\n            while (this.element.firstChild) {\n                this.element.removeChild(this.element.firstChild);\n            }\n        }\n    }\n    static embed(embed) {\n        return new Promise((resolve) => {\n            if (!embed || !embed.src) {\n                resolve();\n            }\n            const id = this.id || `formio-${Math.random().toString(36).substring(7)}`;\n            const className = embed.class || 'formio-form-wrapper';\n            let code = embed.styles ? `<link rel=\"stylesheet\" href=\"${embed.styles}\">` : '';\n            code += `<div id=\"${id}\" class=\"${className}\"></div>`;\n            document.write(code);\n            let attempts = 0;\n            const wait = setInterval(() => {\n                attempts++;\n                const formElement = document.getElementById(id);\n                if (formElement || attempts > 10) {\n                    resolve(new Form(formElement, embed.src).ready);\n                    clearInterval(wait);\n                }\n            }, 10);\n        });\n    }\n    /**\n     * Sanitize an html string.\n     * @param {string} dirty - The dirty html string to sanitize.\n     * @param {boolean} forceSanitize - If the string should be force sanitized.\n     * @returns {string} - The sanitized html string.\n     */\n    sanitize(dirty, forceSanitize) {\n        // If Sanitize is turned off\n        if (this.options.sanitize === false && !forceSanitize) {\n            return dirty;\n        }\n        return FormioUtils.sanitize(dirty, this.options);\n    }\n    setContent(element, content, forceSanitize) {\n        if (element instanceof HTMLElement) {\n            element.innerHTML = this.sanitize(content, forceSanitize);\n            return true;\n        }\n        return false;\n    }\n    /**\n     * Build a new form.\n     * @returns {Promise<Webform|Wizard|PDF>} - The form instance that was created.\n     */\n    build() {\n        if (!this.instance) {\n            return Promise.reject(this.t('formNotReady'));\n        }\n        if (!this.element) {\n            return Promise.reject(this.t('noFormElement'));\n        }\n        // Add temporary loader.\n        const template = (this.options && this.options.template) ? this.options.template : 'bootstrap';\n        const loader = templates_1.default[template].loader || templates_1.default.bootstrap.loader;\n        this.setContent(this.element, loader.form);\n        return this.render().then(html => {\n            this.setContent(this.element, html);\n            return this.attach(this.element).then(() => this.instance);\n        })\n            .then((param) => {\n            this.emit('build', param);\n            return param;\n        });\n    }\n    render() {\n        if (!this.instance) {\n            return Promise.reject(this.t('formNotReady'));\n        }\n        return Promise.resolve(this.instance.render())\n            .then((param) => {\n            this.emit('render', param);\n            return param;\n        });\n    }\n    attach(element) {\n        if (!this.instance) {\n            return Promise.reject(this.t('formNotReady'));\n        }\n        if (this.element) {\n            delete this.element.component;\n        }\n        this.element = element;\n        return this.instance.attach(this.element)\n            .then((param) => {\n            this.emit('attach', param);\n            return param;\n        });\n    }\n    teardown() {\n        super.teardown();\n        delete this.instance;\n        delete this.ready;\n    }\n}\nexports[\"default\"] = Form;\n// Allow simple embedding.\nFormio_1.Formio.embedForm = (embed) => Form.embed(embed);\n/**\n * Creates an easy to use interface for embedding webforms, pdfs, and wizards into your application.\n * @param {object} elementOrForm - The DOM element you wish to render this form within, or the form definition.\n * @param {object | string | FormOptions} formOrOptions - A Form JSON schema, the URL of a hosted form, or the form options.\n * @param {FormOptions} [options] - The options to create a new form instance.\n * @returns {Promise<Webform|Wizard|PDF>} - The form instance that was created.\n * @example\n * import { Formio } from '@formio/js';\n * Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example');\n */\nFormio_1.Formio.createForm = (elementOrForm, formOrOptions, options) => {\n    return (new Form(elementOrForm, formOrOptions, options)).ready;\n};\nFormio_1.Formio.Form = Form;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Form.js?");
 
 /***/ }),
 
@@ -4765,7 +4765,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst compare_versions_1 = __webpack_require__(/*! compare-versions */ \"./node_modules/compare-versions/lib/esm/index.js\");\nconst EventEmitter_1 = __importDefault(__webpack_require__(/*! ./EventEmitter */ \"./lib/cjs/EventEmitter.js\"));\nconst i18n_1 = __importDefault(__webpack_require__(/*! ./i18n */ \"./lib/cjs/i18n.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst Components_1 = __importDefault(__webpack_require__(/*! ./components/Components */ \"./lib/cjs/components/Components.js\"));\nconst NestedDataComponent_1 = __importDefault(__webpack_require__(/*! ./components/_classes/nesteddata/NestedDataComponent */ \"./lib/cjs/components/_classes/nesteddata/NestedDataComponent.js\"));\nconst utils_1 = __webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst formUtils_1 = __webpack_require__(/*! ./utils/formUtils */ \"./lib/cjs/utils/formUtils.js\");\n// We need this here because dragula pulls in CustomEvent class that requires global to exist.\nif (typeof window !== 'undefined' && typeof window.global === 'undefined') {\n    window.global = window;\n}\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    }\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', this.t('newFormSchema'));\n            });\n        }\n        // See if they pass a module, and evaluate it if so.\n        if (form && form.module) {\n            let formModule = null;\n            if (typeof form.module === 'string') {\n                try {\n                    formModule = this.evaluate(`return ${form.module}`);\n                }\n                catch (err) {\n                    console.warn(err);\n                }\n            }\n            else {\n                formModule = form.module;\n            }\n            if (formModule) {\n                Formio_1.Formio.use(formModule);\n                // Since we got here after instantiation, we need to manually apply form options.\n                if (formModule.options && formModule.options.form) {\n                    this.options = Object.assign(this.options, formModule.options.form);\n                }\n            }\n        }\n        this.initialized = false;\n        const rebuild = this.rebuild() || Promise.resolve();\n        return rebuild.then(() => {\n            this.emit('formLoad', form);\n            this.triggerCaptcha();\n            // Make sure to trigger onChange after a render event occurs to speed up form rendering.\n            setTimeout(() => {\n                this.onChange(flags);\n                this.formReadyResolve();\n            }, 0);\n            return this.formReady;\n        });\n    }\n    /**\n     * Gets the form object.\n     * @returns {object} - The form JSON schema.\n     */\n    get form() {\n        if (!this._form) {\n            this._form = {\n                components: [],\n            };\n        }\n        return this._form;\n    }\n    /**\n     * Sets the form value.\n     * @alias setForm\n     * @param {object} form - The form schema object.\n     */\n    set form(form) {\n        this.setForm(form);\n    }\n    /**\n     * Returns the submission object that was set within this form.\n     * @returns {object} - The submission object.\n     */\n    get submission() {\n        return this.getValue();\n    }\n    /**\n     * Sets the submission of a form.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.src = 'https://examples.form.io/example';\n     * form.submission = {data: {\n     *   firstName: 'Joe',\n     *   lastName: 'Smith',\n     *   email: 'joe@example.com'\n     * }};\n     * @param {object} submission - The Form.io submission object.\n     */\n    set submission(submission) {\n        this.setSubmission(submission);\n    }\n    /**\n     * Sets the submission value\n     * @param {object|null|undefined} submission - The submission to set.\n     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.\n     * @returns {void}\n     */\n    onSetSubmission(submission, flags = {}) {\n        this.submissionSet = true;\n        this.triggerChange(flags);\n        this.emit('beforeSetSubmission', submission);\n        this.setValue(submission, flags);\n    }\n    /**\n     * Sets a submission and returns the promise when it is ready.\n     * @param {any} submission - The submission to set.\n     * @param {any} flags - Any flags to apply when setting the submission.\n     * @returns {Promise} - The promise that is triggered when the submission is set.\n     */\n    setSubmission(submission, flags = {}) {\n        flags = Object.assign(Object.assign({}, flags), { fromSubmission: lodash_1.default.has(flags, 'fromSubmission') ? flags.fromSubmission : true });\n        return (this.onSubmission = this.formReady\n            .then((resolveFlags) => {\n            if (resolveFlags) {\n                flags = Object.assign(Object.assign({}, flags), resolveFlags);\n            }\n            this.onSetSubmission(submission, flags);\n            return this.submissionReadyResolve(submission);\n        }, (err) => this.submissionReadyReject(err))\n            .catch((err) => this.submissionReadyReject(err)));\n    }\n    handleDraftError(errName, errDetails, restoreDraft) {\n        const errorMessage = lodash_1.default.trim(`${this.t(errName)} ${errDetails || ''}`);\n        console.warn(errorMessage);\n        this.emit(restoreDraft ? 'restoreDraftError' : 'saveDraftError', errDetails || errorMessage);\n    }\n    saveDraft() {\n        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                if (options === null || options === void 0 ? void 0 : options.instance) {\n                    options.instance.loading = false;\n                }\n                return e !== false && e !== undefined && console.log(e);\n            });\n        }, true);\n        this.on('checkValidity', (data) => this.validate(data, { dirty: true, process: 'change' }), true);\n        this.on('requestUrl', (args) => this.submitUrl(args.url, args.headers), true);\n        this.on('resetForm', () => this.resetValue(), true);\n        this.on('deleteSubmission', () => this.deleteSubmission(), true);\n        this.on('refreshData', () => this.updateValue(), true);\n        this.executeFormController();\n        return this.formReady;\n    }\n    executeFormController() {\n        // If no controller value or\n        // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)\n        if (!this.form ||\n            !this.form.controller ||\n            ((!this.visible || this.component.hidden) &&\n                this.component.clearOnHide &&\n                !this.rootPristine)) {\n            return false;\n        }\n        this.formReady.then(() => {\n            this.evaluate(this.form.controller, {\n                components: this.components,\n                instance: this,\n            });\n        });\n    }\n    /**\n     *\n     */\n    teardown() {\n        this.emit('formDelete', this.id);\n        delete Formio_1.Formio.forms[this.id];\n        delete this.executeShortcuts;\n        delete this.triggerSaveDraft;\n        super.teardown();\n    }\n    destroy(all = false) {\n        this.off('submitButton');\n        this.off('checkValidity');\n        this.off('requestUrl');\n        this.off('resetForm');\n        this.off('deleteSubmission');\n        this.off('refreshData');\n        return super.destroy(all);\n    }\n    build(element) {\n        if (element || this.element) {\n            return this.ready.then(() => {\n                element = element || this.element;\n                super.build(element);\n            });\n        }\n        return this.ready;\n    }\n    getClassName() {\n        let classes = 'formio-form';\n        if (this.options.readOnly) {\n            classes += ' formio-read-only';\n        }\n        return classes;\n    }\n    render() {\n        return super.render(this.renderTemplate('webform', {\n            classes: this.getClassName(),\n            children: this.renderComponents(),\n        }), this.builderMode ? 'builder' : 'form', true);\n    }\n    redraw() {\n        // Don't bother if we have not built yet.\n        if (!this.element) {\n            return Promise.resolve();\n        }\n        this.clear();\n        this.setContent(this.element, this.render());\n        return this.attach(this.element);\n    }\n    attach(element) {\n        this.setElement(element);\n        this.loadRefs(element, { webform: 'single' });\n        const childPromise = this.attachComponents(this.refs.webform);\n        this.addEventListener(document, 'keydown', this.executeShortcuts);\n        this.currentForm = this;\n        this.hook('attachWebform', element, this);\n        return childPromise.then(() => {\n            this.emit('render', this.element);\n            return this.setValue(this._submission, {\n                noUpdateEvent: true,\n            });\n        });\n    }\n    hasRequiredFields() {\n        let result = false;\n        (0, formUtils_1.eachComponent)(this.form.components, (component) => {\n            if (component.validate.required) {\n                result = true;\n                return true;\n            }\n        }, true);\n        return result;\n    }\n    resetValue() {\n        lodash_1.default.each(this.getComponents(), (comp) => comp.resetValue());\n        this.setPristine(true);\n        this.onChange({ resetValue: true });\n    }\n    /**\n     * Sets a new alert to display in the error dialog of the form.\n     * @param {string} type - The type of alert to display. 'danger', 'success', 'warning', etc.\n     * @param {string} message - The message to show in the alert.\n     * @param {object} options - The options for the alert.\n     */\n    setAlert(type, message, options) {\n        if (!type && this.submitted) {\n            if (this.alert) {\n                if (this.refs.errorRef && this.refs.errorRef.length) {\n                    this.refs.errorRef.forEach((el) => {\n                        this.removeEventListener(el, 'click');\n                        this.removeEventListener(el, 'keypress');\n                    });\n                }\n                this.removeChild(this.alert);\n                this.alert = null;\n            }\n            return;\n        }\n        if (this.options.noAlerts) {\n            if (!message) {\n                this.emit('error', false);\n            }\n            return;\n        }\n        if (this.alert) {\n            try {\n                if (this.refs.errorRef && this.refs.errorRef.length) {\n                    this.refs.errorRef.forEach((el) => {\n                        this.removeEventListener(el, 'click');\n                        this.removeEventListener(el, 'keypress');\n                    });\n                }\n                this.removeChild(this.alert);\n                this.alert = null;\n            }\n            catch (err) {\n                // ignore\n            }\n        }\n        if (message) {\n            const attrs = {\n                class: (options && options.classes) || `alert alert-${type}`,\n                id: `error-list-${this.id}`,\n            };\n            const templateOptions = {\n                message: message instanceof HTMLElement ? message.outerHTML : message,\n                attrs: attrs,\n                type,\n            };\n            this.alert = (0, utils_1.convertStringToHTMLElement)(this.renderTemplate('alert', templateOptions), `#${attrs.id}`);\n        }\n        if (!this.alert) {\n            return;\n        }\n        this.loadRefs(this.alert, { errorRef: 'multiple' });\n        if (this.refs.errorRef && this.refs.errorRef.length) {\n            this.refs.errorRef.forEach((el) => {\n                this.addEventListener(el, 'click', (e) => {\n                    const key = e.currentTarget.dataset.componentKey;\n                    this.focusOnComponent(key);\n                });\n                this.addEventListener(el, 'keydown', (e) => {\n                    if (e.keyCode === 13) {\n                        e.preventDefault();\n                        const key = e.currentTarget.dataset.componentKey;\n                        this.focusOnComponent(key);\n                    }\n                });\n            });\n        }\n        this.prepend(this.alert);\n    }\n    /**\n     * Focus on selected component.\n     * @param {string} key - The key of selected component.\n     */\n    focusOnComponent(key) {\n        if (key) {\n            const component = this.getComponent(key);\n            if (component) {\n                component.focus();\n            }\n        }\n    }\n    /**\n     * Show the errors of this form within the alert dialog.\n     * @param {object} error - An optional additional error to display along with the component errors.\n     * @returns {*}\n     */\n    /* eslint-disable no-unused-vars */\n    /**\n     *\n     * @param {Array} errors - An array of errors to display.\n     * @param {boolean} triggerEvent - Whether or not to trigger the error event.\n     * @returns {void|Array} - The errors that were set.\n     */\n    showErrors(errors, triggerEvent) {\n        this.loading = false;\n        if (!Array.isArray(errors)) {\n            errors = [errors];\n        }\n        if (Array.isArray(this.errors)) {\n            errors = lodash_1.default.union(errors, this.errors);\n        }\n        errors = errors.concat(this.customErrors).filter((err) => !!err);\n        if (!errors.length) {\n            this.setAlert(false);\n            return;\n        }\n        // Mark any components as invalid if in a custom message.\n        const componentErrors = {};\n        errors.forEach((err) => {\n            var _a, _b;\n            const path = err.path || ((_a = err.context) === null || _a === void 0 ? void 0 : _a.path) || ((_b = err.component) === null || _b === void 0 ? void 0 : _b.key);\n            if (!componentErrors[path]) {\n                componentErrors[path] = [];\n            }\n            componentErrors[path].push(err);\n        });\n        // Iterate through all of our component errors and apply them to the components.\n        for (let path in componentErrors) {\n            const component = this.getComponent(path);\n            const errors = componentErrors[path];\n            if (component) {\n                component.serverErrors = errors.filter((err) => err.fromServer);\n                component.setCustomValidity(errors, true);\n            }\n        }\n        const displayedErrors = [];\n        if (errors.length) {\n            errors = lodash_1.default.uniqBy(errors, (error) => { var _a, _b; return [error.message, (_a = error.component) === null || _a === void 0 ? void 0 : _a.id, (_b = error.context) === null || _b === void 0 ? void 0 : _b.path].join(); });\n            const createListItem = (message, index) => {\n                var _a, _b, _c;\n                const err = errors[index];\n                const messageFromIndex = !lodash_1.default.isUndefined(index) && errors && errors[index];\n                const keyOrPath = (messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.formattedKeyOrPath) ||\n                    (messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.path) ||\n                    ((_a = messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.context) === null || _a === void 0 ? void 0 : _a.path) ||\n                    (((_b = err.context) === null || _b === void 0 ? void 0 : _b.component) && ((_c = err.context) === null || _c === void 0 ? void 0 : _c.component.key)) ||\n                    (err.component && err.component.key) ||\n                    (err.fromServer && err.path);\n                const formattedKeyOrPath = keyOrPath ? (0, utils_1.getStringFromComponentPath)(keyOrPath) : '';\n                if (typeof err !== 'string' && !err.formattedKeyOrPath) {\n                    err.formattedKeyOrPath = formattedKeyOrPath;\n                }\n                return {\n                    message: (0, utils_1.unescapeHTML)(message),\n                    keyOrPath: formattedKeyOrPath,\n                };\n            };\n            errors.forEach(({ message, context, fromServer, component }, index) => {\n                const text = !(component === null || component === void 0 ? void 0 : component.label) || (context === null || context === void 0 ? void 0 : context.hasLabel) || fromServer\n                    ? this.t('alertMessage', { message: this.t(message) })\n                    : this.t('alertMessageWithLabel', {\n                        label: this.t(component === null || component === void 0 ? void 0 : component.label),\n                        message: this.t(message),\n                    });\n                displayedErrors.push(createListItem(text, index));\n            });\n        }\n        const errorsList = this.renderTemplate('errorsList', { errors: displayedErrors });\n        this.root.setAlert('danger', errorsList);\n        if (triggerEvent) {\n            this.emit('error', errors);\n        }\n        return errors;\n    }\n    /* eslint-enable no-unused-vars */\n    /**\n     * Called when the submission has completed, or if the submission needs to be sent to an external library.\n     * @param {object} submission - The submission object.\n     * @param {boolean} saved - Whether or not this submission was saved to the server.\n     * @returns {object} - The submission object.\n     */\n    onSubmit(submission, saved) {\n        var _a;\n        this.loading = false;\n        this.submitting = false;\n        this.setPristine(true);\n        // We want to return the submitted submission and setValue will mutate the submission so cloneDeep it here.\n        this.setValue((0, utils_1.fastCloneDeep)(submission), {\n            noValidate: true,\n            noCheck: true,\n        });\n        this.setAlert('success', `<p>${this.t('complete')}</p>`);\n        // Cancel triggered saveDraft to prevent overriding the submitted state\n        if (this.draftEnabled && ((_a = this.triggerSaveDraft) === null || _a === void 0 ? void 0 : _a.cancel)) {\n            this.triggerSaveDraft.cancel();\n        }\n        this.emit('submit', submission, saved);\n        if (saved) {\n            this.emit('submitDone', submission);\n        }\n        return submission;\n    }\n    normalizeError(error) {\n        if (error) {\n            if (typeof error === 'object' && 'details' in error) {\n                error = error.details;\n            }\n            if (typeof error === 'string') {\n                error = { message: error };\n            }\n        }\n        return error;\n    }\n    /**\n     * Called when an error occurs during the submission.\n     * @param {object} error - The error that occured.\n     * @returns {Array} errors - All errors.\n     */\n    onSubmissionError(error) {\n        error = this.normalizeError(error);\n        this.submitting = false;\n        this.setPristine(false);\n        this.emit('submitError', error || this.errors);\n        // Allow for silent cancellations (no error message, no submit button error state)\n        if (error && error.silent) {\n            this.emit('change', { isValid: true }, { silent: true });\n            return false;\n        }\n        const errors = this.showErrors(error, true);\n        if (this.root && this.root.alert) {\n            this.scrollIntoView(this.root.alert);\n        }\n        return errors;\n    }\n    /**\n     * Trigger the change event for this form.\n     * @param {any} flags - The flags to set on this change event.\n     * @param {any} changed - The changed object which reflects the changes in the form.\n     * @param {boolean} modified - Whether or not the form has been modified.\n     * @param {any} changes - The changes that have occured in the form.\n     */\n    onChange(flags, changed, modified, changes) {\n        var _a;\n        flags = flags || {};\n        let isChangeEventEmitted = false;\n        if (((_a = this.parent) === null || _a === void 0 ? void 0 : _a.subForm) === this) {\n            super.onChange(Object.assign(Object.assign({}, flags), { modified }), false);\n        }\n        else {\n            super.onChange(flags, true);\n        }\n        const value = lodash_1.default.clone(this.submission);\n        flags.changed = value.changed = changed;\n        flags.changes = changes;\n        if (modified && this.pristine) {\n            this.pristine = false;\n        }\n        this.checkData(value.data, flags);\n        const shouldValidate = !flags.noValidate ||\n            flags.fromIframe ||\n            (flags.fromSubmission && this.rootPristine && this.pristine && flags.changed);\n        const errors = shouldValidate\n            ? this.validate(value.data, Object.assign(Object.assign({}, flags), { noValidate: false, process: 'change' }))\n            : [];\n        value.isValid = (errors || []).filter(err => !err.fromServer).length === 0;\n        this.loading = false;\n        if (this.submitted) {\n            // show server errors while they are not cleaned/fixed\n            const nonComponentServerErrors = lodash_1.default.filter(this.serverErrors || [], (err) => !err.component && !err.path);\n            this.showErrors(nonComponentServerErrors.length ? nonComponentServerErrors : errors);\n        }\n        // See if we need to save the draft of the form.\n        if (modified && this.options.saveDraft) {\n            this.triggerSaveDraft();\n        }\n        if (!flags || !flags.noEmit) {\n            this.emit('change', value, flags, modified);\n            isChangeEventEmitted = true;\n        }\n        // The form is initialized after the first change event occurs.\n        if (isChangeEventEmitted && !this.initialized) {\n            this.emit('initialized');\n            this.initialized = true;\n        }\n    }\n    /**\n     * Send a delete request to the server.\n     * @returns {Promise} - The promise that is triggered when the delete is complete.\n     */\n    deleteSubmission() {\n        return this.formio.deleteSubmission().then(() => {\n            this.emit('submissionDeleted', this.submission);\n            this.resetValue();\n        });\n    }\n    /**\n     * Cancels the submission.\n     * @param {boolean} noconfirm - Whether or not to confirm the cancellation.\n     * @alias reset\n     * @returns {boolean} - TRUE means the submission was cancelled, FALSE otherwise.\n     */\n    cancel(noconfirm) {\n        const shouldReset = this.hook('beforeCancel', true);\n        if (shouldReset && (noconfirm || confirm(this.t('confirmCancel')))) {\n            this.resetValue();\n            return true;\n        }\n        else {\n            this.emit('cancelSubmit');\n            return false;\n        }\n    }\n    setMetadata(submission) {\n        // Add in metadata about client submitting the form\n        submission.metadata = submission.metadata || {};\n        lodash_1.default.defaults(submission.metadata, {\n            timezone: lodash_1.default.get(this, '_submission.metadata.timezone', (0, utils_1.currentTimezone)()),\n            offset: parseInt(lodash_1.default.get(this, '_submission.metadata.offset', (0, moment_1.default)().utcOffset()), 10),\n            origin: document.location.origin,\n            referrer: document.referrer,\n            browserName: navigator.appName,\n            userAgent: navigator.userAgent,\n            pathName: window.location.pathname,\n            onLine: navigator.onLine,\n        });\n    }\n    submitForm(options = {}, local = false) {\n        this.clearServerErrors();\n        return new Promise((resolve, reject) => {\n            // Read-only forms should never submit.\n            if (this.options.readOnly) {\n                return resolve({\n                    submission: this.submission,\n                    saved: false,\n                });\n            }\n            const submission = (0, utils_1.fastCloneDeep)(this.submission || {});\n            this.setMetadata(submission);\n            submission.state = options.state || submission.state || 'submitted';\n            const isDraft = submission.state === 'draft';\n            this.hook('beforeSubmit', Object.assign(Object.assign({}, submission), { component: options.component }), (err, data) => {\n                var _a;\n                if (err) {\n                    return reject(err);\n                }\n                submission._vnote = data && data._vnote ? data._vnote : '';\n                try {\n                    if (!isDraft && !options.noValidate) {\n                        if (!submission.data) {\n                            return reject('Invalid Submission');\n                        }\n                        const errors = this.validate(submission.data, {\n                            local,\n                            dirty: true,\n                            silentCheck: false,\n                            process: 'submit',\n                        });\n                        if (errors.length ||\n                            ((_a = options.beforeSubmitResults) === null || _a === void 0 ? void 0 : _a.some((result) => result.status === 'rejected'))) {\n                            return reject(errors);\n                        }\n                    }\n                }\n                catch (err) {\n                    console.error(err);\n                }\n                this.everyComponent((comp) => {\n                    var _a, _b;\n                    if (submission._vnote && comp.type === 'form' && comp.component.reference) {\n                        lodash_1.default.get(submission.data, local ? (_a = comp.paths) === null || _a === void 0 ? void 0 : _a.localDataPath : comp.path, {})._vnote = submission._vnote;\n                    }\n                    const { persistent } = comp.component;\n                    if (persistent === 'client-only') {\n                        lodash_1.default.unset(submission.data, local ? (_b = comp.paths) === null || _b === void 0 ? void 0 : _b.localDataPath : comp.path);\n                    }\n                });\n                this.hook('customValidation', Object.assign(Object.assign({}, submission), { component: options.component }), (err) => {\n                    if (err) {\n                        // If string is returned, cast to object.\n                        if (typeof err === 'string') {\n                            err = {\n                                message: err,\n                            };\n                        }\n                        // Ensure err is an array.\n                        err = Array.isArray(err) ? err : [err];\n                        return reject(err);\n                    }\n                    this.loading = true;\n                    // Use the form action to submit the form if available.\n                    if (this._form && this._form.action) {\n                        const method = submission.data._id &&\n                            this._form.action.includes(submission.data._id)\n                            ? 'PUT'\n                            : 'POST';\n                        return Formio_1.Formio.makeStaticRequest(this._form.action, method, submission, this.formio ? this.formio.options : {})\n                            .then((result) => resolve({\n                            submission: result,\n                            saved: true,\n                        }))\n                            .catch((error) => {\n                            this.setServerErrors(error);\n                            return reject(error);\n                        });\n                    }\n                    const submitFormio = this.formio;\n                    if (this.nosubmit || !submitFormio) {\n                        return resolve({\n                            submission,\n                            saved: false,\n                        });\n                    }\n                    // If this is an actionUrl, then make sure to save the action and not the submission.\n                    const submitMethod = submitFormio.actionUrl\n                        ? 'saveAction'\n                        : 'saveSubmission';\n                    submitFormio[submitMethod](submission)\n                        .then((result) => resolve({\n                        submission: result,\n                        saved: true,\n                    }))\n                        .catch((error) => {\n                        this.setServerErrors(error);\n                        return reject(error);\n                    });\n                });\n            });\n        });\n    }\n    setServerErrors(error) {\n        if (error.details) {\n            this.serverErrors = error.details\n                .filter((err) => (err.level ? err.level === 'error' : err))\n                .map((err) => {\n                err.fromServer = true;\n                return err;\n            });\n        }\n        else if (typeof error === 'string') {\n            this.serverErrors = [{ fromServer: true, level: 'error', message: error }];\n        }\n    }\n    executeSubmit(options) {\n        this.submitted = true;\n        this.submitting = true;\n        return this.submitForm(options)\n            .then(({ submission, saved }) => this.onSubmit(submission, saved))\n            .then((results) => {\n            this.submissionInProcess = false;\n            return results;\n        })\n            .catch((err) => {\n            this.submissionInProcess = false;\n            return Promise.reject(this.onSubmissionError(err));\n        });\n    }\n    clearServerErrors() {\n        var _a;\n        (_a = this.serverErrors) === null || _a === void 0 ? void 0 : _a.forEach((error) => {\n            if (error.path) {\n                const pathArray = (0, utils_1.getArrayFromComponentPath)(error.path);\n                const component = this.getComponent(pathArray, lodash_1.default.identity, error.formattedKeyOrPath);\n                if (component) {\n                    component.serverErrors = [];\n                }\n            }\n        });\n        this.serverErrors = [];\n    }\n    /**\n     * Submits the form.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.src = 'https://examples.form.io/example';\n     * form.submission = {data: {\n     *   firstName: 'Joe',\n     *   lastName: 'Smith',\n     *   email: 'joe@example.com'\n     * }};\n     * form.submit().then((submission) => {\n     *   console.log(submission);\n     * });\n     * @param {boolean} before - If this submission occured from the before handlers.\n     * @param {any} options - The options to use when submitting this form.\n     * @returns {Promise} - A promise when the form is done submitting.\n     */\n    submit(before = false, options = {}) {\n        this.submissionInProcess = true;\n        if (!before) {\n            return this.beforeSubmit(options).then(() => this.executeSubmit(options));\n        }\n        else {\n            return this.executeSubmit(options);\n        }\n    }\n    submitUrl(URL, headers) {\n        if (!URL) {\n            return console.warn(this.t('missingUrl'));\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> ${this.t('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            const message = this.t('urlNotAttachedToBtn');\n            this.emit('error', message);\n            this.setAlert('warning', message);\n            return console.warn(message);\n        }\n    }\n    triggerCaptcha() {\n        if (!this || !this.components) {\n            return;\n        }\n        const captchaComponent = [];\n        this.eachComponent((component) => {\n            if (/^(re)?captcha$/.test(component.type) && component.component.eventType === 'formLoad') {\n                captchaComponent.push(component);\n            }\n        });\n        if (captchaComponent.length > 0) {\n            captchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);\n        }\n    }\n    set nosubmit(value) {\n        this._nosubmit = !!value;\n        this.emit('nosubmit', this._nosubmit);\n    }\n    get nosubmit() {\n        return this._nosubmit || false;\n    }\n    get conditions() {\n        var _a, _b;\n        return (_b = (_a = this.schema.settings) === null || _a === void 0 ? void 0 : _a.conditions) !== null && _b !== void 0 ? _b : [];\n    }\n    get variables() {\n        var _a, _b;\n        return (_b = (_a = this.schema.settings) === null || _a === void 0 ? void 0 : _a.variables) !== null && _b !== void 0 ? _b : [];\n    }\n}\nexports[\"default\"] = Webform;\nWebform.setBaseUrl = Formio_1.Formio.setBaseUrl;\nWebform.setApiUrl = Formio_1.Formio.setApiUrl;\nWebform.setAppUrl = Formio_1.Formio.setAppUrl;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Webform.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst compare_versions_1 = __webpack_require__(/*! compare-versions */ \"./node_modules/compare-versions/lib/esm/index.js\");\nconst EventEmitter_1 = __importDefault(__webpack_require__(/*! ./EventEmitter */ \"./lib/cjs/EventEmitter.js\"));\nconst i18n_1 = __importDefault(__webpack_require__(/*! ./i18n */ \"./lib/cjs/i18n.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst Components_1 = __importDefault(__webpack_require__(/*! ./components/Components */ \"./lib/cjs/components/Components.js\"));\nconst NestedDataComponent_1 = __importDefault(__webpack_require__(/*! ./components/_classes/nesteddata/NestedDataComponent */ \"./lib/cjs/components/_classes/nesteddata/NestedDataComponent.js\"));\nconst utils_1 = __webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst formUtils_1 = __webpack_require__(/*! ./utils/formUtils */ \"./lib/cjs/utils/formUtils.js\");\n// We need this here because dragula pulls in CustomEvent class that requires global to exist.\nif (typeof window !== 'undefined' && typeof window.global === 'undefined') {\n    window.global = window;\n}\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    }\n    /* eslint-enable max-statements */\n    beforeInit() {\n        this.executeFormController = lodash_1.default.once(this._executeFormController);\n    }\n    get language() {\n        return this.options.language;\n    }\n    get emptyValue() {\n        return null;\n    }\n    get shouldCallFormController() {\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        return (this.form &&\n            this.form.controller &&\n            !((!this.visible || this.component.hidden) &&\n                this.component.clearOnHide &&\n                !this.rootPristine));\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', this.t('newFormSchema'));\n            });\n        }\n        // See if they pass a module, and evaluate it if so.\n        if (form && form.module) {\n            let formModule = null;\n            if (typeof form.module === 'string') {\n                try {\n                    formModule = this.evaluate(`return ${form.module}`);\n                }\n                catch (err) {\n                    console.warn(err);\n                }\n            }\n            else {\n                formModule = form.module;\n            }\n            if (formModule) {\n                Formio_1.Formio.use(formModule);\n                // Since we got here after instantiation, we need to manually apply form options.\n                if (formModule.options && formModule.options.form) {\n                    this.options = Object.assign(this.options, formModule.options.form);\n                }\n            }\n        }\n        this.initialized = false;\n        const rebuild = this.rebuild() || Promise.resolve();\n        return rebuild.then(() => {\n            this.emit('formLoad', form);\n            this.triggerCaptcha();\n            // Make sure to trigger onChange after a render event occurs to speed up form rendering.\n            setTimeout(() => {\n                this.onChange(flags);\n                this.formReadyResolve();\n            }, 0);\n            return this.formReady;\n        });\n    }\n    /**\n     * Gets the form object.\n     * @returns {object} - The form JSON schema.\n     */\n    get form() {\n        if (!this._form) {\n            this._form = {\n                components: [],\n            };\n        }\n        return this._form;\n    }\n    /**\n     * Sets the form value.\n     * @alias setForm\n     * @param {object} form - The form schema object.\n     */\n    set form(form) {\n        this.setForm(form);\n    }\n    /**\n     * Returns the submission object that was set within this form.\n     * @returns {object} - The submission object.\n     */\n    get submission() {\n        return this.getValue();\n    }\n    /**\n     * Sets the submission of a form.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.src = 'https://examples.form.io/example';\n     * form.submission = {data: {\n     *   firstName: 'Joe',\n     *   lastName: 'Smith',\n     *   email: 'joe@example.com'\n     * }};\n     * @param {object} submission - The Form.io submission object.\n     */\n    set submission(submission) {\n        this.setSubmission(submission);\n    }\n    /**\n     * Sets the submission value\n     * @param {object|null|undefined} submission - The submission to set.\n     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.\n     * @returns {void}\n     */\n    onSetSubmission(submission, flags = {}) {\n        this.submissionSet = true;\n        this.triggerChange(flags);\n        this.emit('beforeSetSubmission', submission);\n        this.setValue(submission, flags);\n    }\n    /**\n     * Sets a submission and returns the promise when it is ready.\n     * @param {any} submission - The submission to set.\n     * @param {any} flags - Any flags to apply when setting the submission.\n     * @returns {Promise} - The promise that is triggered when the submission is set.\n     */\n    setSubmission(submission, flags = {}) {\n        flags = Object.assign(Object.assign({}, flags), { fromSubmission: lodash_1.default.has(flags, 'fromSubmission') ? flags.fromSubmission : true });\n        return (this.onSubmission = this.formReady\n            .then((resolveFlags) => {\n            if (resolveFlags) {\n                flags = Object.assign(Object.assign({}, flags), resolveFlags);\n            }\n            this.onSetSubmission(submission, flags);\n            return this.submissionReadyResolve(submission);\n        }, (err) => this.submissionReadyReject(err))\n            .catch((err) => this.submissionReadyReject(err)));\n    }\n    handleDraftError(errName, errDetails, restoreDraft) {\n        const errorMessage = lodash_1.default.trim(`${this.t(errName)} ${errDetails || ''}`);\n        console.warn(errorMessage);\n        this.emit(restoreDraft ? 'restoreDraftError' : 'saveDraftError', errDetails || errorMessage);\n    }\n    saveDraft() {\n        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                if (options === null || options === void 0 ? void 0 : options.instance) {\n                    options.instance.loading = false;\n                }\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        if (this.shouldCallFormController) {\n            this.executeFormController();\n        }\n        return this.formReady;\n    }\n    _executeFormController() {\n        this.formReady.then(() => {\n            this.evaluate(this.form.controller, {\n                components: this.components,\n                instance: this,\n            });\n        });\n    }\n    /**\n     *\n     */\n    teardown() {\n        this.emit('formDelete', this.id);\n        delete Formio_1.Formio.forms[this.id];\n        delete this.executeShortcuts;\n        delete this.triggerSaveDraft;\n        super.teardown();\n    }\n    destroy(all = false) {\n        this.off('submitButton');\n        this.off('checkValidity');\n        this.off('requestUrl');\n        this.off('resetForm');\n        this.off('deleteSubmission');\n        this.off('refreshData');\n        return super.destroy(all);\n    }\n    build(element) {\n        if (element || this.element) {\n            return this.ready.then(() => {\n                element = element || this.element;\n                super.build(element);\n            });\n        }\n        return this.ready;\n    }\n    getClassName() {\n        let classes = 'formio-form';\n        if (this.options.readOnly) {\n            classes += ' formio-read-only';\n        }\n        return classes;\n    }\n    render() {\n        return super.render(this.renderTemplate('webform', {\n            classes: this.getClassName(),\n            children: this.renderComponents(),\n        }), this.builderMode ? 'builder' : 'form', true);\n    }\n    redraw() {\n        // Don't bother if we have not built yet.\n        if (!this.element) {\n            return Promise.resolve();\n        }\n        this.clear();\n        this.setContent(this.element, this.render());\n        return this.attach(this.element);\n    }\n    attach(element) {\n        this.setElement(element);\n        this.loadRefs(element, { webform: 'single' });\n        const childPromise = this.attachComponents(this.refs.webform);\n        this.addEventListener(document, 'keydown', this.executeShortcuts);\n        this.currentForm = this;\n        this.hook('attachWebform', element, this);\n        return childPromise.then(() => {\n            this.emit('render', this.element);\n            return this.setValue(this._submission, {\n                noUpdateEvent: true,\n            });\n        });\n    }\n    hasRequiredFields() {\n        let result = false;\n        (0, formUtils_1.eachComponent)(this.form.components, (component) => {\n            if (component.validate.required) {\n                result = true;\n                return true;\n            }\n        }, true);\n        return result;\n    }\n    resetValue() {\n        lodash_1.default.each(this.getComponents(), (comp) => comp.resetValue());\n        this.setPristine(true);\n        this.onChange({ resetValue: true });\n    }\n    /**\n     * Sets a new alert to display in the error dialog of the form.\n     * @param {string} type - The type of alert to display. 'danger', 'success', 'warning', etc.\n     * @param {string} message - The message to show in the alert.\n     * @param {object} options - The options for the alert.\n     */\n    setAlert(type, message, options) {\n        if (!type && this.submitted) {\n            if (this.alert) {\n                if (this.refs.errorRef && this.refs.errorRef.length) {\n                    this.refs.errorRef.forEach((el) => {\n                        this.removeEventListener(el, 'click');\n                        this.removeEventListener(el, 'keypress');\n                    });\n                }\n                this.removeChild(this.alert);\n                this.alert = null;\n            }\n            return;\n        }\n        if (this.options.noAlerts) {\n            if (!message) {\n                this.emit('error', false);\n            }\n            return;\n        }\n        if (this.alert) {\n            try {\n                if (this.refs.errorRef && this.refs.errorRef.length) {\n                    this.refs.errorRef.forEach((el) => {\n                        this.removeEventListener(el, 'click');\n                        this.removeEventListener(el, 'keypress');\n                    });\n                }\n                this.removeChild(this.alert);\n                this.alert = null;\n            }\n            catch (err) {\n                // ignore\n            }\n        }\n        if (message) {\n            const attrs = {\n                class: (options && options.classes) || `alert alert-${type}`,\n                id: `error-list-${this.id}`,\n            };\n            const templateOptions = {\n                message: message instanceof HTMLElement ? message.outerHTML : message,\n                attrs: attrs,\n                type,\n            };\n            this.alert = (0, utils_1.convertStringToHTMLElement)(this.renderTemplate('alert', templateOptions), `#${attrs.id}`);\n        }\n        if (!this.alert) {\n            return;\n        }\n        this.loadRefs(this.alert, { errorRef: 'multiple' });\n        if (this.refs.errorRef && this.refs.errorRef.length) {\n            this.refs.errorRef.forEach((el) => {\n                this.addEventListener(el, 'click', (e) => {\n                    const key = e.currentTarget.dataset.componentKey;\n                    this.focusOnComponent(key);\n                });\n                this.addEventListener(el, 'keydown', (e) => {\n                    if (e.keyCode === 13) {\n                        e.preventDefault();\n                        const key = e.currentTarget.dataset.componentKey;\n                        this.focusOnComponent(key);\n                    }\n                });\n            });\n        }\n        this.prepend(this.alert);\n    }\n    /**\n     * Focus on selected component.\n     * @param {string} key - The key of selected component.\n     */\n    focusOnComponent(key) {\n        if (key) {\n            const component = this.getComponent(key);\n            if (component) {\n                component.focus();\n            }\n        }\n    }\n    /**\n     * Show the errors of this form within the alert dialog.\n     * @param {object} error - An optional additional error to display along with the component errors.\n     * @returns {*}\n     */\n    /* eslint-disable no-unused-vars */\n    /**\n     *\n     * @param {Array} errors - An array of errors to display.\n     * @param {boolean} triggerEvent - Whether or not to trigger the error event.\n     * @returns {void|Array} - The errors that were set.\n     */\n    showErrors(errors, triggerEvent) {\n        this.loading = false;\n        if (!Array.isArray(errors)) {\n            errors = [errors];\n        }\n        if (Array.isArray(this.errors)) {\n            errors = lodash_1.default.union(errors, this.errors);\n        }\n        errors = errors.concat(this.customErrors).filter((err) => !!err);\n        if (!errors.length) {\n            this.setAlert(false);\n            return;\n        }\n        // Mark any components as invalid if in a custom message.\n        const componentErrors = {};\n        errors.forEach((err) => {\n            var _a, _b;\n            const path = err.path || ((_a = err.context) === null || _a === void 0 ? void 0 : _a.path) || ((_b = err.component) === null || _b === void 0 ? void 0 : _b.key);\n            if (!componentErrors[path]) {\n                componentErrors[path] = [];\n            }\n            componentErrors[path].push(err);\n        });\n        // Iterate through all of our component errors and apply them to the components.\n        for (let path in componentErrors) {\n            const component = this.getComponent(path);\n            const errors = componentErrors[path];\n            if (component) {\n                component.serverErrors = errors.filter((err) => err.fromServer);\n                component.setCustomValidity(errors, true);\n            }\n        }\n        const displayedErrors = [];\n        if (errors.length) {\n            errors = lodash_1.default.uniqBy(errors, (error) => { var _a, _b; return [error.message, (_a = error.component) === null || _a === void 0 ? void 0 : _a.id, (_b = error.context) === null || _b === void 0 ? void 0 : _b.path].join(); });\n            const createListItem = (message, index) => {\n                var _a, _b, _c;\n                const err = errors[index];\n                const messageFromIndex = !lodash_1.default.isUndefined(index) && errors && errors[index];\n                const keyOrPath = (messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.formattedKeyOrPath) ||\n                    (messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.path) ||\n                    ((_a = messageFromIndex === null || messageFromIndex === void 0 ? void 0 : messageFromIndex.context) === null || _a === void 0 ? void 0 : _a.path) ||\n                    (((_b = err.context) === null || _b === void 0 ? void 0 : _b.component) && ((_c = err.context) === null || _c === void 0 ? void 0 : _c.component.key)) ||\n                    (err.component && err.component.key) ||\n                    (err.fromServer && err.path);\n                const formattedKeyOrPath = keyOrPath ? (0, utils_1.getStringFromComponentPath)(keyOrPath) : '';\n                if (typeof err !== 'string' && !err.formattedKeyOrPath) {\n                    err.formattedKeyOrPath = formattedKeyOrPath;\n                }\n                return {\n                    message: (0, utils_1.unescapeHTML)(message),\n                    keyOrPath: formattedKeyOrPath,\n                };\n            };\n            errors.forEach(({ message, context, fromServer, component }, index) => {\n                const text = !(component === null || component === void 0 ? void 0 : component.label) || (context === null || context === void 0 ? void 0 : context.hasLabel) || fromServer\n                    ? this.t('alertMessage', { message: this.t(message) })\n                    : this.t('alertMessageWithLabel', {\n                        label: this.t(component === null || component === void 0 ? void 0 : component.label),\n                        message: this.t(message),\n                    });\n                displayedErrors.push(createListItem(text, index));\n            });\n        }\n        const errorsList = this.renderTemplate('errorsList', { errors: displayedErrors });\n        this.root.setAlert('danger', errorsList);\n        if (triggerEvent) {\n            this.emit('error', errors);\n        }\n        return errors;\n    }\n    /* eslint-enable no-unused-vars */\n    /**\n     * Called when the submission has completed, or if the submission needs to be sent to an external library.\n     * @param {object} submission - The submission object.\n     * @param {boolean} saved - Whether or not this submission was saved to the server.\n     * @returns {object} - The submission object.\n     */\n    onSubmit(submission, saved) {\n        var _a;\n        this.loading = false;\n        this.submitting = false;\n        this.setPristine(true);\n        // We want to return the submitted submission and setValue will mutate the submission so cloneDeep it here.\n        this.setValue((0, utils_1.fastCloneDeep)(submission), {\n            noValidate: true,\n            noCheck: true,\n        });\n        this.setAlert('success', `<p>${this.t('complete')}</p>`);\n        // Cancel triggered saveDraft to prevent overriding the submitted state\n        if (this.draftEnabled && ((_a = this.triggerSaveDraft) === null || _a === void 0 ? void 0 : _a.cancel)) {\n            this.triggerSaveDraft.cancel();\n        }\n        this.emit('submit', submission, saved);\n        if (saved) {\n            this.emit('submitDone', submission);\n        }\n        return submission;\n    }\n    normalizeError(error) {\n        if (error) {\n            if (typeof error === 'object' && 'details' in error) {\n                error = error.details;\n            }\n            if (typeof error === 'string') {\n                error = { message: error };\n            }\n        }\n        return error;\n    }\n    /**\n     * Called when an error occurs during the submission.\n     * @param {object} error - The error that occured.\n     * @returns {Array} errors - All errors.\n     */\n    onSubmissionError(error) {\n        error = this.normalizeError(error);\n        this.submitting = false;\n        this.setPristine(false);\n        this.emit('submitError', error || this.errors);\n        // Allow for silent cancellations (no error message, no submit button error state)\n        if (error && error.silent) {\n            this.emit('change', { isValid: true }, { silent: true });\n            return false;\n        }\n        const errors = this.showErrors(error, true);\n        if (this.root && this.root.alert) {\n            this.scrollIntoView(this.root.alert);\n        }\n        return errors;\n    }\n    /**\n     * Trigger the change event for this form.\n     * @param {any} flags - The flags to set on this change event.\n     * @param {any} changed - The changed object which reflects the changes in the form.\n     * @param {boolean} modified - Whether or not the form has been modified.\n     * @param {any} changes - The changes that have occured in the form.\n     */\n    onChange(flags, changed, modified, changes) {\n        var _a;\n        flags = flags || {};\n        let isChangeEventEmitted = false;\n        if (((_a = this.parent) === null || _a === void 0 ? void 0 : _a.subForm) === this) {\n            super.onChange(Object.assign(Object.assign({}, flags), { modified }), false);\n        }\n        else {\n            super.onChange(flags, true);\n        }\n        const value = lodash_1.default.clone(this.submission);\n        flags.changed = value.changed = changed;\n        flags.changes = changes;\n        if (modified && this.pristine) {\n            this.pristine = false;\n        }\n        this.checkData(value.data, flags);\n        const shouldValidate = !flags.noValidate ||\n            flags.fromIframe ||\n            (flags.fromSubmission && this.rootPristine && this.pristine && flags.changed);\n        const errors = shouldValidate\n            ? this.validate(value.data, Object.assign(Object.assign({}, flags), { noValidate: false, process: 'change' }))\n            : [];\n        value.isValid = (errors || []).filter(err => !err.fromServer).length === 0;\n        this.loading = false;\n        if (this.submitted) {\n            // show server errors while they are not cleaned/fixed\n            const nonComponentServerErrors = lodash_1.default.filter(this.serverErrors || [], (err) => !err.component && !err.path);\n            this.showErrors(nonComponentServerErrors.length ? nonComponentServerErrors : errors);\n        }\n        // See if we need to save the draft of the form.\n        if (modified && this.options.saveDraft) {\n            this.triggerSaveDraft();\n        }\n        if (!flags || !flags.noEmit) {\n            this.emit('change', value, flags, modified);\n            isChangeEventEmitted = true;\n        }\n        // The form is initialized after the first change event occurs.\n        if (isChangeEventEmitted && !this.initialized) {\n            this.emit('initialized');\n            this.initialized = true;\n        }\n    }\n    /**\n     * Send a delete request to the server.\n     * @returns {Promise} - The promise that is triggered when the delete is complete.\n     */\n    deleteSubmission() {\n        return this.formio.deleteSubmission().then(() => {\n            this.emit('submissionDeleted', this.submission);\n            this.resetValue();\n        });\n    }\n    /**\n     * Cancels the submission.\n     * @param {boolean} noconfirm - Whether or not to confirm the cancellation.\n     * @alias reset\n     * @returns {boolean} - TRUE means the submission was cancelled, FALSE otherwise.\n     */\n    cancel(noconfirm) {\n        const shouldReset = this.hook('beforeCancel', true);\n        if (shouldReset && (noconfirm || confirm(this.t('confirmCancel')))) {\n            this.resetValue();\n            return true;\n        }\n        else {\n            this.emit('cancelSubmit');\n            return false;\n        }\n    }\n    setMetadata(submission) {\n        // Add in metadata about client submitting the form\n        submission.metadata = submission.metadata || {};\n        lodash_1.default.defaults(submission.metadata, {\n            timezone: lodash_1.default.get(this, '_submission.metadata.timezone', (0, utils_1.currentTimezone)()),\n            offset: parseInt(lodash_1.default.get(this, '_submission.metadata.offset', (0, moment_1.default)().utcOffset()), 10),\n            origin: document.location.origin,\n            referrer: document.referrer,\n            browserName: navigator.appName,\n            userAgent: navigator.userAgent,\n            pathName: window.location.pathname,\n            onLine: navigator.onLine,\n        });\n    }\n    submitForm(options = {}, local = false) {\n        this.clearServerErrors();\n        return new Promise((resolve, reject) => {\n            // Read-only forms should never submit.\n            if (this.options.readOnly) {\n                return resolve({\n                    submission: this.submission,\n                    saved: false,\n                });\n            }\n            const submission = (0, utils_1.fastCloneDeep)(this.submission || {});\n            this.setMetadata(submission);\n            submission.state = options.state || submission.state || 'submitted';\n            const isDraft = submission.state === 'draft';\n            this.hook('beforeSubmit', Object.assign(Object.assign({}, submission), { component: options.component }), (err, data) => {\n                var _a;\n                if (err) {\n                    return reject(err);\n                }\n                submission._vnote = data && data._vnote ? data._vnote : '';\n                try {\n                    if (!isDraft && !options.noValidate) {\n                        if (!submission.data) {\n                            return reject('Invalid Submission');\n                        }\n                        const errors = this.validate(submission.data, {\n                            local,\n                            dirty: true,\n                            silentCheck: false,\n                            process: 'submit',\n                        });\n                        if (errors.length ||\n                            ((_a = options.beforeSubmitResults) === null || _a === void 0 ? void 0 : _a.some((result) => result.status === 'rejected'))) {\n                            return reject(errors);\n                        }\n                    }\n                }\n                catch (err) {\n                    console.error(err);\n                }\n                this.everyComponent((comp) => {\n                    var _a, _b;\n                    if (submission._vnote && comp.type === 'form' && comp.component.reference) {\n                        lodash_1.default.get(submission.data, local ? (_a = comp.paths) === null || _a === void 0 ? void 0 : _a.localDataPath : comp.path, {})._vnote = submission._vnote;\n                    }\n                    const { persistent } = comp.component;\n                    if (persistent === 'client-only') {\n                        lodash_1.default.unset(submission.data, local ? (_b = comp.paths) === null || _b === void 0 ? void 0 : _b.localDataPath : comp.path);\n                    }\n                });\n                this.hook('customValidation', Object.assign(Object.assign({}, submission), { component: options.component }), (err) => {\n                    if (err) {\n                        // If string is returned, cast to object.\n                        if (typeof err === 'string') {\n                            err = {\n                                message: err,\n                            };\n                        }\n                        // Ensure err is an array.\n                        err = Array.isArray(err) ? err : [err];\n                        return reject(err);\n                    }\n                    this.loading = true;\n                    // Use the form action to submit the form if available.\n                    if (this._form && this._form.action) {\n                        const method = submission.data._id &&\n                            this._form.action.includes(submission.data._id)\n                            ? 'PUT'\n                            : 'POST';\n                        return Formio_1.Formio.makeStaticRequest(this._form.action, method, submission, this.formio ? this.formio.options : {})\n                            .then((result) => resolve({\n                            submission: result,\n                            saved: true,\n                        }))\n                            .catch((error) => {\n                            this.setServerErrors(error);\n                            return reject(error);\n                        });\n                    }\n                    const submitFormio = this.formio;\n                    if (this.nosubmit || !submitFormio) {\n                        return resolve({\n                            submission,\n                            saved: false,\n                        });\n                    }\n                    // If this is an actionUrl, then make sure to save the action and not the submission.\n                    const submitMethod = submitFormio.actionUrl\n                        ? 'saveAction'\n                        : 'saveSubmission';\n                    submitFormio[submitMethod](submission)\n                        .then((result) => resolve({\n                        submission: result,\n                        saved: true,\n                    }))\n                        .catch((error) => {\n                        this.setServerErrors(error);\n                        return reject(error);\n                    });\n                });\n            });\n        });\n    }\n    setServerErrors(error) {\n        if (error.details) {\n            this.serverErrors = error.details\n                .filter((err) => (err.level ? err.level === 'error' : err))\n                .map((err) => {\n                err.fromServer = true;\n                return err;\n            });\n        }\n        else if (typeof error === 'string') {\n            this.serverErrors = [{ fromServer: true, level: 'error', message: error }];\n        }\n    }\n    executeSubmit(options) {\n        this.submitted = true;\n        this.submitting = true;\n        return this.submitForm(options)\n            .then(({ submission, saved }) => this.onSubmit(submission, saved))\n            .then((results) => {\n            this.submissionInProcess = false;\n            return results;\n        })\n            .catch((err) => {\n            this.submissionInProcess = false;\n            return Promise.reject(this.onSubmissionError(err));\n        });\n    }\n    clearServerErrors() {\n        var _a;\n        (_a = this.serverErrors) === null || _a === void 0 ? void 0 : _a.forEach((error) => {\n            if (error.path) {\n                const pathArray = (0, utils_1.getArrayFromComponentPath)(error.path);\n                const component = this.getComponent(pathArray, lodash_1.default.identity, error.formattedKeyOrPath);\n                if (component) {\n                    component.serverErrors = [];\n                }\n            }\n        });\n        this.serverErrors = [];\n    }\n    /**\n     * Submits the form.\n     * @example\n     * import Webform from '@formio/js/Webform';\n     * let form = new Webform(document.getElementById('formio'));\n     * form.src = 'https://examples.form.io/example';\n     * form.submission = {data: {\n     *   firstName: 'Joe',\n     *   lastName: 'Smith',\n     *   email: 'joe@example.com'\n     * }};\n     * form.submit().then((submission) => {\n     *   console.log(submission);\n     * });\n     * @param {boolean} before - If this submission occured from the before handlers.\n     * @param {any} options - The options to use when submitting this form.\n     * @returns {Promise} - A promise when the form is done submitting.\n     */\n    submit(before = false, options = {}) {\n        this.submissionInProcess = true;\n        if (!before) {\n            return this.beforeSubmit(options).then(() => this.executeSubmit(options));\n        }\n        else {\n            return this.executeSubmit(options);\n        }\n    }\n    submitUrl(URL, headers) {\n        if (!URL) {\n            return console.warn(this.t('missingUrl'));\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> ${this.t('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            const message = this.t('urlNotAttachedToBtn');\n            this.emit('error', message);\n            this.setAlert('warning', message);\n            return console.warn(message);\n        }\n    }\n    triggerCaptcha(components = null) {\n        if (!this || !this.components || this.options.preview) {\n            return;\n        }\n        const captchaComponent = [];\n        (0, formUtils_1.eachComponent)(components || this.components, (component) => {\n            if (/^(re)?captcha$/.test(component.type) && component.component.eventType === 'formLoad') {\n                captchaComponent.push(component);\n            }\n        }, true);\n        if (captchaComponent.length > 0) {\n            if (captchaComponent[0].component.provider === 'google' && components) {\n                return;\n            }\n            if (this.parent) {\n                this.parent.subFormReady.then(() => {\n                    captchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);\n                });\n            }\n            else {\n                captchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);\n            }\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?");
 
 /***/ }),
 
@@ -4776,7 +4776,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass Wizard extends Webform_1.default {\n    /**\n     * Constructor for wizard-based forms.\n     * @param {HTMLElement | object | import('Form').FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.\n     * @param {import('Form').FormOptions} [_options] - The options to create a new form instance.\n     *    - breadcrumbSettings.clickable: true (default) - determines if the breadcrumb bar is clickable.\n     *    - buttonSettings.show*(Previous, Next, Cancel): true (default) - determines if the button is shown.\n     *    - allowPrevious: false (default) - determines if the breadcrumb bar is clickable for visited tabs.\n     */\n    constructor(elementOrOptions = undefined, _options = undefined) {\n        let element, options;\n        if (elementOrOptions instanceof HTMLElement || _options) {\n            element = elementOrOptions;\n            options = _options || {};\n        }\n        else {\n            options = elementOrOptions || {};\n        }\n        options.display = 'wizard';\n        super(element, options);\n        this.pages = [];\n        this.prefixComps = [];\n        this.suffixComps = [];\n        this.components = [];\n        this.originalComponents = [];\n        this.page = 0;\n        this.currentPanel = null;\n        this.currentPanels = null;\n        this.currentNextPage = 0;\n        this._seenPages = [0];\n        this.subWizards = [];\n        this.allPages = [];\n        this.lastPromise = Promise.resolve();\n        this.enabledIndex = 0;\n        this.editMode = false;\n        this.originalOptions = lodash_1.default.cloneDeep(this.options);\n    }\n    isLastPage() {\n        const next = this.getNextPage();\n        if (lodash_1.default.isNumber(next)) {\n            return next === -1;\n        }\n        return lodash_1.default.isNull(next);\n    }\n    getPages(args = {}) {\n        const { all = false } = args;\n        const pages = this.hasExtraPages ? this.components : this.pages;\n        const filteredPages = pages\n            .filter(all ? lodash_1.default.identity : (p, index) => this._seenPages.includes(index));\n        return filteredPages;\n    }\n    get hasExtraPages() {\n        return !lodash_1.default.isEmpty(this.subWizards);\n    }\n    get data() {\n        return super.data;\n    }\n    get localData() {\n        var _a, _b;\n        return ((_b = (_a = this.pages[this.page]) === null || _a === void 0 ? void 0 : _a.root) === null || _b === void 0 ? void 0 : _b.submission.data) || this.submission.data;\n    }\n    checkConditions(data, flags, row) {\n        const visible = super.checkConditions(data, flags, row);\n        this.establishPages(data);\n        return visible;\n    }\n    set data(value) {\n        this._data = value;\n        lodash_1.default.each(this.getPages({ all: true }), (component) => {\n            component.data = this.componentContext(component);\n        });\n    }\n    getComponents() {\n        return this.submitting\n            ? this.getPages({ all: this.isLastPage() })\n            : super.getComponents();\n    }\n    resetValue() {\n        this.getPages({ all: true }).forEach((page) => page.resetValue());\n        this.setPristine(true);\n    }\n    init() {\n        var _a;\n        // Check for and initlize button settings object\n        this.options.buttonSettings = lodash_1.default.defaults(this.options.buttonSettings, {\n            showPrevious: true,\n            showNext: true,\n            showSubmit: true,\n            showCancel: !this.options.readOnly\n        });\n        this.options.breadcrumbSettings = lodash_1.default.defaults(this.options.breadcrumbSettings, {\n            clickable: true\n        });\n        this.options.allowPrevious = this.options.allowPrevious || false;\n        this.page = 0;\n        const onReady = super.init();\n        this.setComponentSchema();\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[this.page]) {\n            this.component = this.pages[this.page].component;\n        }\n        this.on('subWizardsUpdated', (subForm) => {\n            const subWizard = this.subWizards.find(subWizard => { var _a; return (subForm === null || subForm === void 0 ? void 0 : subForm.id) && ((_a = subWizard.subForm) === null || _a === void 0 ? void 0 : _a.id) === (subForm === null || subForm === void 0 ? void 0 : subForm.id); });\n            if (this.subWizards.length && subWizard) {\n                subWizard.subForm.setValue(subForm._submission, {}, true);\n                this.establishPages();\n                this.redraw();\n            }\n        });\n        return onReady;\n    }\n    get wizardKey() {\n        return `wizard-${this.id}`;\n    }\n    get wizard() {\n        return this.form;\n    }\n    set wizard(form) {\n        this.setForm(form);\n    }\n    get buttons() {\n        const buttons = {};\n        [\n            { name: 'cancel', method: 'cancel' },\n            { name: 'previous', method: 'prevPage' },\n            { name: 'next', method: 'nextPage' },\n            { name: 'submit', method: 'submit' }\n        ].forEach((button) => {\n            if (this.hasButton(button.name)) {\n                buttons[button.name] = button;\n            }\n        });\n        return buttons;\n    }\n    get buttonOrder() {\n        var _a, _b, _c;\n        const defaultButtonOrder = [\n            'cancel',\n            'previous',\n            'next',\n            'submit'\n        ];\n        return (_c = (_b = (_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.wizardButtonOrder) === null || _b === void 0 ? void 0 : _b.toLowerCase().split(', ')) !== null && _c !== void 0 ? _c : defaultButtonOrder;\n    }\n    get renderContext() {\n        var _a, _b;\n        return {\n            disableWizardSubmit: this.form.disableWizardSubmit,\n            wizardKey: this.wizardKey,\n            isBreadcrumbClickable: this.isBreadcrumbClickable(),\n            isSubForm: !!this.parent && !((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.type) === 'wizard',\n            panels: this.allPages.length ? this.allPages.map(page => page.component) : this.pages.map(page => page.component),\n            buttons: this.buttons,\n            currentPage: this.page,\n            buttonOrder: this.buttonOrder,\n        };\n    }\n    prepareNavigationSettings(ctx) {\n        const currentPanel = this.currentPanel;\n        if (currentPanel && currentPanel.buttonSettings) {\n            Object.keys(currentPanel.buttonSettings).forEach(() => {\n                Object.keys(ctx.buttons).forEach(key => {\n                    if (typeof currentPanel.buttonSettings[key] !== 'undefined' && !currentPanel.buttonSettings[key] || ctx.isSubForm) {\n                        ctx.buttons[key] = null;\n                    }\n                });\n            });\n        }\n        return this.renderTemplate('wizardNav', ctx);\n    }\n    prepareHeaderSettings(ctx, headerType) {\n        var _a;\n        const shouldHideBreadcrumbs = ((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.breadcrumb) === 'none' ||\n            lodash_1.default.get(this.form, 'settings.wizardBreadcrumbsType', '') === 'none';\n        if (shouldHideBreadcrumbs || ctx.isSubForm) {\n            return null;\n        }\n        return this.renderTemplate(headerType, ctx);\n    }\n    render() {\n        const ctx = this.renderContext;\n        if (this.component.key) {\n            ctx.panels.map(panel => {\n                if (panel.key === this.component.key) {\n                    this.currentPanel = panel;\n                    ctx.wizardPageTooltip = this.getFormattedTooltip(panel.tooltip);\n                }\n            });\n        }\n        const wizardNav = this.prepareNavigationSettings(ctx);\n        const wizardHeaderType = `wizardHeader${lodash_1.default.get(this.form, 'settings.wizardHeaderType', '')}`;\n        const wizardHeaderLocation = lodash_1.default.get(this.form, 'settings.wizardHeaderLocation', 'left');\n        const wizardHeader = this.prepareHeaderSettings(ctx, wizardHeaderType);\n        return this.renderTemplate('wizard', Object.assign(Object.assign({}, ctx), { className: super.getClassName(), wizardHeader,\n            wizardHeaderType,\n            wizardHeaderLocation,\n            wizardNav, components: this.renderComponents([\n                ...this.prefixComps,\n                ...this.currentPage.components,\n                ...this.suffixComps\n            ]) }), this.builderMode ? 'builder' : 'form');\n    }\n    redrawNavigation() {\n        if (this.element) {\n            let navElement = this.element.querySelector(`#${this.wizardKey}-nav`);\n            if (navElement) {\n                this.detachNav();\n                navElement.outerHTML = this.renderTemplate('wizardNav', this.renderContext);\n                navElement = this.element.querySelector(`#${this.wizardKey}-nav`);\n                this.loadRefs(navElement, {\n                    [`${this.wizardKey}-cancel`]: 'single',\n                    [`${this.wizardKey}-previous`]: 'single',\n                    [`${this.wizardKey}-next`]: 'single',\n                    [`${this.wizardKey}-submit`]: 'single',\n                });\n                this.attachNav();\n            }\n        }\n    }\n    redrawHeader() {\n        if (this.element) {\n            let headerElement = this.element.querySelector(`#${this.wizardKey}-header`);\n            if (headerElement) {\n                this.detachHeader();\n                headerElement.outerHTML = this.renderTemplate(`wizardHeader${lodash_1.default.get(this.form, 'settings.wizardHeaderType', '')}`, this.renderContext);\n                headerElement = this.element.querySelector(`#${this.wizardKey}-header`);\n                this.loadRefs(headerElement, {\n                    [`${this.wizardKey}-link`]: 'multiple',\n                    [`${this.wizardKey}-tooltip`]: 'multiple'\n                });\n                this.attachHeader();\n            }\n        }\n    }\n    /**\n     * Attaches the wizard to the provided DOM element, initializes component references, sets up navigation,\n     * and emits a render event. It will initialize the wizard's index if necessary,\n     * attach event hooks, and make sure that the current page is rendered and displayed correctly.\n     * @param {HTMLElement} element - The DOM element to which the wizard will be attached.\n     * @returns {Promise} A promise that resolves when all components have been successfully attached.\n     */\n    attach(element) {\n        var _a;\n        this.setElement(element);\n        this.loadRefs(element, {\n            [this.wizardKey]: 'single',\n            [`${this.wizardKey}-header`]: 'single',\n            [`${this.wizardKey}-cancel`]: 'single',\n            [`${this.wizardKey}-previous`]: 'single',\n            [`${this.wizardKey}-next`]: 'single',\n            [`${this.wizardKey}-submit`]: 'single',\n            [`${this.wizardKey}-link`]: 'multiple',\n            [`${this.wizardKey}-tooltip`]: 'multiple'\n        });\n        if ((this.options.readOnly || this.editMode) && !this.enabledIndex) {\n            this.enabledIndex = ((_a = this.pages) === null || _a === void 0 ? void 0 : _a.length) - 1;\n        }\n        this.hook('attachWebform', element, this);\n        const promises = this.attachComponents(this.refs[this.wizardKey], [\n            ...this.prefixComps,\n            ...this.currentPage.components,\n            ...this.suffixComps,\n        ]);\n        this.attachNav();\n        this.attachHeader();\n        return promises.then(() => {\n            this.emit('render', { component: this.currentPage, page: this.page });\n            if (this.component.scrollToTop) {\n                this.scrollPageToTop();\n            }\n        });\n    }\n    scrollPageToTop() {\n        var _a;\n        const pageTop = (_a = this.refs[`${this.wizardKey}-header`]) !== null && _a !== void 0 ? _a : this.refs[this.wizardKey];\n        if (!pageTop) {\n            return;\n        }\n        if ('scrollIntoView' in pageTop) {\n            pageTop.scrollIntoView(true);\n        }\n        else {\n            this.scrollIntoView(pageTop);\n        }\n    }\n    isBreadcrumbClickable() {\n        let currentPage = null;\n        this.pages.map(page => {\n            if (lodash_1.default.isEqual(this.currentPage.component, page.component)) {\n                currentPage = page;\n            }\n        });\n        if (lodash_1.default.has(currentPage, 'component.breadcrumbClickable')) {\n            return lodash_1.default.get(currentPage, 'component.breadcrumbClickable');\n        }\n        if (lodash_1.default.has(this.options, 'breadcrumbSettings.clickable')) {\n            return this.options.breadcrumbSettings.clickable;\n        }\n        return true;\n    }\n    isAllowPrevious() {\n        let currentPage = null;\n        this.pages.map(page => {\n            if (lodash_1.default.isEqual(this.currentPage.component, page.component)) {\n                currentPage = page;\n            }\n        });\n        return lodash_1.default.get(currentPage.component, 'allowPrevious', this.options.allowPrevious);\n    }\n    /**\n     * Handles navigate on 'Enter' key event in a wizard form.\n     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.\n     */\n    handleNaviageteOnEnter(event) {\n        if (event.keyCode === 13) {\n            const clickEvent = new CustomEvent('click');\n            const buttonElement = this.refs[`${this.wizardKey}-${this.buttons.next.name}`];\n            if (buttonElement) {\n                buttonElement.dispatchEvent(clickEvent);\n            }\n        }\n    }\n    /**\n     * Handles save on 'Enter' key event in a wizard form.\n     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.\n     */\n    handleSaveOnEnter(event) {\n        if (event.keyCode === 13) {\n            const clickEvent = new CustomEvent('click');\n            const buttonElement = this.refs[`${this.wizardKey}-${this.buttons.submit.name}`];\n            if (buttonElement) {\n                buttonElement.dispatchEvent(clickEvent);\n            }\n        }\n    }\n    attachNav() {\n        if (this.component.navigateOnEnter) {\n            this.addEventListener(document, 'keyup', this.handleNaviageteOnEnter.bind(this));\n        }\n        if (this.component.saveOnEnter) {\n            this.addEventListener(document, 'keyup', this.handleSaveOnEnter.bind(this));\n        }\n        lodash_1.default.each(this.buttons, (button) => {\n            const buttonElement = this.refs[`${this.wizardKey}-${button.name}`];\n            this.addEventListener(buttonElement, 'click', (event) => {\n                event.preventDefault();\n                // Disable the button until done.\n                buttonElement.setAttribute('disabled', 'disabled');\n                this.setLoading(buttonElement, true);\n                // Call the button method, then re-enable the button.\n                this[button.method]().then(() => {\n                    buttonElement.removeAttribute('disabled');\n                    this.setLoading(buttonElement, false);\n                }).catch(() => {\n                    buttonElement.removeAttribute('disabled');\n                    this.setLoading(buttonElement, false);\n                });\n            });\n        });\n    }\n    /**\n     * Emits an event indicating that a wizard page has been selected.\n     * @param {number} index - Index of the selected wizard page in the `pages` array.\n     * @fires emit - Emits the 'wizardPageSelected' event with the page object and index.\n     */\n    emitWizardPageSelected(index) {\n        this.emit('wizardPageSelected', this.pages[index], index);\n    }\n    attachHeader() {\n        var _a, _b;\n        const isAllowPrevious = this.isAllowPrevious();\n        this.attachTooltips(this.refs[`${this.wizardKey}-tooltip`], (_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.tooltip);\n        if (this.isBreadcrumbClickable() || isAllowPrevious) {\n            (_b = this.refs[`${this.wizardKey}-link`]) === null || _b === void 0 ? void 0 : _b.forEach((link, index) => {\n                if (!isAllowPrevious || index <= this.enabledIndex) {\n                    this.addEventListener(link, 'click', (event) => {\n                        this.emit('wizardNavigationClicked', this.pages[index]);\n                        event.preventDefault();\n                        return this.setPage(index).then(() => {\n                            this.emitWizardPageSelected(index);\n                        });\n                    });\n                }\n            });\n        }\n    }\n    detachNav() {\n        if (this.component.navigateOnEnter) {\n            this.removeEventListener(document, 'keyup', this.handleNaviageteOnEnter.bind(this));\n        }\n        if (this.component.saveOnEnter) {\n            this.removeEventListener(document, 'keyup', this.handleSaveOnEnter.bind(this));\n        }\n        lodash_1.default.each(this.buttons, (button) => {\n            this.removeEventListener(this.refs[`${this.wizardKey}-${button.name}`], 'click');\n        });\n    }\n    detachHeader() {\n        if (this.refs[`${this.wizardKey}-link`]) {\n            this.refs[`${this.wizardKey}-link`].forEach((link) => {\n                this.removeEventListener(link, 'click');\n            });\n        }\n    }\n    transformPages() {\n        const allComponents = [];\n        const components = this.getSortedComponents(this);\n        let defferedComponents = [];\n        this.allPages = [];\n        // Get all components including all nested components and line up in the correct order\n        const getAllComponents = (nestedComp, compsArr, pushAllowed = true) => {\n            const nestedPages = [];\n            const dataArrayComponents = ['datagrid', 'editgrid', 'dynamicWizard'];\n            const currentComponents = (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.subForm) ? this.getSortedComponents(nestedComp.subForm) : (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.components) || [];\n            const visibleComponents = currentComponents.filter(comp => comp._visible);\n            const filteredComponents = visibleComponents.filter(comp => !dataArrayComponents.includes(comp.component.type) && (comp.type !== 'form' || comp.isNestedWizard));\n            const additionalComponents = currentComponents.filter(comp => { var _a; return ((_a = comp.subForm) === null || _a === void 0 ? void 0 : _a._form.display) !== 'wizard'; });\n            let hasNested = false;\n            (0, utils_1.eachComponent)(filteredComponents, (comp) => {\n                if (comp && comp.component) {\n                    if (comp.component.type === 'panel' && (comp === null || comp === void 0 ? void 0 : comp.parent.wizard) && !getAllComponents(comp, compsArr, false)) {\n                        if (pushAllowed) {\n                            this.setRootPanelId(comp);\n                            nestedPages.push(comp);\n                        }\n                        hasNested = true;\n                    }\n                    if (comp.isNestedWizard && comp.subForm) {\n                        const hasNestedForm = getAllComponents(comp, nestedPages, pushAllowed);\n                        if (!hasNested) {\n                            hasNested = hasNestedForm;\n                        }\n                    }\n                }\n            }, true);\n            if (nestedComp.component.type === 'panel') {\n                if (!hasNested && pushAllowed) {\n                    this.setRootPanelId(nestedComp);\n                    compsArr.push(nestedComp);\n                }\n                if (hasNested && additionalComponents.length) {\n                    const newComp = lodash_1.default.clone(nestedComp);\n                    newComp.components = additionalComponents;\n                    this.setRootPanelId(newComp);\n                    defferedComponents.push(newComp);\n                }\n            }\n            if (pushAllowed) {\n                compsArr.push(...defferedComponents, ...nestedPages);\n                defferedComponents = [];\n            }\n            return hasNested;\n        };\n        components.forEach((component) => {\n            if (component.visible) {\n                getAllComponents(component, allComponents);\n            }\n        }, []);\n        // recalculate pages only for root wizards, including the situation when the wizard is in a wrapper\n        if (this.localRoot && this.id === this.localRoot.id) {\n            allComponents.forEach((comp, index) => {\n                comp.eachComponent((component) => {\n                    component.page = index;\n                });\n            });\n        }\n        this.allPages = allComponents;\n    }\n    getSortedComponents({ components, originalComponents }) {\n        const currentComponents = [];\n        const currentPages = [];\n        if (components && components.length) {\n            components.map(page => {\n                if (page.component.type === 'panel') {\n                    currentPages[page.component.key || page.component.title] = page;\n                }\n            });\n        }\n        originalComponents === null || originalComponents === void 0 ? void 0 : originalComponents.forEach((item) => {\n            if (!item.key) {\n                item.key = item.title;\n            }\n            if (currentPages[item.key]) {\n                currentComponents.push(currentPages[item.key]);\n            }\n        });\n        return currentComponents;\n    }\n    findRootPanel(component) {\n        var _a;\n        return ((_a = component.parent) === null || _a === void 0 ? void 0 : _a.parent) ? this.findRootPanel(component.parent) : component;\n    }\n    setRootPanelId(component) {\n        var _a;\n        if (component.rootPanelId && component.rootPanelId !== component.id) {\n            return;\n        }\n        const parent = ((_a = component.parent) === null || _a === void 0 ? void 0 : _a.parent) ? this.findRootPanel(component.parent) : component;\n        component.rootPanelId = parent.id;\n    }\n    establishPages(data = this.data) {\n        this.pages = [];\n        this.prefixComps = [];\n        this.suffixComps = [];\n        const visible = [];\n        const currentPages = {};\n        const pageOptions = Object.assign(Object.assign({}, (lodash_1.default.clone(this.options))), (this.parent ? { root: this } : {}));\n        if (this.components && this.components.length) {\n            this.components.forEach(page => {\n                if (page.component.type === 'panel') {\n                    currentPages[page.component.key || page.component.title] = page;\n                }\n            });\n        }\n        if (this.originalComponents) {\n            this.originalComponents.forEach((item) => {\n                if (item.type === 'panel') {\n                    if (!item.key) {\n                        item.key = item.title;\n                    }\n                    let page = currentPages[item.key];\n                    const forceShow = this.shouldForceShow(item);\n                    const forceHide = this.shouldForceHide(item);\n                    let isVisible = !page\n                        ? (0, utils_1.checkCondition)(item, data, data, this.component, this) && !item.hidden\n                        : page.visible;\n                    if (forceShow) {\n                        isVisible = true;\n                    }\n                    else if (forceHide) {\n                        isVisible = false;\n                    }\n                    if (isVisible) {\n                        visible.push(item);\n                        if (page) {\n                            this.pages.push(page);\n                        }\n                    }\n                    if (!page && isVisible) {\n                        page = this.createComponent(item, pageOptions);\n                        page.visible = isVisible;\n                        this.pages.push(page);\n                        page.eachComponent((component) => {\n                            component.page = (this.pages.length - 1);\n                        });\n                    }\n                }\n                else if (item.type !== 'button') {\n                    if (!this.pages.length) {\n                        this.prefixComps.push(this.createComponent(item, pageOptions));\n                    }\n                    else {\n                        this.suffixComps.push(this.createComponent(item, pageOptions));\n                    }\n                }\n            });\n        }\n        if (this.pages.length) {\n            this.emit('pagesChanged');\n        }\n        this.transformPages();\n        if (this.allPages && this.allPages.length) {\n            this.updatePages();\n        }\n        return visible;\n    }\n    updatePages() {\n        this.pages = this.allPages;\n    }\n    addComponents() {\n        this.establishPages();\n    }\n    setPage(num) {\n        if (num === this.page) {\n            return Promise.resolve();\n        }\n        if (num >= 0 && num < this.pages.length) {\n            this.page = num;\n            this.pageFieldLogic(num);\n            this.getNextPage();\n            let parentNum = num;\n            if (this.hasExtraPages) {\n                const pageFromPages = this.pages[num];\n                const pageFromComponents = this.components[num];\n                if (!pageFromComponents || (pageFromPages === null || pageFromPages === void 0 ? void 0 : pageFromPages.id) !== pageFromComponents.id) {\n                    parentNum = this.components.findIndex(comp => {\n                        var _a, _b;\n                        return comp.id === ((_b = (_a = this.pages) === null || _a === void 0 ? void 0 : _a[parentNum]) === null || _b === void 0 ? void 0 : _b.rootPanelId);\n                    });\n                }\n            }\n            if (!this._seenPages.includes(parentNum)) {\n                this._seenPages = this._seenPages.concat(parentNum);\n            }\n            this.redraw().then(() => {\n                this.checkData(this.submission.data);\n                const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();\n                if (this.alert) {\n                    this.showErrors(errors, true, true);\n                }\n            });\n            return Promise.resolve();\n        }\n        else if (!this.pages.length) {\n            this.redraw();\n            return Promise.resolve();\n        }\n        return Promise.reject(this.t('pageNotFound'));\n    }\n    pageFieldLogic(page) {\n        var _a;\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[page]) {\n            // Handle field logic on pages.\n            this.component = this.pages[page].component;\n            this.originalComponent = (0, utils_1.fastCloneDeep)(this.component);\n            this.fieldLogic(this.data);\n            // If disabled changed, be sure to distribute the setting.\n            this.disabled = this.shouldDisabled;\n        }\n    }\n    get currentPage() {\n        return (this.pages && (this.pages.length >= this.page)) ? this.pages[this.page] : { components: [] };\n    }\n    getNextPage() {\n        var _a;\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[this.page]) {\n            const data = this.submission.data;\n            const form = this.pages[this.page].component;\n            // Check conditional nextPage\n            if (form) {\n                const page = this.pages.length > (this.page + 1) && !this.showAllErrors ? this.page + 1 : -1;\n                if (form.nextPage) {\n                    const next = this.evaluate(form.nextPage, {\n                        next: page,\n                        data,\n                        page,\n                        form\n                    }, 'next');\n                    if (next === null) {\n                        this.currentNextPage = null;\n                        return null;\n                    }\n                    const pageNum = parseInt(next, 10);\n                    if (!isNaN(parseInt(pageNum, 10)) && isFinite(pageNum)) {\n                        this.currentNextPage = pageNum;\n                        return pageNum;\n                    }\n                    this.currentNextPage = this.getPageIndexByKey(next);\n                    return this.currentNextPage;\n                }\n                this.currentNextPage = page;\n                return page;\n            }\n            this.currentNextPage = null;\n        }\n        return null;\n    }\n    getPreviousPage() {\n        return this.page - 1;\n    }\n    beforeSubmit() {\n        const pages = this.getPages();\n        return Promise.all(pages.map((page) => {\n            page.options.beforeSubmit = true;\n            return page.beforeSubmit();\n        }));\n    }\n    beforePage(next) {\n        return new Promise((resolve, reject) => {\n            this.hook(next ? 'beforeNext' : 'beforePrev', this.currentPage, this.submission, (err) => {\n                if (err) {\n                    this.showErrors(err, true);\n                    reject(err);\n                }\n                const form = this.currentPage;\n                if (form) {\n                    form.beforePage(next).then(resolve).catch(reject);\n                }\n                else {\n                    resolve();\n                }\n            });\n        });\n    }\n    emitNextPage() {\n        this.emit('nextPage', { page: this.page, submission: this.submission });\n    }\n    nextPage() {\n        // Read-only forms should not worry about validation before going to next page, nor should they submit.\n        if (this.options.readOnly) {\n            return this.beforePage(true).then(() => {\n                return this.setPage(this.getNextPage()).then(() => {\n                    this.emitNextPage();\n                });\n            });\n        }\n        // Validate the form before going to the next page\n        const currentPageErrors = this.validateCurrentPage({ dirty: true });\n        const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : currentPageErrors;\n        // allow going to the next page if the current page is valid, even if there are form level errors\n        if (currentPageErrors.length === 0) {\n            this.checkData(this.submission.data);\n            return this.beforePage(true).then(() => {\n                return this.setPage(this.getNextPage()).then(() => {\n                    if (!(this.options.readOnly || this.editMode) && this.enabledIndex < this.page) {\n                        this.enabledIndex = this.page;\n                        this.redraw();\n                    }\n                    this.emitNextPage();\n                });\n            });\n        }\n        else {\n            this.currentPage.components.forEach((comp) => comp.setPristine(false));\n            this.scrollIntoView(this.element, true);\n            return Promise.reject(this.showErrors(errors, true));\n        }\n    }\n    validateCurrentPage(flags = {}) {\n        var _a, _b;\n        const components = (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components.map((component) => component.component);\n        // Accessing the parent ensures the right instance (whether it's the parent Wizard or a nested Wizard) performs its validation\n        return (_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.parent.validateComponents(components, this.root.data, flags);\n    }\n    emitPrevPage() {\n        this.emit('prevPage', { page: this.page, submission: this.submission });\n    }\n    prevPage() {\n        return this.beforePage().then(() => {\n            return this.setPage(this.getPreviousPage()).then(() => {\n                this.emitPrevPage();\n            });\n        });\n    }\n    cancel(noconfirm) {\n        if (this.options.readOnly) {\n            return Promise.resolve();\n        }\n        if (super.cancel(noconfirm)) {\n            this.setPristine(true);\n            return this.setPage(0).then(() => {\n                if (this.enabledIndex) {\n                    this.enabledIndex = 0;\n                }\n                this.onChange({ resetValue: true });\n                this.redraw();\n                return this.page;\n            });\n        }\n        return Promise.resolve();\n    }\n    getPageIndexByKey(key) {\n        let pageIndex = this.page;\n        this.pages.forEach((page, index) => {\n            if (page.component.key === key) {\n                pageIndex = index;\n                return false;\n            }\n        });\n        return pageIndex;\n    }\n    get schema() {\n        return this.wizard;\n    }\n    setComponentSchema() {\n        const pageKeys = {};\n        this.originalComponents = [];\n        this.component.components.map((item) => {\n            if (item.type === 'panel') {\n                item.key = (0, utils_1.uniqueKey)(pageKeys, (item.key || 'panel'));\n                pageKeys[item.key] = true;\n                if (this.wizard.full) {\n                    this.options.show = this.options.show || {};\n                    this.options.show[item.key] = true;\n                }\n                else if (Object.prototype.hasOwnProperty.call(this.wizard, 'full')\n                    && !lodash_1.default.isEqual(this.originalOptions.show, this.options.show)) {\n                    this.options.show = Object.assign({}, (this.originalOptions.show || {}));\n                }\n            }\n            this.originalComponents.push(lodash_1.default.clone(item));\n        });\n        if (!Object.keys(pageKeys).length) {\n            const newPage = {\n                type: 'panel',\n                title: 'Page 1',\n                label: 'Page 1',\n                key: 'page1',\n                components: this.component.components\n            };\n            this.component.components = [newPage];\n            this.originalComponents.push(lodash_1.default.clone(newPage));\n        }\n    }\n    setForm(form, flags = {}) {\n        if (!form) {\n            return;\n        }\n        return super.setForm(form, flags);\n    }\n    onSetForm(clonedForm, initialForm) {\n        this.component.components = (this.parent ? initialForm.components : clonedForm.components) || [];\n        this.setComponentSchema();\n    }\n    setEditMode(submission) {\n        if (!this.editMode && submission._id && !this.options.readOnly) {\n            this.editMode = true;\n            this.redraw();\n        }\n    }\n    setValue(submission, flags = {}, ignoreEstablishment) {\n        const changed = this.getPages({ all: true }).reduce((changed, page) => {\n            return this.setNestedValue(page, submission.data, flags, changed) || changed;\n        }, false);\n        this.mergeData(this.data, submission.data);\n        if (changed) {\n            this.pageFieldLogic(this.page);\n        }\n        submission.data = this.data;\n        this._submission = submission;\n        if (!ignoreEstablishment) {\n            this.establishPages(submission.data);\n        }\n        this.setEditMode(submission);\n        return changed;\n    }\n    isClickable(page, index) {\n        return this.page !== index && (0, utils_1.firstNonNil)([\n            lodash_1.default.get(page, 'breadcrumbClickable'),\n            this.options.breadcrumbSettings.clickable\n        ]);\n    }\n    hasButton(name, nextPage = this.getNextPage()) {\n        // get page options with global options as default values\n        const { previous = this.options.buttonSettings.showPrevious, cancel = this.options.buttonSettings.showCancel, submit = this.options.buttonSettings.showSubmit, next = this.options.buttonSettings.showNext } = lodash_1.default.get(this.currentPage, 'component.buttonSettings', {});\n        switch (name) {\n            case 'previous':\n                return previous && (this.getPreviousPage() > -1);\n            case 'next':\n                return next && (nextPage !== null) && (nextPage !== -1);\n            case 'cancel':\n                return cancel && !this.options.readOnly;\n            case 'submit':\n                return submit && !this.options.readOnly && ((nextPage === null) || (this.page === (this.pages.length - 1)));\n            default:\n                return true;\n        }\n    }\n    pageId(page) {\n        if (page.key) {\n            // Some panels have the same key....\n            return `${page.key}-${page.title}`;\n        }\n        else if (page.components &&\n            page.components.length > 0) {\n            return this.pageId(page.components[0]);\n        }\n        else {\n            return page.title;\n        }\n    }\n    onChange(flags, changed, modified, changes) {\n        var _a, _b;\n        super.onChange(flags, changed, modified, changes);\n        // The onChange loop doesn't need all components for wizards\n        const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();\n        if (this.alert) {\n            this.showErrors(errors, true, true);\n        }\n        // If the pages change, need to redraw the header.\n        let currentPanels;\n        let panels;\n        const currentNextPage = this.currentNextPage;\n        if (this.hasExtraPages) {\n            currentPanels = this.pages.map(page => page.component.key);\n            this.establishPages();\n            panels = this.pages.map(page => page.component.key);\n        }\n        else {\n            currentPanels = this.currentPanels || this.pages.map(page => page.component.key);\n            panels = this.establishPages().map(panel => panel.key);\n            this.currentPanels = panels;\n            if (((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.key) && ((_b = this.currentPanels) === null || _b === void 0 ? void 0 : _b.length)) {\n                this.setPage(this.currentPanels.findIndex(panel => panel === this.currentPanel.key));\n            }\n        }\n        if (!lodash_1.default.isEqual(panels, currentPanels) || (flags && flags.fromSubmission)) {\n            this.redrawHeader();\n        }\n        // If the next page changes, then make sure to redraw navigation.\n        if (currentNextPage !== this.getNextPage()) {\n            this.redrawNavigation();\n        }\n        if (this.options.readOnly && (this.prefixComps.length || this.suffixComps.length)) {\n            this.redraw();\n        }\n    }\n    rebuild() {\n        const currentPage = this.page;\n        const setCurrentPage = () => this.setPage(currentPage);\n        return super.rebuild().then(setCurrentPage);\n    }\n    checkValidity(data, dirty, row, currentPageOnly, childErrors = []) {\n        if (!this.checkCondition(row, data)) {\n            this.setCustomValidity('');\n            return true;\n        }\n        const components = !currentPageOnly || this.isLastPage()\n            ? this.getComponents()\n            : this.currentPage.components;\n        return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, currentPageOnly, childErrors) && check, true);\n    }\n    get errors() {\n        return !this.isLastPage() && !this.submitted ? this.currentPage.errors : super.errors;\n    }\n    focusOnComponent(key) {\n        const component = this.getComponent(key);\n        if (component) {\n            let topPanel = component.parent;\n            while (!(topPanel.parent instanceof Wizard)) {\n                topPanel = topPanel.parent;\n            }\n            const pageIndex = this.pages.findIndex(page => page.id === topPanel.id);\n            if (pageIndex >= 0) {\n                const page = this.pages[pageIndex];\n                if (page && page !== this.currentPage) {\n                    return this.setPage(pageIndex).then(() => {\n                        this.showErrors(this.validate(this.localData, { dirty: true }));\n                        super.focusOnComponent(key);\n                    });\n                }\n            }\n        }\n        return super.focusOnComponent(key);\n    }\n}\nexports[\"default\"] = Wizard;\nWizard.setBaseUrl = Formio_1.Formio.setBaseUrl;\nWizard.setApiUrl = Formio_1.Formio.setApiUrl;\nWizard.setAppUrl = Formio_1.Formio.setAppUrl;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Wizard.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass Wizard extends Webform_1.default {\n    /**\n     * Constructor for wizard-based forms.\n     * @param {HTMLElement | object | import('Form').FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.\n     * @param {import('Form').FormOptions} [_options] - The options to create a new form instance.\n     *    - breadcrumbSettings.clickable: true (default) - determines if the breadcrumb bar is clickable.\n     *    - buttonSettings.show*(Previous, Next, Cancel): true (default) - determines if the button is shown.\n     *    - allowPrevious: false (default) - determines if the breadcrumb bar is clickable for visited tabs.\n     */\n    constructor(elementOrOptions = undefined, _options = undefined) {\n        let element, options;\n        if (elementOrOptions instanceof HTMLElement || _options) {\n            element = elementOrOptions;\n            options = _options || {};\n        }\n        else {\n            options = elementOrOptions || {};\n        }\n        options.display = 'wizard';\n        super(element, options);\n        this.pages = [];\n        this.prefixComps = [];\n        this.suffixComps = [];\n        this.components = [];\n        this.originalComponents = [];\n        this.page = 0;\n        this.currentPanel = null;\n        this.currentPanels = null;\n        this.currentNextPage = 0;\n        this._seenPages = [0];\n        this.subWizards = [];\n        this.allPages = [];\n        this.lastPromise = Promise.resolve();\n        this.enabledIndex = 0;\n        this.editMode = false;\n        this.originalOptions = lodash_1.default.cloneDeep(this.options);\n    }\n    isLastPage() {\n        const next = this.getNextPage();\n        if (lodash_1.default.isNumber(next)) {\n            return next === -1;\n        }\n        return lodash_1.default.isNull(next);\n    }\n    getPages(args = {}) {\n        const { all = false } = args;\n        const pages = this.hasExtraPages ? this.components : this.pages;\n        const filteredPages = pages\n            .filter(all ? lodash_1.default.identity : (p, index) => this._seenPages.includes(index));\n        return filteredPages;\n    }\n    get hasExtraPages() {\n        return !lodash_1.default.isEmpty(this.subWizards);\n    }\n    get data() {\n        return super.data;\n    }\n    get localData() {\n        var _a, _b;\n        return ((_b = (_a = this.pages[this.page]) === null || _a === void 0 ? void 0 : _a.root) === null || _b === void 0 ? void 0 : _b.submission.data) || this.submission.data;\n    }\n    checkConditions(data, flags, row) {\n        const visible = super.checkConditions(data, flags, row);\n        this.establishPages(data);\n        return visible;\n    }\n    set data(value) {\n        this._data = value;\n        lodash_1.default.each(this.getPages({ all: true }), (component) => {\n            component.data = this.componentContext(component);\n        });\n    }\n    getComponents() {\n        return this.submitting\n            ? this.getPages({ all: this.isLastPage() })\n            : super.getComponents();\n    }\n    resetValue() {\n        this.getPages({ all: true }).forEach((page) => page.resetValue());\n        this.setPristine(true);\n    }\n    init() {\n        var _a;\n        // Check for and initlize button settings object\n        this.options.buttonSettings = lodash_1.default.defaults(this.options.buttonSettings, {\n            showPrevious: true,\n            showNext: true,\n            showSubmit: true,\n            showCancel: !this.options.readOnly\n        });\n        this.options.breadcrumbSettings = lodash_1.default.defaults(this.options.breadcrumbSettings, {\n            clickable: true\n        });\n        this.options.allowPrevious = this.options.allowPrevious || false;\n        this.page = 0;\n        const onReady = super.init();\n        this.setComponentSchema();\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[this.page]) {\n            this.component = this.pages[this.page].component;\n        }\n        this.on('subWizardsUpdated', (subForm) => {\n            const subWizard = this.subWizards.find(subWizard => { var _a; return (subForm === null || subForm === void 0 ? void 0 : subForm.id) && ((_a = subWizard.subForm) === null || _a === void 0 ? void 0 : _a.id) === (subForm === null || subForm === void 0 ? void 0 : subForm.id); });\n            if (this.subWizards.length && subWizard) {\n                subWizard.subForm.setValue(subForm._submission, {}, true);\n                this.establishPages();\n                this.redraw();\n            }\n        });\n        return onReady;\n    }\n    get wizardKey() {\n        return `wizard-${this.id}`;\n    }\n    get wizard() {\n        return this.form;\n    }\n    set wizard(form) {\n        this.setForm(form);\n    }\n    get buttons() {\n        const buttons = {};\n        [\n            { name: 'cancel', method: 'cancel' },\n            { name: 'previous', method: 'prevPage' },\n            { name: 'next', method: 'nextPage' },\n            { name: 'submit', method: 'submit' }\n        ].forEach((button) => {\n            if (this.hasButton(button.name)) {\n                buttons[button.name] = button;\n            }\n        });\n        return buttons;\n    }\n    get buttonOrder() {\n        var _a, _b, _c;\n        const defaultButtonOrder = [\n            'cancel',\n            'previous',\n            'next',\n            'submit'\n        ];\n        return (_c = (_b = (_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.wizardButtonOrder) === null || _b === void 0 ? void 0 : _b.toLowerCase().split(', ')) !== null && _c !== void 0 ? _c : defaultButtonOrder;\n    }\n    get renderContext() {\n        var _a, _b;\n        return {\n            disableWizardSubmit: this.form.disableWizardSubmit,\n            wizardKey: this.wizardKey,\n            isBreadcrumbClickable: this.isBreadcrumbClickable(),\n            isSubForm: !!this.parent && !((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.type) === 'wizard',\n            panels: this.allPages.length ? this.allPages.map(page => page.component) : this.pages.map(page => page.component),\n            buttons: this.buttons,\n            currentPage: this.page,\n            buttonOrder: this.buttonOrder,\n        };\n    }\n    prepareNavigationSettings(ctx) {\n        const currentPanel = this.currentPanel;\n        if (currentPanel && currentPanel.buttonSettings) {\n            Object.keys(currentPanel.buttonSettings).forEach(() => {\n                Object.keys(ctx.buttons).forEach(key => {\n                    if (typeof currentPanel.buttonSettings[key] !== 'undefined' && !currentPanel.buttonSettings[key] || ctx.isSubForm) {\n                        ctx.buttons[key] = null;\n                    }\n                });\n            });\n        }\n        return this.renderTemplate('wizardNav', ctx);\n    }\n    prepareHeaderSettings(ctx, headerType) {\n        var _a;\n        const shouldHideBreadcrumbs = ((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.breadcrumb) === 'none' ||\n            lodash_1.default.get(this.form, 'settings.wizardBreadcrumbsType', '') === 'none';\n        if (shouldHideBreadcrumbs || ctx.isSubForm) {\n            return null;\n        }\n        return this.renderTemplate(headerType, ctx);\n    }\n    render() {\n        const ctx = this.renderContext;\n        if (this.component.key) {\n            ctx.panels.map(panel => {\n                if (panel.key === this.component.key) {\n                    this.currentPanel = panel;\n                    ctx.wizardPageTooltip = this.getFormattedTooltip(panel.tooltip);\n                }\n            });\n        }\n        const wizardNav = this.prepareNavigationSettings(ctx);\n        const wizardHeaderType = `wizardHeader${lodash_1.default.get(this.form, 'settings.wizardHeaderType', '')}`;\n        const wizardHeaderLocation = lodash_1.default.get(this.form, 'settings.wizardHeaderLocation', 'left');\n        const wizardHeader = this.prepareHeaderSettings(ctx, wizardHeaderType);\n        return this.renderTemplate('wizard', Object.assign(Object.assign({}, ctx), { className: super.getClassName(), wizardHeader,\n            wizardHeaderType,\n            wizardHeaderLocation,\n            wizardNav, components: this.renderComponents([\n                ...this.prefixComps,\n                ...this.currentPage.components,\n                ...this.suffixComps\n            ]) }), this.builderMode ? 'builder' : 'form');\n    }\n    redrawNavigation() {\n        if (this.element) {\n            let navElement = this.element.querySelector(`#${this.wizardKey}-nav`);\n            if (navElement) {\n                this.detachNav();\n                navElement.outerHTML = this.renderTemplate('wizardNav', this.renderContext);\n                navElement = this.element.querySelector(`#${this.wizardKey}-nav`);\n                this.loadRefs(navElement, {\n                    [`${this.wizardKey}-cancel`]: 'single',\n                    [`${this.wizardKey}-previous`]: 'single',\n                    [`${this.wizardKey}-next`]: 'single',\n                    [`${this.wizardKey}-submit`]: 'single',\n                });\n                this.attachNav();\n            }\n        }\n    }\n    redrawHeader() {\n        if (this.element) {\n            let headerElement = this.element.querySelector(`#${this.wizardKey}-header`);\n            if (headerElement) {\n                this.detachHeader();\n                headerElement.outerHTML = this.renderTemplate(`wizardHeader${lodash_1.default.get(this.form, 'settings.wizardHeaderType', '')}`, this.renderContext);\n                headerElement = this.element.querySelector(`#${this.wizardKey}-header`);\n                this.loadRefs(headerElement, {\n                    [`${this.wizardKey}-link`]: 'multiple',\n                    [`${this.wizardKey}-tooltip`]: 'multiple'\n                });\n                this.attachHeader();\n            }\n        }\n    }\n    /**\n     * Attaches the wizard to the provided DOM element, initializes component references, sets up navigation,\n     * and emits a render event. It will initialize the wizard's index if necessary,\n     * attach event hooks, and make sure that the current page is rendered and displayed correctly.\n     * @param {HTMLElement} element - The DOM element to which the wizard will be attached.\n     * @returns {Promise} A promise that resolves when all components have been successfully attached.\n     */\n    attach(element) {\n        var _a;\n        this.setElement(element);\n        this.loadRefs(element, {\n            [this.wizardKey]: 'single',\n            [`${this.wizardKey}-header`]: 'single',\n            [`${this.wizardKey}-cancel`]: 'single',\n            [`${this.wizardKey}-previous`]: 'single',\n            [`${this.wizardKey}-next`]: 'single',\n            [`${this.wizardKey}-submit`]: 'single',\n            [`${this.wizardKey}-link`]: 'multiple',\n            [`${this.wizardKey}-tooltip`]: 'multiple'\n        });\n        if ((this.options.readOnly || this.editMode) && !this.enabledIndex) {\n            this.enabledIndex = ((_a = this.pages) === null || _a === void 0 ? void 0 : _a.length) - 1;\n        }\n        this.hook('attachWebform', element, this);\n        const promises = this.attachComponents(this.refs[this.wizardKey], [\n            ...this.prefixComps,\n            ...this.currentPage.components,\n            ...this.suffixComps,\n        ]);\n        this.attachNav();\n        this.attachHeader();\n        return promises.then(() => {\n            this.emit('render', { component: this.currentPage, page: this.page });\n            if (this.component.scrollToTop) {\n                this.scrollPageToTop();\n            }\n        });\n    }\n    scrollPageToTop() {\n        var _a;\n        const pageTop = (_a = this.refs[`${this.wizardKey}-header`]) !== null && _a !== void 0 ? _a : this.refs[this.wizardKey];\n        if (!pageTop) {\n            return;\n        }\n        if ('scrollIntoView' in pageTop) {\n            pageTop.scrollIntoView(true);\n        }\n        else {\n            this.scrollIntoView(pageTop);\n        }\n    }\n    isBreadcrumbClickable() {\n        let currentPage = null;\n        this.pages.map(page => {\n            if (lodash_1.default.isEqual(this.currentPage.component, page.component)) {\n                currentPage = page;\n            }\n        });\n        if (lodash_1.default.has(currentPage, 'component.breadcrumbClickable')) {\n            return lodash_1.default.get(currentPage, 'component.breadcrumbClickable');\n        }\n        if (lodash_1.default.has(this.options, 'breadcrumbSettings.clickable')) {\n            return this.options.breadcrumbSettings.clickable;\n        }\n        return true;\n    }\n    isAllowPrevious() {\n        let currentPage = null;\n        this.pages.map(page => {\n            if (lodash_1.default.isEqual(this.currentPage.component, page.component)) {\n                currentPage = page;\n            }\n        });\n        return lodash_1.default.get(currentPage.component, 'allowPrevious', this.options.allowPrevious);\n    }\n    /**\n     * Handles navigate on 'Enter' key event in a wizard form.\n     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.\n     */\n    handleNaviageteOnEnter(event) {\n        if (event.keyCode === 13) {\n            const clickEvent = new CustomEvent('click');\n            const buttonElement = this.refs[`${this.wizardKey}-${this.buttons.next.name}`];\n            if (buttonElement) {\n                buttonElement.dispatchEvent(clickEvent);\n            }\n        }\n    }\n    /**\n     * Handles save on 'Enter' key event in a wizard form.\n     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.\n     */\n    handleSaveOnEnter(event) {\n        if (event.keyCode === 13) {\n            const clickEvent = new CustomEvent('click');\n            const buttonElement = this.refs[`${this.wizardKey}-${this.buttons.submit.name}`];\n            if (buttonElement) {\n                buttonElement.dispatchEvent(clickEvent);\n            }\n        }\n    }\n    attachNav() {\n        if (this.component.navigateOnEnter) {\n            this.addEventListener(document, 'keyup', this.handleNaviageteOnEnter.bind(this));\n        }\n        if (this.component.saveOnEnter) {\n            this.addEventListener(document, 'keyup', this.handleSaveOnEnter.bind(this));\n        }\n        lodash_1.default.each(this.buttons, (button) => {\n            const buttonElement = this.refs[`${this.wizardKey}-${button.name}`];\n            this.addEventListener(buttonElement, 'click', (event) => {\n                event.preventDefault();\n                // Disable the button until done.\n                buttonElement.setAttribute('disabled', 'disabled');\n                this.setLoading(buttonElement, true);\n                // Call the button method, then re-enable the button.\n                this[button.method]().then(() => {\n                    buttonElement.removeAttribute('disabled');\n                    this.setLoading(buttonElement, false);\n                }).catch(() => {\n                    buttonElement.removeAttribute('disabled');\n                    this.setLoading(buttonElement, false);\n                });\n            });\n        });\n    }\n    /**\n     * Emits an event indicating that a wizard page has been selected.\n     * @param {number} index - Index of the selected wizard page in the `pages` array.\n     * @fires emit - Emits the 'wizardPageSelected' event with the page object and index.\n     */\n    emitWizardPageSelected(index) {\n        this.emit('wizardPageSelected', this.pages[index], index);\n    }\n    attachHeader() {\n        var _a, _b;\n        const isAllowPrevious = this.isAllowPrevious();\n        this.attachTooltips(this.refs[`${this.wizardKey}-tooltip`], (_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.tooltip);\n        if (this.isBreadcrumbClickable() || isAllowPrevious) {\n            (_b = this.refs[`${this.wizardKey}-link`]) === null || _b === void 0 ? void 0 : _b.forEach((link, index) => {\n                if (!isAllowPrevious || index <= this.enabledIndex) {\n                    this.addEventListener(link, 'click', (event) => {\n                        this.emit('wizardNavigationClicked', this.pages[index]);\n                        event.preventDefault();\n                        return this.setPage(index).then(() => {\n                            this.emitWizardPageSelected(index);\n                        });\n                    });\n                }\n            });\n        }\n    }\n    detachNav() {\n        if (this.component.navigateOnEnter) {\n            this.removeEventListener(document, 'keyup', this.handleNaviageteOnEnter.bind(this));\n        }\n        if (this.component.saveOnEnter) {\n            this.removeEventListener(document, 'keyup', this.handleSaveOnEnter.bind(this));\n        }\n        lodash_1.default.each(this.buttons, (button) => {\n            this.removeEventListener(this.refs[`${this.wizardKey}-${button.name}`], 'click');\n        });\n    }\n    detachHeader() {\n        if (this.refs[`${this.wizardKey}-link`]) {\n            this.refs[`${this.wizardKey}-link`].forEach((link) => {\n                this.removeEventListener(link, 'click');\n            });\n        }\n    }\n    transformPages() {\n        const allComponents = [];\n        const components = this.getSortedComponents(this);\n        let defferedComponents = [];\n        this.allPages = [];\n        // Get all components including all nested components and line up in the correct order\n        const getAllComponents = (nestedComp, compsArr, pushAllowed = true) => {\n            const nestedPages = [];\n            const dataArrayComponents = ['datagrid', 'editgrid', 'dynamicWizard'];\n            const currentComponents = (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.subForm) ? this.getSortedComponents(nestedComp.subForm) : (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.components) || [];\n            const visibleComponents = currentComponents.filter(comp => comp._visible);\n            const filteredComponents = visibleComponents.filter(comp => !dataArrayComponents.includes(comp.component.type) && (comp.type !== 'form' || comp.isNestedWizard));\n            const additionalComponents = currentComponents.filter(comp => { var _a; return ((_a = comp.subForm) === null || _a === void 0 ? void 0 : _a._form.display) !== 'wizard'; });\n            let hasNested = false;\n            (0, utils_1.eachComponent)(filteredComponents, (comp) => {\n                if (comp && comp.component) {\n                    if (comp.component.type === 'panel' && (comp === null || comp === void 0 ? void 0 : comp.parent.wizard) && !getAllComponents(comp, compsArr, false)) {\n                        if (pushAllowed) {\n                            this.setRootPanelId(comp);\n                            nestedPages.push(comp);\n                        }\n                        hasNested = true;\n                    }\n                    if (comp.isNestedWizard && comp.subForm) {\n                        const hasNestedForm = getAllComponents(comp, nestedPages, pushAllowed);\n                        if (!hasNested) {\n                            hasNested = hasNestedForm;\n                        }\n                    }\n                }\n            }, true);\n            if (nestedComp.component.type === 'panel') {\n                if (!hasNested && pushAllowed) {\n                    this.setRootPanelId(nestedComp);\n                    compsArr.push(nestedComp);\n                }\n                if (hasNested && additionalComponents.length) {\n                    const newComp = lodash_1.default.clone(nestedComp);\n                    newComp.components = additionalComponents;\n                    this.setRootPanelId(newComp);\n                    defferedComponents.push(newComp);\n                }\n            }\n            if (pushAllowed) {\n                compsArr.push(...defferedComponents, ...nestedPages);\n                defferedComponents = [];\n            }\n            return hasNested;\n        };\n        components.forEach((component) => {\n            if (component.visible) {\n                getAllComponents(component, allComponents);\n            }\n        }, []);\n        // recalculate pages only for root wizards, including the situation when the wizard is in a wrapper\n        if (this.localRoot && this.id === this.localRoot.id) {\n            allComponents.forEach((comp, index) => {\n                comp.eachComponent((component) => {\n                    component.page = index;\n                });\n            });\n        }\n        this.allPages = allComponents;\n    }\n    getSortedComponents({ components, originalComponents }) {\n        const currentComponents = [];\n        const currentPages = [];\n        if (components && components.length) {\n            components.map(page => {\n                if (page.component.type === 'panel') {\n                    currentPages[page.component.key || page.component.title] = page;\n                }\n            });\n        }\n        originalComponents === null || originalComponents === void 0 ? void 0 : originalComponents.forEach((item) => {\n            if (!item.key) {\n                item.key = item.title;\n            }\n            if (currentPages[item.key]) {\n                currentComponents.push(currentPages[item.key]);\n            }\n        });\n        return currentComponents;\n    }\n    findRootPanel(component) {\n        var _a;\n        return ((_a = component.parent) === null || _a === void 0 ? void 0 : _a.parent) ? this.findRootPanel(component.parent) : component;\n    }\n    setRootPanelId(component) {\n        var _a;\n        if (component.rootPanelId && component.rootPanelId !== component.id) {\n            return;\n        }\n        const parent = ((_a = component.parent) === null || _a === void 0 ? void 0 : _a.parent) ? this.findRootPanel(component.parent) : component;\n        component.rootPanelId = parent.id;\n    }\n    establishPages(data = this.data) {\n        this.pages = [];\n        this.prefixComps = [];\n        this.suffixComps = [];\n        const visible = [];\n        const currentPages = {};\n        const pageOptions = Object.assign(Object.assign({}, (lodash_1.default.clone(this.options))), (this.parent ? { root: this } : {}));\n        if (this.components && this.components.length) {\n            this.components.forEach(page => {\n                if (page.component.type === 'panel') {\n                    currentPages[page.component.key || page.component.title] = page;\n                }\n            });\n        }\n        if (this.originalComponents) {\n            this.originalComponents.forEach((item) => {\n                if (item.type === 'panel') {\n                    if (!item.key) {\n                        item.key = item.title;\n                    }\n                    let page = currentPages[item.key];\n                    const forceShow = this.shouldForceShow(item);\n                    const forceHide = this.shouldForceHide(item);\n                    let isVisible = !page\n                        ? (0, utils_1.checkCondition)(item, data, data, this.component, this) && !item.hidden\n                        : page.visible;\n                    if (forceShow) {\n                        isVisible = true;\n                    }\n                    else if (forceHide) {\n                        isVisible = false;\n                    }\n                    if (isVisible) {\n                        visible.push(item);\n                        if (page) {\n                            this.pages.push(page);\n                        }\n                    }\n                    if (!page && isVisible) {\n                        page = this.createComponent(item, pageOptions);\n                        page.visible = isVisible;\n                        this.pages.push(page);\n                        page.eachComponent((component) => {\n                            component.page = (this.pages.length - 1);\n                        });\n                    }\n                }\n                else if (item.type !== 'button') {\n                    if (!this.pages.length) {\n                        this.prefixComps.push(this.createComponent(item, pageOptions));\n                    }\n                    else {\n                        this.suffixComps.push(this.createComponent(item, pageOptions));\n                    }\n                }\n            });\n        }\n        if (this.pages.length) {\n            this.emit('pagesChanged');\n        }\n        this.transformPages();\n        if (this.allPages && this.allPages.length) {\n            this.updatePages();\n        }\n        return visible;\n    }\n    updatePages() {\n        this.pages = this.allPages;\n    }\n    addComponents() {\n        this.establishPages();\n    }\n    setPage(num) {\n        if (num === this.page) {\n            return Promise.resolve();\n        }\n        if (num >= 0 && num < this.pages.length) {\n            this.page = num;\n            this.pageFieldLogic(num);\n            this.getNextPage();\n            let parentNum = num;\n            if (this.hasExtraPages) {\n                const pageFromPages = this.pages[num];\n                const pageFromComponents = this.components[num];\n                if (!pageFromComponents || (pageFromPages === null || pageFromPages === void 0 ? void 0 : pageFromPages.id) !== pageFromComponents.id) {\n                    parentNum = this.components.findIndex(comp => {\n                        var _a, _b;\n                        return comp.id === ((_b = (_a = this.pages) === null || _a === void 0 ? void 0 : _a[parentNum]) === null || _b === void 0 ? void 0 : _b.rootPanelId);\n                    });\n                }\n            }\n            if (!this._seenPages.includes(parentNum)) {\n                this._seenPages = this._seenPages.concat(parentNum);\n            }\n            this.redraw().then(() => {\n                this.checkData(this.submission.data);\n                this.triggerCaptcha(this.currentPanel.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(this.t('pageNotFound'));\n    }\n    pageFieldLogic(page) {\n        var _a;\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[page]) {\n            // Handle field logic on pages.\n            this.component = this.pages[page].component;\n            this.originalComponent = (0, utils_1.fastCloneDeep)(this.component);\n            this.fieldLogic(this.data);\n            // If disabled changed, be sure to distribute the setting.\n            this.disabled = this.shouldDisabled;\n        }\n    }\n    get currentPage() {\n        return (this.pages && (this.pages.length >= this.page)) ? this.pages[this.page] : { components: [] };\n    }\n    getNextPage() {\n        var _a;\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[this.page]) {\n            const data = this.submission.data;\n            const form = this.pages[this.page].component;\n            // Check conditional nextPage\n            if (form) {\n                const page = this.pages.length > (this.page + 1) && !this.showAllErrors ? this.page + 1 : -1;\n                if (form.nextPage) {\n                    const next = this.evaluate(form.nextPage, {\n                        next: page,\n                        data,\n                        page,\n                        form\n                    }, 'next');\n                    if (next === null) {\n                        this.currentNextPage = null;\n                        return null;\n                    }\n                    const pageNum = parseInt(next, 10);\n                    if (!isNaN(parseInt(pageNum, 10)) && isFinite(pageNum)) {\n                        this.currentNextPage = pageNum;\n                        return pageNum;\n                    }\n                    this.currentNextPage = this.getPageIndexByKey(next);\n                    return this.currentNextPage;\n                }\n                this.currentNextPage = page;\n                return page;\n            }\n            this.currentNextPage = null;\n        }\n        return null;\n    }\n    getPreviousPage() {\n        return this.page - 1;\n    }\n    beforeSubmit() {\n        const pages = this.getPages({ all: true });\n        return Promise.all(pages.map((page) => {\n            page.options.beforeSubmit = true;\n            return page.beforeSubmit();\n        }));\n    }\n    beforePage(next) {\n        return new Promise((resolve, reject) => {\n            this.hook(next ? 'beforeNext' : 'beforePrev', this.currentPage, this.submission, (err) => {\n                if (err) {\n                    this.showErrors(err, true);\n                    reject(err);\n                }\n                const form = this.currentPage;\n                if (form) {\n                    form.beforePage(next).then(resolve).catch(reject);\n                }\n                else {\n                    resolve();\n                }\n            });\n        });\n    }\n    emitNextPage() {\n        this.emit('nextPage', { page: this.page, submission: this.submission });\n    }\n    nextPage() {\n        // Read-only forms should not worry about validation before going to next page, nor should they submit.\n        if (this.options.readOnly) {\n            return this.beforePage(true).then(() => {\n                return this.setPage(this.getNextPage()).then(() => {\n                    this.emitNextPage();\n                });\n            });\n        }\n        // Validate the form before going to the next page\n        const currentPageErrors = this.validateCurrentPage({ dirty: true });\n        const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : currentPageErrors;\n        // allow going to the next page if the current page is valid, even if there are form level errors\n        if (currentPageErrors.length === 0) {\n            this.checkData(this.submission.data);\n            return this.beforePage(true).then(() => {\n                return this.setPage(this.getNextPage()).then(() => {\n                    if (!(this.options.readOnly || this.editMode) && this.enabledIndex < this.page) {\n                        this.enabledIndex = this.page;\n                        this.redraw();\n                    }\n                    this.emitNextPage();\n                });\n            });\n        }\n        else {\n            this.currentPage.components.forEach((comp) => comp.setPristine(false));\n            this.scrollIntoView(this.element, true);\n            return Promise.reject(this.showErrors(errors, true));\n        }\n    }\n    validateCurrentPage(flags = {}) {\n        var _a, _b;\n        const components = (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components.map((component) => component.component);\n        // Accessing the parent ensures the right instance (whether it's the parent Wizard or a nested Wizard) performs its validation\n        return (_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.parent.validateComponents(components, this.root.data, flags);\n    }\n    emitPrevPage() {\n        this.emit('prevPage', { page: this.page, submission: this.submission });\n    }\n    prevPage() {\n        return this.beforePage().then(() => {\n            return this.setPage(this.getPreviousPage()).then(() => {\n                this.emitPrevPage();\n            });\n        });\n    }\n    cancel(noconfirm) {\n        if (this.options.readOnly) {\n            return Promise.resolve();\n        }\n        if (super.cancel(noconfirm)) {\n            this.setPristine(true);\n            return this.setPage(0).then(() => {\n                if (this.enabledIndex) {\n                    this.enabledIndex = 0;\n                }\n                this.onChange({ resetValue: true });\n                this.redraw();\n                return this.page;\n            });\n        }\n        return Promise.resolve();\n    }\n    getPageIndexByKey(key) {\n        let pageIndex = this.page;\n        this.pages.forEach((page, index) => {\n            if (page.component.key === key) {\n                pageIndex = index;\n                return false;\n            }\n        });\n        return pageIndex;\n    }\n    get schema() {\n        return this.wizard;\n    }\n    setComponentSchema() {\n        const pageKeys = {};\n        this.originalComponents = [];\n        this.component.components.map((item) => {\n            if (item.type === 'panel') {\n                item.key = (0, utils_1.uniqueKey)(pageKeys, (item.key || 'panel'));\n                pageKeys[item.key] = true;\n                if (this.wizard.full) {\n                    this.options.show = this.options.show || {};\n                    this.options.show[item.key] = true;\n                }\n                else if (Object.prototype.hasOwnProperty.call(this.wizard, 'full')\n                    && !lodash_1.default.isEqual(this.originalOptions.show, this.options.show)) {\n                    this.options.show = Object.assign({}, (this.originalOptions.show || {}));\n                }\n            }\n            this.originalComponents.push(lodash_1.default.clone(item));\n        });\n        if (!Object.keys(pageKeys).length) {\n            const newPage = {\n                type: 'panel',\n                title: 'Page 1',\n                label: 'Page 1',\n                key: 'page1',\n                components: this.component.components\n            };\n            this.component.components = [newPage];\n            this.originalComponents.push(lodash_1.default.clone(newPage));\n        }\n    }\n    setForm(form, flags = {}) {\n        if (!form) {\n            return;\n        }\n        return super.setForm(form, flags);\n    }\n    onSetForm(clonedForm, initialForm) {\n        this.component.components = (this.parent ? initialForm.components : clonedForm.components) || [];\n        this.setComponentSchema();\n    }\n    setEditMode(submission) {\n        if (!this.editMode && submission._id && !this.options.readOnly) {\n            this.editMode = true;\n            this.redraw();\n        }\n    }\n    setValue(submission, flags = {}, ignoreEstablishment) {\n        const changed = this.getPages({ all: true }).reduce((changed, page) => {\n            return this.setNestedValue(page, submission.data, flags, changed) || changed;\n        }, false);\n        this.mergeData(this.data, submission.data);\n        if (changed) {\n            this.pageFieldLogic(this.page);\n        }\n        submission.data = this.data;\n        this._submission = submission;\n        if (!ignoreEstablishment) {\n            this.establishPages(submission.data);\n        }\n        this.setEditMode(submission);\n        return changed;\n    }\n    isClickable(page, index) {\n        return this.page !== index && (0, utils_1.firstNonNil)([\n            lodash_1.default.get(page, 'breadcrumbClickable'),\n            this.options.breadcrumbSettings.clickable\n        ]);\n    }\n    hasButton(name, nextPage = this.getNextPage()) {\n        // get page options with global options as default values\n        const { previous = this.options.buttonSettings.showPrevious, cancel = this.options.buttonSettings.showCancel, submit = this.options.buttonSettings.showSubmit, next = this.options.buttonSettings.showNext } = lodash_1.default.get(this.currentPage, 'component.buttonSettings', {});\n        switch (name) {\n            case 'previous':\n                return previous && (this.getPreviousPage() > -1);\n            case 'next':\n                return next && (nextPage !== null) && (nextPage !== -1);\n            case 'cancel':\n                return cancel && !this.options.readOnly;\n            case 'submit':\n                return submit && !this.options.readOnly && ((nextPage === null) || (this.page === (this.pages.length - 1)));\n            default:\n                return true;\n        }\n    }\n    pageId(page) {\n        if (page.key) {\n            // Some panels have the same key....\n            return `${page.key}-${page.title}`;\n        }\n        else if (page.components &&\n            page.components.length > 0) {\n            return this.pageId(page.components[0]);\n        }\n        else {\n            return page.title;\n        }\n    }\n    onChange(flags, changed, modified, changes) {\n        var _a, _b;\n        super.onChange(flags, changed, modified, changes);\n        // The onChange loop doesn't need all components for wizards\n        const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();\n        if (this.alert) {\n            this.showErrors(errors, true, true);\n        }\n        // If the pages change, need to redraw the header.\n        let currentPanels;\n        let panels;\n        const currentNextPage = this.currentNextPage;\n        if (this.hasExtraPages) {\n            currentPanels = this.pages.map(page => page.component.key);\n            this.establishPages();\n            panels = this.pages.map(page => page.component.key);\n        }\n        else {\n            currentPanels = this.currentPanels || this.pages.map(page => page.component.key);\n            panels = this.establishPages().map(panel => panel.key);\n            this.currentPanels = panels;\n            if (((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.key) && ((_b = this.currentPanels) === null || _b === void 0 ? void 0 : _b.length)) {\n                this.setPage(this.currentPanels.findIndex(panel => panel === this.currentPanel.key));\n            }\n        }\n        if (!lodash_1.default.isEqual(panels, currentPanels) || (flags && flags.fromSubmission)) {\n            this.redrawHeader();\n        }\n        // If the next page changes, then make sure to redraw navigation.\n        if (currentNextPage !== this.getNextPage()) {\n            this.redrawNavigation();\n        }\n        if (this.options.readOnly && (this.prefixComps.length || this.suffixComps.length)) {\n            this.redraw();\n        }\n    }\n    rebuild() {\n        const currentPage = this.page;\n        const setCurrentPage = () => this.setPage(currentPage);\n        return super.rebuild().then(setCurrentPage);\n    }\n    checkValidity(data, dirty, row, currentPageOnly, childErrors = []) {\n        if (!this.checkCondition(row, data)) {\n            this.setCustomValidity('');\n            return true;\n        }\n        const components = !currentPageOnly || this.isLastPage()\n            ? this.getComponents()\n            : this.currentPage.components;\n        return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, currentPageOnly, childErrors) && check, true);\n    }\n    get errors() {\n        return !this.isLastPage() && !this.submitted ? this.currentPage.errors : super.errors;\n    }\n    focusOnComponent(key) {\n        const component = this.getComponent(key);\n        if (component) {\n            let topPanel = component.parent;\n            while (!(topPanel.parent instanceof Wizard)) {\n                topPanel = topPanel.parent;\n            }\n            const pageIndex = this.pages.findIndex(page => page.id === topPanel.id);\n            if (pageIndex >= 0) {\n                const page = this.pages[pageIndex];\n                if (page && page !== this.currentPage) {\n                    return this.setPage(pageIndex).then(() => {\n                        this.showErrors(this.validate(this.localData, { dirty: true }));\n                        super.focusOnComponent(key);\n                    });\n                }\n            }\n        }\n        return super.focusOnComponent(key);\n    }\n}\nexports[\"default\"] = Wizard;\nWizard.setBaseUrl = Formio_1.Formio.setBaseUrl;\nWizard.setApiUrl = Formio_1.Formio.setApiUrl;\nWizard.setAppUrl = Formio_1.Formio.setAppUrl;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Wizard.js?");
 
 /***/ }),
 
@@ -4853,7 +4853,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n/* globals Quill, ClassicEditor, CKEDITOR */\nconst vanilla_text_mask_1 = __webpack_require__(/*! @formio/vanilla-text-mask */ \"./node_modules/@formio/vanilla-text-mask/dist/vanillaTextMask.js\");\nconst tippy_js_1 = __importDefault(__webpack_require__(/*! tippy.js */ \"./node_modules/tippy.js/dist/tippy.esm.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst ismobilejs_1 = __importDefault(__webpack_require__(/*! ismobilejs */ \"./node_modules/ismobilejs/esm/index.js\"));\nconst process_1 = __webpack_require__(/*! @formio/core/process */ \"./node_modules/@formio/core/lib/process/index.js\");\nconst Formio_1 = __webpack_require__(/*! ../../../Formio */ \"./lib/cjs/Formio.js\");\nconst FormioUtils = __importStar(__webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\"));\nconst utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Element_1 = __importDefault(__webpack_require__(/*! ../../../Element */ \"./lib/cjs/Element.js\"));\nconst ComponentModal_1 = __importDefault(__webpack_require__(/*! ../componentModal/ComponentModal */ \"./lib/cjs/components/_classes/componentModal/ComponentModal.js\"));\nconst widgets_1 = __importDefault(__webpack_require__(/*! ../../../widgets */ \"./lib/cjs/widgets/index.js\"));\nconst addons_1 = __importDefault(__webpack_require__(/*! ../../../addons */ \"./lib/cjs/addons/index.js\"));\nconst uploadAdapter_1 = __webpack_require__(/*! ../../../providers/storage/uploadAdapter */ \"./lib/cjs/providers/storage/uploadAdapter.js\");\nconst en_1 = __importDefault(__webpack_require__(/*! ../../../translations/en */ \"./lib/cjs/translations/en.js\"));\nconst Templates_1 = __importDefault(__webpack_require__(/*! ../../../templates/Templates */ \"./lib/cjs/templates/Templates.js\"));\nconst isIEBrowser = FormioUtils.getBrowserInfo().ie;\n/**\n * This is the Component class\n which all elements within the FormioForm derive from.\n */\nclass Component extends Element_1.default {\n    static schema(...sources) {\n        return lodash_1.default.merge({\n            /**\n             * Determines if this component provides an input.\n             */\n            input: true,\n            /**\n             * The data key for this component (how the data is stored in the database).\n             */\n            key: '',\n            /**\n             * The input placeholder for this component.\n             */\n            placeholder: '',\n            /**\n             * The input prefix\n             */\n            prefix: '',\n            /**\n             * The custom CSS class to provide to this component.\n             */\n            customClass: '',\n            /**\n             * The input suffix.\n             */\n            suffix: '',\n            /**\n             * If this component should allow an array of values to be captured.\n             */\n            multiple: false,\n            /**\n             * The default value of this component.\n             */\n            defaultValue: null,\n            /**\n             * If the data of this component should be protected (no GET api requests can see the data)\n             */\n            protected: false,\n            /**\n             * Validate if the value of this component should be unique within the form.\n             */\n            unique: false,\n            /**\n             * If the value of this component should be persisted within the backend api database.\n             */\n            persistent: true,\n            /**\n             * Determines if the component should be within the form, but not visible.\n             */\n            hidden: false,\n            /**\n             * If the component should be cleared when hidden.\n             */\n            clearOnHide: true,\n            /**\n             * This will refresh this component options when this field changes.\n             */\n            refreshOn: '',\n            /**\n             * This will redraw the component when this field changes.\n             */\n            redrawOn: '',\n            /**\n             * If this component should be included as a column within a submission table.\n             */\n            tableView: false,\n            /**\n             * If this component should be rendering in modal.\n             */\n            modalEdit: false,\n            /**\n             * The input label provided to this component.\n             */\n            label: '',\n            dataGridLabel: false,\n            labelPosition: 'top',\n            description: '',\n            errorLabel: '',\n            tooltip: '',\n            hideLabel: false,\n            tabindex: '',\n            disabled: false,\n            autofocus: false,\n            dbIndex: false,\n            customDefaultValue: '',\n            calculateValue: '',\n            calculateServer: false,\n            widget: null,\n            /**\n             * Attributes that will be assigned to the input elements of this component.\n             */\n            attributes: {},\n            /**\n             * This will perform the validation on either \"change\" or \"blur\" of the input element.\n             */\n            validateOn: 'change',\n            /**\n             * The validation criteria for this component.\n             */\n            validate: {\n                /**\n                 * If this component is required.\n                 */\n                required: false,\n                /**\n                 * Custom JavaScript validation.\n                 */\n                custom: '',\n                /**\n                 * If the custom validation should remain private (only the backend will see it and execute it).\n                 */\n                customPrivate: false,\n                /**\n                 * If this component should implement a strict date validation if the Calendar widget is implemented.\n                 */\n                strictDateValidation: false,\n                multiple: false,\n                unique: false\n            },\n            /**\n             * The simple conditional settings for a component.\n             */\n            conditional: {\n                show: null,\n                when: null,\n                eq: ''\n            },\n            overlay: {\n                style: '',\n                left: '',\n                top: '',\n                width: '',\n                height: '',\n            },\n            allowCalculateOverride: false,\n            encrypted: false,\n            showCharCount: false,\n            showWordCount: false,\n            properties: {},\n            allowMultipleMasks: false,\n            addons: [],\n        }, ...sources);\n    }\n    /**\n     * Return the simple condition settings as part of the component.\n     * @returns {object} - The simple conditional settings.\n     */\n    static get conditionOperatorsSettings() {\n        return {\n            operators: ['isEqual', 'isNotEqual', 'isEmpty', 'isNotEmpty'],\n            valueComponent() {\n                return {\n                    type: 'textfield',\n                    widget: {\n                        type: 'input'\n                    }\n                };\n            }\n        };\n    }\n    /**\n     * Return the array of possible types of component value absed on its schema.\n     * @param schema\n     * @returns {Array}\n     */\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return FormioUtils.getComponentSavedTypes(schema) || [FormioUtils.componentValueTypes.any];\n    }\n    /**\n     * Provides a table view for this component. Override if you wish to do something different than using getView\n     * method of your instance.\n     * @param value\n     * @param options\n     */\n    /* eslint-disable no-unused-vars */\n    static tableView(value, options) { }\n    /* eslint-enable no-unused-vars */\n    /**\n     * Initialize a new Component.\n     * @param {object} component - The component JSON you wish to initialize.\n     * @param {object} options - The options for this component.\n     * @param {object} data - The global data submission object this component will belong.\n     */\n    /* eslint-disable max-statements */\n    constructor(component, options, data) {\n        var _a, _b, _c, _d;\n        super(Object.assign({\n            renderMode: 'form',\n            attachMode: 'full',\n            noDefaults: false\n        }, options || {}));\n        // Restore the component id.\n        if (component && component.id) {\n            this.id = component.id;\n        }\n        /**\n         * Determines if this component has a condition assigned to it.\n         * @type {null}\n         * @private\n         */\n        this._hasCondition = null;\n        /**\n         * The row index for this component.\n         */\n        this._rowIndex = undefined;\n        /**\n         * References to dom elements\n         */\n        this.refs = {};\n        // Allow global override for any component JSON.\n        if (component &&\n            this.options.components &&\n            this.options.components[component.type]) {\n            lodash_1.default.merge(component, this.options.components[component.type]);\n        }\n        /**\n         * An array of all the children components errors.\n         */\n        this.childErrors = [];\n        /**\n         * Last validation errors that have occured.\n         */\n        this._errors = [];\n        this._visibleErrors = [];\n        /**\n         * The Form.io component JSON schema.\n         * @type {*}\n         */\n        this.component = this.mergeSchema(component || {});\n        // Add the id to the component.\n        this.component.id = this.id;\n        this.afterComponentAssign();\n        // Save off the original component to be used in logic.\n        this.originalComponent = (0, utils_1.fastCloneDeep)(this.component);\n        /**\n         * If the component has been attached\n         */\n        this.attached = false;\n        /**\n         * If the component has been rendered\n         */\n        this.rendered = false;\n        /**\n         * The data object in which this component resides.\n         * @type {*}\n         */\n        this._data = data || {};\n        /**\n         * Tool tip text after processing\n         * @type {string}\n         */\n        this.tooltip = '';\n        /**\n         * The row path of this component.\n         * @type {number}\n         */\n        this.row = this.options.row;\n        /**\n         * Points to a flat map of child components (if applicable).\n         * @type {object}\n         */\n        this.childComponentsMap = {};\n        /**\n         * Determines if this component is disabled, or not.\n         * @type {boolean}\n         */\n        this._disabled = (0, utils_1.boolValue)(this.component.disabled) ? this.component.disabled : false;\n        /**\n         * Points to the root component, usually the FormComponent.\n         * @type {Component}\n         */\n        this.root = this.options.root || this;\n        this.localRoot = this.options.localRoot || this;\n        /**\n         * If this input has been input and provided value.\n         * @type {boolean}\n         */\n        this.pristine = true;\n        /**\n         * Points to the parent component.\n         * @type {Component}\n         */\n        this.parent = this.options.parent;\n        /**\n         * The component paths for this component.\n         * @type {import('@formio/core').ComponentPaths} - The component paths.\n         */\n        this.paths = FormioUtils.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths), { dataIndex: this.options.rowIndex === undefined ? (_d = (_c = this.parent) === null || _c === void 0 ? void 0 : _c.paths) === null || _d === void 0 ? void 0 : _d.dataIndex : this.options.rowIndex }));\n        this.options.name = this.options.name || 'data';\n        this._path = '';\n        // Needs for Nextgen Rules Engine\n        this.resetCaches();\n        /**\n         * Determines if this component is conditionally hidden. Should generally not be set outside of conditional logic pipeline.\n         * This is necessary because of clearOnHide behavior that only clears when conditionally hidden - we need to track\n         * conditionallyHidden separately from \"regular\" visibility.\n         */\n        this._parentConditionallyHidden = this.options.hasOwnProperty('parentConditionallyHidden') ? this.options.parentConditionallyHidden : false;\n        this._conditionallyHidden = this.checkConditionallyHidden(null, data) || this._parentConditionallyHidden;\n        /**\n         * Determines if this component is visible, or not.\n         */\n        this._parentVisible = this.options.hasOwnProperty('parentVisible') ? this.options.parentVisible : true;\n        this._visible = this._parentVisible && (this.hasCondition() ? !this._conditionallyHidden : !this.component.hidden);\n        this._parentDisabled = false;\n        /**\n         * The reference attribute name for this component\n         */\n        this._referenceAttributeName = 'ref';\n        /**\n         * Used to trigger a new change in this component.\n         * @type {Function} - Call to trigger a change in this component.\n         */\n        let changes = [];\n        let lastChanged = null;\n        let triggerArgs = [];\n        const _triggerChange = lodash_1.default.debounce((...args) => {\n            if (this.root) {\n                this.root.changing = false;\n            }\n            triggerArgs = [];\n            if (!args[1] && lastChanged) {\n                // Set the changed component if one isn't provided.\n                args[1] = lastChanged;\n            }\n            if (lodash_1.default.isEmpty(args[0]) && lastChanged) {\n                // Set the flags if it is empty and lastChanged exists.\n                args[0] = lastChanged.flags;\n            }\n            lastChanged = null;\n            args[3] = changes;\n            const retVal = this.onChange(...args);\n            changes = [];\n            return retVal;\n        }, 100);\n        this.triggerChange = (...args) => {\n            if (args[1]) {\n                // Make sure that during the debounce that we always track lastChanged component, even if they\n                // don't provide one later.\n                lastChanged = args[1];\n                changes.push(lastChanged);\n            }\n            if (this.root) {\n                this.root.changing = true;\n            }\n            if (args.length) {\n                triggerArgs = args;\n            }\n            return _triggerChange(...triggerArgs);\n        };\n        /**\n         * Used to trigger a redraw event within this component.\n         * @type {Function}\n         */\n        this.triggerRedraw = lodash_1.default.debounce(this.redraw.bind(this), 100);\n        /**\n         * list of attached tooltips\n         * @type {Array}\n         */\n        this.tooltips = [];\n        /**\n         * List of attached addons\n         * @type {Array}\n         */\n        this.addons = [];\n        // To force this component to be invalid.\n        this.invalid = false;\n        if (this.component) {\n            this.type = this.component.type;\n            if (this.allowData && this.key) {\n                this.options.name += `[${this.key}]`;\n                // If component is visible or not set to clear on hide, set the default value.\n                if (!(this.conditionallyHidden && this.component.clearOnHide)) {\n                    if (!this.hasValue()) {\n                        if (this.shouldAddDefaultValue) {\n                            this.dataValue = this.defaultValue;\n                        }\n                    }\n                    else {\n                        // Ensure the dataValue is set.\n                        /* eslint-disable  no-self-assign */\n                        this.dataValue = this.dataValue;\n                        /* eslint-enable  no-self-assign */\n                    }\n                }\n            }\n            /**\n             * The element information for creating the input element.\n             * @type {*}\n             */\n            this.info = this.elementInfo();\n        }\n        // Allow anyone to hook into the component creation.\n        this.hook('component');\n        if (!this.options.skipInit) {\n            this.init();\n        }\n    }\n    /* eslint-enable max-statements */\n    get componentsMap() {\n        var _a;\n        return ((_a = this.root) === null || _a === void 0 ? void 0 : _a.childComponentsMap) || {};\n    }\n    get data() {\n        return this._data;\n    }\n    set data(value) {\n        this._data = value;\n    }\n    mergeSchema(component = {}) {\n        return lodash_1.default.defaultsDeep(component, this.defaultSchema);\n    }\n    // Allow componets to notify when ready.\n    get ready() {\n        return Promise.resolve(this);\n    }\n    get isPDFReadOnlyMode() {\n        return this.parent &&\n            this.parent.form &&\n            (this.parent.form.display === 'pdf') &&\n            this.options.readOnly;\n    }\n    get labelInfo() {\n        const label = {};\n        label.hidden = this.labelIsHidden();\n        label.className = '';\n        label.labelPosition = this.component.labelPosition;\n        label.tooltipClass = `${this.iconClass('question-sign')} text-muted`;\n        const isPDFReadOnlyMode = this.isPDFReadOnlyMode;\n        if (this.hasInput && this.component.validate && (0, utils_1.boolValue)(this.component.validate.required) && !isPDFReadOnlyMode) {\n            label.className += ' field-required';\n        }\n        if (label.hidden) {\n            label.className += ' control-label--hidden';\n        }\n        if (this.info.attr.id) {\n            label.for = this.info.attr.id;\n        }\n        return label;\n    }\n    init() {\n        var _a;\n        this.disabled = this.shouldDisabled;\n        this._conditionallyHidden = this.checkConditionallyHidden();\n        this._visible = (this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden);\n        if ((_a = this.component.addons) === null || _a === void 0 ? void 0 : _a.length) {\n            this.component.addons.forEach((addon) => this.createAddon(addon));\n        }\n    }\n    /**\n     * Get Row Index.\n     * @returns {number} - The row index.\n     */\n    get rowIndex() {\n        return this._rowIndex;\n    }\n    /**\n     * Set Row Index to row and update each component.\n     * @param {number} value - The row index.\n     * @returns {void}\n     */\n    set rowIndex(value) {\n        var _a, _b;\n        this.paths = FormioUtils.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths) || {})), { dataIndex: value }));\n        this._rowIndex = value;\n    }\n    afterComponentAssign() {\n        //implement in extended classes\n    }\n    createAddon(addonConfiguration) {\n        var _a;\n        const name = addonConfiguration.name;\n        if (!name) {\n            return;\n        }\n        const settings = ((_a = addonConfiguration.settings) === null || _a === void 0 ? void 0 : _a.data) || {};\n        const Addon = addons_1.default[name.value];\n        let addon = null;\n        if (Addon) {\n            const supportedComponents = Addon.info.supportedComponents;\n            const supportsThisComponentType = !(supportedComponents === null || supportedComponents === void 0 ? void 0 : supportedComponents.length) ||\n                supportedComponents.indexOf(this.component.type) !== -1;\n            if (supportsThisComponentType) {\n                addon = new Addon(settings, this);\n                this.addons.push(addon);\n            }\n            else {\n                console.warn(this.t('addonSupportTypeError', {\n                    type: this.component.type,\n                    label: name.label\n                }));\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(this.t('setPathError'));\n    }\n    set parentVisible(value) {\n        this._parentVisible = value;\n    }\n    get parentVisible() {\n        return this._parentVisible;\n    }\n    set parentDisabled(value) {\n        this._parentDisabled = value;\n    }\n    get parentDisabled() {\n        return this._parentDisabled;\n    }\n    shouldForceVisibility(component, visibility) {\n        if (!this.options[visibility]) {\n            return false;\n        }\n        if (!component) {\n            component = this.component;\n        }\n        if (lodash_1.default.isArray(this.options[visibility])) {\n            return this.options[visibility].includes(component.key);\n        }\n        return this.options[visibility][component.key];\n    }\n    shouldForceHide(component) {\n        return this.shouldForceVisibility(component, 'hide');\n    }\n    shouldForceShow(component) {\n        return this.shouldForceVisibility(component, 'show');\n    }\n    /**\n     * Sets the component visibility.\n     * @param {boolean} value - Whether the component should be visible or not.\n     */\n    set visible(value) {\n        if (this._visible !== value) {\n            // Skip if this component is set to visible and is supposed to be hidden.\n            if (value && this.shouldForceHide()) {\n                return;\n            }\n            // Skip if this component is set to hidden and is supposed to be shown.\n            if (!value && this.shouldForceShow()) {\n                return;\n            }\n            this._visible = value;\n            this.redraw();\n        }\n    }\n    /**\n     * Returns the component visibility\n     * @returns {boolean} - Whether the component is visible or not.\n     */\n    get visible() {\n        // Show only if visibility changes or if we are in builder mode or if hidden fields should be shown.\n        if (this.builderMode || this.previewMode || this.options.showHiddenFields) {\n            return true;\n        }\n        if (this.shouldForceHide()) {\n            return false;\n        }\n        if (this.shouldForceShow()) {\n            return true;\n        }\n        return this._visible && this._parentVisible;\n    }\n    get conditionallyHidden() {\n        return this._conditionallyHidden || this._parentConditionallyHidden;\n    }\n    /**\n     * Evaluates whether the component is conditionally hidden (as opposed to intentionally hidden, e.g. via the `hidden` component schema property).\n     * @param {object} data - The data object to evaluate the condition against.\n     * @param {object} row - The row object to evaluate the condition against.\n     * @returns {boolean} - Whether the component is conditionally hidden.\n     */\n    checkConditionallyHidden(data = null, row = null) {\n        if (!this.hasCondition()) {\n            return false;\n        }\n        return !this.conditionallyVisible(data, row);\n    }\n    get currentForm() {\n        return this._currentForm;\n    }\n    set currentForm(instance) {\n        this._currentForm = instance;\n    }\n    get fullMode() {\n        return this.options.attachMode === 'full';\n    }\n    get builderMode() {\n        return this.options.attachMode === 'builder';\n    }\n    get calculatedPath() {\n        console.error(this.t('calculatedPathDeprecation'));\n        return this.path;\n    }\n    get labelPosition() {\n        return this.component.labelPosition;\n    }\n    get labelWidth() {\n        const width = this.component.labelWidth;\n        return width >= 0 ? width : 30;\n    }\n    get labelMargin() {\n        const margin = this.component.labelMargin;\n        return margin >= 0 ? margin : 3;\n    }\n    get isAdvancedLabel() {\n        return [\n            'left-left',\n            'left-right',\n            'right-left',\n            'right-right'\n        ].includes(this.labelPosition);\n    }\n    get labelPositions() {\n        return this.labelPosition.split('-');\n    }\n    get skipInEmail() {\n        return false;\n    }\n    rightDirection(direction) {\n        if (this.options.condensedMode) {\n            return false;\n        }\n        return direction === 'right';\n    }\n    getLabelInfo(isCondensed = false) {\n        const isRightPosition = this.rightDirection(this.labelPositions[0]);\n        const isLeftPosition = this.labelPositions[0] === 'left' || isCondensed;\n        const isRightAlign = this.rightDirection(this.labelPositions[1]);\n        let contentMargin = '';\n        if (this.component.hideLabel) {\n            const margin = isCondensed ? 0 : this.labelWidth + this.labelMargin;\n            contentMargin = isRightPosition ? `margin-right: ${margin}%` : '';\n            contentMargin = isLeftPosition ? `margin-left: ${margin}%` : '';\n        }\n        const labelStyles = `\n      flex: ${this.labelWidth};\n      ${isRightPosition ? 'margin-left' : 'margin-right'}: ${this.labelMargin}%;\n    `;\n        const contentStyles = `\n      flex: ${100 - this.labelWidth - this.labelMargin};\n      ${contentMargin};\n      ${this.component.hideLabel ? `max-width: ${100 - this.labelWidth - this.labelMargin}` : ''};\n    `;\n        return {\n            isRightPosition,\n            isRightAlign,\n            labelStyles,\n            contentStyles\n        };\n    }\n    /**\n     * Returns only the schema that is different from the default.\n     * @param {object} schema - The \"full\" json schema for the component.\n     * @param {object} defaultSchema - The \"default\" json schema for the component.\n     * @param {boolean} recursion - If we are currently in a recursive loop.\n     * @returns {object} - The minified json schema for this component.\n     */\n    getModifiedSchema(schema, defaultSchema, recursion) {\n        const modified = {};\n        if (!defaultSchema) {\n            return schema;\n        }\n        lodash_1.default.each(schema, (val, key) => {\n            if (!lodash_1.default.isArray(val) && lodash_1.default.isObject(val) && defaultSchema.hasOwnProperty(key)) {\n                const subModified = this.getModifiedSchema(val, defaultSchema[key], true);\n                if (!lodash_1.default.isEmpty(subModified)) {\n                    modified[key] = subModified;\n                }\n            }\n            else if (lodash_1.default.isArray(val)) {\n                if (val.length !== 0 && !lodash_1.default.isEqual(val, defaultSchema[key])) {\n                    modified[key] = val;\n                }\n            }\n            else if ((!recursion && (key === 'type')) ||\n                (!recursion && (key === 'key')) ||\n                (!recursion && (key === 'label')) ||\n                (!recursion && (key === 'input')) ||\n                (!recursion && (key === 'tableView')) ||\n                (val !== '' && !defaultSchema.hasOwnProperty(key)) ||\n                (val !== '' && val !== defaultSchema[key]) ||\n                (defaultSchema[key] && val !== defaultSchema[key])) {\n                modified[key] = val;\n            }\n        });\n        return modified;\n    }\n    /**\n     * Returns the JSON schema for this component.\n     * @returns {object} - The JSON schema for this component.\n     */\n    get schema() {\n        return (0, utils_1.fastCloneDeep)(this.getModifiedSchema(lodash_1.default.omit(this.component, 'id'), this.defaultSchema));\n    }\n    /**\n     * Returns true if component is inside DataGrid\n     * @returns {boolean} - True if component is inside DataGrid\n     */\n    get isInDataGrid() {\n        return this.inDataGrid;\n    }\n    /**\n     * Translate a text using the i18n system.\n     * @param {string} text - The i18n identifier.\n     * @param {object} params - The i18n parameters to use for translation.\n     * @param {...any} args - Additional arguments to pass to the translation library.\n     * @returns {string} - The translated text.\n     */\n    t(text, params = {}, ...args) {\n        if (!text) {\n            return '';\n        }\n        // Use _userInput: true to ignore translations from defaults\n        if (text in en_1.default && params._userInput) {\n            return text;\n        }\n        params.data = params.data || this.rootValue;\n        params.row = params.row || this.data;\n        params.component = params.component || this.component;\n        return super.t(text, params, ...args);\n    }\n    labelIsHidden() {\n        return !this.component.label ||\n            ((!this.isInDataGrid && this.component.hideLabel) ||\n                (this.isInDataGrid && !this.component.dataGridLabel) ||\n                this.options.floatingLabels ||\n                this.options.inputsOnly) && !this.builderMode;\n    }\n    transform(type, value) {\n        const frameworkTemplates = this.options.template ? Templates_1.default.templates[this.options.template] : Templates_1.default.current;\n        return frameworkTemplates.hasOwnProperty('transform')\n            ? frameworkTemplates.transform(type, value, this)\n            : (type, value) => value;\n    }\n    getTemplate(names, modes) {\n        modes = Array.isArray(modes) ? modes : [modes];\n        names = Array.isArray(names) ? names : [names];\n        if (!modes.includes('form')) {\n            modes.push('form');\n        }\n        let result = null;\n        if (this.options.templates) {\n            result = this.checkTemplate(this.options.templates, names, modes);\n            if (result) {\n                return result;\n            }\n        }\n        const frameworkTemplates = this.options.template ? Templates_1.default.templates[this.options.template] : Templates_1.default.current;\n        result = this.checkTemplate(frameworkTemplates, names, modes);\n        if (result) {\n            return result;\n        }\n        // Default back to bootstrap if not defined.\n        const name = names[names.length - 1];\n        const templatesByName = Templates_1.default.defaultTemplates[name];\n        if (!templatesByName) {\n            return { template: this.t('unknownTemplate', { 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(this.t('renderTemplateFunctionDeprecation'));\n            return this.renderTemplate(...args);\n        };\n        data.label = data.labelInfo || this.labelInfo;\n        data.tooltip = this.getFormattedTooltip(this.component.tooltip);\n        // Allow more specific template names\n        const names = [\n            `${name}-${this.component.type}-${this.key}`,\n            `${name}-${this.component.type}`,\n            `${name}-${this.key}`,\n            `${name}`,\n        ];\n        // Allow template alters.\n        const { referenceAttributeName, template } = this.getTemplate(names, mode);\n        if (referenceAttributeName) {\n            this._referenceAttributeName = referenceAttributeName;\n        }\n        return this.hook(`render${name.charAt(0).toUpperCase() + name.substring(1, name.length)}`, this.interpolate(template, data), data, mode);\n    }\n    /**\n     * Sanitize an html string.\n     * @param {string} dirty - The dirty html string to sanitize.\n     * @param {boolean} forceSanitize - If we should force the sanitize to occur.\n     * @param {object} options - The options for the sanitize.\n     * @returns {*} - The sanitized html string.\n     */\n    sanitize(dirty, forceSanitize = false, options = {}) {\n        var _a;\n        if (!this.shouldSanitizeValue && !forceSanitize) {\n            return dirty;\n        }\n        return FormioUtils.sanitize(dirty, {\n            sanitizeConfig: lodash_1.default.merge(((_a = this.options) === null || _a === void 0 ? void 0 : _a.sanitizeConfig) || {}, options || {}),\n        });\n    }\n    /**\n     * Render a template string into html.\n     * @param {string} template - The template to render.\n     * @param {object} data - The data to provide to the template.\n     * @returns {HTMLElement | string} - The created element or an empty string if template is not specified.\n     */\n    renderString(template, data) {\n        if (!template) {\n            return '';\n        }\n        // Interpolate the template and populate\n        return this.interpolate(template, data);\n    }\n    /**\n     * Allows for modification of the component value prior to submission.\n     * @param {*} input - The input to be modified.\n     * @returns {*} - The modified input mapping for the extended component.\n     */\n    performInputMapping(input) {\n        return input;\n    }\n    /**\n     * Returns the component \"widget\" if one is available.\n     * @returns {Widget|null} - The widget instance. null if not available.\n     */\n    get widget() {\n        var _a;\n        const settings = this.component.widget;\n        if (settings && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.shadowRoot)) {\n            settings.shadowRoot = this.root.shadowRoot;\n        }\n        const widget = settings && widgets_1.default[settings.type] ? new widgets_1.default[settings.type](settings, this.component, this) : null;\n        return widget;\n    }\n    /**\n     * Returns the native supported browser language.\n     * @returns {string|null} - The native browser language that is supported.\n     */\n    getBrowserLanguage() {\n        const nav = window.navigator;\n        const browserLanguagePropertyKeys = ['language', 'browserLanguage', 'systemLanguage', 'userLanguage'];\n        let language;\n        // support for HTML 5.1 \"navigator.languages\"\n        if (Array.isArray(nav.languages)) {\n            for (let i = 0; i < nav.languages.length; i++) {\n                language = nav.languages[i];\n                if (language && language.length) {\n                    return language.split(';')[0];\n                }\n            }\n        }\n        // support for other well known properties in browsers\n        for (let i = 0; i < browserLanguagePropertyKeys.length; i++) {\n            language = nav[browserLanguagePropertyKeys[i]];\n            if (language && language.length) {\n                return language.split(';')[0];\n            }\n        }\n        return null;\n    }\n    /**\n     * Called before a next and previous page is triggered allowing the components to perform special functions.\n     * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the next/previous page navigation.\n     */\n    beforePage() {\n        return Promise.resolve(true);\n    }\n    /**\n     * Called before the next page is triggered allowing the components to hook into the page navigation and perform tasks.\n     * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the next page navigation.\n     */\n    beforeNext() {\n        return this.beforePage(true);\n    }\n    /**\n     * Called before a submission is triggered allowing the components to perform special async functions.\n     * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the submission.\n     */\n    beforeSubmit() {\n        return Promise.resolve(true);\n    }\n    /**\n     * Return the submission timezone.\n     * @returns {string} - The submission timezone.\n     */\n    get submissionTimezone() {\n        this.options.submissionTimezone = this.options.submissionTimezone || lodash_1.default.get(this.root, 'options.submissionTimezone');\n        return this.options.submissionTimezone;\n    }\n    /**\n     * Return the current timezone.\n     * @returns {string} - The current timezone.\n     */\n    get timezone() {\n        return this.getTimezone(this.component);\n    }\n    /**\n     * Return the current timezone.\n     * @param {object} settings - Settings to control how the timezone should be returned.\n     * @returns {string} - The current timezone.\n     */\n    getTimezone(settings) {\n        if (settings.timezone) {\n            return settings.timezone;\n        }\n        if (settings.displayInTimezone === 'utc') {\n            return 'UTC';\n        }\n        const submissionTimezone = this.submissionTimezone;\n        if (submissionTimezone &&\n            ((settings.displayInTimezone === 'submission') ||\n                ((this.options.pdf || this.options.server) && (settings.displayInTimezone === 'viewer')))) {\n            return submissionTimezone;\n        }\n        // Return current timezone if none are provided.\n        return (0, utils_1.currentTimezone)();\n    }\n    /**\n     *\n     * @param {HTMLElement} element - The containing DOM element to query for the ref value.\n     * @param {object} refs - The references to load.\n     * @param {string} [referenceAttributeName] - The attribute name to use for the reference.\n     */\n    loadRefs(element, refs, referenceAttributeName) {\n        if (!element) {\n            return;\n        }\n        for (const ref in refs) {\n            const refType = refs[ref];\n            const isString = typeof refType === 'string';\n            const selector = isString && refType.includes('scope')\n                ? `:scope > [${referenceAttributeName || this._referenceAttributeName || 'ref'}=\"${ref}\"]`\n                : `[${referenceAttributeName || this._referenceAttributeName || 'ref'}=\"${ref}\"]`;\n            if (isString && refType.startsWith('single')) {\n                this.refs[ref] = element.querySelector(selector);\n            }\n            else {\n                this.refs[ref] = element.querySelectorAll(selector);\n            }\n        }\n    }\n    /**\n     * Opens the modal element.\n     * @param {string} template - The template to use for the modal dialog.\n     */\n    setOpenModalElement(template = null) {\n        this.componentModal.setOpenModalElement(template || this.getModalPreviewTemplate());\n    }\n    /**\n     * Renders a modal preview template and returns the markup as a string\n     * @param {object|null|undefined} ctx - The rendering context\n     * @returns {string} - The modal preview markup\n     */\n    renderModalPreview(ctx) {\n        return this.renderTemplate('modalPreview', ctx || {});\n    }\n    /**\n     * Returns the modal preview template.\n     * @returns {string} - The modal preview template.\n     */\n    getModalPreviewTemplate() {\n        var _a;\n        const dataValue = this.component.type === 'password' ? this.dataValue.replace(/./g, '•') : this.dataValue;\n        let modalLabel;\n        if (this.hasInput && ((_a = this.component.validate) === null || _a === void 0 ? void 0 : _a.required) && !this.isPDFReadOnlyMode) {\n            modalLabel = { className: 'field-required' };\n        }\n        return this.renderModalPreview({\n            previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('clickToSetValue'),\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 = this.t('unknownComponent', { type: 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 (typeof ref === NodeList) {\n                ref.forEach((elem) => {\n                    delete elem.component;\n                });\n            }\n            else if (ref) {\n                delete ref.component;\n            }\n        });\n        this.refs = {};\n        this.removeEventListeners();\n        this.detachLogic();\n        if (this.tooltip) {\n            this.tooltip.destroy();\n        }\n    }\n    /**\n     * Determines if the component should be refreshed based on the path of another component that changed.\n     * @param {string} refreshData - The path of the data that needs to trigger a refresh.\n     * @param {boolean} changed - Flag that is true if the data has been changed.\n     * @param {any} flags - The flags for the checkData procedure.\n     * @returns {void}\n     */\n    checkRefresh(refreshData, changed, flags) {\n        var _a, _b;\n        const changePath = lodash_1.default.get(changed, 'instance.path', false);\n        // Don't let components change themselves.\n        if (changePath && this.path === changePath) {\n            return;\n        }\n        if (refreshData === 'data') {\n            this.refresh(this.data, changed, flags);\n        }\n        else if ((changePath && (((_b = (_a = changed.instance) === null || _a === void 0 ? void 0 : _a.paths) === null || _b === void 0 ? void 0 : _b.localPath) === refreshData)) && changed && changed.instance &&\n            // Make sure the changed component is not in a different \"context\". Solves issues where refreshOn being set\n            // in fields inside EditGrids could alter their state from other rows (which is bad).\n            this.inContext(changed.instance)) {\n            this.refresh(changed.value, changed, flags);\n        }\n    }\n    /**\n     * Iterates over a list of changes, and determines if the component should be refreshed if it is configured to refresh on any of those components.\n     * @param {Array<any>} changes - The list of components that have changed.\n     * @param {any} flags - The checkData flags.\n     * @returns {void}\n     */\n    checkRefreshOn(changes, flags = {}) {\n        changes = changes || [];\n        if (flags.noRefresh) {\n            return;\n        }\n        if (!changes.length && flags.changed) {\n            changes = [flags.changed];\n        }\n        const refreshOn = flags.fromBlur ? this.component.refreshOnBlur : this.component.refreshOn || this.component.redrawOn;\n        // If they wish to refresh on a value, then add that here.\n        if (refreshOn) {\n            if (Array.isArray(refreshOn)) {\n                refreshOn.forEach(refreshData => changes.forEach(changed => this.checkRefresh(refreshData, changed, flags)));\n            }\n            else {\n                changes.forEach(changed => this.checkRefresh(refreshOn, changed, flags));\n            }\n        }\n    }\n    /**\n     * Refreshes the component with a new value.\n     * @param {any} value - The latest value of the component to check if it needs to be refreshed.\n     * @returns {void}\n     */\n    refresh(value) {\n        if (this.hasOwnProperty('refreshOnValue')) {\n            this.refreshOnChanged = !lodash_1.default.isEqual(value, this.refreshOnValue);\n        }\n        else {\n            this.refreshOnChanged = true;\n        }\n        this.refreshOnValue = (0, utils_1.fastCloneDeep)(value);\n        if (this.refreshOnChanged) {\n            if (this.component.clearOnRefresh) {\n                this.setValue(null);\n            }\n            this.triggerRedraw();\n        }\n    }\n    /**\n     * Checks to see if a separate component is in the \"context\" of this component. This is determined by first checking\n     * if they share the same \"data\" object. It will then walk up the parent tree and compare its parents data objects\n     * with the components data and returns true if they are in the same context.\n     *\n     * Different rows of the same EditGrid, for example, are in different contexts.\n     * @param {any} component - The component to check if it is in the same context as this component.\n     * @returns {boolean} - TRUE if the component is in the same context as this component.\n     */\n    inContext(component) {\n        if (component.data === this.data) {\n            return true;\n        }\n        let parent = this.parent;\n        while (parent) {\n            if (parent.data === component.data) {\n                return true;\n            }\n            parent = parent.parent;\n        }\n        return false;\n    }\n    /**\n     * Determines if we are in \"view\" only mode.\n     * @returns {boolean} - TRUE if we are in \"view\" only mode.\n     */\n    get viewOnly() {\n        return this.options.readOnly && this.options.viewAsHtml;\n    }\n    /**\n     * Sets the HTMLElement for this component.\n     * @param {HTMLElement} element - The element that is attached to this component.\n     * @returns {void}\n     */\n    setElement(element) {\n        if (this.element) {\n            delete this.element.component;\n            delete this.element;\n        }\n        this.element = element;\n    }\n    /**\n     * Creates an element to hold the \"view only\" version of this component.\n     * @returns {HTMLElement} - The element for this component.\n     */\n    createViewOnlyElement() {\n        this.setElement(this.ce('dl', {\n            id: this.id\n        }));\n        if (this.element) {\n            // Ensure you can get the component info from the element.\n            this.element.component = this;\n        }\n        return this.element;\n    }\n    /**\n     * The default value for the \"view only\" mode of a component if the value is not provided.\n     * @returns {string} - The default value for this component.\n     */\n    get defaultViewOnlyValue() {\n        return '-';\n    }\n    /**\n     * Uses the widget to determine the output string.\n     * @param {any} value - The current value of the component.\n     * @param {any} options - The options for getValueAsString.\n     * @returns {any|Array<any>} - The value as a string.\n     */\n    getWidgetValueAsString(value, options) {\n        const noInputWidget = !this.refs.input || !this.refs.input[0] || !this.refs.input[0].widget;\n        if (!value || noInputWidget) {\n            if (!this.widget || !value) {\n                return value;\n            }\n            else {\n                return this.widget.getValueAsString(value);\n            }\n        }\n        if (Array.isArray(value)) {\n            const values = [];\n            value.forEach((val, index) => {\n                const widget = this.refs.input[index] && this.refs.input[index].widget;\n                if (widget) {\n                    values.push(widget.getValueAsString(val, options));\n                }\n            });\n            return values;\n        }\n        const widget = this.refs.input[0].widget;\n        return widget.getValueAsString(value, options);\n    }\n    /**\n     * Returns the value of the component as a string.\n     * @param {any} value - The value for this component.\n     * @param {any} options - The options for this component.\n     * @returns {string} - The string representation of the value of this component.\n     */\n    getValueAsString(value, options) {\n        if (!value) {\n            return '';\n        }\n        value = this.getWidgetValueAsString(value, options);\n        if (Array.isArray(value)) {\n            return value.join(', ');\n        }\n        if (lodash_1.default.isPlainObject(value)) {\n            return JSON.stringify(value);\n        }\n        if (value === null || value === undefined) {\n            return '';\n        }\n        const stringValue = value.toString();\n        return this.sanitize(stringValue);\n    }\n    /**\n     * Returns the string representation \"view\" of the component value.\n     * @param {any} value - The value of the component.\n     * @param {any} options - The options for this component.\n     * @returns {string} - The string representation of the value of this component.\n     */\n    getView(value, options) {\n        if (this.component.protected) {\n            return '--- PROTECTED ---';\n        }\n        return this.getValueAsString(value, options);\n    }\n    /**\n     * Updates the items list for this component. Useful for Select and other List component types.\n     * @param {...any} args - The arguments to pass to the onChange event.\n     * @returns {void}\n     */\n    updateItems(...args) {\n        this.restoreValue();\n        this.onChange(...args);\n    }\n    /**\n     * Returns the value for a specific item in a List type component.\n     * @param {any} data - The data for this component.\n     * @param {boolean} [forceUseValue] - if true, return 'value' property of the data\n     * @returns {any} - The value of the item.\n     */\n    itemValue(data, forceUseValue = false) {\n        if (lodash_1.default.isObject(data) && !lodash_1.default.isArray(data)) {\n            if (this.valueProperty) {\n                return lodash_1.default.get(data, this.valueProperty);\n            }\n            if (forceUseValue) {\n                return data.value;\n            }\n        }\n        return data;\n    }\n    /**\n     * Returns the item value for html mode.\n     * @param {any} value - The value for this component.\n     * @returns {any} - The value of the item for html mode.\n     */\n    itemValueForHTMLMode(value) {\n        if (Array.isArray(value)) {\n            const values = value.map(item => Array.isArray(item) ? this.itemValueForHTMLMode(item) : this.itemValue(item));\n            return values.join(', ');\n        }\n        return this.itemValue(value);\n    }\n    /**\n     * Creates a modal to input the value of this component.\n     * @param {HTMLElement} element - The element to attach the modal to.\n     * @param {any} attr - A list of attributes to add to the modal.\n     * @param {boolean} confirm - If we should add a confirmation to the modal that keeps it from closing unless confirmed.\n     * @returns {HTMLElement} - The created modal element.\n     */\n    createModal(element, attr, confirm) {\n        const dialog = this.ce('div', attr || {});\n        this.setContent(dialog, this.renderTemplate('dialog'));\n        // Add refs to dialog, not \"this\".\n        dialog.refs = {};\n        this.loadRefs.call(dialog, dialog, {\n            dialogOverlay: 'single',\n            dialogContents: 'single',\n            dialogClose: 'single',\n        });\n        dialog.refs.dialogContents.appendChild(element);\n        document.body.appendChild(dialog);\n        document.body.classList.add('modal-open');\n        dialog.close = () => {\n            document.body.classList.remove('modal-open');\n            dialog.dispatchEvent(new CustomEvent('close'));\n        };\n        this.addEventListener(dialog, 'close', () => this.removeChildFrom(dialog, document.body));\n        const close = (event) => {\n            event.preventDefault();\n            dialog.close();\n        };\n        const handleCloseClick = (e) => {\n            if (confirm) {\n                confirm().then(() => close(e))\n                    .catch(() => { });\n            }\n            else {\n                close(e);\n            }\n        };\n        this.addEventListener(dialog.refs.dialogOverlay, 'click', handleCloseClick);\n        this.addEventListener(dialog.refs.dialogClose, 'click', handleCloseClick);\n        return dialog;\n    }\n    /**\n     * Uses CSS classes to show or hide an element.\n     * @returns {boolean} - TRUE if the element has been css removed.\n     */\n    get optimizeRedraw() {\n        if (this.options.optimizeRedraw && this.element && !this.visible) {\n            this.addClass(this.element, 'formio-removed');\n            return true;\n        }\n        return false;\n    }\n    /**\n     * Retrieves the CSS class name of this component.\n     * @returns {string} - The class name of this component.\n     */\n    get className() {\n        let className = this.hasInput ? `${this.transform('class', 'form-group')} has-feedback ` : '';\n        className += `formio-component formio-component-${this.component.type} `;\n        // TODO: find proper way to avoid overriding of default type-based component styles\n        if (this.key && this.key !== 'form') {\n            className += `formio-component-${this.key} `;\n        }\n        if (this.component.multiple) {\n            className += 'formio-component-multiple ';\n        }\n        if (this.component.customClass) {\n            className += this.component.customClass;\n        }\n        if (this.hasInput && this.component.validate && (0, utils_1.boolValue)(this.component.validate.required)) {\n            className += ' required';\n        }\n        if (this.labelIsHidden()) {\n            className += ' formio-component-label-hidden';\n        }\n        if (!this.visible) {\n            className += ' formio-hidden';\n        }\n        return className;\n    }\n    /**\n     * Build the custom style from the layout values\n     * @returns {string} - The custom style\n     */\n    get customStyle() {\n        let customCSS = '';\n        lodash_1.default.each(this.component.style, (value, key) => {\n            if (value !== '') {\n                customCSS += `${key}:${value};`;\n            }\n        });\n        return customCSS;\n    }\n    /**\n     * Returns the component condition operator settings if available.\n     * @returns {object} - The component condition operator settings.\n     */\n    static get serverConditionSettings() {\n        return Component.conditionOperatorsSettings;\n    }\n    /**\n     * Returns if the application is on a mobile device.\n     * @returns {boolean} - TRUE if the application is on a mobile device.\n     */\n    get isMobile() {\n        return (0, ismobilejs_1.default)();\n    }\n    /**\n     * Returns the outside wrapping element of this component.\n     * @returns {HTMLElement} - The wrapping element of this component.\n     */\n    getElement() {\n        return this.element;\n    }\n    /**\n     * Create an evaluation context for all script executions and interpolations.\n     * @param {any} additional - Additional context to provide.\n     * @returns {any} - The evaluation context.\n     */\n    evalContext(additional) {\n        return super.evalContext(Object.assign({\n            component: this.component,\n            row: this.data,\n            rowIndex: this.rowIndex,\n            data: this.rootValue,\n            iconClass: this.iconClass.bind(this),\n            // Bind the translate function to the data context of any interpolated string.\n            // It is useful to translate strings in different scenarions (eg: custom edit grid templates, custom error messages etc.)\n            // and desirable to be publicly available rather than calling the internal {instance.t} function in the template string.\n            t: this.t.bind(this),\n            submission: (this.root ? this.root._submission : {\n                data: this.rootValue\n            }),\n            form: this.root ? this.root._form : {},\n            options: this.options,\n        }, additional));\n    }\n    /**\n     * Sets the pristine flag for this component.\n     * @param {boolean} pristine - TRUE to make pristine, FALSE not pristine.\n     */\n    setPristine(pristine) {\n        this.pristine = pristine;\n    }\n    /**\n     * Returns if the component is pristine.\n     * @returns {boolean} - TRUE if the component is pristine.\n     */\n    get isPristine() {\n        return this.pristine;\n    }\n    /**\n     * Sets the dirty flag for this component.\n     * @param {boolean} dirty - TRUE to make dirty, FALSE not dirty.\n     */\n    setDirty(dirty) {\n        this.dirty = dirty;\n    }\n    /**\n     * Returns if the component is dirty.\n     * @returns {boolean} - TRUE if the component is dirty.\n     */\n    get isDirty() {\n        return this.dirty;\n    }\n    /**\n     * Removes a value out of the data array and rebuild the rows.\n     * @param {number} index - The index of the data element to remove.\n     */\n    removeValue(index) {\n        this.splice(index);\n        this.redraw();\n        this.restoreValue();\n        this.triggerRootChange();\n    }\n    /**\n     * Returns the icon class for a given icon name.\n     * @param {string} name - The name of the icon you wish to fetch provided the icon class. This is the \"font awesome\" version of the name of the icon.\n     * @param {boolean} spinning - If the component should be spinning.\n     * @returns {string} - The icon class for the equivalent icon in the iconset we are using.\n     */\n    iconClass(name, spinning) {\n        const iconset = this.options.iconset || Templates_1.default.current.defaultIconset || 'fa';\n        return Templates_1.default.current.hasOwnProperty('iconClass')\n            ? Templates_1.default.current.iconClass(iconset, name, spinning)\n            : this.options.iconset === 'fa' ? Templates_1.default.defaultTemplates.iconClass(iconset, name, spinning) : name;\n    }\n    /**\n     * Returns the size css class names for our current template.\n     * @param {string} size - The size class name for the default iconset.\n     * @returns {string} - The size class for our component.\n     */\n    size(size) {\n        return Templates_1.default.current.hasOwnProperty('size')\n            ? Templates_1.default.current.size(size)\n            : size;\n    }\n    /**\n     * The readible name for this component.\n     * @returns {string} - The name of the component.\n     */\n    get name() {\n        return this.t(this.component.label || this.component.placeholder || this.key, { _userInput: true });\n    }\n    /**\n     * Returns the visible errors for this component.\n     * @returns {Array<object>} - The visible errors for this component.\n     */\n    get visibleErrors() {\n        return this._visibleErrors;\n    }\n    /**\n     * Returns all the errors for this component, visible or not.\n     * @returns {Array<object>} - All the errors for this component.\n     */\n    get errors() {\n        return this._errors;\n    }\n    /**\n     * Returns the error label for this component.\n     * @returns {string} - The error label for this component.\n     */\n    get errorLabel() {\n        return this.t(this.component.errorLabel\n            || this.component.label\n            || this.component.placeholder\n            || this.key);\n    }\n    /**\n     * Get the error message provided a certain type of error.\n     * @param {string} type - The type of error to fetch the message for.\n     * @returns {string} - The error message configured for this component.\n     */\n    errorMessage(type) {\n        return (this.component.errors && this.component.errors[type]) ? this.component.errors[type] : type;\n    }\n    /**\n     * Sets the content, innerHTML, of an element to the sanitized content.\n     * @param {HTMLElement} element - The element to set the innerHTML to.\n     * @param {string} content - The HTML string content that we wish to set.\n     * @param {boolean} forceSanitize - If we should force the content to be sanitized.\n     * @param {any} sanitizeOptions - The options for the sanitize function.\n     * @returns {boolean} - TRUE if the content was sanitized and set.\n     */\n    setContent(element, content, forceSanitize, sanitizeOptions) {\n        if (element instanceof HTMLElement) {\n            element.innerHTML = this.sanitize(content, forceSanitize, sanitizeOptions);\n            return true;\n        }\n        return false;\n    }\n    /**\n     * Restores the caret position in the input element after a refresh occurs.\n     */\n    restoreCaretPosition() {\n        var _a, _b, _c;\n        if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.currentSelection) {\n            if ((_b = this.refs.input) === null || _b === void 0 ? void 0 : _b.length) {\n                const { index } = this.root.currentSelection;\n                let input = this.refs.input[index];\n                const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test((i === null || i === void 0 ? void 0 : i.type) || '');\n                if (input) {\n                    if (isInputRangeSelectable(input)) {\n                        input.setSelectionRange(input.value.length, input.value.length);\n                    }\n                }\n                else {\n                    input = this.refs.input[this.refs.input.length];\n                    const lastCharacter = ((_c = input.value) === null || _c === void 0 ? void 0 : _c.length) || 0;\n                    if (isInputRangeSelectable(input)) {\n                        input.setSelectionRange(lastCharacter, lastCharacter);\n                    }\n                }\n            }\n        }\n    }\n    /**\n     * Redraw the component.\n     * @returns {Promise<void>} - A promise that resolves when the component is done redrawing.\n     */\n    redraw() {\n        // Don't bother if we have not built yet.\n        if (!this.element || !this.element.parentNode || this.optimizeRedraw) {\n            // Return a non-resolving promise.\n            return Promise.resolve();\n        }\n        this.detach();\n        this.emit('redraw');\n        // Since we are going to replace the element, we need to know it's position so we can find it in the parent's children.\n        const parent = this.element.parentNode;\n        const index = Array.prototype.indexOf.call(parent.children, this.element);\n        this.element.outerHTML = this.sanitize(this.render());\n        this.setElement(parent.children[index]);\n        return this.attach(this.element);\n    }\n    /**\n     * Rebuild and redraw a component.\n     * @returns {Promise<void>} - A promise that resolves when the component is done rebuilding and redrawing.\n     */\n    rebuild() {\n        this.destroy();\n        this.init();\n        this.visible = this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden;\n        return this.redraw();\n    }\n    /**\n     * Removes all event listeners attached to this component.\n     */\n    removeEventListeners() {\n        super.removeEventListeners();\n        this.tooltips.forEach(tooltip => tooltip.destroy());\n        this.tooltips = [];\n    }\n    /**\n     * Returns if the dom node has the classes provided.\n     * @param {HTMLElement} element - The element to check for the class.\n     * @param {string} className - The name of the class to check.\n     * @returns {boolean|void} - TRUE if the element has the class.\n     */\n    hasClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.hasClass(element, this.transform('class', className));\n    }\n    /**\n     * Adds a class to an HTML element.\n     * @param {HTMLElement} element - The dom element to add the class to.\n     * @param {string} className - The class name you wish to add.\n     * @returns {this|void} - The component instance.\n     */\n    addClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.addClass(element, this.transform('class', className));\n    }\n    /**\n     * Removes a class from an element.\n     * @param {HTMLElement} element - The element to remove the class from.\n     * @param {string} className - The class name to remove.\n     * @returns {this|void} - The component instance.\n     */\n    removeClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.removeClass(element, this.transform('class', className));\n    }\n    /**\n     * Determines if this component has a condition defined.\n     * @returns {boolean} - TRUE if the component has a condition defined.\n     */\n    hasCondition() {\n        if (this._hasCondition !== null) {\n            return this._hasCondition;\n        }\n        this._hasCondition = FormioUtils.hasCondition(this.component);\n        return this._hasCondition;\n    }\n    /**\n     * Check if this component is conditionally visible.\n     * @param {any} data - The data to check against.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean} - TRUE if the component is conditionally visible.\n     */\n    conditionallyVisible(data, row) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        if (this.builderMode || this.previewMode) {\n            return true;\n        }\n        data = data || (this.root ? this.root.data : {});\n        return this.checkCondition(row, data);\n    }\n    /**\n     * Checks the condition of this component.\n     *\n     * TODO: Switch row and data parameters to be consistent with other methods.\n     * @param {any} row - The row contextual data.\n     * @param {any} data - The global data object.\n     * @returns {boolean} - True if the condition applies to this component.\n     */\n    checkCondition(row, data) {\n        return FormioUtils.checkCondition(this.component, row || this.data, data || this.rootValue, this.root ? this.root._form : {}, this);\n    }\n    /**\n     * Check for conditionals and hide/show the element based on those conditions.\n     * @param {any} data - The data to check against.\n     * @param {any} flags - The flags passed to checkData function.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean} - TRUE if the component is visible.\n     */\n    checkComponentConditions(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        if (!this.builderMode & !this.previewMode && this.fieldLogic(data, row)) {\n            this.redraw();\n        }\n        // Check advanced conditions (and cache the result)\n        const isConditionallyHidden = this.checkConditionallyHidden(data, row) || this._parentConditionallyHidden;\n        if (isConditionallyHidden !== this._conditionallyHidden) {\n            this._conditionallyHidden = isConditionallyHidden;\n            this.clearOnHide();\n        }\n        // Check visibility\n        const visible = (this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden);\n        if (this.visible !== visible) {\n            this.visible = visible;\n        }\n        return visible;\n    }\n    /**\n     * Checks conditions for this component and any sub components.\n     * @param {any} data - The data to check against.\n     * @param {any} flags - The flags passed to checkData function.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean} - TRUE if the component is visible.\n     */\n    checkConditions(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        return this.checkComponentConditions(data, flags, row);\n    }\n    /**\n     * Returns the component logic if applicable.\n     * @returns {Array<object>} - The component logic.\n     */\n    get logic() {\n        return this.component.logic || [];\n    }\n    /**\n     * Check all triggers and apply necessary actions.\n     * @param {any} data - The data to check against.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean|void} - TRUE if the component was altered.\n     */\n    fieldLogic(data = this.rootValue, row = this.data) {\n        const logics = this.logic;\n        // If there aren't logic, don't go further.\n        if (logics.length === 0) {\n            return;\n        }\n        const newComponent = (0, utils_1.fastCloneDeep)(this.originalComponent);\n        let changed = logics.reduce((changed, logic) => {\n            const result = FormioUtils.checkTrigger(newComponent, logic.trigger, row, data, this.root ? this.root._form : {}, this);\n            return (result ? this.applyActions(newComponent, logic.actions, result, row, data) : false) || changed;\n        }, false);\n        // If component definition changed, replace and mark as changed.\n        if (!lodash_1.default.isEqual(this.component, newComponent)) {\n            this.component = newComponent;\n            changed = true;\n            const disabled = this.shouldDisabled;\n            // Change disabled state if it has changed\n            if (this.disabled !== disabled) {\n                this.disabled = disabled;\n            }\n        }\n        return changed;\n    }\n    /**\n     * Retuns if the browser is Internet Explorer.\n     * @returns {boolean} - TRUE if the browser is IE.\n     */\n    isIE() {\n        if (typeof window === 'undefined') {\n            return false;\n        }\n        const userAgent = window.navigator.userAgent;\n        const msie = userAgent.indexOf('MSIE ');\n        if (msie > 0) {\n            // IE 10 or older => return version number\n            return parseInt(userAgent.substring(msie + 5, userAgent.indexOf('.', msie)), 10);\n        }\n        const trident = userAgent.indexOf('Trident/');\n        if (trident > 0) {\n            // IE 11 => return version number\n            const rv = userAgent.indexOf('rv:');\n            return parseInt(userAgent.substring(rv + 3, userAgent.indexOf('.', rv)), 10);\n        }\n        const edge = userAgent.indexOf('Edge/');\n        if (edge > 0) {\n            // IE 12 (aka Edge) => return version number\n            return parseInt(userAgent.substring(edge + 5, userAgent.indexOf('.', edge)), 10);\n        }\n        // other browser\n        return false;\n    }\n    /**\n     * Defines the logic action value through evaluation.\n     * @param {object} action - The action within the Logic system to perform.\n     * @param {object} argsObject - The arguments to pass to the evaluation.\n     * @returns {any} - The result of the evaluation.\n     */\n    defineActionValue(action, argsObject) {\n        return this.evaluate(action.value, argsObject, 'value');\n    }\n    /**\n     * Apply the actions of Logic for a component once the conditions have been met.\n     * @param {object} newComponent - The new component to apply the actions to.\n     * @param {Array<object>} actions - An array of actions\n     * @param {any} result - The result of the conditional check in order to evaluate the actions.\n     * @param {any} row - The contextual row data for this component.\n     * @param {any} data - The global data object for the submission.\n     * @returns {boolean} - TRUE if the component was altered.\n     */\n    applyActions(newComponent, actions, result, row, data) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        return actions.reduce((changed, action) => {\n            switch (action.type) {\n                case 'property': {\n                    FormioUtils.setActionProperty(newComponent, action, result, row, data, this);\n                    const property = action.property.value;\n                    if (!lodash_1.default.isEqual(lodash_1.default.get(this.component, property), lodash_1.default.get(newComponent, property))) {\n                        // Advanced Logic can modify the component's hidden property; because we track conditionally hidden state\n                        // separately from the component's hidden property, and technically this Advanced Logic conditionally hides\n                        // a component, we need to set _conditionallyHidden to the new value\n                        if (property === 'hidden') {\n                            this._conditionallyHidden = newComponent.hidden;\n                        }\n                        changed = true;\n                    }\n                    break;\n                }\n                case 'value': {\n                    const oldValue = this.getValue();\n                    const newValue = this.defineActionValue(action, {\n                        value: lodash_1.default.clone(oldValue),\n                        data,\n                        row,\n                        component: newComponent,\n                        result,\n                    });\n                    if (!lodash_1.default.isEqual(oldValue, newValue) && !(this.component.clearOnHide && this.conditionallyHidden)) {\n                        this.setValue(newValue);\n                        if (this.viewOnly) {\n                            this.dataValue = newValue;\n                        }\n                        changed = true;\n                    }\n                    break;\n                }\n                case 'mergeComponentSchema': {\n                    const schema = this.evaluate(action.schemaDefinition, {\n                        value: lodash_1.default.clone(this.getValue()),\n                        data,\n                        row,\n                        component: newComponent,\n                        result,\n                    }, 'schema');\n                    lodash_1.default.assign(newComponent, schema);\n                    if (!lodash_1.default.isEqual(this.component, newComponent)) {\n                        changed = true;\n                    }\n                    break;\n                }\n                case 'customAction': {\n                    const oldValue = this.getValue();\n                    const newValue = this.evaluate(action.customAction, {\n                        value: lodash_1.default.clone(oldValue),\n                        data,\n                        row,\n                        input: oldValue,\n                        component: newComponent,\n                        result,\n                    }, 'value');\n                    if (!lodash_1.default.isEqual(oldValue, newValue) && !(this.component.clearOnHide && this.conditionallyHidden)) {\n                        this.setValue(newValue);\n                        if (this.viewOnly) {\n                            this.dataValue = newValue;\n                        }\n                        changed = true;\n                    }\n                    break;\n                }\n            }\n            return changed;\n        }, false);\n    }\n    // Deprecated\n    addInputError(message, dirty, elements) {\n        this.addMessages(message);\n        this.setErrorClasses(elements, dirty, !!message);\n    }\n    // Deprecated\n    removeInputError(elements) {\n        this.setErrorClasses(elements, true, false);\n    }\n    /**\n     * Add a new input error to this element.\n     * @param {Array<object>|string} messages - An array of messages to add to the element.\n     * @returns {void}\n     */\n    addMessages(messages) {\n        if (!messages) {\n            return;\n        }\n        // Standardize on array of objects for message.\n        if (typeof messages === 'string') {\n            messages = {\n                messages,\n                level: 'error',\n            };\n        }\n        if (!Array.isArray(messages)) {\n            messages = [messages];\n        }\n        messages = lodash_1.default.uniqBy(messages, message => message.message);\n        if (this.refs.messageContainer) {\n            this.setContent(this.refs.messageContainer, messages.map((message) => {\n                return this.renderTemplate('message', Object.assign({}, message));\n            }).join(''));\n        }\n    }\n    /**\n     * Sets the form input widget error classes.\n     * @param {Array<HTMLElement>} elements - An array of DOM elements to set the error classes on.\n     * @param {boolean} dirty - If the input is dirty.\n     * @param {boolean} hasErrors - If the input has errors.\n     * @param {boolean} hasMessages - If the input has messages.\n     * @param {HTMLElement} element - The wrapper element for all the other elements passed in first argument.\n     * @returns {void}\n     */\n    setErrorClasses(elements, dirty, hasErrors, hasMessages, element = this.element) {\n        this.clearErrorClasses();\n        elements.forEach((element) => {\n            this.setElementInvalid(this.performInputMapping(element), false);\n        });\n        this.setInputWidgetErrorClasses(elements, hasErrors);\n        // do not set error classes for hidden components\n        if (!this.visible) {\n            return;\n        }\n        if (hasErrors) {\n            // Add error classes\n            elements.forEach((input) => {\n                this.setElementInvalid(this.performInputMapping(input), true);\n            });\n            if (dirty && this.options.highlightErrors) {\n                this.addClass(element, this.options.componentErrorClass);\n            }\n            else {\n                this.addClass(element, 'has-error');\n            }\n        }\n        if (hasMessages) {\n            this.addClass(element, 'has-message');\n        }\n    }\n    /**\n     * Adds the classes necessary to mark an element as invalid.\n     * @param {HTMLElement} element - The element you wish to add the invalid classes to.\n     * @param {boolean} invalid - TRUE if the component is invalid, FALSE otherwise.\n     * @returns {void}\n     */\n    setElementInvalid(element, invalid) {\n        if (!element)\n            return;\n        if (invalid) {\n            this.addClass(element, 'is-invalid');\n        }\n        else {\n            this.removeClass(element, 'is-invalid');\n        }\n        element.setAttribute('aria-invalid', invalid ? 'true' : 'false');\n    }\n    /**\n     * Clears the components data if it is conditionally hidden AND clearOnHide is set to true for this component.\n     */\n    clearOnHide() {\n        // clearOnHide defaults to true for old forms (without the value set) so only trigger if the value is false.\n        if (\n        // if change happens inside EditGrid's row, it doesn't trigger change on the root level, so rootPristine will be true\n        (!this.rootPristine || this.options.server || (0, utils_1.isInsideScopingComponent)(this)) &&\n            this.component.clearOnHide !== false &&\n            !this.options.readOnly &&\n            !this.options.showHiddenFields) {\n            if (this.conditionallyHidden) {\n                this.deleteValue();\n            }\n            else if (!this.hasValue() && this.shouldAddDefaultValue) {\n                // If shown, ensure the default is set.\n                this.setValue(this.defaultValue, {\n                    noUpdateEvent: true\n                });\n            }\n        }\n    }\n    /**\n     * Triggers a debounced onChange event for the root component (usually Webform).\n     * @param {...any} args - The arguments to pass to the onChange event.\n     */\n    triggerRootChange(...args) {\n        if (this.options.onChange) {\n            this.options.onChange(...args);\n        }\n        else if (this.root && this.root.triggerChange) {\n            this.root.triggerChange(...args);\n        }\n    }\n    /**\n     * Called when the component value has been changed. This will then trigger the root level onChange handler which\n     * propagates the checkData methods for the full component tree.\n     * @param {any} flags - The flags for the change event propagation.\n     * @param {boolean} fromRoot - If the change event is from the root component.\n     * @returns {boolean} - TRUE if the component has changed.\n     */\n    onChange(flags, fromRoot) {\n        flags = flags || {};\n        if (flags.modified) {\n            if (!flags.noPristineChangeOnModified) {\n                this.pristine = false;\n            }\n            this.addClass(this.getElement(), 'formio-modified');\n        }\n        // If we are supposed to validate on blur, then don't trigger validation yet.\n        if (this.component.validateOn === 'blur' || this.component.validateOn === 'submit') {\n            flags.noValidate = true;\n        }\n        if (this.component.onChange) {\n            this.evaluate(this.component.onChange, {\n                flags\n            });\n        }\n        // Set the changed variable.\n        const changed = {\n            instance: this,\n            component: this.component,\n            value: this.dataValue,\n            flags: flags\n        };\n        // Emit the change.\n        this.emit('componentChange', changed);\n        // Do not propogate the modified flag.\n        let modified = false;\n        if (flags.modified) {\n            modified = true;\n            delete flags.modified;\n        }\n        // Bubble this change up to the top.\n        if (!fromRoot) {\n            this.triggerRootChange(flags, changed, modified);\n        }\n        return changed;\n    }\n    get wysiwygDefault() {\n        return {\n            quill: {\n                theme: 'snow',\n                placeholder: this.t(this.component.placeholder, { _userInput: true }),\n                modules: {\n                    toolbar: [\n                        [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown\n                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],\n                        [{ 'font': [] }],\n                        ['bold', 'italic', 'underline', 'strike', { 'script': 'sub' }, { 'script': 'super' }, 'clean'],\n                        [{ 'color': [] }, { 'background': [] }],\n                        [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }, { 'align': [] }],\n                        ['blockquote', 'code-block'],\n                        ['link', 'image', 'video', 'formula', 'source']\n                    ]\n                }\n            },\n            ace: {\n                theme: 'ace/theme/xcode',\n                maxLines: 12,\n                minLines: 12,\n                tabSize: 2,\n                mode: 'ace/mode/javascript',\n                placeholder: this.t(this.component.placeholder, { _userInput: true })\n            },\n            ckeditor: {\n                image: {\n                    toolbar: [\n                        'imageTextAlternative',\n                        '|',\n                        'imageStyle:full',\n                        'imageStyle:alignLeft',\n                        'imageStyle:alignCenter',\n                        'imageStyle:alignRight'\n                    ],\n                    styles: [\n                        'full',\n                        'alignLeft',\n                        'alignCenter',\n                        'alignRight'\n                    ]\n                },\n                extraPlugins: []\n            },\n            default: {}\n        };\n    }\n    addCKE(element, settings, onChange) {\n        settings = lodash_1.default.isEmpty(settings) ? {} : settings;\n        settings.base64Upload = this.component.isUploadEnabled ? false : true;\n        settings.mediaEmbed = { previewsInData: true };\n        settings = lodash_1.default.merge(this.wysiwygDefault.ckeditor, lodash_1.default.get(this.options, 'editors.ckeditor.settings', {}), settings);\n        if (this.component.isUploadEnabled) {\n            settings.extraPlugins.push((0, uploadAdapter_1.getFormioUploadAdapterPlugin)(this.fileService, this));\n        }\n        return Formio_1.Formio.requireLibrary('ckeditor', isIEBrowser ? 'CKEDITOR' : 'ClassicEditor', lodash_1.default.get(this.options, 'editors.ckeditor.src', `${Formio_1.Formio.cdn.ckeditor}/ckeditor.js`), true)\n            .then(() => {\n            if (!element.parentNode) {\n                return Promise.reject();\n            }\n            if (isIEBrowser) {\n                const editor = CKEDITOR.replace(element);\n                editor.on('change', () => onChange(editor.getData()));\n                return Promise.resolve(editor);\n            }\n            else {\n                return ClassicEditor.create(element, settings).then(editor => {\n                    editor.model.document.on('change', () => onChange(editor.data.get()));\n                    return editor;\n                });\n            }\n        });\n    }\n    addQuill(element, settings, onChange) {\n        settings = lodash_1.default.isEmpty(settings) ? this.wysiwygDefault.quill : settings;\n        settings = lodash_1.default.merge(this.wysiwygDefault.quill, lodash_1.default.get(this.options, 'editors.quill.settings', {}), settings);\n        settings = Object.assign(Object.assign({}, settings), { modules: Object.assign({ table: true }, settings.modules) });\n        // Lazy load the quill css.\n        Formio_1.Formio.requireLibrary(`quill-css-${settings.theme}`, 'Quill', [\n            { type: 'styles', src: `${Formio_1.Formio.cdn.quill}/quill.${settings.theme}.css` }\n        ], true);\n        // Lazy load the quill library.\n        return Formio_1.Formio.requireLibrary('quill', 'Quill', lodash_1.default.get(this.options, 'editors.quill.src', `${Formio_1.Formio.cdn.quill}/quill.min.js`), true)\n            .then(() => {\n            return Formio_1.Formio.requireLibrary('quill-table', 'Quill', `${Formio_1.Formio.cdn.baseUrl}/quill/quill-table.js`, true)\n                .then(() => {\n                if (!element.parentNode) {\n                    return Promise.reject();\n                }\n                this.quill = new Quill(element, isIEBrowser ? Object.assign(Object.assign({}, settings), { modules: {} }) : settings);\n                /** This block of code adds the [source] capabilities.  See https://codepen.io/anon/pen/ZyEjrQ */\n                const txtArea = document.createElement('textarea');\n                txtArea.setAttribute('class', 'quill-source-code');\n                this.quill.addContainer('ql-custom').appendChild(txtArea);\n                const qlSource = element.parentNode.querySelector('.ql-source');\n                if (qlSource) {\n                    this.addEventListener(qlSource, 'click', (event) => {\n                        event.preventDefault();\n                        if (txtArea.style.display === 'inherit') {\n                            this.quill.setContents(this.quill.clipboard.convert({ html: txtArea.value }));\n                        }\n                        txtArea.style.display = (txtArea.style.display === 'none') ? 'inherit' : 'none';\n                    });\n                }\n                /** END CODEBLOCK */\n                // Make sure to select cursor when they click on the element.\n                this.addEventListener(element, 'click', () => this.quill.focus());\n                // Allows users to skip toolbar items when tabbing though form\n                const elm = document.querySelectorAll('.ql-formats > button');\n                for (let i = 0; i < elm.length; i++) {\n                    elm[i].setAttribute('tabindex', '-1');\n                }\n                this.quill.on('text-change', () => {\n                    txtArea.value = this.quill.root.innerHTML;\n                    onChange(txtArea);\n                });\n                return this.quill;\n            });\n        });\n    }\n    get shouldSanitizeValue() {\n        var _a;\n        // Sanitize value if sanitizing for thw whole content is turned off\n        return (((_a = this.options) === null || _a === void 0 ? void 0 : _a.sanitize) !== false);\n    }\n    addAce(element, settings, onChange) {\n        if (!settings || (settings.theme === 'snow')) {\n            const mode = settings ? settings.mode : '';\n            settings = {};\n            if (mode) {\n                settings.mode = mode;\n            }\n        }\n        settings = lodash_1.default.merge(this.wysiwygDefault.ace, lodash_1.default.get(this.options, 'editors.ace.settings', {}), settings || {});\n        return Formio_1.Formio.requireLibrary('ace', 'ace', lodash_1.default.get(this.options, 'editors.ace.src', `${Formio_1.Formio.cdn.ace}/ace.js`), true)\n            .then((editor) => {\n            editor = editor.edit(element);\n            editor.removeAllListeners('change');\n            editor.setOptions(settings);\n            editor.getSession().setMode(settings.mode);\n            editor.on('change', () => onChange(editor.getValue()));\n            if (settings.isUseWorkerDisabled) {\n                editor.session.setUseWorker(false);\n            }\n            return editor;\n        });\n    }\n    getDragula() {\n        return __awaiter(this, void 0, void 0, function* () {\n            return new Promise((resolve) => {\n                return Formio_1.Formio.requireLibrary('dragula', 'dragula', `${Formio_1.Formio.cdn.dragula}/dragula.js`, true, (ready) => {\n                    return ready.then(resolve);\n                });\n            });\n        });\n    }\n    get tree() {\n        return this.component.tree || false;\n    }\n    /**\n     * The empty value for this component.\n     * @returns {null} - The empty value for this component.\n     */\n    get emptyValue() {\n        return null;\n    }\n    /**\n     * Returns if this component has a value set.\n     * @param {any} data - The global data object.\n     * @returns {boolean} - TRUE if a value is set.\n     */\n    hasValue(data) {\n        return !lodash_1.default.isUndefined(lodash_1.default.get(data || this.data, this.key));\n    }\n    /**\n     * Get the data value at the root level.\n     * @returns {*} - The root value for the component, typically the Webform data object.\n     */\n    get rootValue() {\n        return this.root ? this.root.data : this.data;\n    }\n    get rootPristine() {\n        return lodash_1.default.get(this, 'root.pristine', false);\n    }\n    /**\n     * Get the static value of this component.\n     * @returns {*} - The value for this component.\n     */\n    get dataValue() {\n        if (!this.key ||\n            (this.conditionallyHidden && this.component.clearOnHide && !this.rootPristine)) {\n            return this.emptyValue;\n        }\n        if (!this.hasValue() && this.shouldAddDefaultValue) {\n            const empty = this.component.multiple ? [] : this.emptyValue;\n            if (!this.rootPristine) {\n                this.dataValue = empty;\n            }\n            return empty;\n        }\n        return lodash_1.default.get(this._data, this.key);\n    }\n    /**\n     * Sets the static value of this component.\n     * @param {*} value - The value to set for this component.\n     */\n    set dataValue(value) {\n        if (!this.allowData ||\n            !this.key ||\n            (this.conditionallyHidden && this.component.clearOnHide && !this.rootPristine)) {\n            return;\n        }\n        if ((value !== null) && (value !== undefined)) {\n            value = this.hook('setDataValue', value, this.key, this._data);\n        }\n        if ((value === null) || (value === undefined)) {\n            this.unset();\n            return;\n        }\n        lodash_1.default.set(this._data, this.key, value);\n        return;\n    }\n    /**\n     * Splice a value from the dataValue.\n     * @param {number} index - The index to splice for an array component values.\n     * @param {*} flags - The flags to use when splicing the value.\n     */\n    splice(index, flags = {}) {\n        if (this.hasValue()) {\n            const dataValue = this.dataValue || [];\n            if (lodash_1.default.isArray(dataValue) && dataValue.hasOwnProperty(index)) {\n                dataValue.splice(index, 1);\n                this.dataValue = dataValue;\n                this.triggerChange(flags);\n            }\n        }\n    }\n    unset() {\n        lodash_1.default.unset(this._data, this.key);\n    }\n    /**\n     * Deletes the value of the component.\n     */\n    deleteValue() {\n        this.setValue(null, {\n            noUpdateEvent: true,\n            noDefault: true\n        });\n        this.unset();\n    }\n    getCustomDefaultValue(defaultValue) {\n        if (this.component.customDefaultValue && !this.options.preview) {\n            defaultValue = this.evaluate(this.component.customDefaultValue, { value: '' }, 'value');\n        }\n        return defaultValue;\n    }\n    get shouldAddDefaultValue() {\n        return !this.options.noDefaults || (this.component.defaultValue && !this.isEmpty(this.component.defaultValue)) || this.component.customDefaultValue;\n    }\n    get defaultValue() {\n        let defaultValue = this.emptyValue;\n        if (this.component.defaultValue) {\n            defaultValue = this.component.defaultValue;\n        }\n        defaultValue = this.getCustomDefaultValue(defaultValue);\n        const checkMask = (value) => {\n            if (typeof value === 'string') {\n                if (this.component.type !== 'textfield') {\n                    const placeholderChar = this.placeholderChar;\n                    value = (0, vanilla_text_mask_1.conformToMask)(value, this.defaultMask, { placeholderChar }).conformedValue;\n                    if (!FormioUtils.matchInputMask(value, this.defaultMask)) {\n                        value = '';\n                    }\n                }\n            }\n            else {\n                value = '';\n            }\n            return value;\n        };\n        if (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        if (isArray &&\n            Array.isArray(this.defaultValue) &&\n            this.refs.hasOwnProperty('input') &&\n            valueInput &&\n            (valueInput.length !== value.length) &&\n            this.visible) {\n            this.redraw();\n        }\n        if (this.isHtmlRenderMode() && flags && flags.fromSubmission && changed) {\n            this.redraw();\n            return changed;\n        }\n        for (const i in this.refs.input) {\n            if (this.refs.input.hasOwnProperty(i)) {\n                this.setValueAt(i, isArray && !this.isSingleInputValue() ? value[i] : value, flags);\n            }\n        }\n        return changed;\n    }\n    /**\n     * Returns if the value (e.g. array) should be divided between several inputs\n     * @returns {boolean}\n     */\n    isSingleInputValue() {\n        return false;\n    }\n    /**\n     * Set the value at a specific index.\n     * @param {number} index - The index to set the value at.\n     * @param {*} value - The value to set at the specified index.\n     * @param {*} flags - The flags to use when setting the value.\n     */\n    setValueAt(index, value, flags = {}) {\n        if (!flags.noDefault && (value === null || value === undefined) && !this.component.multiple) {\n            value = this.defaultValue;\n        }\n        const input = this.performInputMapping(this.refs.input[index]);\n        const valueMaskInput = this.refs.valueMaskInput;\n        if ((valueMaskInput === null || valueMaskInput === void 0 ? void 0 : valueMaskInput.mask) && valueMaskInput.mask.textMaskInputElement) {\n            valueMaskInput.mask.textMaskInputElement.update(value);\n        }\n        if (input.mask && input.mask.textMaskInputElement) {\n            input.mask.textMaskInputElement.update(value);\n        }\n        else if (input.widget && input.widget.setValue) {\n            input.widget.setValue(value);\n        }\n        else {\n            input.value = value;\n        }\n    }\n    get hasSetValue() {\n        return this.hasValue() && !this.isEmpty(this.dataValue);\n    }\n    setDefaultValue() {\n        if (this.defaultValue && this.shouldAddDefaultValue) {\n            const defaultValue = (this.component.multiple && !this.dataValue.length) ? [] : this.defaultValue;\n            this.setValue(defaultValue, {\n                noUpdateEvent: true\n            });\n        }\n    }\n    /**\n     * Restore the value of a control.\n     */\n    restoreValue() {\n        if (this.hasSetValue) {\n            this.setValue(this.dataValue, {\n                noUpdateEvent: true\n            });\n        }\n        else {\n            this.setDefaultValue();\n        }\n    }\n    /**\n     * Normalize values coming into updateValue.\n     * @param {*} value - The value to normalize before setting.\n     * @returns {*} - The normalized value.\n     */\n    normalizeValue(value) {\n        return value;\n    }\n    /**\n     * Update a value of this component.\n     * @param {*} value - The value to update.\n     * @param {*} flags - The flags to use when updating the value.\n     * @returns {boolean} - If the value changed.\n     */\n    updateComponentValue(value, flags = {}) {\n        let newValue = (!flags.resetValue && (value === undefined || value === null)) ? this.getValue() : value;\n        newValue = this.normalizeValue(newValue, flags);\n        const oldValue = this.dataValue;\n        let changed = ((newValue !== undefined) ? this.hasChanged(newValue, oldValue) : false);\n        if (changed) {\n            this.dataValue = newValue;\n            changed = this.dataValue !== oldValue;\n            this.updateOnChange(flags, changed);\n        }\n        if (this.componentModal && flags && flags.fromSubmission) {\n            this.componentModal.setValue(value);\n        }\n        return changed;\n    }\n    /**\n     * Updates the value of this component plus all sub-components.\n     * @param {...any} args - The arguments to pass to updateValue.\n     * @returns {boolean} - If the value changed.\n     */\n    updateValue(...args) {\n        return this.updateComponentValue(...args);\n    }\n    getIcon(name, content, styles, ref = 'icon') {\n        return this.renderTemplate('icon', {\n            className: this.iconClass(name),\n            ref,\n            styles,\n            content\n        });\n    }\n    /**\n     * Resets the value of this component.\n     */\n    resetValue() {\n        this.unset();\n        this.setValue(this.defaultValue || this.emptyValue, {\n            noUpdateEvent: true,\n            noValidate: true,\n            resetValue: true\n        });\n    }\n    /**\n     * Determine if the value of this component has changed.\n     * @param {*} newValue - The new value to check.\n     * @param {*} oldValue - The existing value of the component.\n     * @returns {boolean} - TRUE if the value has changed.\n     */\n    hasChanged(newValue, oldValue) {\n        if (((newValue === undefined) || (newValue === null)) &&\n            ((oldValue === undefined) || (oldValue === null) || this.isEmpty(oldValue))) {\n            return false;\n        }\n        // If we do not have a value and are getting set to anything other than undefined or null, then we changed.\n        if (newValue !== undefined &&\n            newValue !== null &&\n            this.allowData &&\n            !this.hasValue()) {\n            return true;\n        }\n        return !lodash_1.default.isEqual(newValue, oldValue);\n    }\n    /**\n     * Update the value on change.\n     * @param {*} flags - The flags to use when triggering the on change event.\n     * @param {boolean} changed - If the value has changed.\n     * @returns {boolean} - If the value changed.\n     */\n    updateOnChange(flags = {}, changed = false) {\n        if (!flags.noUpdateEvent && changed) {\n            if (flags.fromSubmission) {\n                // Reset the errors when a submission has been made and allow it to revalidate.\n                this._errors = [];\n            }\n            this.triggerChange(flags);\n            return true;\n        }\n        return false;\n    }\n    convertNumberOrBoolToString(value) {\n        if (typeof value === 'number' || typeof value === 'boolean') {\n            return value.toString();\n        }\n        return value;\n    }\n    doValueCalculation(dataValue, data, row) {\n        var _a;\n        return this.evaluate(this.component.calculateValue, {\n            value: dataValue,\n            data,\n            row: row || this.data,\n            submission: ((_a = this.root) === null || _a === void 0 ? void 0 : _a._submission) || {\n                data: this.rootValue\n            }\n        }, 'value');\n    }\n    /* eslint-disable max-statements */\n    calculateComponentValue(data, flags, row) {\n        // Skip value calculation for the component if we don't have entire form data set or in builder mode\n        if (this.builderMode || lodash_1.default.isUndefined(lodash_1.default.get(this, 'root.data'))) {\n            return false;\n        }\n        // If no calculated value or\n        // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)\n        const { clearOnHide } = this.component;\n        const shouldBeCleared = this.conditionallyHidden && clearOnHide;\n        const allowOverride = lodash_1.default.get(this.component, 'allowCalculateOverride', false);\n        if (shouldBeCleared) {\n            // remove calculated value so that the value is recalculated once component becomes visible\n            if (this.hasOwnProperty('calculatedValue') && allowOverride) {\n                lodash_1.default.unset(this, 'calculatedValue');\n            }\n            return false;\n        }\n        // Handle all cases when calculated values should not fire.\n        if ((this.options.readOnly && !this.options.pdf && !this.component.calculateValue) ||\n            !(this.component.calculateValue || this.component.calculateValueVariable) ||\n            (this.options.server && !this.component.calculateServer) ||\n            (flags.dataSourceInitialLoading && allowOverride)) {\n            return false;\n        }\n        const dataValue = this.dataValue;\n        // Calculate the new value.\n        let calculatedValue = this.doValueCalculation(dataValue, data, row, flags);\n        if (this.options.readOnly && dataValue && !calculatedValue) {\n            return false;\n        }\n        if (lodash_1.default.isNil(calculatedValue)) {\n            calculatedValue = this.emptyValue;\n        }\n        const changed = !lodash_1.default.isEqual(dataValue, calculatedValue);\n        // Do not override calculations on server if they have calculateServer set.\n        if (allowOverride) {\n            // The value is considered locked if it is not empty and comes from a submission value.\n            const fromSubmission = (flags.fromSubmission && this.component.persistent === true);\n            if (this.isEmpty(dataValue)) {\n                // Reset the calculation lock if ever the data is cleared.\n                this.calculationLocked = false;\n            }\n            else if (this.calculationLocked || fromSubmission) {\n                this.calculationLocked = true;\n                return false;\n            }\n            const firstPass = (this.calculatedValue === undefined) || flags.resetValue;\n            if (firstPass) {\n                this.calculatedValue = null;\n            }\n            const newCalculatedValue = this.normalizeValue(this.convertNumberOrBoolToString(calculatedValue));\n            const previousCalculatedValue = this.normalizeValue(this.convertNumberOrBoolToString(this.calculatedValue));\n            const normalizedDataValue = this.normalizeValue(this.convertNumberOrBoolToString(dataValue));\n            const calculationChanged = !lodash_1.default.isEqual(previousCalculatedValue, newCalculatedValue);\n            const previousChanged = !lodash_1.default.isEqual(normalizedDataValue, previousCalculatedValue);\n            if (calculationChanged && previousChanged && !firstPass) {\n                return false;\n            }\n            // Check to ensure that the calculated value is different than the previously calculated value.\n            if (previousCalculatedValue && previousChanged && !calculationChanged) {\n                this.calculatedValue = null;\n                return false;\n            }\n            if (flags.isReordered || !calculationChanged) {\n                return false;\n            }\n            if (fromSubmission) {\n                // If we set value from submission and it differs from calculated one, set the calculated value to prevent overriding dataValue in the next pass\n                this.calculatedValue = (0, utils_1.fastCloneDeep)(calculatedValue);\n                return false;\n            }\n            // If this is the firstPass, and the dataValue is different than to the calculatedValue.\n            if (firstPass && !this.isEmpty(dataValue) && changed && calculationChanged) {\n                // Return that we have a change so it will perform another pass.\n                return true;\n            }\n        }\n        this.calculatedValue = (0, utils_1.fastCloneDeep)(calculatedValue);\n        if (changed) {\n            if (!flags.noPristineChangeOnModified && this.root.initialized) {\n                this.pristine = false;\n            }\n            flags.triggeredComponentId = this.id;\n            return this.setValue(calculatedValue, flags);\n        }\n        return false;\n    }\n    /* eslint-enable max-statements */\n    /**\n     * Performs calculations in this component plus any child components.\n     * @param {*} data - The data to perform the calculation with.\n     * @param {*} flags - The flags to use when calculating the value.\n     * @param {*} row - The contextual row data to use when performing the calculation.\n     * @returns {boolean} - TRUE if the value changed.\n     */\n    calculateValue(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        return this.calculateComponentValue(data, flags, row);\n    }\n    /**\n     * Get this component's label text.\n     * @returns {string} - The label text for this component.\n     */\n    get label() {\n        return this.component.label;\n    }\n    /**\n     * Set this component's label text and render it.\n     * @param {string} value - The new label text.\n     */\n    set label(value) {\n        this.component.label = value;\n        if (this.labelElement) {\n            this.labelElement.innerText = value;\n        }\n    }\n    /**\n     * Get FormioForm element at the root of this component tree.\n     * @returns {*} root - The root component to search from.\n     */\n    getRoot() {\n        return this.root;\n    }\n    /**\n     * Returns the invalid message, or empty string if the component is valid.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {boolean} ignoreCondition - If conditions for the component should be ignored when checking validity.\n     * @param {*} row - Contextual row data for this component.\n     * @returns {string} - The message to show when the component is invalid.\n     */\n    invalidMessage(data, dirty, ignoreCondition, row) {\n        var _a;\n        if (!row) {\n            row = (0, utils_1.getContextualRowData)(this.component, data, this.paths);\n        }\n        if (!ignoreCondition && !this.checkCondition(row, data)) {\n            return '';\n        }\n        // See if this is forced invalid.\n        if (this.invalid) {\n            return this.invalid;\n        }\n        // No need to check for errors if there is no input or if it is pristine.\n        if (!this.hasInput || (!dirty && this.pristine)) {\n            return '';\n        }\n        const validationScope = { errors: [] };\n        (0, process_1.processOneSync)({\n            component: this.component,\n            data,\n            row,\n            path: this.path || this.component.key,\n            parent: (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component,\n            paths: this.paths,\n            scope: validationScope,\n            instance: this,\n            processors: [\n                process_1.validateProcessInfo\n            ]\n        });\n        const errors = validationScope.errors;\n        const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));\n        return lodash_1.default.map(interpolatedErrors, 'message').join('\\n\\n');\n    }\n    /**\n     * Returns if the component is valid or not.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    isValid(data, dirty) {\n        return !this.invalidMessage(data, dirty);\n    }\n    setComponentValidity(errors, dirty, silentCheck) {\n        if (silentCheck) {\n            return [];\n        }\n        const messages = errors.filter(message => !message.fromServer);\n        if (errors.length && !!messages.length && (!this.isEmpty(this.defaultValue) || dirty || !this.pristine)) {\n            return this.setCustomValidity(messages, dirty);\n        }\n        else {\n            return this.setCustomValidity('');\n        }\n    }\n    /**\n     * Interpolate errors from the validation methods.\n     * @param {Array<any>} errors - An array of errors to interpolate.\n     * @returns {Array<any>} - The interpolated errors.\n     */\n    interpolateErrors(errors) {\n        var _a;\n        const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));\n        return ((_a = this.serverErrors) === null || _a === void 0 ? void 0 : _a.length) ? [...interpolatedErrors, ...this.serverErrors] : interpolatedErrors;\n    }\n    /**\n     * Show component validation errors.\n     * @param {*} errors - An array of errors that have occured.\n     * @param {*} data - The root submission data.\n     * @param {*} row - The contextual row data.\n     * @param {*} flags - The flags to perform validation.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    showValidationErrors(errors, data, row, flags) {\n        if (flags.silentCheck) {\n            return [];\n        }\n        let isDirty = (flags.dirty === false) ? false : (this.dirty || flags.dirty);\n        if (this.options.alwaysDirty) {\n            isDirty = true;\n        }\n        this.setDirty(isDirty);\n        return this.setComponentValidity(errors, isDirty, flags.silentCheck, flags.fromSubmission);\n    }\n    /**\n     * Perform a component validation.\n     * @param {*} data - The root data you wish to use for this component.\n     * @param {*} row - The contextual row data you wish to use for this component.\n     * @param {*} flags - The flags to control the behavior of the validation.\n     * @returns {Array<any>} - An array of errors if the component is invalid.\n     */\n    validateComponent(data = null, row = null, flags = {}) {\n        var _a;\n        data = data || this.rootValue;\n        row = row || this.data;\n        const { async = false } = flags;\n        if (this.shouldSkipValidation(data, row, flags)) {\n            return async ? Promise.resolve([]) : [];\n        }\n        const processContext = {\n            component: this.component,\n            data,\n            row,\n            local: !!flags.local,\n            value: this.validationValue,\n            parent: (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component,\n            paths: this.paths,\n            path: this.path || this.component.key,\n            instance: this,\n            form: this.root ? this.root._form : {},\n            scope: { errors: [] },\n            processors: [\n                process_1.validateProcessInfo\n            ]\n        };\n        if (async) {\n            return (0, process_1.processOne)(processContext).then(() => {\n                this._errors = this.interpolateErrors(processContext.scope.errors);\n                return this._errors;\n            });\n        }\n        (0, process_1.processOneSync)(processContext);\n        this._errors = this.interpolateErrors(processContext.scope.errors);\n        return this._errors;\n    }\n    /**\n     * Checks the validity of this component and sets the error message if it is invalid.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {*} row - The contextual row data for this component.\n     * @param {*} flags - The flags to use when checking the validity.\n     * @param {Array<any>} allErrors - An array of all errors that have occured so that it can be appended when another one occurs here.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    checkComponentValidity(data = null, dirty = false, row = null, flags = {}, allErrors = []) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        flags.dirty = dirty || false;\n        if (flags.async) {\n            return this.validateComponent(data, row, flags).then((errors) => {\n                allErrors.push(...errors);\n                if (this.parent && this.parent.childErrors) {\n                    if (errors.length) {\n                        this.parent.childErrors.push(...errors);\n                    }\n                    else {\n                        lodash_1.default.remove(this.parent.childErrors, (err) => { var _a, _b; return (((_a = err === null || err === void 0 ? void 0 : err.component) === null || _a === void 0 ? void 0 : _a.key) || ((_b = err === null || err === void 0 ? void 0 : err.context) === null || _b === void 0 ? void 0 : _b.key)) === this.component.key; });\n                    }\n                }\n                this.showValidationErrors(errors, data, row, flags);\n                return errors.length === 0;\n            });\n        }\n        else {\n            const errors = this.validateComponent(data, row, flags);\n            this.showValidationErrors(errors, data, row, flags);\n            allErrors.push(...errors);\n            if (this.parent && this.parent.childErrors) {\n                if (errors.length) {\n                    this.parent.childErrors.push(...errors);\n                }\n                else {\n                    lodash_1.default.remove(this.parent.childErrors, (err) => { var _a, _b; return (((_a = err === null || err === void 0 ? void 0 : err.component) === null || _a === void 0 ? void 0 : _a.key) || ((_b = err === null || err === void 0 ? void 0 : err.context) === null || _b === void 0 ? void 0 : _b.key)) === this.component.key; });\n                }\n            }\n            return errors.length === 0;\n        }\n    }\n    /**\n     * Checks the validity of the component.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {*} row - The contextual row data for this component.\n     * @param {boolean} silentCheck - If the check should be silent and not set the error messages.\n     * @param {Array<any>} errors - An array of all errors that have occured so that it can be appended when another one occurs here.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    checkValidity(data = null, dirty = false, row = null, silentCheck = false, errors = []) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        return this.checkComponentValidity(data, dirty, row, { silentCheck }, errors);\n    }\n    checkAsyncValidity(data = null, dirty = false, row = null, silentCheck = false, errors = []) {\n        return this.checkComponentValidity(data, dirty, row, { async: true, silentCheck }, errors);\n    }\n    /**\n     * Check the conditions, calculations, and validity of a single component and triggers an update if\n     * something changed.\n     * @param {*} data - The root data of the change event.\n     * @param {*} flags - The flags from this change event.\n     * @param {*} row - The contextual row data for this component.\n     * @returns {void|boolean} - TRUE if no check should be performed on the component.\n     */\n    checkData(data = null, flags = null, row = null) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        // Needs for Nextgen Rules Engine\n        this.resetCaches();\n        // Do not trigger refresh if change was triggered on blur event since components with Refresh on Blur have their own listeners\n        if (!flags.fromBlur) {\n            this.checkRefreshOn(flags.changes, flags);\n        }\n        if (flags.noCheck) {\n            return true;\n        }\n        this.checkComponentConditions(data, flags, row);\n        if (this.id !== flags.triggeredComponentId) {\n            this.calculateComponentValue(data, flags, row);\n        }\n    }\n    checkModal(errors = [], dirty = false) {\n        const messages = errors.filter(error => !error.fromServer);\n        const isValid = errors.length === 0;\n        if (!this.component.modalEdit || !this.componentModal) {\n            return;\n        }\n        if (dirty && !isValid) {\n            this.setErrorClasses([this.refs.openModal], dirty, !isValid, !!messages.length, this.refs.openModalWrapper);\n        }\n        else {\n            this.clearErrorClasses(this.refs.openModalWrapper);\n        }\n    }\n    get validationValue() {\n        return this.dataValue;\n    }\n    isEmpty(value = this.dataValue) {\n        const isEmptyArray = (lodash_1.default.isArray(value) && value.length === 1) ? lodash_1.default.isEqual(value[0], this.emptyValue) : false;\n        return value == null || value.length === 0 || lodash_1.default.isEqual(value, this.emptyValue) || isEmptyArray;\n    }\n    isEqual(valueA, valueB = this.dataValue) {\n        return (this.isEmpty(valueA) && this.isEmpty(valueB)) || lodash_1.default.isEqual(valueA, valueB);\n    }\n    /**\n     * Check if a component is eligible for multiple validation\n     * @returns {boolean} - TRUE if the component is eligible for multiple validation.\n     */\n    validateMultiple() {\n        return true;\n    }\n    clearErrorClasses(element = this.element) {\n        this.removeClass(element, this.options.componentErrorClass);\n        this.removeClass(element, 'alert alert-danger');\n        this.removeClass(element, 'has-error');\n        this.removeClass(element, 'has-message');\n    }\n    setInputWidgetErrorClasses(inputRefs, hasErrors) {\n        if (!this.isInputComponent || !this.component.widget || !(inputRefs === null || inputRefs === void 0 ? void 0 : inputRefs.length)) {\n            return;\n        }\n        inputRefs.forEach((input) => {\n            if ((input === null || input === void 0 ? void 0 : input.widget) && input.widget.setErrorClasses) {\n                input.widget.setErrorClasses(hasErrors);\n            }\n        });\n    }\n    addFocusBlurEvents(element) {\n        this.addEventListener(element, 'focus', () => {\n            if (this.root.focusedComponent !== this) {\n                if (this.root.pendingBlur) {\n                    this.root.pendingBlur();\n                }\n                this.root.focusedComponent = this;\n                this.emit('focus', this);\n            }\n            else if (this.root.focusedComponent === this && this.root.pendingBlur) {\n                this.root.pendingBlur.cancel();\n                this.root.pendingBlur = null;\n            }\n        });\n        this.addEventListener(element, 'blur', () => {\n            this.root.pendingBlur = FormioUtils.delay(() => {\n                this.emit('blur', this);\n                if (this.component.validateOn === 'blur') {\n                    this.root.triggerChange({ fromBlur: true }, {\n                        instance: this,\n                        component: this.component,\n                        value: this.dataValue,\n                        flags: { fromBlur: true }\n                    });\n                }\n                this.root.focusedComponent = null;\n                this.root.pendingBlur = null;\n            });\n        });\n    }\n    // eslint-disable-next-line max-statements\n    setCustomValidity(messages, dirty, external) {\n        const inputRefs = this.isInputComponent ? this.refs.input || [] : null;\n        if (typeof messages === 'string' && messages) {\n            messages = {\n                level: 'error',\n                message: messages,\n                component: this.component,\n            };\n        }\n        if (!Array.isArray(messages)) {\n            if (messages) {\n                messages = [messages];\n            }\n            else {\n                messages = [];\n            }\n        }\n        const errors = messages.filter(message => message.level === 'error');\n        let invalidInputRefs = inputRefs;\n        // Filter the invalid input refs in multiple components\n        if (this.component.multiple) {\n            const refsArray = Array.from(inputRefs);\n            refsArray.forEach((input) => {\n                this.setElementInvalid(this.performInputMapping(input), false);\n            });\n            this.setInputWidgetErrorClasses(refsArray, false);\n            invalidInputRefs = refsArray.filter((ref, index) => {\n                var _a;\n                return (_a = messages.some) === null || _a === void 0 ? void 0 : _a.call(messages, (msg) => {\n                    var _a;\n                    return ((_a = msg === null || msg === void 0 ? void 0 : msg.context) === null || _a === void 0 ? void 0 : _a.index) === index;\n                });\n            });\n        }\n        if (messages.length) {\n            if (this.refs.messageContainer) {\n                this.empty(this.refs.messageContainer);\n            }\n            this.emit('componentError', {\n                instance: this,\n                component: this.component,\n                message: messages[0].message,\n                messages,\n                external: !!external,\n            });\n            this.addMessages(messages, dirty, invalidInputRefs);\n            if (invalidInputRefs) {\n                this.setErrorClasses(invalidInputRefs, dirty, !!errors.length, !!messages.length);\n            }\n        }\n        else if (!errors.length || (errors[0].external === !!external)) {\n            if (this.refs.messageContainer) {\n                this.empty(this.refs.messageContainer);\n            }\n            if (this.refs.modalMessageContainer) {\n                this.empty(this.refs.modalMessageContainer);\n            }\n            if (invalidInputRefs) {\n                this.setErrorClasses(invalidInputRefs, dirty, !!errors.length, !!messages.length);\n            }\n            this.clearErrorClasses();\n        }\n        this._visibleErrors = messages;\n        return messages;\n    }\n    /**\n     * Determines if the value of this component is hidden from the user as if it is coming from the server, but is\n     * protected.\n     * @returns {boolean|*} - TRUE if the value is hidden.\n     */\n    isValueHidden() {\n        if (this.component.protected && this.root.editing) {\n            return false;\n        }\n        if (!this.root || !this.root.hasOwnProperty('editing')) {\n            return false;\n        }\n        if (!this.root || !this.root.editing) {\n            return false;\n        }\n        return (this.component.protected || !this.component.persistent || (this.component.persistent === 'client-only'));\n    }\n    shouldSkipValidation(data, row, flags = {}) {\n        const rules = [\n            // Do not validate if the flags say not too.\n            () => flags.noValidate,\n            // Force valid if component is read-only\n            () => this.options.readOnly,\n            // Do not check validations if component is not an input component.\n            () => !this.hasInput,\n            // Check to see if we are editing and if so, check component persistence.\n            () => this.isValueHidden(),\n            // Force valid if component is hidden.\n            () => {\n                if (!this.component.validateWhenHidden && (!this.visible || !this.checkCondition(row, data))) {\n                    // If this component is forced valid when it is hidden, then we also need to reset the errors for this component.\n                    this._errors = [];\n                    return true;\n                }\n                return false;\n            }\n        ];\n        return rules.some(pred => pred());\n    }\n    // Maintain reverse compatibility.\n    whenReady() {\n        console.warn(this.t('whenReadyDeprecation'));\n        return this.dataReady;\n    }\n    get dataReady() {\n        return Promise.resolve();\n    }\n    /**\n     * Prints out the value of this component as a string value.\n     * @param {*} value - The value to print out.\n     * @returns {string} - The string representation of the value.\n     */\n    asString(value) {\n        value = value || this.getValue();\n        return (Array.isArray(value) ? value : [value]).map(lodash_1.default.toString).join(', ');\n    }\n    /**\n     * Return if the component is disabled.\n     * @returns {boolean} - TRUE if the component is disabled.\n     */\n    get disabled() {\n        return this._disabled || this.parentDisabled;\n    }\n    /**\n     * Disable this component.\n     * @param {boolean} disabled - TRUE to disable the component.\n     */\n    set disabled(disabled) {\n        this._disabled = disabled;\n    }\n    setDisabled(element, disabled) {\n        if (!element) {\n            return;\n        }\n        element.disabled = disabled;\n        if (disabled) {\n            element.setAttribute('disabled', 'disabled');\n        }\n        else {\n            element.removeAttribute('disabled');\n        }\n    }\n    setLoading(element, loading) {\n        if (!element || (element.loading === loading)) {\n            return;\n        }\n        element.loading = loading;\n        if (!element.loader && loading) {\n            element.loader = this.ce('i', {\n                class: `${this.iconClass('refresh', true)} button-icon-right`\n            });\n        }\n        if (element.loader) {\n            if (loading) {\n                this.appendTo(element.loader, element);\n            }\n            else {\n                this.removeChildFrom(element.loader, element);\n            }\n        }\n    }\n    selectOptions(select, tag, options, defaultValue) {\n        lodash_1.default.each(options, (option) => {\n            const attrs = {\n                value: option.value\n            };\n            if (defaultValue !== undefined && (option.value === defaultValue)) {\n                attrs.selected = 'selected';\n            }\n            const optionElement = this.ce('option', attrs);\n            optionElement.appendChild(this.text(option.label));\n            select.appendChild(optionElement);\n        });\n    }\n    setSelectValue(select, value) {\n        const options = select.querySelectorAll('option');\n        lodash_1.default.each(options, (option) => {\n            if (option.value === value) {\n                option.setAttribute('selected', 'selected');\n            }\n            else {\n                option.removeAttribute('selected');\n            }\n        });\n        if (select.onchange) {\n            select.onchange();\n        }\n        if (select.onselect) {\n            select.onselect();\n        }\n    }\n    getRelativePath(path) {\n        const keyPart = `.${this.key}`;\n        const thisPath = this.isInputComponent ? this.path\n            : this.path.slice(0).replace(keyPart, '');\n        return path.replace(thisPath, '');\n    }\n    clear() {\n        this.detach();\n        this.empty(this.getElement());\n    }\n    append(element) {\n        this.appendTo(element, this.element);\n    }\n    prepend(element) {\n        this.prependTo(element, this.element);\n    }\n    removeChild(element) {\n        this.removeChildFrom(element, this.element);\n    }\n    detachLogic() {\n        this.logic.forEach(logic => {\n            if (logic.trigger.type === 'event') {\n                const event = this.interpolate(logic.trigger.event);\n                this.off(event); // only applies to callbacks on this component\n            }\n        });\n    }\n    attachLogic() {\n        // Do not attach logic during builder mode.\n        if (this.builderMode) {\n            return;\n        }\n        this.logic.forEach((logic) => {\n            if (logic.trigger.type === 'event') {\n                const event = this.interpolate(logic.trigger.event);\n                this.on(event, (...args) => {\n                    const newComponent = (0, utils_1.fastCloneDeep)(this.originalComponent);\n                    if (this.applyActions(newComponent, logic.actions, args)) {\n                        // If component definition changed, replace it.\n                        if (!lodash_1.default.isEqual(this.component, newComponent)) {\n                            this.component = newComponent;\n                            const visible = this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden;\n                            const disabled = this.shouldDisabled;\n                            // Change states which won't be recalculated during redrawing\n                            if (this.visible !== visible) {\n                                // If the logic is triggered by an event and the action sets the hidden state then the original\n                                // component definition must be changed so that the components hidden state does not get flipped back by\n                                // the fieldLogic function\n                                this.originalComponent.hidden = !visible;\n                                this.visible = visible;\n                            }\n                            if (this.disabled !== disabled) {\n                                this.disabled = disabled;\n                            }\n                            this.redraw();\n                        }\n                    }\n                }, true);\n            }\n        });\n    }\n    /**\n     * Get the element information.\n     * @returns {*} - The components \"input\" DOM element information.\n     */\n    elementInfo() {\n        const attributes = {\n            name: this.options.name,\n            type: this.component.inputType || 'text',\n            class: 'form-control',\n            lang: this.options.language\n        };\n        if (this.component.placeholder) {\n            attributes.placeholder = this.t(this.component.placeholder, { _userInput: true });\n        }\n        if (this.component.tabindex) {\n            attributes.tabindex = this.component.tabindex;\n        }\n        if (this.disabled) {\n            attributes.disabled = 'disabled';\n        }\n        lodash_1.default.defaults(attributes, this.component.attributes);\n        return {\n            type: 'input',\n            component: this.component,\n            changeEvent: 'change',\n            attr: attributes\n        };\n    }\n    autofocus() {\n        const hasAutofocus = this.component.autofocus && !this.builderMode && !this.options.preview;\n        if (hasAutofocus) {\n            this.on('render', () => this.focus(), true);\n        }\n    }\n    scrollIntoView(element = this.element, verticalOnly) {\n        if (!element) {\n            return;\n        }\n        const { left, top } = element.getBoundingClientRect();\n        window.scrollTo(verticalOnly ? window.scrollX : left + window.scrollX, top + window.scrollY);\n    }\n    focus(index) {\n        var _a, _b, _c, _d;\n        if ('beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n        if (!index && !lodash_1.default.isNumber(index) && ((_b = (_a = this.refs) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.length)) {\n            index = this.refs.input.length - 1;\n        }\n        if ((_c = this.refs.input) === null || _c === void 0 ? void 0 : _c.length) {\n            const focusingInput = this.refs.input[index];\n            if (((_d = this.component.widget) === null || _d === void 0 ? void 0 : _d.type) === 'calendar') {\n                const sibling = focusingInput.nextSibling;\n                if (sibling) {\n                    sibling.focus();\n                }\n            }\n            else {\n                focusingInput.focus();\n            }\n        }\n        if (this.refs.openModal) {\n            this.refs.openModal.focus();\n        }\n        if (this.parent.refs.openModal) {\n            this.parent.refs.openModal.focus();\n        }\n    }\n    /**\n     * Get `Formio` instance for working with files\n     * @returns {import('@formio/core').Formio} - The Formio instance file service.\n     */\n    get fileService() {\n        if (this.options.fileService) {\n            return this.options.fileService;\n        }\n        if (this.options.formio) {\n            return this.options.formio;\n        }\n        if (this.root && this.root.formio) {\n            return this.root.formio;\n        }\n        const formio = new Formio_1.Formio();\n        // If a form is loaded, then make sure to set the correct formUrl.\n        if (this.root && this.root._form && this.root._form._id) {\n            formio.formUrl = `${formio.projectUrl}/form/${this.root._form._id}`;\n        }\n        return formio;\n    }\n    resetCaches() { }\n    get previewMode() {\n        return false;\n    }\n}\nexports[\"default\"] = Component;\nComponent.externalLibraries = {};\nComponent.requireLibrary = function (name, property, src, polling) {\n    if (!Component.externalLibraries.hasOwnProperty(name)) {\n        Component.externalLibraries[name] = {};\n        Component.externalLibraries[name].ready = new Promise((resolve, reject) => {\n            Component.externalLibraries[name].resolve = resolve;\n            Component.externalLibraries[name].reject = reject;\n        });\n        const callbackName = `${name}Callback`;\n        if (!polling && !window[callbackName]) {\n            window[callbackName] = function () {\n                this.resolve();\n            }.bind(Component.externalLibraries[name]);\n        }\n        // See if the plugin already exists.\n        const plugin = (0, utils_1.getScriptPlugin)(property);\n        if (plugin) {\n            Component.externalLibraries[name].resolve(plugin);\n        }\n        else {\n            src = Array.isArray(src) ? src : [src];\n            src.forEach((lib) => {\n                let attrs = {};\n                let elementType = '';\n                if (typeof lib === 'string') {\n                    lib = {\n                        type: 'script',\n                        src: lib\n                    };\n                }\n                switch (lib.type) {\n                    case 'script':\n                        elementType = 'script';\n                        attrs = {\n                            src: lib.src,\n                            type: 'text/javascript',\n                            defer: true,\n                            async: true\n                        };\n                        break;\n                    case 'styles':\n                        elementType = 'link';\n                        attrs = {\n                            href: lib.src,\n                            rel: 'stylesheet'\n                        };\n                        break;\n                }\n                // Add the script to the top page.\n                const script = document.createElement(elementType);\n                for (const attr in attrs) {\n                    script.setAttribute(attr, attrs[attr]);\n                }\n                document.getElementsByTagName('head')[0].appendChild(script);\n            });\n            // if no callback is provided, then check periodically for the script.\n            if (polling) {\n                setTimeout(function checkLibrary() {\n                    const plugin = (0, utils_1.getScriptPlugin)(property);\n                    if (plugin) {\n                        Component.externalLibraries[name].resolve(plugin);\n                    }\n                    else {\n                        // check again after 200 ms.\n                        setTimeout(checkLibrary, 200);\n                    }\n                }, 200);\n            }\n        }\n    }\n    return Component.externalLibraries[name].ready;\n};\nComponent.libraryReady = function (name) {\n    if (Component.externalLibraries.hasOwnProperty(name) &&\n        Component.externalLibraries[name].ready) {\n        return Component.externalLibraries[name].ready;\n    }\n    return Promise.reject(`${name} library was not required.`);\n};\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/component/Component.js?");
+eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n/* globals Quill, ClassicEditor, CKEDITOR */\nconst vanilla_text_mask_1 = __webpack_require__(/*! @formio/vanilla-text-mask */ \"./node_modules/@formio/vanilla-text-mask/dist/vanillaTextMask.js\");\nconst tippy_js_1 = __importDefault(__webpack_require__(/*! tippy.js */ \"./node_modules/tippy.js/dist/tippy.esm.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst ismobilejs_1 = __importDefault(__webpack_require__(/*! ismobilejs */ \"./node_modules/ismobilejs/esm/index.js\"));\nconst process_1 = __webpack_require__(/*! @formio/core/process */ \"./node_modules/@formio/core/lib/process/index.js\");\nconst Formio_1 = __webpack_require__(/*! ../../../Formio */ \"./lib/cjs/Formio.js\");\nconst FormioUtils = __importStar(__webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\"));\nconst utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Element_1 = __importDefault(__webpack_require__(/*! ../../../Element */ \"./lib/cjs/Element.js\"));\nconst ComponentModal_1 = __importDefault(__webpack_require__(/*! ../componentModal/ComponentModal */ \"./lib/cjs/components/_classes/componentModal/ComponentModal.js\"));\nconst widgets_1 = __importDefault(__webpack_require__(/*! ../../../widgets */ \"./lib/cjs/widgets/index.js\"));\nconst addons_1 = __importDefault(__webpack_require__(/*! ../../../addons */ \"./lib/cjs/addons/index.js\"));\nconst uploadAdapter_1 = __webpack_require__(/*! ../../../providers/storage/uploadAdapter */ \"./lib/cjs/providers/storage/uploadAdapter.js\");\nconst en_1 = __importDefault(__webpack_require__(/*! ../../../translations/en */ \"./lib/cjs/translations/en.js\"));\nconst Templates_1 = __importDefault(__webpack_require__(/*! ../../../templates/Templates */ \"./lib/cjs/templates/Templates.js\"));\nconst isIEBrowser = FormioUtils.getBrowserInfo().ie;\n/**\n * This is the Component class\n which all elements within the FormioForm derive from.\n */\nclass Component extends Element_1.default {\n    static schema(...sources) {\n        return lodash_1.default.merge({\n            /**\n             * Determines if this component provides an input.\n             */\n            input: true,\n            /**\n             * The data key for this component (how the data is stored in the database).\n             */\n            key: '',\n            /**\n             * The input placeholder for this component.\n             */\n            placeholder: '',\n            /**\n             * The input prefix\n             */\n            prefix: '',\n            /**\n             * The custom CSS class to provide to this component.\n             */\n            customClass: '',\n            /**\n             * The input suffix.\n             */\n            suffix: '',\n            /**\n             * If this component should allow an array of values to be captured.\n             */\n            multiple: false,\n            /**\n             * The default value of this component.\n             */\n            defaultValue: null,\n            /**\n             * If the data of this component should be protected (no GET api requests can see the data)\n             */\n            protected: false,\n            /**\n             * Validate if the value of this component should be unique within the form.\n             */\n            unique: false,\n            /**\n             * If the value of this component should be persisted within the backend api database.\n             */\n            persistent: true,\n            /**\n             * Determines if the component should be within the form, but not visible.\n             */\n            hidden: false,\n            /**\n             * If the component should be cleared when hidden.\n             */\n            clearOnHide: true,\n            /**\n             * This will refresh this component options when this field changes.\n             */\n            refreshOn: '',\n            /**\n             * This will redraw the component when this field changes.\n             */\n            redrawOn: '',\n            /**\n             * If this component should be included as a column within a submission table.\n             */\n            tableView: false,\n            /**\n             * If this component should be rendering in modal.\n             */\n            modalEdit: false,\n            /**\n             * The input label provided to this component.\n             */\n            label: '',\n            dataGridLabel: false,\n            labelPosition: 'top',\n            description: '',\n            errorLabel: '',\n            tooltip: '',\n            hideLabel: false,\n            tabindex: '',\n            disabled: false,\n            autofocus: false,\n            dbIndex: false,\n            customDefaultValue: '',\n            calculateValue: '',\n            calculateServer: false,\n            widget: null,\n            /**\n             * Attributes that will be assigned to the input elements of this component.\n             */\n            attributes: {},\n            /**\n             * This will perform the validation on either \"change\" or \"blur\" of the input element.\n             */\n            validateOn: 'change',\n            /**\n             * The validation criteria for this component.\n             */\n            validate: {\n                /**\n                 * If this component is required.\n                 */\n                required: false,\n                /**\n                 * Custom JavaScript validation.\n                 */\n                custom: '',\n                /**\n                 * If the custom validation should remain private (only the backend will see it and execute it).\n                 */\n                customPrivate: false,\n                /**\n                 * If this component should implement a strict date validation if the Calendar widget is implemented.\n                 */\n                strictDateValidation: false,\n                multiple: false,\n                unique: false\n            },\n            /**\n             * The simple conditional settings for a component.\n             */\n            conditional: {\n                show: null,\n                when: null,\n                eq: ''\n            },\n            overlay: {\n                style: '',\n                left: '',\n                top: '',\n                width: '',\n                height: '',\n            },\n            allowCalculateOverride: false,\n            encrypted: false,\n            showCharCount: false,\n            showWordCount: false,\n            properties: {},\n            allowMultipleMasks: false,\n            addons: [],\n            serverOverride: {},\n        }, ...sources);\n    }\n    /**\n     * Return the simple condition settings as part of the component.\n     * @returns {object} - The simple conditional settings.\n     */\n    static get conditionOperatorsSettings() {\n        return {\n            operators: ['isEqual', 'isNotEqual', 'isEmpty', 'isNotEmpty'],\n            valueComponent() {\n                return {\n                    type: 'textfield',\n                    widget: {\n                        type: 'input'\n                    }\n                };\n            }\n        };\n    }\n    /**\n     * Return the array of possible types of component value absed on its schema.\n     * @param schema\n     * @returns {Array}\n     */\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return FormioUtils.getComponentSavedTypes(schema) || [FormioUtils.componentValueTypes.any];\n    }\n    /**\n     * Provides a table view for this component. Override if you wish to do something different than using getView\n     * method of your instance.\n     * @param value\n     * @param options\n     */\n    /* eslint-disable no-unused-vars */\n    static tableView(value, options) { }\n    /* eslint-enable no-unused-vars */\n    /**\n     * Initialize a new Component.\n     * @param {object} component - The component JSON you wish to initialize.\n     * @param {object} options - The options for this component.\n     * @param {object} data - The global data submission object this component will belong.\n     */\n    /* eslint-disable max-statements */\n    constructor(component, options, data) {\n        var _a, _b, _c, _d;\n        super(Object.assign({\n            renderMode: 'form',\n            attachMode: 'full',\n            noDefaults: false\n        }, options || {}));\n        // Restore the component id.\n        if (component && component.id) {\n            this.id = component.id;\n        }\n        /**\n         * Determines if this component has a condition assigned to it.\n         * @type {null}\n         * @private\n         */\n        this._hasCondition = null;\n        /**\n         * The row index for this component.\n         */\n        this._rowIndex = undefined;\n        /**\n         * References to dom elements\n         */\n        this.refs = {};\n        // Allow global override for any component JSON.\n        if (component &&\n            this.options.components &&\n            this.options.components[component.type]) {\n            lodash_1.default.merge(component, this.options.components[component.type]);\n        }\n        /**\n         * An array of all the children components errors.\n         */\n        this.childErrors = [];\n        /**\n         * Last validation errors that have occured.\n         */\n        this._errors = [];\n        this._visibleErrors = [];\n        /**\n         * The Form.io component JSON schema.\n         * @type {*}\n         */\n        this.component = this.mergeSchema(component || {});\n        // Add the id to the component.\n        this.component.id = this.id;\n        this.afterComponentAssign();\n        // Save off the original component to be used in logic.\n        this.originalComponent = (0, utils_1.fastCloneDeep)(this.component);\n        /**\n         * If the component has been attached\n         */\n        this.attached = false;\n        /**\n         * If the component has been rendered\n         */\n        this.rendered = false;\n        /**\n         * The data object in which this component resides.\n         * @type {*}\n         */\n        this._data = data || {};\n        /**\n         * Tool tip text after processing\n         * @type {string}\n         */\n        this.tooltip = '';\n        /**\n         * The row path of this component.\n         * @type {number}\n         */\n        this.row = this.options.row;\n        /**\n         * Points to a flat map of child components (if applicable).\n         * @type {object}\n         */\n        this.childComponentsMap = {};\n        /**\n         * Determines if this component is disabled, or not.\n         * @type {boolean}\n         */\n        this._disabled = (0, utils_1.boolValue)(this.component.disabled) ? this.component.disabled : false;\n        /**\n         * Points to the root component, usually the FormComponent.\n         * @type {Component}\n         */\n        this.root = this.options.root || this;\n        this.localRoot = this.options.localRoot || this;\n        /**\n         * If this input has been input and provided value.\n         * @type {boolean}\n         */\n        this.pristine = true;\n        /**\n         * Points to the parent component.\n         * @type {Component}\n         */\n        this.parent = this.options.parent;\n        /**\n         * The component paths for this component.\n         * @type {import('@formio/core').ComponentPaths} - The component paths.\n         */\n        this.paths = FormioUtils.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths), { dataIndex: this.options.rowIndex === undefined ? (_d = (_c = this.parent) === null || _c === void 0 ? void 0 : _c.paths) === null || _d === void 0 ? void 0 : _d.dataIndex : this.options.rowIndex }));\n        this.options.name = this.options.name || 'data';\n        this._path = '';\n        // Needs for Nextgen Rules Engine\n        this.resetCaches();\n        /**\n         * Determines if this component is conditionally hidden. Should generally not be set outside of conditional logic pipeline.\n         * This is necessary because of clearOnHide behavior that only clears when conditionally hidden - we need to track\n         * conditionallyHidden separately from \"regular\" visibility.\n         */\n        this._parentConditionallyHidden = this.options.hasOwnProperty('parentConditionallyHidden') ? this.options.parentConditionallyHidden : false;\n        this._conditionallyHidden = this.checkConditionallyHidden(null, data) || this._parentConditionallyHidden;\n        /**\n         * Determines if this component is visible, or not.\n         */\n        this._parentVisible = this.options.hasOwnProperty('parentVisible') ? this.options.parentVisible : true;\n        this._visible = this._parentVisible && (this.hasCondition() ? !this._conditionallyHidden : !this.component.hidden);\n        this._parentDisabled = false;\n        /**\n         * The reference attribute name for this component\n         */\n        this._referenceAttributeName = 'ref';\n        /**\n         * Used to trigger a new change in this component.\n         * @type {Function} - Call to trigger a change in this component.\n         */\n        let changes = [];\n        let lastChanged = null;\n        let triggerArgs = [];\n        const _triggerChange = lodash_1.default.debounce((...args) => {\n            if (this.root) {\n                this.root.changing = false;\n            }\n            triggerArgs = [];\n            if (!args[1] && lastChanged) {\n                // Set the changed component if one isn't provided.\n                args[1] = lastChanged;\n            }\n            if (lodash_1.default.isEmpty(args[0]) && lastChanged) {\n                // Set the flags if it is empty and lastChanged exists.\n                args[0] = lastChanged.flags;\n            }\n            lastChanged = null;\n            args[3] = changes;\n            const retVal = this.onChange(...args);\n            changes = [];\n            return retVal;\n        }, 100);\n        this.triggerChange = (...args) => {\n            if (args[1]) {\n                // Make sure that during the debounce that we always track lastChanged component, even if they\n                // don't provide one later.\n                lastChanged = args[1];\n                changes.push(lastChanged);\n            }\n            if (this.root) {\n                this.root.changing = true;\n            }\n            if (args.length) {\n                triggerArgs = args;\n            }\n            return _triggerChange(...triggerArgs);\n        };\n        /**\n         * Used to trigger a redraw event within this component.\n         * @type {Function}\n         */\n        this.triggerRedraw = lodash_1.default.debounce(this.redraw.bind(this), 100);\n        /**\n         * list of attached tooltips\n         * @type {Array}\n         */\n        this.tooltips = [];\n        /**\n         * List of attached addons\n         * @type {Array}\n         */\n        this.addons = [];\n        // To force this component to be invalid.\n        this.invalid = false;\n        if (this.component) {\n            this.type = this.component.type;\n            if (this.allowData && this.key) {\n                this.options.name += `[${this.key}]`;\n                // If component is visible or not set to clear on hide, set the default value.\n                if (!(this.conditionallyHidden && this.component.clearOnHide)) {\n                    if (!this.hasValue()) {\n                        if (this.shouldAddDefaultValue) {\n                            this.dataValue = this.defaultValue;\n                        }\n                    }\n                    else {\n                        // Ensure the dataValue is set.\n                        /* eslint-disable  no-self-assign */\n                        this.dataValue = this.dataValue;\n                        /* eslint-enable  no-self-assign */\n                    }\n                }\n            }\n            /**\n             * The element information for creating the input element.\n             * @type {*}\n             */\n            this.info = this.elementInfo();\n        }\n        // Allow anyone to hook into the component creation.\n        this.hook('component');\n        if (!this.options.skipInit) {\n            if (typeof this.beforeInit === 'function') {\n                this.beforeInit();\n            }\n            this.init();\n        }\n    }\n    /* eslint-enable max-statements */\n    get componentsMap() {\n        var _a;\n        return ((_a = this.root) === null || _a === void 0 ? void 0 : _a.childComponentsMap) || {};\n    }\n    get data() {\n        return this._data;\n    }\n    set data(value) {\n        this._data = value;\n    }\n    mergeSchema(component = {}) {\n        return lodash_1.default.defaultsDeep(component, this.defaultSchema);\n    }\n    // Allow componets to notify when ready.\n    get ready() {\n        return Promise.resolve(this);\n    }\n    get isPDFReadOnlyMode() {\n        return this.parent &&\n            this.parent.form &&\n            (this.parent.form.display === 'pdf') &&\n            this.options.readOnly;\n    }\n    get labelInfo() {\n        const label = {};\n        label.hidden = this.labelIsHidden();\n        label.className = '';\n        label.labelPosition = this.component.labelPosition;\n        label.tooltipClass = `${this.iconClass('question-sign')} text-muted`;\n        const isPDFReadOnlyMode = this.isPDFReadOnlyMode;\n        if (this.hasInput && this.component.validate && (0, utils_1.boolValue)(this.component.validate.required) && !isPDFReadOnlyMode) {\n            label.className += ' field-required';\n        }\n        if (label.hidden) {\n            label.className += ' control-label--hidden';\n        }\n        if (this.info.attr.id) {\n            label.for = this.info.attr.id;\n        }\n        return label;\n    }\n    init() {\n        var _a;\n        this.disabled = this.shouldDisabled;\n        this._conditionallyHidden = this.checkConditionallyHidden();\n        this._visible = (this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden);\n        if ((_a = this.component.addons) === null || _a === void 0 ? void 0 : _a.length) {\n            this.component.addons.forEach((addon) => this.createAddon(addon));\n        }\n    }\n    /**\n     * Get Row Index.\n     * @returns {number} - The row index.\n     */\n    get rowIndex() {\n        return this._rowIndex;\n    }\n    /**\n     * Set Row Index to row and update each component.\n     * @param {number} value - The row index.\n     * @returns {void}\n     */\n    set rowIndex(value) {\n        var _a, _b;\n        this.paths = FormioUtils.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths) || {})), { dataIndex: value }));\n        this._rowIndex = value;\n    }\n    afterComponentAssign() {\n        //implement in extended classes\n    }\n    createAddon(addonConfiguration) {\n        var _a;\n        const name = addonConfiguration.name;\n        if (!name) {\n            return;\n        }\n        const settings = ((_a = addonConfiguration.settings) === null || _a === void 0 ? void 0 : _a.data) || {};\n        const Addon = addons_1.default[name.value];\n        let addon = null;\n        if (Addon) {\n            const supportedComponents = Addon.info.supportedComponents;\n            const supportsThisComponentType = !(supportedComponents === null || supportedComponents === void 0 ? void 0 : supportedComponents.length) ||\n                supportedComponents.indexOf(this.component.type) !== -1;\n            if (supportsThisComponentType) {\n                addon = new Addon(settings, this);\n                this.addons.push(addon);\n            }\n            else {\n                console.warn(this.t('addonSupportTypeError', {\n                    type: this.component.type,\n                    label: name.label\n                }));\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(this.t('setPathError'));\n    }\n    set parentVisible(value) {\n        this._parentVisible = value;\n    }\n    get parentVisible() {\n        return this._parentVisible;\n    }\n    set parentDisabled(value) {\n        this._parentDisabled = value;\n    }\n    get parentDisabled() {\n        return this._parentDisabled;\n    }\n    shouldForceVisibility(component, visibility) {\n        if (!this.options[visibility]) {\n            return false;\n        }\n        if (!component) {\n            component = this.component;\n        }\n        if (lodash_1.default.isArray(this.options[visibility])) {\n            return this.options[visibility].includes(component.key);\n        }\n        return this.options[visibility][component.key];\n    }\n    shouldForceHide(component) {\n        return this.shouldForceVisibility(component, 'hide');\n    }\n    shouldForceShow(component) {\n        return this.shouldForceVisibility(component, 'show');\n    }\n    /**\n     * Sets the component visibility.\n     * @param {boolean} value - Whether the component should be visible or not.\n     */\n    set visible(value) {\n        if (this._visible !== value) {\n            // Skip if this component is set to visible and is supposed to be hidden.\n            if (value && this.shouldForceHide()) {\n                return;\n            }\n            // Skip if this component is set to hidden and is supposed to be shown.\n            if (!value && this.shouldForceShow()) {\n                return;\n            }\n            this._visible = value;\n            this.redraw();\n        }\n    }\n    /**\n     * Returns the component visibility\n     * @returns {boolean} - Whether the component is visible or not.\n     */\n    get visible() {\n        // Show only if visibility changes or if we are in builder mode or if hidden fields should be shown.\n        if (this.builderMode || this.previewMode || this.options.showHiddenFields) {\n            return true;\n        }\n        if (this.shouldForceHide()) {\n            return false;\n        }\n        if (this.shouldForceShow()) {\n            return true;\n        }\n        return this._visible && this._parentVisible;\n    }\n    get conditionallyHidden() {\n        return this._conditionallyHidden || this._parentConditionallyHidden;\n    }\n    /**\n     * Evaluates whether the component is conditionally hidden (as opposed to intentionally hidden, e.g. via the `hidden` component schema property).\n     * @param {object} data - The data object to evaluate the condition against.\n     * @param {object} row - The row object to evaluate the condition against.\n     * @returns {boolean} - Whether the component is conditionally hidden.\n     */\n    checkConditionallyHidden(data = null, row = null) {\n        if (!this.hasCondition()) {\n            return false;\n        }\n        return !this.conditionallyVisible(data, row);\n    }\n    get currentForm() {\n        return this._currentForm;\n    }\n    set currentForm(instance) {\n        this._currentForm = instance;\n    }\n    get fullMode() {\n        return this.options.attachMode === 'full';\n    }\n    get builderMode() {\n        return this.options.attachMode === 'builder';\n    }\n    get calculatedPath() {\n        console.error(this.t('calculatedPathDeprecation'));\n        return this.path;\n    }\n    get labelPosition() {\n        return this.component.labelPosition;\n    }\n    get labelWidth() {\n        const width = this.component.labelWidth;\n        return width >= 0 ? width : 30;\n    }\n    get labelMargin() {\n        const margin = this.component.labelMargin;\n        return margin >= 0 ? margin : 3;\n    }\n    get isAdvancedLabel() {\n        return [\n            'left-left',\n            'left-right',\n            'right-left',\n            'right-right'\n        ].includes(this.labelPosition);\n    }\n    get labelPositions() {\n        return this.labelPosition.split('-');\n    }\n    get skipInEmail() {\n        return false;\n    }\n    rightDirection(direction) {\n        if (this.options.condensedMode) {\n            return false;\n        }\n        return direction === 'right';\n    }\n    getLabelInfo(isCondensed = false) {\n        const isRightPosition = this.rightDirection(this.labelPositions[0]);\n        const isLeftPosition = this.labelPositions[0] === 'left' || isCondensed;\n        const isRightAlign = this.rightDirection(this.labelPositions[1]);\n        let contentMargin = '';\n        if (this.component.hideLabel) {\n            const margin = isCondensed ? 0 : this.labelWidth + this.labelMargin;\n            contentMargin = isRightPosition ? `margin-right: ${margin}%` : '';\n            contentMargin = isLeftPosition ? `margin-left: ${margin}%` : '';\n        }\n        const labelStyles = `\n      flex: ${this.labelWidth};\n      ${isRightPosition ? 'margin-left' : 'margin-right'}: ${this.labelMargin}%;\n    `;\n        const contentStyles = `\n      flex: ${100 - this.labelWidth - this.labelMargin};\n      ${contentMargin};\n      ${this.component.hideLabel ? `max-width: ${100 - this.labelWidth - this.labelMargin}` : ''};\n    `;\n        return {\n            isRightPosition,\n            isRightAlign,\n            labelStyles,\n            contentStyles\n        };\n    }\n    /**\n     * Returns only the schema that is different from the default.\n     * @param {object} schema - The \"full\" json schema for the component.\n     * @param {object} defaultSchema - The \"default\" json schema for the component.\n     * @param {boolean} recursion - If we are currently in a recursive loop.\n     * @returns {object} - The minified json schema for this component.\n     */\n    getModifiedSchema(schema, defaultSchema, recursion) {\n        const modified = {};\n        if (!defaultSchema) {\n            return schema;\n        }\n        lodash_1.default.each(schema, (val, key) => {\n            if (!lodash_1.default.isArray(val) && lodash_1.default.isObject(val) && defaultSchema.hasOwnProperty(key)) {\n                const subModified = this.getModifiedSchema(val, defaultSchema[key], true);\n                if (!lodash_1.default.isEmpty(subModified)) {\n                    modified[key] = subModified;\n                }\n            }\n            else if (lodash_1.default.isArray(val)) {\n                if (val.length !== 0 && !lodash_1.default.isEqual(val, defaultSchema[key])) {\n                    modified[key] = val;\n                }\n            }\n            else if ((!recursion && (key === 'type')) ||\n                (!recursion && (key === 'key')) ||\n                (!recursion && (key === 'label')) ||\n                (!recursion && (key === 'input')) ||\n                (!recursion && (key === 'tableView')) ||\n                (val !== '' && !defaultSchema.hasOwnProperty(key)) ||\n                (val !== '' && val !== defaultSchema[key]) ||\n                (defaultSchema[key] && val !== defaultSchema[key])) {\n                modified[key] = val;\n            }\n        });\n        return modified;\n    }\n    /**\n     * Returns the JSON schema for this component.\n     * @returns {object} - The JSON schema for this component.\n     */\n    get schema() {\n        return (0, utils_1.fastCloneDeep)(this.getModifiedSchema(lodash_1.default.omit(this.component, 'id'), this.defaultSchema));\n    }\n    /**\n     * Returns true if component is inside DataGrid\n     * @returns {boolean} - True if component is inside DataGrid\n     */\n    get isInDataGrid() {\n        return this.inDataGrid;\n    }\n    /**\n     * Translate a text using the i18n system.\n     * @param {string} text - The i18n identifier.\n     * @param {object} params - The i18n parameters to use for translation.\n     * @param {...any} args - Additional arguments to pass to the translation library.\n     * @returns {string} - The translated text.\n     */\n    t(text, params = {}, ...args) {\n        if (!text) {\n            return '';\n        }\n        // Use _userInput: true to ignore translations from defaults\n        if (text in en_1.default && params._userInput) {\n            return text;\n        }\n        params.data = params.data || this.rootValue;\n        params.row = params.row || this.data;\n        params.component = params.component || this.component;\n        return super.t(text, params, ...args);\n    }\n    labelIsHidden() {\n        return !this.component.label ||\n            ((!this.isInDataGrid && this.component.hideLabel) ||\n                (this.isInDataGrid && !this.component.dataGridLabel) ||\n                this.options.floatingLabels ||\n                this.options.inputsOnly) && !this.builderMode;\n    }\n    transform(type, value) {\n        const frameworkTemplates = this.options.template ? Templates_1.default.templates[this.options.template] : Templates_1.default.current;\n        return frameworkTemplates.hasOwnProperty('transform')\n            ? frameworkTemplates.transform(type, value, this)\n            : (type, value) => value;\n    }\n    getTemplate(names, modes) {\n        modes = Array.isArray(modes) ? modes : [modes];\n        names = Array.isArray(names) ? names : [names];\n        if (!modes.includes('form')) {\n            modes.push('form');\n        }\n        let result = null;\n        if (this.options.templates) {\n            result = this.checkTemplate(this.options.templates, names, modes);\n            if (result) {\n                return result;\n            }\n        }\n        const frameworkTemplates = this.options.template ? Templates_1.default.templates[this.options.template] : Templates_1.default.current;\n        result = this.checkTemplate(frameworkTemplates, names, modes);\n        if (result) {\n            return result;\n        }\n        // Default back to bootstrap if not defined.\n        const name = names[names.length - 1];\n        const templatesByName = Templates_1.default.defaultTemplates[name];\n        if (!templatesByName) {\n            return { template: this.t('unknownTemplate', { 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(this.t('renderTemplateFunctionDeprecation'));\n            return this.renderTemplate(...args);\n        };\n        data.label = data.labelInfo || this.labelInfo;\n        data.tooltip = this.getFormattedTooltip(this.component.tooltip);\n        // Allow more specific template names\n        const names = [\n            `${name}-${this.component.type}-${this.key}`,\n            `${name}-${this.component.type}`,\n            `${name}-${this.key}`,\n            `${name}`,\n        ];\n        // Allow template alters.\n        const { referenceAttributeName, template } = this.getTemplate(names, mode);\n        if (referenceAttributeName) {\n            this._referenceAttributeName = referenceAttributeName;\n        }\n        return this.hook(`render${name.charAt(0).toUpperCase() + name.substring(1, name.length)}`, this.interpolate(template, data), data, mode);\n    }\n    /**\n     * Sanitize an html string.\n     * @param {string} dirty - The dirty html string to sanitize.\n     * @param {boolean} forceSanitize - If we should force the sanitize to occur.\n     * @param {object} options - The options for the sanitize.\n     * @returns {*} - The sanitized html string.\n     */\n    sanitize(dirty, forceSanitize = false, options = {}) {\n        var _a;\n        if (!this.shouldSanitizeValue && !forceSanitize) {\n            return dirty;\n        }\n        return FormioUtils.sanitize(dirty, {\n            sanitizeConfig: lodash_1.default.merge(((_a = this.options) === null || _a === void 0 ? void 0 : _a.sanitizeConfig) || {}, options || {}),\n        });\n    }\n    /**\n     * Render a template string into html.\n     * @param {string} template - The template to render.\n     * @param {object} data - The data to provide to the template.\n     * @returns {HTMLElement | string} - The created element or an empty string if template is not specified.\n     */\n    renderString(template, data) {\n        if (!template) {\n            return '';\n        }\n        // Interpolate the template and populate\n        return this.interpolate(template, data);\n    }\n    /**\n     * Allows for modification of the component value prior to submission.\n     * @param {*} input - The input to be modified.\n     * @returns {*} - The modified input mapping for the extended component.\n     */\n    performInputMapping(input) {\n        return input;\n    }\n    /**\n     * Returns the component \"widget\" if one is available.\n     * @returns {Widget|null} - The widget instance. null if not available.\n     */\n    get widget() {\n        var _a;\n        const settings = this.component.widget;\n        if (settings && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.shadowRoot)) {\n            settings.shadowRoot = this.root.shadowRoot;\n        }\n        const widget = settings && widgets_1.default[settings.type] ? new widgets_1.default[settings.type](settings, this.component, this) : null;\n        return widget;\n    }\n    /**\n     * Returns the native supported browser language.\n     * @returns {string|null} - The native browser language that is supported.\n     */\n    getBrowserLanguage() {\n        const nav = window.navigator;\n        const browserLanguagePropertyKeys = ['language', 'browserLanguage', 'systemLanguage', 'userLanguage'];\n        let language;\n        // support for HTML 5.1 \"navigator.languages\"\n        if (Array.isArray(nav.languages)) {\n            for (let i = 0; i < nav.languages.length; i++) {\n                language = nav.languages[i];\n                if (language && language.length) {\n                    return language.split(';')[0];\n                }\n            }\n        }\n        // support for other well known properties in browsers\n        for (let i = 0; i < browserLanguagePropertyKeys.length; i++) {\n            language = nav[browserLanguagePropertyKeys[i]];\n            if (language && language.length) {\n                return language.split(';')[0];\n            }\n        }\n        return null;\n    }\n    /**\n     * Called before a next and previous page is triggered allowing the components to perform special functions.\n     * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the next/previous page navigation.\n     */\n    beforePage() {\n        return Promise.resolve(true);\n    }\n    /**\n     * Called before the next page is triggered allowing the components to hook into the page navigation and perform tasks.\n     * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the next page navigation.\n     */\n    beforeNext() {\n        return this.beforePage(true);\n    }\n    /**\n     * Called before a submission is triggered allowing the components to perform special async functions.\n     * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the submission.\n     */\n    beforeSubmit() {\n        return Promise.resolve(true);\n    }\n    /**\n     * Return the submission timezone.\n     * @returns {string} - The submission timezone.\n     */\n    get submissionTimezone() {\n        this.options.submissionTimezone = this.options.submissionTimezone || lodash_1.default.get(this.root, 'options.submissionTimezone');\n        return this.options.submissionTimezone;\n    }\n    /**\n     * Return the current timezone.\n     * @returns {string} - The current timezone.\n     */\n    get timezone() {\n        return this.getTimezone(this.component);\n    }\n    /**\n     * Return the current timezone.\n     * @param {object} settings - Settings to control how the timezone should be returned.\n     * @returns {string} - The current timezone.\n     */\n    getTimezone(settings) {\n        if (settings.timezone) {\n            return settings.timezone;\n        }\n        if (settings.displayInTimezone === 'utc') {\n            return 'UTC';\n        }\n        const submissionTimezone = this.submissionTimezone;\n        if (submissionTimezone &&\n            ((settings.displayInTimezone === 'submission') ||\n                ((this.options.pdf || this.options.server) && (settings.displayInTimezone === 'viewer')))) {\n            return submissionTimezone;\n        }\n        // Return current timezone if none are provided.\n        return (0, utils_1.currentTimezone)();\n    }\n    /**\n     *\n     * @param {HTMLElement} element - The containing DOM element to query for the ref value.\n     * @param {object} refs - The references to load.\n     * @param {string} [referenceAttributeName] - The attribute name to use for the reference.\n     */\n    loadRefs(element, refs, referenceAttributeName) {\n        if (!element) {\n            return;\n        }\n        for (const ref in refs) {\n            const refType = refs[ref];\n            const isString = typeof refType === 'string';\n            const selector = isString && refType.includes('scope')\n                ? `:scope > [${referenceAttributeName || this._referenceAttributeName || 'ref'}=\"${ref}\"]`\n                : `[${referenceAttributeName || this._referenceAttributeName || 'ref'}=\"${ref}\"]`;\n            if (isString && refType.startsWith('single')) {\n                this.refs[ref] = element.querySelector(selector);\n            }\n            else {\n                this.refs[ref] = element.querySelectorAll(selector);\n            }\n        }\n    }\n    /**\n     * Opens the modal element.\n     * @param {string} template - The template to use for the modal dialog.\n     */\n    setOpenModalElement(template = null) {\n        this.componentModal.setOpenModalElement(template || this.getModalPreviewTemplate());\n    }\n    /**\n     * Renders a modal preview template and returns the markup as a string\n     * @param {object|null|undefined} ctx - The rendering context\n     * @returns {string} - The modal preview markup\n     */\n    renderModalPreview(ctx) {\n        return this.renderTemplate('modalPreview', ctx || {});\n    }\n    /**\n     * Returns the modal preview template.\n     * @returns {string} - The modal preview template.\n     */\n    getModalPreviewTemplate() {\n        var _a;\n        const dataValue = this.component.type === 'password' ? this.dataValue.replace(/./g, '•') : this.dataValue;\n        let modalLabel;\n        if (this.hasInput && ((_a = this.component.validate) === null || _a === void 0 ? void 0 : _a.required) && !this.isPDFReadOnlyMode) {\n            modalLabel = { className: 'field-required' };\n        }\n        return this.renderModalPreview({\n            previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('clickToSetValue'),\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 = this.t('unknownComponent', { type: this.component.type }), topLevel = false) {\n        const isVisible = this.visible;\n        this.rendered = true;\n        if (!this.builderMode && !this.previewMode && this.component.modalEdit) {\n            return ComponentModal_1.default.render(this, {\n                visible: isVisible,\n                showSaveButton: this.hasModalSaveButton,\n                id: this.id,\n                classes: this.className,\n                styles: this.customStyle,\n                children\n            }, topLevel);\n        }\n        else {\n            return this.renderTemplate('component', {\n                visible: isVisible,\n                id: this.id,\n                classes: this.className,\n                styles: this.customStyle,\n                children\n            }, topLevel);\n        }\n    }\n    /**\n     * Creates the tooltip instance using tippy.js and returns it\n     * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip\n     * @param {object|null|undefined} settings - tippy.js options\n     * @returns {import('tippy.js').Tippy} - tippy.js instance\n     */\n    createTooltip(tooltipEl, settings = {}) {\n        const tooltipAttribute = tooltipEl.getAttribute('data-tooltip');\n        const tooltipDataTitle = tooltipEl.getAttribute('data-title');\n        const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)\n            .replace(/(?:\\r\\n|\\r|\\n)/g, '<br />');\n        return (0, tippy_js_1.default)(tooltipEl, Object.assign(Object.assign({ allowHTML: true, trigger: 'mouseenter click focus', placement: 'right', zIndex: 10000, interactive: true }, settings), { content: this.t(this.sanitize(tooltipText), { _userInput: true }) }));\n    }\n    /**\n     * Attaches all the tooltips provided the refs object.\n     * @param {object} toolTipsRefs - The refs for the tooltips within your template.\n     * @returns {void}\n     */\n    attachTooltips(toolTipsRefs) {\n        toolTipsRefs === null || toolTipsRefs === void 0 ? void 0 : toolTipsRefs.forEach((tooltip, index) => {\n            if (tooltip) {\n                this.tooltips[index] = this.createTooltip(tooltip);\n            }\n        });\n    }\n    /**\n     * Create a new component modal for this component.\n     * @param {HTMLElement} element - The element to attach the modal to.\n     * @param {boolean} modalShouldBeOpened - TRUE if the modal should open immediately.\n     * @param {any} currentValue - The current value of the component.\n     * @returns {ComponentModal} - The created component modal.\n     */\n    createComponentModal(element, modalShouldBeOpened, currentValue) {\n        return new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);\n    }\n    /**\n     * Attaches all event listensers for this component to the DOM elements that were rendered.\n     * @param {HTMLElement} element - The element to attach the listeners to.\n     * @returns {Promise<void>} - Resolves when the component is done attaching to the DOM.\n     */\n    attach(element) {\n        if (!this.builderMode && !this.previewMode && this.component.modalEdit) {\n            const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;\n            const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;\n            const openModalTemplate = this.componentModal && modalShouldBeOpened\n                ? this.componentModal.openModalTemplate\n                : null;\n            this.componentModal = this.createComponentModal(element, modalShouldBeOpened, currentValue);\n            this.setOpenModalElement(openModalTemplate);\n        }\n        this.attached = true;\n        this.setElement(element);\n        element.component = this;\n        // If this already has an id, get it from the dom. If SSR, it could be different from the initiated id.\n        if (this.element.id) {\n            this.id = this.element.id;\n            this.component.id = this.id;\n        }\n        this.loadRefs(element, {\n            messageContainer: 'single',\n            tooltip: 'multiple'\n        });\n        this.attachTooltips(this.refs.tooltip);\n        // Attach logic.\n        this.attachLogic();\n        this.autofocus();\n        // Allow global attach.\n        this.hook('attachComponent', element, this);\n        // Allow attach per component type.\n        const type = this.component.type;\n        if (type) {\n            this.hook(`attach${type.charAt(0).toUpperCase() + type.substring(1, type.length)}`, element, this);\n        }\n        this.restoreFocus();\n        this.addons.forEach((addon) => addon.attach(element));\n        return Promise.resolve();\n    }\n    /**\n     * Restors the \"focus\" on a component after a redraw event has occured.\n     */\n    restoreFocus() {\n        var _a, _b, _c;\n        const isFocused = ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.focusedComponent) === null || _b === void 0 ? void 0 : _b.path) === this.path;\n        if (isFocused) {\n            this.loadRefs(this.element, { input: 'multiple' });\n            this.focus((_c = this.root.currentSelection) === null || _c === void 0 ? void 0 : _c.index);\n            this.restoreCaretPosition();\n        }\n    }\n    /**\n     * Adds a keyboard shortcut to this component.\n     * @param {HTMLElement} element - The element to attach the keyboard shortcut to.\n     * @param {string} shortcut - The keyboard shortcut to add.\n     * @returns {void}\n     */\n    addShortcut(element, shortcut) {\n        // Avoid infinite recursion.\n        if (!element || !this.root || (this.root === this)) {\n            return;\n        }\n        if (!shortcut) {\n            shortcut = this.component.shortcut;\n        }\n        this.root.addShortcut(element, shortcut);\n    }\n    /**\n     * Removes a keyboard shortcut from this component.\n     * @param {HTMLElement} element - The element to remove the keyboard shortcut from.\n     * @param {string} shortcut - The keyboard shortcut to remove.\n     * @returns {void}\n     */\n    removeShortcut(element, shortcut) {\n        // Avoid infinite recursion.\n        if (!element || (this.root === this)) {\n            return;\n        }\n        if (!shortcut) {\n            shortcut = this.component.shortcut;\n        }\n        this.root.removeShortcut(element, shortcut);\n    }\n    /**\n     * Remove all event handlers.\n     */\n    detach() {\n        // First iterate through each ref and delete the component so there are no dangling component references.\n        lodash_1.default.each(this.refs, (ref) => {\n            if (ref instanceof NodeList) {\n                ref.forEach((elem) => {\n                    delete elem.component;\n                });\n            }\n            else if (ref) {\n                delete ref.component;\n            }\n        });\n        this.refs = {};\n        this.removeEventListeners();\n        this.detachLogic();\n        if (this.tooltip) {\n            this.tooltip.destroy();\n        }\n    }\n    /**\n     * Determines if the component should be refreshed based on the path of another component that changed.\n     * @param {string} refreshData - The path of the data that needs to trigger a refresh.\n     * @param {boolean} changed - Flag that is true if the data has been changed.\n     * @param {any} flags - The flags for the checkData procedure.\n     * @returns {void}\n     */\n    checkRefresh(refreshData, changed, flags) {\n        var _a, _b;\n        const changePath = lodash_1.default.get(changed, 'instance.path', false);\n        // Don't let components change themselves.\n        if (changePath && this.path === changePath) {\n            return;\n        }\n        if (refreshData === 'data') {\n            this.refresh(this.data, changed, flags);\n        }\n        else if ((changePath && (((_b = (_a = changed.instance) === null || _a === void 0 ? void 0 : _a.paths) === null || _b === void 0 ? void 0 : _b.localPath) === refreshData)) && changed && changed.instance &&\n            // Make sure the changed component is not in a different \"context\". Solves issues where refreshOn being set\n            // in fields inside EditGrids could alter their state from other rows (which is bad).\n            this.inContext(changed.instance)) {\n            this.refresh(changed.value, changed, flags);\n        }\n    }\n    /**\n     * Iterates over a list of changes, and determines if the component should be refreshed if it is configured to refresh on any of those components.\n     * @param {Array<any>} changes - The list of components that have changed.\n     * @param {any} flags - The checkData flags.\n     * @returns {void}\n     */\n    checkRefreshOn(changes, flags = {}) {\n        changes = changes || [];\n        if (flags.noRefresh) {\n            return;\n        }\n        if (!changes.length && flags.changed) {\n            changes = [flags.changed];\n        }\n        const refreshOn = flags.fromBlur ? this.component.refreshOnBlur : this.component.refreshOn || this.component.redrawOn;\n        // If they wish to refresh on a value, then add that here.\n        if (refreshOn) {\n            if (Array.isArray(refreshOn)) {\n                refreshOn.forEach(refreshData => changes.forEach(changed => this.checkRefresh(refreshData, changed, flags)));\n            }\n            else {\n                changes.forEach(changed => this.checkRefresh(refreshOn, changed, flags));\n            }\n        }\n    }\n    /**\n     * Refreshes the component with a new value.\n     * @param {any} value - The latest value of the component to check if it needs to be refreshed.\n     * @returns {void}\n     */\n    refresh(value) {\n        if (this.hasOwnProperty('refreshOnValue')) {\n            this.refreshOnChanged = !lodash_1.default.isEqual(value, this.refreshOnValue);\n        }\n        else {\n            this.refreshOnChanged = true;\n        }\n        this.refreshOnValue = (0, utils_1.fastCloneDeep)(value);\n        if (this.refreshOnChanged) {\n            if (this.component.clearOnRefresh) {\n                this.setValue(null);\n            }\n            this.triggerRedraw();\n        }\n    }\n    /**\n     * Checks to see if a separate component is in the \"context\" of this component. This is determined by first checking\n     * if they share the same \"data\" object. It will then walk up the parent tree and compare its parents data objects\n     * with the components data and returns true if they are in the same context.\n     *\n     * Different rows of the same EditGrid, for example, are in different contexts.\n     * @param {any} component - The component to check if it is in the same context as this component.\n     * @returns {boolean} - TRUE if the component is in the same context as this component.\n     */\n    inContext(component) {\n        if (component.data === this.data) {\n            return true;\n        }\n        let parent = this.parent;\n        while (parent) {\n            if (parent.data === component.data) {\n                return true;\n            }\n            parent = parent.parent;\n        }\n        return false;\n    }\n    /**\n     * Determines if we are in \"view\" only mode.\n     * @returns {boolean} - TRUE if we are in \"view\" only mode.\n     */\n    get viewOnly() {\n        return this.options.readOnly && this.options.viewAsHtml;\n    }\n    /**\n     * Sets the HTMLElement for this component.\n     * @param {HTMLElement} element - The element that is attached to this component.\n     * @returns {void}\n     */\n    setElement(element) {\n        if (this.element) {\n            delete this.element.component;\n            delete this.element;\n        }\n        this.element = element;\n    }\n    /**\n     * Creates an element to hold the \"view only\" version of this component.\n     * @returns {HTMLElement} - The element for this component.\n     */\n    createViewOnlyElement() {\n        this.setElement(this.ce('dl', {\n            id: this.id\n        }));\n        if (this.element) {\n            // Ensure you can get the component info from the element.\n            this.element.component = this;\n        }\n        return this.element;\n    }\n    /**\n     * The default value for the \"view only\" mode of a component if the value is not provided.\n     * @returns {string} - The default value for this component.\n     */\n    get defaultViewOnlyValue() {\n        return '-';\n    }\n    /**\n     * Uses the widget to determine the output string.\n     * @param {any} value - The current value of the component.\n     * @param {any} options - The options for getValueAsString.\n     * @returns {any|Array<any>} - The value as a string.\n     */\n    getWidgetValueAsString(value, options) {\n        const noInputWidget = !this.refs.input || !this.refs.input[0] || !this.refs.input[0].widget;\n        if (!value || noInputWidget) {\n            if (!this.widget || !value) {\n                return value;\n            }\n            else {\n                return this.widget.getValueAsString(value);\n            }\n        }\n        if (Array.isArray(value)) {\n            const values = [];\n            value.forEach((val, index) => {\n                const widget = this.refs.input[index] && this.refs.input[index].widget;\n                if (widget) {\n                    values.push(widget.getValueAsString(val, options));\n                }\n            });\n            return values;\n        }\n        const widget = this.refs.input[0].widget;\n        return widget.getValueAsString(value, options);\n    }\n    /**\n     * Returns the value of the component as a string.\n     * @param {any} value - The value for this component.\n     * @param {any} options - The options for this component.\n     * @returns {string} - The string representation of the value of this component.\n     */\n    getValueAsString(value, options) {\n        if (!value) {\n            return '';\n        }\n        value = this.getWidgetValueAsString(value, options);\n        if (Array.isArray(value)) {\n            return value.join(', ');\n        }\n        if (lodash_1.default.isPlainObject(value)) {\n            return JSON.stringify(value);\n        }\n        if (value === null || value === undefined) {\n            return '';\n        }\n        const stringValue = value.toString();\n        return this.sanitize(stringValue);\n    }\n    /**\n     * Returns the string representation \"view\" of the component value.\n     * @param {any} value - The value of the component.\n     * @param {any} options - The options for this component.\n     * @returns {string} - The string representation of the value of this component.\n     */\n    getView(value, options) {\n        if (this.component.protected) {\n            return '--- PROTECTED ---';\n        }\n        return this.getValueAsString(value, options);\n    }\n    /**\n     * Updates the items list for this component. Useful for Select and other List component types.\n     * @param {...any} args - The arguments to pass to the onChange event.\n     * @returns {void}\n     */\n    updateItems(...args) {\n        this.restoreValue();\n        this.onChange(...args);\n    }\n    /**\n     * Returns the value for a specific item in a List type component.\n     * @param {any} data - The data for this component.\n     * @param {boolean} [forceUseValue] - if true, return 'value' property of the data\n     * @returns {any} - The value of the item.\n     */\n    itemValue(data, forceUseValue = false) {\n        if (lodash_1.default.isObject(data) && !lodash_1.default.isArray(data)) {\n            if (this.valueProperty) {\n                return lodash_1.default.get(data, this.valueProperty);\n            }\n            if (forceUseValue) {\n                return data.value;\n            }\n        }\n        return data;\n    }\n    /**\n     * Returns the item value for html mode.\n     * @param {any} value - The value for this component.\n     * @returns {any} - The value of the item for html mode.\n     */\n    itemValueForHTMLMode(value) {\n        if (Array.isArray(value)) {\n            const values = value.map(item => Array.isArray(item) ? this.itemValueForHTMLMode(item) : this.itemValue(item));\n            return values.join(', ');\n        }\n        return this.itemValue(value);\n    }\n    /**\n     * Creates a modal to input the value of this component.\n     * @param {HTMLElement} element - The element to attach the modal to.\n     * @param {any} attr - A list of attributes to add to the modal.\n     * @param {boolean} confirm - If we should add a confirmation to the modal that keeps it from closing unless confirmed.\n     * @returns {HTMLElement} - The created modal element.\n     */\n    createModal(element, attr, confirm) {\n        const dialog = this.ce('div', attr || {});\n        this.setContent(dialog, this.renderTemplate('dialog'));\n        // Add refs to dialog, not \"this\".\n        dialog.refs = {};\n        this.loadRefs.call(dialog, dialog, {\n            dialogOverlay: 'single',\n            dialogContents: 'single',\n            dialogClose: 'single',\n        });\n        dialog.refs.dialogContents.appendChild(element);\n        document.body.appendChild(dialog);\n        document.body.classList.add('modal-open');\n        dialog.close = () => {\n            document.body.classList.remove('modal-open');\n            dialog.dispatchEvent(new CustomEvent('close'));\n        };\n        this.addEventListener(dialog, 'close', () => this.removeChildFrom(dialog, document.body));\n        const close = (event) => {\n            event.preventDefault();\n            dialog.close();\n        };\n        const handleCloseClick = (e) => {\n            if (confirm) {\n                confirm().then(() => close(e))\n                    .catch(() => { });\n            }\n            else {\n                close(e);\n            }\n        };\n        this.addEventListener(dialog.refs.dialogOverlay, 'click', handleCloseClick);\n        this.addEventListener(dialog.refs.dialogClose, 'click', handleCloseClick);\n        return dialog;\n    }\n    /**\n     * Uses CSS classes to show or hide an element.\n     * @returns {boolean} - TRUE if the element has been css removed.\n     */\n    get optimizeRedraw() {\n        if (this.options.optimizeRedraw && this.element && !this.visible) {\n            this.addClass(this.element, 'formio-removed');\n            return true;\n        }\n        return false;\n    }\n    /**\n     * Retrieves the CSS class name of this component.\n     * @returns {string} - The class name of this component.\n     */\n    get className() {\n        let className = this.hasInput ? `${this.transform('class', 'form-group')} has-feedback ` : '';\n        className += `formio-component formio-component-${this.component.type} `;\n        // TODO: find proper way to avoid overriding of default type-based component styles\n        if (this.key && this.key !== 'form') {\n            className += `formio-component-${this.key} `;\n        }\n        if (this.component.multiple) {\n            className += 'formio-component-multiple ';\n        }\n        if (this.component.customClass) {\n            className += this.component.customClass;\n        }\n        if (this.hasInput && this.component.validate && (0, utils_1.boolValue)(this.component.validate.required)) {\n            className += ' required';\n        }\n        if (this.labelIsHidden()) {\n            className += ' formio-component-label-hidden';\n        }\n        if (!this.visible) {\n            className += ' formio-hidden';\n        }\n        return className;\n    }\n    /**\n     * Build the custom style from the layout values\n     * @returns {string} - The custom style\n     */\n    get customStyle() {\n        let customCSS = '';\n        lodash_1.default.each(this.component.style, (value, key) => {\n            if (value !== '') {\n                customCSS += `${key}:${value};`;\n            }\n        });\n        return customCSS;\n    }\n    /**\n     * Returns the component condition operator settings if available.\n     * @returns {object} - The component condition operator settings.\n     */\n    static get serverConditionSettings() {\n        return Component.conditionOperatorsSettings;\n    }\n    /**\n     * Returns if the application is on a mobile device.\n     * @returns {boolean} - TRUE if the application is on a mobile device.\n     */\n    get isMobile() {\n        return (0, ismobilejs_1.default)();\n    }\n    /**\n     * Returns the outside wrapping element of this component.\n     * @returns {HTMLElement} - The wrapping element of this component.\n     */\n    getElement() {\n        return this.element;\n    }\n    /**\n     * Create an evaluation context for all script executions and interpolations.\n     * @param {any} additional - Additional context to provide.\n     * @returns {any} - The evaluation context.\n     */\n    evalContext(additional) {\n        return super.evalContext(Object.assign({\n            component: this.component,\n            row: this.data,\n            rowIndex: this.rowIndex,\n            data: this.rootValue,\n            iconClass: this.iconClass.bind(this),\n            // Bind the translate function to the data context of any interpolated string.\n            // It is useful to translate strings in different scenarions (eg: custom edit grid templates, custom error messages etc.)\n            // and desirable to be publicly available rather than calling the internal {instance.t} function in the template string.\n            t: this.t.bind(this),\n            submission: (this.root ? this.root._submission : {\n                data: this.rootValue\n            }),\n            form: this.root ? this.root._form : {},\n            options: this.options,\n        }, additional));\n    }\n    /**\n     * Sets the pristine flag for this component.\n     * @param {boolean} pristine - TRUE to make pristine, FALSE not pristine.\n     */\n    setPristine(pristine) {\n        this.pristine = pristine;\n    }\n    /**\n     * Returns if the component is pristine.\n     * @returns {boolean} - TRUE if the component is pristine.\n     */\n    get isPristine() {\n        return this.pristine;\n    }\n    /**\n     * Sets the dirty flag for this component.\n     * @param {boolean} dirty - TRUE to make dirty, FALSE not dirty.\n     */\n    setDirty(dirty) {\n        this.dirty = dirty;\n    }\n    /**\n     * Returns if the component is dirty.\n     * @returns {boolean} - TRUE if the component is dirty.\n     */\n    get isDirty() {\n        return this.dirty;\n    }\n    /**\n     * Removes a value out of the data array and rebuild the rows.\n     * @param {number} index - The index of the data element to remove.\n     */\n    removeValue(index) {\n        this.splice(index);\n        this.redraw();\n        this.restoreValue();\n        this.triggerRootChange();\n    }\n    /**\n     * Returns the icon class for a given icon name.\n     * @param {string} name - The name of the icon you wish to fetch provided the icon class. This is the \"font awesome\" version of the name of the icon.\n     * @param {boolean} spinning - If the component should be spinning.\n     * @returns {string} - The icon class for the equivalent icon in the iconset we are using.\n     */\n    iconClass(name, spinning) {\n        const iconset = this.options.iconset || Templates_1.default.current.defaultIconset || 'fa';\n        return Templates_1.default.current.hasOwnProperty('iconClass')\n            ? Templates_1.default.current.iconClass(iconset, name, spinning)\n            : this.options.iconset === 'fa' ? Templates_1.default.defaultTemplates.iconClass(iconset, name, spinning) : name;\n    }\n    /**\n     * Returns the size css class names for our current template.\n     * @param {string} size - The size class name for the default iconset.\n     * @returns {string} - The size class for our component.\n     */\n    size(size) {\n        return Templates_1.default.current.hasOwnProperty('size')\n            ? Templates_1.default.current.size(size)\n            : size;\n    }\n    /**\n     * The readible name for this component.\n     * @returns {string} - The name of the component.\n     */\n    get name() {\n        return this.t(this.component.label || this.component.placeholder || this.key, { _userInput: true });\n    }\n    /**\n     * Returns the visible errors for this component.\n     * @returns {Array<object>} - The visible errors for this component.\n     */\n    get visibleErrors() {\n        return this._visibleErrors;\n    }\n    /**\n     * Returns all the errors for this component, visible or not.\n     * @returns {Array<object>} - All the errors for this component.\n     */\n    get errors() {\n        return this._errors;\n    }\n    /**\n     * Returns the error label for this component.\n     * @returns {string} - The error label for this component.\n     */\n    get errorLabel() {\n        return this.t(this.component.errorLabel\n            || this.component.label\n            || this.component.placeholder\n            || this.key);\n    }\n    /**\n     * Get the error message provided a certain type of error.\n     * @param {string} type - The type of error to fetch the message for.\n     * @returns {string} - The error message configured for this component.\n     */\n    errorMessage(type) {\n        return (this.component.errors && this.component.errors[type]) ? this.component.errors[type] : type;\n    }\n    /**\n     * Sets the content, innerHTML, of an element to the sanitized content.\n     * @param {HTMLElement} element - The element to set the innerHTML to.\n     * @param {string} content - The HTML string content that we wish to set.\n     * @param {boolean} forceSanitize - If we should force the content to be sanitized.\n     * @param {any} sanitizeOptions - The options for the sanitize function.\n     * @returns {boolean} - TRUE if the content was sanitized and set.\n     */\n    setContent(element, content, forceSanitize, sanitizeOptions) {\n        if (element instanceof HTMLElement) {\n            element.innerHTML = this.sanitize(content, forceSanitize, sanitizeOptions);\n            return true;\n        }\n        return false;\n    }\n    /**\n     * Restores the caret position in the input element after a refresh occurs.\n     */\n    restoreCaretPosition() {\n        var _a, _b, _c;\n        if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.currentSelection) {\n            if ((_b = this.refs.input) === null || _b === void 0 ? void 0 : _b.length) {\n                const { index } = this.root.currentSelection;\n                let input = this.refs.input[index];\n                const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test((i === null || i === void 0 ? void 0 : i.type) || '');\n                if (input) {\n                    if (isInputRangeSelectable(input)) {\n                        input.setSelectionRange(input.value.length, input.value.length);\n                    }\n                }\n                else {\n                    input = this.refs.input[this.refs.input.length];\n                    const lastCharacter = ((_c = input.value) === null || _c === void 0 ? void 0 : _c.length) || 0;\n                    if (isInputRangeSelectable(input)) {\n                        input.setSelectionRange(lastCharacter, lastCharacter);\n                    }\n                }\n            }\n        }\n    }\n    /**\n     * Redraw the component.\n     * @returns {Promise<void>} - A promise that resolves when the component is done redrawing.\n     */\n    redraw() {\n        // Don't bother if we have not built yet.\n        if (!this.element || !this.element.parentNode || this.optimizeRedraw) {\n            // Return a non-resolving promise.\n            return Promise.resolve();\n        }\n        this.detach();\n        this.emit('redraw');\n        // Since we are going to replace the element, we need to know it's position so we can find it in the parent's children.\n        const parent = this.element.parentNode;\n        const index = Array.prototype.indexOf.call(parent.children, this.element);\n        this.element.outerHTML = this.sanitize(this.render());\n        this.setElement(parent.children[index]);\n        return this.attach(this.element);\n    }\n    /**\n     * Rebuild and redraw a component.\n     * @returns {Promise<void>} - A promise that resolves when the component is done rebuilding and redrawing.\n     */\n    rebuild() {\n        this.destroy();\n        this.init();\n        this.visible = this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden;\n        return this.redraw();\n    }\n    /**\n     * Removes all event listeners attached to this component.\n     */\n    removeEventListeners() {\n        super.removeEventListeners();\n        this.tooltips.forEach(tooltip => tooltip.destroy());\n        this.tooltips = [];\n    }\n    /**\n     * Returns if the dom node has the classes provided.\n     * @param {HTMLElement} element - The element to check for the class.\n     * @param {string} className - The name of the class to check.\n     * @returns {boolean|void} - TRUE if the element has the class.\n     */\n    hasClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.hasClass(element, this.transform('class', className));\n    }\n    /**\n     * Adds a class to an HTML element.\n     * @param {HTMLElement} element - The dom element to add the class to.\n     * @param {string} className - The class name you wish to add.\n     * @returns {this|void} - The component instance.\n     */\n    addClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.addClass(element, this.transform('class', className));\n    }\n    /**\n     * Removes a class from an element.\n     * @param {HTMLElement} element - The element to remove the class from.\n     * @param {string} className - The class name to remove.\n     * @returns {this|void} - The component instance.\n     */\n    removeClass(element, className) {\n        if (!element) {\n            return;\n        }\n        return super.removeClass(element, this.transform('class', className));\n    }\n    /**\n     * Determines if this component has a condition defined.\n     * @returns {boolean} - TRUE if the component has a condition defined.\n     */\n    hasCondition() {\n        if (this._hasCondition !== null) {\n            return this._hasCondition;\n        }\n        this._hasCondition = FormioUtils.hasCondition(this.component);\n        return this._hasCondition;\n    }\n    /**\n     * Check if this component is conditionally visible.\n     * @param {any} data - The data to check against.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean} - TRUE if the component is conditionally visible.\n     */\n    conditionallyVisible(data, row) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        if (this.builderMode || this.previewMode) {\n            return true;\n        }\n        data = data || (this.root ? this.root.data : {});\n        return this.checkCondition(row, data);\n    }\n    /**\n     * Checks the condition of this component.\n     *\n     * TODO: Switch row and data parameters to be consistent with other methods.\n     * @param {any} row - The row contextual data.\n     * @param {any} data - The global data object.\n     * @returns {boolean} - True if the condition applies to this component.\n     */\n    checkCondition(row, data) {\n        return FormioUtils.checkCondition(this.component, row || this.data, data || this.rootValue, this.root ? this.root._form : {}, this);\n    }\n    /**\n     * Check for conditionals and hide/show the element based on those conditions.\n     * @param {any} data - The data to check against.\n     * @param {any} flags - The flags passed to checkData function.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean} - TRUE if the component is visible.\n     */\n    checkComponentConditions(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        if (!this.builderMode & !this.previewMode && this.fieldLogic(data, row)) {\n            this.redraw();\n        }\n        // Check advanced conditions (and cache the result)\n        const isConditionallyHidden = this.checkConditionallyHidden(data, row) || this._parentConditionallyHidden;\n        let shouldClear = false;\n        if (isConditionallyHidden !== this._conditionallyHidden) {\n            this._conditionallyHidden = isConditionallyHidden;\n            shouldClear = true;\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        // Wait for visibility to update for nested components, so the component state is up-to-date when\n        // calling clearOnHide\n        if (shouldClear) {\n            this.clearOnHide();\n        }\n        return visible;\n    }\n    /**\n     * Checks conditions for this component and any sub components.\n     * @param {any} data - The data to check against.\n     * @param {any} flags - The flags passed to checkData function.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean} - TRUE if the component is visible.\n     */\n    checkConditions(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        return this.checkComponentConditions(data, flags, row);\n    }\n    /**\n     * Returns the component logic if applicable.\n     * @returns {Array<object>} - The component logic.\n     */\n    get logic() {\n        return this.component.logic || [];\n    }\n    /**\n     * Check all triggers and apply necessary actions.\n     * @param {any} data - The data to check against.\n     * @param {any} row - The row data to check against.\n     * @returns {boolean|void} - TRUE if the component was altered.\n     */\n    fieldLogic(data = this.rootValue, row = this.data) {\n        const logics = this.logic;\n        // If there aren't logic, don't go further.\n        if (logics.length === 0) {\n            return;\n        }\n        const newComponent = (0, utils_1.fastCloneDeep)(this.originalComponent);\n        let changed = logics.reduce((changed, logic) => {\n            const result = FormioUtils.checkTrigger(newComponent, logic.trigger, row, data, this.root ? this.root._form : {}, this);\n            return (result ? this.applyActions(newComponent, logic.actions, result, row, data) : false) || changed;\n        }, false);\n        // If component definition changed, replace and mark as changed.\n        if (!lodash_1.default.isEqual(this.component, newComponent)) {\n            this.component = newComponent;\n            changed = true;\n            const disabled = this.shouldDisabled;\n            // Change disabled state if it has changed\n            if (this.disabled !== disabled) {\n                this.disabled = disabled;\n            }\n        }\n        return changed;\n    }\n    /**\n     * Retuns if the browser is Internet Explorer.\n     * @returns {boolean} - TRUE if the browser is IE.\n     */\n    isIE() {\n        if (typeof window === 'undefined') {\n            return false;\n        }\n        const userAgent = window.navigator.userAgent;\n        const msie = userAgent.indexOf('MSIE ');\n        if (msie > 0) {\n            // IE 10 or older => return version number\n            return parseInt(userAgent.substring(msie + 5, userAgent.indexOf('.', msie)), 10);\n        }\n        const trident = userAgent.indexOf('Trident/');\n        if (trident > 0) {\n            // IE 11 => return version number\n            const rv = userAgent.indexOf('rv:');\n            return parseInt(userAgent.substring(rv + 3, userAgent.indexOf('.', rv)), 10);\n        }\n        const edge = userAgent.indexOf('Edge/');\n        if (edge > 0) {\n            // IE 12 (aka Edge) => return version number\n            return parseInt(userAgent.substring(edge + 5, userAgent.indexOf('.', edge)), 10);\n        }\n        // other browser\n        return false;\n    }\n    /**\n     * Defines the logic action value through evaluation.\n     * @param {object} action - The action within the Logic system to perform.\n     * @param {object} argsObject - The arguments to pass to the evaluation.\n     * @returns {any} - The result of the evaluation.\n     */\n    defineActionValue(action, argsObject) {\n        return this.evaluate(action.value, argsObject, 'value');\n    }\n    /**\n     * Apply the actions of Logic for a component once the conditions have been met.\n     * @param {object} newComponent - The new component to apply the actions to.\n     * @param {Array<object>} actions - An array of actions\n     * @param {any} result - The result of the conditional check in order to evaluate the actions.\n     * @param {any} row - The contextual row data for this component.\n     * @param {any} data - The global data object for the submission.\n     * @returns {boolean} - TRUE if the component was altered.\n     */\n    applyActions(newComponent, actions, result, row, data) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        return actions.reduce((changed, action) => {\n            switch (action.type) {\n                case 'property': {\n                    FormioUtils.setActionProperty(newComponent, action, result, row, data, this);\n                    const property = action.property.value;\n                    if (!lodash_1.default.isEqual(lodash_1.default.get(this.component, property), lodash_1.default.get(newComponent, property))) {\n                        // Advanced Logic can modify the component's hidden property; because we track conditionally hidden state\n                        // separately from the component's hidden property, and technically this Advanced Logic conditionally hides\n                        // a component, we need to set _conditionallyHidden to the new value\n                        if (property === 'hidden') {\n                            this._conditionallyHidden = newComponent.hidden;\n                        }\n                        changed = true;\n                    }\n                    break;\n                }\n                case 'value': {\n                    const oldValue = this.getValue();\n                    const newValue = this.defineActionValue(action, {\n                        value: lodash_1.default.clone(oldValue),\n                        data,\n                        row,\n                        component: newComponent,\n                        result,\n                    });\n                    if (!lodash_1.default.isEqual(oldValue, newValue) && !(this.component.clearOnHide && this.conditionallyHidden)) {\n                        this.setValue(newValue);\n                        if (this.viewOnly) {\n                            this.dataValue = newValue;\n                        }\n                        changed = true;\n                    }\n                    break;\n                }\n                case 'mergeComponentSchema': {\n                    const schema = this.evaluate(action.schemaDefinition, {\n                        value: lodash_1.default.clone(this.getValue()),\n                        data,\n                        row,\n                        component: newComponent,\n                        result,\n                    }, 'schema');\n                    lodash_1.default.assign(newComponent, schema);\n                    if (!lodash_1.default.isEqual(this.component, newComponent)) {\n                        changed = true;\n                    }\n                    break;\n                }\n                case 'customAction': {\n                    const oldValue = this.getValue();\n                    const newValue = this.evaluate(action.customAction, {\n                        value: lodash_1.default.clone(oldValue),\n                        data,\n                        row,\n                        input: oldValue,\n                        component: newComponent,\n                        result,\n                    }, 'value');\n                    if (!lodash_1.default.isEqual(oldValue, newValue) && !(this.component.clearOnHide && this.conditionallyHidden)) {\n                        this.setValue(newValue);\n                        if (this.viewOnly) {\n                            this.dataValue = newValue;\n                        }\n                        changed = true;\n                    }\n                    break;\n                }\n            }\n            return changed;\n        }, false);\n    }\n    // Deprecated\n    addInputError(message, dirty, elements) {\n        this.addMessages(message);\n        this.setErrorClasses(elements, dirty, !!message);\n    }\n    // Deprecated\n    removeInputError(elements) {\n        this.setErrorClasses(elements, true, false);\n    }\n    /**\n     * Add a new input error to this element.\n     * @param {Array<object>|string} messages - An array of messages to add to the element.\n     * @returns {void}\n     */\n    addMessages(messages) {\n        if (!messages) {\n            return;\n        }\n        // Standardize on array of objects for message.\n        if (typeof messages === 'string') {\n            messages = {\n                messages,\n                level: 'error',\n            };\n        }\n        if (!Array.isArray(messages)) {\n            messages = [messages];\n        }\n        messages = lodash_1.default.uniqBy(messages, message => message.message);\n        if (this.refs.messageContainer) {\n            this.setContent(this.refs.messageContainer, messages.map((message) => {\n                return this.renderTemplate('message', Object.assign({}, message));\n            }).join(''));\n        }\n    }\n    /**\n     * Sets the form input widget error classes.\n     * @param {Array<HTMLElement>} elements - An array of DOM elements to set the error classes on.\n     * @param {boolean} dirty - If the input is dirty.\n     * @param {boolean} hasErrors - If the input has errors.\n     * @param {boolean} hasMessages - If the input has messages.\n     * @param {HTMLElement} element - The wrapper element for all the other elements passed in first argument.\n     * @returns {void}\n     */\n    setErrorClasses(elements, dirty, hasErrors, hasMessages, element = this.element) {\n        this.clearErrorClasses();\n        elements.forEach((element) => {\n            this.setElementInvalid(this.performInputMapping(element), false);\n        });\n        this.setInputWidgetErrorClasses(elements, hasErrors);\n        // do not set error classes for hidden components\n        if (!this.visible) {\n            return;\n        }\n        if (hasErrors) {\n            // Add error classes\n            elements.forEach((input) => {\n                this.setElementInvalid(this.performInputMapping(input), true);\n            });\n            if (dirty && this.options.highlightErrors) {\n                this.addClass(element, this.options.componentErrorClass);\n            }\n            else {\n                this.addClass(element, 'has-error');\n            }\n        }\n        if (hasMessages) {\n            this.addClass(element, 'has-message');\n        }\n    }\n    /**\n     * Adds the classes necessary to mark an element as invalid.\n     * @param {HTMLElement} element - The element you wish to add the invalid classes to.\n     * @param {boolean} invalid - TRUE if the component is invalid, FALSE otherwise.\n     * @returns {void}\n     */\n    setElementInvalid(element, invalid) {\n        if (!element)\n            return;\n        if (invalid) {\n            this.addClass(element, 'is-invalid');\n        }\n        else {\n            this.removeClass(element, 'is-invalid');\n        }\n        element.setAttribute('aria-invalid', invalid ? 'true' : 'false');\n    }\n    /**\n     * Clears the components data if it is conditionally hidden AND clearOnHide is set to true for this component.\n     */\n    clearOnHide() {\n        // clearOnHide defaults to true for old forms (without the value set) so only trigger if the value is false.\n        if (\n        // if change happens inside EditGrid's row, it doesn't trigger change on the root level, so rootPristine will be true\n        (!this.rootPristine || this.options.server || (0, utils_1.isInsideScopingComponent)(this)) &&\n            this.component.clearOnHide !== false &&\n            !this.options.readOnly &&\n            !this.options.showHiddenFields) {\n            if (this.conditionallyHidden) {\n                this.deleteValue();\n            }\n            else if (!this.hasValue() && this.shouldAddDefaultValue) {\n                // If shown, ensure the default is set.\n                this.setValue(this.defaultValue, {\n                    noUpdateEvent: true\n                });\n            }\n        }\n    }\n    /**\n     * Triggers a debounced onChange event for the root component (usually Webform).\n     * @param {...any} args - The arguments to pass to the onChange event.\n     */\n    triggerRootChange(...args) {\n        if (this.options.onChange) {\n            this.options.onChange(...args);\n        }\n        else if (this.root && this.root.triggerChange) {\n            this.root.triggerChange(...args);\n        }\n    }\n    /**\n     * Called when the component value has been changed. This will then trigger the root level onChange handler which\n     * propagates the checkData methods for the full component tree.\n     * @param {any} flags - The flags for the change event propagation.\n     * @param {boolean} fromRoot - If the change event is from the root component.\n     * @returns {boolean} - TRUE if the component has changed.\n     */\n    onChange(flags, fromRoot) {\n        flags = flags || {};\n        if (flags.modified) {\n            if (!flags.noPristineChangeOnModified) {\n                this.pristine = false;\n            }\n            this.addClass(this.getElement(), 'formio-modified');\n        }\n        // If we are supposed to validate on blur, then don't trigger validation yet.\n        if (this.component.validateOn === 'blur' || this.component.validateOn === 'submit') {\n            flags.noValidate = true;\n        }\n        if (this.component.onChange) {\n            this.evaluate(this.component.onChange, {\n                flags\n            });\n        }\n        // Set the changed variable.\n        const changed = {\n            instance: this,\n            component: this.component,\n            value: this.dataValue,\n            flags: flags\n        };\n        // Emit the change.\n        this.emit('componentChange', changed);\n        // Do not propogate the modified flag.\n        let modified = false;\n        if (flags.modified) {\n            modified = true;\n            delete flags.modified;\n        }\n        // Bubble this change up to the top.\n        if (!fromRoot) {\n            this.triggerRootChange(flags, changed, modified);\n        }\n        return changed;\n    }\n    get wysiwygDefault() {\n        return {\n            quill: {\n                theme: 'snow',\n                placeholder: this.t(this.component.placeholder, { _userInput: true }),\n                modules: {\n                    toolbar: [\n                        [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown\n                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],\n                        [{ 'font': [] }],\n                        ['bold', 'italic', 'underline', 'strike', { 'script': 'sub' }, { 'script': 'super' }, 'clean'],\n                        [{ 'color': [] }, { 'background': [] }],\n                        [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }, { 'align': [] }],\n                        ['blockquote', 'code-block'],\n                        ['link', 'image', 'video', 'formula', 'source']\n                    ]\n                }\n            },\n            ace: {\n                theme: 'ace/theme/xcode',\n                maxLines: 12,\n                minLines: 12,\n                tabSize: 2,\n                mode: 'ace/mode/javascript',\n                placeholder: this.t(this.component.placeholder, { _userInput: true })\n            },\n            ckeditor: {\n                image: {\n                    toolbar: [\n                        'imageTextAlternative',\n                        '|',\n                        'imageStyle:full',\n                        'imageStyle:alignLeft',\n                        'imageStyle:alignCenter',\n                        'imageStyle:alignRight'\n                    ],\n                    styles: [\n                        'full',\n                        'alignLeft',\n                        'alignCenter',\n                        'alignRight'\n                    ]\n                },\n                extraPlugins: []\n            },\n            default: {}\n        };\n    }\n    addCKE(element, settings, onChange) {\n        settings = lodash_1.default.isEmpty(settings) ? {} : settings;\n        settings.base64Upload = this.component.isUploadEnabled ? false : true;\n        settings.mediaEmbed = { previewsInData: true };\n        settings = lodash_1.default.merge(this.wysiwygDefault.ckeditor, lodash_1.default.get(this.options, 'editors.ckeditor.settings', {}), settings);\n        if (this.component.isUploadEnabled) {\n            settings.extraPlugins.push((0, uploadAdapter_1.getFormioUploadAdapterPlugin)(this.fileService, this));\n        }\n        return Formio_1.Formio.requireLibrary('ckeditor', isIEBrowser ? 'CKEDITOR' : 'ClassicEditor', lodash_1.default.get(this.options, 'editors.ckeditor.src', `${Formio_1.Formio.cdn.ckeditor}/ckeditor.js`), true)\n            .then(() => {\n            if (!element.parentNode) {\n                return Promise.reject();\n            }\n            if (isIEBrowser) {\n                const editor = CKEDITOR.replace(element);\n                editor.on('change', () => onChange(editor.getData()));\n                return Promise.resolve(editor);\n            }\n            else {\n                return ClassicEditor.create(element, settings).then(editor => {\n                    editor.model.document.on('change', () => onChange(editor.data.get()));\n                    return editor;\n                });\n            }\n        });\n    }\n    addQuill(element, settings, onChange) {\n        settings = lodash_1.default.isEmpty(settings) ? this.wysiwygDefault.quill : settings;\n        settings = lodash_1.default.merge(this.wysiwygDefault.quill, lodash_1.default.get(this.options, 'editors.quill.settings', {}), settings);\n        settings = Object.assign(Object.assign({}, settings), { modules: Object.assign({ table: true }, settings.modules) });\n        // Lazy load the quill css.\n        Formio_1.Formio.requireLibrary(`quill-css-${settings.theme}`, 'Quill', [\n            { type: 'styles', src: `${Formio_1.Formio.cdn.quill}/quill.${settings.theme}.css` }\n        ], true);\n        // Lazy load the quill library.\n        return Formio_1.Formio.requireLibrary('quill', 'Quill', lodash_1.default.get(this.options, 'editors.quill.src', `${Formio_1.Formio.cdn.quill}/quill.min.js`), true)\n            .then(() => {\n            return Formio_1.Formio.requireLibrary('quill-table', 'Quill', `${Formio_1.Formio.cdn.baseUrl}/quill/quill-table.js`, true)\n                .then(() => {\n                if (!element.parentNode) {\n                    return Promise.reject();\n                }\n                this.quill = new Quill(element, isIEBrowser ? Object.assign(Object.assign({}, settings), { modules: {} }) : settings);\n                /** This block of code adds the [source] capabilities.  See https://codepen.io/anon/pen/ZyEjrQ */\n                const txtArea = document.createElement('textarea');\n                txtArea.setAttribute('class', 'quill-source-code');\n                this.quill.addContainer('ql-custom').appendChild(txtArea);\n                const qlSource = element.parentNode.querySelector('.ql-source');\n                if (qlSource) {\n                    this.addEventListener(qlSource, 'click', (event) => {\n                        event.preventDefault();\n                        if (txtArea.style.display === 'inherit') {\n                            this.quill.setContents(this.quill.clipboard.convert({ html: txtArea.value }));\n                        }\n                        txtArea.style.display = (txtArea.style.display === 'none') ? 'inherit' : 'none';\n                    });\n                }\n                /** END CODEBLOCK */\n                // Make sure to select cursor when they click on the element.\n                this.addEventListener(element, 'click', () => this.quill.focus());\n                // Allows users to skip toolbar items when tabbing though form\n                const elm = document.querySelectorAll('.ql-formats > button');\n                for (let i = 0; i < elm.length; i++) {\n                    elm[i].setAttribute('tabindex', '-1');\n                }\n                this.quill.on('text-change', () => {\n                    txtArea.value = this.quill.root.innerHTML;\n                    onChange(txtArea);\n                });\n                return this.quill;\n            });\n        });\n    }\n    get shouldSanitizeValue() {\n        var _a;\n        // Sanitize value if sanitizing for thw whole content is turned off\n        return (((_a = this.options) === null || _a === void 0 ? void 0 : _a.sanitize) !== false);\n    }\n    addAce(element, settings, onChange) {\n        if (!settings || (settings.theme === 'snow')) {\n            const mode = settings ? settings.mode : '';\n            settings = {};\n            if (mode) {\n                settings.mode = mode;\n            }\n        }\n        settings = lodash_1.default.merge(this.wysiwygDefault.ace, lodash_1.default.get(this.options, 'editors.ace.settings', {}), settings || {});\n        return Formio_1.Formio.requireLibrary('ace', 'ace', lodash_1.default.get(this.options, 'editors.ace.src', `${Formio_1.Formio.cdn.ace}/ace.js`), true)\n            .then((editor) => {\n            editor = editor.edit(element);\n            editor.removeAllListeners('change');\n            editor.setOptions(settings);\n            editor.getSession().setMode(settings.mode);\n            editor.on('change', () => onChange(editor.getValue()));\n            if (settings.isUseWorkerDisabled) {\n                editor.session.setUseWorker(false);\n            }\n            return editor;\n        });\n    }\n    getDragula() {\n        return __awaiter(this, void 0, void 0, function* () {\n            return new Promise((resolve) => {\n                return Formio_1.Formio.requireLibrary('dragula', 'dragula', `${Formio_1.Formio.cdn.dragula}/dragula.js`, true, (ready) => {\n                    return ready.then(resolve);\n                });\n            });\n        });\n    }\n    get tree() {\n        return this.component.tree || false;\n    }\n    /**\n     * The empty value for this component.\n     * @returns {null} - The empty value for this component.\n     */\n    get emptyValue() {\n        return null;\n    }\n    /**\n     * Returns if this component has a value set.\n     * @param {any} data - The global data object.\n     * @returns {boolean} - TRUE if a value is set.\n     */\n    hasValue(data) {\n        return !lodash_1.default.isUndefined(lodash_1.default.get(data || this.data, this.key));\n    }\n    /**\n     * Get the data value at the root level.\n     * @returns {*} - The root value for the component, typically the Webform data object.\n     */\n    get rootValue() {\n        return this.root ? this.root.data : this.data;\n    }\n    get rootPristine() {\n        return lodash_1.default.get(this, 'root.pristine', false);\n    }\n    /**\n     * Get the static value of this component.\n     * @returns {*} - The value for this component.\n     */\n    get dataValue() {\n        if (!this.key ||\n            (this.conditionallyHidden && this.component.clearOnHide && !this.rootPristine)) {\n            return this.emptyValue;\n        }\n        if (!this.hasValue() && this.shouldAddDefaultValue) {\n            const empty = this.component.multiple ? [] : this.emptyValue;\n            if (!this.rootPristine) {\n                this.dataValue = empty;\n            }\n            return empty;\n        }\n        return lodash_1.default.get(this._data, this.key);\n    }\n    /**\n     * Sets the static value of this component.\n     * @param {*} value - The value to set for this component.\n     */\n    set dataValue(value) {\n        if (!this.allowData ||\n            !this.key ||\n            (this.conditionallyHidden && this.component.clearOnHide && !this.rootPristine)) {\n            return;\n        }\n        if ((value !== null) && (value !== undefined)) {\n            value = this.hook('setDataValue', value, this.key, this._data);\n        }\n        if ((value === null) || (value === undefined)) {\n            this.unset();\n            return;\n        }\n        lodash_1.default.set(this._data, this.key, value);\n        return;\n    }\n    /**\n     * Splice a value from the dataValue.\n     * @param {number} index - The index to splice for an array component values.\n     * @param {*} flags - The flags to use when splicing the value.\n     */\n    splice(index, flags = {}) {\n        if (this.hasValue()) {\n            const dataValue = this.dataValue || [];\n            if (lodash_1.default.isArray(dataValue) && dataValue.hasOwnProperty(index)) {\n                dataValue.splice(index, 1);\n                this.dataValue = dataValue;\n                this.triggerChange(flags);\n            }\n        }\n    }\n    unset() {\n        lodash_1.default.unset(this._data, this.key);\n    }\n    /**\n     * Deletes the value of the component.\n     */\n    deleteValue() {\n        this.setValue(null, {\n            noUpdateEvent: true,\n            noDefault: true\n        });\n        this.unset();\n    }\n    getCustomDefaultValue(defaultValue) {\n        if (this.component.customDefaultValue && !this.options.preview) {\n            defaultValue = this.evaluate(this.component.customDefaultValue, { value: '' }, 'value');\n        }\n        return defaultValue;\n    }\n    get shouldAddDefaultValue() {\n        return !this.options.noDefaults || (this.component.defaultValue && !this.isEmpty(this.component.defaultValue)) || this.component.customDefaultValue;\n    }\n    get defaultValue() {\n        let defaultValue = this.emptyValue;\n        if (this.component.defaultValue) {\n            defaultValue = this.component.defaultValue;\n        }\n        defaultValue = this.getCustomDefaultValue(defaultValue);\n        const checkMask = (value) => {\n            if (typeof value === 'string') {\n                if (this.component.type !== 'textfield') {\n                    const placeholderChar = this.placeholderChar;\n                    value = (0, vanilla_text_mask_1.conformToMask)(value, this.defaultMask, { placeholderChar }).conformedValue;\n                    if (!FormioUtils.matchInputMask(value, this.defaultMask)) {\n                        value = '';\n                    }\n                }\n            }\n            else {\n                value = '';\n            }\n            return value;\n        };\n        if (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        if (isArray &&\n            Array.isArray(this.defaultValue) &&\n            this.refs.hasOwnProperty('input') &&\n            valueInput &&\n            (valueInput.length !== value.length) &&\n            this.visible) {\n            this.redraw();\n        }\n        if (this.isHtmlRenderMode() && flags && flags.fromSubmission && changed) {\n            this.redraw();\n            return changed;\n        }\n        for (const i in this.refs.input) {\n            if (this.refs.input.hasOwnProperty(i)) {\n                this.setValueAt(i, isArray && !this.isSingleInputValue() ? value[i] : value, flags);\n            }\n        }\n        return changed;\n    }\n    /**\n     * Returns if the value (e.g. array) should be divided between several inputs\n     * @returns {boolean}\n     */\n    isSingleInputValue() {\n        return false;\n    }\n    /**\n     * Set the value at a specific index.\n     * @param {number} index - The index to set the value at.\n     * @param {*} value - The value to set at the specified index.\n     * @param {*} flags - The flags to use when setting the value.\n     */\n    setValueAt(index, value, flags = {}) {\n        if (!flags.noDefault && (value === null || value === undefined) && !this.component.multiple) {\n            value = this.defaultValue;\n        }\n        const input = this.performInputMapping(this.refs.input[index]);\n        const valueMaskInput = this.refs.valueMaskInput;\n        if ((valueMaskInput === null || valueMaskInput === void 0 ? void 0 : valueMaskInput.mask) && valueMaskInput.mask.textMaskInputElement) {\n            valueMaskInput.mask.textMaskInputElement.update(value);\n        }\n        if (input.mask && input.mask.textMaskInputElement) {\n            input.mask.textMaskInputElement.update(value);\n        }\n        else if (input.widget && input.widget.setValue) {\n            input.widget.setValue(value);\n        }\n        else {\n            input.value = value;\n        }\n    }\n    get hasSetValue() {\n        return this.hasValue() && !this.isEmpty(this.dataValue);\n    }\n    setDefaultValue() {\n        if (this.defaultValue && this.shouldAddDefaultValue) {\n            const defaultValue = (this.component.multiple && !this.dataValue.length) ? [] : this.defaultValue;\n            this.setValue(defaultValue, {\n                noUpdateEvent: true\n            });\n        }\n    }\n    /**\n     * Restore the value of a control.\n     */\n    restoreValue() {\n        if (this.hasSetValue) {\n            this.setValue(this.dataValue, {\n                noUpdateEvent: true\n            });\n        }\n        else {\n            this.setDefaultValue();\n        }\n    }\n    /**\n     * Normalize values coming into updateValue.\n     * @param {*} value - The value to normalize before setting.\n     * @returns {*} - The normalized value.\n     */\n    normalizeValue(value) {\n        return value;\n    }\n    /**\n     * Update a value of this component.\n     * @param {*} value - The value to update.\n     * @param {*} flags - The flags to use when updating the value.\n     * @returns {boolean} - If the value changed.\n     */\n    updateComponentValue(value, flags = {}) {\n        let newValue = (!flags.resetValue && (value === undefined || value === null)) ? this.getValue() : value;\n        newValue = this.normalizeValue(newValue, flags);\n        const oldValue = this.dataValue;\n        let changed = ((newValue !== undefined) ? this.hasChanged(newValue, oldValue) : false);\n        if (changed) {\n            this.dataValue = newValue;\n            changed = this.dataValue !== oldValue;\n            this.updateOnChange(flags, changed);\n        }\n        if (this.componentModal && flags && flags.fromSubmission) {\n            this.componentModal.setValue(value);\n        }\n        return changed;\n    }\n    /**\n     * Updates the value of this component plus all sub-components.\n     * @param {...any} args - The arguments to pass to updateValue.\n     * @returns {boolean} - If the value changed.\n     */\n    updateValue(...args) {\n        return this.updateComponentValue(...args);\n    }\n    getIcon(name, content, styles, ref = 'icon') {\n        return this.renderTemplate('icon', {\n            className: this.iconClass(name),\n            ref,\n            styles,\n            content\n        });\n    }\n    /**\n     * Resets the value of this component.\n     */\n    resetValue() {\n        this.unset();\n        this.setValue(this.defaultValue || this.emptyValue, {\n            noUpdateEvent: true,\n            noValidate: true,\n            resetValue: true\n        });\n    }\n    /**\n     * Determine if the value of this component has changed.\n     * @param {*} newValue - The new value to check.\n     * @param {*} oldValue - The existing value of the component.\n     * @returns {boolean} - TRUE if the value has changed.\n     */\n    hasChanged(newValue, oldValue) {\n        if (((newValue === undefined) || (newValue === null)) &&\n            ((oldValue === undefined) || (oldValue === null) || this.isEmpty(oldValue))) {\n            return false;\n        }\n        // If we do not have a value and are getting set to anything other than undefined or null, then we changed.\n        if (newValue !== undefined &&\n            newValue !== null &&\n            this.allowData &&\n            !this.hasValue()) {\n            return true;\n        }\n        return !lodash_1.default.isEqual(newValue, oldValue);\n    }\n    /**\n     * Update the value on change.\n     * @param {*} flags - The flags to use when triggering the on change event.\n     * @param {boolean} changed - If the value has changed.\n     * @returns {boolean} - If the value changed.\n     */\n    updateOnChange(flags = {}, changed = false) {\n        if (!flags.noUpdateEvent && changed) {\n            if (flags.fromSubmission) {\n                // Reset the errors when a submission has been made and allow it to revalidate.\n                this._errors = [];\n            }\n            this.triggerChange(flags);\n            return true;\n        }\n        return false;\n    }\n    convertNumberOrBoolToString(value) {\n        if (typeof value === 'number' || typeof value === 'boolean') {\n            return value.toString();\n        }\n        return value;\n    }\n    doValueCalculation(dataValue, data, row) {\n        var _a;\n        return this.evaluate(this.component.calculateValue, {\n            value: dataValue,\n            data,\n            row: row || this.data,\n            submission: ((_a = this.root) === null || _a === void 0 ? void 0 : _a._submission) || {\n                data: this.rootValue\n            }\n        }, 'value');\n    }\n    /* eslint-disable max-statements */\n    calculateComponentValue(data, flags, row) {\n        // Skip value calculation for the component if we don't have entire form data set or in builder mode\n        if (this.builderMode || lodash_1.default.isUndefined(lodash_1.default.get(this, 'root.data'))) {\n            return false;\n        }\n        // If no calculated value or\n        // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)\n        const { clearOnHide } = this.component;\n        const shouldBeCleared = this.conditionallyHidden && clearOnHide;\n        const allowOverride = lodash_1.default.get(this.component, 'allowCalculateOverride', false);\n        if (shouldBeCleared) {\n            // remove calculated value so that the value is recalculated once component becomes visible\n            if (this.hasOwnProperty('calculatedValue') && allowOverride) {\n                lodash_1.default.unset(this, 'calculatedValue');\n            }\n            return false;\n        }\n        // Handle all cases when calculated values should not fire.\n        if ((this.options.readOnly && !this.options.pdf && !this.component.calculateValue) ||\n            !(this.component.calculateValue || this.component.calculateValueVariable) ||\n            (this.options.server && !this.component.calculateServer) ||\n            (flags.dataSourceInitialLoading && allowOverride)) {\n            return false;\n        }\n        const dataValue = this.dataValue;\n        // Calculate the new value.\n        let calculatedValue = this.doValueCalculation(dataValue, data, row, flags);\n        if (this.options.readOnly && dataValue && !calculatedValue) {\n            return false;\n        }\n        if (lodash_1.default.isNil(calculatedValue)) {\n            calculatedValue = this.emptyValue;\n        }\n        const changed = !lodash_1.default.isEqual(dataValue, calculatedValue);\n        // Do not override calculations on server if they have calculateServer set.\n        if (allowOverride) {\n            // The value is considered locked if it is not empty and comes from a submission value.\n            const fromSubmission = (flags.fromSubmission && this.component.persistent === true);\n            if (this.isEmpty(dataValue)) {\n                // Reset the calculation lock if ever the data is cleared.\n                this.calculationLocked = false;\n            }\n            else if (this.calculationLocked || fromSubmission) {\n                this.calculationLocked = true;\n                return false;\n            }\n            const firstPass = (this.calculatedValue === undefined) || flags.resetValue;\n            if (firstPass) {\n                this.calculatedValue = null;\n            }\n            const newCalculatedValue = this.normalizeValue(this.convertNumberOrBoolToString(calculatedValue));\n            const previousCalculatedValue = this.normalizeValue(this.convertNumberOrBoolToString(this.calculatedValue));\n            const normalizedDataValue = this.normalizeValue(this.convertNumberOrBoolToString(dataValue));\n            const calculationChanged = !lodash_1.default.isEqual(previousCalculatedValue, newCalculatedValue);\n            const previousChanged = !lodash_1.default.isEqual(normalizedDataValue, previousCalculatedValue);\n            if (calculationChanged && previousChanged && !firstPass) {\n                return false;\n            }\n            // Check to ensure that the calculated value is different than the previously calculated value.\n            if (previousCalculatedValue && previousChanged && !calculationChanged) {\n                this.calculatedValue = null;\n                return false;\n            }\n            if (flags.isReordered || !calculationChanged) {\n                return false;\n            }\n            if (fromSubmission) {\n                // If we set value from submission and it differs from calculated one, set the calculated value to prevent overriding dataValue in the next pass\n                this.calculatedValue = (0, utils_1.fastCloneDeep)(calculatedValue);\n                return false;\n            }\n            // If this is the firstPass, and the dataValue is different than to the calculatedValue.\n            if (firstPass && !this.isEmpty(dataValue) && changed && calculationChanged) {\n                // Return that we have a change so it will perform another pass.\n                return true;\n            }\n        }\n        this.calculatedValue = (0, utils_1.fastCloneDeep)(calculatedValue);\n        if (changed) {\n            if (!flags.noPristineChangeOnModified && this.root.initialized) {\n                this.pristine = false;\n            }\n            flags.triggeredComponentId = this.id;\n            return this.setValue(calculatedValue, flags);\n        }\n        return false;\n    }\n    /* eslint-enable max-statements */\n    /**\n     * Performs calculations in this component plus any child components.\n     * @param {*} data - The data to perform the calculation with.\n     * @param {*} flags - The flags to use when calculating the value.\n     * @param {*} row - The contextual row data to use when performing the calculation.\n     * @returns {boolean} - TRUE if the value changed.\n     */\n    calculateValue(data, flags, row) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        return this.calculateComponentValue(data, flags, row);\n    }\n    /**\n     * Get this component's label text.\n     * @returns {string} - The label text for this component.\n     */\n    get label() {\n        return this.component.label;\n    }\n    /**\n     * Set this component's label text and render it.\n     * @param {string} value - The new label text.\n     */\n    set label(value) {\n        this.component.label = value;\n        if (this.labelElement) {\n            this.labelElement.innerText = value;\n        }\n    }\n    /**\n     * Get FormioForm element at the root of this component tree.\n     * @returns {*} root - The root component to search from.\n     */\n    getRoot() {\n        return this.root;\n    }\n    /**\n     * Returns the invalid message, or empty string if the component is valid.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {boolean} ignoreCondition - If conditions for the component should be ignored when checking validity.\n     * @param {*} row - Contextual row data for this component.\n     * @returns {string} - The message to show when the component is invalid.\n     */\n    invalidMessage(data, dirty, ignoreCondition, row) {\n        var _a;\n        if (!row) {\n            row = (0, utils_1.getContextualRowData)(this.component, data, this.paths);\n        }\n        if (!ignoreCondition && !this.checkCondition(row, data)) {\n            return '';\n        }\n        // See if this is forced invalid.\n        if (this.invalid) {\n            return this.invalid;\n        }\n        // No need to check for errors if there is no input or if it is pristine.\n        if (!this.hasInput || (!dirty && this.pristine)) {\n            return '';\n        }\n        const validationScope = { errors: [] };\n        (0, process_1.processOneSync)({\n            component: this.component,\n            data,\n            row,\n            path: this.path || this.component.key,\n            parent: (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component,\n            paths: this.paths,\n            scope: validationScope,\n            instance: this,\n            processors: [\n                process_1.validateProcessInfo\n            ]\n        });\n        const errors = validationScope.errors;\n        const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));\n        return lodash_1.default.map(interpolatedErrors, 'message').join('\\n\\n');\n    }\n    /**\n     * Returns if the component is valid or not.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    isValid(data, dirty) {\n        return !this.invalidMessage(data, dirty);\n    }\n    setComponentValidity(errors, dirty, silentCheck) {\n        if (silentCheck) {\n            return [];\n        }\n        const messages = errors.filter(message => !message.fromServer);\n        if (errors.length && !!messages.length && (!this.isEmpty(this.defaultValue) || dirty || !this.pristine)) {\n            return this.setCustomValidity(messages, dirty);\n        }\n        else {\n            return this.setCustomValidity('');\n        }\n    }\n    /**\n     * Interpolate errors from the validation methods.\n     * @param {Array<any>} errors - An array of errors to interpolate.\n     * @returns {Array<any>} - The interpolated errors.\n     */\n    interpolateErrors(errors) {\n        var _a;\n        const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));\n        return ((_a = this.serverErrors) === null || _a === void 0 ? void 0 : _a.length) ? [...interpolatedErrors, ...this.serverErrors] : interpolatedErrors;\n    }\n    /**\n     * Show component validation errors.\n     * @param {*} errors - An array of errors that have occured.\n     * @param {*} data - The root submission data.\n     * @param {*} row - The contextual row data.\n     * @param {*} flags - The flags to perform validation.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    showValidationErrors(errors, data, row, flags) {\n        if (flags.silentCheck) {\n            return [];\n        }\n        let isDirty = (flags.dirty === false) ? false : (this.dirty || flags.dirty);\n        if (this.options.alwaysDirty) {\n            isDirty = true;\n        }\n        this.setDirty(isDirty);\n        return this.setComponentValidity(errors, isDirty, flags.silentCheck, flags.fromSubmission);\n    }\n    /**\n     * Perform a component validation.\n     * @param {*} data - The root data you wish to use for this component.\n     * @param {*} row - The contextual row data you wish to use for this component.\n     * @param {*} flags - The flags to control the behavior of the validation.\n     * @returns {Array<any>} - An array of errors if the component is invalid.\n     */\n    validateComponent(data = null, row = null, flags = {}) {\n        var _a;\n        data = data || this.rootValue;\n        row = row || this.data;\n        const { async = false } = flags;\n        if (this.shouldSkipValidation(data, row, flags)) {\n            return async ? Promise.resolve([]) : [];\n        }\n        const processContext = {\n            component: this.component,\n            data,\n            row,\n            local: !!flags.local,\n            value: this.validationValue,\n            parent: (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component,\n            paths: this.paths,\n            path: this.path || this.component.key,\n            instance: this,\n            form: this.root ? this.root._form : {},\n            scope: { errors: [] },\n            processors: [\n                process_1.validateProcessInfo\n            ]\n        };\n        if (async) {\n            return (0, process_1.processOne)(processContext).then(() => {\n                this._errors = this.interpolateErrors(processContext.scope.errors);\n                return this._errors;\n            });\n        }\n        (0, process_1.processOneSync)(processContext);\n        this._errors = this.interpolateErrors(processContext.scope.errors);\n        return this._errors;\n    }\n    /**\n     * Checks the validity of this component and sets the error message if it is invalid.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {*} row - The contextual row data for this component.\n     * @param {*} flags - The flags to use when checking the validity.\n     * @param {Array<any>} allErrors - An array of all errors that have occured so that it can be appended when another one occurs here.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    checkComponentValidity(data = null, dirty = false, row = null, flags = {}, allErrors = []) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        flags.dirty = dirty || false;\n        if (flags.async) {\n            return this.validateComponent(data, row, flags).then((errors) => {\n                allErrors.push(...errors);\n                if (this.parent && this.parent.childErrors) {\n                    if (errors.length) {\n                        this.parent.childErrors.push(...errors);\n                    }\n                    else {\n                        lodash_1.default.remove(this.parent.childErrors, (err) => { var _a, _b; return (((_a = err === null || err === void 0 ? void 0 : err.component) === null || _a === void 0 ? void 0 : _a.key) || ((_b = err === null || err === void 0 ? void 0 : err.context) === null || _b === void 0 ? void 0 : _b.key)) === this.component.key; });\n                    }\n                }\n                this.showValidationErrors(errors, data, row, flags);\n                return errors.length === 0;\n            });\n        }\n        else {\n            const errors = this.validateComponent(data, row, flags);\n            this.showValidationErrors(errors, data, row, flags);\n            allErrors.push(...errors);\n            if (this.parent && this.parent.childErrors) {\n                if (errors.length) {\n                    this.parent.childErrors.push(...errors);\n                }\n                else {\n                    lodash_1.default.remove(this.parent.childErrors, (err) => { var _a, _b; return (((_a = err === null || err === void 0 ? void 0 : err.component) === null || _a === void 0 ? void 0 : _a.key) || ((_b = err === null || err === void 0 ? void 0 : err.context) === null || _b === void 0 ? void 0 : _b.key)) === this.component.key; });\n                }\n            }\n            return errors.length === 0;\n        }\n    }\n    /**\n     * Checks the validity of the component.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {*} row - The contextual row data for this component.\n     * @param {boolean} silentCheck - If the check should be silent and not set the error messages.\n     * @param {Array<any>} errors - An array of all errors that have occured so that it can be appended when another one occurs here.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    checkValidity(data = null, dirty = false, row = null, silentCheck = false, errors = []) {\n        data = data || this.rootValue;\n        row = row || this.data;\n        return this.checkComponentValidity(data, dirty, row, { silentCheck }, errors);\n    }\n    checkAsyncValidity(data = null, dirty = false, row = null, silentCheck = false, errors = []) {\n        return this.checkComponentValidity(data, dirty, row, { async: true, silentCheck }, errors);\n    }\n    /**\n     * Check the conditions, calculations, and validity of a single component and triggers an update if\n     * something changed.\n     * @param {*} data - The root data of the change event.\n     * @param {*} flags - The flags from this change event.\n     * @param {*} row - The contextual row data for this component.\n     * @returns {void|boolean} - TRUE if no check should be performed on the component.\n     */\n    checkData(data = null, flags = null, row = null) {\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        // Needs for Nextgen Rules Engine\n        this.resetCaches();\n        // Do not trigger refresh if change was triggered on blur event since components with Refresh on Blur have their own listeners\n        if (!flags.fromBlur) {\n            this.checkRefreshOn(flags.changes, flags);\n        }\n        if (flags.noCheck) {\n            return true;\n        }\n        this.checkComponentConditions(data, flags, row);\n        if (this.id !== flags.triggeredComponentId) {\n            this.calculateComponentValue(data, flags, row);\n        }\n    }\n    checkModal(errors = [], dirty = false) {\n        const messages = errors.filter(error => !error.fromServer);\n        const isValid = errors.length === 0;\n        if (!this.component.modalEdit || !this.componentModal) {\n            return;\n        }\n        if (dirty && !isValid) {\n            this.setErrorClasses([this.refs.openModal], dirty, !isValid, !!messages.length, this.refs.openModalWrapper);\n        }\n        else {\n            this.clearErrorClasses(this.refs.openModalWrapper);\n        }\n    }\n    get validationValue() {\n        return this.dataValue;\n    }\n    isEmpty(value = this.dataValue) {\n        const isEmptyArray = (lodash_1.default.isArray(value) && value.length === 1) ? lodash_1.default.isEqual(value[0], this.emptyValue) : false;\n        return value == null || value.length === 0 || lodash_1.default.isEqual(value, this.emptyValue) || isEmptyArray;\n    }\n    isEqual(valueA, valueB = this.dataValue) {\n        return (this.isEmpty(valueA) && this.isEmpty(valueB)) || lodash_1.default.isEqual(valueA, valueB);\n    }\n    /**\n     * Check if a component is eligible for multiple validation\n     * @returns {boolean} - TRUE if the component is eligible for multiple validation.\n     */\n    validateMultiple() {\n        return true;\n    }\n    clearErrorClasses(element = this.element) {\n        this.removeClass(element, this.options.componentErrorClass);\n        this.removeClass(element, 'alert alert-danger');\n        this.removeClass(element, 'has-error');\n        this.removeClass(element, 'has-message');\n    }\n    setInputWidgetErrorClasses(inputRefs, hasErrors) {\n        if (!this.isInputComponent || !this.component.widget || !(inputRefs === null || inputRefs === void 0 ? void 0 : inputRefs.length)) {\n            return;\n        }\n        inputRefs.forEach((input) => {\n            if ((input === null || input === void 0 ? void 0 : input.widget) && input.widget.setErrorClasses) {\n                input.widget.setErrorClasses(hasErrors);\n            }\n        });\n    }\n    addFocusBlurEvents(element) {\n        this.addEventListener(element, 'focus', () => {\n            if (this.root.focusedComponent !== this) {\n                if (this.root.pendingBlur) {\n                    this.root.pendingBlur();\n                }\n                this.root.focusedComponent = this;\n                this.emit('focus', this);\n            }\n            else if (this.root.focusedComponent === this && this.root.pendingBlur) {\n                this.root.pendingBlur.cancel();\n                this.root.pendingBlur = null;\n            }\n        });\n        this.addEventListener(element, 'blur', () => {\n            this.root.pendingBlur = FormioUtils.delay(() => {\n                this.emit('blur', this);\n                if (this.component.validateOn === 'blur') {\n                    this.root.triggerChange({ fromBlur: true }, {\n                        instance: this,\n                        component: this.component,\n                        value: this.dataValue,\n                        flags: { fromBlur: true }\n                    });\n                }\n                this.root.focusedComponent = null;\n                this.root.pendingBlur = null;\n            });\n        });\n    }\n    // eslint-disable-next-line max-statements\n    setCustomValidity(messages, dirty, external) {\n        const inputRefs = this.isInputComponent ? this.refs.input || [] : null;\n        if (typeof messages === 'string' && messages) {\n            messages = {\n                level: 'error',\n                message: messages,\n                component: this.component,\n            };\n        }\n        if (!Array.isArray(messages)) {\n            if (messages) {\n                messages = [messages];\n            }\n            else {\n                messages = [];\n            }\n        }\n        const errors = messages.filter(message => message.level === 'error');\n        let invalidInputRefs = inputRefs;\n        // Filter the invalid input refs in multiple components\n        if (this.component.multiple) {\n            const refsArray = Array.from(inputRefs);\n            refsArray.forEach((input) => {\n                this.setElementInvalid(this.performInputMapping(input), false);\n            });\n            this.setInputWidgetErrorClasses(refsArray, false);\n            invalidInputRefs = refsArray.filter((ref, index) => {\n                var _a;\n                return (_a = messages.some) === null || _a === void 0 ? void 0 : _a.call(messages, (msg) => {\n                    var _a;\n                    return ((_a = msg === null || msg === void 0 ? void 0 : msg.context) === null || _a === void 0 ? void 0 : _a.index) === index;\n                });\n            });\n        }\n        if (messages.length) {\n            if (this.refs.messageContainer) {\n                this.empty(this.refs.messageContainer);\n            }\n            this.emit('componentError', {\n                instance: this,\n                component: this.component,\n                message: messages[0].message,\n                messages,\n                external: !!external,\n            });\n            this.addMessages(messages, dirty, invalidInputRefs);\n            if (invalidInputRefs) {\n                this.setErrorClasses(invalidInputRefs, dirty, !!errors.length, !!messages.length);\n            }\n        }\n        else if (!errors.length || (errors[0].external === !!external)) {\n            if (this.refs.messageContainer) {\n                this.empty(this.refs.messageContainer);\n            }\n            if (this.refs.modalMessageContainer) {\n                this.empty(this.refs.modalMessageContainer);\n            }\n            if (invalidInputRefs) {\n                this.setErrorClasses(invalidInputRefs, dirty, !!errors.length, !!messages.length);\n            }\n            this.clearErrorClasses();\n        }\n        this._visibleErrors = messages;\n        return messages;\n    }\n    /**\n     * Determines if the value of this component is hidden from the user as if it is coming from the server, but is\n     * protected.\n     * @returns {boolean|*} - TRUE if the value is hidden.\n     */\n    isValueHidden() {\n        if (this.component.protected && this.root.editing) {\n            return false;\n        }\n        if (!this.root || !this.root.hasOwnProperty('editing')) {\n            return false;\n        }\n        if (!this.root || !this.root.editing) {\n            return false;\n        }\n        return (this.component.protected || !this.component.persistent || (this.component.persistent === 'client-only'));\n    }\n    shouldSkipValidation(data, row, flags = {}) {\n        const rules = [\n            // Do not validate if the flags say not too.\n            () => flags.noValidate,\n            // Force valid if component is read-only\n            () => this.options.readOnly,\n            // Do not check validations if component is not an input component.\n            () => !this.hasInput,\n            // Check to see if we are editing and if so, check component persistence.\n            () => this.isValueHidden(),\n            // Force valid if component is hidden.\n            () => {\n                if (!this.component.validateWhenHidden && (!this.visible || !this.checkCondition(row, data))) {\n                    // If this component is forced valid when it is hidden, then we also need to reset the errors for this component.\n                    this._errors = [];\n                    return true;\n                }\n                return false;\n            }\n        ];\n        return rules.some(pred => pred());\n    }\n    // Maintain reverse compatibility.\n    whenReady() {\n        console.warn(this.t('whenReadyDeprecation'));\n        return this.dataReady;\n    }\n    get dataReady() {\n        return Promise.resolve();\n    }\n    /**\n     * Prints out the value of this component as a string value.\n     * @param {*} value - The value to print out.\n     * @returns {string} - The string representation of the value.\n     */\n    asString(value) {\n        value = value || this.getValue();\n        return (Array.isArray(value) ? value : [value]).map(lodash_1.default.toString).join(', ');\n    }\n    /**\n     * Return if the component is disabled.\n     * @returns {boolean} - TRUE if the component is disabled.\n     */\n    get disabled() {\n        return this._disabled || this.parentDisabled;\n    }\n    /**\n     * Disable this component.\n     * @param {boolean} disabled - TRUE to disable the component.\n     */\n    set disabled(disabled) {\n        this._disabled = disabled;\n    }\n    setDisabled(element, disabled) {\n        if (!element) {\n            return;\n        }\n        element.disabled = disabled;\n        if (disabled) {\n            element.setAttribute('disabled', 'disabled');\n        }\n        else {\n            element.removeAttribute('disabled');\n        }\n    }\n    setLoading(element, loading) {\n        if (!element || (element.loading === loading)) {\n            return;\n        }\n        element.loading = loading;\n        if (!element.loader && loading) {\n            element.loader = this.ce('i', {\n                class: `${this.iconClass('refresh', true)} button-icon-right`\n            });\n        }\n        if (element.loader) {\n            if (loading) {\n                this.appendTo(element.loader, element);\n            }\n            else {\n                this.removeChildFrom(element.loader, element);\n            }\n        }\n    }\n    selectOptions(select, tag, options, defaultValue) {\n        lodash_1.default.each(options, (option) => {\n            const attrs = {\n                value: option.value\n            };\n            if (defaultValue !== undefined && (option.value === defaultValue)) {\n                attrs.selected = 'selected';\n            }\n            const optionElement = this.ce('option', attrs);\n            optionElement.appendChild(this.text(option.label));\n            select.appendChild(optionElement);\n        });\n    }\n    setSelectValue(select, value) {\n        const options = select.querySelectorAll('option');\n        lodash_1.default.each(options, (option) => {\n            if (option.value === value) {\n                option.setAttribute('selected', 'selected');\n            }\n            else {\n                option.removeAttribute('selected');\n            }\n        });\n        if (select.onchange) {\n            select.onchange();\n        }\n        if (select.onselect) {\n            select.onselect();\n        }\n    }\n    getRelativePath(path) {\n        const keyPart = `.${this.key}`;\n        const thisPath = this.isInputComponent ? this.path\n            : this.path.slice(0).replace(keyPart, '');\n        return path.replace(thisPath, '');\n    }\n    clear() {\n        this.detach();\n        this.empty(this.getElement());\n    }\n    append(element) {\n        this.appendTo(element, this.element);\n    }\n    prepend(element) {\n        this.prependTo(element, this.element);\n    }\n    removeChild(element) {\n        this.removeChildFrom(element, this.element);\n    }\n    detachLogic() {\n        this.logic.forEach(logic => {\n            if (logic.trigger.type === 'event') {\n                const event = this.interpolate(logic.trigger.event);\n                this.off(event); // only applies to callbacks on this component\n            }\n        });\n    }\n    attachLogic() {\n        // Do not attach logic during builder mode.\n        if (this.builderMode) {\n            return;\n        }\n        this.logic.forEach((logic) => {\n            if (logic.trigger.type === 'event') {\n                const event = this.interpolate(logic.trigger.event);\n                this.on(event, (...args) => {\n                    const newComponent = (0, utils_1.fastCloneDeep)(this.originalComponent);\n                    if (this.applyActions(newComponent, logic.actions, args)) {\n                        // If component definition changed, replace it.\n                        if (!lodash_1.default.isEqual(this.component, newComponent)) {\n                            this.component = newComponent;\n                            const visible = this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden;\n                            const disabled = this.shouldDisabled;\n                            // Change states which won't be recalculated during redrawing\n                            if (this.visible !== visible) {\n                                // If the logic is triggered by an event and the action sets the hidden state then the original\n                                // component definition must be changed so that the components hidden state does not get flipped back by\n                                // the fieldLogic function\n                                this.originalComponent.hidden = !visible;\n                                this.visible = visible;\n                            }\n                            if (this.disabled !== disabled) {\n                                this.disabled = disabled;\n                            }\n                            this.redraw();\n                        }\n                    }\n                }, true);\n            }\n        });\n    }\n    /**\n     * Get the element information.\n     * @returns {*} - The components \"input\" DOM element information.\n     */\n    elementInfo() {\n        const attributes = {\n            name: this.options.name,\n            type: this.component.inputType || 'text',\n            class: 'form-control',\n            lang: this.options.language\n        };\n        if (this.component.placeholder) {\n            attributes.placeholder = this.t(this.component.placeholder, { _userInput: true });\n        }\n        if (this.component.tabindex) {\n            attributes.tabindex = this.component.tabindex;\n        }\n        if (this.disabled) {\n            attributes.disabled = 'disabled';\n        }\n        lodash_1.default.defaults(attributes, this.component.attributes);\n        return {\n            type: 'input',\n            component: this.component,\n            changeEvent: 'change',\n            attr: attributes\n        };\n    }\n    autofocus() {\n        const hasAutofocus = this.component.autofocus && !this.builderMode && !this.options.preview;\n        if (hasAutofocus) {\n            this.on('render', () => this.focus(), true);\n        }\n    }\n    scrollIntoView(element = this.element, verticalOnly) {\n        if (!element) {\n            return;\n        }\n        const { left, top } = element.getBoundingClientRect();\n        window.scrollTo(verticalOnly ? window.scrollX : left + window.scrollX, top + window.scrollY);\n    }\n    focus(index) {\n        var _a, _b, _c, _d;\n        if ('beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n        if (!index && !lodash_1.default.isNumber(index) && ((_b = (_a = this.refs) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.length)) {\n            index = this.refs.input.length - 1;\n        }\n        if ((_c = this.refs.input) === null || _c === void 0 ? void 0 : _c.length) {\n            const focusingInput = this.refs.input[index];\n            if (((_d = this.component.widget) === null || _d === void 0 ? void 0 : _d.type) === 'calendar') {\n                const sibling = focusingInput.nextSibling;\n                if (sibling) {\n                    sibling.focus();\n                }\n            }\n            else {\n                focusingInput.focus();\n            }\n        }\n        if (this.refs.openModal) {\n            this.refs.openModal.focus();\n        }\n        if (this.parent.refs.openModal) {\n            this.parent.refs.openModal.focus();\n        }\n    }\n    /**\n     * Get `Formio` instance for working with files\n     * @returns {import('@formio/core').Formio} - The Formio instance file service.\n     */\n    get fileService() {\n        if (this.options.fileService) {\n            return this.options.fileService;\n        }\n        if (this.options.formio) {\n            return this.options.formio;\n        }\n        if (this.root && this.root.formio) {\n            return this.root.formio;\n        }\n        const formio = new Formio_1.Formio();\n        // If a form is loaded, then make sure to set the correct formUrl.\n        if (this.root && this.root._form && this.root._form._id) {\n            formio.formUrl = `${formio.projectUrl}/form/${this.root._form._id}`;\n        }\n        return formio;\n    }\n    resetCaches() { }\n    get previewMode() {\n        return false;\n    }\n}\nexports[\"default\"] = Component;\nComponent.externalLibraries = {};\nComponent.requireLibrary = function (name, property, src, polling) {\n    if (!Component.externalLibraries.hasOwnProperty(name)) {\n        Component.externalLibraries[name] = {};\n        Component.externalLibraries[name].ready = new Promise((resolve, reject) => {\n            Component.externalLibraries[name].resolve = resolve;\n            Component.externalLibraries[name].reject = reject;\n        });\n        const callbackName = `${name}Callback`;\n        if (!polling && !window[callbackName]) {\n            window[callbackName] = function () {\n                this.resolve();\n            }.bind(Component.externalLibraries[name]);\n        }\n        // See if the plugin already exists.\n        const plugin = (0, utils_1.getScriptPlugin)(property);\n        if (plugin) {\n            Component.externalLibraries[name].resolve(plugin);\n        }\n        else {\n            src = Array.isArray(src) ? src : [src];\n            src.forEach((lib) => {\n                let attrs = {};\n                let elementType = '';\n                if (typeof lib === 'string') {\n                    lib = {\n                        type: 'script',\n                        src: lib\n                    };\n                }\n                switch (lib.type) {\n                    case 'script':\n                        elementType = 'script';\n                        attrs = {\n                            src: lib.src,\n                            type: 'text/javascript',\n                            defer: true,\n                            async: true\n                        };\n                        break;\n                    case 'styles':\n                        elementType = 'link';\n                        attrs = {\n                            href: lib.src,\n                            rel: 'stylesheet'\n                        };\n                        break;\n                }\n                // Add the script to the top page.\n                const script = document.createElement(elementType);\n                for (const attr in attrs) {\n                    script.setAttribute(attr, attrs[attr]);\n                }\n                document.getElementsByTagName('head')[0].appendChild(script);\n            });\n            // if no callback is provided, then check periodically for the script.\n            if (polling) {\n                setTimeout(function checkLibrary() {\n                    const plugin = (0, utils_1.getScriptPlugin)(property);\n                    if (plugin) {\n                        Component.externalLibraries[name].resolve(plugin);\n                    }\n                    else {\n                        // check again after 200 ms.\n                        setTimeout(checkLibrary, 200);\n                    }\n                }, 200);\n            }\n        }\n    }\n    return Component.externalLibraries[name].ready;\n};\nComponent.libraryReady = function (name) {\n    if (Component.externalLibraries.hasOwnProperty(name) &&\n        Component.externalLibraries[name].ready) {\n        return Component.externalLibraries[name].ready;\n    }\n    return Promise.reject(`${name} library was not required.`);\n};\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/component/Component.js?");
 
 /***/ }),
 
@@ -4875,7 +4875,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst utils_1 = __importDefault(__webpack_require__(/*! ./utils */ \"./lib/cjs/components/_classes/component/editForm/utils.js\"));\nconst utils_2 = __webpack_require__(/*! ../../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\n/* eslint-disable quotes, max-len */\nexports[\"default\"] = [\n    {\n        type: 'panel',\n        title: 'Simple',\n        key: 'simple-conditional',\n        theme: 'default',\n        weight: 105,\n        components: [\n            {\n                type: 'select',\n                input: true,\n                label: 'This component should Display:',\n                key: 'conditional.show',\n                dataSrc: 'values',\n                data: {\n                    values: [\n                        { label: 'True', value: 'true' },\n                        { label: 'False', value: 'false' }\n                    ]\n                }\n            },\n            {\n                type: 'select',\n                input: true,\n                label: 'When the form component:',\n                key: 'conditional.when',\n                dataSrc: 'custom',\n                valueProperty: 'value',\n                data: {\n                    custom(context) {\n                        return (0, utils_2.getContextComponents)(context);\n                    }\n                }\n            },\n            {\n                type: 'textfield',\n                input: true,\n                label: 'Has the value:',\n                key: 'conditional.eq'\n            }\n        ]\n    },\n    utils_1.default.javaScriptValue('Advanced Conditions', 'customConditional', 'conditional.json', 110, '<p>You must assign the <strong>show</strong> variable a boolean result.</p>' +\n        '<p><strong>Note: Advanced Conditional logic will override the results of the Simple Conditional logic.</strong></p>' +\n        '<h5>Example</h5><pre>show = !!data.showMe;</pre>', '<p><a href=\"https://help.form.io/userguide/form-building/logic-and-conditions\" target=\"_blank\" rel=\"noopener noreferrer\">Click here for an example</a></p>')\n];\n/* eslint-enable quotes, max-len */\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/component/editForm/Component.edit.conditional.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 = __importDefault(__webpack_require__(/*! ./utils */ \"./lib/cjs/components/_classes/component/editForm/utils.js\"));\nconst utils_2 = __webpack_require__(/*! ../../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\n/* eslint-disable quotes, max-len */\nexports[\"default\"] = [\n    {\n        type: 'panel',\n        title: 'Simple',\n        key: 'simple-conditional',\n        theme: 'default',\n        weight: 105,\n        components: [\n            {\n                type: 'select',\n                input: true,\n                label: 'This component should Display:',\n                key: 'conditional.show',\n                dataSrc: 'values',\n                data: {\n                    values: [\n                        { label: 'True', value: 'true' },\n                        { label: 'False', value: 'false' }\n                    ]\n                }\n            },\n            {\n                type: 'select',\n                input: true,\n                label: 'When the form component:',\n                key: 'conditional.when',\n                dataSrc: 'custom',\n                valueProperty: 'value',\n                data: {\n                    custom(context) {\n                        return (0, utils_2.getContextComponents)(context);\n                    }\n                }\n            },\n            {\n                type: 'textfield',\n                input: true,\n                label: 'Has the value:',\n                key: 'conditional.eq'\n            }\n        ]\n    },\n    utils_1.default.javaScriptValue('Advanced Conditions', 'customConditional', 'conditional.json', 110, '<p>You must assign the <strong>show</strong> variable a boolean result.</p>' +\n        '<p><strong>Note: Advanced Conditional logic will override the results of the Simple Conditional logic.</strong></p>' +\n        '<h5>Example</h5><pre>show = !!data.showMe;</pre>', '<p><a href=\"https://help.form.io/userguide/form-building/logic-and-conditions\" target=\"_blank\" rel=\"noopener noreferrer\">Click here for an example</a></p>', utils_1.default.tokenVariableDescription())\n];\n/* eslint-enable quotes, max-len */\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/component/editForm/Component.edit.conditional.js?");
 
 /***/ }),
 
@@ -4886,7 +4886,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 = __importDefault(__webpack_require__(/*! ./utils */ \"./lib/cjs/components/_classes/component/editForm/utils.js\"));\n/* eslint-disable max-len */\nexports[\"default\"] = [\n    {\n        weight: 0,\n        type: 'checkbox',\n        label: 'Multiple Values',\n        tooltip: 'Allows multiple values to be entered for this field.',\n        key: 'multiple',\n        input: true\n    },\n    {\n        type: 'textfield',\n        label: 'Default Value',\n        key: 'defaultValue',\n        weight: 5,\n        placeholder: 'Default Value',\n        tooltip: 'The Default Value will be the value for this field, before user interaction. Having a default value will override the placeholder text.',\n        input: true\n    },\n    {\n        weight: 30,\n        type: 'radio',\n        label: 'Persistent',\n        tooltip: 'A persistent field will be stored in database when the form is submitted.',\n        key: 'persistent',\n        input: true,\n        inline: true,\n        defaultValue: true,\n        values: [\n            { label: 'None', value: false },\n            { label: 'Server', value: true },\n            { label: 'Client', value: 'client-only' },\n        ]\n    },\n    {\n        weight: 150,\n        type: 'checkbox',\n        label: 'Protected',\n        tooltip: 'A protected field will not be returned when queried via API.',\n        key: 'protected',\n        input: true\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 200,\n        key: 'dbIndex',\n        label: 'Database Index',\n        tooltip: 'Set this field as an index within the database. Increases performance for submission queries.'\n    },\n    {\n        weight: 400,\n        type: 'checkbox',\n        label: 'Encrypted',\n        tooltip: 'Encrypt this field on the server. This is two way encryption which is not suitable for passwords.',\n        key: 'encrypted',\n        input: true,\n        logic: [\n            {\n                name: 'disabled',\n                trigger: {\n                    type: 'javascript',\n                    javascript: 'result = !instance.root.options.sac;'\n                },\n                actions: [\n                    {\n                        name: 'disabled',\n                        type: 'property',\n                        property: {\n                            label: 'Disabled',\n                            value: 'disabled',\n                            type: 'boolean'\n                        },\n                        state: true\n                    }\n                ]\n            },\n            {\n                name: 'disabledToolTip',\n                trigger: {\n                    type: 'javascript',\n                    javascript: 'result = !instance.root.options.sac;'\n                },\n                actions: [\n                    {\n                        name: 'addDisabledTooltip',\n                        type: 'property',\n                        property: {\n                            label: 'Tooltip',\n                            value: 'tooltip',\n                            type: 'string'\n                        },\n                        text: 'Only available with Security Module. Contact sales@form.io for more information.'\n                    }\n                ]\n            }\n        ]\n    },\n    {\n        type: 'select',\n        input: true,\n        key: 'redrawOn',\n        label: 'Redraw On',\n        weight: 600,\n        tooltip: 'Redraw this component if another component changes. This is useful if interpolating parts of the component like the label.',\n        dataSrc: 'custom',\n        valueProperty: 'value',\n        data: {\n            custom(context) {\n                var values = [];\n                values.push({ label: 'Any Change', value: 'data' });\n                context.utils.eachComponent(context.instance.options.editForm.components, function (component, path) {\n                    if (component.key !== context.data.key) {\n                        values.push({\n                            label: component.label || component.key,\n                            value: path\n                        });\n                    }\n                });\n                return values;\n            }\n        },\n        conditional: {\n            json: { '!': [{ var: 'data.dataSrc' }] },\n        },\n    },\n    {\n        weight: 700,\n        type: 'checkbox',\n        label: 'Omit Value From Submission Data When Conditionally Hidden',\n        key: 'clearOnHide',\n        defaultValue: true,\n        tooltip: 'When a field is conditionally hidden, omit the value from the submission data.',\n        input: true\n    },\n    utils_1.default.javaScriptValue('Custom Default Value', 'customDefaultValue', 'customDefaultValue', 1000, '<p><h4>Example:</h4><pre>value = data.firstName + \" \" + data.lastName;</pre></p>', '<p><h4>Example:</h4><pre>{\"cat\": [{\"var\": \"data.firstName\"}, \" \", {\"var\": \"data.lastName\"}]}</pre>'),\n    utils_1.default.javaScriptValue('Calculated Value', 'calculateValue', 'calculateValue', 1100, '<p><h4>Example:</h4><pre>value = data.a + data.b + data.c;</pre></p>', '<p><h4>Example:</h4><pre>{\"+\": [{\"var\": \"data.a\"}, {\"var\": \"data.b\"}, {\"var\": \"data.c\"}]}</pre><p><a href=\"https://help.form.io/userguide/form-building/logic-and-conditions#calculated-values\" target=\"_blank\" rel=\"noopener noreferrer\">Click here for an example</a></p>', '<tr><th>token</th><td>The decoded JWT token for the authenticated user.</td></tr>'),\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 1100,\n        key: 'calculateServer',\n        label: 'Calculate Value on server',\n        tooltip: 'Checking this will run the calculation on the server. This is useful if you wish to override the values submitted with the calculations performed on the server.'\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 1200,\n        key: 'allowCalculateOverride',\n        label: 'Allow Manual Override of Calculated Value',\n        tooltip: 'When checked, this will allow the user to manually override the calculated value.'\n    },\n];\n/* eslint-enable max-len */\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/component/editForm/Component.edit.data.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 = __importDefault(__webpack_require__(/*! ./utils */ \"./lib/cjs/components/_classes/component/editForm/utils.js\"));\n/* eslint-disable max-len */\nexports[\"default\"] = [\n    {\n        weight: 0,\n        type: 'checkbox',\n        label: 'Multiple Values',\n        tooltip: 'Allows multiple values to be entered for this field.',\n        key: 'multiple',\n        input: true\n    },\n    {\n        type: 'textfield',\n        label: 'Default Value',\n        key: 'defaultValue',\n        weight: 5,\n        placeholder: 'Default Value',\n        tooltip: 'The Default Value will be the value for this field, before user interaction. Having a default value will override the placeholder text.',\n        input: true\n    },\n    {\n        weight: 30,\n        type: 'radio',\n        label: 'Persistent',\n        tooltip: 'A persistent field will be stored in database when the form is submitted.',\n        key: 'persistent',\n        input: true,\n        inline: true,\n        defaultValue: true,\n        values: [\n            { label: 'None', value: false },\n            { label: 'Server', value: true },\n            { label: 'Client', value: 'client-only' },\n        ]\n    },\n    {\n        weight: 150,\n        type: 'checkbox',\n        label: 'Protected',\n        tooltip: 'A protected field will not be returned when queried via API.',\n        key: 'protected',\n        input: true\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 200,\n        key: 'dbIndex',\n        label: 'Database Index',\n        tooltip: 'Set this field as an index within the database. Increases performance for submission queries.'\n    },\n    {\n        weight: 400,\n        type: 'checkbox',\n        label: 'Encrypted',\n        tooltip: 'Encrypt this field on the server. This is two way encryption which is not suitable for passwords.',\n        key: 'encrypted',\n        input: true,\n        logic: [\n            {\n                name: 'disabled',\n                trigger: {\n                    type: 'javascript',\n                    javascript: 'result = !instance.root.options.sac;'\n                },\n                actions: [\n                    {\n                        name: 'disabled',\n                        type: 'property',\n                        property: {\n                            label: 'Disabled',\n                            value: 'disabled',\n                            type: 'boolean'\n                        },\n                        state: true\n                    }\n                ]\n            },\n            {\n                name: 'disabledToolTip',\n                trigger: {\n                    type: 'javascript',\n                    javascript: 'result = !instance.root.options.sac;'\n                },\n                actions: [\n                    {\n                        name: 'addDisabledTooltip',\n                        type: 'property',\n                        property: {\n                            label: 'Tooltip',\n                            value: 'tooltip',\n                            type: 'string'\n                        },\n                        text: 'Only available with Security Module. Contact sales@form.io for more information.'\n                    }\n                ]\n            }\n        ]\n    },\n    {\n        type: 'select',\n        input: true,\n        key: 'redrawOn',\n        label: 'Redraw On',\n        weight: 600,\n        tooltip: 'Redraw this component if another component changes. This is useful if interpolating parts of the component like the label.',\n        dataSrc: 'custom',\n        valueProperty: 'value',\n        data: {\n            custom(context) {\n                var values = [];\n                values.push({ label: 'Any Change', value: 'data' });\n                context.utils.eachComponent(context.instance.options.editForm.components, function (component, path) {\n                    if (component.key !== context.data.key) {\n                        values.push({\n                            label: component.label || component.key,\n                            value: path\n                        });\n                    }\n                });\n                return values;\n            }\n        },\n        conditional: {\n            json: { '!': [{ var: 'data.dataSrc' }] },\n        },\n    },\n    {\n        weight: 700,\n        type: 'checkbox',\n        label: 'Omit Value From Submission Data When Conditionally Hidden',\n        key: 'clearOnHide',\n        defaultValue: true,\n        tooltip: 'When a field is conditionally hidden, omit the value from the submission data.',\n        input: true\n    },\n    utils_1.default.javaScriptValue('Custom Default Value', 'customDefaultValue', 'customDefaultValue', 1000, '<p><h4>Example:</h4><pre>value = data.firstName + \" \" + data.lastName;</pre></p>', '<p><h4>Example:</h4><pre>{\"cat\": [{\"var\": \"data.firstName\"}, \" \", {\"var\": \"data.lastName\"}]}</pre>'),\n    utils_1.default.javaScriptValue('Calculated Value', 'calculateValue', 'calculateValue', 1100, '<p><h4>Example:</h4><pre>value = data.a + data.b + data.c;</pre></p>', '<p><h4>Example:</h4><pre>{\"+\": [{\"var\": \"data.a\"}, {\"var\": \"data.b\"}, {\"var\": \"data.c\"}]}</pre><p><a href=\"https://help.form.io/userguide/form-building/logic-and-conditions#calculated-values\" target=\"_blank\" rel=\"noopener noreferrer\">Click here for an example</a></p>', utils_1.default.tokenVariableDescription()),\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 1100,\n        key: 'calculateServer',\n        label: 'Calculate Value on server',\n        tooltip: 'Checking this will run the calculation on the server. This is useful if you wish to override the values submitted with the calculations performed on the server.'\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 1200,\n        key: 'allowCalculateOverride',\n        label: 'Allow Manual Override of Calculated Value',\n        tooltip: 'When checked, this will allow the user to manually override the calculated value.'\n    },\n    {\n        type: 'textarea',\n        as: 'json',\n        editor: 'ace',\n        weight: 1400,\n        input: true,\n        key: 'serverOverride',\n        label: 'Server Override',\n        tooltip: 'A JSON object containing the component settings that should be overriden when the form submission is processed on the server side.',\n        defaultValue: {},\n        description: '<b>Example</b>: { \"clearOnHide\": true }',\n    }\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/component/editForm/Component.edit.data.js?");
 
 /***/ }),
 
@@ -4941,7 +4941,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 Evaluator_1 = __webpack_require__(/*! ../../../../utils/Evaluator */ \"./lib/cjs/utils/Evaluator.js\");\nconst EditFormUtils = {\n    sortAndFilterComponents(components) {\n        return lodash_1.default.filter(lodash_1.default.sortBy(components, 'weight'), (item) => !item.ignore);\n    },\n    unifyComponents(objValue, srcValue) {\n        if (objValue.key && srcValue.key) {\n            if (objValue.skipMerge || srcValue.skipMerge) {\n                return false;\n            }\n            if (objValue.key === srcValue.key) {\n                // Create complete objects by including missing keys.\n                lodash_1.default.each(objValue, (value, prop) => {\n                    if (objValue.overrideEditForm || !srcValue.hasOwnProperty(prop)) {\n                        srcValue[prop] = value;\n                    }\n                });\n                lodash_1.default.each(srcValue, (value, prop) => {\n                    if (srcValue.overrideEditForm || !objValue.hasOwnProperty(prop)) {\n                        objValue[prop] = value;\n                    }\n                });\n                if (objValue.components) {\n                    srcValue.components = EditFormUtils.sortAndFilterComponents(lodash_1.default.unionWith(objValue.components, srcValue.components, EditFormUtils.unifyComponents));\n                }\n                return true;\n            }\n            else {\n                return false;\n            }\n        }\n        return lodash_1.default.isEqual(objValue, srcValue);\n    },\n    logicVariablesTable(additional) {\n        additional = additional || '';\n        return {\n            type: 'htmlelement',\n            tag: 'div',\n            /* eslint-disable prefer-template */\n            content: '<p>The following variables are available in all scripts.</p>' +\n                '<table class=\"table table-bordered table-condensed table-striped\">' +\n                additional +\n                '<tr><th>form</th><td>The complete form JSON object</td></tr>' +\n                '<tr><th>submission</th><td>The complete submission object.</td></tr>' +\n                '<tr><th>data</th><td>The complete submission data object.</td></tr>' +\n                '<tr><th>row</th><td>Contextual \"row\" data, used within DataGrid, EditGrid, and Container components</td></tr>' +\n                '<tr><th>component</th><td>The current component JSON</td></tr>' +\n                '<tr><th>instance</th><td>The current component instance.</td></tr>' +\n                '<tr><th>value</th><td>The current value of the component.</td></tr>' +\n                '<tr><th>moment</th><td>The moment.js library for date manipulation.</td></tr>' +\n                '<tr><th>_</th><td>An instance of <a href=\"https://lodash.com/docs/\" target=\"_blank\" rel=\"noopener noreferrer\">Lodash</a>.</td></tr>' +\n                '<tr><th>utils</th><td>An instance of the <a href=\"https://help.form.io/developers/javascript-development/javascript-utilities\" target=\"_blank\" rel=\"noopener noreferrer\">FormioUtils</a> object.</td></tr>' +\n                '<tr><th>util</th><td>An alias for \"utils\".</td></tr>' +\n                '</table><br/>'\n            /* eslint-enable prefer-template */\n        };\n    },\n    javaScriptValue(title, property, propertyJSON, weight, exampleHTML, exampleJSON, additionalParams = '', excludeJSONLogic) {\n        const components = [\n            this.logicVariablesTable(additionalParams),\n            {\n                type: 'panel',\n                title: 'JavaScript',\n                collapsible: true,\n                collapsed: false,\n                style: { 'margin-bottom': '10px' },\n                key: `${property}-js`,\n                customConditional() {\n                    return !Evaluator_1.Evaluator.noeval || Evaluator_1.Evaluator.protectedEval;\n                },\n                components: [\n                    {\n                        type: 'textarea',\n                        key: property,\n                        rows: 5,\n                        editor: 'ace',\n                        hideLabel: true,\n                        as: 'javascript',\n                        input: true\n                    },\n                    {\n                        type: 'htmlelement',\n                        tag: 'div',\n                        content: `<p>Enter custom javascript code.</p>${exampleHTML}`\n                    }\n                ]\n            },\n            {\n                type: 'panel',\n                title: 'JSONLogic',\n                collapsible: true,\n                collapsed: true,\n                key: `${property}-json`,\n                components: [\n                    {\n                        type: 'htmlelement',\n                        tag: 'div',\n                        /* eslint-disable prefer-template */\n                        content: '<p>Execute custom logic using <a href=\"http://jsonlogic.com/\" target=\"_blank\" rel=\"noopener noreferrer\">JSONLogic</a>.</p>' +\n                            '<p>Full <a href=\"https://lodash.com/docs\" target=\"_blank\" rel=\"noopener noreferrer\">Lodash</a> support is provided using an \"_\" before each operation, such as <code>{\"_sum\": {var: \"data.a\"}}</code></p>' +\n                            exampleJSON\n                        /* eslint-enable prefer-template */\n                    },\n                    {\n                        type: 'textarea',\n                        key: propertyJSON,\n                        rows: 5,\n                        editor: 'ace',\n                        hideLabel: true,\n                        as: 'json',\n                        input: true\n                    }\n                ]\n            }\n        ];\n        if (excludeJSONLogic) {\n            components.splice(2, 1);\n        }\n        return {\n            type: 'panel',\n            title: title,\n            theme: 'default',\n            collapsible: true,\n            collapsed: true,\n            key: `${property}Panel`,\n            weight: weight,\n            components\n        };\n    }\n};\nexports[\"default\"] = EditFormUtils;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/component/editForm/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 }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Evaluator_1 = __webpack_require__(/*! ../../../../utils/Evaluator */ \"./lib/cjs/utils/Evaluator.js\");\nconst EditFormUtils = {\n    sortAndFilterComponents(components) {\n        return lodash_1.default.filter(lodash_1.default.sortBy(components, 'weight'), (item) => !item.ignore);\n    },\n    unifyComponents(objValue, srcValue) {\n        if (objValue.key && srcValue.key) {\n            if (objValue.skipMerge || srcValue.skipMerge) {\n                return false;\n            }\n            if (objValue.key === srcValue.key) {\n                // Create complete objects by including missing keys.\n                lodash_1.default.each(objValue, (value, prop) => {\n                    if (objValue.overrideEditForm || !srcValue.hasOwnProperty(prop)) {\n                        srcValue[prop] = value;\n                    }\n                });\n                lodash_1.default.each(srcValue, (value, prop) => {\n                    if (srcValue.overrideEditForm || !objValue.hasOwnProperty(prop)) {\n                        objValue[prop] = value;\n                    }\n                });\n                if (objValue.components) {\n                    srcValue.components = EditFormUtils.sortAndFilterComponents(lodash_1.default.unionWith(objValue.components, srcValue.components, EditFormUtils.unifyComponents));\n                }\n                return true;\n            }\n            else {\n                return false;\n            }\n        }\n        return lodash_1.default.isEqual(objValue, srcValue);\n    },\n    tokenVariableDescription() {\n        return '<tr><th>token</th><td>The decoded JWT token for the authenticated user.</td></tr>';\n    },\n    logicVariablesTable(additional) {\n        additional = additional || '';\n        return {\n            type: 'htmlelement',\n            tag: 'div',\n            /* eslint-disable prefer-template */\n            content: '<p>The following variables are available in all scripts.</p>' +\n                '<table class=\"table table-bordered table-condensed table-striped\">' +\n                additional +\n                '<tr><th>form</th><td>The complete form JSON object</td></tr>' +\n                '<tr><th>submission</th><td>The complete submission object.</td></tr>' +\n                '<tr><th>data</th><td>The complete submission data object.</td></tr>' +\n                '<tr><th>row</th><td>Contextual \"row\" data, used within DataGrid, EditGrid, and Container components</td></tr>' +\n                '<tr><th>component</th><td>The current component JSON</td></tr>' +\n                '<tr><th>instance</th><td>The current component instance.</td></tr>' +\n                '<tr><th>value</th><td>The current value of the component.</td></tr>' +\n                '<tr><th>moment</th><td>The moment.js library for date manipulation.</td></tr>' +\n                '<tr><th>_</th><td>An instance of <a href=\"https://lodash.com/docs/\" target=\"_blank\" rel=\"noopener noreferrer\">Lodash</a>.</td></tr>' +\n                '<tr><th>utils</th><td>An instance of the <a href=\"https://help.form.io/developers/javascript-development/javascript-utilities\" target=\"_blank\" rel=\"noopener noreferrer\">FormioUtils</a> object.</td></tr>' +\n                '<tr><th>util</th><td>An alias for \"utils\".</td></tr>' +\n                '</table><br/>'\n            /* eslint-enable prefer-template */\n        };\n    },\n    javaScriptValue(title, property, propertyJSON, weight, exampleHTML, exampleJSON, additionalParams = '', excludeJSONLogic) {\n        const components = [\n            this.logicVariablesTable(additionalParams),\n            {\n                type: 'panel',\n                title: 'JavaScript',\n                collapsible: true,\n                collapsed: false,\n                style: { 'margin-bottom': '10px' },\n                key: `${property}-js`,\n                customConditional() {\n                    return !Evaluator_1.Evaluator.noeval || Evaluator_1.Evaluator.protectedEval;\n                },\n                components: [\n                    {\n                        type: 'textarea',\n                        key: property,\n                        rows: 5,\n                        editor: 'ace',\n                        hideLabel: true,\n                        as: 'javascript',\n                        input: true\n                    },\n                    {\n                        type: 'htmlelement',\n                        tag: 'div',\n                        content: `<p>Enter custom javascript code.</p>${exampleHTML}`\n                    }\n                ]\n            },\n            {\n                type: 'panel',\n                title: 'JSONLogic',\n                collapsible: true,\n                collapsed: true,\n                key: `${property}-json`,\n                components: [\n                    {\n                        type: 'htmlelement',\n                        tag: 'div',\n                        /* eslint-disable prefer-template */\n                        content: '<p>Execute custom logic using <a href=\"http://jsonlogic.com/\" target=\"_blank\" rel=\"noopener noreferrer\">JSONLogic</a>.</p>' +\n                            '<p>Full <a href=\"https://lodash.com/docs\" target=\"_blank\" rel=\"noopener noreferrer\">Lodash</a> support is provided using an \"_\" before each operation, such as <code>{\"_sum\": {var: \"data.a\"}}</code></p>' +\n                            exampleJSON\n                        /* eslint-enable prefer-template */\n                    },\n                    {\n                        type: 'textarea',\n                        key: propertyJSON,\n                        rows: 5,\n                        editor: 'ace',\n                        hideLabel: true,\n                        as: 'json',\n                        input: true\n                    }\n                ]\n            }\n        ];\n        if (excludeJSONLogic) {\n            components.splice(2, 1);\n        }\n        return {\n            type: 'panel',\n            title: title,\n            theme: 'default',\n            collapsible: true,\n            collapsed: true,\n            key: `${property}Panel`,\n            weight: weight,\n            components\n        };\n    }\n};\nexports[\"default\"] = EditFormUtils;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/component/editForm/utils.js?");
 
 /***/ }),
 
@@ -5029,7 +5029,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Component_1 = __importDefault(__webpack_require__(/*! ../component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst NestedComponent_1 = __importDefault(__webpack_require__(/*! ../nested/NestedComponent */ \"./lib/cjs/components/_classes/nested/NestedComponent.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass NestedDataComponent extends NestedComponent_1.default {\n    hasChanged(newValue, oldValue) {\n        // If we do not have a value and are getting set to anything other than undefined or null, then we changed.\n        if (newValue !== undefined &&\n            newValue !== null &&\n            !this.hasValue()) {\n            return true;\n        }\n        return !lodash_1.default.isEqual(newValue, oldValue);\n    }\n    static savedValueTypes(schema) {\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];\n    }\n    get allowData() {\n        return true;\n    }\n    get emptyValue() {\n        return {};\n    }\n    componentContext() {\n        return this.dataValue;\n    }\n    getValueAsString(value, options) {\n        if (options === null || options === void 0 ? void 0 : options.email) {\n            let result = (`\n        <table border=\"1\" style=\"width:100%\">\n          <tbody>\n      `);\n            this.everyComponent((component) => {\n                if (component.isInputComponent && component.visible && !component.skipInEmail) {\n                    result += (`\n            <tr>\n              <th style=\"padding: 5px 10px;\">${component.label}</th>\n              <td style=\"width:100%;padding:5px 10px;\">${component.getView(component.dataValue, options)}</td>\n            </tr>\n          `);\n                }\n            }, Object.assign(Object.assign({}, options), { fromRoot: true }));\n            result += (`\n          </tbody>\n        </table>\n      `);\n            return result;\n        }\n        if (lodash_1.default.isEmpty(value)) {\n            return '';\n        }\n        if (options === null || options === void 0 ? void 0 : options.modalPreview) {\n            delete options.modalPreview;\n            return this.getDataValueAsTable(value, options);\n        }\n        return '[Complex Data]';\n    }\n    getDataValueAsTable(value, options) {\n        let result = (`\n      <table border=\"1\" style=\"width:100%\">\n        <tbody>\n    `);\n        const htmlTagRegExp = new RegExp('<(.*?)>');\n        this.everyComponent((component) => {\n            if (component.isInputComponent && component.visible && !component.skipInEmail) {\n                const componentValue = component.getView(component.dataValue, options);\n                result += (`\n          <tr>\n            <th style=\"padding: 5px 10px;\">${component.label}</th>\n            <td style=\"width:100%;padding:5px 10px;\">${component.component && component.component.inputFormat === 'html' && htmlTagRegExp.test(componentValue)\n                    ? componentValue\n                    : `<input type=\"text\" value=\"${componentValue.replace(/\"/g, '&quot;')}\" readonly/>`}</td>\n          </tr>\n        `);\n            }\n        }, Object.assign(Object.assign({}, options), { fromRoot: true }));\n        result += (`\n        </tbody>\n      </table>\n    `);\n        return result;\n    }\n    everyComponent(fn, options = {}) {\n        if (options === null || options === void 0 ? void 0 : options.email) {\n            if (options.fromRoot) {\n                delete options.fromRoot;\n            }\n            else {\n                return;\n            }\n        }\n        return super.everyComponent(fn, options);\n    }\n    /**\n     * Get the value of this component.\n     * @returns {any} - Return the value of this component.\n     */\n    getValue() {\n        return this.dataValue;\n    }\n    updateValue(value, flags = {}) {\n        // Intentionally skip over nested component updateValue method to keep\n        // recursive update from occurring with sub components.\n        return Component_1.default.prototype.updateValue.call(this, value, flags);\n    }\n    setValue(value, flags = {}) {\n        let changed = false;\n        const hasValue = this.hasValue();\n        if (hasValue && lodash_1.default.isEmpty(this.dataValue)) {\n            flags.noValidate = true;\n        }\n        if (!value || !lodash_1.default.isObject(value) || !hasValue) {\n            changed = true;\n            this.dataValue = this.defaultValue;\n        }\n        changed = super.setValue(value, flags) || changed;\n        this.updateOnChange(flags, changed);\n        return changed;\n    }\n}\nexports[\"default\"] = NestedDataComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/nesteddata/NestedDataComponent.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Component_1 = __importDefault(__webpack_require__(/*! ../component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst NestedComponent_1 = __importDefault(__webpack_require__(/*! ../nested/NestedComponent */ \"./lib/cjs/components/_classes/nested/NestedComponent.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass NestedDataComponent extends NestedComponent_1.default {\n    hasChanged(newValue, oldValue) {\n        // If we do not have a value and are getting set to anything other than undefined or null, then we changed.\n        if (newValue !== undefined &&\n            newValue !== null &&\n            !this.hasValue()) {\n            return true;\n        }\n        return !lodash_1.default.isEqual(newValue, oldValue);\n    }\n    static savedValueTypes(schema) {\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];\n    }\n    get allowData() {\n        return true;\n    }\n    get emptyValue() {\n        return {};\n    }\n    get shouldAddDefaultValue() {\n        return !this.options.noDefaults || !this.options.server;\n    }\n    componentContext() {\n        return this.dataValue;\n    }\n    getValueAsString(value, options) {\n        if (options === null || options === void 0 ? void 0 : options.email) {\n            let result = (`\n        <table border=\"1\" style=\"width:100%\">\n          <tbody>\n      `);\n            this.everyComponent((component) => {\n                if (component.isInputComponent && component.visible && !component.skipInEmail) {\n                    result += (`\n            <tr>\n              <th style=\"padding: 5px 10px;\">${component.label}</th>\n              <td style=\"width:100%;padding:5px 10px;\">${component.getView(component.dataValue, options)}</td>\n            </tr>\n          `);\n                }\n            }, Object.assign(Object.assign({}, options), { fromRoot: true }));\n            result += (`\n          </tbody>\n        </table>\n      `);\n            return result;\n        }\n        if (lodash_1.default.isEmpty(value)) {\n            return '';\n        }\n        if (options === null || options === void 0 ? void 0 : options.modalPreview) {\n            delete options.modalPreview;\n            return this.getDataValueAsTable(value, options);\n        }\n        return '[Complex Data]';\n    }\n    getDataValueAsTable(value, options) {\n        let result = (`\n      <table border=\"1\" style=\"width:100%\">\n        <tbody>\n    `);\n        const htmlTagRegExp = new RegExp('<(.*?)>');\n        this.everyComponent((component) => {\n            if (component.isInputComponent && component.visible && !component.skipInEmail) {\n                const componentValue = component.getView(component.dataValue, options);\n                result += (`\n          <tr>\n            <th style=\"padding: 5px 10px;\">${component.label}</th>\n            <td style=\"width:100%;padding:5px 10px;\">${component.component && component.component.inputFormat === 'html' && htmlTagRegExp.test(componentValue)\n                    ? componentValue\n                    : `<input type=\"text\" value=\"${componentValue.replace(/\"/g, '&quot;')}\" readonly/>`}</td>\n          </tr>\n        `);\n            }\n        }, Object.assign(Object.assign({}, options), { fromRoot: true }));\n        result += (`\n        </tbody>\n      </table>\n    `);\n        return result;\n    }\n    everyComponent(fn, options = {}) {\n        if (options === null || options === void 0 ? void 0 : options.email) {\n            if (options.fromRoot) {\n                delete options.fromRoot;\n            }\n            else {\n                return;\n            }\n        }\n        return super.everyComponent(fn, options);\n    }\n    /**\n     * Get the value of this component.\n     * @returns {any} - Return the value of this component.\n     */\n    getValue() {\n        return this.dataValue;\n    }\n    updateValue(value, flags = {}) {\n        // Intentionally skip over nested component updateValue method to keep\n        // recursive update from occurring with sub components.\n        return Component_1.default.prototype.updateValue.call(this, value, flags);\n    }\n    setValue(value, flags = {}) {\n        let changed = false;\n        const hasValue = this.hasValue();\n        if (hasValue && lodash_1.default.isEmpty(this.dataValue)) {\n            flags.noValidate = true;\n        }\n        if (!value || !lodash_1.default.isObject(value) || !hasValue) {\n            changed = true;\n            this.dataValue = this.defaultValue;\n        }\n        changed = super.setValue(value, flags) || changed;\n        this.updateOnChange(flags, changed);\n        return changed;\n    }\n}\nexports[\"default\"] = NestedDataComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/nesteddata/NestedDataComponent.js?");
 
 /***/ }),
 
@@ -5150,7 +5150,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst utils_1 = __importDefault(__webpack_require__(/*! ../../utils */ \"./lib/cjs/utils/index.js\"));\nconst utils_2 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nclass DateTimeComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            type: 'datetime',\n            label: 'Date / Time',\n            key: 'dateTime',\n            format: 'yyyy-MM-dd hh:mm a',\n            useLocaleSettings: false,\n            allowInput: true,\n            enableDate: true,\n            enableTime: true,\n            defaultValue: '',\n            defaultDate: '',\n            displayInTimezone: 'viewer',\n            timezone: '',\n            datepickerMode: 'day',\n            datePicker: {\n                showWeeks: true,\n                startingDay: 0,\n                initDate: '',\n                minMode: 'day',\n                maxMode: 'year',\n                yearRows: 4,\n                yearColumns: 5,\n                minDate: null,\n                maxDate: null\n            },\n            timePicker: {\n                hourStep: 1,\n                minuteStep: 1,\n                showMeridian: true,\n                readonlyInput: false,\n                mousewheel: true,\n                arrowkeys: true\n            },\n            customOptions: {},\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Date / Time',\n            group: 'advanced',\n            icon: 'calendar',\n            documentation: '/userguide/form-building/advanced-components#date-and-time',\n            weight: 40,\n            schema: DateTimeComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return DateTimeComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isDateEqual', 'isNotDateEqual', 'isEmpty', 'isNotEmpty', 'dateLessThan', 'dateGreaterThan', 'dateLessThanOrEqual', 'dateGreaterThanOrEqual'], valueComponent(classComp) {\n                return Object.assign(Object.assign({}, classComp), { type: 'datetime' });\n            } });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_2.getComponentSavedTypes)(schema) || [utils_2.componentValueTypes.date];\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        const timezone = (this.component.timezone || this.options.timezone);\n        const time24hr = !lodash_1.default.get(this.component, 'timePicker.showMeridian', true);\n        // Change the format to map to the settings.\n        if (!this.component.enableDate) {\n            this.component.format = this.component.format.replace(/yyyy-MM-dd /g, '');\n        }\n        else if (this.component.enableDate && !/[yMd]/.test(this.component.format) && this.builderMode) {\n            this.component.format = `yyyy-MM-dd ${this.component.format}`;\n        }\n        if (!this.component.enableTime) {\n            this.component.format = this.component.format.replace(/ hh:mm a$/g, '');\n        }\n        else if (this.component.enableTime && !/[mhH]/.test(this.component.format) && this.builderMode) {\n            this.component.format = `${this.component.format} hh:mm a`;\n        }\n        else if (time24hr) {\n            this.component.format = this.component.format.replace(/hh:mm a$/g, 'HH:mm');\n        }\n        else {\n            this.component.format = this.component.format.replace(/HH:mm$/g, 'hh:mm a');\n        }\n        let customOptions = this.component.customOptions || {};\n        if (typeof customOptions === 'string') {\n            try {\n                customOptions = JSON.parse(customOptions);\n            }\n            catch (err) {\n                console.warn(err.message);\n                customOptions = {};\n            }\n        }\n        /* eslint-disable camelcase */\n        this.component.widget = Object.assign({ type: 'calendar', timezone, displayInTimezone: lodash_1.default.get(this.component, 'displayInTimezone', 'viewer'), locale: this.options.language, useLocaleSettings: lodash_1.default.get(this.component, 'useLocaleSettings', false), allowInput: lodash_1.default.get(this.component, 'allowInput', true), mode: 'single', enableTime: lodash_1.default.get(this.component, 'enableTime', true), noCalendar: !lodash_1.default.get(this.component, 'enableDate', true), format: this.component.format, hourIncrement: lodash_1.default.get(this.component, 'timePicker.hourStep', 1), minuteIncrement: lodash_1.default.get(this.component, 'timePicker.minuteStep', 5), time_24hr: time24hr, readOnly: this.options.readOnly, minDate: lodash_1.default.get(this.component, 'datePicker.minDate'), disabledDates: lodash_1.default.get(this.component, 'datePicker.disable'), disableWeekends: lodash_1.default.get(this.component, 'datePicker.disableWeekends'), disableWeekdays: lodash_1.default.get(this.component, 'datePicker.disableWeekdays'), disableFunction: lodash_1.default.get(this.component, 'datePicker.disableFunction'), maxDate: lodash_1.default.get(this.component, 'datePicker.maxDate') }, customOptions);\n        // update originalComponent to include widget and other updated settings\n        // it is done here since these settings depend on properties present after the component is initialized \n        // originalComponent is used to restore the component (and widget) after evaluating field logic \n        this.originalComponent = (0, utils_2.fastCloneDeep)(this.component);\n        /* eslint-enable camelcase */\n    }\n    get defaultSchema() {\n        return DateTimeComponent.schema();\n    }\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (!defaultValue && this.component.defaultDate) {\n            defaultValue = utils_1.default.getDateSetting(this.component.defaultDate);\n            defaultValue = defaultValue ? defaultValue.toISOString() : '';\n        }\n        return defaultValue;\n    }\n    get emptyValue() {\n        return '';\n    }\n    get momentFormat() {\n        return utils_1.default.convertFormatToMoment(this.component.format);\n    }\n    isEmpty(value = this.dataValue) {\n        if (value && (value.toString() === 'Invalid Date')) {\n            return true;\n        }\n        return super.isEmpty(value);\n    }\n    formatValue(input) {\n        const result = moment_1.default.utc(input).toISOString();\n        return result === 'Invalid date' ? input : result;\n    }\n    isEqual(valueA, valueB = this.dataValue) {\n        return (this.isEmpty(valueA) && this.isEmpty(valueB))\n            || moment_1.default.utc(valueA).format(this.momentFormat) === moment_1.default.utc(valueB).format(this.momentFormat);\n    }\n    createWrapper() {\n        return false;\n    }\n    checkValidity(data, dirty, rowData) {\n        if (this.refs.input) {\n            this.refs.input.forEach((input) => {\n                if (input.widget && input.widget.enteredDate) {\n                    dirty = true;\n                }\n            });\n        }\n        return super.checkValidity(data, dirty, rowData);\n    }\n    getValueAsString(value) {\n        let format = utils_1.default.convertFormatToMoment(this.component.format);\n        format += format.match(/z$/) ? '' : ' z';\n        const timezone = this.timezone;\n        if (value && !this.attached && timezone) {\n            if (Array.isArray(value) && this.component.multiple) {\n                return value.map(item => lodash_1.default.trim(utils_1.default.momentDate(item, format, timezone).format(format))).join(', ');\n            }\n            return lodash_1.default.trim(utils_1.default.momentDate(value, format, timezone).format(format));\n        }\n        if (Array.isArray(value) && this.component.multiple) {\n            return value.map(item => lodash_1.default.trim((0, moment_1.default)(item).format(format))).join(', ');\n        }\n        return (value ? lodash_1.default.trim((0, moment_1.default)(value).format(format)) : value) || '';\n    }\n}\nexports[\"default\"] = DateTimeComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/datetime/DateTime.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst utils_1 = __importDefault(__webpack_require__(/*! ../../utils */ \"./lib/cjs/utils/index.js\"));\nconst utils_2 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nclass DateTimeComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            type: 'datetime',\n            label: 'Date / Time',\n            key: 'dateTime',\n            format: 'yyyy-MM-dd hh:mm a',\n            useLocaleSettings: false,\n            allowInput: true,\n            enableDate: true,\n            enableTime: true,\n            defaultValue: '',\n            defaultDate: '',\n            displayInTimezone: 'viewer',\n            timezone: '',\n            datepickerMode: 'day',\n            datePicker: {\n                showWeeks: true,\n                startingDay: 0,\n                initDate: '',\n                minMode: 'day',\n                maxMode: 'year',\n                yearRows: 4,\n                yearColumns: 5,\n                minDate: null,\n                maxDate: null\n            },\n            timePicker: {\n                hourStep: 1,\n                minuteStep: 1,\n                showMeridian: true,\n                readonlyInput: false,\n                mousewheel: true,\n                arrowkeys: true\n            },\n            customOptions: {},\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Date / Time',\n            group: 'advanced',\n            icon: 'calendar',\n            documentation: '/userguide/form-building/advanced-components#date-and-time',\n            weight: 40,\n            schema: DateTimeComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return DateTimeComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isDateEqual', 'isNotDateEqual', 'isEmpty', 'isNotEmpty', 'dateLessThan', 'dateGreaterThan', 'dateLessThanOrEqual', 'dateGreaterThanOrEqual'], valueComponent(classComp) {\n                return Object.assign(Object.assign({}, classComp), { type: 'datetime' });\n            } });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_2.getComponentSavedTypes)(schema) || [utils_2.componentValueTypes.date];\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        const timezone = (this.component.timezone || this.options.timezone);\n        const time24hr = !lodash_1.default.get(this.component, 'timePicker.showMeridian', true);\n        // Change the format to map to the settings.\n        if (!this.component.enableDate) {\n            this.component.format = this.component.format.replace(/yyyy-MM-dd /g, '');\n        }\n        else if (this.component.enableDate && !/[yMd]/.test(this.component.format) && this.builderMode) {\n            this.component.format = `yyyy-MM-dd ${this.component.format}`;\n        }\n        if (!this.component.enableTime) {\n            this.component.format = this.component.format.replace(/ hh:mm a$/g, '');\n        }\n        else if (this.component.enableTime && !/[mhH]/.test(this.component.format) && this.builderMode) {\n            this.component.format = `${this.component.format} hh:mm a`;\n        }\n        else if (time24hr) {\n            this.component.format = this.component.format.replace(/hh:mm a$/g, 'HH:mm');\n        }\n        else {\n            this.component.format = this.component.format.replace(/HH:mm$/g, 'hh:mm a');\n        }\n        let customOptions = this.component.customOptions || {};\n        if (typeof customOptions === 'string') {\n            try {\n                customOptions = JSON.parse(customOptions);\n            }\n            catch (err) {\n                console.warn(err.message);\n                customOptions = {};\n            }\n        }\n        /* eslint-disable camelcase */\n        this.component.widget = Object.assign({ type: 'calendar', timezone, displayInTimezone: lodash_1.default.get(this.component, 'displayInTimezone', 'viewer'), locale: this.options.language, useLocaleSettings: lodash_1.default.get(this.component, 'useLocaleSettings', false), allowInput: lodash_1.default.get(this.component, 'allowInput', true), mode: 'single', enableTime: lodash_1.default.get(this.component, 'enableTime', true), noCalendar: !lodash_1.default.get(this.component, 'enableDate', true), format: this.component.format, hourIncrement: lodash_1.default.get(this.component, 'timePicker.hourStep', 1), minuteIncrement: lodash_1.default.get(this.component, 'timePicker.minuteStep', 5), time_24hr: time24hr, readOnly: this.options.readOnly, minDate: lodash_1.default.get(this.component, 'datePicker.minDate'), disabledDates: lodash_1.default.get(this.component, 'datePicker.disable'), disableWeekends: lodash_1.default.get(this.component, 'datePicker.disableWeekends'), disableWeekdays: lodash_1.default.get(this.component, 'datePicker.disableWeekdays'), disableFunction: lodash_1.default.get(this.component, 'datePicker.disableFunction'), maxDate: lodash_1.default.get(this.component, 'datePicker.maxDate') }, customOptions);\n        // update originalComponent to include widget and other updated settings\n        // it is done here since these settings depend on properties present after the component is initialized\n        // originalComponent is used to restore the component (and widget) after evaluating field logic\n        this.originalComponent = (0, utils_2.fastCloneDeep)(this.component);\n        /* eslint-enable camelcase */\n    }\n    get defaultSchema() {\n        return DateTimeComponent.schema();\n    }\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (!defaultValue && this.component.defaultDate) {\n            defaultValue = utils_1.default.getDateSetting(this.component.defaultDate);\n            defaultValue = defaultValue ? defaultValue.toISOString() : '';\n        }\n        return defaultValue;\n    }\n    get emptyValue() {\n        return '';\n    }\n    get momentFormat() {\n        return utils_1.default.convertFormatToMoment(this.component.format);\n    }\n    isEmpty(value = this.dataValue) {\n        if (value && (value.toString() === 'Invalid Date')) {\n            return true;\n        }\n        return super.isEmpty(value);\n    }\n    formatValue(input) {\n        const result = moment_1.default.utc(input).toISOString();\n        return result === 'Invalid date' ? input : result;\n    }\n    isEqual(valueA, valueB = this.dataValue) {\n        return (this.isEmpty(valueA) && this.isEmpty(valueB))\n            || moment_1.default.utc(valueA).format(this.momentFormat) === moment_1.default.utc(valueB).format(this.momentFormat);\n    }\n    createWrapper() {\n        return false;\n    }\n    checkValidity(data, dirty, rowData) {\n        if (this.refs.input) {\n            this.refs.input.forEach((input) => {\n                if (input.widget && input.widget.enteredDate) {\n                    dirty = true;\n                }\n            });\n        }\n        return super.checkValidity(data, dirty, rowData);\n    }\n    getValueAsString(value, options) {\n        let format = utils_1.default.convertFormatToMoment(this.component.format);\n        format += format.match(/z$/) ? '' : ' z';\n        const timezone = this.timezone;\n        if (value && !this.attached && timezone) {\n            if (Array.isArray(value) && this.component.multiple) {\n                return value.map(item => lodash_1.default.trim(utils_1.default.momentDate(item, format, timezone, options).format(format))).join(', ');\n            }\n            return lodash_1.default.trim(utils_1.default.momentDate(value, format, timezone, options).format(format));\n        }\n        if (Array.isArray(value) && this.component.multiple) {\n            return value.map(item => lodash_1.default.trim((0, moment_1.default)(item).format(format))).join(', ');\n        }\n        return (value ? lodash_1.default.trim((0, moment_1.default)(value).format(format)) : value) || '';\n    }\n}\nexports[\"default\"] = DateTimeComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/datetime/DateTime.js?");
 
 /***/ }),
 
@@ -5161,7 +5161,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst Field_1 = __importDefault(__webpack_require__(/*! ../_classes/field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst core_1 = __webpack_require__(/*! @formio/core */ \"./node_modules/@formio/core/lib/index.js\");\nclass DayComponent extends Field_1.default {\n    static schema(...extend) {\n        return Field_1.default.schema({\n            type: 'day',\n            label: 'Day',\n            key: 'day',\n            fields: {\n                day: {\n                    type: 'number',\n                    placeholder: '',\n                    required: false\n                },\n                month: {\n                    type: 'select',\n                    placeholder: '',\n                    required: false\n                },\n                year: {\n                    type: 'number',\n                    placeholder: '',\n                    required: false\n                }\n            },\n            dayFirst: false,\n            defaultValue: ''\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Day',\n            group: 'advanced',\n            icon: 'calendar',\n            documentation: '/userguide/form-building/advanced-components#day',\n            weight: 50,\n            schema: DayComponent.schema()\n        };\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isDateEqual', 'isNotDateEqual', 'isEmpty', 'isNotEmpty', 'dateLessThan', 'dateGreaterThan', 'dateLessThanOrEqual', 'dateGreaterThanOrEqual'] });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.string];\n    }\n    constructor(component, options, data) {\n        if (component.maxDate && component.maxDate.indexOf('moment(') === -1) {\n            component.maxDate = (0, moment_1.default)(component.maxDate, 'YYYY-MM-DD').toISOString();\n        }\n        if (component.minDate && component.minDate.indexOf('moment(') === -1) {\n            component.minDate = (0, moment_1.default)(component.minDate, 'YYYY-MM-DD').toISOString();\n        }\n        super(component, options, data);\n    }\n    static get serverConditionSettings() {\n        return DayComponent.conditionOperatorsSettings;\n    }\n    /**\n     * The empty value for day component.\n     * @returns {''} - The empty value of the day component.\n     */\n    get emptyValue() {\n        return '';\n    }\n    get valueMask() {\n        return /^\\d{2}\\/\\d{2}\\/\\d{4}$/;\n    }\n    get dayRequired() {\n        return this.showDay && lodash_1.default.get(this.component, 'fields.day.required', false);\n    }\n    get showDay() {\n        return !lodash_1.default.get(this.component, 'fields.day.hide', false);\n    }\n    get monthRequired() {\n        return this.showMonth && lodash_1.default.get(this.component, 'fields.month.required', false);\n    }\n    get showMonth() {\n        return !lodash_1.default.get(this.component, 'fields.month.hide', false);\n    }\n    get yearRequired() {\n        return this.showYear && lodash_1.default.get(this.component, 'fields.year.required', false);\n    }\n    get showYear() {\n        return !lodash_1.default.get(this.component, 'fields.year.hide', false);\n    }\n    get defaultSchema() {\n        return DayComponent.schema();\n    }\n    get shouldDisabled() {\n        return super.shouldDisabled || this.parentDisabled;\n    }\n    get inputInfo() {\n        const info = super.elementInfo();\n        info.type = 'input';\n        info.attr.type = 'hidden';\n        info.changeEvent = 'input';\n        return info;\n    }\n    isEmpty(value = this.dataValue) {\n        if (value === DayComponent.oldEmptyValue) {\n            return true;\n        }\n        return super.isEmpty(value);\n    }\n    inputDefinition(name) {\n        let min, max;\n        if (name === 'day') {\n            min = 1;\n            max = 31;\n        }\n        if (name === 'month') {\n            min = 1;\n            max = 12;\n        }\n        if (name === 'year') {\n            min = lodash_1.default.get(this.component, 'fields.year.minYear', 1900) || 1900;\n            max = lodash_1.default.get(this.component, 'fields.year.maxYear', 2030) || 1900;\n        }\n        return {\n            type: 'input',\n            ref: name,\n            attr: {\n                id: `${this.component.key}-${name}`,\n                class: `form-control ${this.transform('class', `formio-day-component-${name}`)}`,\n                type: this.component.fields[name].type === 'select' ? 'select' : 'number',\n                placeholder: this.t(this.component.fields[name].placeholder),\n                step: 1,\n                min,\n                max,\n            }\n        };\n    }\n    selectDefinition(name) {\n        return {\n            multiple: false,\n            ref: name,\n            widget: 'html5',\n            attr: {\n                id: `${this.component.key}-${name}`,\n                class: 'form-control',\n                name,\n                lang: this.options.language\n            }\n        };\n    }\n    get days() {\n        if (this._days) {\n            return this._days;\n        }\n        this._days = [\n            { value: '', label: lodash_1.default.get(this.component, 'fields.day.placeholder', '') }\n        ];\n        for (let x = 1; x <= 31; x++) {\n            this._days.push({\n                value: x,\n                label: x.toString()\n            });\n        }\n        return this._days;\n    }\n    get months() {\n        if (this._months) {\n            return this._months;\n        }\n        this._months = [\n            {\n                value: '',\n                label: lodash_1.default.get(this.component, 'fields.month.placeholder') || (this.hideInputLabels ? this.t('month') : '')\n            },\n            { value: 1, label: 'January' },\n            { value: 2, label: 'February' },\n            { value: 3, label: 'March' },\n            { value: 4, label: 'April' },\n            { value: 5, label: 'May' },\n            { value: 6, label: 'June' },\n            { value: 7, label: 'July' },\n            { value: 8, label: 'August' },\n            { value: 9, label: 'September' },\n            { value: 10, label: 'October' },\n            { value: 11, label: 'November' },\n            { value: 12, label: 'December' }\n        ];\n        return this._months;\n    }\n    get years() {\n        if (this._years) {\n            return this._years;\n        }\n        this._years = [\n            { value: '', label: lodash_1.default.get(this.component, 'fields.year.placeholder', '') }\n        ];\n        const minYears = lodash_1.default.get(this.component, 'fields.year.minYear', 1900) || 1900;\n        const maxYears = lodash_1.default.get(this.component, 'fields.year.maxYear', 2030) || 2030;\n        for (let x = minYears; x <= maxYears; x++) {\n            this._years.push({\n                value: x,\n                label: x.toString()\n            });\n        }\n        return this._years;\n    }\n    setErrorClasses(elements, dirty, hasError) {\n        super.setErrorClasses(elements, dirty, hasError);\n        super.setErrorClasses([this.refs.day, this.refs.month, this.refs.year], dirty, hasError);\n    }\n    removeInputError(elements) {\n        super.removeInputError([this.refs.day, this.refs.month, this.refs.year]);\n        super.removeInputError(elements);\n    }\n    init() {\n        super.init();\n        const minYear = this.component.fields.year.minYear;\n        const maxYear = this.component.fields.year.maxYear;\n        this.component.maxYear = maxYear;\n        this.component.minYear = minYear;\n        const dateFormatInfo = (0, utils_1.getLocaleDateFormatInfo)(this.options.language);\n        this.dayFirst = this.component.useLocaleSettings\n            ? dateFormatInfo.dayFirst\n            : this.component.dayFirst;\n    }\n    render() {\n        if (this.isHtmlRenderMode()) {\n            return super.render(this.renderTemplate('input'));\n        }\n        return super.render(this.renderTemplate('day', {\n            dayFirst: this.dayFirst,\n            showDay: this.showDay,\n            showMonth: this.showMonth,\n            showYear: this.showYear,\n            day: this.renderField('day'),\n            month: this.renderField('month'),\n            year: this.renderField('year'),\n        }));\n    }\n    renderField(name) {\n        if (this.component.fields[name].type === 'select') {\n            return this.renderTemplate('select', {\n                input: this.selectDefinition(name),\n                selectOptions: this[`${name}s`].reduce((html, option) => html + this.renderTemplate('selectOption', {\n                    option,\n                    selected: false,\n                    attrs: {}\n                }), ''),\n            });\n        }\n        else {\n            return this.renderTemplate('input', {\n                prefix: this.prefix,\n                suffix: this.suffix,\n                input: this.inputDefinition(name)\n            });\n        }\n    }\n    attach(element) {\n        this.loadRefs(element, { day: 'single', month: 'single', year: 'single', input: 'multiple' });\n        const superAttach = super.attach(element);\n        const updateValueAndSaveFocus = (element, name) => () => {\n            try {\n                this.saveCaretPosition(element, name);\n            }\n            catch (err) {\n                console.warn(this.t('caretPositionSavingError'), err);\n            }\n            this.updateValue(null, {\n                modified: true,\n            });\n        };\n        if (this.shouldDisabled) {\n            this.setDisabled(this.refs.day, true);\n            this.setDisabled(this.refs.month, true);\n            this.setDisabled(this.refs.year, true);\n            if (this.refs.input) {\n                this.refs.input.forEach((input) => this.setDisabled(input, true));\n            }\n        }\n        else {\n            this.addEventListener(this.refs.day, 'input', updateValueAndSaveFocus(this.refs.day, 'day'));\n            // TODO: Need to rework this to work with day select as well.\n            // Change day max input when month changes.\n            this.addEventListener(this.refs.month, 'input', () => {\n                const maxDay = this.refs.year ? parseInt(new Date(this.refs.year.value, this.refs.month.value, 0).getDate(), 10)\n                    : '';\n                const day = this.getFieldValue('day');\n                if (!this.component.fields.day.hide && maxDay) {\n                    this.refs.day.max = maxDay;\n                }\n                if (maxDay && day > maxDay && this.refs.day) {\n                    this.refs.day.value = this.refs.day.max;\n                }\n                updateValueAndSaveFocus(this.refs.month, 'month')();\n            });\n            this.addEventListener(this.refs.year, 'input', updateValueAndSaveFocus(this.refs.year, 'year'));\n            this.addEventListener(this.refs.input, this.info.changeEvent, () => this.updateValue(null, {\n                modified: true\n            }));\n            [this.refs.day, this.refs.month, this.refs.year].filter((element) => !!element).forEach((element) => {\n                super.addFocusBlurEvents(element);\n            });\n        }\n        this.setValue(this.dataValue);\n        // Force the disabled state with getters and setters.\n        this.disabled = this.shouldDisabled;\n        return superAttach;\n    }\n    validateRequired(setting, value) {\n        const { day, month, year } = this.parts;\n        if (this.dayRequired && !day) {\n            return false;\n        }\n        if (this.monthRequired && !month) {\n            return false;\n        }\n        if (this.yearRequired && !year) {\n            return false;\n        }\n        if (!(0, utils_1.boolValue)(setting)) {\n            return true;\n        }\n        return !this.isEmpty(value);\n    }\n    set disabled(disabled) {\n        super.disabled = disabled;\n        if (!this.refs.year || !this.refs.month || !this.refs.day) {\n            return;\n        }\n        if (disabled) {\n            this.refs.year.setAttribute('disabled', 'disabled');\n            this.refs.month.setAttribute('disabled', 'disabled');\n            this.refs.day.setAttribute('disabled', 'disabled');\n        }\n        else {\n            this.refs.year.removeAttribute('disabled');\n            this.refs.month.removeAttribute('disabled');\n            this.refs.day.removeAttribute('disabled');\n        }\n    }\n    normalizeValue(value) {\n        // Adjust the value from old to new format\n        if (value === DayComponent.oldEmptyValue) {\n            value = '';\n        }\n        if (!value || this.valueMask.test(value)) {\n            return value;\n        }\n        const dateParts = [];\n        const valueParts = value.split('/');\n        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        const defaultValue = this.component.defaultValue ? this.component.defaultValue.split('/') : '';\n        let defaultDay = '';\n        let defaultMonth = '';\n        let defaultYear = '';\n        if (defaultValue) {\n            const hasHiddenFields = defaultValue.length !== 3;\n            defaultDay = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).day : defaultValue[DAY];\n            defaultMonth = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).month : defaultValue[MONTH];\n            defaultYear = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).year : defaultValue[YEAR];\n        }\n        if (this.options.building && defaultValue.length === 3) {\n            return this.component.defaultValue;\n        }\n        const getNextPart = (shouldTake, defaultValue) => {\n            // Only push the part if it's not an empty string\n            const part = shouldTake ? valueParts.shift() : defaultValue;\n            if (part !== '') {\n                dateParts.push(part);\n            }\n        };\n        if (this.dayFirst) {\n            getNextPart(this.showDay, defaultDay);\n        }\n        getNextPart(this.showMonth, defaultMonth);\n        if (!this.dayFirst) {\n            getNextPart(this.showDay, defaultDay);\n        }\n        getNextPart(this.showYear, defaultYear);\n        return dateParts.join('/');\n    }\n    /**\n     * Set the value at a specific index and updates the component's refs.\n     * @param {number} index - The index to set.\n     * @param {any} value - The value to set.\n     * @returns {null|void} - Returns null if the value is invalid, otherwise void.\n     */\n    setValueAt(index, value) {\n        // temporary solution to avoid input reset\n        // on invalid date.\n        if (value === 'Invalid date') {\n            return null;\n        }\n        let day, month, year;\n        const parts = value.split('/');\n        if (parts.length !== 3) {\n            day = this.getDayWithHiddenFields(parts).day;\n            month = this.getDayWithHiddenFields(parts).month;\n            year = this.getDayWithHiddenFields(parts).year;\n        }\n        else {\n            if (this.component.dayFirst) {\n                day = parts.shift();\n            }\n            month = parts.shift();\n            if (!this.component.dayFirst) {\n                day = parts.shift();\n            }\n            year = parts.shift();\n        }\n        if (this.refs.day && this.showDay) {\n            this.refs.day.value = day === '00' ? '' : parseInt(day, 10);\n        }\n        if (this.refs.month && this.showMonth) {\n            this.refs.month.value = month === '00' ? '' : parseInt(month, 10);\n        }\n        if (this.refs.year && this.showYear) {\n            this.refs.year.value = year === '0000' ? '' : parseInt(year, 10);\n        }\n    }\n    getDayWithHiddenFields(parts) {\n        let [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        if (!this.showDay) {\n            MONTH = MONTH === 0 ? 0 : MONTH - 1;\n            YEAR = YEAR - 1;\n            DAY = null;\n        }\n        if (!this.showMonth) {\n            if (!lodash_1.default.isNull(DAY)) {\n                DAY = DAY === 0 ? 0 : DAY - 1;\n            }\n            YEAR = YEAR - 1;\n            MONTH = null;\n        }\n        if (!this.showYear) {\n            YEAR = null;\n        }\n        return {\n            month: lodash_1.default.isNull(MONTH) ? '' : parts[MONTH],\n            day: lodash_1.default.isNull(DAY) ? '' : parts[DAY],\n            year: lodash_1.default.isNull(YEAR) ? '' : parts[YEAR],\n        };\n    }\n    getFieldValue(name) {\n        const parts = this.dataValue ? this.dataValue.split('/') : [];\n        let val = 0;\n        switch (name) {\n            case 'month':\n                val = parts[this.dayFirst ? 1 : 0];\n                break;\n            case 'day':\n                val = parts[this.dayFirst ? 0 : 1];\n                break;\n            case 'year':\n                val = parts[2];\n                break;\n        }\n        val = parseInt(val, 10);\n        return (!lodash_1.default.isNaN(val) && lodash_1.default.isNumber(val)) ? val : 0;\n    }\n    get parts() {\n        return {\n            day: this.getFieldValue('day'),\n            month: this.getFieldValue('month'),\n            year: this.getFieldValue('year'),\n        };\n    }\n    /**\n     * Get the format for the value string.\n     * @returns {string} - the format for the value string.\n     */\n    get format() {\n        return (0, core_1.getDayFormat)(this.component);\n    }\n    /**\n     * Return the date for this component.\n     * @param {any} value - The value to convert to a date.\n     * @returns {null|string} - The date string.\n     */\n    getDate(value) {\n        let defaults = [], day, month, year;\n        // Map positions to identifiers to get default values for each part of day\n        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        const defaultValue = value || this.component.defaultValue;\n        if (defaultValue) {\n            defaults = defaultValue.split('/').map(x => parseInt(x, 10));\n        }\n        const isModalEditClosed = this.component.modalEdit && !this.componentModal.isOpened;\n        if (this.showDay && this.refs.day) {\n            day = (this.refs.day.value === '' && !isModalEditClosed) ? '' : parseInt(this.refs.day.value, 10);\n        }\n        if (day === undefined || lodash_1.default.isNaN(day) || value) {\n            day = (defaults.length !== 3)\n                ? this.getDayWithHiddenFields(defaults).day\n                : (defaults[DAY] && !lodash_1.default.isNaN(defaults[DAY]) ? defaults[DAY] : 0);\n        }\n        if (this.showMonth && this.refs.month) {\n            // Months are 0 indexed.\n            month = (this.refs.month.value === '' && !isModalEditClosed) ? '' : parseInt(this.refs.month.value, 10);\n        }\n        if (month === undefined || lodash_1.default.isNaN(month) || value) {\n            month = (defaults.length !== 3)\n                ? this.getDayWithHiddenFields(defaults).month\n                : (defaults[MONTH] && !lodash_1.default.isNaN(defaults[MONTH]) ? defaults[MONTH] : 0);\n        }\n        if (this.showYear && this.refs.year) {\n            year = (this.refs.year.value === '' && !isModalEditClosed) ? '' : parseInt(this.refs.year.value);\n        }\n        if (year === undefined || lodash_1.default.isNaN(year) || value) {\n            year = (defaults.length !== 3)\n                ? this.getDayWithHiddenFields(defaults).year\n                : (defaults[YEAR] && !lodash_1.default.isNaN(defaults[YEAR]) ? defaults[YEAR] : 0);\n        }\n        let result;\n        if (!day && !month && !year) {\n            if (!isModalEditClosed) {\n                this.dataValue = this.emptyValue;\n                if (this.options.building) {\n                    this.triggerChange();\n                }\n            }\n            return null;\n        }\n        // add trailing zeros if the data is showed\n        day = this.showDay ? day.toString().padStart(2, 0) : '';\n        month = this.showMonth ? month.toString().padStart(2, 0) : '';\n        year = this.showYear ? year.toString().padStart(4, 0) : '';\n        if (this.component.dayFirst) {\n            result = `${day}${this.showDay && this.showMonth || this.showDay && this.showYear ? '/' : ''}${month}${this.showMonth && this.showYear ? '/' : ''}${year}`;\n        }\n        else {\n            result = `${month}${this.showDay && this.showMonth || this.showMonth && this.showYear ? '/' : ''}${day}${this.showDay && this.showYear ? '/' : ''}${year}`;\n        }\n        return result;\n    }\n    /**\n     * Return the date string for this component.\n     * @returns {string|null} - The date string for this component.\n     */\n    get date() {\n        return this.getDate();\n    }\n    /**\n     * Return the raw value.\n     * @returns {string} - The raw value of the component.\n     */\n    get validationValue() {\n        return this.dataValue;\n    }\n    getValue() {\n        const result = super.getValue();\n        return (!result) ? this.dataValue : result;\n    }\n    /**\n     * Get the value at a specific index.\n     * @param {number} index - The index to get the value from.\n     * @returns {*} - The value at index.\n     */\n    getValueAt(index) {\n        const date = this.date || this.emptyValue;\n        if (date) {\n            this.refs.input[index].value = date;\n            return this.refs.input[index].value;\n        }\n        else {\n            this.refs.input[index].value = '';\n            return null;\n        }\n    }\n    /**\n     * Get the input value of the date.\n     * @param {any} value - The value to convert to a string.\n     * @returns {string|null} - The string value of the date.\n     */\n    getValueAsString(value) {\n        if (!value) {\n            return '';\n        }\n        return this.getDate(value) || '';\n    }\n    focus(field) {\n        var _a, _b, _c;\n        if (field && typeof field === 'string' && this.refs[field]) {\n            this.refs[field].focus();\n        }\n        else if (this.dayFirst && this.showDay || !this.dayFirst && !this.showMonth && this.showDay) {\n            (_a = this.refs.day) === null || _a === void 0 ? void 0 : _a.focus();\n        }\n        else if (this.dayFirst && !this.showDay && this.showMonth || !this.dayFirst && this.showMonth) {\n            (_b = this.refs.month) === null || _b === void 0 ? void 0 : _b.focus();\n        }\n        else if (!this.showDay && !this.showDay && this.showYear) {\n            (_c = this.refs.year) === null || _c === void 0 ? void 0 : _c.focus();\n        }\n    }\n    restoreCaretPosition() {\n        var _a;\n        if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.currentSelection) {\n            const { selection, index } = this.root.currentSelection;\n            if (this.refs[index]) {\n                const input = this.refs[index];\n                const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test((i === null || i === void 0 ? void 0 : i.type) || '');\n                if (isInputRangeSelectable(input)) {\n                    input.setSelectionRange(...selection);\n                }\n            }\n        }\n    }\n    isPartialDay(value) {\n        if (!value) {\n            return true;\n        }\n        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        const values = value.split('/');\n        if (values.length < 3) {\n            return true;\n        }\n        return (values[DAY] === '00' || values[MONTH] === '00' || values[YEAR] === '0000');\n    }\n    getValidationFormat() {\n        var _a, _b, _c, _d, _e, _f;\n        let validationFormat = this.dayFirst ? 'DD-MM-YYYY' : 'MM-DD-YYYY';\n        if ((_b = (_a = this.fields) === null || _a === void 0 ? void 0 : _a.day) === null || _b === void 0 ? void 0 : _b.hide) {\n            validationFormat = validationFormat.replace('DD-', '');\n        }\n        if ((_d = (_c = this.fields) === null || _c === void 0 ? void 0 : _c.month) === null || _d === void 0 ? void 0 : _d.hide) {\n            validationFormat = validationFormat.replace('MM-', '');\n        }\n        if ((_f = (_e = this.fields) === null || _e === void 0 ? void 0 : _e.year) === null || _f === void 0 ? void 0 : _f.hide) {\n            validationFormat = validationFormat.replace('-YYYY', '');\n        }\n        return validationFormat;\n    }\n}\n// Empty value used before 9.3.x\nDayComponent.oldEmptyValue = '00/00/0000';\nexports[\"default\"] = DayComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/day/Day.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst Field_1 = __importDefault(__webpack_require__(/*! ../_classes/field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst core_1 = __webpack_require__(/*! @formio/core */ \"./node_modules/@formio/core/lib/index.js\");\nclass DayComponent extends Field_1.default {\n    static schema(...extend) {\n        return Field_1.default.schema({\n            type: 'day',\n            label: 'Day',\n            key: 'day',\n            fields: {\n                day: {\n                    type: 'number',\n                    placeholder: '',\n                    required: false\n                },\n                month: {\n                    type: 'select',\n                    placeholder: '',\n                    required: false\n                },\n                year: {\n                    type: 'number',\n                    placeholder: '',\n                    required: false\n                }\n            },\n            dayFirst: false,\n            defaultValue: ''\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Day',\n            group: 'advanced',\n            icon: 'calendar',\n            documentation: '/userguide/form-building/advanced-components#day',\n            weight: 50,\n            schema: DayComponent.schema()\n        };\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isDateEqual', 'isNotDateEqual', 'isEmpty', 'isNotEmpty', 'dateLessThan', 'dateGreaterThan', 'dateLessThanOrEqual', 'dateGreaterThanOrEqual'] });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.string];\n    }\n    constructor(component, options, data) {\n        if (!options.inFormBuilder && !options.building) {\n            if (component.maxDate && component.maxDate.indexOf('moment(') === -1) {\n                component.maxDate = (0, moment_1.default)(component.maxDate, 'YYYY-MM-DD').toISOString();\n            }\n            if (component.minDate && component.minDate.indexOf('moment(') === -1) {\n                component.minDate = (0, moment_1.default)(component.minDate, 'YYYY-MM-DD').toISOString();\n            }\n        }\n        super(component, options, data);\n    }\n    static get serverConditionSettings() {\n        return DayComponent.conditionOperatorsSettings;\n    }\n    /**\n     * The empty value for day component.\n     * @returns {''} - The empty value of the day component.\n     */\n    get emptyValue() {\n        return '';\n    }\n    get valueMask() {\n        return /^\\d{2}\\/\\d{2}\\/\\d{4}$/;\n    }\n    get dayRequired() {\n        return this.showDay && lodash_1.default.get(this.component, 'fields.day.required', false);\n    }\n    get showDay() {\n        return !lodash_1.default.get(this.component, 'fields.day.hide', false);\n    }\n    get monthRequired() {\n        return this.showMonth && lodash_1.default.get(this.component, 'fields.month.required', false);\n    }\n    get showMonth() {\n        return !lodash_1.default.get(this.component, 'fields.month.hide', false);\n    }\n    get yearRequired() {\n        return this.showYear && lodash_1.default.get(this.component, 'fields.year.required', false);\n    }\n    get showYear() {\n        return !lodash_1.default.get(this.component, 'fields.year.hide', false);\n    }\n    get defaultSchema() {\n        return DayComponent.schema();\n    }\n    get shouldDisabled() {\n        return super.shouldDisabled || this.parentDisabled;\n    }\n    get inputInfo() {\n        const info = super.elementInfo();\n        info.type = 'input';\n        info.attr.type = 'hidden';\n        info.changeEvent = 'input';\n        return info;\n    }\n    isEmpty(value = this.dataValue) {\n        if (value === DayComponent.oldEmptyValue) {\n            return true;\n        }\n        return super.isEmpty(value);\n    }\n    inputDefinition(name) {\n        let min, max;\n        if (name === 'day') {\n            min = 1;\n            max = 31;\n        }\n        if (name === 'month') {\n            min = 1;\n            max = 12;\n        }\n        if (name === 'year') {\n            min = lodash_1.default.get(this.component, 'fields.year.minYear', 1900) || 1900;\n            max = lodash_1.default.get(this.component, 'fields.year.maxYear', 2030) || 1900;\n        }\n        return {\n            type: 'input',\n            ref: name,\n            attr: {\n                id: `${this.component.key}-${name}`,\n                class: `form-control ${this.transform('class', `formio-day-component-${name}`)}`,\n                type: this.component.fields[name].type === 'select' ? 'select' : 'number',\n                placeholder: this.t(this.component.fields[name].placeholder),\n                step: 1,\n                min,\n                max,\n            }\n        };\n    }\n    selectDefinition(name) {\n        return {\n            multiple: false,\n            ref: name,\n            widget: 'html5',\n            attr: {\n                id: `${this.component.key}-${name}`,\n                class: 'form-control',\n                name,\n                lang: this.options.language\n            }\n        };\n    }\n    get days() {\n        if (this._days) {\n            return this._days;\n        }\n        this._days = [\n            { value: '', label: lodash_1.default.get(this.component, 'fields.day.placeholder', '') }\n        ];\n        for (let x = 1; x <= 31; x++) {\n            this._days.push({\n                value: x,\n                label: x.toString()\n            });\n        }\n        return this._days;\n    }\n    get months() {\n        if (this._months) {\n            return this._months;\n        }\n        this._months = [\n            {\n                value: '',\n                label: lodash_1.default.get(this.component, 'fields.month.placeholder') || (this.hideInputLabels ? this.t('month') : '')\n            },\n            { value: 1, label: 'January' },\n            { value: 2, label: 'February' },\n            { value: 3, label: 'March' },\n            { value: 4, label: 'April' },\n            { value: 5, label: 'May' },\n            { value: 6, label: 'June' },\n            { value: 7, label: 'July' },\n            { value: 8, label: 'August' },\n            { value: 9, label: 'September' },\n            { value: 10, label: 'October' },\n            { value: 11, label: 'November' },\n            { value: 12, label: 'December' }\n        ];\n        return this._months;\n    }\n    get years() {\n        if (this._years) {\n            return this._years;\n        }\n        this._years = [\n            { value: '', label: lodash_1.default.get(this.component, 'fields.year.placeholder', '') }\n        ];\n        const minYears = lodash_1.default.get(this.component, 'fields.year.minYear', 1900) || 1900;\n        const maxYears = lodash_1.default.get(this.component, 'fields.year.maxYear', 2030) || 2030;\n        for (let x = minYears; x <= maxYears; x++) {\n            this._years.push({\n                value: x,\n                label: x.toString()\n            });\n        }\n        return this._years;\n    }\n    setErrorClasses(elements, dirty, hasError) {\n        super.setErrorClasses(elements, dirty, hasError);\n        super.setErrorClasses([this.refs.day, this.refs.month, this.refs.year], dirty, hasError);\n    }\n    removeInputError(elements) {\n        super.removeInputError([this.refs.day, this.refs.month, this.refs.year]);\n        super.removeInputError(elements);\n    }\n    init() {\n        super.init();\n        const minYear = this.component.fields.year.minYear;\n        const maxYear = this.component.fields.year.maxYear;\n        this.component.maxYear = maxYear;\n        this.component.minYear = minYear;\n        const dateFormatInfo = (0, utils_1.getLocaleDateFormatInfo)(this.options.language);\n        this.dayFirst = this.component.useLocaleSettings\n            ? dateFormatInfo.dayFirst\n            : this.component.dayFirst;\n    }\n    render() {\n        if (this.isHtmlRenderMode()) {\n            return super.render(this.renderTemplate('input'));\n        }\n        return super.render(this.renderTemplate('day', {\n            dayFirst: this.dayFirst,\n            showDay: this.showDay,\n            showMonth: this.showMonth,\n            showYear: this.showYear,\n            day: this.renderField('day'),\n            month: this.renderField('month'),\n            year: this.renderField('year'),\n        }));\n    }\n    renderField(name) {\n        if (this.component.fields[name].type === 'select') {\n            return this.renderTemplate('select', {\n                input: this.selectDefinition(name),\n                selectOptions: this[`${name}s`].reduce((html, option) => html + this.renderTemplate('selectOption', {\n                    option,\n                    selected: false,\n                    attrs: {}\n                }), ''),\n            });\n        }\n        else {\n            return this.renderTemplate('input', {\n                prefix: this.prefix,\n                suffix: this.suffix,\n                input: this.inputDefinition(name)\n            });\n        }\n    }\n    attach(element) {\n        this.loadRefs(element, { day: 'single', month: 'single', year: 'single', input: 'multiple' });\n        const superAttach = super.attach(element);\n        const updateValueAndSaveFocus = (element, name) => () => {\n            try {\n                this.saveCaretPosition(element, name);\n            }\n            catch (err) {\n                console.warn(this.t('caretPositionSavingError'), err);\n            }\n            this.updateValue(null, {\n                modified: true,\n            });\n        };\n        if (this.shouldDisabled) {\n            this.setDisabled(this.refs.day, true);\n            this.setDisabled(this.refs.month, true);\n            this.setDisabled(this.refs.year, true);\n            if (this.refs.input) {\n                this.refs.input.forEach((input) => this.setDisabled(input, true));\n            }\n        }\n        else {\n            this.addEventListener(this.refs.day, 'input', updateValueAndSaveFocus(this.refs.day, 'day'));\n            // TODO: Need to rework this to work with day select as well.\n            // Change day max input when month changes.\n            this.addEventListener(this.refs.month, 'input', () => {\n                const maxDay = this.refs.year ? parseInt(new Date(this.refs.year.value, this.refs.month.value, 0).getDate(), 10)\n                    : '';\n                const day = this.getFieldValue('day');\n                if (!this.component.fields.day.hide && maxDay) {\n                    this.refs.day.max = maxDay;\n                }\n                if (maxDay && day > maxDay && this.refs.day) {\n                    this.refs.day.value = this.refs.day.max;\n                }\n                updateValueAndSaveFocus(this.refs.month, 'month')();\n            });\n            this.addEventListener(this.refs.year, 'input', updateValueAndSaveFocus(this.refs.year, 'year'));\n            this.addEventListener(this.refs.input, this.info.changeEvent, () => this.updateValue(null, {\n                modified: true\n            }));\n            [this.refs.day, this.refs.month, this.refs.year].filter((element) => !!element).forEach((element) => {\n                super.addFocusBlurEvents(element);\n            });\n        }\n        this.setValue(this.dataValue);\n        // Force the disabled state with getters and setters.\n        this.disabled = this.shouldDisabled;\n        return superAttach;\n    }\n    validateRequired(setting, value) {\n        const { day, month, year } = this.parts;\n        if (this.dayRequired && !day) {\n            return false;\n        }\n        if (this.monthRequired && !month) {\n            return false;\n        }\n        if (this.yearRequired && !year) {\n            return false;\n        }\n        if (!(0, utils_1.boolValue)(setting)) {\n            return true;\n        }\n        return !this.isEmpty(value);\n    }\n    set disabled(disabled) {\n        super.disabled = disabled;\n        if (!this.refs.year || !this.refs.month || !this.refs.day) {\n            return;\n        }\n        if (disabled) {\n            this.refs.year.setAttribute('disabled', 'disabled');\n            this.refs.month.setAttribute('disabled', 'disabled');\n            this.refs.day.setAttribute('disabled', 'disabled');\n        }\n        else {\n            this.refs.year.removeAttribute('disabled');\n            this.refs.month.removeAttribute('disabled');\n            this.refs.day.removeAttribute('disabled');\n        }\n    }\n    normalizeValue(value) {\n        // Adjust the value from old to new format\n        if (value === DayComponent.oldEmptyValue) {\n            value = '';\n        }\n        if (!value || this.valueMask.test(value)) {\n            return value;\n        }\n        const dateParts = [];\n        const valueParts = value.split('/');\n        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        const defaultValue = this.component.defaultValue ? this.component.defaultValue.split('/') : '';\n        let defaultDay = '';\n        let defaultMonth = '';\n        let defaultYear = '';\n        if (defaultValue) {\n            const hasHiddenFields = defaultValue.length !== 3;\n            defaultDay = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).day : defaultValue[DAY];\n            defaultMonth = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).month : defaultValue[MONTH];\n            defaultYear = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).year : defaultValue[YEAR];\n        }\n        if (this.options.building && defaultValue.length === 3) {\n            return this.component.defaultValue;\n        }\n        const getNextPart = (shouldTake, defaultValue) => {\n            // Only push the part if it's not an empty string\n            const part = shouldTake ? valueParts.shift() : defaultValue;\n            if (part !== '') {\n                dateParts.push(part);\n            }\n        };\n        if (this.dayFirst) {\n            getNextPart(this.showDay, defaultDay);\n        }\n        getNextPart(this.showMonth, defaultMonth);\n        if (!this.dayFirst) {\n            getNextPart(this.showDay, defaultDay);\n        }\n        getNextPart(this.showYear, defaultYear);\n        return dateParts.join('/');\n    }\n    /**\n     * Set the value at a specific index and updates the component's refs.\n     * @param {number} index - The index to set.\n     * @param {any} value - The value to set.\n     * @returns {null|void} - Returns null if the value is invalid, otherwise void.\n     */\n    setValueAt(index, value) {\n        // temporary solution to avoid input reset\n        // on invalid date.\n        if (value === 'Invalid date') {\n            return null;\n        }\n        let day, month, year;\n        const parts = value.split('/');\n        if (parts.length !== 3) {\n            day = this.getDayWithHiddenFields(parts).day;\n            month = this.getDayWithHiddenFields(parts).month;\n            year = this.getDayWithHiddenFields(parts).year;\n        }\n        else {\n            if (this.component.dayFirst) {\n                day = parts.shift();\n            }\n            month = parts.shift();\n            if (!this.component.dayFirst) {\n                day = parts.shift();\n            }\n            year = parts.shift();\n        }\n        if (this.refs.day && this.showDay) {\n            this.refs.day.value = day === '00' ? '' : parseInt(day, 10);\n        }\n        if (this.refs.month && this.showMonth) {\n            this.refs.month.value = month === '00' ? '' : parseInt(month, 10);\n        }\n        if (this.refs.year && this.showYear) {\n            this.refs.year.value = year === '0000' ? '' : parseInt(year, 10);\n        }\n    }\n    getDayWithHiddenFields(parts) {\n        let [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        if (!this.showDay) {\n            MONTH = MONTH === 0 ? 0 : MONTH - 1;\n            YEAR = YEAR - 1;\n            DAY = null;\n        }\n        if (!this.showMonth) {\n            if (!lodash_1.default.isNull(DAY)) {\n                DAY = DAY === 0 ? 0 : DAY - 1;\n            }\n            YEAR = YEAR - 1;\n            MONTH = null;\n        }\n        if (!this.showYear) {\n            YEAR = null;\n        }\n        return {\n            month: lodash_1.default.isNull(MONTH) ? '' : parts[MONTH],\n            day: lodash_1.default.isNull(DAY) ? '' : parts[DAY],\n            year: lodash_1.default.isNull(YEAR) ? '' : parts[YEAR],\n        };\n    }\n    getFieldValue(name) {\n        const parts = this.dataValue ? this.dataValue.split('/') : [];\n        let val = 0;\n        switch (name) {\n            case 'month':\n                val = parts[this.dayFirst ? 1 : 0];\n                break;\n            case 'day':\n                val = parts[this.dayFirst ? 0 : 1];\n                break;\n            case 'year':\n                val = parts[2];\n                break;\n        }\n        val = parseInt(val, 10);\n        return (!lodash_1.default.isNaN(val) && lodash_1.default.isNumber(val)) ? val : 0;\n    }\n    get parts() {\n        return {\n            day: this.getFieldValue('day'),\n            month: this.getFieldValue('month'),\n            year: this.getFieldValue('year'),\n        };\n    }\n    /**\n     * Get the format for the value string.\n     * @returns {string} - the format for the value string.\n     */\n    get format() {\n        return (0, core_1.getDayFormat)(this.component);\n    }\n    /**\n     * Return the date for this component.\n     * @param {any} value - The value to convert to a date.\n     * @returns {null|string} - The date string.\n     */\n    getDate(value) {\n        let defaults = [], day, month, year;\n        // Map positions to identifiers to get default values for each part of day\n        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        const defaultValue = value || this.component.defaultValue;\n        if (defaultValue) {\n            defaults = defaultValue.split('/').map(x => parseInt(x, 10));\n        }\n        const isModalEditClosed = this.component.modalEdit && !this.componentModal.isOpened;\n        if (this.showDay && this.refs.day) {\n            day = (this.refs.day.value === '' && !isModalEditClosed) ? '' : parseInt(this.refs.day.value, 10);\n        }\n        if (day === undefined || lodash_1.default.isNaN(day) || value) {\n            day = (defaults.length !== 3)\n                ? this.getDayWithHiddenFields(defaults).day\n                : (defaults[DAY] && !lodash_1.default.isNaN(defaults[DAY]) ? defaults[DAY] : 0);\n        }\n        if (this.showMonth && this.refs.month) {\n            // Months are 0 indexed.\n            month = (this.refs.month.value === '' && !isModalEditClosed) ? '' : parseInt(this.refs.month.value, 10);\n        }\n        if (month === undefined || lodash_1.default.isNaN(month) || value) {\n            month = (defaults.length !== 3)\n                ? this.getDayWithHiddenFields(defaults).month\n                : (defaults[MONTH] && !lodash_1.default.isNaN(defaults[MONTH]) ? defaults[MONTH] : 0);\n        }\n        if (this.showYear && this.refs.year) {\n            year = (this.refs.year.value === '' && !isModalEditClosed) ? '' : parseInt(this.refs.year.value);\n        }\n        if (year === undefined || lodash_1.default.isNaN(year) || value) {\n            year = (defaults.length !== 3)\n                ? this.getDayWithHiddenFields(defaults).year\n                : (defaults[YEAR] && !lodash_1.default.isNaN(defaults[YEAR]) ? defaults[YEAR] : 0);\n        }\n        let result;\n        if (!day && !month && !year) {\n            if (!isModalEditClosed) {\n                this.dataValue = this.emptyValue;\n                if (this.options.building) {\n                    this.triggerChange();\n                }\n            }\n            return null;\n        }\n        // add trailing zeros if the data is showed\n        day = this.showDay ? day.toString().padStart(2, 0) : '';\n        month = this.showMonth ? month.toString().padStart(2, 0) : '';\n        year = this.showYear ? year.toString().padStart(4, 0) : '';\n        if (this.component.dayFirst) {\n            result = `${day}${this.showDay && this.showMonth || this.showDay && this.showYear ? '/' : ''}${month}${this.showMonth && this.showYear ? '/' : ''}${year}`;\n        }\n        else {\n            result = `${month}${this.showDay && this.showMonth || this.showMonth && this.showYear ? '/' : ''}${day}${this.showDay && this.showYear ? '/' : ''}${year}`;\n        }\n        return result;\n    }\n    /**\n     * Return the date string for this component.\n     * @returns {string|null} - The date string for this component.\n     */\n    get date() {\n        return this.getDate();\n    }\n    /**\n     * Return the raw value.\n     * @returns {string} - The raw value of the component.\n     */\n    get validationValue() {\n        return this.dataValue;\n    }\n    getValue() {\n        const result = super.getValue();\n        return (!result) ? this.dataValue : result;\n    }\n    /**\n     * Get the value at a specific index.\n     * @param {number} index - The index to get the value from.\n     * @returns {*} - The value at index.\n     */\n    getValueAt(index) {\n        const date = this.date || this.emptyValue;\n        if (date) {\n            this.refs.input[index].value = date;\n            return this.refs.input[index].value;\n        }\n        else {\n            this.refs.input[index].value = '';\n            return null;\n        }\n    }\n    /**\n     * Get the input value of the date.\n     * @param {any} value - The value to convert to a string.\n     * @returns {string|null} - The string value of the date.\n     */\n    getValueAsString(value) {\n        if (!value) {\n            return '';\n        }\n        return this.getDate(value) || '';\n    }\n    focus(field) {\n        var _a, _b, _c;\n        if (field && typeof field === 'string' && this.refs[field]) {\n            this.refs[field].focus();\n        }\n        else if (this.dayFirst && this.showDay || !this.dayFirst && !this.showMonth && this.showDay) {\n            (_a = this.refs.day) === null || _a === void 0 ? void 0 : _a.focus();\n        }\n        else if (this.dayFirst && !this.showDay && this.showMonth || !this.dayFirst && this.showMonth) {\n            (_b = this.refs.month) === null || _b === void 0 ? void 0 : _b.focus();\n        }\n        else if (!this.showDay && !this.showDay && this.showYear) {\n            (_c = this.refs.year) === null || _c === void 0 ? void 0 : _c.focus();\n        }\n    }\n    restoreCaretPosition() {\n        var _a;\n        if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.currentSelection) {\n            const { selection, index } = this.root.currentSelection;\n            if (this.refs[index]) {\n                const input = this.refs[index];\n                const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test((i === null || i === void 0 ? void 0 : i.type) || '');\n                if (isInputRangeSelectable(input)) {\n                    input.setSelectionRange(...selection);\n                }\n            }\n        }\n    }\n    isPartialDay(value) {\n        if (!value) {\n            return true;\n        }\n        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        const values = value.split('/');\n        if (values.length < 3) {\n            return true;\n        }\n        return (values[DAY] === '00' || values[MONTH] === '00' || values[YEAR] === '0000');\n    }\n    getValidationFormat() {\n        var _a, _b, _c, _d, _e, _f;\n        let validationFormat = this.dayFirst ? 'DD-MM-YYYY' : 'MM-DD-YYYY';\n        if ((_b = (_a = this.fields) === null || _a === void 0 ? void 0 : _a.day) === null || _b === void 0 ? void 0 : _b.hide) {\n            validationFormat = validationFormat.replace('DD-', '');\n        }\n        if ((_d = (_c = this.fields) === null || _c === void 0 ? void 0 : _c.month) === null || _d === void 0 ? void 0 : _d.hide) {\n            validationFormat = validationFormat.replace('MM-', '');\n        }\n        if ((_f = (_e = this.fields) === null || _e === void 0 ? void 0 : _e.year) === null || _f === void 0 ? void 0 : _f.hide) {\n            validationFormat = validationFormat.replace('-YYYY', '');\n        }\n        return validationFormat;\n    }\n}\n// Empty value used before 9.3.x\nDayComponent.oldEmptyValue = '00/00/0000';\nexports[\"default\"] = DayComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/day/Day.js?");
 
 /***/ }),
 
@@ -5205,7 +5205,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Field_1 = __importDefault(__webpack_require__(/*! ../_classes/field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst downloadjs_1 = __importDefault(__webpack_require__(/*! downloadjs */ \"./node_modules/downloadjs/download.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst fileProcessor_1 = __importDefault(__webpack_require__(/*! ../../providers/processor/fileProcessor */ \"./lib/cjs/providers/processor/fileProcessor.js\"));\nconst browser_md5_file_1 = __importDefault(__webpack_require__(/*! browser-md5-file */ \"./node_modules/browser-md5-file/dist/index.umd.js\"));\nlet Camera;\nlet webViewCamera = 'undefined' !== typeof window ? navigator.camera : Camera;\n// canvas.toBlob polyfill.\nlet htmlCanvasElement;\nif (typeof window !== 'undefined') {\n    htmlCanvasElement = window.HTMLCanvasElement;\n}\nelse if (typeof __webpack_require__.g !== 'undefined') {\n    htmlCanvasElement = __webpack_require__.g.HTMLCanvasElement;\n}\nif (htmlCanvasElement && !htmlCanvasElement.prototype.toBlob) {\n    Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {\n        value: function (callback, type, quality) {\n            var canvas = this;\n            setTimeout(function () {\n                var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]), len = binStr.length, arr = new Uint8Array(len);\n                for (var i = 0; i < len; i++) {\n                    arr[i] = binStr.charCodeAt(i);\n                }\n                callback(new Blob([arr], { type: type || 'image/png' }));\n            });\n        }\n    });\n}\nconst createRandomString = () => Math.random().toString(36).substring(2, 15);\nclass FileComponent extends Field_1.default {\n    static schema(...extend) {\n        return Field_1.default.schema({\n            type: 'file',\n            label: 'Upload',\n            key: 'file',\n            image: false,\n            privateDownload: false,\n            imageSize: '200',\n            filePattern: '*',\n            fileMinSize: '0KB',\n            fileMaxSize: '1GB',\n            uploadOnly: false,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'File',\n            group: 'premium',\n            icon: 'file',\n            documentation: '/userguide/form-building/premium-components#file',\n            weight: 100,\n            schema: FileComponent.schema(),\n        };\n    }\n    static get serverConditionSettings() {\n        return FileComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEmpty', 'isNotEmpty'] });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];\n    }\n    init() {\n        super.init();\n        webViewCamera = navigator.camera || Camera;\n        const fileReaderSupported = (typeof FileReader !== 'undefined');\n        const formDataSupported = typeof window !== 'undefined' ? Boolean(window.FormData) : false;\n        const progressSupported = (typeof window !== 'undefined' && window.XMLHttpRequest) ? ('upload' in new XMLHttpRequest) : false;\n        this.support = {\n            filereader: fileReaderSupported,\n            formdata: formDataSupported,\n            hasWarning: !fileReaderSupported || !formDataSupported || !progressSupported,\n            progress: progressSupported,\n        };\n        this.cameraMode = false;\n        this.fileDropHidden = false;\n        this.filesToSync = {\n            filesToUpload: [],\n            filesToDelete: [],\n        };\n        this.isSyncing = false;\n        this.abortUploads = [];\n    }\n    get dataReady() {\n        return this.filesReady || Promise.resolve();\n    }\n    get defaultSchema() {\n        return FileComponent.schema();\n    }\n    loadImage(fileInfo) {\n        if (this.component.privateDownload) {\n            fileInfo.private = true;\n        }\n        return this.fileService.downloadFile(fileInfo).then((result) => result.url);\n    }\n    get emptyValue() {\n        return [];\n    }\n    getValueAsString(value, 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(this.t('videoPlayerNotFound'));\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(this.t('videoPlayerNotFound'));\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('waitFileProcessing'),\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(fileWithSameNameUploading ? 'fileWithDuplicatedNameInProgress' : 'fileWithDuplicatedNameLoaded'),\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('wrongFileType', {\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('fileTooSmall', {\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('fileTooBig', {\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('noFileService'),\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('fileProcessingFailed'),\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('readyForUpload');\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('readyForRemovingFromStorage')\n                : this.t('preparingFileToRemove') }));\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('succefullyRemoved');\n                }\n                catch (response) {\n                    fileToSync.status = 'error';\n                    fileToSync.message = typeof response === 'string' ? response : response.toString();\n                }\n                finally {\n                    this.redraw();\n                }\n                return { fileToSync };\n            })));\n        });\n    }\n    updateProgress(fileInfo, progressEvent) {\n        fileInfo.progress = parseInt(100.0 * progressEvent.loaded / progressEvent.total);\n        if (fileInfo.status !== 'progress') {\n            fileInfo.status = 'progress';\n            delete fileInfo.message;\n            this.redraw();\n        }\n        else {\n            const progress = Array.prototype.find.call(this.refs.progress, progressElement => progressElement.id === fileInfo.id);\n            progress.innerHTML = `<span class=\"visually-hidden\">${fileInfo.progress}% ${this.t('Complete')}</span>`;\n            progress.style.width = `${fileInfo.progress}%`;\n            progress.ariaValueNow = fileInfo.progress.toString();\n        }\n    }\n    getMultipartOptions(fileToSync) {\n        let count = 0;\n        return this.component.useMultipartUpload && this.component.multipart ? Object.assign(Object.assign({}, this.component.multipart), { progressCallback: (total) => {\n                count++;\n                fileToSync.status = 'progress';\n                fileToSync.progress = parseInt(100 * count / total);\n                delete fileToSync.message;\n                this.redraw();\n            }, changeMessage: (message) => {\n                fileToSync.message = message;\n                this.redraw();\n            } }) : false;\n    }\n    uploadFile(fileToSync) {\n        return __awaiter(this, void 0, void 0, function* () {\n            return yield this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, \n            // Progress callback\n            this.updateProgress.bind(this, fileToSync), fileToSync.url, fileToSync.options, fileToSync.fileKey, fileToSync.groupPermissions, fileToSync.groupResourceId, () => { }, \n            // Abort upload callback\n            (abort) => this.abortUploads.push({\n                id: fileToSync.id,\n                abort,\n            }), this.getMultipartOptions(fileToSync));\n        });\n    }\n    upload() {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!this.filesToSync.filesToUpload.length) {\n                return Promise.resolve();\n            }\n            return yield Promise.all(this.filesToSync.filesToUpload.map((fileToSync) => __awaiter(this, void 0, void 0, function* () {\n                let fileInfo = null;\n                try {\n                    if (fileToSync.isValidationError) {\n                        return {\n                            fileToSync,\n                            fileInfo,\n                        };\n                    }\n                    fileInfo = yield this.uploadFile(fileToSync);\n                    fileToSync.status = 'success';\n                    fileToSync.message = this.t('succefullyUploaded');\n                    fileInfo.originalName = fileToSync.originalName;\n                    fileInfo.hash = fileToSync.hash;\n                }\n                catch (response) {\n                    fileToSync.status = 'error';\n                    delete fileToSync.progress;\n                    fileToSync.message = typeof response === 'string'\n                        ? response\n                        : response.type === 'abort'\n                            ? this.t('Request was aborted')\n                            : response.toString();\n                    this.emit('fileUploadError', {\n                        fileToSync,\n                        response,\n                    });\n                }\n                finally {\n                    delete fileToSync.progress;\n                    this.redraw();\n                }\n                return {\n                    fileToSync,\n                    fileInfo,\n                };\n            })));\n        });\n    }\n    syncFiles() {\n        return __awaiter(this, void 0, void 0, function* () {\n            this.isSyncing = true;\n            this.fileDropHidden = true;\n            this.redraw();\n            try {\n                const [filesToDelete = [], filesToUpload = []] = yield Promise.all([this.delete(), this.upload()]);\n                this.filesToSync.filesToDelete = filesToDelete\n                    .filter(file => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'error'; })\n                    .map(file => file.fileToSync);\n                this.filesToSync.filesToUpload = filesToUpload\n                    .filter(file => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'error'; })\n                    .map(file => file.fileToSync);\n                if (!this.hasValue()) {\n                    this.dataValue = [];\n                }\n                const data = filesToUpload\n                    .filter(file => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'success'; })\n                    .map(file => file.fileInfo);\n                this.dataValue.push(...data);\n                this.triggerChange();\n                return Promise.resolve();\n            }\n            catch (err) {\n                return Promise.reject();\n            }\n            finally {\n                this.isSyncing = false;\n                this.fileDropHidden = false;\n                this.abortUploads = [];\n                this.redraw();\n            }\n        });\n    }\n    getFile(fileInfo) {\n        const { options = {} } = this.component;\n        const { fileService } = this;\n        if (!fileService) {\n            return alert('File Service not provided');\n        }\n        if (this.component.privateDownload) {\n            fileInfo.private = true;\n        }\n        fileService.downloadFile(fileInfo, options).then((file) => {\n            if (file) {\n                if (['base64', 'indexeddb'].includes(file.storage)) {\n                    (0, downloadjs_1.default)(file.url, file.originalName || file.name, file.type);\n                }\n                else {\n                    window.open(file.url, '_blank');\n                }\n            }\n        })\n            .catch((response) => {\n            // Is alert the best way to do this?\n            // User is expecting an immediate notification due to attempting to download a file.\n            alert(response);\n        });\n    }\n    focus() {\n        if ('beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n        if (this.refs.fileBrowse) {\n            this.refs.fileBrowse.focus();\n        }\n    }\n    beforeSubmit() {\n        return __awaiter(this, void 0, void 0, function* () {\n            try {\n                if (!this.autoSync) {\n                    return Promise.resolve();\n                }\n                yield this.syncFiles();\n                return this.shouldSyncFiles\n                    ? Promise.reject(this.t('synchronizationFailed'))\n                    : Promise.resolve();\n            }\n            catch (error) {\n                return Promise.reject(error.message);\n            }\n        });\n    }\n    destroy(all) {\n        this.stopVideo();\n        super.destroy(all);\n    }\n}\nexports[\"default\"] = FileComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/file/File.js?");
+eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Field_1 = __importDefault(__webpack_require__(/*! ../_classes/field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst downloadjs_1 = __importDefault(__webpack_require__(/*! downloadjs */ \"./node_modules/downloadjs/download.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst fileProcessor_1 = __importDefault(__webpack_require__(/*! ../../providers/processor/fileProcessor */ \"./lib/cjs/providers/processor/fileProcessor.js\"));\nconst browser_md5_file_1 = __importDefault(__webpack_require__(/*! browser-md5-file */ \"./node_modules/browser-md5-file/dist/index.umd.js\"));\nlet Camera;\nlet webViewCamera = 'undefined' !== typeof window ? navigator.camera : Camera;\n// canvas.toBlob polyfill.\nlet htmlCanvasElement;\nif (typeof window !== 'undefined') {\n    htmlCanvasElement = window.HTMLCanvasElement;\n}\nelse if (typeof __webpack_require__.g !== 'undefined') {\n    htmlCanvasElement = __webpack_require__.g.HTMLCanvasElement;\n}\nif (htmlCanvasElement && !htmlCanvasElement.prototype.toBlob) {\n    Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {\n        value: function (callback, type, quality) {\n            var canvas = this;\n            setTimeout(function () {\n                var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]), len = binStr.length, arr = new Uint8Array(len);\n                for (var i = 0; i < len; i++) {\n                    arr[i] = binStr.charCodeAt(i);\n                }\n                callback(new Blob([arr], { type: type || 'image/png' }));\n            });\n        }\n    });\n}\nconst createRandomString = () => Math.random().toString(36).substring(2, 15);\nclass FileComponent extends Field_1.default {\n    static schema(...extend) {\n        return Field_1.default.schema({\n            type: 'file',\n            label: 'Upload',\n            key: 'file',\n            image: false,\n            privateDownload: false,\n            imageSize: '200',\n            filePattern: '*',\n            fileMinSize: '0KB',\n            fileMaxSize: '1GB',\n            uploadOnly: false,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'File',\n            group: 'premium',\n            icon: 'file',\n            documentation: '/userguide/form-building/premium-components#file',\n            weight: 100,\n            schema: FileComponent.schema(),\n        };\n    }\n    static get serverConditionSettings() {\n        return FileComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEmpty', 'isNotEmpty'] });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];\n    }\n    init() {\n        super.init();\n        webViewCamera = navigator.camera || Camera;\n        const fileReaderSupported = (typeof FileReader !== 'undefined');\n        const formDataSupported = typeof window !== 'undefined' ? Boolean(window.FormData) : false;\n        const progressSupported = (typeof window !== 'undefined' && window.XMLHttpRequest) ? ('upload' in new XMLHttpRequest) : false;\n        this.support = {\n            filereader: fileReaderSupported,\n            formdata: formDataSupported,\n            hasWarning: !fileReaderSupported || !formDataSupported || !progressSupported,\n            progress: progressSupported,\n        };\n        this.cameraMode = false;\n        this.fileDropHidden = false;\n        this.filesToSync = {\n            filesToUpload: [],\n            filesToDelete: [],\n        };\n        this.isSyncing = false;\n        this.abortUploads = [];\n    }\n    get dataReady() {\n        return this.filesReady || Promise.resolve();\n    }\n    get defaultSchema() {\n        return FileComponent.schema();\n    }\n    loadImage(fileInfo) {\n        if (this.component.privateDownload) {\n            fileInfo.private = true;\n        }\n        // pass the component to the downloadFile method\n        return this.fileService.downloadFile(fileInfo, this.component).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(this.t('videoPlayerNotFound'));\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(this.t('videoPlayerNotFound'));\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('waitFileProcessing'),\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(fileWithSameNameUploading ? 'fileWithDuplicatedNameInProgress' : 'fileWithDuplicatedNameLoaded'),\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('wrongFileType', {\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('fileTooSmall', {\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('fileTooBig', {\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('noFileService'),\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('fileProcessingFailed'),\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('readyForUpload');\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('readyForRemovingFromStorage')\n                : this.t('preparingFileToRemove') }));\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('succefullyRemoved');\n                }\n                catch (response) {\n                    fileToSync.status = 'error';\n                    fileToSync.message = typeof response === 'string' ? response : response.toString();\n                }\n                finally {\n                    this.redraw();\n                }\n                return { fileToSync };\n            })));\n        });\n    }\n    updateProgress(fileInfo, progressEvent) {\n        fileInfo.progress = parseInt(100.0 * progressEvent.loaded / progressEvent.total);\n        if (fileInfo.status !== 'progress') {\n            fileInfo.status = 'progress';\n            delete fileInfo.message;\n            this.redraw();\n        }\n        else {\n            const progress = Array.prototype.find.call(this.refs.progress, progressElement => progressElement.id === fileInfo.id);\n            progress.innerHTML = `<span class=\"visually-hidden\">${fileInfo.progress}% ${this.t('Complete')}</span>`;\n            progress.style.width = `${fileInfo.progress}%`;\n            progress.ariaValueNow = fileInfo.progress.toString();\n        }\n    }\n    getMultipartOptions(fileToSync) {\n        let count = 0;\n        return this.component.useMultipartUpload && this.component.multipart ? Object.assign(Object.assign({}, this.component.multipart), { progressCallback: (total) => {\n                count++;\n                fileToSync.status = 'progress';\n                fileToSync.progress = parseInt(100 * count / total);\n                delete fileToSync.message;\n                this.redraw();\n            }, changeMessage: (message) => {\n                fileToSync.message = message;\n                this.redraw();\n            } }) : false;\n    }\n    uploadFile(fileToSync) {\n        return __awaiter(this, void 0, void 0, function* () {\n            return yield this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, \n            // Progress callback\n            this.updateProgress.bind(this, fileToSync), fileToSync.url, fileToSync.options, fileToSync.fileKey, fileToSync.groupPermissions, fileToSync.groupResourceId, () => { }, \n            // Abort upload callback\n            (abort) => this.abortUploads.push({\n                id: fileToSync.id,\n                abort,\n            }), this.getMultipartOptions(fileToSync));\n        });\n    }\n    upload() {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!this.filesToSync.filesToUpload.length) {\n                return Promise.resolve();\n            }\n            return yield Promise.all(this.filesToSync.filesToUpload.map((fileToSync) => __awaiter(this, void 0, void 0, function* () {\n                let fileInfo = null;\n                try {\n                    if (fileToSync.isValidationError) {\n                        return {\n                            fileToSync,\n                            fileInfo,\n                        };\n                    }\n                    fileInfo = yield this.uploadFile(fileToSync);\n                    fileToSync.status = 'success';\n                    fileToSync.message = this.t('succefullyUploaded');\n                    fileInfo.originalName = fileToSync.originalName;\n                    fileInfo.hash = fileToSync.hash;\n                }\n                catch (response) {\n                    fileToSync.status = 'error';\n                    delete fileToSync.progress;\n                    fileToSync.message = typeof response === 'string'\n                        ? response\n                        : response.type === 'abort'\n                            ? this.t('Request was aborted')\n                            : response.toString();\n                    this.emit('fileUploadError', {\n                        fileToSync,\n                        response,\n                    });\n                }\n                finally {\n                    delete fileToSync.progress;\n                    this.redraw();\n                }\n                return {\n                    fileToSync,\n                    fileInfo,\n                };\n            })));\n        });\n    }\n    syncFiles() {\n        return __awaiter(this, void 0, void 0, function* () {\n            this.isSyncing = true;\n            this.fileDropHidden = true;\n            this.redraw();\n            try {\n                const [filesToDelete = [], filesToUpload = []] = yield Promise.all([this.delete(), this.upload()]);\n                this.filesToSync.filesToDelete = filesToDelete\n                    .filter(file => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'error'; })\n                    .map(file => file.fileToSync);\n                this.filesToSync.filesToUpload = filesToUpload\n                    .filter(file => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'error'; })\n                    .map(file => file.fileToSync);\n                if (!this.hasValue()) {\n                    this.dataValue = [];\n                }\n                const data = filesToUpload\n                    .filter(file => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'success'; })\n                    .map(file => file.fileInfo);\n                this.dataValue.push(...data);\n                this.triggerChange();\n                return Promise.resolve();\n            }\n            catch (err) {\n                return Promise.reject();\n            }\n            finally {\n                this.isSyncing = false;\n                this.fileDropHidden = false;\n                this.abortUploads = [];\n                this.redraw();\n            }\n        });\n    }\n    getFile(fileInfo) {\n        const { options = {} } = this.component;\n        const { fileService } = this;\n        if (!fileService) {\n            return alert('File Service not provided');\n        }\n        if (this.component.privateDownload) {\n            fileInfo.private = true;\n        }\n        fileService.downloadFile(fileInfo, options).then((file) => {\n            if (file) {\n                if (['base64', 'indexeddb'].includes(file.storage)) {\n                    (0, downloadjs_1.default)(file.url, file.originalName || file.name, file.type);\n                }\n                else {\n                    window.open(file.url, '_blank');\n                }\n            }\n        })\n            .catch((response) => {\n            // Is alert the best way to do this?\n            // User is expecting an immediate notification due to attempting to download a file.\n            alert(response);\n        });\n    }\n    focus() {\n        if ('beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n        if (this.refs.fileBrowse) {\n            this.refs.fileBrowse.focus();\n        }\n    }\n    beforeSubmit() {\n        return __awaiter(this, void 0, void 0, function* () {\n            try {\n                if (!this.autoSync) {\n                    return Promise.resolve();\n                }\n                yield this.syncFiles();\n                return this.shouldSyncFiles\n                    ? Promise.reject(this.t('synchronizationFailed'))\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?");
 
 /***/ }),
 
@@ -5216,7 +5216,7 @@ eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _argument
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n/* eslint-disable max-statements */\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Component_1 = __importDefault(__webpack_require__(/*! ../_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst ComponentModal_1 = __importDefault(__webpack_require__(/*! ../_classes/componentModal/ComponentModal */ \"./lib/cjs/components/_classes/componentModal/ComponentModal.js\"));\nconst eventemitter3_1 = __importDefault(__webpack_require__(/*! eventemitter3 */ \"./node_modules/eventemitter3/index.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst Form_1 = __importDefault(__webpack_require__(/*! ../../Form */ \"./lib/cjs/Form.js\"));\nclass FormComponent extends Component_1.default {\n    static schema(...extend) {\n        return Component_1.default.schema({\n            label: 'Form',\n            type: 'form',\n            key: 'form',\n            src: '',\n            reference: true,\n            form: '',\n            path: '',\n            tableView: true,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Nested Form',\n            icon: 'wpforms',\n            group: 'premium',\n            documentation: '/userguide/form-building/premium-components#nested-form',\n            weight: 110,\n            schema: FormComponent.schema()\n        };\n    }\n    static savedValueTypes() {\n        return [utils_1.componentValueTypes.object];\n    }\n    init() {\n        super.init();\n        this.formObj = {\n            display: this.component.display,\n            settings: this.component.settings,\n            components: this.component.components\n        };\n        this.valueChanged = false;\n        this.subForm = null;\n        this.formSrc = '';\n        if (this.component.src) {\n            this.formSrc = this.component.src;\n        }\n        if (!this.component.src &&\n            !this.options.formio &&\n            (this.component.form || this.component.path)) {\n            if (this.component.project) {\n                this.formSrc = Formio_1.Formio.getBaseUrl();\n                // Check to see if it is a MongoID.\n                if ((0, utils_1.isMongoId)(this.component.project)) {\n                    this.formSrc += '/project';\n                }\n                this.formSrc += `/${this.component.project}`;\n                this.options.project = this.formSrc;\n            }\n            else {\n                this.formSrc = Formio_1.Formio.getProjectUrl();\n                this.options.project = this.formSrc;\n            }\n            if (this.component.form) {\n                if ((0, utils_1.isMongoId)(this.component.form)) {\n                    this.formSrc += `/form/${this.component.form}`;\n                }\n                else {\n                    this.formSrc += `/${this.component.form}`;\n                }\n            }\n            else if (this.component.path) {\n                this.formSrc += `/${this.component.path}`;\n            }\n        }\n        // Build the source based on the root src path.\n        if (!this.formSrc && this.options.formio) {\n            const rootSrc = this.options.formio.formsUrl;\n            if (this.component.form && (0, utils_1.isMongoId)(this.component.form)) {\n                this.formSrc = `${rootSrc}/${this.component.form}`;\n            }\n            else {\n                const formPath = this.component.path || this.component.form;\n                this.formSrc = `${rootSrc.replace(/\\/form$/, '')}/${formPath}`;\n            }\n        }\n        if (this.builderMode && this.component.hasOwnProperty('formRevision')) {\n            this.component.revision = this.component.formRevision;\n            delete this.component.formRevision;\n        }\n        // Add revision version if set.\n        if (this.component.revision || this.component.revision === 0 ||\n            this.component.formRevision || this.component.formRevision === 0\n            || this.component.revisionId) {\n            this.setFormRevision(this.component.revisionId || this.component.revision || this.component.formRevision);\n        }\n        return this.createSubForm();\n    }\n    get dataReady() {\n        return this.subFormReady || Promise.resolve();\n    }\n    get defaultValue() {\n        // Not not provide a default value unless the subform is ready so that it will initialize correctly.\n        return this.subForm ? super.defaultValue : null;\n    }\n    get defaultSchema() {\n        return FormComponent.schema();\n    }\n    get emptyValue() {\n        return { data: {} };\n    }\n    get ready() {\n        return this.subFormReady || Promise.resolve();\n    }\n    get useOriginalRevision() {\n        var _a, _b;\n        return ((_a = this.component) === null || _a === void 0 ? void 0 : _a.useOriginalRevision) && !!((_b = this.formObj) === null || _b === void 0 ? void 0 : _b.revisions);\n    }\n    setFormRevision(rev) {\n        // Remove current revisions from src if it is\n        this.formSrc = this.formSrc.replace(/\\/v\\/[0-9a-z]+/, '');\n        const revNumber = Number.parseInt(rev);\n        if (!isNaN(revNumber)) {\n            this.subFormRevision = rev;\n            this.formSrc += `/v/${rev}`;\n        }\n        else {\n            this.subFormRevision = undefined;\n        }\n    }\n    getComponent(path) {\n        if (!this.subForm) {\n            return null;\n        }\n        return this.subForm.getComponent(path);\n    }\n    /* eslint-disable max-statements */\n    getSubOptions(options = {}) {\n        options.events = this.createEmitter();\n        // Make sure to not show the submit button in wizards in the nested forms.\n        lodash_1.default.set(options, 'buttonSettings.showSubmit', false);\n        // Set the parent option to the subform so those references are stable when the subform is created\n        options.parent = this;\n        if (!this.options) {\n            return options;\n        }\n        if (this.options.base) {\n            options.base = this.options.base;\n        }\n        if (this.options.project) {\n            options.project = this.options.project;\n        }\n        if (this.options.readOnly || this.component.disabled) {\n            options.readOnly = this.options.readOnly || this.component.disabled;\n        }\n        if (this.options.breadcrumbSettings) {\n            options.breadcrumbSettings = this.options.breadcrumbSettings;\n        }\n        if (this.options.buttonSettings) {\n            options.buttonSettings = lodash_1.default.clone(this.options.buttonSettings);\n        }\n        if (this.options.viewAsHtml) {\n            options.viewAsHtml = this.options.viewAsHtml;\n        }\n        if (this.options.language) {\n            options.language = this.options.language;\n        }\n        if (this.options.template) {\n            options.template = this.options.template;\n        }\n        if (this.options.templates) {\n            options.templates = this.options.templates;\n        }\n        if (this.options.renderMode) {\n            options.renderMode = this.options.renderMode;\n        }\n        if (this.options.attachMode) {\n            options.attachMode = this.options.attachMode;\n        }\n        if (this.options.iconset) {\n            options.iconset = this.options.iconset;\n        }\n        if (this.options.fileService) {\n            options.fileService = this.options.fileService;\n        }\n        if (this.options.onChange) {\n            options.onChange = this.options.onChange;\n        }\n        if (this.options.preview) {\n            options.preview = this.options.preview;\n        }\n        if (this.options.inEditGrid) {\n            options.inEditGrid = this.options.inEditGrid;\n        }\n        if (this.options.saveDraft) {\n            options.saveDraft = this.options.saveDraft;\n            options.formio = new Formio_1.Formio(this.formSrc);\n        }\n        if (this.options.saveDraftThrottle) {\n            options.saveDraftThrottle = this.options.saveDraftThrottle;\n        }\n        if (this.options.skipDraftRestore) {\n            options.skipDraftRestore = this.options.skipDraftRestore;\n        }\n        options.parent = this;\n        return options;\n    }\n    /* eslint-enable max-statements */\n    render() {\n        if (this.builderMode) {\n            return super.render(this.t(this.component.label || 'nestedForm'));\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 this.t('noDataProvided');\n        }\n        if (!value.data && value._id) {\n            return value._id;\n        }\n        if (!value.data || !Object.keys(value.data).length) {\n            return this.t('noDataProvided');\n        }\n        if (options === null || options === void 0 ? void 0 : options.email) {\n            let result = (`\n        <table border=\"1\" style=\"width:100%\">\n          <tbody>\n      `);\n            this.everyComponent((component) => {\n                if (component.isInputComponent && component.visible && !component.skipInEmail) {\n                    result += (`\n            <tr>\n              <th style=\"padding: 5px 10px;\">${component.label}</th>\n              <td style=\"width:100%;padding:5px 10px;\">${component.getView(component.dataValue, options)}</td>\n            </tr>\n          `);\n                }\n            }, Object.assign(Object.assign({}, options), { fromRoot: true }));\n            result += (`\n          </tbody>\n        </table>\n      `);\n            return result;\n        }\n        if (lodash_1.default.isEmpty(value)) {\n            return '';\n        }\n        return '[Complex Data]';\n    }\n    attach(element) {\n        // Don't attach in builder.\n        if (this.builderMode) {\n            return super.attach(element);\n        }\n        return super.attach(element)\n            .then(() => {\n            if (this.isSubFormLazyLoad() && !this.hasLoadedForm && !this.subFormLoading) {\n                this.createSubForm(true);\n            }\n            return this.subFormReady.then(() => {\n                this.empty(element);\n                if (this.options.builder) {\n                    this.setContent(element, this.ce('div', {\n                        class: 'text-muted text-center p-2'\n                    }, this.text(this.formObj.title)));\n                    return;\n                }\n                this.setContent(element, this.render());\n                if (this.subForm) {\n                    if (this.isNestedWizard) {\n                        element = this.root.element;\n                    }\n                    this.subForm.attach(element);\n                    this.valueChanged = this.hasSetValue;\n                    if (!this.valueChanged && this.dataValue.state !== 'submitted') {\n                        this.setDefaultValue();\n                    }\n                    else {\n                        this.restoreValue();\n                    }\n                }\n                if (!this.builderMode && this.component.modalEdit) {\n                    const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;\n                    const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;\n                    this.componentModal = new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);\n                    this.subForm.element = this.componentModal.refs.componentContent || this.subForm.element;\n                    this.setOpenModalElement();\n                }\n                this.calculateValue();\n            });\n        });\n    }\n    detach() {\n        if (this.subForm) {\n            this.subForm.detach();\n        }\n        super.detach();\n    }\n    get currentForm() {\n        return this._currentForm;\n    }\n    get hasLoadedForm() {\n        return this.formObj\n            && this.formObj.components\n            && Array.isArray(this.formObj.components)\n            && this.formObj.components.length;\n    }\n    set currentForm(instance) {\n        this._currentForm = instance;\n        if (!this.subForm) {\n            return;\n        }\n        this.subForm.getComponents().forEach(component => {\n            component.currentForm = this;\n        });\n    }\n    get isRevisionChanged() {\n        return lodash_1.default.isNumber(this.subFormRevision)\n            && lodash_1.default.isNumber(this.formObj._vid)\n            && this.formObj._vid !== this.subFormRevision;\n    }\n    get subFormData() {\n        var _a;\n        return ((_a = this.dataValue) === null || _a === void 0 ? void 0 : _a.data) || {};\n    }\n    destroy(all = false) {\n        if (this.subForm) {\n            this.subForm.destroy(all);\n            this.subForm = null;\n            this.subFormReady = null;\n        }\n        super.destroy(all);\n    }\n    redraw() {\n        if (this.subForm) {\n            this.subForm.form = this.formObj;\n            this.setSubFormDisabled(this.subForm);\n        }\n        return super.redraw();\n    }\n    /**\n     * Pass everyComponent to subform.\n     * @param {any[]} args - Arguments to pass through to the subform's everyComponent method.\n     * @returns {*} - The result of the subform's everyComponent method.\n     */\n    everyComponent(...args) {\n        if (this.subForm) {\n            this.subForm.everyComponent(...args);\n        }\n    }\n    setSubFormDisabled(subForm) {\n        subForm.disabled = this.disabled; // When the Nested Form is disabled make the subForm disabled\n    }\n    updateSubWizards(subForm) {\n        var _a, _b;\n        if (this.isNestedWizard && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.subWizards) && ((_b = subForm === null || subForm === void 0 ? void 0 : subForm._form) === null || _b === void 0 ? void 0 : _b.display) === 'wizard') {\n            const existedForm = this.root.subWizards.findIndex(form => form.component.form === this.component.form);\n            if (existedForm !== -1) {\n                this.root.subWizards[existedForm] = this;\n            }\n            else {\n                this.root.subWizards.push(this);\n            }\n            this.emit('subWizardsUpdated', subForm);\n        }\n    }\n    /**\n     * Create a subform instance.\n     * @param {boolean} [fromAttach] - This function is being called from an `attach` method.\n     * @returns {*} - The subform instance.\n     */\n    createSubForm(fromAttach) {\n        this.subFormReady = this.loadSubForm(fromAttach).then((form) => {\n            if (!form) {\n                return;\n            }\n            // Iterate through every component and hide the submit button.\n            (0, utils_1.eachComponent)(form.components, (component) => {\n                this.hideSubmitButton(component);\n            });\n            // If the subform is already created then destroy the old one.\n            if (this.subForm) {\n                this.subForm.destroy();\n            }\n            // Render the form.\n            return (new Form_1.default(form, this.getSubOptions())).ready.then((instance) => {\n                this.subForm = instance;\n                this.subForm.currentForm = this;\n                this.subForm.parentVisible = this.visible;\n                const componentsMap = this.componentsMap;\n                const formComponentsMap = this.subForm.componentsMap;\n                lodash_1.default.assign(componentsMap, formComponentsMap);\n                this.component.components = this.subForm.components.map((comp) => comp.component);\n                this.subForm.on('change', () => {\n                    if (this.subForm) {\n                        this.dataValue = this.subForm.getValue();\n                        this.triggerChange({\n                            noEmit: true\n                        });\n                    }\n                });\n                this.subForm.url = this.formSrc;\n                this.subForm.nosubmit = true;\n                this.subForm.root = this.root;\n                this.subForm.localRoot = this.isNestedWizard ? this.localRoot : this.subForm;\n                this.restoreValue();\n                this.valueChanged = this.hasSetValue;\n                this.onChange();\n                return this.subForm;\n            }).catch((err) => {\n                console.log(err);\n            });\n        }).then((subForm) => {\n            this.updateSubWizards(subForm);\n            return subForm;\n        });\n        return this.subFormReady;\n    }\n    hideSubmitButton(component) {\n        const isSubmitButton = component.type === 'button' && (component.action === 'submit' || !component.action);\n        if (isSubmitButton) {\n            component.hidden = true;\n            // clearOnHide no longer clears from the JSON `hidden` flag, so we make the button conditionally hidden to clear its data\n            component.customConditional = 'show = false';\n        }\n    }\n    /**\n     * Load the subform.\n     * @param {boolean} fromAttach - This function is being called from an `attach` method.\n     * @returns {Promise} - The promise that resolves when the subform is loaded.\n     */\n    loadSubForm(fromAttach) {\n        var _a, _b, _c, _d, _e;\n        if (this.builderMode || this.conditionallyHidden || (this.isSubFormLazyLoad() && !fromAttach)) {\n            return Promise.resolve();\n        }\n        if (this.hasLoadedForm && !this.isRevisionChanged &&\n            !(this.options.pdf && ((_a = this.component) === null || _a === void 0 ? void 0 : _a.useOriginalRevision) && lodash_1.default.isNull(this.subForm) && !this.subFormLoading)) {\n            // Pass config down to sub forms.\n            if (this.root && this.root.form && this.root.form.config && !this.formObj.config) {\n                this.formObj.config = this.root.form.config;\n            }\n            return Promise.resolve(this.formObj);\n        }\n        else if (this.formSrc) {\n            this.subFormLoading = true;\n            const options = ((_c = (_b = this.root) === null || _b === void 0 ? void 0 : _b.formio) === null || _c === void 0 ? void 0 : _c.base) && ((_e = (_d = this.root) === null || _d === void 0 ? void 0 : _d.formio) === null || _e === void 0 ? void 0 : _e.projectUrl)\n                ? {\n                    base: this.root.formio.base,\n                    project: this.root.formio.projectUrl,\n                }\n                : {};\n            return (new Formio_1.Formio(this.formSrc, options)).loadForm({ params: { live: 1 } })\n                .then((formObj) => {\n                this.formObj = formObj;\n                if (this.options.pdf && this.component.useOriginalRevision) {\n                    this.formObj.display = 'form';\n                }\n                this.subFormLoading = false;\n                return formObj;\n            })\n                .catch((err) => {\n                console.log(err);\n                return null;\n            });\n        }\n        return Promise.resolve();\n    }\n    checkComponentConditions(data, flags, row) {\n        const visible = super.checkComponentConditions(data, flags, row);\n        // Return if already hidden\n        if (!visible) {\n            return visible;\n        }\n        if (this.subForm) {\n            return this.subForm.checkConditions(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.conditionallyHidden;\n    }\n    /**\n     * Returns the data for the subform.\n     * @returns {*} - the data for the subform.\n     */\n    getSubFormData() {\n        if (lodash_1.default.get(this.subForm, 'form.display') === 'pdf') {\n            return this.subForm.getSubmission();\n        }\n        else {\n            return Promise.resolve(this.dataValue);\n        }\n    }\n    /**\n     * Submit the subform if configured to do so.\n     * @returns {Promise} - The promise that resolves when the subform is submitted.\n     */\n    submitSubForm() {\n        // If we wish to submit the form on next page, then do that here.\n        if (this.shouldSubmit) {\n            return this.subFormReady.then(() => {\n                if (!this.subForm) {\n                    return this.dataValue;\n                }\n                this.subForm.nosubmit = false;\n                this.subForm.submitted = true;\n                return this.subForm.submitForm({}, true).then(result => {\n                    this.subForm.loading = false;\n                    this.subForm.showAllErrors = false;\n                    this.dataValue = result.submission;\n                    return this.dataValue;\n                }).catch(err => {\n                    this.subForm.showAllErrors = true;\n                    this.subForm.onSubmissionError(err);\n                    return Promise.reject(err);\n                });\n            });\n        }\n        return this.getSubFormData();\n    }\n    /**\n     * Submit the form before the next page is triggered.\n     * @param {Function} next - The function to trigger the next page.\n     * @returns {Promise} - The promise that resolves when the subform submission is complete (if necessary) and the next page is triggered.\n     */\n    beforePage(next) {\n        // Should not submit child forms if we are going to the previous page\n        if (!next) {\n            return super.beforePage(next);\n        }\n        return this.submitSubForm(true).then(() => super.beforePage(next));\n    }\n    /**\n     * Submit the form before the whole form is triggered.\n     * @returns {Promise} - The promise that resolves when the subform submission is complete (if necessary) and the form is submitted.\n     */\n    beforeSubmit() {\n        var _a, _b, _c;\n        const submission = this.dataValue;\n        // Cancel triggered saveDraft\n        if (((_a = this.subForm) === null || _a === void 0 ? void 0 : _a.draftEnabled) && ((_b = this.subForm.triggerSaveDraft) === null || _b === void 0 ? void 0 : _b.cancel)) {\n            this.subForm.triggerSaveDraft.cancel();\n        }\n        const isAlreadySubmitted = submission && submission._id && submission.form;\n        const isDraftSubmission = this.options.saveDraft && submission.state === 'draft';\n        // This submission has already been submitted, so just return the reference data.\n        if (isAlreadySubmitted && !((_c = this.subForm) === null || _c === void 0 ? void 0 : _c.wizard) && !isDraftSubmission) {\n            this.dataValue = submission;\n            return Promise.resolve(this.dataValue);\n        }\n        return this.submitSubForm(false)\n            .then(() => {\n            return this.dataValue;\n        })\n            .then(() => super.beforeSubmit());\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(this.t('subformSubmissionLoadingError', { submissionId: submission._id }), err);\n            });\n        }\n        else {\n            this.onSetSubFormValue(submission, flags);\n        }\n    }\n    /**\n     * Sets the subform value\n     * @param {object|null|undefined} submission - The submission to set.\n     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.\n     * @returns {void}\n     */\n    onSetSubFormValue(submission, flags) {\n        this.subForm.setValue(submission, flags);\n    }\n    isEmpty(value = this.dataValue) {\n        return value === null || lodash_1.default.isEqual(value, this.emptyValue) || (this.areAllComponentsEmpty(value === null || value === void 0 ? void 0 : value.data) && !(value === null || value === void 0 ? void 0 : value._id));\n    }\n    areAllComponentsEmpty(data) {\n        let res = true;\n        if (this.subForm) {\n            this.subForm.everyComponent((comp) => {\n                const componentValue = lodash_1.default.get(data, comp.key);\n                res &= comp.isEmpty(componentValue);\n            });\n        }\n        else {\n            res = false;\n        }\n        return res;\n    }\n    getValue() {\n        if (this.subForm) {\n            return this.subForm.getValue();\n        }\n        return this.dataValue;\n    }\n    get errors() {\n        let errors = super.errors;\n        if (this.subForm) {\n            errors = errors.concat(this.subForm.errors);\n        }\n        return errors;\n    }\n    updateSubFormVisibility() {\n        if (this.subForm) {\n            this.subForm.parentVisible = this.visible;\n        }\n    }\n    /**\n     * Determines if this form is a Nested Wizard\n     * which means it should be a Wizard itself and should be a direct child of a Wizard's page\n     * @returns {boolean} - TRUE if this form is a Nested Wizard, FALSE otherwise\n     */\n    get isNestedWizard() {\n        var _a, _b, _c, _d, _e;\n        return ((_b = (_a = this.subForm) === null || _a === void 0 ? void 0 : _a._form) === null || _b === void 0 ? void 0 : _b.display) === 'wizard' && ((_e = (_d = (_c = this.parent) === null || _c === void 0 ? void 0 : _c.parent) === null || _d === void 0 ? void 0 : _d._form) === null || _e === void 0 ? void 0 : _e.display) === 'wizard';\n    }\n    get visible() {\n        return super.visible;\n    }\n    set visible(value) {\n        const isNestedWizard = this.isNestedWizard;\n        if (this._visible !== value) {\n            this._visible = value;\n            // Form doesn't load if hidden. If it becomes visible, create the form.\n            if (!this.subForm && value) {\n                this.createSubForm();\n                this.subFormReady.then(() => {\n                    this.updateSubFormVisibility();\n                    this.clearOnHide();\n                });\n                this.redraw();\n                return;\n            }\n            this.updateSubFormVisibility();\n            this.clearOnHide();\n            isNestedWizard ? this.rebuild() : this.redraw();\n        }\n        if (!value && isNestedWizard) {\n            this.root.redraw();\n        }\n    }\n    get parentVisible() {\n        return super.parentVisible;\n    }\n    set parentVisible(value) {\n        if (this._parentVisible !== value) {\n            this._parentVisible = value;\n            this.clearOnHide();\n            // Form doesn't load if hidden. If it becomes visible, create the form.\n            if (!this.subForm && value) {\n                this.createSubForm();\n                this.subFormReady.then(() => {\n                    this.updateSubFormVisibility();\n                });\n                this.redraw();\n                return;\n            }\n            this.updateSubFormVisibility();\n            this.redraw();\n        }\n    }\n    isInternalEvent(event) {\n        switch (event) {\n            case 'focus':\n            case 'blur':\n            case 'componentChange':\n            case 'componentError':\n            case 'error':\n            case 'formLoad':\n            case 'languageChanged':\n            case 'render':\n            case 'checkValidity':\n            case 'initialized':\n            case 'submit':\n            case 'submitButton':\n            case 'nosubmit':\n            case 'updateComponent':\n            case 'submitDone':\n            case 'submissionDeleted':\n            case 'requestDone':\n            case 'nextPage':\n            case 'prevPage':\n            case 'wizardNavigationClicked':\n            case 'updateWizardNav':\n            case 'restoreDraft':\n            case 'saveDraft':\n            case 'saveComponent':\n            case 'pdfUploaded':\n                return true;\n            default:\n                return false;\n        }\n    }\n    createEmitter() {\n        const emitter = new eventemitter3_1.default();\n        const nativeEmit = emitter.emit;\n        const that = this;\n        emitter.emit = function (event, ...args) {\n            const eventType = event.replace(`${that.options.namespace}.`, '');\n            nativeEmit.call(this, event, ...args);\n            if (!that.isInternalEvent(eventType)) {\n                that.emit(eventType, ...args);\n            }\n        };\n        return emitter;\n    }\n    deleteValue() {\n        super.setValue(null, {\n            noUpdateEvent: true,\n            noDefault: true\n        });\n        this.unset();\n    }\n}\nexports[\"default\"] = FormComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/form/Form.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n/* eslint-disable max-statements */\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Component_1 = __importDefault(__webpack_require__(/*! ../_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst ComponentModal_1 = __importDefault(__webpack_require__(/*! ../_classes/componentModal/ComponentModal */ \"./lib/cjs/components/_classes/componentModal/ComponentModal.js\"));\nconst eventemitter3_1 = __importDefault(__webpack_require__(/*! eventemitter3 */ \"./node_modules/eventemitter3/index.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst Form_1 = __importDefault(__webpack_require__(/*! ../../Form */ \"./lib/cjs/Form.js\"));\nclass FormComponent extends Component_1.default {\n    static schema(...extend) {\n        return Component_1.default.schema({\n            label: 'Form',\n            type: 'form',\n            key: 'form',\n            src: '',\n            reference: true,\n            form: '',\n            path: '',\n            tableView: true,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Nested Form',\n            icon: 'wpforms',\n            group: 'premium',\n            documentation: '/userguide/form-building/premium-components#nested-form',\n            weight: 110,\n            schema: FormComponent.schema()\n        };\n    }\n    static savedValueTypes() {\n        return [utils_1.componentValueTypes.object];\n    }\n    init() {\n        super.init();\n        this.formObj = {\n            display: this.component.display,\n            settings: this.component.settings,\n            components: this.component.components\n        };\n        this.valueChanged = false;\n        this.subForm = null;\n        this.formSrc = '';\n        if (this.component.src) {\n            this.formSrc = this.component.src;\n        }\n        if (!this.component.src &&\n            !this.options.formio &&\n            (this.component.form || this.component.path)) {\n            if (this.component.project) {\n                this.formSrc = Formio_1.Formio.getBaseUrl();\n                // Check to see if it is a MongoID.\n                if ((0, utils_1.isMongoId)(this.component.project)) {\n                    this.formSrc += '/project';\n                }\n                this.formSrc += `/${this.component.project}`;\n                this.options.project = this.formSrc;\n            }\n            else {\n                this.formSrc = Formio_1.Formio.getProjectUrl();\n                this.options.project = this.formSrc;\n            }\n            if (this.component.form) {\n                if ((0, utils_1.isMongoId)(this.component.form)) {\n                    this.formSrc += `/form/${this.component.form}`;\n                }\n                else {\n                    this.formSrc += `/${this.component.form}`;\n                }\n            }\n            else if (this.component.path) {\n                this.formSrc += `/${this.component.path}`;\n            }\n        }\n        // Build the source based on the root src path.\n        if (!this.formSrc && this.options.formio) {\n            const rootSrc = this.options.formio.formsUrl;\n            if (this.component.form && (0, utils_1.isMongoId)(this.component.form)) {\n                this.formSrc = `${rootSrc}/${this.component.form}`;\n            }\n            else {\n                const formPath = this.component.path || this.component.form;\n                this.formSrc = `${rootSrc.replace(/\\/form$/, '')}/${formPath}`;\n            }\n        }\n        if (this.builderMode && this.component.hasOwnProperty('formRevision')) {\n            this.component.revision = this.component.formRevision;\n            delete this.component.formRevision;\n        }\n        // Add revision version if set.\n        if (this.component.revision || this.component.revision === 0 ||\n            this.component.formRevision || this.component.formRevision === 0\n            || this.component.revisionId) {\n            this.setFormRevision(this.component.revisionId || this.component.revision || this.component.formRevision);\n        }\n        return this.createSubForm();\n    }\n    get dataReady() {\n        return this.subFormReady || Promise.resolve();\n    }\n    get defaultValue() {\n        // Not not provide a default value unless the subform is ready so that it will initialize correctly.\n        return this.subForm ? super.defaultValue : null;\n    }\n    get defaultSchema() {\n        return FormComponent.schema();\n    }\n    get emptyValue() {\n        return { data: {} };\n    }\n    get ready() {\n        return this.subFormReady || Promise.resolve();\n    }\n    get useOriginalRevision() {\n        var _a, _b;\n        return ((_a = this.component) === null || _a === void 0 ? void 0 : _a.useOriginalRevision) && !!((_b = this.formObj) === null || _b === void 0 ? void 0 : _b.revisions);\n    }\n    setFormRevision(rev) {\n        // Remove current revisions from src if it is\n        this.formSrc = this.formSrc.replace(/\\/v\\/[0-9a-z]+/, '');\n        const revNumber = Number.parseInt(rev);\n        if (!isNaN(revNumber)) {\n            this.subFormRevision = rev;\n            this.formSrc += `/v/${rev}`;\n        }\n        else {\n            this.subFormRevision = undefined;\n        }\n    }\n    getComponent(path) {\n        if (!this.subForm) {\n            return null;\n        }\n        return this.subForm.getComponent(path);\n    }\n    /* eslint-disable max-statements */\n    getSubOptions(options = {}) {\n        options.events = this.createEmitter();\n        // Make sure to not show the submit button in wizards in the nested forms.\n        lodash_1.default.set(options, 'buttonSettings.showSubmit', false);\n        // Set the parent option to the subform so those references are stable when the subform is created\n        options.parent = this;\n        if (!this.options) {\n            return options;\n        }\n        if (this.options.base) {\n            options.base = this.options.base;\n        }\n        if (this.options.project) {\n            options.project = this.options.project;\n        }\n        if (this.options.readOnly || this.component.disabled) {\n            options.readOnly = this.options.readOnly || this.component.disabled;\n        }\n        if (this.options.breadcrumbSettings) {\n            options.breadcrumbSettings = this.options.breadcrumbSettings;\n        }\n        if (this.options.buttonSettings) {\n            options.buttonSettings = lodash_1.default.clone(this.options.buttonSettings);\n        }\n        if (this.options.viewAsHtml) {\n            options.viewAsHtml = this.options.viewAsHtml;\n        }\n        if (this.options.language) {\n            options.language = this.options.language;\n        }\n        if (this.options.template) {\n            options.template = this.options.template;\n        }\n        if (this.options.templates) {\n            options.templates = this.options.templates;\n        }\n        if (this.options.renderMode) {\n            options.renderMode = this.options.renderMode;\n        }\n        if (this.options.attachMode) {\n            options.attachMode = this.options.attachMode;\n        }\n        if (this.options.iconset) {\n            options.iconset = this.options.iconset;\n        }\n        if (this.options.fileService) {\n            options.fileService = this.options.fileService;\n        }\n        if (this.options.onChange) {\n            options.onChange = this.options.onChange;\n        }\n        if (this.options.preview) {\n            options.preview = this.options.preview;\n        }\n        if (this.options.inEditGrid) {\n            options.inEditGrid = this.options.inEditGrid;\n        }\n        if (this.options.saveDraft) {\n            options.saveDraft = this.options.saveDraft;\n            options.formio = new Formio_1.Formio(this.formSrc);\n        }\n        if (this.options.saveDraftThrottle) {\n            options.saveDraftThrottle = this.options.saveDraftThrottle;\n        }\n        if (this.options.skipDraftRestore) {\n            options.skipDraftRestore = this.options.skipDraftRestore;\n        }\n        options.parent = this;\n        return options;\n    }\n    /* eslint-enable max-statements */\n    render() {\n        if (this.builderMode) {\n            return super.render(this.t(this.component.label || 'nestedForm'));\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 this.t('noDataProvided');\n        }\n        if (!value.data && value._id) {\n            return value._id;\n        }\n        if (!value.data || !Object.keys(value.data).length) {\n            return this.t('noDataProvided');\n        }\n        if (options === null || options === void 0 ? void 0 : options.email) {\n            let result = (`\n        <table border=\"1\" style=\"width:100%\">\n          <tbody>\n      `);\n            this.everyComponent((component) => {\n                if (component.isInputComponent && component.visible && !component.skipInEmail) {\n                    result += (`\n            <tr>\n              <th style=\"padding: 5px 10px;\">${component.label}</th>\n              <td style=\"width:100%;padding:5px 10px;\">${component.getView(component.dataValue, options)}</td>\n            </tr>\n          `);\n                }\n            }, Object.assign(Object.assign({}, options), { fromRoot: true }));\n            result += (`\n          </tbody>\n        </table>\n      `);\n            return result;\n        }\n        if (lodash_1.default.isEmpty(value)) {\n            return '';\n        }\n        return '[Complex Data]';\n    }\n    attach(element) {\n        // Don't attach in builder.\n        if (this.builderMode) {\n            return super.attach(element);\n        }\n        return super.attach(element)\n            .then(() => {\n            if (this.isSubFormLazyLoad() && !this.hasLoadedForm && !this.subFormLoading) {\n                this.createSubForm(true);\n            }\n            return this.subFormReady.then(() => {\n                this.empty(element);\n                if (this.options.builder) {\n                    this.setContent(element, this.ce('div', {\n                        class: 'text-muted text-center p-2'\n                    }, this.text(this.formObj.title)));\n                    return;\n                }\n                this.setContent(element, this.render());\n                if (this.subForm) {\n                    if (this.isNestedWizard) {\n                        element = this.root.element;\n                    }\n                    this.subForm.attach(element);\n                    this.valueChanged = this.hasSetValue;\n                    if (!this.valueChanged && this.dataValue.state !== 'submitted') {\n                        this.setDefaultValue();\n                    }\n                    else {\n                        this.restoreValue();\n                    }\n                }\n                if (!this.builderMode && this.component.modalEdit) {\n                    const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;\n                    const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;\n                    this.componentModal = new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);\n                    this.subForm.element = this.componentModal.refs.componentContent || this.subForm.element;\n                    this.setOpenModalElement();\n                }\n                this.calculateValue();\n            });\n        });\n    }\n    detach() {\n        if (this.subForm) {\n            this.subForm.detach();\n        }\n        super.detach();\n    }\n    get currentForm() {\n        return this._currentForm;\n    }\n    get hasLoadedForm() {\n        return this.formObj\n            && this.formObj.components\n            && Array.isArray(this.formObj.components)\n            && this.formObj.components.length;\n    }\n    set currentForm(instance) {\n        this._currentForm = instance;\n        if (!this.subForm) {\n            return;\n        }\n        this.subForm.getComponents().forEach(component => {\n            component.currentForm = this;\n        });\n    }\n    get isRevisionChanged() {\n        return lodash_1.default.isNumber(this.subFormRevision)\n            && lodash_1.default.isNumber(this.formObj._vid)\n            && this.formObj._vid !== this.subFormRevision;\n    }\n    get subFormData() {\n        var _a;\n        return ((_a = this.dataValue) === null || _a === void 0 ? void 0 : _a.data) || {};\n    }\n    destroy(all = false) {\n        if (this.subForm) {\n            this.subForm.destroy(all);\n            this.subForm = null;\n            this.subFormReady = null;\n        }\n        super.destroy(all);\n    }\n    redraw() {\n        if (this.subForm) {\n            this.subForm.form = this.formObj;\n            this.setSubFormDisabled(this.subForm);\n        }\n        return super.redraw();\n    }\n    /**\n     * Pass everyComponent to subform.\n     * @param {any[]} args - Arguments to pass through to the subform's everyComponent method.\n     * @returns {*} - The result of the subform's everyComponent method.\n     */\n    everyComponent(...args) {\n        if (this.subForm) {\n            this.subForm.everyComponent(...args);\n        }\n    }\n    setSubFormDisabled(subForm) {\n        subForm.disabled = this.disabled; // When the Nested Form is disabled make the subForm disabled\n    }\n    updateSubWizards(subForm) {\n        var _a, _b;\n        if (this.isNestedWizard && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.subWizards) && ((_b = subForm === null || subForm === void 0 ? void 0 : subForm._form) === null || _b === void 0 ? void 0 : _b.display) === 'wizard') {\n            const existedForm = this.root.subWizards.findIndex(form => form.component.form === this.component.form);\n            if (existedForm !== -1) {\n                this.root.subWizards[existedForm] = this;\n            }\n            else {\n                this.root.subWizards.push(this);\n            }\n            this.emit('subWizardsUpdated', subForm);\n        }\n    }\n    /**\n     * Create a subform instance.\n     * @param {boolean} [fromAttach] - This function is being called from an `attach` method.\n     * @param {boolean} [beforeSubmit] - This function is being called from a `beforeSubmit` method.\n     * @returns {*} - The subform instance.\n     */\n    createSubForm(fromAttach, beforeSubmit) {\n        this.subFormReady = this.loadSubForm(fromAttach, beforeSubmit).then((form) => {\n            if (!form) {\n                return;\n            }\n            // Iterate through every component and hide the submit button.\n            (0, utils_1.eachComponent)(form.components, (component) => {\n                this.hideSubmitButton(component);\n            });\n            // If the subform is already created then destroy the old one.\n            if (this.subForm) {\n                this.subForm.destroy();\n            }\n            // Render the form.\n            return (new Form_1.default(form, this.getSubOptions())).ready.then((instance) => {\n                this.subForm = instance;\n                this.subForm.currentForm = this;\n                this.subForm.parentVisible = this.visible;\n                const componentsMap = this.componentsMap;\n                const formComponentsMap = this.subForm.componentsMap;\n                lodash_1.default.assign(componentsMap, formComponentsMap);\n                this.component.components = this.subForm.components.map((comp) => comp.component);\n                this.subForm.on('change', () => {\n                    if (this.subForm) {\n                        this.dataValue = this.subForm.getValue();\n                        this.triggerChange({\n                            noEmit: true\n                        });\n                    }\n                });\n                this.subForm.url = this.formSrc;\n                this.subForm.nosubmit = true;\n                this.subForm.root = this.root;\n                this.subForm.localRoot = this.isNestedWizard ? this.localRoot : this.subForm;\n                this.restoreValue();\n                this.valueChanged = this.hasSetValue;\n                this.onChange();\n                return this.subForm;\n            }).catch((err) => {\n                console.log(err);\n            });\n        }).then((subForm) => {\n            this.updateSubWizards(subForm);\n            return subForm;\n        });\n        return this.subFormReady;\n    }\n    hideSubmitButton(component) {\n        const isSubmitButton = component.type === 'button' && (component.action === 'submit' || !component.action);\n        if (isSubmitButton) {\n            component.hidden = true;\n            // clearOnHide no longer clears from the JSON `hidden` flag, so we make the button conditionally hidden to clear its data\n            component.customConditional = 'show = false';\n        }\n    }\n    /**\n     * Load the subform.\n     * @param {boolean} fromAttach - This function is being called from an `attach` method.\n     * @param {boolean} beforeSubmit - This function is being called from a `beforeSubmit` method.\n     * @returns {Promise} - The promise that resolves when the subform is loaded.\n     */\n    loadSubForm(fromAttach, beforeSubmit) {\n        var _a, _b, _c, _d, _e;\n        const loadHiddenForm = beforeSubmit && !this.component.clearOnHide;\n        if (this.builderMode || (this.conditionallyHidden && !loadHiddenForm) || (this.isSubFormLazyLoad() && !fromAttach)) {\n            return Promise.resolve();\n        }\n        if (this.hasLoadedForm && !this.isRevisionChanged &&\n            !(this.options.pdf && ((_a = this.component) === null || _a === void 0 ? void 0 : _a.useOriginalRevision) && lodash_1.default.isNull(this.subForm) && !this.subFormLoading)) {\n            // Pass config down to sub forms.\n            if (this.root && this.root.form && this.root.form.config && !this.formObj.config) {\n                this.formObj.config = this.root.form.config;\n            }\n            return Promise.resolve(this.formObj);\n        }\n        else if (this.formSrc) {\n            this.subFormLoading = true;\n            const options = ((_c = (_b = this.root) === null || _b === void 0 ? void 0 : _b.formio) === null || _c === void 0 ? void 0 : _c.base) && ((_e = (_d = this.root) === null || _d === void 0 ? void 0 : _d.formio) === null || _e === void 0 ? void 0 : _e.projectUrl)\n                ? {\n                    base: this.root.formio.base,\n                    project: this.root.formio.projectUrl,\n                }\n                : {};\n            return (new Formio_1.Formio(this.formSrc, options)).loadForm({ params: { live: 1 } })\n                .then((formObj) => {\n                this.formObj = formObj;\n                if (this.options.pdf && this.component.useOriginalRevision) {\n                    this.formObj.display = 'form';\n                }\n                this.subFormLoading = false;\n                return formObj;\n            })\n                .catch((err) => {\n                console.log(err);\n                return null;\n            });\n        }\n        return Promise.resolve();\n    }\n    checkComponentConditions(data, flags, row) {\n        const visible = super.checkComponentConditions(data, flags, row);\n        // Return if already hidden\n        if (!visible) {\n            return visible;\n        }\n        if (this.subForm) {\n            return this.subForm.checkConditions(this.subFormData, flags);\n        }\n        // There are few cases when subForm is not loaded when a change is triggered,\n        // so we need to perform checkConditions after it is ready, or some conditional fields might be hidden in View mode\n        else if (this.subFormReady) {\n            this.subFormReady.then(() => {\n                if (this.subForm) {\n                    return this.subForm.checkConditions(this.subFormData, flags);\n                }\n            });\n        }\n        return visible;\n    }\n    calculateValue(data, flags, row) {\n        if (this.subForm) {\n            return this.subForm.calculateValue(this.subFormData, flags);\n        }\n        return super.calculateValue(data, flags, row);\n    }\n    setPristine(pristine) {\n        super.setPristine(pristine);\n        if (this.subForm) {\n            this.subForm.setPristine(pristine);\n        }\n    }\n    /**\n     * Determine if the subform should be submitted.\n     * @returns {*|boolean} - TRUE if the subform should be submitted, FALSE if it should not.\n     */\n    get shouldSubmit() {\n        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && (!this.conditionallyHidden || !this.component.clearOnHide);\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.subForm && !this.component.clearOnHide;\n        if ((this.isSubFormLazyLoad() || loadHiddenForm) && !this.subFormLoading) {\n            return this.createSubForm(true, true)\n                .then(this.submitSubForm(false))\n                .then(() => {\n                return this.dataValue;\n            })\n                .then(() => super.beforeSubmit());\n        }\n        else {\n            return this.submitSubForm(false)\n                .then(() => {\n                return this.dataValue;\n            })\n                .then(() => super.beforeSubmit());\n        }\n    }\n    isSubFormLazyLoad() {\n        var _a, _b;\n        return ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a._form) === null || _b === void 0 ? void 0 : _b.display) === 'wizard' && this.component.lazyLoad;\n    }\n    isHidden() {\n        if (!this.visible) {\n            return true;\n        }\n        return !super.checkConditions(this.rootValue);\n    }\n    setValue(submission, flags = {}) {\n        var _a;\n        const changed = super.setValue(submission, flags);\n        this.valueChanged = true;\n        if (this.subForm) {\n            const revisionPath = submission._frid ? '_frid' : '_vid';\n            const shouldLoadOriginalRevision = this.useOriginalRevision\n                && (lodash_1.default.isNumber(submission[revisionPath]) || lodash_1.default.isNumber(submission._fvid))\n                && lodash_1.default.isNumber((_a = this.subForm.form) === null || _a === void 0 ? void 0 : _a[revisionPath])\n                && submission._fvid !== this.subForm.form[revisionPath];\n            if (shouldLoadOriginalRevision) {\n                this.setFormRevision(submission._frid || submission._fvid);\n                this.createSubForm().then(() => {\n                    this.attach(this.element);\n                });\n            }\n            else {\n                this.setSubFormValue(submission, flags);\n            }\n        }\n        return changed;\n    }\n    setSubFormValue(submission, flags) {\n        var _a, _b, _c, _d;\n        const shouldLoadSubmissionById = submission\n            && submission._id\n            && this.subForm.formio\n            && lodash_1.default.isEmpty(submission.data);\n        const shouldLoadDraftById = this.options.saveDraft && lodash_1.default.isEmpty(submission.data) && lodash_1.default.get(this.subForm, 'submission._id');\n        if (shouldLoadSubmissionById || shouldLoadDraftById) {\n            const formId = submission.form || this.formObj.form || this.component.form;\n            const submissionUrl = `${this.subForm.formio.formsUrl}/${formId}/submission/${submission._id || this.subForm.submission._id}`;\n            const options = ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.formio) === null || _b === void 0 ? void 0 : _b.base) && ((_d = (_c = this.root) === null || _c === void 0 ? void 0 : _c.formio) === null || _d === void 0 ? void 0 : _d.projectUrl)\n                ? {\n                    base: this.root.formio.base,\n                    project: this.root.formio.projectUrl,\n                }\n                : {};\n            this.subForm.setUrl(submissionUrl, Object.assign(Object.assign({}, this.options), options));\n            this.subForm.loadSubmission().catch((err) => {\n                console.error(this.t('subformSubmissionLoadingError', { submissionId: submission._id }), err);\n            });\n        }\n        else {\n            this.onSetSubFormValue(submission, flags);\n        }\n    }\n    /**\n     * Sets the subform value\n     * @param {object|null|undefined} submission - The submission to set.\n     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.\n     * @returns {void}\n     */\n    onSetSubFormValue(submission, flags) {\n        this.subForm.setValue(submission, flags);\n    }\n    isEmpty(value = this.dataValue) {\n        return value === null || lodash_1.default.isEqual(value, this.emptyValue) || (this.areAllComponentsEmpty(value === null || value === void 0 ? void 0 : value.data) && !(value === null || value === void 0 ? void 0 : value._id));\n    }\n    areAllComponentsEmpty(data) {\n        let res = true;\n        if (this.subForm) {\n            this.subForm.everyComponent((comp) => {\n                const componentValue = lodash_1.default.get(data, comp.key);\n                res &= comp.isEmpty(componentValue);\n            });\n        }\n        else {\n            res = false;\n        }\n        return res;\n    }\n    getValue() {\n        if (this.subForm) {\n            return this.subForm.getValue();\n        }\n        return this.dataValue;\n    }\n    get errors() {\n        let errors = super.errors;\n        if (this.subForm) {\n            errors = errors.concat(this.subForm.errors);\n        }\n        return errors;\n    }\n    updateSubFormVisibility() {\n        if (this.subForm) {\n            this.subForm.parentVisible = this.visible;\n        }\n    }\n    /**\n     * Determines if this form is a Nested Wizard\n     * which means it should be a Wizard itself and should be a direct child of a Wizard's page\n     * @returns {boolean} - TRUE if this form is a Nested Wizard, FALSE otherwise\n     */\n    get isNestedWizard() {\n        var _a, _b, _c, _d, _e;\n        return ((_b = (_a = this.subForm) === null || _a === void 0 ? void 0 : _a._form) === null || _b === void 0 ? void 0 : _b.display) === 'wizard' && ((_e = (_d = (_c = this.parent) === null || _c === void 0 ? void 0 : _c.parent) === null || _d === void 0 ? void 0 : _d._form) === null || _e === void 0 ? void 0 : _e.display) === 'wizard';\n    }\n    get visible() {\n        return super.visible;\n    }\n    set visible(value) {\n        const isNestedWizard = this.isNestedWizard;\n        if (this._visible !== value) {\n            this._visible = value;\n            // Form doesn't load if hidden. If it becomes visible, create the form.\n            if (!this.subForm && value) {\n                this.createSubForm();\n                this.subFormReady.then(() => {\n                    this.updateSubFormVisibility();\n                    this.clearOnHide();\n                });\n                this.redraw();\n                return;\n            }\n            this.updateSubFormVisibility();\n            this.clearOnHide();\n            isNestedWizard ? this.rebuild() : this.redraw();\n        }\n        if (!value && isNestedWizard) {\n            this.root.redraw();\n        }\n    }\n    get parentVisible() {\n        return super.parentVisible;\n    }\n    set parentVisible(value) {\n        if (this._parentVisible !== value) {\n            this._parentVisible = value;\n            this.clearOnHide();\n            // Form doesn't load if hidden. If it becomes visible, create the form.\n            if (!this.subForm && value) {\n                this.createSubForm();\n                this.subFormReady.then(() => {\n                    this.updateSubFormVisibility();\n                });\n                this.redraw();\n                return;\n            }\n            this.updateSubFormVisibility();\n            this.redraw();\n        }\n    }\n    isInternalEvent(event) {\n        switch (event) {\n            case 'focus':\n            case 'blur':\n            case 'componentChange':\n            case 'componentError':\n            case 'error':\n            case 'formLoad':\n            case 'languageChanged':\n            case 'render':\n            case 'checkValidity':\n            case 'initialized':\n            case 'submit':\n            case 'submitButton':\n            case 'nosubmit':\n            case 'updateComponent':\n            case 'submitDone':\n            case 'submissionDeleted':\n            case 'requestDone':\n            case 'nextPage':\n            case 'prevPage':\n            case 'wizardNavigationClicked':\n            case 'updateWizardNav':\n            case 'restoreDraft':\n            case 'saveDraft':\n            case 'saveComponent':\n            case 'pdfUploaded':\n                return true;\n            default:\n                return false;\n        }\n    }\n    createEmitter() {\n        const emitter = new eventemitter3_1.default();\n        const nativeEmit = emitter.emit;\n        const that = this;\n        emitter.emit = function (event, ...args) {\n            const eventType = event.replace(`${that.options.namespace}.`, '');\n            nativeEmit.call(this, event, ...args);\n            if (!that.isInternalEvent(eventType)) {\n                that.emit(eventType, ...args);\n            }\n        };\n        return emitter;\n    }\n    deleteValue() {\n        super.setValue(null, {\n            noUpdateEvent: true,\n            noDefault: true\n        });\n        this.unset();\n    }\n}\nexports[\"default\"] = FormComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/form/Form.js?");
 
 /***/ }),
 
@@ -5326,7 +5326,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 Form_1 = __importDefault(__webpack_require__(/*! ../../Form */ \"./lib/cjs/Form.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst ChoicesWrapper_1 = __importDefault(__webpack_require__(/*! ../../utils/ChoicesWrapper */ \"./lib/cjs/utils/ChoicesWrapper.js\"));\nclass SelectComponent extends ListComponent_1.default {\n    static schema(...extend) {\n        return ListComponent_1.default.schema({\n            type: 'select',\n            label: 'Select',\n            key: 'select',\n            idPath: 'id',\n            data: {\n                values: [{ label: '', value: '' }],\n                json: '',\n                url: '',\n                resource: '',\n                custom: ''\n            },\n            clearOnRefresh: false,\n            limit: 100,\n            valueProperty: '',\n            lazyLoad: true,\n            filter: '',\n            searchEnabled: true,\n            searchDebounce: 0.3,\n            searchField: '',\n            minSearch: 0,\n            readOnlyValue: false,\n            selectFields: '',\n            selectThreshold: 0.3,\n            uniqueOptions: false,\n            tableView: true,\n            fuseOptions: {\n                include: 'score',\n                threshold: 0.3,\n            },\n            indexeddb: {\n                filter: {}\n            },\n            customOptions: {},\n            useExactSearch: false,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Select',\n            group: 'basic',\n            icon: 'th-list',\n            weight: 70,\n            documentation: '/userguide/form-building/form-components#select',\n            schema: SelectComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return SelectComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        const numberType = () => ({ type: 'number' });\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {\n                const valueComp = Object.assign(Object.assign({}, classComp), { type: 'select' });\n                if ((0, utils_1.isSelectResourceWithObjectValue)(classComp)) {\n                    valueComp.reference = false;\n                    valueComp.onSetItems = `\n            var templateKeys = utils.getItemTemplateKeys(component.template) || [];\n            items = _.map(items || [], i => {\n              var item = {};\n              _.each(templateKeys, k =>  _.set(item, k, _.get(i, k)));\n              return item;\n            })\n          `;\n                }\n                return valueComp;\n            }, dataTypeOperators: {\n                number: ['lessThan', 'greaterThan', 'lessThanOrEqual', 'greaterThanOrEqual'],\n            }, dataTypeValueComponents: {\n                number: {\n                    lessThan: numberType,\n                    greaterThan: numberType,\n                    lessThanOrEqual: numberType,\n                    greaterThanOrEqual: numberType,\n                },\n            } });\n    }\n    static savedValueTypes(schema) {\n        const { boolean, string, number, object, array } = utils_1.componentValueTypes;\n        const { dataType, reference } = schema;\n        const types = (0, utils_1.getComponentSavedTypes)(schema);\n        if (types) {\n            return types;\n        }\n        if (reference) {\n            return [object];\n        }\n        if (dataType === 'object') {\n            return [object, array];\n        }\n        if (utils_1.componentValueTypes[dataType]) {\n            return [utils_1.componentValueTypes[dataType]];\n        }\n        return [boolean, string, number, object, array];\n    }\n    init() {\n        super.init();\n        this.templateData = {};\n        // Trigger an update.\n        let updateArgs = [];\n        const triggerUpdate = lodash_1.default.debounce((...args) => {\n            updateArgs = [];\n            return this.updateItems.apply(this, args);\n        }, 100);\n        this.triggerUpdate = (...args) => {\n            // Make sure we always resolve the previous promise before reassign it\n            if (typeof this.itemsLoadedResolve === 'function') {\n                this.itemsLoadedResolve();\n            }\n            this.itemsLoaded = new Promise((resolve) => {\n                this.itemsLoadedResolve = resolve;\n            });\n            if (args.length) {\n                updateArgs = args;\n            }\n            return triggerUpdate(...updateArgs);\n        };\n        // Keep track of the select options.\n        this.selectOptions = [];\n        if (this.itemsFromUrl) {\n            this.isFromSearch = false;\n            this.searchServerCount = null;\n            this.defaultServerCount = null;\n            this.isScrollLoading = false;\n            this.searchDownloadedResources = [];\n            this.defaultDownloadedResources = [];\n        }\n        // If this component has been activated.//\n        this.activated = false;\n        this.itemsLoaded = new Promise((resolve) => {\n            this.itemsLoadedResolve = resolve;\n        });\n        this.shouldPositionDropdown = this.hasDataGridAncestor();\n        if (this.isHtmlRenderMode()) {\n            this.activate();\n        }\n        // Get the template keys for this select component.\n        this.getTemplateKeys();\n    }\n    get 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(this.t('loadResourcesError', { componentKey: 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('noResultsFound'), noChoicesText: this.t('noChoices'), searchPlaceholderValue: this.t('typeToSearch'), 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            this.addFocusBlurEvents(this.choices.input.element);\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(this.t('failedToNormalize'), 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(this.t('failedToCompareItems'), 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 Form_1 = __importDefault(__webpack_require__(/*! ../../Form */ \"./lib/cjs/Form.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst ChoicesWrapper_1 = __importDefault(__webpack_require__(/*! ../../utils/ChoicesWrapper */ \"./lib/cjs/utils/ChoicesWrapper.js\"));\nclass SelectComponent extends ListComponent_1.default {\n    static schema(...extend) {\n        return ListComponent_1.default.schema({\n            type: 'select',\n            label: 'Select',\n            key: 'select',\n            idPath: 'id',\n            data: {\n                values: [{ label: '', value: '' }],\n                json: '',\n                url: '',\n                resource: '',\n                custom: ''\n            },\n            clearOnRefresh: false,\n            limit: 100,\n            valueProperty: '',\n            lazyLoad: true,\n            filter: '',\n            searchEnabled: true,\n            searchDebounce: 0.3,\n            searchField: '',\n            minSearch: 0,\n            readOnlyValue: false,\n            selectFields: '',\n            selectThreshold: 0.3,\n            uniqueOptions: false,\n            tableView: true,\n            fuseOptions: {\n                include: 'score',\n                threshold: 0.3,\n            },\n            indexeddb: {\n                filter: {}\n            },\n            customOptions: {},\n            useExactSearch: false,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Select',\n            group: 'basic',\n            icon: 'th-list',\n            weight: 70,\n            documentation: '/userguide/form-building/form-components#select',\n            schema: SelectComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return SelectComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        const numberType = () => ({ type: 'number' });\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {\n                const valueComp = Object.assign(Object.assign({}, classComp), { type: 'select' });\n                if ((0, utils_1.isSelectResourceWithObjectValue)(classComp)) {\n                    valueComp.reference = false;\n                    valueComp.onSetItems = `\n            var templateKeys = utils.getItemTemplateKeys(component.template) || [];\n            items = _.map(items || [], i => {\n              var item = {};\n              _.each(templateKeys, k =>  _.set(item, k, _.get(i, k)));\n              return item;\n            })\n          `;\n                }\n                return valueComp;\n            }, dataTypeOperators: {\n                number: ['lessThan', 'greaterThan', 'lessThanOrEqual', 'greaterThanOrEqual'],\n            }, dataTypeValueComponents: {\n                number: {\n                    lessThan: numberType,\n                    greaterThan: numberType,\n                    lessThanOrEqual: numberType,\n                    greaterThanOrEqual: numberType,\n                },\n            } });\n    }\n    static savedValueTypes(schema) {\n        const { boolean, string, number, object, array } = utils_1.componentValueTypes;\n        const { dataType, reference } = schema;\n        const types = (0, utils_1.getComponentSavedTypes)(schema);\n        if (types) {\n            return types;\n        }\n        if (reference) {\n            return [object];\n        }\n        if (dataType === 'object') {\n            return [object, array];\n        }\n        if (utils_1.componentValueTypes[dataType]) {\n            return [utils_1.componentValueTypes[dataType]];\n        }\n        return [boolean, string, number, object, array];\n    }\n    init() {\n        super.init();\n        this.templateData = {};\n        // Trigger an update.\n        let updateArgs = [];\n        const triggerUpdate = lodash_1.default.debounce((...args) => {\n            updateArgs = [];\n            return this.updateItems.apply(this, args);\n        }, 100);\n        this.triggerUpdate = (...args) => {\n            // Make sure we always resolve the previous promise before reassign it\n            if (typeof this.itemsLoadedResolve === 'function') {\n                this.itemsLoadedResolve();\n            }\n            this.itemsLoaded = new Promise((resolve) => {\n                this.itemsLoadedResolve = resolve;\n            });\n            if (args.length) {\n                updateArgs = args;\n            }\n            return triggerUpdate(...updateArgs);\n        };\n        // Keep track of the select options.\n        this.selectOptions = [];\n        if (this.itemsFromUrl) {\n            this.isFromSearch = false;\n            this.searchServerCount = null;\n            this.defaultServerCount = null;\n            this.isScrollLoading = false;\n            this.searchDownloadedResources = [];\n            this.defaultDownloadedResources = [];\n        }\n        // If this component has been activated.//\n        this.activated = false;\n        this.itemsLoaded = new Promise((resolve) => {\n            this.itemsLoadedResolve = resolve;\n        });\n        this.shouldPositionDropdown = this.hasDataGridAncestor();\n        if (this.isHtmlRenderMode()) {\n            this.activate();\n        }\n        // Get the template keys for this select component.\n        this.getTemplateKeys();\n    }\n    get 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(this.t('loadResourcesError', { componentKey: 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('noResultsFound'), noChoicesText: this.t('noChoices'), searchPlaceholderValue: this.t('typeToSearch'), 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            this.addFocusBlurEvents(this.choices.input.element);\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(this.t('failedToNormalize'), 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(this.t('failedToCompareItems'), 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?");
 
 /***/ }),
 
@@ -5392,7 +5392,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst choices_js_1 = __importDefault(__webpack_require__(/*! @formio/choices.js */ \"./node_modules/@formio/choices.js/public/assets/scripts/choices.js\"));\nclass TagsComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            type: 'tags',\n            label: 'Tags',\n            key: 'tags',\n            delimeter: ',',\n            storeas: 'string',\n            maxTags: 0\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Tags',\n            icon: 'tags',\n            group: 'advanced',\n            documentation: '/userguide/form-building/advanced-components#tags',\n            weight: 30,\n            schema: TagsComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return TagsComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: [...super.conditionOperatorsSettings.operators, 'includes', 'notIncludes'] });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes[schema.storeas] || utils_1.componentValueTypes.string];\n    }\n    init() {\n        super.init();\n    }\n    get emptyValue() {\n        return (this.component.storeas === 'string') ? '' : [];\n    }\n    get defaultSchema() {\n        return TagsComponent.schema();\n    }\n    get inputInfo() {\n        const info = super.inputInfo;\n        info.type = 'input';\n        info.attr.type = 'text';\n        info.changeEvent = 'change';\n        return info;\n    }\n    get delimiter() {\n        return this.component.delimeter || ',';\n    }\n    attachElement(element, index) {\n        super.attachElement(element, index);\n        if (!element) {\n            return;\n        }\n        if (this.i18next) {\n            element.setAttribute('dir', this.i18next.dir());\n        }\n        if (this.choices) {\n            this.choices.destroy();\n        }\n        if (!choices_js_1.default) {\n            return;\n        }\n        const hasPlaceholder = !!this.component.placeholder;\n        this.choices = new choices_js_1.default(element, {\n            delimiter: this.delimiter,\n            editItems: true,\n            allowHTML: true,\n            maxItemCount: this.component.maxTags,\n            removeItemButton: true,\n            duplicateItemsAllowed: false,\n            shadowRoot: this.root ? this.root.shadowRoot : null,\n            placeholder: hasPlaceholder,\n            placeholderValue: hasPlaceholder ? this.t(this.component.placeholder, { _userInput: true }) : null,\n        });\n        this.choices.itemList.element.tabIndex = element.tabIndex;\n        this.addEventListener(this.choices.input.element, 'blur', () => {\n            // Emit event to the native Formio input, so the listener attached in the Input.js will be invoked\n            element.dispatchEvent(new Event('blur'));\n            const value = this.choices.input.value;\n            const maxTagsNumber = this.component.maxTags;\n            const valuesCount = this.choices.getValue(true).length;\n            const isRepeatedValue = this.choices.getValue(true).some(existingValue => existingValue.trim() === value.trim());\n            if (value) {\n                if (maxTagsNumber && valuesCount === maxTagsNumber) {\n                    this.choices.addItems = false;\n                    this.choices.clearInput();\n                }\n                else if (isRepeatedValue) {\n                    this.choices.clearInput();\n                }\n                else {\n                    this.choices.setValue([value]);\n                    this.choices.clearInput();\n                    this.choices.hideDropdown(true);\n                    this.updateValue(null, {\n                        modified: true\n                    });\n                }\n            }\n        });\n    }\n    detach() {\n        if (this.choices) {\n            this.choices.destroy();\n            this.choices = null;\n        }\n        super.detach();\n    }\n    normalizeValue(value) {\n        if (this.component.storeas === 'string' && Array.isArray(value)) {\n            return 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?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst choices_js_1 = __importDefault(__webpack_require__(/*! 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?");
 
 /***/ }),
 
@@ -5667,7 +5667,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n/**\
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst xhr_1 = __webpack_require__(/*! ./xhr */ \"./lib/cjs/providers/storage/xhr.js\");\n/**\n *\n * Google Drive provider for file storage.\n * @param {object} formio - formio instance\n * @returns {import('./typedefs').FileProvider} The FileProvider interface defined in index.js.\n */\nfunction googledrive(formio) {\n    return {\n        uploadFile(file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback) {\n            return new Promise(((resolve, reject) => {\n                // Send the file with data.\n                const xhr = new XMLHttpRequest();\n                if (typeof progressCallback === 'function') {\n                    xhr.upload.onprogress = progressCallback;\n                }\n                if (typeof abortCallback === 'function') {\n                    abortCallback(() => xhr.abort());\n                }\n                const fd = new FormData();\n                fd.append('name', fileName);\n                fd.append('dir', dir);\n                fd.append('file', file);\n                // Fire on network error.\n                xhr.onerror = (err) => {\n                    err.networkError = true;\n                    reject(err);\n                };\n                xhr.onload = () => {\n                    if (xhr.status >= 200 && xhr.status < 300) {\n                        const response = JSON.parse(xhr.response);\n                        response.storage = 'googledrive';\n                        response.size = file.size;\n                        response.type = file.type;\n                        response.groupId = groupId;\n                        response.groupPermissions = groupPermissions;\n                        resolve(response);\n                    }\n                    else {\n                        reject(xhr.response || 'Unable to upload file');\n                    }\n                };\n                xhr.onabort = reject;\n                xhr.open('POST', `${formio.formUrl}/storage/gdrive`);\n                (0, xhr_1.setXhrHeaders)(formio, xhr);\n                const token = formio.getToken();\n                if (token) {\n                    xhr.setRequestHeader('x-jwt-token', token);\n                }\n                xhr.send(fd);\n            }));\n        },\n        downloadFile(file) {\n            const token = formio.getToken();\n            file.url =\n                `${formio.formUrl}/storage/gdrive?fileId=${file.id}&fileName=${file.originalName}${token ? `&x-jwt-token=${token}` : ''}`;\n            return Promise.resolve(file);\n        },\n        deleteFile: function deleteFile(fileInfo) {\n            var url = ''.concat(formio.formUrl, `/storage/gdrive?id=${fileInfo.id}&name=${fileInfo.originalName}`);\n            return formio.makeRequest('', url, 'delete');\n        },\n    };\n}\ngoogledrive.title = 'Google Drive';\nexports[\"default\"] = googledrive;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/providers/storage/googleDrive.js?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst xhr_1 = __webpack_require__(/*! ./xhr */ \"./lib/cjs/providers/storage/xhr.js\");\n/**\n *\n * Google Drive provider for file storage.\n * @param {object} formio - formio instance\n * @returns {import('./typedefs').FileProvider} The FileProvider interface defined in index.js.\n */\nfunction googledrive(formio) {\n    return {\n        uploadFile(file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback) {\n            return new Promise(((resolve, reject) => {\n                // Send the file with data.\n                const xhr = new XMLHttpRequest();\n                if (typeof progressCallback === 'function') {\n                    xhr.upload.onprogress = progressCallback;\n                }\n                if (typeof abortCallback === 'function') {\n                    abortCallback(() => xhr.abort());\n                }\n                const fd = new FormData();\n                fd.append('name', fileName);\n                fd.append('dir', dir);\n                fd.append('file', file);\n                // Fire on network error.\n                xhr.onerror = (err) => {\n                    err.networkError = true;\n                    reject(err);\n                };\n                xhr.onload = () => {\n                    if (xhr.status >= 200 && xhr.status < 300) {\n                        const response = JSON.parse(xhr.response);\n                        response.storage = 'googledrive';\n                        response.size = file.size;\n                        response.type = file.type;\n                        response.groupId = groupId;\n                        response.groupPermissions = groupPermissions;\n                        resolve(response);\n                    }\n                    else {\n                        reject(xhr.response || 'Unable to upload file');\n                    }\n                };\n                xhr.onabort = reject;\n                xhr.open('POST', `${formio.formUrl}/storage/gdrive`);\n                (0, xhr_1.setXhrHeaders)(formio, xhr);\n                const token = formio.getToken();\n                if (token) {\n                    xhr.setRequestHeader('x-jwt-token', token);\n                }\n                xhr.send(fd);\n            }));\n        },\n        downloadFile(file, component) {\n            const token = formio.getToken();\n            // Constructed the url with the fileId, fileName, displayImage, imageSize if applicable\n            file.url =\n                `${formio.formUrl}/storage/gdrive?fileId=${file.id}&fileName=${file.originalName}${token ? `&x-jwt-token=${token}` : ''}${component.image ? '&displayImage=true' : ''}${component.imageSize ? `&imageSize=${component.imageSize}` : ''}`;\n            return Promise.resolve(file);\n        },\n        deleteFile: function deleteFile(fileInfo) {\n            var url = ''.concat(formio.formUrl, `/storage/gdrive?id=${fileInfo.id}&name=${fileInfo.originalName}`);\n            return formio.makeRequest('', url, 'delete');\n        },\n    };\n}\ngoogledrive.title = 'Google Drive';\nexports[\"default\"] = googledrive;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/providers/storage/googleDrive.js?");
 
 /***/ }),
 
@@ -5700,7 +5700,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\ncons
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nvar __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 xhr_1 = __importDefault(__webpack_require__(/*! ./xhr */ \"./lib/cjs/providers/storage/xhr.js\"));\nconst util_1 = __webpack_require__(/*! ./util */ \"./lib/cjs/providers/storage/util.js\");\nconst loadAbortControllerPolyfill = () => __awaiter(void 0, void 0, void 0, function* () {\n    if (typeof AbortController === 'undefined') {\n        yield Promise.resolve().then(() => __importStar(__webpack_require__(/*! abortcontroller-polyfill/dist/polyfill-patch-fetch */ \"./node_modules/abortcontroller-polyfill/dist/polyfill-patch-fetch.js\")));\n    }\n});\n/**\n * S3 File Services provider for file storage.\n * @param {object} formio formio instance\n * @returns {import('./typedefs').FileProvider} The FileProvider interface defined in index.js.\n */\nfunction s3(formio) {\n    return {\n        uploadFile(file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback, multipartOptions) {\n            return __awaiter(this, void 0, void 0, function* () {\n                const xhrCallback = (xhr, response, abortCallback) => __awaiter(this, void 0, void 0, function* () {\n                    response.data.fileName = fileName;\n                    response.data.key = xhr_1.default.path([response.data.key, dir, fileName]);\n                    if (response.signed) {\n                        if (multipartOptions && Array.isArray(response.signed)) {\n                            // patch abort callback\n                            yield loadAbortControllerPolyfill();\n                            const abortController = new AbortController();\n                            const abortSignal = abortController.signal;\n                            if (typeof abortCallback === 'function') {\n                                abortCallback(() => abortController.abort());\n                            }\n                            try {\n                                const parts = yield this.uploadParts(file, response.signed, response.data.headers, response.partSizeActual, multipartOptions, abortSignal);\n                                yield (0, util_1.withRetries)(this.completeMultipartUpload, [response, parts, multipartOptions], 3);\n                                return;\n                            }\n                            catch (err) {\n                                // abort in-progress fetch requests\n                                abortController.abort();\n                                // attempt to cancel the multipart upload\n                                this.abortMultipartUpload(response);\n                                throw err;\n                            }\n                        }\n                        else {\n                            xhr.openAndSetHeaders('PUT', response.signed);\n                            xhr.setRequestHeader('Content-Type', file.type);\n                            if (response.data.headers) {\n                                Object.keys(response.data.headers).forEach((key) => {\n                                    xhr.setRequestHeader(key, response.data.headers[key]);\n                                });\n                            }\n                            return file;\n                        }\n                    }\n                    else {\n                        const fd = new FormData();\n                        for (const key in response.data) {\n                            fd.append(key, response.data[key]);\n                        }\n                        fd.append('file', file);\n                        xhr.openAndSetHeaders('POST', response.url);\n                        return fd;\n                    }\n                });\n                const response = yield xhr_1.default.upload(formio, 's3', xhrCallback, file, fileName, dir, progressCallback, groupPermissions, groupId, abortCallback, multipartOptions);\n                return {\n                    storage: 's3',\n                    name: fileName,\n                    bucket: response.bucket,\n                    key: response.data.key,\n                    url: xhr_1.default.path([response.url, response.data.key]),\n                    acl: response.data.acl,\n                    size: file.size,\n                    type: file.type\n                };\n            });\n        },\n        completeMultipartUpload(serverResponse, parts, multipart) {\n            return __awaiter(this, void 0, void 0, function* () {\n                const { changeMessage } = multipart;\n                changeMessage('Completing AWS S3 multipart upload...');\n                const token = formio.getToken();\n                const response = yield fetch(`${formio.formUrl}/storage/s3/multipart/complete`, {\n                    method: 'POST',\n                    headers: Object.assign({ 'Content-Type': 'application/json' }, (token ? { 'x-jwt-token': token } : {})),\n                    body: JSON.stringify({ parts, uploadId: serverResponse.uploadId, key: serverResponse.key })\n                });\n                const message = yield response.text();\n                if (!response.ok) {\n                    throw new Error(message);\n                }\n                // the AWS S3 SDK CompleteMultipartUpload command can return a HTTP 200 status header but still error;\n                // we need to parse, and according to AWS, to retry\n                if (message.match(/Error/)) {\n                    throw new Error(message);\n                }\n            });\n        },\n        abortMultipartUpload(serverResponse) {\n            const { uploadId, key } = serverResponse;\n            const token = formio.getToken();\n            fetch(`${formio.formUrl}/storage/s3/multipart/abort`, {\n                method: 'POST',\n                headers: Object.assign({ 'Content-Type': 'application/json' }, (token ? { 'x-jwt-token': token } : {})),\n                body: JSON.stringify({ uploadId, key })\n            }).catch((err) => console.error('Error while aborting multipart upload:', err));\n        },\n        uploadParts(file, urls, headers, partSize, multipart, abortSignal) {\n            const { changeMessage, progressCallback } = multipart;\n            changeMessage('Chunking and uploading parts to AWS S3...');\n            const promises = [];\n            for (let i = 0; i < urls.length; i++) {\n                const start = i * partSize;\n                const end = (i + 1) * partSize;\n                const blob = i < urls.length ? file.slice(start, end) : file.slice(start);\n                const promise = fetch(urls[i], {\n                    method: 'PUT',\n                    headers,\n                    body: blob,\n                    signal: abortSignal,\n                }).then((res) => {\n                    if (res.ok) {\n                        progressCallback(urls.length);\n                        const eTag = res.headers.get('etag');\n                        if (!eTag) {\n                            throw new Error('ETag header not found; it must be exposed in S3 bucket CORS settings');\n                        }\n                        return { ETag: eTag, PartNumber: i + 1 };\n                    }\n                    else {\n                        throw new Error(`Part no ${i} failed with status ${res.status}`);\n                    }\n                });\n                promises.push(promise);\n            }\n            return Promise.all(promises);\n        },\n        downloadFile(file) {\n            if (file.acl !== 'public-read') {\n                return formio.makeRequest('file', `${formio.formUrl}/storage/s3?bucket=${xhr_1.default.trim(file.bucket)}&key=${xhr_1.default.trim(file.key)}`, 'GET');\n            }\n            else {\n                return Promise.resolve(file);\n            }\n        },\n        deleteFile(fileInfo) {\n            const url = `${formio.formUrl}/storage/s3?bucket=${xhr_1.default.trim(fileInfo.bucket)}&key=${xhr_1.default.trim(fileInfo.key)}`;\n            return formio.makeRequest('', url, 'delete');\n        },\n    };\n}\ns3.title = 'S3';\nexports[\"default\"] = s3;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/providers/storage/s3.js?");
+eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nvar __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 xhr_1 = __importDefault(__webpack_require__(/*! ./xhr */ \"./lib/cjs/providers/storage/xhr.js\"));\nconst util_1 = __webpack_require__(/*! ./util */ \"./lib/cjs/providers/storage/util.js\");\nconst loadAbortControllerPolyfill = () => __awaiter(void 0, void 0, void 0, function* () {\n    if (typeof AbortController === 'undefined') {\n        yield Promise.resolve().then(() => __importStar(__webpack_require__(/*! abortcontroller-polyfill/dist/polyfill-patch-fetch */ \"./node_modules/abortcontroller-polyfill/dist/polyfill-patch-fetch.js\")));\n    }\n});\n/**\n * S3 File Services provider for file storage.\n * @param {object} formio formio instance\n * @returns {import('./typedefs').FileProvider} The FileProvider interface defined in index.js.\n */\nfunction s3(formio) {\n    return {\n        uploadFile(file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback, multipartOptions) {\n            return __awaiter(this, void 0, void 0, function* () {\n                const xhrCallback = (xhr, response, abortCallback) => __awaiter(this, void 0, void 0, function* () {\n                    response.data.fileName = fileName;\n                    response.data.key = xhr_1.default.path([response.data.key, dir, fileName]);\n                    if (response.signed) {\n                        if (multipartOptions && Array.isArray(response.signed)) {\n                            // patch abort callback\n                            yield loadAbortControllerPolyfill();\n                            const abortController = new AbortController();\n                            const abortSignal = abortController.signal;\n                            if (typeof abortCallback === 'function') {\n                                abortCallback(() => abortController.abort());\n                            }\n                            try {\n                                const parts = yield this.uploadParts(file, response.signed, response.data.headers, response.partSizeActual, multipartOptions, abortSignal);\n                                yield (0, util_1.withRetries)(this.completeMultipartUpload, [response, parts, multipartOptions], 3);\n                                return;\n                            }\n                            catch (err) {\n                                // abort in-progress fetch requests\n                                abortController.abort();\n                                // attempt to cancel the multipart upload\n                                this.abortMultipartUpload(response);\n                                throw err;\n                            }\n                        }\n                        else {\n                            xhr.openAndSetHeaders('PUT', response.signed);\n                            xhr.setRequestHeader('Content-Type', file.type);\n                            if (response.data.headers) {\n                                Object.keys(response.data.headers).forEach((key) => {\n                                    xhr.setRequestHeader(key, response.data.headers[key]);\n                                });\n                            }\n                            return file;\n                        }\n                    }\n                    else {\n                        const fd = new FormData();\n                        for (const key in response.data) {\n                            fd.append(key, response.data[key]);\n                        }\n                        fd.append('file', file);\n                        xhr.openAndSetHeaders('POST', response.url);\n                        return fd;\n                    }\n                });\n                const response = yield xhr_1.default.upload(formio, 's3', xhrCallback, file, fileName, dir, progressCallback, groupPermissions, groupId, abortCallback, multipartOptions);\n                return {\n                    storage: 's3',\n                    name: fileName,\n                    bucket: response.bucket,\n                    key: response.data.key,\n                    url: xhr_1.default.path([response.url, response.data.key]),\n                    acl: response.data.acl,\n                    size: file.size,\n                    type: file.type\n                };\n            });\n        },\n        completeMultipartUpload(serverResponse, parts, multipart) {\n            return __awaiter(this, void 0, void 0, function* () {\n                const { changeMessage } = multipart;\n                changeMessage('Completing AWS S3 multipart upload...');\n                const token = formio.getToken();\n                const response = yield xhr_1.default.fetch(`${formio.formUrl}/storage/s3/multipart/complete`, {\n                    method: 'POST',\n                    headers: Object.assign({ 'Content-Type': 'application/json' }, (token ? { 'x-jwt-token': token } : {})),\n                    body: JSON.stringify({ parts, uploadId: serverResponse.uploadId, key: serverResponse.key })\n                });\n                const message = yield response.text();\n                if (!response.ok) {\n                    throw new Error(message);\n                }\n                // the AWS S3 SDK CompleteMultipartUpload command can return a HTTP 200 status header but still error;\n                // we need to parse, and according to AWS, to retry\n                if (message.match(/Error/)) {\n                    throw new Error(message);\n                }\n            });\n        },\n        abortMultipartUpload(serverResponse) {\n            const { uploadId, key } = serverResponse;\n            const token = formio.getToken();\n            xhr_1.default.fetch(`${formio.formUrl}/storage/s3/multipart/abort`, {\n                method: 'POST',\n                headers: Object.assign({ 'Content-Type': 'application/json' }, (token ? { 'x-jwt-token': token } : {})),\n                body: JSON.stringify({ uploadId, key })\n            }).catch((err) => console.error('Error while aborting multipart upload:', err));\n        },\n        uploadParts(file, urls, headers, partSize, multipart, abortSignal) {\n            const { changeMessage, progressCallback } = multipart;\n            changeMessage('Chunking and uploading parts to AWS S3...');\n            const promises = [];\n            for (let i = 0; i < urls.length; i++) {\n                const start = i * partSize;\n                const end = (i + 1) * partSize;\n                const blob = i < urls.length ? file.slice(start, end) : file.slice(start);\n                const promise = xhr_1.default.fetch(urls[i], {\n                    method: 'PUT',\n                    headers,\n                    body: blob,\n                    signal: abortSignal,\n                }).then((res) => {\n                    if (res.ok) {\n                        progressCallback(urls.length);\n                        const eTag = res.headers.get('etag');\n                        if (!eTag) {\n                            throw new Error('ETag header not found; it must be exposed in S3 bucket CORS settings');\n                        }\n                        return { ETag: eTag, PartNumber: i + 1 };\n                    }\n                    else {\n                        throw new Error(`Part no ${i} failed with status ${res.status}`);\n                    }\n                });\n                promises.push(promise);\n            }\n            return Promise.all(promises);\n        },\n        downloadFile(file) {\n            if (file.acl !== 'public-read') {\n                return formio.makeRequest('file', `${formio.formUrl}/storage/s3?bucket=${xhr_1.default.trim(file.bucket)}&key=${xhr_1.default.trim(file.key)}`, 'GET');\n            }\n            else {\n                return Promise.resolve(file);\n            }\n        },\n        deleteFile(fileInfo) {\n            const url = `${formio.formUrl}/storage/s3?bucket=${xhr_1.default.trim(fileInfo.bucket)}&key=${xhr_1.default.trim(fileInfo.key)}`;\n            return formio.makeRequest('', url, 'delete');\n        },\n    };\n}\ns3.title = 'S3';\nexports[\"default\"] = s3;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/providers/storage/s3.js?");
 
 /***/ }),
 
@@ -5744,7 +5744,7 @@ eval("\n/**\n * @typedef {any[]} Args\n */\nvar __awaiter = (this && this.__awai
 /***/ (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 }));\nexports.setXhrHeaders = void 0;\nconst trim_1 = __importDefault(__webpack_require__(/*! lodash/trim */ \"./node_modules/lodash/trim.js\"));\nconst setXhrHeaders = (formio, xhr) => {\n    const { headers } = formio.options;\n    if (headers) {\n        const ValidHeaders = {\n            'Content-Disposition': true,\n            'Authorization': true,\n        };\n        for (const header in headers) {\n            if (ValidHeaders[header]) {\n                xhr.setRequestHeader(header, headers[header]);\n            }\n        }\n    }\n};\nexports.setXhrHeaders = setXhrHeaders;\nconst XHR = {\n    trim(text) {\n        return (0, trim_1.default)(text, '/');\n    },\n    path(items) {\n        return items.filter(item => !!item).map(XHR.trim).join('/');\n    },\n    upload(formio, type, xhrCallback, file, fileName, dir, progressCallback, groupPermissions, groupId, abortCallback, multipartOptions) {\n        return __awaiter(this, void 0, void 0, function* () {\n            // make request to Form.io server\n            const token = formio.getToken();\n            let response;\n            try {\n                response = yield fetch(`${formio.formUrl}/storage/${type}`, {\n                    method: 'POST',\n                    headers: Object.assign({ 'Accept': 'application/json', 'Content-Type': 'application/json; charset=UTF-8' }, (token ? { 'x-jwt-token': token } : {})),\n                    body: JSON.stringify({\n                        name: XHR.path([dir, fileName]),\n                        size: file.size,\n                        type: file.type,\n                        groupPermissions,\n                        groupId,\n                        multipart: multipartOptions\n                    })\n                });\n            }\n            catch (err) {\n                // only throws on network errors\n                err.networkError = true;\n                throw err;\n            }\n            if (!response.ok) {\n                if (response.status === 504) {\n                    const error = new Error('Network request failed');\n                    error.networkError = true;\n                    throw error;\n                }\n                const message = yield response.text();\n                throw new Error(message || 'Unable to sign file.');\n            }\n            const serverResponse = yield response.json();\n            return yield XHR.makeXhrRequest(formio, xhrCallback, serverResponse, progressCallback, abortCallback);\n        });\n    },\n    makeXhrRequest(formio, xhrCallback, serverResponse, progressCallback, abortCallback) {\n        return new Promise((resolve, reject) => {\n            // Send the file with data.\n            const xhr = new XMLHttpRequest();\n            xhr.openAndSetHeaders = (...params) => {\n                xhr.open(...params);\n                (0, exports.setXhrHeaders)(formio, xhr);\n            };\n            Promise.resolve(xhrCallback(xhr, serverResponse, abortCallback)).then((payload) => {\n                // if payload is nullish we can assume the provider took care of the entire upload process\n                if (!payload) {\n                    return resolve(serverResponse);\n                }\n                // Fire on network error.\n                xhr.onerror = (err) => {\n                    err.networkError = true;\n                    reject(err);\n                };\n                // Fire on network abort.\n                xhr.onabort = (err) => {\n                    err.networkError = true;\n                    reject(err);\n                };\n                // Set the onabort error callback.\n                xhr.onabort = reject;\n                if (typeof progressCallback === 'function') {\n                    xhr.upload.onprogress = progressCallback;\n                }\n                if (typeof abortCallback === 'function') {\n                    abortCallback(() => xhr.abort());\n                }\n                // Fired when the response has made it back from the server.\n                xhr.onload = () => {\n                    if (xhr.status >= 200 && xhr.status < 300) {\n                        resolve(serverResponse);\n                    }\n                    else if (xhr.status === 504) {\n                        const error = new Error('Network request failed');\n                        error.networkError = true;\n                        reject(error);\n                    }\n                    else {\n                        reject(xhr.response || 'Unable to upload file');\n                    }\n                };\n                // Get the request and send it to the server.\n                xhr.send(payload);\n            }).catch(reject);\n        });\n    }\n};\nexports[\"default\"] = XHR;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/providers/storage/xhr.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 }));\nexports.setXhrHeaders = void 0;\nconst trim_1 = __importDefault(__webpack_require__(/*! lodash/trim */ \"./node_modules/lodash/trim.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst setXhrHeaders = (formio, xhr) => {\n    const { headers } = formio.options;\n    if (headers) {\n        const ValidHeaders = {\n            'Content-Disposition': true,\n            'Authorization': true,\n        };\n        for (const header in headers) {\n            if (ValidHeaders[header]) {\n                xhr.setRequestHeader(header, headers[header]);\n            }\n        }\n    }\n};\nexports.setXhrHeaders = setXhrHeaders;\nconst XHR = {\n    trim(text) {\n        return (0, trim_1.default)(text, '/');\n    },\n    path(items) {\n        return items.filter(item => !!item).map(XHR.trim).join('/');\n    },\n    fetch(url, options) {\n        options = Formio_1.Formio.pluginAlter('requestOptions', options, url);\n        return fetch(url, options);\n    },\n    upload(formio, type, xhrCallback, file, fileName, dir, progressCallback, groupPermissions, groupId, abortCallback, multipartOptions) {\n        return __awaiter(this, void 0, void 0, function* () {\n            // make request to Form.io server\n            const token = formio.getToken();\n            let response;\n            try {\n                response = yield XHR.fetch(`${formio.formUrl}/storage/${type}`, {\n                    method: 'POST',\n                    headers: Object.assign({ 'Accept': 'application/json', 'Content-Type': 'application/json; charset=UTF-8' }, (token ? { 'x-jwt-token': token } : {})),\n                    body: JSON.stringify({\n                        name: XHR.path([dir, fileName]),\n                        size: file.size,\n                        type: file.type,\n                        groupPermissions,\n                        groupId,\n                        multipart: multipartOptions\n                    })\n                });\n            }\n            catch (err) {\n                // only throws on network errors\n                err.networkError = true;\n                throw err;\n            }\n            if (!response.ok) {\n                if (response.status === 504) {\n                    const error = new Error('Network request failed');\n                    error.networkError = true;\n                    throw error;\n                }\n                const message = yield response.text();\n                throw new Error(message || 'Unable to sign file.');\n            }\n            const serverResponse = yield response.json();\n            return yield XHR.makeXhrRequest(formio, xhrCallback, serverResponse, progressCallback, abortCallback);\n        });\n    },\n    makeXhrRequest(formio, xhrCallback, serverResponse, progressCallback, abortCallback) {\n        return new Promise((resolve, reject) => {\n            // Send the file with data.\n            const xhr = new XMLHttpRequest();\n            xhr.openAndSetHeaders = (...params) => {\n                xhr.open(...params);\n                (0, exports.setXhrHeaders)(formio, xhr);\n            };\n            Promise.resolve(xhrCallback(xhr, serverResponse, abortCallback)).then((payload) => {\n                // if payload is nullish we can assume the provider took care of the entire upload process\n                if (!payload) {\n                    return resolve(serverResponse);\n                }\n                // Fire on network error.\n                xhr.onerror = (err) => {\n                    err.networkError = true;\n                    reject(err);\n                };\n                // Fire on network abort.\n                xhr.onabort = (err) => {\n                    err.networkError = true;\n                    reject(err);\n                };\n                // Set the onabort error callback.\n                xhr.onabort = reject;\n                if (typeof progressCallback === 'function') {\n                    xhr.upload.onprogress = progressCallback;\n                }\n                if (typeof abortCallback === 'function') {\n                    abortCallback(() => xhr.abort());\n                }\n                // Fired when the response has made it back from the server.\n                xhr.onload = () => {\n                    if (xhr.status >= 200 && xhr.status < 300) {\n                        resolve(serverResponse);\n                    }\n                    else if (xhr.status === 504) {\n                        const error = new Error('Network request failed');\n                        error.networkError = true;\n                        reject(error);\n                    }\n                    else {\n                        reject(xhr.response || 'Unable to upload file');\n                    }\n                };\n                // Get the request and send it to the server.\n                xhr.send(payload);\n            }).catch(reject);\n        });\n    }\n};\nexports[\"default\"] = XHR;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/providers/storage/xhr.js?");
 
 /***/ }),
 
@@ -5788,7 +5788,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst choices_js_1 = __importStar(__webpack_require__(/*! @formio/choices.js */ \"./node_modules/@formio/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?");
+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?");
 
 /***/ }),
 
@@ -6085,7 +6085,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n/* global jQuery */\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __exportStar = (this && this.__exportStar) || function(m, exports) {\n    for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.removeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = exports.moment = exports.ConditionOperators = exports.jsonLogic = void 0;\nexports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isInsideScopingComponent = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = exports.observeOverload = exports.withSwitch = void 0;\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nexports._ = lodash_1.default;\nconst json_logic_js_1 = __importDefault(__webpack_require__(/*! json-logic-js */ \"./node_modules/json-logic-js/logic.js\"));\nexports.jsonLogic = json_logic_js_1.default;\nconst moment_timezone_1 = __importDefault(__webpack_require__(/*! moment-timezone/moment-timezone */ \"./node_modules/moment-timezone/moment-timezone.js\"));\nexports.moment = moment_timezone_1.default;\nconst jstimezonedetect_1 = __importDefault(__webpack_require__(/*! jstimezonedetect */ \"./node_modules/jstimezonedetect/dist/jstz.min.js\"));\nconst operators_1 = __webpack_require__(/*! ./jsonlogic/operators */ \"./lib/cjs/utils/jsonlogic/operators.js\");\nconst dompurify_1 = __importDefault(__webpack_require__(/*! dompurify */ \"./node_modules/dompurify/dist/purify.cjs.js\"));\nconst formUtils_1 = __webpack_require__(/*! ./formUtils */ \"./lib/cjs/utils/formUtils.js\");\nconst Evaluator_1 = __webpack_require__(/*! ./Evaluator */ \"./lib/cjs/utils/Evaluator.js\");\nObject.defineProperty(exports, \"Evaluator\", ({ enumerable: true, get: function () { return Evaluator_1.Evaluator; } }));\nconst conditionOperators_1 = __importDefault(__webpack_require__(/*! ./conditionOperators */ \"./lib/cjs/utils/conditionOperators/index.js\"));\nexports.ConditionOperators = conditionOperators_1.default;\nconst interpolate = Evaluator_1.Evaluator.interpolate;\nexports.interpolate = interpolate;\n__exportStar(__webpack_require__(/*! ./formUtils */ \"./lib/cjs/utils/formUtils.js\"), exports);\n// Configure JsonLogic\noperators_1.lodashOperators.forEach((name) => json_logic_js_1.default.add_operation(`_${name}`, lodash_1.default[name]));\n// Retrieve Any Date\njson_logic_js_1.default.add_operation('getDate', (date) => {\n    return (0, moment_timezone_1.default)(date).toISOString();\n});\n// Set Relative Minimum Date\njson_logic_js_1.default.add_operation('relativeMinDate', (relativeMinDate) => {\n    return (0, moment_timezone_1.default)().subtract(relativeMinDate, 'days').toISOString();\n});\n// Set Relative Maximum Date\njson_logic_js_1.default.add_operation('relativeMaxDate', (relativeMaxDate) => {\n    return (0, moment_timezone_1.default)().add(relativeMaxDate, 'days').toISOString();\n});\n/**\n * Evaluate a method.\n * @param {Function|string|object} func - The function to evaluate.\n * @param {*} args - A map of arguments to pass to the function.\n * @param {string} ret - The name of the \"return\" variable in the script.\n * @param {boolean} interpolate - True if the script should be interpolated before being executed.\n * @param {import('@formio/core').EvaluatorOptions} options - The evaluator options.\n * @returns {*} - The result of the evaluation.\n */\nfunction evaluate(func, args, ret, interpolate, options = {}) {\n    return Evaluator_1.Evaluator.evaluate(func, args, ret, interpolate, undefined, options);\n}\nexports.evaluate = evaluate;\n/**\n * Returns a random compoennt ID.\n * @returns {string} - A random component ID.\n */\nfunction getRandomComponentId() {\n    return `e${Math.random().toString(36).substring(7)}`;\n}\nexports.getRandomComponentId = getRandomComponentId;\n/**\n * Get a property value of an element.\n * @param {CSSStyleDeclaration} style - The style element to get the property value from.\n * @param {string} prop - The property to get the value for.\n * @returns {number} - The value of the property.\n */\nfunction getPropertyValue(style, prop) {\n    let value = style.getPropertyValue(prop);\n    value = value ? value.replace(/[^0-9.]/g, '') : '0';\n    return parseFloat(value);\n}\nexports.getPropertyValue = getPropertyValue;\n/**\n * Get an elements bounding rectagle.\n * @param {HTMLElement} element - A DOM element to get the bounding rectangle for.\n * @returns {{x: number, y: number, width: number, height: number}} - The bounding rectangle.\n */\nfunction getElementRect(element) {\n    const style = window.getComputedStyle(element, null);\n    return {\n        x: getPropertyValue(style, 'left'),\n        y: getPropertyValue(style, 'top'),\n        width: getPropertyValue(style, 'width'),\n        height: getPropertyValue(style, 'height')\n    };\n}\nexports.getElementRect = getElementRect;\n/**\n * Get non HTMLElement property in the window object\n * @param {string} property - The window property to fetch the script plugin from.\n * @returns {any | undefined} - The HTML Element property on the window object.\n */\nfunction getScriptPlugin(property) {\n    const obj = window[property];\n    if (typeof HTMLElement === 'object' ? obj instanceof HTMLElement : //DOM2\n        obj && typeof obj === 'object' && true && obj.nodeType === 1 && typeof obj.nodeName === 'string') {\n        return undefined;\n    }\n    return obj;\n}\nexports.getScriptPlugin = getScriptPlugin;\n/**\n * Determines the boolean value of a setting.\n * @param {string|boolean} value - A string or boolean value to convert to boolean.\n * @returns {boolean} - The boolean value of the setting.\n */\nfunction boolValue(value) {\n    if (lodash_1.default.isBoolean(value)) {\n        return value;\n    }\n    else if (lodash_1.default.isString(value)) {\n        return (value.toLowerCase() === 'true');\n    }\n    else {\n        return !!value;\n    }\n}\nexports.boolValue = boolValue;\n/**\n * Check to see if an ID is a mongoID.\n * @param {string} text - The text to check if it is a mongoID.\n * @returns {boolean} - TRUE if the text is a mongoID; FALSE otherwise.\n */\nfunction isMongoId(text) {\n    return !!text.toString().match(/^[0-9a-fA-F]{24}$/);\n}\nexports.isMongoId = isMongoId;\n/**\n * Checks the calculated value for a provided component and data.\n * @param {import('@formio/core').Component} component - The component to check for the calculated value.\n * @param {import('@formio/core').Submission} submission - A submission object.\n * @param {*} rowData - The contextual row data for the component.\n */\nfunction checkCalculated(component, submission, rowData) {\n    // Process calculated value stuff if present.\n    if (component.calculateValue) {\n        lodash_1.default.set(rowData, component.key, evaluate(component.calculateValue, {\n            value: undefined,\n            data: submission ? submission.data : rowData,\n            row: rowData,\n            util: this,\n            component\n        }, 'value'));\n    }\n}\nexports.checkCalculated = checkCalculated;\n/**\n * Check if a simple conditional evaluates to true.\n * @param {import('@formio/core').Component} component - The component to check for the conditional.\n * @param {import('@formio/core').SimpleConditional} condition - The condition to check.\n * @param {*} row - The row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The instance of the component.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\n/**\n *\n * @param conditionPaths\n * @param data\n */\nfunction getConditionalPathsRecursive(conditionPaths, data) {\n    let currentGlobalIndex = 0;\n    const conditionalPathsArray = [];\n    const getConditionalPaths = (data, currentPath = '', localIndex = 0) => {\n        currentPath = currentPath.replace(/^\\.+|\\.+$/g, '');\n        const currentLocalIndex = localIndex;\n        const currentData = lodash_1.default.get(data, currentPath);\n        if (Array.isArray(currentData) && currentData.filter(Boolean).length > 0) {\n            if (currentData.some(element => typeof element !== 'object')) {\n                return;\n            }\n            const hasInnerDataArray = currentData.find(x => Array.isArray(x[conditionPaths[currentLocalIndex]]));\n            if (hasInnerDataArray) {\n                currentData.forEach((_, indexOutside) => {\n                    const innerCompDataPath = `${currentPath}[${indexOutside}].${conditionPaths[currentLocalIndex]}`;\n                    getConditionalPaths(data, innerCompDataPath, currentLocalIndex + 1);\n                });\n            }\n            else {\n                currentData.forEach((x, index) => {\n                    if (!lodash_1.default.isNil(x[conditionPaths[currentLocalIndex]])) {\n                        const compDataPath = `${currentPath}[${index}].${conditionPaths[currentLocalIndex]}`;\n                        conditionalPathsArray.push(compDataPath);\n                    }\n                });\n            }\n        }\n        else {\n            if (!conditionPaths[currentGlobalIndex]) {\n                return;\n            }\n            currentGlobalIndex = currentGlobalIndex + 1;\n            getConditionalPaths(data, `${currentPath}.${conditionPaths[currentGlobalIndex - 1]}`, currentGlobalIndex);\n        }\n    };\n    getConditionalPaths(data);\n    return conditionalPathsArray;\n}\n/**\n *\n * @param component\n * @param condition\n * @param row\n * @param data\n * @param instance\n */\nfunction checkSimpleConditional(component, condition, row, data, instance) {\n    if (condition.when) {\n        const value = getComponentActualValue(condition.when, data, row);\n        const eq = String(condition.eq);\n        const show = String(condition.show);\n        // Special check for selectboxes component.\n        if (lodash_1.default.isObject(value) && lodash_1.default.has(value, condition.eq)) {\n            return String(value[condition.eq]) === show;\n        }\n        // FOR-179 - Check for multiple values.\n        if (Array.isArray(value) && value.map(String).includes(eq)) {\n            return show === 'true';\n        }\n        return (String(value) === eq) === (show === 'true');\n    }\n    else {\n        const { conditions = [], conjunction = 'all', show = true } = condition;\n        if (!conditions.length) {\n            return true;\n        }\n        const conditionsResult = lodash_1.default.map(conditions, (cond) => {\n            var _a, _b;\n            const { value: comparedValue, operator, component: conditionComponentPath } = cond;\n            if (!conditionComponentPath) {\n                return true;\n            }\n            const splittedConditionPath = conditionComponentPath.split('.');\n            const conditionalPaths = ((_a = instance === null || instance === void 0 ? void 0 : instance.parent) === null || _a === void 0 ? void 0 : _a.type) === 'datagrid' || ((_b = instance === null || instance === void 0 ? void 0 : instance.parent) === null || _b === void 0 ? void 0 : _b.type) === 'editgrid' ? [] : getConditionalPathsRecursive(splittedConditionPath, data);\n            if (conditionalPaths.length > 0) {\n                return conditionalPaths.map((path) => {\n                    const value = getComponentActualValue(path, data, row);\n                    const ConditionOperator = conditionOperators_1.default[operator];\n                    return ConditionOperator\n                        ? new ConditionOperator().getResult({ value, comparedValue, instance, component, path })\n                        : true;\n                });\n            }\n            else {\n                const value = getComponentActualValue(conditionComponentPath, data, row);\n                const СonditionOperator = conditionOperators_1.default[operator];\n                return СonditionOperator\n                    ? new СonditionOperator().getResult({ value, comparedValue, instance, component, path: conditionComponentPath })\n                    : true;\n            }\n        });\n        let result = false;\n        switch (conjunction) {\n            case 'any':\n                result = lodash_1.default.some(conditionsResult.flat(), res => !!res);\n                break;\n            default:\n                result = lodash_1.default.every(conditionsResult.flat(), res => !!res);\n        }\n        return show ? result : !result;\n    }\n}\nexports.checkSimpleConditional = checkSimpleConditional;\n/**\n * Returns a components normalized value.\n * @param {string} compPath - The full path to the component.\n * @param {*} data - The data object to get the value from.\n * @param {*} row - The contextual row data for the component.\n * @returns {*} - The normalized value of the component.\n */\nfunction getComponentActualValue(compPath, data, row) {\n    let value = null;\n    if (data) {\n        value = (0, formUtils_1.getValue)({ data }, compPath);\n    }\n    if (row && lodash_1.default.isNil(value)) {\n        value = (0, formUtils_1.getValue)({ data: row }, compPath);\n    }\n    // FOR-400 - Fix issue where falsey values were being evaluated as show=true\n    if (lodash_1.default.isNil(value) || (lodash_1.default.isObject(value) && lodash_1.default.isEmpty(value))) {\n        value = '';\n    }\n    return value;\n}\nexports.getComponentActualValue = getComponentActualValue;\n/**\n * Check custom javascript conditional.\n * @param {import('@formio/core').Component} component - The component to check for the conditional.\n * @param {string} custom - The custom conditional string to evaluate.\n * @param {*} row - The row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {string} variable - The variable name for the result of the custom conditional.\n * @param {*} onError - A custom return if there is an error or the value is null from the evaluation.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @returns {*} - The result of the evaulation.\n */\nfunction checkCustomConditional(component, custom, row, data, form, variable, onError, instance) {\n    if (typeof custom === 'string') {\n        custom = `var ${variable} = true; ${custom}; return ${variable};`;\n    }\n    const value = (instance && instance.evaluate) ?\n        instance.evaluate(custom, { row, data, form }) :\n        evaluate(custom, { row, data, form });\n    if (value === null) {\n        return onError;\n    }\n    return value;\n}\nexports.checkCustomConditional = checkCustomConditional;\n/**\n * Check a component for JSON conditionals.\n * @param {import('@formio/core').Component} component - The component\n * @param {import('@formio/core').JSONConditional} json - The json conditional to check.\n * @param {*} row - The contextual row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The Form JSON of the form.\n * @param {*} onError - Custom return value if there is an error.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\nfunction checkJsonConditional(component, json, row, data, form, onError) {\n    try {\n        return json_logic_js_1.default.apply(json, {\n            data,\n            row,\n            form,\n            _: lodash_1.default,\n        });\n    }\n    catch (err) {\n        console.warn(`An error occurred in jsonLogic advanced condition for ${component.key}`, err);\n        return onError;\n    }\n}\nexports.checkJsonConditional = checkJsonConditional;\n/**\n * Returns the contextual row data for a component.\n * @param {import('@formio/core').Component} component - The component to get the row data for.\n * @param {*} row - The row data for the component.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @param {*} conditional - The component conditional.\n * @returns {*} - The contextual row data for the component.\n */\nfunction getRow(component, row, instance, conditional) {\n    var _a, _b, _c;\n    const condition = conditional || component.conditional;\n    // If no component's instance passed (happens only in 6.x server), calculate its path based on the schema\n    if (!instance) {\n        instance = lodash_1.default.cloneDeep(component);\n    }\n    const dataParent = getDataParentComponent(instance);\n    if (dataParent) {\n        const parentPath = (_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localDataPath;\n        const isTriggerCondtionComponentPath = condition.when || !condition.conditions\n            ? (_b = condition.when) === null || _b === void 0 ? void 0 : _b.startsWith((_c = dataParent.paths) === null || _c === void 0 ? void 0 : _c.localPath)\n            : lodash_1.default.some(condition.conditions, cond => { var _a; return cond.component.startsWith((_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localPath); });\n        if (isTriggerCondtionComponentPath) {\n            const newRow = {};\n            lodash_1.default.set(newRow, parentPath, row);\n            row = newRow;\n        }\n    }\n    return row;\n}\n/**\n * Checks the conditions for a provided component and data.\n * @param {import('@formio/core').Component} component - The component to check for the condition.\n * @param {*} row - The data within a row\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\nfunction checkCondition(component, row, data, form, instance) {\n    const { customConditional, conditional } = component;\n    if (customConditional) {\n        return checkCustomConditional(component, customConditional, row, data, form, 'show', true, instance);\n    }\n    else if (conditional && (conditional.when || lodash_1.default.some(conditional.conditions || [], condition => condition.component && condition.operator))) {\n        row = getRow(component, row, instance);\n        return checkSimpleConditional(component, conditional, row, data, instance);\n    }\n    else if (conditional && conditional.json) {\n        return checkJsonConditional(component, conditional.json, row, data, form, true);\n    }\n    // Default to show.\n    return true;\n}\nexports.checkCondition = checkCondition;\n/**\n * Test a trigger on a component.\n * @param {import('@formio/core').Component} component - The component to test the trigger against.\n * @param {import('@formio/core').LogicTrigger} trigger - The trigger configuration.\n * @param {import('@formio/core').DataObject} row - The contextual row data.\n * @param {import('@formio/core').DataObject} data - The root data object.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {any} instance - The component that is performing the trigger.\n * @returns {boolean} - TRUE if the trigger should fire; FALSE otherwise.\n */\nfunction checkTrigger(component, trigger, row, data, form, instance) {\n    // If trigger is empty, don't fire it\n    if (!trigger || !trigger[trigger.type]) {\n        return false;\n    }\n    switch (trigger.type) {\n        case 'simple':\n            row = getRow(component, row, instance, trigger.simple);\n            return checkSimpleConditional(component, trigger.simple, row, data, instance);\n        case 'javascript':\n            return checkCustomConditional(component, trigger.javascript, row, data, form, 'result', false, instance);\n        case 'json':\n            return checkJsonConditional(component, trigger.json, row, data, form, false);\n    }\n    // If none of the types matched, don't fire the trigger.\n    return false;\n}\nexports.checkTrigger = checkTrigger;\n/**\n * Sets a property on a component via an executed Logic action.\n * @param {import('@formio/core').Component} component - The component to set the property on.\n * @param {import('@formio/core').LogicAction} action - The action to perform on the component.\n * @param {string} result - The name of the variable in the evaulation to use as the result.\n * @param {import('@formio/core').DataObject} row - The contextual row data.\n * @param {import('@formio/core').DataObject} data - The full submission data.\n * @param {any} instance - The component instance.\n * @returns {import('@formio/core').Component} - The modified component.\n */\nfunction setActionProperty(component, action, result, row, data, instance) {\n    const property = action.property.value;\n    switch (action.property.type) {\n        case 'boolean': {\n            const currentValue = lodash_1.default.get(component, property, false).toString();\n            const newValue = action.state.toString();\n            if (currentValue !== newValue) {\n                lodash_1.default.set(component, property, newValue === 'true');\n            }\n            break;\n        }\n        case 'string': {\n            const evalData = {\n                data,\n                row,\n                component,\n                result,\n            };\n            const textValue = action.property.component ? action[action.property.component] : action.text;\n            const currentValue = lodash_1.default.get(component, property, '');\n            const newValue = (instance && instance.interpolate)\n                ? instance.interpolate(textValue, evalData)\n                : Evaluator_1.Evaluator.interpolate(textValue, evalData);\n            if (newValue !== currentValue) {\n                lodash_1.default.set(component, property, newValue);\n            }\n            break;\n        }\n    }\n    return component;\n}\nexports.setActionProperty = setActionProperty;\n/**\n * Removes HTML tags from string e.g. <div>Hello World</div> => Hello World\n * @param {string} str - The string to remove HTML tags from.\n * @returns {string} - The string without HTML tags.\n */\nfunction removeHTML(str) {\n    const doc = new window.DOMParser().parseFromString(str, 'text/html');\n    return (doc.body.textContent || '').trim();\n}\nexports.removeHTML = removeHTML;\n/**\n * Unescape HTML characters like &lt, &gt, &amp and etc.\n * @param {string} str - The string to unescape.\n * @returns {string} - The unescaped string.\n */\nfunction unescapeHTML(str) {\n    if (typeof window === 'undefined' || !('DOMParser' in window)) {\n        return str;\n    }\n    const elem = document.createElement('textarea');\n    elem.innerHTML = str;\n    return elem.value;\n}\nexports.unescapeHTML = unescapeHTML;\n/**\n * Make HTML element from string\n * @param {string} str - The string to convert to an HTML element.\n * @param {string} selector - The selector to use to get the element once it is created.\n * @returns {HTMLElement} - The HTML element that was created.\n */\nfunction convertStringToHTMLElement(str, selector) {\n    const doc = new window.DOMParser().parseFromString(str, 'text/html');\n    return doc.body.querySelector(selector);\n}\nexports.convertStringToHTMLElement = convertStringToHTMLElement;\n/**\n * Make a filename guaranteed to be unique.\n * @param {string} name - The original name of the file.\n * @param {string} template - The template to use for the unique name.\n * @param {object} evalContext - The context to use for the evaluation.\n * @returns {string} - A unique filename.\n */\nfunction uniqueName(name, template, evalContext) {\n    template = template || '{{fileName}}-{{guid}}';\n    //include guid in template anyway, to prevent overwriting issue if filename matches existing file\n    if (!template.includes('{{guid}}')) {\n        template = `${template}-{{guid}}`;\n    }\n    const parts = name.split('.');\n    let fileName = parts.slice(0, parts.length - 1).join('.');\n    const extension = parts.length > 1\n        ? `.${lodash_1.default.last(parts)}`\n        : '';\n    //allow only 100 characters from original name to avoid issues with filename length restrictions\n    fileName = fileName.substr(0, 100);\n    evalContext = Object.assign(evalContext || {}, {\n        fileName,\n        guid: guid()\n    });\n    //only letters, numbers, dots, dashes, underscores and spaces are allowed. Anything else will be replaced with dash\n    const uniqueName = `${Evaluator_1.Evaluator.interpolate(template, evalContext)}${extension}`.replace(/[^0-9a-zA-Z.\\-_ ]/g, '-');\n    return uniqueName;\n}\nexports.uniqueName = uniqueName;\n/**\n * Returns a GUID\n * @returns {string} - A GUID.\n */\nfunction guid() {\n    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {\n        const r = Math.random() * 16 | 0;\n        const v = c === 'x'\n            ? r\n            : (r & 0x3 | 0x8);\n        return v.toString(16);\n    });\n}\nexports.guid = guid;\n/**\n * Return a translated date setting.\n * @param {string|Date} date - The date to translate.\n * @returns {(null|Date)} - The translated date.\n */\nfunction getDateSetting(date) {\n    if (lodash_1.default.isNil(date) || lodash_1.default.isNaN(date) || date === '') {\n        return null;\n    }\n    if (date instanceof Date) {\n        return date;\n    }\n    else if (typeof date.toDate === 'function') {\n        return date.isValid() ? date.toDate() : null;\n    }\n    let dateSetting = ((typeof date !== 'string') || (date.indexOf('moment(') === -1)) ? (0, moment_timezone_1.default)(date) : null;\n    if (dateSetting && dateSetting.isValid()) {\n        return dateSetting.toDate();\n    }\n    dateSetting = null;\n    try {\n        const value = Evaluator_1.Evaluator.evaluator(`return ${date};`, 'moment')(moment_timezone_1.default);\n        if (typeof value === 'string') {\n            dateSetting = (0, moment_timezone_1.default)(value);\n        }\n        else if (typeof value.toDate === 'function') {\n            dateSetting = (0, moment_timezone_1.default)(value.toDate().toUTCString());\n        }\n        else if (value instanceof Date) {\n            dateSetting = (0, moment_timezone_1.default)(value);\n        }\n    }\n    catch (e) {\n        return null;\n    }\n    if (!dateSetting) {\n        return null;\n    }\n    // Ensure this is a date.\n    if (!dateSetting.isValid()) {\n        return null;\n    }\n    return dateSetting.toDate();\n}\nexports.getDateSetting = getDateSetting;\n/**\n * Returns true if the date is a valid date. False otherwise.\n * @param {Date|string} date - The date to check for validity.\n * @returns {boolean} - TRUE if the date is valid; FALSE otherwise.\n */\nfunction isValidDate(date) {\n    return lodash_1.default.isDate(date) && !lodash_1.default.isNaN(date.getDate());\n}\nexports.isValidDate = isValidDate;\n/**\n * Get the current timezone string.\n * @returns {string} - The current timezone.\n */\nfunction currentTimezone() {\n    if (moment_timezone_1.default.currentTimezone) {\n        return moment_timezone_1.default.currentTimezone;\n    }\n    moment_timezone_1.default.currentTimezone = jstimezonedetect_1.default.determine().name();\n    return moment_timezone_1.default.currentTimezone;\n}\nexports.currentTimezone = currentTimezone;\n/**\n * Get an offset date provided a date object and timezone object.\n * @param {Date} date - The date to offset.\n * @param {string} timezone - The timezone to offset the date to.\n * @returns {Date} - The offset date.\n */\nfunction offsetDate(date, timezone) {\n    if (timezone === 'UTC') {\n        return {\n            date: new Date(date.getTime() + (date.getTimezoneOffset() * 60000)),\n            abbr: 'UTC'\n        };\n    }\n    const dateMoment = (0, moment_timezone_1.default)(date).tz(timezone);\n    return {\n        date: new Date(date.getTime() + ((dateMoment.utcOffset() + date.getTimezoneOffset()) * 60000)),\n        abbr: dateMoment.format('z')\n    };\n}\nexports.offsetDate = offsetDate;\n/**\n * Returns if the zones are loaded.\n * @returns {boolean} - TRUE if the zones are loaded; FALSE otherwise.\n */\nfunction zonesLoaded() {\n    return moment_timezone_1.default.zonesLoaded;\n}\nexports.zonesLoaded = zonesLoaded;\n/**\n * Returns if we should load the zones.\n * @param {string} timezone - The timezone to check if we should load the zones.\n * @returns {boolean} - TRUE if we should load the zones; FALSE otherwise.\n */\nfunction shouldLoadZones(timezone) {\n    if (timezone === currentTimezone() || timezone === 'UTC') {\n        return false;\n    }\n    return true;\n}\nexports.shouldLoadZones = shouldLoadZones;\n/**\n * Externally load the timezone data.\n * @param {string} url - The URL to load the timezone data from.\n * @param {string} timezone - The timezone to load.\n * @returns {Promise<any> | *} - Resolves when the zones for this timezone are loaded.\n */\nfunction loadZones(url, timezone) {\n    if (timezone && !shouldLoadZones(timezone)) {\n        // Return non-resolving promise.\n        return new Promise(lodash_1.default.noop);\n    }\n    if (moment_timezone_1.default.zonesPromise) {\n        return moment_timezone_1.default.zonesPromise;\n    }\n    return moment_timezone_1.default.zonesPromise = fetch(url)\n        .then(resp => resp.json().then(zones => {\n        moment_timezone_1.default.tz.load(zones);\n        moment_timezone_1.default.zonesLoaded = true;\n        // Trigger a global event that the timezones have finished loading.\n        if (document && document.createEvent && document.body && document.body.dispatchEvent) {\n            var event = document.createEvent('Event');\n            event.initEvent('zonesLoaded', true, true);\n            document.body.dispatchEvent(event);\n        }\n    }));\n}\nexports.loadZones = loadZones;\n/**\n * Get the moment date object for translating dates with timezones.\n * @param {string|Date} value - The value to convert into a moment date.\n * @param {string} format - The format to convert the date to.\n * @param {string} timezone - The timezone to convert the date to.\n * @returns {Date} - The moment date object.\n */\nfunction momentDate(value, format, timezone) {\n    const momentDate = (0, moment_timezone_1.default)(value);\n    if (!timezone) {\n        return momentDate;\n    }\n    if (timezone === 'UTC') {\n        timezone = 'Etc/UTC';\n    }\n    if ((timezone !== currentTimezone() || (format && format.match(/\\s(z$|z\\s)/))) && moment_timezone_1.default.zonesLoaded) {\n        return momentDate.tz(timezone);\n    }\n    return momentDate;\n}\nexports.momentDate = momentDate;\n/**\n * Format a date provided a value, format, and timezone object.\n * @param {string} timezonesUrl - The URL to load the timezone data from.\n * @param {string|Date} value - The value to format.\n * @param {string} format - The format to format the date to.\n * @param {string} timezone - The timezone to format the date to.\n * @param {string} flatPickrInputFormat - The format to use for flatpickr input.\n * @returns {string} - The formatted date.\n */\nfunction formatDate(timezonesUrl, value, format, timezone, flatPickrInputFormat) {\n    const momentDate = (0, moment_timezone_1.default)(value, flatPickrInputFormat || undefined);\n    if (timezone === currentTimezone()) {\n        // See if our format contains a \"z\" timezone character.\n        if (format.match(/\\s(z$|z\\s)/)) {\n            loadZones(timezonesUrl);\n            if (moment_timezone_1.default.zonesLoaded) {\n                return momentDate.tz(timezone).format(convertFormatToMoment(format));\n            }\n            else {\n                return momentDate.format(convertFormatToMoment(format.replace(/\\s(z$|z\\s)/, '')));\n            }\n        }\n        // Return the standard format.\n        return momentDate.format(convertFormatToMoment(format));\n    }\n    if (timezone === 'UTC') {\n        const offset = offsetDate(momentDate.toDate(), 'UTC');\n        return `${(0, moment_timezone_1.default)(offset.date).format(convertFormatToMoment(format))} UTC`;\n    }\n    // Load the zones since we need timezone information.\n    loadZones(timezonesUrl);\n    if (moment_timezone_1.default.zonesLoaded && timezone) {\n        return momentDate.tz(timezone).format(`${convertFormatToMoment(format)} z`);\n    }\n    else {\n        return momentDate.format(convertFormatToMoment(format));\n    }\n}\nexports.formatDate = formatDate;\n/**\n * Pass a format function to format within a timezone.\n * @param {string} timezonesUrl - The URL to load the timezone data from.\n * @param {Function} formatFn - The format function to use.\n * @param {Date|string} date - The date to format.\n * @param {string} format - The format to format the date to.\n * @param {string} timezone - The timezone to format the date to.\n * @returns {string} - The formatted date.\n */\nfunction formatOffset(timezonesUrl, formatFn, date, format, timezone) {\n    if (timezone === currentTimezone()) {\n        return formatFn(date, format);\n    }\n    if (timezone === 'UTC') {\n        return `${formatFn(offsetDate(date, 'UTC').date, format)} UTC`;\n    }\n    // Load the zones since we need timezone information.\n    loadZones(timezonesUrl);\n    if (moment_timezone_1.default.zonesLoaded) {\n        const offset = offsetDate(date, timezone);\n        return `${formatFn(offset.date, format)} ${offset.abbr}`;\n    }\n    else {\n        return formatFn(date, format);\n    }\n}\nexports.formatOffset = formatOffset;\n/**\n * Returns the local date format information.\n * @param {Intl.LocalesArgument} locale - The locale to get the date format for.\n * @returns {object} - The local date format information.\n */\nfunction getLocaleDateFormatInfo(locale) {\n    const formatInfo = {};\n    const day = 21;\n    const exampleDate = new Date(2017, 11, day);\n    const localDateString = exampleDate.toLocaleDateString(locale);\n    formatInfo.dayFirst = localDateString.slice(0, 2) === day.toString();\n    return formatInfo;\n}\nexports.getLocaleDateFormatInfo = getLocaleDateFormatInfo;\n/**\n * Convert the format from the angular-datepicker module to flatpickr format.\n * @param {string} format - The format to convert.\n * @returns {string} - The converted format.\n */\nfunction convertFormatToFlatpickr(format) {\n    return format\n        // Remove the Z timezone offset, not supported by flatpickr.\n        .replace(/Z/g, '')\n        // Year conversion.\n        .replace(/y/g, 'Y')\n        .replace('YYYY', 'Y')\n        .replace('YY', 'y')\n        // Month conversion.\n        .replace('MMMM', 'F')\n        .replace(/M/g, 'n')\n        .replace('nnn', 'M')\n        .replace('nn', 'm')\n        // Day in month.\n        .replace(/d/g, 'j')\n        .replace(/jj/g, 'd')\n        // Day in week.\n        .replace('EEEE', 'l')\n        .replace('EEE', 'D')\n        // Hours, minutes, seconds\n        .replace('HH', 'H')\n        .replace('hh', 'G')\n        .replace('mm', 'i')\n        .replace('ss', 'S')\n        .replace(/a/g, 'K');\n}\nexports.convertFormatToFlatpickr = convertFormatToFlatpickr;\n/**\n * Convert the format from the angular-datepicker module to moment format.\n * @param {string} format - The format to convert.\n * @returns {string} - The converted format.\n */\nfunction convertFormatToMoment(format) {\n    return format\n        // Year conversion.\n        .replace(/y/g, 'Y')\n        // Day in month.\n        .replace(/d/g, 'D')\n        // Day in week.\n        .replace(/E/g, 'd')\n        // AM/PM marker\n        .replace(/a/g, 'A')\n        // Unix Timestamp\n        .replace(/U/g, 'X');\n}\nexports.convertFormatToMoment = convertFormatToMoment;\n/**\n * Convert the format from the angular-datepicker module to mask format.\n * @param {string} format - The format to convert.\n * @returns {string} - The converted format.\n */\nfunction convertFormatToMask(format) {\n    return format\n        // Long month replacement.\n        .replace(/M{4}/g, 'MM')\n        // Initial short month conversion.\n        .replace(/M{3}/g, '***')\n        // Short month conversion if input as text.\n        .replace(/e/g, 'Q')\n        // Month number conversion.\n        .replace(/W/g, '99')\n        // Year conversion.\n        .replace(/[ydhmswHMG]/g, '9')\n        // AM/PM conversion.\n        .replace(/a/g, 'AA');\n}\nexports.convertFormatToMask = convertFormatToMask;\n/**\n * Returns an input mask that is compatible with the input mask library.\n * @param {string} mask - The Form.io input mask.\n * @param {string} placeholderChar - Char which is used as a placeholder.\n * @returns {Array} - The input mask for the mask library.\n */\nfunction getInputMask(mask, placeholderChar) {\n    if (mask instanceof Array) {\n        return mask;\n    }\n    const maskArray = [];\n    maskArray.numeric = true;\n    for (let i = 0; i < mask.length; i++) {\n        switch (mask[i]) {\n            case '9':\n                maskArray.push(/\\d/);\n                break;\n            case 'A':\n                maskArray.numeric = false;\n                maskArray.push(/[a-zA-Z]/);\n                break;\n            case 'a':\n                maskArray.numeric = false;\n                maskArray.push(/[a-z]/);\n                break;\n            case '*':\n                maskArray.numeric = false;\n                maskArray.push(/[a-zA-Z0-9]/);\n                break;\n            // If char which is used inside mask placeholder was used in the mask, replace it with space to prevent errors\n            case placeholderChar:\n                maskArray.numeric = false;\n                maskArray.push(' ');\n                break;\n            default:\n                maskArray.numeric = false;\n                maskArray.push(mask[i]);\n                break;\n        }\n    }\n    return maskArray;\n}\nexports.getInputMask = getInputMask;\n/**\n * Unmasks a value using the provided mask and placeholder characters.\n * @param {string} value - The value to unmask.\n * @param {string} mask - The mask to use for unmasking.\n * @param {string} placeholderChar - The placeholder character to use for unmasking.\n * @returns {string} - The unmasked value.\n */\nfunction unmaskValue(value, mask, placeholderChar) {\n    if (!mask || !value || value.length > mask.length) {\n        return value;\n    }\n    let unmaskedValue = value.split('');\n    for (let i = 0; i < mask.length; i++) {\n        const char = value[i] || '';\n        const charPart = mask[i];\n        if (!lodash_1.default.isRegExp(charPart) && char === charPart) {\n            unmaskedValue[i] = '';\n        }\n    }\n    unmaskedValue = unmaskedValue.join('').replace(placeholderChar, '');\n    return unmaskedValue;\n}\nexports.unmaskValue = unmaskValue;\n/**\n * Returns true if the value matches the input mask format.\n * @param {string} value - The value to check.\n * @param {string} inputMask - The input mask to check against.\n * @returns {boolean} - TRUE if the value matches the input mask; FALSE otherwise.\n */\nfunction matchInputMask(value, inputMask) {\n    if (!inputMask) {\n        return true;\n    }\n    // If value is longer than mask, it isn't valid.\n    if (value.length > inputMask.length) {\n        return false;\n    }\n    for (let i = 0; i < inputMask.length; i++) {\n        const char = value[i] || '';\n        const charPart = inputMask[i];\n        if (!(lodash_1.default.isRegExp(charPart) && charPart.test(char) || charPart === char)) {\n            return false;\n        }\n    }\n    return true;\n}\nexports.matchInputMask = matchInputMask;\n/**\n * Returns the number separators (i.e. 1,000) for the provided language.\n * @param {string} lang - The language code to get the number separators for.\n * @returns {{delimiter: string, decimalSeparator: string}} - The number separators.\n */\nfunction getNumberSeparators(lang = 'en') {\n    const formattedNumberString = (12345.6789).toLocaleString(lang);\n    const delimeters = formattedNumberString.match(/..(.)...(.)../);\n    if (!delimeters) {\n        return {\n            delimiter: ',',\n            decimalSeparator: '.'\n        };\n    }\n    return {\n        delimiter: (delimeters.length > 1) ? delimeters[1] : ',',\n        decimalSeparator: (delimeters.length > 2) ? delimeters[2] : '.',\n    };\n}\nexports.getNumberSeparators = getNumberSeparators;\n/**\n * Returns the number for the maximum amount of decimal places for a number.\n * @param {import('@formio/core').Component} component - The component to check for decimal limits.\n * @param {number} defaultLimit - The default limit to use if none is provided in the component.\n * @returns {number} - The number of decimal places allowed.\n */\nfunction getNumberDecimalLimit(component, defaultLimit) {\n    if (lodash_1.default.has(component, 'decimalLimit')) {\n        return lodash_1.default.get(component, 'decimalLimit');\n    }\n    // Determine the decimal limit. Defaults to 20 but can be overridden by validate.step or decimalLimit settings.\n    let decimalLimit = defaultLimit || 20;\n    const step = lodash_1.default.get(component, 'validate.step', 'any');\n    if (step !== 'any') {\n        const parts = step.toString().split('.');\n        if (parts.length > 1) {\n            decimalLimit = parts[1].length;\n        }\n    }\n    return decimalLimit;\n}\nexports.getNumberDecimalLimit = getNumberDecimalLimit;\n/**\n * Returns the currency affixes for a specific language.\n * @param {object} arg0 - The arguments object.\n * @param {string} arg0.currency - The currency code to get the affixes for.\n * @param {number} arg0.decimalLimit - The number of decimal places to use.\n * @param {string} arg0.decimalSeparator - The decimal separator to use.\n * @param {string} arg0.lang - The language code to use.\n * @returns {{prefix: string, suffix: string}} - The currency affixes.\n */\nfunction getCurrencyAffixes({ currency, decimalLimit, decimalSeparator, lang, }) {\n    // Get the prefix and suffix from the localized string.\n    let regex = `(.*)?${(100).toLocaleString(lang)}`;\n    if (decimalLimit) {\n        regex += `${decimalSeparator === '.' ? '\\\\.' : decimalSeparator}${(0).toLocaleString(lang)}{${decimalLimit}}`;\n    }\n    regex += '(.*)?';\n    const parts = (100).toLocaleString(lang, {\n        style: 'currency',\n        currency: currency ? currency : 'USD',\n        useGrouping: true,\n        maximumFractionDigits: decimalLimit || 0,\n        minimumFractionDigits: decimalLimit || 0\n    }).replace('.', decimalSeparator).match(new RegExp(regex));\n    return {\n        prefix: (parts === null || parts === void 0 ? void 0 : parts[1]) || '',\n        suffix: (parts === null || parts === void 0 ? void 0 : parts[2]) || ''\n    };\n}\nexports.getCurrencyAffixes = getCurrencyAffixes;\n/**\n * Fetch the field data provided a component.\n * @param {import('@formio/core').DataObject} data - The data object to fetch the field data from.\n * @param {import('@formio/core').Component} component - The component to fetch the field data for.\n * @returns {*} - The field data.\n */\nfunction fieldData(data, component) {\n    if (!data) {\n        return '';\n    }\n    if (!component || !component.key) {\n        return data;\n    }\n    if (component.key.includes('.')) {\n        let value = data;\n        const parts = component.key.split('.');\n        let key = '';\n        for (let i = 0; i < parts.length; i++) {\n            key = parts[i];\n            // Handle nested resources\n            if (value.hasOwnProperty('_id')) {\n                value = value.data;\n            }\n            // Return if the key is not found on the value.\n            if (!value.hasOwnProperty(key)) {\n                return;\n            }\n            // Convert old single field data in submissions to multiple\n            if (key === parts[parts.length - 1] && component.multiple && !Array.isArray(value[key])) {\n                value[key] = [value[key]];\n            }\n            // Set the value of this key.\n            value = value[key];\n        }\n        return value;\n    }\n    else {\n        // Convert old single field data in submissions to multiple\n        if (component.multiple && !Array.isArray(data[component.key])) {\n            data[component.key] = [data[component.key]];\n        }\n        // Fix for checkbox type radio submission values in tableView\n        if (component.type === 'checkbox' && component.inputType === 'radio') {\n            return data[component.name] === component.value;\n        }\n        return data[component.key];\n    }\n}\nexports.fieldData = fieldData;\n/**\n * Delays function execution with possibility to execute function synchronously or cancel it.\n * @param {Function} fn - Function to delay\n * @param {number} delay - Delay time\n * @param {...any} args - Arguments to pass to the function\n * @returns {*} - Function to cancel the delay\n */\nfunction delay(fn, delay = 0, ...args) {\n    const timer = setTimeout(fn, delay, ...args);\n    /**\n     *\n     */\n    function cancel() {\n        clearTimeout(timer);\n    }\n    /**\n     * Execute the function early.\n     * @returns {*} - The result of the function.\n     */\n    function earlyCall() {\n        cancel();\n        return fn(...args);\n    }\n    earlyCall.timer = timer;\n    earlyCall.cancel = cancel;\n    return earlyCall;\n}\nexports.delay = delay;\n/**\n * Iterate the given key to make it unique.\n * @param {string} key\n *   Modify the component key to be unique.\n * @returns {string}\n *   The new component key.\n */\nfunction iterateKey(key) {\n    if (!key.match(/(\\d+)$/)) {\n        return `${key}1`;\n    }\n    return key.replace(/(\\d+)$/, function (suffix) {\n        return Number(suffix) + 1;\n    });\n}\nexports.iterateKey = iterateKey;\n/**\n * Determines a unique key within a map provided the base key.\n * @param {Record<string, string>} map - The map to check for uniqueness.\n * @param {string} base - The base path of the key.\n * @returns {string} - The unique key.\n */\nfunction uniqueKey(map, base) {\n    let newKey = base;\n    while (map.hasOwnProperty(newKey)) {\n        newKey = iterateKey(newKey);\n    }\n    return newKey;\n}\nexports.uniqueKey = uniqueKey;\n/**\n * Determines the major version number of bootstrap.\n * @param {object} options - The options to check for bootstrap version.\n * @param {string} options.bootstrap - The bootstrap version to use.\n * @returns {number} - The bootstrap version.\n */\nfunction bootstrapVersion(options) {\n    if (options.bootstrap) {\n        return options.bootstrap;\n    }\n    if ((typeof jQuery === 'function') && (typeof jQuery().collapse === 'function')) {\n        return parseInt(jQuery.fn.collapse.Constructor.VERSION.split('.')[0], 10);\n    }\n    if (window.bootstrap && window.bootstrap.Collapse) {\n        return parseInt(window.bootstrap.Collapse.VERSION.split('.')[0], 10);\n    }\n    return 0;\n}\nexports.bootstrapVersion = bootstrapVersion;\n/**\n * Retrun provided argument.\n * If argument is a function, returns the result of a function call.\n * @param {Function|any} e - The argument to check if a function and call if so.\n * @returns {any} - Either the result of the function call (e) or e if it is not a function.\n */\nfunction unfold(e) {\n    if (typeof e === 'function') {\n        return e();\n    }\n    return e;\n}\nexports.unfold = unfold;\n/**\n * Map values through unfold and return first non-nil value.\n * @param {Array<T>} collection - The collection to map through unfold.;\n * @returns {T} - The first non-nil value.\n */\nexports.firstNonNil = lodash_1.default.flow([\n    lodash_1.default.partialRight(lodash_1.default.map, unfold),\n    lodash_1.default.partialRight(lodash_1.default.find, v => !lodash_1.default.isUndefined(v))\n]);\n/**\n * Create enclosed state. Returns functions to getting and cycling between states.\n * @param {*} a - initial state.\n * @param {*} b - next state.\n * @returns {Functions[]} -- [get, toggle];\n */\nfunction withSwitch(a, b) {\n    let state = a;\n    let next = b;\n    /**\n     * Returns the state of the switch.\n     * @returns {*} - The current state.\n     */\n    function get() {\n        return state;\n    }\n    /**\n     * Toggles the state of the switch.\n     */\n    function toggle() {\n        const prev = state;\n        state = next;\n        next = prev;\n    }\n    return [get, toggle];\n}\nexports.withSwitch = withSwitch;\n/**\n * Create a function that will call the provided function only the provided limit.\n * @param {Function} callback - The callback to call.\n * @param {object} options - The options to use.\n * @param {number} options.limit - The limit to call the callback.\n * @param {number} options.delay - The delay to wait before resetting the call count.\n * @returns {Function} - The function that will call the callback only the provided limit.\n */\nfunction observeOverload(callback, options = {}) {\n    const { limit = 50, delay = 500 } = options;\n    let callCount = 0;\n    let timeoutID = 0;\n    const reset = () => callCount = 0;\n    return () => {\n        if (timeoutID !== 0) {\n            clearTimeout(timeoutID);\n            timeoutID = 0;\n        }\n        timeoutID = setTimeout(reset, delay);\n        callCount += 1;\n        if (callCount >= limit) {\n            clearTimeout(timeoutID);\n            reset();\n            return callback();\n        }\n    };\n}\nexports.observeOverload = observeOverload;\n/**\n * Returns the components that are provided within an evaluation context.\n * @param {any} context - The evaluation context to get the components from.\n * @param {boolean} excludeNested - Exclude nested components.\n * @param {Array<string>} excludedTypes - The types of components to exclude.\n * @returns {Array} - The components within the evaluation context.\n */\nfunction getContextComponents(context, excludeNested, excludedTypes = []) {\n    const values = [];\n    context.utils.eachComponent(context.instance.options.editForm.components, (component, path) => {\n        const addToContextComponents = excludeNested ? !component.tree : true;\n        if (component.key !== context.data.key && addToContextComponents && !lodash_1.default.includes(excludedTypes, component.type)) {\n            values.push({\n                label: `${component.label || component.key} (${path})`,\n                value: path,\n            });\n        }\n    });\n    return values;\n}\nexports.getContextComponents = getContextComponents;\n/**\n * Returns the button components that are within an evaluation context.\n * @param {any} context - The evaluation context to get the components from.\n * @returns {Array} - The button components within the evaluation context.\n */\nfunction getContextButtons(context) {\n    const values = [];\n    context.utils.eachComponent(context.instance.options.editForm.components, (component) => {\n        if (component.type === 'button') {\n            values.push({\n                label: `${component.key} (${component.label})`,\n                value: component.key,\n            });\n        }\n    });\n    return values;\n}\nexports.getContextButtons = getContextButtons;\n// Tags that could be in text, that should be ommited or handled in a special way\nconst inTextTags = ['#text', 'A', 'B', 'EM', 'I', 'SMALL', 'STRONG', 'SUB', 'SUP', 'INS', 'DEL', 'MARK', 'CODE'];\n/**\n * Helper function for 'translateHTMLTemplate'. Translates text value of the passed html element.\n * @param {HTMLElement} elem - The element to translate.\n * @param {Function} translate - The translation function.\n * @returns {string} - Translated element template.\n */\nfunction translateElemValue(elem, translate) {\n    if (!elem.innerText) {\n        return elem.innerHTML;\n    }\n    const elemValue = elem.innerText.replace(Evaluator_1.Evaluator.templateSettings.interpolate, '').replace(/\\s\\s+/g, ' ').trim();\n    const translatedValue = translate(elemValue);\n    if (elemValue !== translatedValue) {\n        const links = elem.innerHTML.match(/<a[^>]*>(.*?)<\\/a>/g);\n        if (links && links.length) {\n            if (links.length === 1 && links[0].length === elem.innerHTML.length) {\n                return elem.innerHTML.replace(elemValue, translatedValue);\n            }\n            const translatedLinks = links.map(link => {\n                const linkElem = document.createElement('a');\n                linkElem.innerHTML = link;\n                return translateElemValue(linkElem, translate);\n            });\n            return `${translatedValue} (${translatedLinks.join(', ')})`;\n        }\n        else {\n            return elem.innerText.replace(elemValue, translatedValue);\n        }\n    }\n    else {\n        return elem.innerHTML;\n    }\n}\n/**\n * Helper function for 'translateHTMLTemplate'. Goes deep through html tag children and calls function to translate their text values.\n * @param {HTMLElement} tag - The tag to translate.\n * @param {Function} translate - The translation function.\n * @returns {void}\n */\nfunction translateDeepTag(tag, translate) {\n    const children = tag.children.length && [...tag.children];\n    const shouldTranslateEntireContent = children && children.every(child => child.children.length === 0\n        && inTextTags.some(tag => child.nodeName === tag));\n    if (!children || shouldTranslateEntireContent) {\n        tag.innerHTML = translateElemValue(tag, translate);\n    }\n    else {\n        children.forEach(child => translateDeepTag(child, translate));\n    }\n}\n/**\n * Translates text values in html template.\n * @param {string} template - The template to translate.\n * @param {Function} translate - The translation function.\n * @returns {string} - Html template with translated values.\n */\nfunction translateHTMLTemplate(template, translate) {\n    const isHTML = /<[^>]*>/.test(template);\n    if (!isHTML) {\n        return translate(template);\n    }\n    const tempElem = document.createElement('div');\n    tempElem.innerHTML = template;\n    if (tempElem.innerText && tempElem.children.length) {\n        translateDeepTag(tempElem, translate);\n        return tempElem.innerHTML;\n    }\n    return template;\n}\nexports.translateHTMLTemplate = translateHTMLTemplate;\n/**\n * Sanitize an html string.\n * @param {string} string - The string to sanitize.\n * @param {any} options - The options to use for sanitization.\n * @returns {string} - The sanitized html string.\n */\nfunction sanitize(string, options) {\n    if (typeof dompurify_1.default.sanitize !== 'function') {\n        return string;\n    }\n    // Dompurify configuration\n    const sanitizeOptions = {\n        ADD_ATTR: ['ref', 'target'],\n        USE_PROFILES: { html: true }\n    };\n    // Use profiles\n    if (options.sanitizeConfig && options.sanitizeConfig.useProfiles) {\n        Object.keys(options.sanitizeConfig.useProfiles).forEach(key => {\n            sanitizeOptions.USE_PROFILES[key] = options.sanitizeConfig.useProfiles[key];\n        });\n    }\n    // Add attrs\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addAttr) && options.sanitizeConfig.addAttr.length > 0) {\n        options.sanitizeConfig.addAttr.forEach((attr) => {\n            sanitizeOptions.ADD_ATTR.push(attr);\n        });\n    }\n    // Add tags\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addTags) && options.sanitizeConfig.addTags.length > 0) {\n        sanitizeOptions.ADD_TAGS = options.sanitizeConfig.addTags;\n    }\n    // Allow tags\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.allowedTags) && options.sanitizeConfig.allowedTags.length > 0) {\n        sanitizeOptions.ALLOWED_TAGS = options.sanitizeConfig.allowedTags;\n    }\n    // Allow attributes\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.allowedAttrs) && options.sanitizeConfig.allowedAttrs.length > 0) {\n        sanitizeOptions.ALLOWED_ATTR = options.sanitizeConfig.allowedAttrs;\n    }\n    // Allowd URI Regex\n    if (options.sanitizeConfig && options.sanitizeConfig.allowedUriRegex) {\n        const allowedUriRegex = options.sanitizeConfig.allowedUriRegex;\n        sanitizeOptions.ALLOWED_URI_REGEXP = lodash_1.default.isString(allowedUriRegex) ? new RegExp(allowedUriRegex) : allowedUriRegex;\n    }\n    // Allow to extend the existing array of elements that are safe for URI-like values\n    if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addUriSafeAttr) && options.sanitizeConfig.addUriSafeAttr.length > 0) {\n        sanitizeOptions.ADD_URI_SAFE_ATTR = options.sanitizeConfig.addUriSafeAttr;\n    }\n    return dompurify_1.default.sanitize(string, sanitizeOptions);\n}\nexports.sanitize = sanitize;\n/**\n * Fast cloneDeep for JSON objects only.\n * @param {any} obj - The object to perform a fast clone deep against.\n * @returns {any} - The cloned object.\n */\nfunction fastCloneDeep(obj) {\n    return obj ? JSON.parse(JSON.stringify(obj)) : obj;\n}\nexports.fastCloneDeep = fastCloneDeep;\n/**\n * Returns if the component is an input component.\n * @param {import('@formio/core').Component} componentJson - The JSON of a component.\n * @returns {bool} - TRUE if the component is an input component; FALSE otherwise.\n */\nfunction isInputComponent(componentJson) {\n    if (componentJson.input === false || componentJson.input === true) {\n        return componentJson.input;\n    }\n    switch (componentJson.type) {\n        case 'htmlelement':\n        case 'content':\n        case 'columns':\n        case 'fieldset':\n        case 'panel':\n        case 'table':\n        case 'tabs':\n        case 'well':\n        case 'button':\n            return false;\n        default:\n            return true;\n    }\n}\nexports.isInputComponent = isInputComponent;\n/**\n * Takes a component path, and returns a component path array.\n * @param {string} pathStr - The path string to convert to an array.\n * @returns {Arryay<number>} - The array of paths.\n */\nfunction getArrayFromComponentPath(pathStr) {\n    if (!pathStr || !lodash_1.default.isString(pathStr)) {\n        if (!lodash_1.default.isArray(pathStr)) {\n            return [pathStr];\n        }\n        return pathStr;\n    }\n    return pathStr.replace(/[[\\]]/g, '.')\n        .replace(/\\.\\./g, '.')\n        .replace(/(^\\.)|(\\.$)/g, '')\n        .split('.')\n        .map(part => lodash_1.default.defaultTo(lodash_1.default.toNumber(part), part));\n}\nexports.getArrayFromComponentPath = getArrayFromComponentPath;\n/**\n * Returns true if the component is a child of the parent.\n * @param {any} child - The child component to check.\n * @param {any} parent - The parent component to check.\n * @returns {boolean} - TRUE if the child is a child of the parent; FALSE otherwise.\n */\nfunction isChildOf(child, parent) {\n    while (child && child.parent) {\n        if (child.parent === parent) {\n            return true;\n        }\n        child = child.parent;\n    }\n    return false;\n}\nexports.isChildOf = isChildOf;\n/**\n * Takes an array of component path indexes, and returns a string version of that array.\n * @param {Array<number>} path - The path array to convert to a string.\n * @returns {string} - The string version of the path.\n */\nfunction getStringFromComponentPath(path) {\n    if (!lodash_1.default.isArray(path)) {\n        return path;\n    }\n    let strPath = '';\n    path.forEach((part, i) => {\n        if (lodash_1.default.isNumber(part)) {\n            strPath += `[${part}]`;\n        }\n        else {\n            strPath += i === 0 ? part : `.${part}`;\n        }\n    });\n    return strPath;\n}\nexports.getStringFromComponentPath = getStringFromComponentPath;\n/**\n * Takes a number and rounds it to the provided precision amount.\n * @param {number} number - The number to round.\n * @param {number} precision - The precision to round the number to.\n * @returns {string} - The rounded number.\n */\nfunction round(number, precision) {\n    if (lodash_1.default.isNumber(number)) {\n        return number.toFixed(precision);\n    }\n    return number.toString();\n}\nexports.round = round;\n/**\n * Check for Internet Explorer browser version\n * @returns {(number|null)} - The IE browser version or null if not IE\n */\nfunction getIEBrowserVersion() {\n    const { ie, version } = getBrowserInfo();\n    return ie ? version : null;\n}\nexports.getIEBrowserVersion = getIEBrowserVersion;\n/**\n * Get browser name and version (modified from 'jquery-browser-plugin')\n * @returns {object} -- {{browser name, version, isWebkit?}}\n * Possible browser names: chrome, safari, ie, edge, opera, mozilla, yabrowser\n */\nfunction getBrowserInfo() {\n    const browser = {};\n    if (typeof window === 'undefined') {\n        return browser;\n    }\n    const ua = window.navigator.userAgent.toLowerCase();\n    const match = /(edge|edg)\\/([\\w.]+)/.exec(ua) ||\n        /(opr)[/]([\\w.]+)/.exec(ua) ||\n        /(yabrowser)[ /]([\\w.]+)/.exec(ua) ||\n        /(chrome)[ /]([\\w.]+)/.exec(ua) ||\n        /(iemobile)[/]([\\w.]+)/.exec(ua) ||\n        /(version)(applewebkit)[ /]([\\w.]+).*(safari)[ /]([\\w.]+)/.exec(ua) ||\n        /(webkit)[ /]([\\w.]+).*(version)[ /]([\\w.]+).*(safari)[ /]([\\w.]+)/.exec(ua) ||\n        /(webkit)[ /]([\\w.]+)/.exec(ua) ||\n        /(opera)(?:.*version|)[ /]([\\w.]+)/.exec(ua) ||\n        /(msie) ([\\w.]+)/.exec(ua) ||\n        ua.indexOf('trident') >= 0 && /(rv)(?::| )([\\w.]+)/.exec(ua) ||\n        ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\\w.]+)|)/.exec(ua) ||\n        [];\n    const matched = {\n        browser: match[5] || match[3] || match[1] || '',\n        version: match[4] || match[2] || '0'\n    };\n    if (matched.browser) {\n        browser[matched.browser] = true;\n        browser.version = parseInt(matched.version, 10);\n    }\n    // Chrome, Opera 15+, Safari and Yandex.Browser are webkit based browsers\n    if (browser.chrome || browser.opr || browser.safari || browser.edg || browser.yabrowser) {\n        browser.isWebkit = true;\n    }\n    // IE11 has a new token so we will assign it ie to avoid breaking changes\n    if (browser.rv || browser.iemobile) {\n        browser.ie = true;\n    }\n    // Edge has a new token since it became webkit based\n    if (browser.edg) {\n        browser.edge = true;\n    }\n    // Opera 15+ are identified as opr\n    if (browser.opr) {\n        browser.opera = true;\n    }\n    return browser;\n}\nexports.getBrowserInfo = getBrowserInfo;\n/**\n * Takes a component path, which may include array indicies (i.e. [0][1]), and returns the compoennt path without the indicies.\n * @param {string} path - The path to remove the indicies from.\n * @returns {string} - The path without the indicies.\n */\nfunction getComponentPathWithoutIndicies(path = '') {\n    return path.replace(/\\[\\d+\\]/, '');\n}\nexports.getComponentPathWithoutIndicies = getComponentPathWithoutIndicies;\n/**\n * Returns a path to the component which based on its schema\n * @param {import('@formio/core').Component} component - Component containing link to its parent's schema in the 'parent' property\n * @returns {string} - Path to the component\n */\nfunction getComponentPath(component) {\n    return component.paths.localDataPath;\n}\nexports.getComponentPath = getComponentPath;\n/**\n * Returns a parent component of the passed component instance skipping all the Layout components\n * @param {Component} componentInstance - The component to check for the parent.\n * @returns {Component|undefined} - The parent data component.\n */\nfunction getDataParentComponent(componentInstance) {\n    if (!componentInstance) {\n        return;\n    }\n    const { parent } = componentInstance;\n    if (parent && (parent.isInputComponent || parent.input)) {\n        return parent;\n    }\n    else {\n        return getDataParentComponent(parent);\n    }\n}\nexports.getDataParentComponent = getDataParentComponent;\n/**\n * Returns whether the value is a promise\n * @param {any} value - The value to check\n * @returns {boolean} - TRUE if the value is a promise; FALSE otherwise\n */\nfunction isPromise(value) {\n    return value\n        && value.then\n        && typeof value.then === 'function'\n        && Object.prototype.toString.call(value) === '[object Promise]';\n}\nexports.isPromise = isPromise;\n/**\n * Determines if the component has a scoping parent in tree (a component which scopes its children and manages its\n * changes by itself, e.g. EditGrid)\n * @param {Component} componentInstance - The component to check for the scoping parent.\n * @param {boolean} firstPass - Whether it is the first pass of the function\n * @returns {boolean|*} - TRUE if the component has a scoping parent; FALSE otherwise\n */\nfunction isInsideScopingComponent(componentInstance, firstPass = true) {\n    if (!firstPass && (componentInstance === null || componentInstance === void 0 ? void 0 : componentInstance.hasScopedChildren)) {\n        return true;\n    }\n    const dataParent = getDataParentComponent(componentInstance);\n    if (dataParent === null || dataParent === void 0 ? void 0 : dataParent.hasScopedChildren) {\n        return true;\n    }\n    else if (dataParent === null || dataParent === void 0 ? void 0 : dataParent.parent) {\n        return isInsideScopingComponent(dataParent.parent, false);\n    }\n    return false;\n}\nexports.isInsideScopingComponent = isInsideScopingComponent;\n/**\n * Returns all the focusable elements within the provided dom element.\n * @param {HTMLElement} element - The element to get the focusable elements from.\n * @returns {NodeList<HTMLElement>} - The focusable elements within the provided element.\n */\nfunction getFocusableElements(element) {\n    const focusableSelector = `button:not([disabled]), input:not([disabled]), select:not([disabled]),\n    textarea:not([disabled]), button:not([disabled]), [href]`;\n    return element.querySelectorAll(focusableSelector);\n}\nexports.getFocusableElements = getFocusableElements;\nexports.componentValueTypes = {\n    number: 'number',\n    string: 'string',\n    boolean: 'boolean',\n    array: 'array',\n    object: 'object',\n    date: 'date',\n    any: 'any',\n};\n/**\n * Returns the saved types for the component\n * @param {import('@formio/core').Component} fullSchema - The component schema\n * @returns {Array<string>|null} - The saved types for the component\n */\nfunction getComponentSavedTypes(fullSchema) {\n    const schema = fullSchema || {};\n    if (schema.persistent !== true) {\n        return [];\n    }\n    if (schema.multiple) {\n        return [exports.componentValueTypes.array];\n    }\n    return null;\n}\nexports.getComponentSavedTypes = getComponentSavedTypes;\n/**\n * Interpolates @formio/core errors so that they are compatible with the renderer\n * @param {Component} component - The component to interpolate the errors for\n * @param {FieldError[]} errors - The errors to interpolate\n * @param {Function} interpolateFn - The interpolation function\n * @returns {[]} - The interpolated errors\n */\nconst interpolateErrors = (component, errors, interpolateFn) => {\n    return errors.map((error) => {\n        error.component = component;\n        const { errorKeyOrMessage, context } = error;\n        const toInterpolate = component.errors && component.errors[errorKeyOrMessage] ? component.errors[errorKeyOrMessage] : errorKeyOrMessage;\n        return Object.assign(Object.assign({}, error), { message: unescapeHTML(interpolateFn(toInterpolate, context)), context: Object.assign({}, context) });\n    });\n};\nexports.interpolateErrors = interpolateErrors;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/utils/utils.js?");
+eval("\n/* global jQuery */\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __exportStar = (this && this.__exportStar) || function(m, exports) {\n    for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.removeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = exports.moment = exports.ConditionOperators = exports.jsonLogic = void 0;\nexports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isInsideScopingComponent = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = exports.observeOverload = exports.withSwitch = void 0;\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nexports._ = lodash_1.default;\nconst json_logic_js_1 = __importDefault(__webpack_require__(/*! json-logic-js */ \"./node_modules/json-logic-js/logic.js\"));\nexports.jsonLogic = json_logic_js_1.default;\nconst moment_timezone_1 = __importDefault(__webpack_require__(/*! moment-timezone/moment-timezone */ \"./node_modules/moment-timezone/moment-timezone.js\"));\nexports.moment = moment_timezone_1.default;\nconst jstimezonedetect_1 = __importDefault(__webpack_require__(/*! jstimezonedetect */ \"./node_modules/jstimezonedetect/dist/jstz.min.js\"));\nconst operators_1 = __webpack_require__(/*! ./jsonlogic/operators */ \"./lib/cjs/utils/jsonlogic/operators.js\");\nconst dompurify_1 = __importDefault(__webpack_require__(/*! dompurify */ \"./node_modules/dompurify/dist/purify.cjs.js\"));\nconst formUtils_1 = __webpack_require__(/*! ./formUtils */ \"./lib/cjs/utils/formUtils.js\");\nconst Evaluator_1 = __webpack_require__(/*! ./Evaluator */ \"./lib/cjs/utils/Evaluator.js\");\nObject.defineProperty(exports, \"Evaluator\", ({ enumerable: true, get: function () { return Evaluator_1.Evaluator; } }));\nconst conditionOperators_1 = __importDefault(__webpack_require__(/*! ./conditionOperators */ \"./lib/cjs/utils/conditionOperators/index.js\"));\nexports.ConditionOperators = conditionOperators_1.default;\nconst interpolate = Evaluator_1.Evaluator.interpolate;\nexports.interpolate = interpolate;\n__exportStar(__webpack_require__(/*! ./formUtils */ \"./lib/cjs/utils/formUtils.js\"), exports);\n// Configure JsonLogic\noperators_1.lodashOperators.forEach((name) => json_logic_js_1.default.add_operation(`_${name}`, lodash_1.default[name]));\n// Retrieve Any Date\njson_logic_js_1.default.add_operation('getDate', (date) => {\n    return (0, moment_timezone_1.default)(date).toISOString();\n});\n// Set Relative Minimum Date\njson_logic_js_1.default.add_operation('relativeMinDate', (relativeMinDate) => {\n    return (0, moment_timezone_1.default)().subtract(relativeMinDate, 'days').toISOString();\n});\n// Set Relative Maximum Date\njson_logic_js_1.default.add_operation('relativeMaxDate', (relativeMaxDate) => {\n    return (0, moment_timezone_1.default)().add(relativeMaxDate, 'days').toISOString();\n});\n/**\n * Evaluate a method.\n * @param {Function|string|object} func - The function to evaluate.\n * @param {*} args - A map of arguments to pass to the function.\n * @param {string} ret - The name of the \"return\" variable in the script.\n * @param {boolean} interpolate - True if the script should be interpolated before being executed.\n * @param {import('@formio/core').EvaluatorOptions} options - The evaluator options.\n * @returns {*} - The result of the evaluation.\n */\nfunction evaluate(func, args, ret, interpolate, options = {}) {\n    return Evaluator_1.Evaluator.evaluate(func, args, ret, interpolate, undefined, options);\n}\nexports.evaluate = evaluate;\n/**\n * Returns a random compoennt ID.\n * @returns {string} - A random component ID.\n */\nfunction getRandomComponentId() {\n    return `e${Math.random().toString(36).substring(7)}`;\n}\nexports.getRandomComponentId = getRandomComponentId;\n/**\n * Get a property value of an element.\n * @param {CSSStyleDeclaration} style - The style element to get the property value from.\n * @param {string} prop - The property to get the value for.\n * @returns {number} - The value of the property.\n */\nfunction getPropertyValue(style, prop) {\n    let value = style.getPropertyValue(prop);\n    value = value ? value.replace(/[^0-9.]/g, '') : '0';\n    return parseFloat(value);\n}\nexports.getPropertyValue = getPropertyValue;\n/**\n * Get an elements bounding rectagle.\n * @param {HTMLElement} element - A DOM element to get the bounding rectangle for.\n * @returns {{x: number, y: number, width: number, height: number}} - The bounding rectangle.\n */\nfunction getElementRect(element) {\n    const style = window.getComputedStyle(element, null);\n    return {\n        x: getPropertyValue(style, 'left'),\n        y: getPropertyValue(style, 'top'),\n        width: getPropertyValue(style, 'width'),\n        height: getPropertyValue(style, 'height')\n    };\n}\nexports.getElementRect = getElementRect;\n/**\n * Get non HTMLElement property in the window object\n * @param {string} property - The window property to fetch the script plugin from.\n * @returns {any | undefined} - The HTML Element property on the window object.\n */\nfunction getScriptPlugin(property) {\n    const obj = window[property];\n    if (typeof HTMLElement === 'object' ? obj instanceof HTMLElement : //DOM2\n        obj && typeof obj === 'object' && true && obj.nodeType === 1 && typeof obj.nodeName === 'string') {\n        return undefined;\n    }\n    return obj;\n}\nexports.getScriptPlugin = getScriptPlugin;\n/**\n * Determines the boolean value of a setting.\n * @param {string|boolean} value - A string or boolean value to convert to boolean.\n * @returns {boolean} - The boolean value of the setting.\n */\nfunction boolValue(value) {\n    if (lodash_1.default.isBoolean(value)) {\n        return value;\n    }\n    else if (lodash_1.default.isString(value)) {\n        return (value.toLowerCase() === 'true');\n    }\n    else {\n        return !!value;\n    }\n}\nexports.boolValue = boolValue;\n/**\n * Check to see if an ID is a mongoID.\n * @param {string} text - The text to check if it is a mongoID.\n * @returns {boolean} - TRUE if the text is a mongoID; FALSE otherwise.\n */\nfunction isMongoId(text) {\n    return !!text.toString().match(/^[0-9a-fA-F]{24}$/);\n}\nexports.isMongoId = isMongoId;\n/**\n * Checks the calculated value for a provided component and data.\n * @param {import('@formio/core').Component} component - The component to check for the calculated value.\n * @param {import('@formio/core').Submission} submission - A submission object.\n * @param {*} rowData - The contextual row data for the component.\n */\nfunction checkCalculated(component, submission, rowData) {\n    // Process calculated value stuff if present.\n    if (component.calculateValue) {\n        lodash_1.default.set(rowData, component.key, evaluate(component.calculateValue, {\n            value: undefined,\n            data: submission ? submission.data : rowData,\n            row: rowData,\n            util: this,\n            component\n        }, 'value'));\n    }\n}\nexports.checkCalculated = checkCalculated;\n/**\n * Check if a simple conditional evaluates to true.\n * @param {import('@formio/core').Component} component - The component to check for the conditional.\n * @param {import('@formio/core').SimpleConditional} condition - The condition to check.\n * @param {*} row - The row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The instance of the component.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\n/**\n *\n * @param conditionPaths\n * @param data\n */\nfunction getConditionalPathsRecursive(conditionPaths, data) {\n    let currentGlobalIndex = 0;\n    const conditionalPathsArray = [];\n    const getConditionalPaths = (data, currentPath = '', localIndex = 0) => {\n        currentPath = currentPath.replace(/^\\.+|\\.+$/g, '');\n        const currentLocalIndex = localIndex;\n        const currentData = lodash_1.default.get(data, currentPath);\n        if (Array.isArray(currentData) && currentData.filter(Boolean).length > 0) {\n            if (currentData.some(element => typeof element !== 'object')) {\n                return;\n            }\n            const hasInnerDataArray = currentData.find(x => Array.isArray(x[conditionPaths[currentLocalIndex]]));\n            if (hasInnerDataArray) {\n                currentData.forEach((_, indexOutside) => {\n                    const innerCompDataPath = `${currentPath}[${indexOutside}].${conditionPaths[currentLocalIndex]}`;\n                    getConditionalPaths(data, innerCompDataPath, currentLocalIndex + 1);\n                });\n            }\n            else {\n                currentData.forEach((x, index) => {\n                    if (!lodash_1.default.isNil(x[conditionPaths[currentLocalIndex]])) {\n                        const compDataPath = `${currentPath}[${index}].${conditionPaths[currentLocalIndex]}`;\n                        conditionalPathsArray.push(compDataPath);\n                    }\n                });\n            }\n        }\n        else {\n            if (!conditionPaths[currentGlobalIndex]) {\n                return;\n            }\n            currentGlobalIndex = currentGlobalIndex + 1;\n            getConditionalPaths(data, `${currentPath}.${conditionPaths[currentGlobalIndex - 1]}`, currentGlobalIndex);\n        }\n    };\n    getConditionalPaths(data);\n    return conditionalPathsArray;\n}\n/**\n *\n * @param component\n * @param condition\n * @param row\n * @param data\n * @param instance\n */\nfunction checkSimpleConditional(component, condition, row, data, instance) {\n    if (condition.when) {\n        const value = getComponentActualValue(condition.when, data, row);\n        const eq = String(condition.eq);\n        const show = String(condition.show);\n        // Special check for selectboxes component.\n        if (lodash_1.default.isObject(value) && lodash_1.default.has(value, condition.eq)) {\n            return String(value[condition.eq]) === show;\n        }\n        // FOR-179 - Check for multiple values.\n        if (Array.isArray(value) && value.map(String).includes(eq)) {\n            return show === 'true';\n        }\n        return (String(value) === eq) === (show === 'true');\n    }\n    else {\n        const { conditions = [], conjunction = 'all', show = true } = condition;\n        if (!conditions.length) {\n            return true;\n        }\n        const conditionsResult = lodash_1.default.map(conditions, (cond) => {\n            var _a, _b;\n            const { value: comparedValue, operator, component: conditionComponentPath } = cond;\n            if (!conditionComponentPath) {\n                return true;\n            }\n            const splittedConditionPath = conditionComponentPath.split('.');\n            const conditionalPaths = ((_a = instance === null || instance === void 0 ? void 0 : instance.parent) === null || _a === void 0 ? void 0 : _a.type) === 'datagrid' || ((_b = instance === null || instance === void 0 ? void 0 : instance.parent) === null || _b === void 0 ? void 0 : _b.type) === 'editgrid' ? [] : getConditionalPathsRecursive(splittedConditionPath, data);\n            if (conditionalPaths.length > 0) {\n                return conditionalPaths.map((path) => {\n                    const value = getComponentActualValue(path, data, row);\n                    const ConditionOperator = conditionOperators_1.default[operator];\n                    return ConditionOperator\n                        ? new ConditionOperator().getResult({ value, comparedValue, instance, component, path })\n                        : true;\n                });\n            }\n            else {\n                const value = getComponentActualValue(conditionComponentPath, data, row);\n                const СonditionOperator = conditionOperators_1.default[operator];\n                return СonditionOperator\n                    ? new СonditionOperator().getResult({ value, comparedValue, instance, component, path: conditionComponentPath })\n                    : true;\n            }\n        });\n        let result = false;\n        switch (conjunction) {\n            case 'any':\n                result = lodash_1.default.some(conditionsResult.flat(), res => !!res);\n                break;\n            default:\n                result = lodash_1.default.every(conditionsResult.flat(), res => !!res);\n        }\n        return show ? result : !result;\n    }\n}\nexports.checkSimpleConditional = checkSimpleConditional;\n/**\n * Returns a components normalized value.\n * @param {string} compPath - The full path to the component.\n * @param {*} data - The data object to get the value from.\n * @param {*} row - The contextual row data for the component.\n * @returns {*} - The normalized value of the component.\n */\nfunction getComponentActualValue(compPath, data, row) {\n    let value = null;\n    if (data) {\n        value = (0, formUtils_1.getValue)({ data }, compPath);\n    }\n    if (row && lodash_1.default.isNil(value)) {\n        value = (0, formUtils_1.getValue)({ data: row }, compPath);\n    }\n    // FOR-400 - Fix issue where falsey values were being evaluated as show=true\n    if (lodash_1.default.isNil(value) || (lodash_1.default.isObject(value) && lodash_1.default.isEmpty(value))) {\n        value = '';\n    }\n    return value;\n}\nexports.getComponentActualValue = getComponentActualValue;\n/**\n * Check custom javascript conditional.\n * @param {import('@formio/core').Component} component - The component to check for the conditional.\n * @param {string} custom - The custom conditional string to evaluate.\n * @param {*} row - The row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {string} variable - The variable name for the result of the custom conditional.\n * @param {*} onError - A custom return if there is an error or the value is null from the evaluation.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @returns {*} - The result of the evaulation.\n */\nfunction checkCustomConditional(component, custom, row, data, form, variable, onError, instance) {\n    if (typeof custom === 'string') {\n        custom = `var ${variable} = true; ${custom}; return ${variable};`;\n    }\n    const value = (instance && instance.evaluate) ?\n        instance.evaluate(custom, { row, data, form }) :\n        evaluate(custom, { row, data, form });\n    if (value === null) {\n        return onError;\n    }\n    return value;\n}\nexports.checkCustomConditional = checkCustomConditional;\n/**\n * Check a component for JSON conditionals.\n * @param {import('@formio/core').Component} component - The component\n * @param {import('@formio/core').JSONConditional} json - The json conditional to check.\n * @param {*} row - The contextual row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The Form JSON of the form.\n * @param {*} onError - Custom return value if there is an error.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\nfunction checkJsonConditional(component, json, row, data, form, onError) {\n    try {\n        return json_logic_js_1.default.apply(json, {\n            data,\n            row,\n            form,\n            _: lodash_1.default,\n        });\n    }\n    catch (err) {\n        console.warn(`An error occurred in jsonLogic advanced condition for ${component.key}`, err);\n        return onError;\n    }\n}\nexports.checkJsonConditional = checkJsonConditional;\n/**\n * Returns the contextual row data for a component.\n * @param {import('@formio/core').Component} component - The component to get the row data for.\n * @param {*} row - The row data for the component.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @param {*} conditional - The component conditional.\n * @returns {*} - The contextual row data for the component.\n */\nfunction getRow(component, row, instance, conditional) {\n    var _a, _b, _c;\n    const condition = conditional || component.conditional;\n    // If no component's instance passed (happens only in 6.x server), calculate its path based on the schema\n    if (!instance) {\n        instance = lodash_1.default.cloneDeep(component);\n    }\n    const dataParent = getDataParentComponent(instance);\n    if (dataParent) {\n        const parentPath = (_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localDataPath;\n        const isTriggerCondtionComponentPath = condition.when || !condition.conditions\n            ? (_b = condition.when) === null || _b === void 0 ? void 0 : _b.startsWith((_c = dataParent.paths) === null || _c === void 0 ? void 0 : _c.localPath)\n            : lodash_1.default.some(condition.conditions, cond => { var _a; return cond.component.startsWith((_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localPath); });\n        if (isTriggerCondtionComponentPath) {\n            const newRow = {};\n            lodash_1.default.set(newRow, parentPath, row);\n            row = newRow;\n        }\n    }\n    return row;\n}\n/**\n * Checks the conditions for a provided component and data.\n * @param {import('@formio/core').Component} component - The component to check for the condition.\n * @param {*} row - The data within a row\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\nfunction checkCondition(component, row, data, form, instance) {\n    const { customConditional, conditional } = component;\n    if (customConditional) {\n        return checkCustomConditional(component, customConditional, row, data, form, 'show', true, instance);\n    }\n    else if (conditional && (conditional.when || lodash_1.default.some(conditional.conditions || [], condition => condition.component && condition.operator))) {\n        row = getRow(component, row, instance);\n        return checkSimpleConditional(component, conditional, row, data, instance);\n    }\n    else if (conditional && conditional.json) {\n        return checkJsonConditional(component, conditional.json, row, data, form, true);\n    }\n    // Default to show.\n    return true;\n}\nexports.checkCondition = checkCondition;\n/**\n * Test a trigger on a component.\n * @param {import('@formio/core').Component} component - The component to test the trigger against.\n * @param {import('@formio/core').LogicTrigger} trigger - The trigger configuration.\n * @param {import('@formio/core').DataObject} row - The contextual row data.\n * @param {import('@formio/core').DataObject} data - The root data object.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {any} instance - The component that is performing the trigger.\n * @returns {boolean} - TRUE if the trigger should fire; FALSE otherwise.\n */\nfunction checkTrigger(component, trigger, row, data, form, instance) {\n    // If trigger is empty, don't fire it\n    if (!trigger || !trigger[trigger.type]) {\n        return false;\n    }\n    switch (trigger.type) {\n        case 'simple':\n            row = getRow(component, row, instance, trigger.simple);\n            return checkSimpleConditional(component, trigger.simple, row, data, instance);\n        case 'javascript':\n            return checkCustomConditional(component, trigger.javascript, row, data, form, 'result', false, instance);\n        case 'json':\n            return checkJsonConditional(component, trigger.json, row, data, form, false);\n    }\n    // If none of the types matched, don't fire the trigger.\n    return false;\n}\nexports.checkTrigger = checkTrigger;\n/**\n * Sets a property on a component via an executed Logic action.\n * @param {import('@formio/core').Component} component - The component to set the property on.\n * @param {import('@formio/core').LogicAction} action - The action to perform on the component.\n * @param {string} result - The name of the variable in the evaulation to use as the result.\n * @param {import('@formio/core').DataObject} row - The contextual row data.\n * @param {import('@formio/core').DataObject} data - The full submission data.\n * @param {any} instance - The component instance.\n * @returns {import('@formio/core').Component} - The modified component.\n */\nfunction setActionProperty(component, action, result, row, data, instance) {\n    const property = action.property.value;\n    switch (action.property.type) {\n        case 'boolean': {\n            const currentValue = lodash_1.default.get(component, property, false).toString();\n            const newValue = action.state.toString();\n            if (currentValue !== newValue) {\n                lodash_1.default.set(component, property, newValue === 'true');\n            }\n            break;\n        }\n        case 'string': {\n            const evalData = {\n                data,\n                row,\n                component,\n                result,\n            };\n            const textValue = action.property.component ? action[action.property.component] : action.text;\n            const currentValue = lodash_1.default.get(component, property, '');\n            const newValue = (instance && instance.interpolate)\n                ? instance.interpolate(textValue, evalData)\n                : Evaluator_1.Evaluator.interpolate(textValue, evalData);\n            if (newValue !== currentValue) {\n                lodash_1.default.set(component, property, newValue);\n            }\n            break;\n        }\n    }\n    return component;\n}\nexports.setActionProperty = setActionProperty;\n/**\n * Removes HTML tags from string e.g. <div>Hello World</div> => Hello World\n * @param {string} str - The string to remove HTML tags from.\n * @returns {string} - The string without HTML tags.\n */\nfunction removeHTML(str) {\n    const doc = new window.DOMParser().parseFromString(str, 'text/html');\n    return (doc.body.textContent || '').trim();\n}\nexports.removeHTML = removeHTML;\n/**\n * Unescape HTML characters like &lt, &gt, &amp and etc.\n * @param {string} str - The string to unescape.\n * @returns {string} - The unescaped string.\n */\nfunction unescapeHTML(str) {\n    if (typeof window === 'undefined' || !('DOMParser' in window)) {\n        return str;\n    }\n    const elem = document.createElement('textarea');\n    elem.innerHTML = str;\n    return elem.value;\n}\nexports.unescapeHTML = unescapeHTML;\n/**\n * Make HTML element from string\n * @param {string} str - The string to convert to an HTML element.\n * @param {string} selector - The selector to use to get the element once it is created.\n * @returns {HTMLElement} - The HTML element that was created.\n */\nfunction convertStringToHTMLElement(str, selector) {\n    const doc = new window.DOMParser().parseFromString(str, 'text/html');\n    return doc.body.querySelector(selector);\n}\nexports.convertStringToHTMLElement = convertStringToHTMLElement;\n/**\n * Make a filename guaranteed to be unique.\n * @param {string} name - The original name of the file.\n * @param {string} template - The template to use for the unique name.\n * @param {object} evalContext - The context to use for the evaluation.\n * @returns {string} - A unique filename.\n */\nfunction uniqueName(name, template, evalContext) {\n    template = template || '{{fileName}}-{{guid}}';\n    //include guid in template anyway, to prevent overwriting issue if filename matches existing file\n    if (!template.includes('{{guid}}')) {\n        template = `${template}-{{guid}}`;\n    }\n    const parts = name.split('.');\n    let fileName = parts.slice(0, parts.length - 1).join('.');\n    const extension = parts.length > 1\n        ? `.${lodash_1.default.last(parts)}`\n        : '';\n    //allow only 100 characters from original name to avoid issues with filename length restrictions\n    fileName = fileName.substr(0, 100);\n    evalContext = Object.assign(evalContext || {}, {\n        fileName,\n        guid: guid()\n    });\n    //only letters, numbers, dots, dashes, underscores and spaces are allowed. Anything else will be replaced with dash\n    const uniqueName = `${Evaluator_1.Evaluator.interpolate(template, evalContext)}${extension}`.replace(/[^0-9a-zA-Z.\\-_ ]/g, '-');\n    return uniqueName;\n}\nexports.uniqueName = uniqueName;\n/**\n * Returns a GUID\n * @returns {string} - A GUID.\n */\nfunction guid() {\n    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {\n        const r = Math.random() * 16 | 0;\n        const v = c === 'x'\n            ? r\n            : (r & 0x3 | 0x8);\n        return v.toString(16);\n    });\n}\nexports.guid = guid;\n/**\n * Return a translated date setting.\n * @param {string|Date} date - The date to translate.\n * @returns {(null|Date)} - The translated date.\n */\nfunction getDateSetting(date) {\n    if (lodash_1.default.isNil(date) || lodash_1.default.isNaN(date) || date === '') {\n        return null;\n    }\n    if (date instanceof Date) {\n        return date;\n    }\n    else if (typeof date.toDate === 'function') {\n        return date.isValid() ? date.toDate() : null;\n    }\n    let dateSetting = ((typeof date !== 'string') || (date.indexOf('moment(') === -1)) ? (0, moment_timezone_1.default)(date) : null;\n    if (dateSetting && dateSetting.isValid()) {\n        return dateSetting.toDate();\n    }\n    dateSetting = null;\n    try {\n        const value = Evaluator_1.Evaluator.evaluator(`return ${date};`, 'moment')(moment_timezone_1.default);\n        if (typeof value === 'string') {\n            dateSetting = (0, moment_timezone_1.default)(value);\n        }\n        else if (typeof value.toDate === 'function') {\n            dateSetting = (0, moment_timezone_1.default)(value.toDate().toUTCString());\n        }\n        else if (value instanceof Date) {\n            dateSetting = (0, moment_timezone_1.default)(value);\n        }\n    }\n    catch (e) {\n        return null;\n    }\n    if (!dateSetting) {\n        return null;\n    }\n    // Ensure this is a date.\n    if (!dateSetting.isValid()) {\n        return null;\n    }\n    return dateSetting.toDate();\n}\nexports.getDateSetting = getDateSetting;\n/**\n * Returns true if the date is a valid date. False otherwise.\n * @param {Date|string} date - The date to check for validity.\n * @returns {boolean} - TRUE if the date is valid; FALSE otherwise.\n */\nfunction isValidDate(date) {\n    return lodash_1.default.isDate(date) && !lodash_1.default.isNaN(date.getDate());\n}\nexports.isValidDate = isValidDate;\n/**\n * Get the current timezone string.\n * @returns {string} - The current timezone.\n */\nfunction currentTimezone() {\n    if (moment_timezone_1.default.currentTimezone) {\n        return moment_timezone_1.default.currentTimezone;\n    }\n    moment_timezone_1.default.currentTimezone = jstimezonedetect_1.default.determine().name();\n    return moment_timezone_1.default.currentTimezone;\n}\nexports.currentTimezone = currentTimezone;\n/**\n * Get an offset date provided a date object and timezone object.\n * @param {Date} date - The date to offset.\n * @param {string} timezone - The timezone to offset the date to.\n * @returns {Date} - The offset date.\n */\nfunction offsetDate(date, timezone) {\n    if (timezone === 'UTC') {\n        return {\n            date: new Date(date.getTime() + (date.getTimezoneOffset() * 60000)),\n            abbr: 'UTC'\n        };\n    }\n    const dateMoment = (0, moment_timezone_1.default)(date).tz(timezone);\n    return {\n        date: new Date(date.getTime() + ((dateMoment.utcOffset() + date.getTimezoneOffset()) * 60000)),\n        abbr: dateMoment.format('z')\n    };\n}\nexports.offsetDate = offsetDate;\n/**\n * Returns if the zones are loaded.\n * @returns {boolean} - TRUE if the zones are loaded; FALSE otherwise.\n */\nfunction zonesLoaded() {\n    return moment_timezone_1.default.zonesLoaded;\n}\nexports.zonesLoaded = zonesLoaded;\n/**\n * Returns if we should load the zones.\n * @param {string} timezone - The timezone to check if we should load the zones.\n * @returns {boolean} - TRUE if we should load the zones; FALSE otherwise.\n */\nfunction shouldLoadZones(timezone) {\n    if (timezone === currentTimezone() || timezone === 'UTC') {\n        return false;\n    }\n    return true;\n}\nexports.shouldLoadZones = shouldLoadZones;\n/**\n * Externally load the timezone data.\n * @param {string} url - The URL to load the timezone data from.\n * @param {string} timezone - The timezone to load.\n * @returns {Promise<any> | *} - Resolves when the zones for this timezone are loaded.\n */\nfunction loadZones(url, timezone) {\n    if (timezone && !shouldLoadZones(timezone)) {\n        // Return non-resolving promise.\n        return new Promise(lodash_1.default.noop);\n    }\n    if (moment_timezone_1.default.zonesPromise) {\n        return moment_timezone_1.default.zonesPromise;\n    }\n    return moment_timezone_1.default.zonesPromise = fetch(url)\n        .then(resp => resp.json().then(zones => {\n        moment_timezone_1.default.tz.load(zones);\n        moment_timezone_1.default.zonesLoaded = true;\n        // Trigger a global event that the timezones have finished loading.\n        if (document && document.createEvent && document.body && document.body.dispatchEvent) {\n            var event = document.createEvent('Event');\n            event.initEvent('zonesLoaded', true, true);\n            document.body.dispatchEvent(event);\n        }\n    }));\n}\nexports.loadZones = loadZones;\n/**\n * Get the moment date object for translating dates with timezones.\n * @param {string|Date} value - The value to convert into a moment date.\n * @param {string} format - The format to convert the date to.\n * @param {string} timezone - The timezone to convert the date to.\n * @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 * Determines if the component has a scoping parent in tree (a component which scopes its children and manages its\n * changes by itself, e.g. EditGrid)\n * @param {Component} componentInstance - The component to check for the scoping parent.\n * @param {boolean} firstPass - Whether it is the first pass of the function\n * @returns {boolean|*} - TRUE if the component has a scoping parent; FALSE otherwise\n */\nfunction isInsideScopingComponent(componentInstance, firstPass = true) {\n    if (!firstPass && (componentInstance === null || componentInstance === void 0 ? void 0 : componentInstance.hasScopedChildren)) {\n        return true;\n    }\n    const dataParent = getDataParentComponent(componentInstance);\n    if (dataParent === null || dataParent === void 0 ? void 0 : dataParent.hasScopedChildren) {\n        return true;\n    }\n    else if (dataParent === null || dataParent === void 0 ? void 0 : dataParent.parent) {\n        return isInsideScopingComponent(dataParent.parent, false);\n    }\n    return false;\n}\nexports.isInsideScopingComponent = isInsideScopingComponent;\n/**\n * Returns all the focusable elements within the provided dom element.\n * @param {HTMLElement} element - The element to get the focusable elements from.\n * @returns {NodeList<HTMLElement>} - The focusable elements within the provided element.\n */\nfunction getFocusableElements(element) {\n    const focusableSelector = `button:not([disabled]), input:not([disabled]), select:not([disabled]),\n    textarea:not([disabled]), button:not([disabled]), [href]`;\n    return element.querySelectorAll(focusableSelector);\n}\nexports.getFocusableElements = getFocusableElements;\nexports.componentValueTypes = {\n    number: 'number',\n    string: 'string',\n    boolean: 'boolean',\n    array: 'array',\n    object: 'object',\n    date: 'date',\n    any: 'any',\n};\n/**\n * Returns the saved types for the component\n * @param {import('@formio/core').Component} fullSchema - The component schema\n * @returns {Array<string>|null} - The saved types for the component\n */\nfunction getComponentSavedTypes(fullSchema) {\n    const schema = fullSchema || {};\n    if (schema.persistent !== true) {\n        return [];\n    }\n    if (schema.multiple) {\n        return [exports.componentValueTypes.array];\n    }\n    return null;\n}\nexports.getComponentSavedTypes = getComponentSavedTypes;\n/**\n * Interpolates @formio/core errors so that they are compatible with the renderer\n * @param {Component} component - The component to interpolate the errors for\n * @param {FieldError[]} errors - The errors to interpolate\n * @param {Function} interpolateFn - The interpolation function\n * @returns {[]} - The interpolated errors\n */\nconst interpolateErrors = (component, errors, interpolateFn) => {\n    return errors.map((error) => {\n        error.component = component;\n        const { errorKeyOrMessage, context } = error;\n        const toInterpolate = component.errors && component.errors[errorKeyOrMessage] ? component.errors[errorKeyOrMessage] : errorKeyOrMessage;\n        return Object.assign(Object.assign({}, error), { message: unescapeHTML(interpolateFn(toInterpolate, context)), context: Object.assign({}, context) });\n    });\n};\nexports.interpolateErrors = interpolateErrors;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/utils/utils.js?");
 
 /***/ }),
 
@@ -6096,7 +6096,7 @@ eval("\n/* global jQuery */\nvar __createBinding = (this && this.__createBinding
 /***/ (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/utils */ \"./lib/cjs/utils/utils.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 && this.settings.enableTime) {\n                this.calendar._input.value = this.settings.isManuallyOverriddenValue ? this.settings.manualInputValue : this.calendar.altInput.value;\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.isManuallyOverriddenValue ? this.settings.manualInputValue : this.calendar.altInput.value;\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']}/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']}/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.l10ns.${locale}`, `${Formio_1.Formio.cdn['flatpickr']}/l10n/${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                if (event.target.mask) {\n                    event.target.mask.textMaskInputElement.update();\n                }\n                this.settings.manualInputValue = event.target.value;\n                this._input.value = this.settings.manualInputValue;\n                this.settings.isManuallyOverriddenValue = true;\n                this.settings.currentValue = event.target.value;\n                this.emit('update');\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        if (this.calendar.daysContainer) {\n            this.calendar.daysContainer.addEventListener('click', () => {\n                this.settings.isManuallyOverriddenValue = false;\n                this.calendar.updateValue(false);\n            });\n        }\n        if (this.calendar.timeContainer) {\n            this.calendar.timeContainer.addEventListener('click', () => {\n                this.settings.isManuallyOverriddenValue = false;\n                this.calendar.updateValue(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            // If we have manually overridden the value then we shouldn't call setDate because this will fill the input mask\n            if (this.settings.isManuallyOverriddenValue) {\n                return;\n            }\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/utils */ \"./lib/cjs/utils/utils.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.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 && this.settings.enableTime) {\n                this.calendar._input.value = this.settings.isManuallyOverriddenValue ? this.settings.manualInputValue : this.calendar.altInput.value;\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.isManuallyOverriddenValue ? this.settings.manualInputValue : this.calendar.altInput.value;\n                this.emit('update');\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']}/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']}/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.l10ns.${locale}`, `${Formio_1.Formio.cdn['flatpickr']}/l10n/${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                if (event.target.mask) {\n                    event.target.mask.textMaskInputElement.update();\n                }\n                this.settings.manualInputValue = event.target.value;\n                this._input.value = this.settings.manualInputValue;\n                this.settings.isManuallyOverriddenValue = true;\n                this.settings.currentValue = event.target.value;\n                this.emit('update');\n            }\n        });\n        if (this.calendar.daysContainer) {\n            this.calendar.daysContainer.addEventListener('click', () => {\n                this.settings.isManuallyOverriddenValue = false;\n                this.calendar.updateValue(false);\n            });\n        }\n        if (this.calendar.timeContainer) {\n            this.calendar.timeContainer.addEventListener('click', () => {\n                this.settings.isManuallyOverriddenValue = false;\n                this.calendar.updateValue(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            // If we have manually overridden the value then we shouldn't call setDate because this will fill the input mask\n            if (this.settings.isManuallyOverriddenValue) {\n                return;\n            }\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?");
 
 /***/ }),