@formio/js 5.2.1-dev.6202.2449b29 → 5.2.1-dev.6236.96bf618

package/dist/formio.full.js

@@ -5314,7 +5314,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n// A
 /***/ (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 vanilla_text_mask_1 = __importDefault(__webpack_require__(/*! @formio/vanilla-text-mask */ \"./node_modules/@formio/vanilla-text-mask/dist/vanillaTextMask.js\"));\nconst EventEmitter_1 = __importDefault(__webpack_require__(/*! ./EventEmitter */ \"./lib/cjs/EventEmitter.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst i18n_1 = __webpack_require__(/*! ./utils/i18n */ \"./lib/cjs/utils/i18n.js\");\nconst utils_1 = __importDefault(__webpack_require__(/*! ./utils */ \"./lib/cjs/utils/index.js\"));\n/**\n * The root component for all elements within the Form.io renderer.\n */\nclass Element {\n    constructor(options) {\n        var _a;\n        /**\n         * The options for this component.\n         * @type {{}}\n         */\n        this.options = Object.assign({\n            language: 'en',\n            highlightErrors: true,\n            componentErrorClass: 'formio-error-wrapper',\n            componentWarningClass: 'formio-warning-wrapper',\n            row: '',\n            namespace: 'formio'\n        }, options || {});\n        /**\n         * The ID of this component. This value is auto-generated when the component is created, but\n         * can also be provided from the component.id value passed into the constructor.\n         * @type {string}\n         */\n        this.id = utils_1.default.getRandomComponentId();\n        /**\n         * An array of event handlers so that the destry command can deregister them.\n         * @type {Array}\n         */\n        this.eventHandlers = [];\n        // Use the i18next that is passed in, otherwise use the global version.\n        this.options.i18n = this.options.i18n || {};\n        if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.language) {\n            this.options.i18n.language = this.options.language;\n        }\n        this.options.i18next = this.i18next = this.options.i18next || i18n_1.I18n.init(this.options.i18n);\n        /**\n         * An instance of the EventEmitter class to handle the emitting and registration of events.\n         * @type {EventEmitter}\n         */\n        this.events = (options && options.events) ? options.events : new EventEmitter_1.default();\n        this.defaultMask = null;\n        /**\n         * Conditional to show or hide helplinks in editForm\n         * @type {*|boolean}\n         */\n        this.helplinks = (this.options.helplinks === 'false') ? false : (this.options.helplinks || 'https://help.form.io');\n    }\n    /**\n     * Register for a new event within this component.\n     * @example\n     * let component = new BaseComponent({\n     *   type: 'textfield',\n     *   label: 'First Name',\n     *   key: 'firstName'\n     * });\n     * component.on('componentChange', (changed) => {\n     *   console.log('this element is changed.');\n     * });\n     * @param {string} event - The event you wish to register the handler for.\n     * @param {Function} cb - The callback handler to handle this event.\n     * @param {boolean} [internal] - This is an internal event handler.\n     * @param {boolean} [once] - This event should only fire once.\n     * @returns {EventEmitter | void} - The event emitter instance.\n     */\n    on(event, cb, internal, once = false) {\n        if (!this.events) {\n            return;\n        }\n        const type = `${this.options.namespace}.${event}`;\n        // Store the component id in the handler so that we can determine which events are for this component.\n        cb.id = this.id;\n        cb.key = this.key;\n        cb.internal = internal;\n        // Register for this event.\n        return this.events[once ? 'once' : 'on'](type, cb);\n    }\n    /**\n     * Register for a new single-fire event within this component.\n     * @param {string} event - The event you wish to register the handler for.\n     * @param {Function} cb - The callback handler to handle this event.\n     * @param {boolean} internal - This is an internal event handler.\n     * @returns {EventEmitter} - The event emitter instance.\n     */\n    once(event, cb, internal) {\n        return this.on(event, cb, internal, true);\n    }\n    /**\n     * Allow catching any event.\n     * @param {Function} cb - The callback handler to handle this event.\n     * @returns {EventEmitter | void} - The event emitter instance.\n     */\n    onAny(cb) {\n        if (!this.events) {\n            return;\n        }\n        return this.events.onAny(cb);\n    }\n    /**\n     * Removes the listener that will be fired when any event is emitted.\n     * @param {Function} cb - The callback handler to handle this event.\n     * @returns {EventEmitter | void} - The event emitter instance.\n     */\n    offAny(cb) {\n        if (!this.events) {\n            return;\n        }\n        return this.events.offAny(cb);\n    }\n    /**\n     * Removes a listener for a certain event. Not passing the 2nd arg will remove all listeners for that event.\n     * @param {string} event - The event you wish to register the handler for.\n     * @param {Function | undefined} cb - The callback handler to handle this event.\n     */\n    off(event, cb) {\n        if (!this.events) {\n            return;\n        }\n        const type = `${this.options.namespace}.${event}`;\n        this.events.listeners(type).forEach((listener) => {\n            // Ensure the listener is for this element\n            if (!listener || listener.id !== this.id) {\n                return;\n            }\n            // If there is a given callback, only deal with the match\n            if (cb && cb !== listener) {\n                return;\n            }\n            this.events.off(type, listener);\n        });\n    }\n    /**\n     * Emit a new event.\n     * @param {string} event - The event to emit.\n     * @param {object} data - The data to emit with the handler.\n     */\n    emit(event, ...data) {\n        if (this.events) {\n            this.events.emit(`${this.options.namespace}.${event}`, ...data);\n        }\n    }\n    /**\n     * Check if the component has an event handler set up for the event.\n     * @param {string} event - The event name.\n     * @returns {boolean} - TRUE if the event is registered, FALSE otherwise.\n     */\n    hasEventHandler(event) {\n        if (!this.events) {\n            return false;\n        }\n        const type = `${this.options.namespace}.${event}`;\n        return this.events.listeners(type).some((listener) => {\n            if (!listener) {\n                return false;\n            }\n            return listener.id === this.id || listener.key === this.key;\n        });\n    }\n    /**\n     * Wrapper method to add an event listener to an HTML element.\n     * @param {HtmlElement} obj - The DOM element to add the event to.\n     * @param {string} type - The event name to add.\n     * @param {Function} func - The callback function to be executed when the listener is triggered.\n     * @param {boolean} persistent - If this listener should persist beyond \"destroy\" commands.\n     * @param {boolean} capture - If this listener should be executed in the capture phase.\n     * @returns {void | this} - The instance of the element.\n     */\n    addEventListener(obj, type, func, persistent, capture) {\n        if (!obj) {\n            return;\n        }\n        if (!persistent) {\n            this.eventHandlers.push({ id: this.id, obj, type, func });\n        }\n        if ('addEventListener' in obj) {\n            obj.addEventListener(type, func, !!capture);\n        }\n        else if ('attachEvent' in obj) {\n            obj.attachEvent(`on${type}`, func);\n        }\n        return this;\n    }\n    /**\n     * Remove an event listener from the object.\n     * @param {HTMLElement} obj - The DOM element to remove the event from.\n     * @param {string} type - The event name to remove.\n     * @param {Function} func - The callback function to remove.\n     * @returns {this | void} - The instance of the element.\n     */\n    removeEventListener(obj, type, func = null) {\n        const indexes = [];\n        if (!obj) {\n            return;\n        }\n        this.eventHandlers.forEach((handler, index) => {\n            if ((handler.id === this.id)\n                && obj.removeEventListener\n                && (handler.type === type)\n                && (!func || handler.func === func)) {\n                obj.removeEventListener(type, handler.func);\n                indexes.push(index);\n            }\n        });\n        if (indexes.length) {\n            lodash_1.default.pullAt(this.eventHandlers, indexes);\n        }\n        return this;\n    }\n    removeEventListeners() {\n        this.eventHandlers.forEach(handler => {\n            if ((this.id === handler.id) && handler.type && handler.obj && handler.obj.removeEventListener) {\n                handler.obj.removeEventListener(handler.type, handler.func);\n            }\n        });\n        this.eventHandlers = [];\n    }\n    removeAllEvents(includeExternal) {\n        if (this.events) {\n            lodash_1.default.each(this.events._events, (events, type) => {\n                lodash_1.default.each(events, (listener) => {\n                    if (listener && (this.id === listener.id) && (includeExternal || listener.internal)) {\n                        this.events.off(type, listener);\n                    }\n                });\n            });\n        }\n    }\n    teardown() {\n        delete this.i18next;\n        delete this.events;\n    }\n    /**\n     * Removes all event listeners attached to this component.\n     * @param {boolean} all - If all events should be removed, including external events.\n     */\n    destroy(all = false) {\n        this.removeEventListeners();\n        this.removeAllEvents();\n        if (all) {\n            this.teardown();\n        }\n    }\n    /**\n     * Append an HTML DOM element to a container.\n     * @param {HTMLElement} element - The DOM element to append.\n     * @param {HTMLElement} container - The DOM element that is the container of the element getting appended.\n     * @returns {this} - The instance of the element.\n     */\n    appendTo(element, container) {\n        container === null || container === void 0 ? void 0 : container.appendChild(element);\n        return this;\n    }\n    /**\n     * Prepend an HTML DOM element to a container.\n     * @param {HTMLElement} element - The DOM element to prepend.\n     * @param {HTMLElement} container - The DOM element that is the container of the element getting prepended.\n     * @returns {this} - The instance of the element.\n     */\n    prependTo(element, container) {\n        if (container) {\n            if (container.firstChild) {\n                try {\n                    container.insertBefore(element, container.firstChild);\n                }\n                catch (err) {\n                    console.warn(err);\n                    container.appendChild(element);\n                }\n            }\n            else {\n                container.appendChild(element);\n            }\n        }\n        return this;\n    }\n    /**\n     * Removes an HTML DOM element from its bounding container.\n     * @param {HTMLElement} element - The element to remove.\n     * @param {HTMLElement} container - The DOM element that is the container of the element to remove.\n     * @returns {this} - The instance of the element.\n     */\n    removeChildFrom(element, container) {\n        if (container && container.contains(element)) {\n            try {\n                container.removeChild(element);\n            }\n            catch (err) {\n                console.warn(err);\n            }\n        }\n        return this;\n    }\n    /**\n     * Alias for document.createElement.\n     * @param {string} type - The type of element to create\n     * @param {object} attr - The element attributes to add to the created element.\n     * @param {Various} children - Child elements. Can be a DOM Element, string or array of both.\n     * @returns {HTMLElement} - The created element.\n     */\n    ce(type, attr, children = null) {\n        // console.warn('Call to deprecated this.ce(). Dom elements should be created with templates, not manually with ce.');\n        // Create the element.\n        const element = document.createElement(type);\n        // Add attributes.\n        if (attr) {\n            this.attr(element, attr);\n        }\n        // Append the children.\n        this.appendChild(element, children);\n        return element;\n    }\n    /**\n     * Append different types of children.\n     * @param {HTMLElement} element - The element to append to.\n     * @param {HTMLElement} child - The child element to append.\n     * @returns {this} - The instance of the element.\n     */\n    appendChild(element, child) {\n        if (Array.isArray(child)) {\n            child.forEach((oneChild) => this.appendChild(element, oneChild));\n        }\n        else if (child instanceof HTMLElement || child instanceof Text) {\n            element.appendChild(child);\n        }\n        else if (child) {\n            element.appendChild(this.text(child.toString()));\n        }\n        return this;\n    }\n    /**\n     * Creates a new input mask placeholder.\n     * @param {HTMLElement} mask - The input mask.\n     * @returns {string} - The placeholder that will exist within the input as they type.\n     */\n    maskPlaceholder(mask) {\n        return mask.map((char) => (char instanceof RegExp) ? this.placeholderChar : char).join('');\n    }\n    /**\n     * Get the placeholder character for the input mask.\n     * @returns {string} - The placeholder character.\n     */\n    get placeholderChar() {\n        var _a;\n        return ((_a = this.component) === null || _a === void 0 ? void 0 : _a.inputMaskPlaceholderChar) || '_';\n    }\n    /**\n     * Sets the input mask for an input.\n     * @param {HTMLElement} input - The html input to apply the mask to.\n     * @param {string} inputMask - The input mask to add to this input.\n     * @param {boolean} usePlaceholder - Set the mask placeholder on the input.\n     */\n    setInputMask(input, inputMask, usePlaceholder) {\n        if (input && inputMask) {\n            const mask = utils_1.default.getInputMask(inputMask, this.placeholderChar);\n            this.defaultMask = mask;\n            try {\n                //destroy previous mask\n                if (input.mask) {\n                    input.mask.destroy();\n                }\n                input.mask = (0, vanilla_text_mask_1.default)({\n                    inputElement: input,\n                    mask,\n                    placeholderChar: this.placeholderChar,\n                    shadowRoot: this.root ? this.root.shadowRoot : null\n                });\n            }\n            catch (e) {\n                // Don't pass error up, to prevent form rejection.\n                // Internal bug of vanilla-text-mask on iOS (`selectionEnd`);\n                console.warn(e);\n            }\n            if (mask.numeric) {\n                input.setAttribute('pattern', '\\\\d*');\n            }\n            if (usePlaceholder) {\n                input.setAttribute('placeholder', this.maskPlaceholder(mask));\n            }\n        }\n    }\n    /**\n     * Translate a text using the i18n system.\n     * @param {string|Array<string>} text - The i18n identifier.\n     * @param {...any} args - The arguments to pass to the i18n translation.\n     * @returns {string} - The translated text.\n     */\n    t(text, ...args) {\n        return this.i18next ? this.i18next.t(text, ...args) : text;\n    }\n    /**\n     * Alias to create a text node.\n     * @param {string} text - The text to create.\n     * @returns {HtmlElement} - The created text node.\n     */\n    text(text) {\n        return document.createTextNode(this.t(text));\n    }\n    /**\n     * Adds an object of attributes onto an element.\n     * @param {HtmlElement} element - The element to add the attributes to.\n     * @param {object} attr - The attributes to add to the input element.\n     */\n    attr(element, attr) {\n        if (!element) {\n            return;\n        }\n        lodash_1.default.each(attr, (value, key) => {\n            if (typeof value !== 'undefined') {\n                if (key.indexOf('on') === 0) {\n                    // If this is an event, add a listener.\n                    this.addEventListener(element, key.substr(2).toLowerCase(), value);\n                }\n                else {\n                    // Otherwise it is just an attribute.\n                    element.setAttribute(key, value);\n                }\n            }\n        });\n    }\n    /**\n     * Determines if an element has a class.\n     *\n     * Taken from jQuery https://j11y.io/jquery/#v=1.5.0&fn=jQuery.fn.hasClass\n     * @param {HTMLElement} element - The element to check for the class.\n     * @param {string} className - The class to check for.\n     * @returns {boolean} - TRUE if the element has the class, FALSE otherwise.\n     */\n    hasClass(element, className) {\n        if (!element) {\n            return false;\n        }\n        // Allow templates to intercept.\n        className = ` ${className} `;\n        return ((` ${element.className} `).replace(/[\\n\\t\\r]/g, ' ').indexOf(className) > -1);\n    }\n    /**\n     * Adds a class to a DOM element.\n     * @param {HTMLElement} element - The element to add a class to.\n     * @param {string} className - The name of the class to add.\n     * @returns {this} - The instance of the element.\n     */\n    addClass(element, className) {\n        if (!element || !(element instanceof HTMLElement)) {\n            return this;\n        }\n        // Allow templates to intercept.\n        const classes = element.getAttribute('class');\n        if (!(classes === null || classes === void 0 ? void 0 : classes.includes(className))) {\n            element.setAttribute('class', `${classes} ${className}`);\n        }\n        return this;\n    }\n    /**\n     * Remove a class from a DOM element.\n     * @param {HTMLElement} element - The DOM element to remove the class from.\n     * @param {string} className - The name of the class that is to be removed.\n     * @returns {this} - The instance of the element.\n     */\n    removeClass(element, className) {\n        if (!element || !className || !(element instanceof HTMLElement)) {\n            return this;\n        }\n        // Allow templates to intercept.\n        let cls = element.getAttribute('class');\n        if (cls) {\n            cls = cls.replace(new RegExp(` ${className}`, 'g'), '');\n            element.setAttribute('class', cls);\n        }\n        return this;\n    }\n    /**\n     * Empty's an HTML DOM element.\n     * @param {HTMLElement} element - The element you wish to empty.\n     */\n    empty(element) {\n        if (element) {\n            while (element.firstChild) {\n                element.removeChild(element.firstChild);\n            }\n        }\n    }\n    /**\n     * Create an evaluation context for all script executions and interpolations.\n     * @param {object} additional - Additional context to apply to the evaluation context.\n     * @returns {*} - The evaluation context.\n     */\n    evalContext(additional) {\n        var _a;\n        return Object.assign({\n            _: lodash_1.default,\n            utils: utils_1.default,\n            util: utils_1.default,\n            user: Formio_1.Formio.getUser(),\n            moment: moment_1.default,\n            instance: this,\n            self: this,\n            token: Formio_1.Formio.getToken({\n                decode: true\n            }),\n            options: this.options,\n            config: this.root && this.root.form && this.root.form.config\n                ? this.root.form.config\n                : ((_a = this.options) === null || _a === void 0 ? void 0 : _a.formConfig)\n                    ? this.options.formConfig\n                    : {},\n        }, additional, lodash_1.default.get(this.root, 'options.evalContext', {}));\n    }\n    /**\n     * Performs an interpolation using the evaluation context of this component.\n     * @param {string} string - The string to interpolate.\n     * @param {object} data - The data to use in the interpolation.\n     * @param {object} options - The options to pass to the interpolation.\n     * @returns {XML|string|*|void} - The interpolated string.\n     */\n    interpolate(string, data, options = {}) {\n        if (typeof string !== 'function' && (this.component.content || this.component.html)\n            && !utils_1.default.Evaluator.templateSettings.interpolate.test(string)) {\n            string = utils_1.default.translateHTMLTemplate(String(string), (value) => this.t(value));\n        }\n        if (this.component.filter === string && !this.options.building) {\n            const evalContext = this.evalContext(data);\n            evalContext.data = lodash_1.default.mapValues(evalContext.data, (val) => lodash_1.default.isString(val) ? encodeURIComponent(val) : val);\n            return utils_1.default.Evaluator.interpolate(string, evalContext, options);\n        }\n        return utils_1.default.Evaluator.interpolate(string, this.evalContext(data), options);\n    }\n    /**\n     * Performs an evaluation using the evaluation context of this component.\n     * @param {string|Function|object} func - The function or string to evaluate.\n     * @param {object} args - The arguments to pass to the evaluation.\n     * @param {string} ret - The name of the variable within the evaluation context to return.\n     * @param {boolean} interpolate - Determines if it should replace all {{ }} token references with actual data.\n     * @param {import('@formio/core').EvaluatorOptions} options - The options to pass to the evaluation.\n     * @returns {*} - The result of the evaluation.\n     */\n    evaluate(func, args, ret, interpolate, options = {}) {\n        return utils_1.default.evaluate(func, this.evalContext(args), ret, interpolate, options);\n    }\n    /**\n     * Allow for options to hook into the functionality of this renderer.\n     * @returns {*} - The result of the hook function.\n     */\n    hook() {\n        const name = arguments[0];\n        if (this.options &&\n            this.options.hooks &&\n            this.options.hooks[name]) {\n            return this.options.hooks[name].apply(this, Array.prototype.slice.call(arguments, 1));\n        }\n        else {\n            // If this is an async hook instead of a sync.\n            const fn = (typeof arguments[arguments.length - 1] === 'function') ? arguments[arguments.length - 1] : null;\n            if (fn) {\n                return fn(null, arguments[1]);\n            }\n            else {\n                return arguments[1];\n            }\n        }\n    }\n}\nexports[\"default\"] = Element;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Element.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 vanilla_text_mask_1 = __importDefault(__webpack_require__(/*! @formio/vanilla-text-mask */ \"./node_modules/@formio/vanilla-text-mask/dist/vanillaTextMask.js\"));\nconst EventEmitter_1 = __importDefault(__webpack_require__(/*! ./EventEmitter */ \"./lib/cjs/EventEmitter.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst i18n_1 = __webpack_require__(/*! ./utils/i18n */ \"./lib/cjs/utils/i18n.js\");\nconst utils_1 = __importDefault(__webpack_require__(/*! ./utils */ \"./lib/cjs/utils/index.js\"));\n/**\n * The root component for all elements within the Form.io renderer.\n */\nclass Element {\n    constructor(options) {\n        var _a;\n        /**\n         * The options for this component.\n         * @type {{}}\n         */\n        this.options = Object.assign({\n            language: 'en',\n            highlightErrors: true,\n            componentErrorClass: 'formio-error-wrapper',\n            componentWarningClass: 'formio-warning-wrapper',\n            row: '',\n            namespace: 'formio'\n        }, options || {});\n        /**\n         * The ID of this component. This value is auto-generated when the component is created, but\n         * can also be provided from the component.id value passed into the constructor.\n         * @type {string}\n         */\n        this.id = utils_1.default.getRandomComponentId();\n        /**\n         * An array of event handlers so that the destry command can deregister them.\n         * @type {Array}\n         */\n        this.eventHandlers = [];\n        // Use the i18next that is passed in, otherwise use the global version.\n        this.options.i18n = this.options.i18n || {};\n        if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.language) {\n            this.options.i18n.language = this.options.language;\n        }\n        this.options.i18next = this.i18next = this.options.i18next || i18n_1.I18n.init(this.options.i18n);\n        /**\n         * An instance of the EventEmitter class to handle the emitting and registration of events.\n         * @type {EventEmitter}\n         */\n        this.events = (options && options.events) ? options.events : new EventEmitter_1.default();\n        this.defaultMask = null;\n        /**\n         * Conditional to show or hide helplinks in editForm\n         * @type {*|boolean}\n         */\n        this.helplinks = (this.options.helplinks === 'false') ? false : (this.options.helplinks || 'https://help.form.io');\n    }\n    /**\n     * Register for a new event within this component.\n     * @example\n     * let component = new BaseComponent({\n     *   type: 'textfield',\n     *   label: 'First Name',\n     *   key: 'firstName'\n     * });\n     * component.on('componentChange', (changed) => {\n     *   console.log('this element is changed.');\n     * });\n     * @param {string} event - The event you wish to register the handler for.\n     * @param {Function} cb - The callback handler to handle this event.\n     * @param {boolean} [internal] - This is an internal event handler.\n     * @param {boolean} [once] - This event should only fire once.\n     * @returns {EventEmitter | void} - The event emitter instance.\n     */\n    on(event, cb, internal, once = false) {\n        if (!this.events) {\n            return;\n        }\n        const type = `${this.options.namespace}.${event}`;\n        // Store the component id in the handler so that we can determine which events are for this component.\n        cb.id = this.id;\n        cb.key = this.key;\n        cb.internal = internal;\n        // Register for this event.\n        return this.events[once ? 'once' : 'on'](type, cb);\n    }\n    /**\n     * Register for a new single-fire event within this component.\n     * @param {string} event - The event you wish to register the handler for.\n     * @param {Function} cb - The callback handler to handle this event.\n     * @param {boolean} internal - This is an internal event handler.\n     * @returns {EventEmitter} - The event emitter instance.\n     */\n    once(event, cb, internal) {\n        return this.on(event, cb, internal, true);\n    }\n    /**\n     * Allow catching any event.\n     * @param {Function} cb - The callback handler to handle this event.\n     * @returns {EventEmitter | void} - The event emitter instance.\n     */\n    onAny(cb) {\n        if (!this.events) {\n            return;\n        }\n        return this.events.onAny(cb);\n    }\n    /**\n     * Removes the listener that will be fired when any event is emitted.\n     * @param {Function} cb - The callback handler to handle this event.\n     * @returns {EventEmitter | void} - The event emitter instance.\n     */\n    offAny(cb) {\n        if (!this.events) {\n            return;\n        }\n        return this.events.offAny(cb);\n    }\n    /**\n     * Removes a listener for a certain event. Not passing the 2nd arg will remove all listeners for that event.\n     * @param {string} event - The event you wish to register the handler for.\n     * @param {Function | undefined} cb - The callback handler to handle this event.\n     */\n    off(event, cb) {\n        if (!this.events) {\n            return;\n        }\n        const type = `${this.options.namespace}.${event}`;\n        this.events.listeners(type).forEach((listener) => {\n            // Ensure the listener is for this element\n            if (!listener || listener.id !== this.id) {\n                return;\n            }\n            // If there is a given callback, only deal with the match\n            if (cb && cb !== listener) {\n                return;\n            }\n            this.events.off(type, listener);\n        });\n    }\n    /**\n     * Emit a new event.\n     * @param {string} event - The event to emit.\n     * @param {object} data - The data to emit with the handler.\n     */\n    emit(event, ...data) {\n        if (this.events) {\n            this.events.emit(`${this.options.namespace}.${event}`, ...data);\n        }\n    }\n    /**\n     * Check if the component has an event handler set up for the event.\n     * @param {string} event - The event name.\n     * @returns {boolean} - TRUE if the event is registered, FALSE otherwise.\n     */\n    hasEventHandler(event) {\n        if (!this.events) {\n            return false;\n        }\n        const type = `${this.options.namespace}.${event}`;\n        return this.events.listeners(type).some((listener) => {\n            if (!listener) {\n                return false;\n            }\n            return listener.id === this.id || listener.key === this.key;\n        });\n    }\n    /**\n     * Wrapper method to add an event listener to an HTML element.\n     * @param {HtmlElement} obj - The DOM element to add the event to.\n     * @param {string} type - The event name to add.\n     * @param {Function} func - The callback function to be executed when the listener is triggered.\n     * @param {boolean} persistent - If this listener should persist beyond \"destroy\" commands.\n     * @param {boolean} capture - If this listener should be executed in the capture phase.\n     * @returns {void | this} - The instance of the element.\n     */\n    addEventListener(obj, type, func, persistent, capture) {\n        if (!obj) {\n            return;\n        }\n        if (!persistent) {\n            this.eventHandlers.push({ id: this.id, obj, type, func });\n        }\n        if ('addEventListener' in obj) {\n            obj.addEventListener(type, func, !!capture);\n        }\n        else if ('attachEvent' in obj) {\n            obj.attachEvent(`on${type}`, func);\n        }\n        return this;\n    }\n    /**\n     * Remove an event listener from the object.\n     * @param {HTMLElement} obj - The DOM element to remove the event from.\n     * @param {string} type - The event name to remove.\n     * @param {Function} func - The callback function to remove.\n     * @returns {this | void} - The instance of the element.\n     */\n    removeEventListener(obj, type, func = null) {\n        const indexes = [];\n        if (!obj) {\n            return;\n        }\n        this.eventHandlers.forEach((handler, index) => {\n            if ((handler.id === this.id)\n                && obj.removeEventListener\n                && (handler.type === type)\n                && (!func || handler.func === func)) {\n                obj.removeEventListener(type, handler.func);\n                indexes.push(index);\n            }\n        });\n        if (indexes.length) {\n            lodash_1.default.pullAt(this.eventHandlers, indexes);\n        }\n        return this;\n    }\n    removeEventListeners() {\n        this.eventHandlers.forEach(handler => {\n            if ((this.id === handler.id) && handler.type && handler.obj && handler.obj.removeEventListener) {\n                handler.obj.removeEventListener(handler.type, handler.func);\n            }\n        });\n        this.eventHandlers = [];\n    }\n    removeAllEvents(includeExternal) {\n        if (this.events) {\n            lodash_1.default.each(this.events._events, (events, type) => {\n                lodash_1.default.each(events, (listener) => {\n                    if (listener && (this.id === listener.id) && (includeExternal || listener.internal)) {\n                        this.events.off(type, listener);\n                    }\n                });\n            });\n        }\n    }\n    teardown() {\n        delete this.i18next;\n        delete this.events;\n    }\n    /**\n     * Removes all event listeners attached to this component.\n     * @param {boolean} all - If all events should be removed, including external events.\n     */\n    destroy(all = false) {\n        this.removeEventListeners();\n        this.removeAllEvents();\n        if (all) {\n            this.teardown();\n        }\n    }\n    /**\n     * Append an HTML DOM element to a container.\n     * @param {HTMLElement} element - The DOM element to append.\n     * @param {HTMLElement} container - The DOM element that is the container of the element getting appended.\n     * @returns {this} - The instance of the element.\n     */\n    appendTo(element, container) {\n        container === null || container === void 0 ? void 0 : container.appendChild(element);\n        return this;\n    }\n    /**\n     * Prepend an HTML DOM element to a container.\n     * @param {HTMLElement} element - The DOM element to prepend.\n     * @param {HTMLElement} container - The DOM element that is the container of the element getting prepended.\n     * @returns {this} - The instance of the element.\n     */\n    prependTo(element, container) {\n        if (container) {\n            if (container.firstChild) {\n                try {\n                    container.insertBefore(element, container.firstChild);\n                }\n                catch (err) {\n                    console.warn(err);\n                    container.appendChild(element);\n                }\n            }\n            else {\n                container.appendChild(element);\n            }\n        }\n        return this;\n    }\n    /**\n     * Removes an HTML DOM element from its bounding container.\n     * @param {HTMLElement} element - The element to remove.\n     * @param {HTMLElement} container - The DOM element that is the container of the element to remove.\n     * @returns {this} - The instance of the element.\n     */\n    removeChildFrom(element, container) {\n        if (container && container.contains(element)) {\n            try {\n                container.removeChild(element);\n            }\n            catch (err) {\n                console.warn(err);\n            }\n        }\n        return this;\n    }\n    /**\n     * Alias for document.createElement.\n     * @param {string} type - The type of element to create\n     * @param {object} attr - The element attributes to add to the created element.\n     * @param {Various} children - Child elements. Can be a DOM Element, string or array of both.\n     * @returns {HTMLElement} - The created element.\n     */\n    ce(type, attr, children = null) {\n        // console.warn('Call to deprecated this.ce(). Dom elements should be created with templates, not manually with ce.');\n        // Create the element.\n        const element = document.createElement(type);\n        // Add attributes.\n        if (attr) {\n            this.attr(element, attr);\n        }\n        // Append the children.\n        this.appendChild(element, children);\n        return element;\n    }\n    /**\n     * Append different types of children.\n     * @param {HTMLElement} element - The element to append to.\n     * @param {HTMLElement} child - The child element to append.\n     * @returns {this} - The instance of the element.\n     */\n    appendChild(element, child) {\n        if (Array.isArray(child)) {\n            child.forEach((oneChild) => this.appendChild(element, oneChild));\n        }\n        else if (child instanceof HTMLElement || child instanceof Text) {\n            element.appendChild(child);\n        }\n        else if (child) {\n            element.appendChild(this.text(child.toString()));\n        }\n        return this;\n    }\n    /**\n     * Creates a new input mask placeholder.\n     * @param {HTMLElement} mask - The input mask.\n     * @returns {string} - The placeholder that will exist within the input as they type.\n     */\n    maskPlaceholder(mask) {\n        return mask.map((char) => (char instanceof RegExp) ? this.placeholderChar : char).join('');\n    }\n    /**\n     * Get the placeholder character for the input mask.\n     * @returns {string} - The placeholder character.\n     */\n    get placeholderChar() {\n        var _a;\n        return ((_a = this.component) === null || _a === void 0 ? void 0 : _a.inputMaskPlaceholderChar) || '_';\n    }\n    /**\n     * Sets the input mask for an input.\n     * @param {HTMLElement} input - The html input to apply the mask to.\n     * @param {string} inputMask - The input mask to add to this input.\n     * @param {boolean} usePlaceholder - Set the mask placeholder on the input.\n     */\n    setInputMask(input, inputMask, usePlaceholder) {\n        if (input && inputMask) {\n            const mask = utils_1.default.getInputMask(inputMask, this.placeholderChar);\n            this.defaultMask = mask;\n            try {\n                //destroy previous mask\n                if (input.mask) {\n                    input.mask.destroy();\n                }\n                input.mask = (0, vanilla_text_mask_1.default)({\n                    inputElement: input,\n                    mask,\n                    placeholderChar: this.placeholderChar,\n                    shadowRoot: this.root ? this.root.shadowRoot : null\n                });\n            }\n            catch (e) {\n                // Don't pass error up, to prevent form rejection.\n                // Internal bug of vanilla-text-mask on iOS (`selectionEnd`);\n                console.warn(e);\n            }\n            if (mask.numeric) {\n                input.setAttribute('pattern', '\\\\d*');\n            }\n            if (usePlaceholder) {\n                input.setAttribute('placeholder', this.maskPlaceholder(mask));\n            }\n        }\n    }\n    /**\n     * Translate a text using the i18n system.\n     * @param {string|Array<string>} text - The i18n identifier.\n     * @param {...any} args - The arguments to pass to the i18n translation.\n     * @returns {string} - The translated text.\n     */\n    t(text, ...args) {\n        return this.i18next ? this.i18next.t(text, ...args) : text;\n    }\n    /**\n     * Alias to create a text node.\n     * @param {string} text - The text to create.\n     * @returns {HtmlElement} - The created text node.\n     */\n    text(text) {\n        return document.createTextNode(this.t(text));\n    }\n    /**\n     * Adds an object of attributes onto an element.\n     * @param {HtmlElement} element - The element to add the attributes to.\n     * @param {object} attr - The attributes to add to the input element.\n     */\n    attr(element, attr) {\n        if (!element) {\n            return;\n        }\n        lodash_1.default.each(attr, (value, key) => {\n            if (typeof value !== 'undefined') {\n                if (key.indexOf('on') === 0) {\n                    // If this is an event, add a listener.\n                    this.addEventListener(element, key.substr(2).toLowerCase(), value);\n                }\n                else {\n                    // Otherwise it is just an attribute.\n                    element.setAttribute(key, value);\n                }\n            }\n        });\n    }\n    /**\n     * Determines if an element has a class.\n     *\n     * Taken from jQuery https://j11y.io/jquery/#v=1.5.0&fn=jQuery.fn.hasClass\n     * @param {HTMLElement} element - The element to check for the class.\n     * @param {string} className - The class to check for.\n     * @returns {boolean} - TRUE if the element has the class, FALSE otherwise.\n     */\n    hasClass(element, className) {\n        if (!element) {\n            return false;\n        }\n        // Allow templates to intercept.\n        className = ` ${className} `;\n        return ((` ${element.className} `).replace(/[\\n\\t\\r]/g, ' ').indexOf(className) > -1);\n    }\n    /**\n     * Adds a class to a DOM element.\n     * @param {HTMLElement} element - The element to add a class to.\n     * @param {string} className - The name of the class to add.\n     * @returns {this} - The instance of the element.\n     */\n    addClass(element, className) {\n        if (!element || !(element instanceof HTMLElement)) {\n            return this;\n        }\n        // Allow templates to intercept.\n        const classes = element.getAttribute('class');\n        if (!(classes === null || classes === void 0 ? void 0 : classes.includes(className))) {\n            element.setAttribute('class', `${classes} ${className}`);\n        }\n        return this;\n    }\n    /**\n     * Remove a class from a DOM element.\n     * @param {HTMLElement} element - The DOM element to remove the class from.\n     * @param {string} className - The name of the class that is to be removed.\n     * @returns {this} - The instance of the element.\n     */\n    removeClass(element, className) {\n        if (!element || !className || !(element instanceof HTMLElement)) {\n            return this;\n        }\n        // Allow templates to intercept.\n        let cls = element.getAttribute('class');\n        if (cls) {\n            cls = cls.replace(new RegExp(` ${className}`, 'g'), '');\n            element.setAttribute('class', cls);\n        }\n        return this;\n    }\n    /**\n     * Empty's an HTML DOM element.\n     * @param {HTMLElement} element - The element you wish to empty.\n     */\n    empty(element) {\n        if (element) {\n            while (element.firstChild) {\n                element.removeChild(element.firstChild);\n            }\n        }\n    }\n    /**\n     * Create an evaluation context for all script executions and interpolations.\n     * @param {object} additional - Additional context to apply to the evaluation context.\n     * @returns {*} - The evaluation context.\n     */\n    evalContext(additional) {\n        var _a;\n        return Object.assign({\n            _: lodash_1.default,\n            utils: utils_1.default,\n            util: utils_1.default,\n            user: Formio_1.Formio.getUser(),\n            moment: moment_1.default,\n            instance: this,\n            self: this,\n            token: Formio_1.Formio.getToken({\n                decode: true\n            }),\n            options: this.options,\n            config: this.root && this.root.form && this.root.form.config\n                ? this.root.form.config\n                : ((_a = this.options) === null || _a === void 0 ? void 0 : _a.formConfig)\n                    ? this.options.formConfig\n                    : {},\n        }, additional, lodash_1.default.get(this.root, 'options.evalContext', {}));\n    }\n    /**\n     * Performs an interpolation using the evaluation context of this component.\n     * @param {string} string - The string to interpolate.\n     * @param {object} data - The data to use in the interpolation.\n     * @param {object} options - The options to pass to the interpolation.\n     * @returns {XML|string|*|void} - The interpolated string.\n     */\n    interpolate(string, data, options = {}) {\n        if (typeof string !== 'function' && (this.component.content || this.component.html)\n            && !utils_1.default.Evaluator.templateSettings.interpolate.test(string)) {\n            string = utils_1.default.translateHTMLTemplate(String(string), (value) => this.t(value));\n        }\n        if (this.component.filter === string && !this.options.building) {\n            const evalContext = this.evalContext(data);\n            evalContext.data = lodash_1.default.mapValues(evalContext.data, (val) => lodash_1.default.isString(val) ? encodeURIComponent(val) : val);\n            return utils_1.default.interpolate(string, evalContext, options);\n        }\n        return utils_1.default.interpolate(string, this.evalContext(data), options);\n    }\n    /**\n     * Performs an evaluation using the evaluation context of this component.\n     * @param {string|Function|object} func - The function or string to evaluate.\n     * @param {object} args - The arguments to pass to the evaluation.\n     * @param {string} ret - The name of the variable within the evaluation context to return.\n     * @param {boolean} interpolate - Determines if it should replace all {{ }} token references with actual data.\n     * @param {import('@formio/core').EvaluatorOptions} options - The options to pass to the evaluation.\n     * @returns {*} - The result of the evaluation.\n     */\n    evaluate(func, args, ret, interpolate, options = {}) {\n        return utils_1.default.evaluate(func, this.evalContext(args), ret, interpolate, options);\n    }\n    /**\n     * Allow for options to hook into the functionality of this renderer.\n     * @returns {*} - The result of the hook function.\n     */\n    hook() {\n        const name = arguments[0];\n        if (this.options &&\n            this.options.hooks &&\n            this.options.hooks[name]) {\n            return this.options.hooks[name].apply(this, Array.prototype.slice.call(arguments, 1));\n        }\n        else {\n            // If this is an async hook instead of a sync.\n            const fn = (typeof arguments[arguments.length - 1] === 'function') ? arguments[arguments.length - 1] : null;\n            if (fn) {\n                return fn(null, arguments[1]);\n            }\n            else {\n                return arguments[1];\n            }\n        }\n    }\n}\nexports[\"default\"] = Element;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Element.js?");
 
 /***/ }),
 
@@ -5391,7 +5391,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 Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.js\"));\nconst Component_1 = __importDefault(__webpack_require__(/*! ./components/_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst tippy_js_1 = __importDefault(__webpack_require__(/*! tippy.js */ \"./node_modules/tippy.js/dist/tippy.esm.js\"));\nconst Components_1 = __importDefault(__webpack_require__(/*! ./components/Components */ \"./lib/cjs/components/Components.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __webpack_require__(/*! ./utils */ \"./lib/cjs/utils/index.js\");\nconst builder_1 = __importDefault(__webpack_require__(/*! ./utils/builder */ \"./lib/cjs/utils/builder.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst dom_autoscroller_1 = __importDefault(__webpack_require__(/*! dom-autoscroller */ \"./node_modules/dom-autoscroller/dist/bundle.js\"));\nconst Templates_1 = __importDefault(__webpack_require__(/*! ./templates/Templates */ \"./lib/cjs/templates/Templates.js\"));\n__webpack_require__(/*! ./components/builder */ \"./lib/cjs/components/builder.js\");\n// We need this here because dragula pulls in CustomEvent class that requires global to exist.\nif (typeof window !== 'undefined' && typeof window.global === 'undefined') {\n    window.global = window;\n}\nconst dragula_1 = __importDefault(__webpack_require__(/*! dragula */ \"./node_modules/dragula/dragula.js\"));\nclass WebformBuilder extends Component_1.default {\n    // eslint-disable-next-line max-statements\n    constructor() {\n        let element, options;\n        if (arguments[0] instanceof HTMLElement || arguments[1]) {\n            element = arguments[0];\n            options = arguments[1];\n        }\n        else {\n            options = arguments[0];\n        }\n        // Reset skipInit in case PDFBuilder has set it.\n        options.skipInit = false;\n        options.display = options.display || 'form';\n        super(null, options);\n        this.moveHandler = (e) => {\n            if (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 13) {\n                e.stopPropagation();\n                e.preventDefault();\n            }\n            if (e.keyCode === 38) {\n                this.updateComponentPlacement(true);\n            }\n            if (e.keyCode === 40) {\n                this.updateComponentPlacement(false);\n            }\n            if (e.keyCode === 13) {\n                this.stopMoving(this.selectedComponent);\n            }\n        };\n        this.setElement(element);\n        this.dragulaLib = dragula_1.default;\n        this.builderHeight = 0;\n        this.schemas = {};\n        this.repeatablePaths = [];\n        this.sideBarScroll = lodash_1.default.get(this.options, 'sideBarScroll', true);\n        this.sideBarScrollOffset = lodash_1.default.get(this.options, 'sideBarScrollOffset', 0);\n        this.dragDropEnabled = true;\n        // Setup the builder options.\n        this.builder = lodash_1.default.defaultsDeep({}, this.options.builder, this.defaultGroups);\n        // Turn off if explicitely said to do so...\n        lodash_1.default.each(this.defaultGroups, (config, key) => {\n            if (config === false) {\n                this.builder[key] = false;\n            }\n        });\n        // Add the groups.////\n        this.groups = {};\n        this.groupOrder = [];\n        for (const group in this.builder) {\n            if (this.builder[group]) {\n                this.builder[group].key = group;\n                this.groups[group] = this.builder[group];\n                this.groups[group].components = this.groups[group].components || {};\n                this.groups[group].componentOrder = this.groups[group].componentOrder || [];\n                this.groups[group].subgroups = Object.keys(this.groups[group].groups || {}).map((groupKey) => {\n                    this.groups[group].groups[groupKey].componentOrder = Object.keys(this.groups[group].groups[groupKey].components).map((key) => key);\n                    return this.groups[group].groups[groupKey];\n                });\n                this.groupOrder.push(this.groups[group]);\n            }\n        }\n        this.groupOrder = this.groupOrder\n            .filter(group => group && !group.ignore)\n            .sort((a, b) => a.weight - b.weight);\n        const defaultOpenedGroup = this.groupOrder.find(x => x.key !== 'basic' && x.default);\n        if (defaultOpenedGroup) {\n            this.groupOrder.forEach(x => {\n                if ('default' in x && x.key !== defaultOpenedGroup.key) {\n                    x.default = false;\n                }\n            });\n        }\n        this.groupOrder = this.groupOrder.map(group => group.key);\n        for (const type in Components_1.default.components) {\n            const component = Components_1.default.components[type];\n            if (component.builderInfo && component.builderInfo.schema) {\n                this.schemas[type] = component.builderInfo.schema;\n                component.type = type;\n                const builderInfo = component.builderInfo;\n                builderInfo.key = component.type;\n                this.addBuilderComponentInfo(builderInfo);\n            }\n        }\n        // Filter out any extra components.\n        // Add the components in each group.\n        for (const group in this.groups) {\n            const info = this.groups[group];\n            for (const key in info.components) {\n                const compKey = group === 'resource' ? `component-${key}` : key;\n                let comp = info.components[compKey];\n                if (comp === true &&\n                    Components_1.default.components[key] &&\n                    Components_1.default.components[key].builderInfo) {\n                    comp = Components_1.default.components[key].builderInfo;\n                }\n                if (comp && comp.schema) {\n                    this.schemas[key] = comp.schema;\n                    info.components[compKey] = comp;\n                    info.components[compKey].key = key;\n                }\n                else {\n                    // Do not include this component in the components array.\n                    delete info.components[compKey];\n                }\n            }\n            // Order the components.\n            this.orderComponents(info);\n        }\n        this.options.hooks = this.options.hooks || {};\n        this.options.hooks.renderComponent = (html, { component, self }) => {\n            var _a, _b, _c;\n            if (self.type === 'form' && !self.key) {\n                const template = this.hook('renderComponentFormTemplate', html.replace('formio-component-form', ''));\n                // The main webform shouldn't have this class as it adds extra styles.\n                return template;\n            }\n            if (this.options.disabled && this.options.disabled.includes(self.key) || self.parent.noDragDrop) {\n                return html;\n            }\n            return this.renderTemplate('builderComponent', {\n                html,\n                disableBuilderActions: (_a = self === null || self === void 0 ? void 0 : self.component) === null || _a === void 0 ? void 0 : _a.disableBuilderActions,\n                childComponent: component,\n                design: (_b = self === null || self === void 0 ? void 0 : self.options) === null || _b === void 0 ? void 0 : _b.design,\n                editJson: (_c = self === null || self === void 0 ? void 0 : self.options) === null || _c === void 0 ? void 0 : _c.editJson,\n                editComponent: this.hasEditTabs(component.type)\n            });\n        };\n        this.options.hooks.renderComponents = (html, { components, self }) => {\n            // if Datagrid and already has a component, don't make it droppable.\n            if (self.type === 'datagrid' && components.length > 0 || self.noDragDrop) {\n                return html;\n            }\n            if (!components ||\n                (!components.length && !components.nodrop) ||\n                (self.type === 'form' && components.length <= 1 && (components.length === 0 || components[0].type === 'button'))) {\n                html = this.renderTemplate('builderPlaceholder', {\n                    position: 0\n                }) + html;\n            }\n            return this.renderTemplate('builderComponents', {\n                key: self.key,\n                type: self.type,\n                html,\n            });\n        };\n        this.options.hooks.renderInput = (html, { self }) => {\n            if (self.type === 'hidden') {\n                return html + self.name;\n            }\n            return html;\n        };\n        this.options.hooks.renderLoading = (html, { self }) => {\n            if (self.type === 'form' && self.key) {\n                return self.name;\n            }\n            return html;\n        };\n        this.options.hooks.attachComponents = (element, components, container, component) => {\n            // Don't attach if no element was found or component doesn't participate in drag'n'drop.\n            if (!element) {\n                return;\n            }\n            if (component.noDragDrop) {\n                return element;\n            }\n            // Attach container and component to element for later reference.\n            const containerElement = element.querySelector(`[${this._referenceAttributeName}=\"${component.component.key}-container\"]`) || element;\n            containerElement.formioContainer = container;\n            containerElement.formioComponent = component;\n            // Add container to draggable list.\n            if (this.dragula && this.allowDrop(element)) {\n                this.dragula.containers.push(containerElement);\n            }\n            // If this is an existing datagrid element, don't make it draggable.\n            if ((component.type === 'datagrid' || component.type === 'datamap') && components.length > 0) {\n                return element;\n            }\n            // Since we added a wrapper, need to return the original element so that we can find the components inside it.\n            return element.children[0];\n        };\n        this.options.hooks.attachDatagrid = (element, component) => {\n            component.loadRefs(element, {\n                [`${component.key}-container`]: 'single',\n            });\n            const dataGridContainer = component.refs[`${component.key}-container`];\n            if (dataGridContainer) {\n                component.attachComponents(dataGridContainer.parentNode, [], component.component.components);\n            }\n            // Need to set up horizontal rearrangement of fields.\n        };\n        this.options.hooks.attachComponent = this.attachComponent.bind(this);\n        // Load resources tagged as 'builder'\n        const query = {\n            params: {\n                type: 'resource',\n                limit: 1000000,\n                select: '_id,title,name,components'\n            }\n        };\n        if (this.options && this.options.resourceTag) {\n            query.params.tags = [this.options.resourceTag];\n        }\n        else if (!this.options || !this.options.hasOwnProperty('resourceTag')) {\n            query.params.tags = ['builder'];\n        }\n        const formio = new Formio_1.Formio(Formio_1.Formio.projectUrl);\n        const isResourcesDisabled = this.options.builder && this.options.builder.resource === false;\n        formio.loadProject().then((project) => {\n            if (project && (lodash_1.default.get(project, 'settings.addConfigToForms', false) || lodash_1.default.get(project, 'addConfigToForms', false))) {\n                const config = project.config || {};\n                this.options.formConfig = config;\n                const pathToFormConfig = 'webform._form.config';\n                const webformConfig = lodash_1.default.get(this, pathToFormConfig);\n                if (this.webform && !webformConfig) {\n                    lodash_1.default.set(this, pathToFormConfig, config);\n                }\n            }\n        }).catch((err) => {\n            console.warn(`Could not load project settings: ${err.message || err}`);\n        });\n        if (!formio.noProject && !isResourcesDisabled && formio.formsUrl) {\n            const resourceOptions = this.options.builder && this.options.builder.resource;\n            formio.loadForms(query)\n                .then((resources) => {\n                if (resources.length) {\n                    this.builder.resource = {\n                        title: resourceOptions ? resourceOptions.title : 'Existing Resource Fields',\n                        key: 'resource',\n                        weight: resourceOptions ? resourceOptions.weight : 50,\n                        subgroups: [],\n                        components: [],\n                        componentOrder: []\n                    };\n                    this.groups.resource = {\n                        title: resourceOptions ? resourceOptions.title : 'Existing Resource Fields',\n                        key: 'resource',\n                        weight: resourceOptions ? resourceOptions.weight : 50,\n                        subgroups: [],\n                        components: [],\n                        componentOrder: []\n                    };\n                    if (!this.groupOrder.includes('resource')) {\n                        this.groupOrder.push('resource');\n                    }\n                    this.addExistingResourceFields(resources);\n                }\n            });\n        }\n        // Notify components if they need to modify their render.\n        this.options.attachMode = 'builder';\n        this.webform = this.webform || this.createForm(this.options);\n        this.pathComponentsMapping = {};\n        this.arrayDataComponentPaths = [];\n        this.nestedDataComponents = [];\n        this.arrayDataComponents = [];\n    }\n    allowDrop() {\n        return true;\n    }\n    addExistingResourceFields(resources) {\n        lodash_1.default.each(resources, (resource, index) => {\n            const resourceKey = `resource-${resource.name}`;\n            const subgroup = {\n                key: resourceKey,\n                title: resource.title,\n                components: [],\n                componentOrder: [],\n                default: index === 0,\n            };\n            (0, utils_1.eachComponent)(resource.components, (component) => {\n                if (component.type === 'button')\n                    return;\n                if (this.options &&\n                    this.options.resourceFilter &&\n                    (!component.tags || component.tags.indexOf(this.options.resourceFilter) === -1))\n                    return;\n                let componentName = component.label;\n                if (!componentName && component.key) {\n                    componentName = lodash_1.default.upperFirst(component.key);\n                }\n                subgroup.componentOrder.push(`component-${component.key}`);\n                subgroup.components[`component-${component.key}`] = lodash_1.default.merge((0, utils_1.fastCloneDeep)(Components_1.default.components[component.type]\n                    ? Components_1.default.components[component.type].builderInfo\n                    : Components_1.default.components['unknown'].builderInfo), {\n                    key: component.key,\n                    title: componentName,\n                    group: 'resource',\n                    subgroup: resourceKey,\n                }, {\n                    schema: Object.assign(Object.assign({}, component), { label: component.label, key: component.key, lockKey: true, source: (!this.options.noSource ? resource._id : undefined), isNew: true })\n                });\n            }, true);\n            this.groups.resource.subgroups.push(subgroup);\n        });\n        this.triggerRedraw();\n    }\n    attachTooltip(component, title) {\n        return (0, tippy_js_1.default)(component, {\n            allowHTML: true,\n            trigger: 'mouseenter focus',\n            placement: 'top',\n            delay: [200, 0],\n            zIndex: 10000,\n            content: title\n        });\n    }\n    attachComponent(element, component) {\n        if (component instanceof WebformBuilder) {\n            return;\n        }\n        // Add component to element for later reference.\n        element.formioComponent = component;\n        component.loadRefs(element, {\n            removeComponent: 'single',\n            editComponent: 'single',\n            moveComponent: 'single',\n            copyComponent: 'single',\n            pasteComponent: 'single',\n            editJson: 'single'\n        });\n        if (component.refs.copyComponent) {\n            this.attachTooltip(component.refs.copyComponent, this.t('Copy'));\n            component.addEventListener(component.refs.copyComponent, 'click', () => this.copyComponent(component));\n        }\n        if (component.refs.pasteComponent) {\n            const pasteToolTip = this.attachTooltip(component.refs.pasteComponent, this.t('Paste below'));\n            component.addEventListener(component.refs.pasteComponent, 'click', () => {\n                pasteToolTip.hide();\n                this.pasteComponent(component);\n            });\n        }\n        if (component.refs.moveComponent) {\n            this.attachTooltip(component.refs.moveComponent, this.t('Move'));\n            if (this.keyboardActionsEnabled) {\n                component.addEventListener(component.refs.moveComponent, 'click', () => {\n                    this.moveComponent(component);\n                });\n            }\n        }\n        const parent = this.getParentElement(element);\n        if (component.refs.editComponent) {\n            this.attachTooltip(component.refs.editComponent, this.t('Edit'));\n            component.addEventListener(component.refs.editComponent, 'click', () => this.editComponent(component.schema, parent, false, false, component.component, { inDataGrid: component.isInDataGrid }));\n        }\n        if (component.refs.editJson) {\n            this.attachTooltip(component.refs.editJson, this.t('Edit JSON'));\n            component.addEventListener(component.refs.editJson, 'click', () => this.editComponent(component.schema, parent, false, true, component.component));\n        }\n        if (component.refs.removeComponent) {\n            this.attachTooltip(component.refs.removeComponent, this.t('Remove'));\n            component.addEventListener(component.refs.removeComponent, 'click', () => this.removeComponent(component.schema, parent, component.component, component));\n        }\n        return element;\n    }\n    createForm(options) {\n        this.webform = new Webform_1.default(this.element, options);\n        if (this.element) {\n            this.loadRefs(this.element, {\n                form: 'single'\n            });\n            if (this.refs.form) {\n                this.webform.element = this.refs.form;\n            }\n        }\n        return this.webform;\n    }\n    /**\n     * Called when everything is ready.\n     * @returns {Promise} - Wait for webform to be ready.\n     */\n    get ready() {\n        return this.webform.ready;\n    }\n    get defaultGroups() {\n        return {\n            basic: {\n                title: 'Basic',\n                weight: 0,\n                default: true,\n            },\n            advanced: {\n                title: 'Advanced',\n                weight: 10\n            },\n            layout: {\n                title: 'Layout',\n                weight: 20\n            },\n            data: {\n                title: 'Data',\n                weight: 30\n            },\n            premium: {\n                title: 'Premium',\n                weight: 40\n            }\n        };\n    }\n    redraw() {\n        return Webform_1.default.prototype.redraw.call(this);\n    }\n    get form() {\n        return this.webform.form;\n    }\n    get schema() {\n        return this.webform.schema;\n    }\n    set form(value) {\n        this.setForm(value);\n    }\n    get container() {\n        return this.webform.form.components;\n    }\n    /**\n     * When a component sets its api key, we need to check if it is unique within its namespace. Find the namespace root\n     * so we can calculate this correctly.\n     * @param {import('@formio/core').Component} component - The component to find the namespace root for.\n     * @returns {import('@formio/core').Component[]} - The components root for this namespace.\n     */\n    findNamespaceRoot(component) {\n        const path = (0, utils_1.getArrayFromComponentPath)(component.path);\n        // First get the component with nested parents.\n        let comp = this.webform.getComponent(path);\n        comp = Array.isArray(comp) ? comp[0] : comp;\n        const namespaceKey = this.recurseNamespace(comp);\n        // If there is no key, it is the root form.\n        if (!namespaceKey || this.form.key === namespaceKey) {\n            return this.form.components;\n        }\n        const componentSchema = component.component;\n        // If the current component is the namespace, we don't need to find it again.\n        if (namespaceKey === component.key) {\n            return [...componentSchema.components, componentSchema];\n        }\n        // Get the namespace component so we have the original object.\n        const namespaceComponent = (0, utils_1.getComponent)(this.form.components, namespaceKey, true);\n        return namespaceComponent ? namespaceComponent.components : comp.components;\n    }\n    recurseNamespace(component) {\n        // If there is no parent, we are at the root level.\n        if (!component) {\n            return null;\n        }\n        // Some components are their own namespace.\n        if (['address', 'container', 'datagrid', 'editgrid', 'dynamicWizard', 'tree'].includes(component.type) || component.tree || component.arrayTree) {\n            return component.key;\n        }\n        // Anything else, keep going up.\n        return this.recurseNamespace(component.parent);\n    }\n    render() {\n        return this.renderTemplate('builder', {\n            sidebar: this.renderTemplate('builderSidebar', {\n                scrollEnabled: this.sideBarScroll,\n                groupOrder: this.groupOrder,\n                groupId: `builder-sidebar-${this.id}`,\n                groups: this.groupOrder.map((groupKey) => this.renderTemplate('builderSidebarGroup', {\n                    group: this.groups[groupKey],\n                    groupKey,\n                    groupId: `builder-sidebar-${this.id}`,\n                    subgroups: this.groups[groupKey].subgroups.map((group) => this.renderTemplate('builderSidebarGroup', {\n                        group,\n                        groupKey: group.key,\n                        groupId: `group-container-${groupKey}`,\n                        subgroups: []\n                    })),\n                    keyboardActionsEnabled: this.keyboardActionsEnabled,\n                })),\n            }),\n            form: this.webform.render(),\n        });\n    }\n    attach(element) {\n        this.on('change', (form) => {\n            this.populateCaptchaSettings(form);\n            this.webform.setAlert(false);\n        });\n        return super.attach(element).then(() => {\n            this.loadRefs(element, {\n                form: 'single',\n                sidebar: 'single',\n                'sidebar-search': 'single',\n                'sidebar-groups': 'single',\n                'container': 'multiple',\n                'sidebar-anchor': 'multiple',\n                'sidebar-group': 'multiple',\n                'sidebar-container': 'multiple',\n                'sidebar-component': 'multiple',\n            });\n            if (this.sideBarScroll && Templates_1.default.current.handleBuilderSidebarScroll) {\n                Templates_1.default.current.handleBuilderSidebarScroll.call(this, this);\n            }\n            // Add the paste status in form\n            if (typeof window !== 'undefined' && window.sessionStorage) {\n                const data = window.sessionStorage.getItem('formio.clipboard');\n                if (data) {\n                    this.addClass(this.refs.form, 'builder-paste-mode');\n                }\n            }\n            if (!(0, utils_1.bootstrapVersion)(this.options)) {\n                const getAttribute = (anchor, attribute) => {\n                    let elem = anchor.getAttribute(`data-${attribute}`);\n                    if (!elem) {\n                        elem = anchor.getAttribute(`data-bs-${attribute}`);\n                    }\n                    return elem;\n                };\n                const hideShow = (group, show) => {\n                    if (show) {\n                        group.classList.add(['show']);\n                        group.style.display = 'inherit';\n                    }\n                    else {\n                        group.classList.remove(['show']);\n                        group.style.display = 'none';\n                    }\n                };\n                // Initialize\n                this.refs['sidebar-group'].forEach((group) => {\n                    hideShow(group, getAttribute(group, 'default') === 'true');\n                });\n                // Click event\n                this.refs['sidebar-anchor'].forEach((anchor, index) => {\n                    this.addEventListener(anchor, 'click', () => {\n                        const clickedParentId = getAttribute(anchor, 'parent').slice('#builder-sidebar-'.length);\n                        const clickedId = getAttribute(anchor, 'target').slice('#group-'.length);\n                        this.refs['sidebar-group'].forEach((group, groupIndex) => {\n                            const openByDefault = getAttribute(group, 'default') === 'true';\n                            const groupId = group.getAttribute('id').slice('group-'.length);\n                            const groupParent = getAttribute(group, 'parent').slice('#builder-sidebar-'.length);\n                            hideShow(group, ((openByDefault && groupParent === clickedId) || groupId === clickedParentId || groupIndex === index));\n                        });\n                    }, true);\n                });\n            }\n            if (this.keyboardActionsEnabled) {\n                this.refs['sidebar-component'].forEach((component) => {\n                    this.addEventListener(component, 'keydown', (event) => {\n                        if (event.keyCode === 13) {\n                            this.addNewComponent(component);\n                        }\n                    });\n                });\n            }\n            this.addEventListener(this.refs['sidebar-search'], 'input', lodash_1.default.debounce((e) => {\n                const searchString = e.target.value;\n                this.searchFields(searchString);\n            }, 300));\n            if (this.dragDropEnabled) {\n                this.initDragula();\n            }\n            const drake = this.dragula;\n            if (this.refs.form) {\n                (0, dom_autoscroller_1.default)([window], {\n                    margin: 20,\n                    maxSpeed: 6,\n                    scrollWhenOutside: true,\n                    autoScroll: function () {\n                        return this.down && (drake === null || drake === void 0 ? void 0 : drake.dragging);\n                    }\n                });\n                return this.webform.attach(this.refs.form);\n            }\n        });\n    }\n    searchFields(searchString = '') {\n        const searchValue = searchString.toLowerCase();\n        const sidebar = this.refs['sidebar'];\n        const sidebarGroups = this.refs['sidebar-groups'];\n        if (!sidebar || !sidebarGroups) {\n            return;\n        }\n        const filterGroupBy = (group, searchValue = '') => {\n            const result = lodash_1.default.toPlainObject(group);\n            const { subgroups = [], components } = result;\n            const filteredComponents = [];\n            for (const key in components) {\n                const isMatchedToTitle = this.t(components[key].title).toLowerCase().match(searchValue);\n                const isMatchedToKey = components[key].key.toLowerCase().match(searchValue);\n                if (isMatchedToTitle || isMatchedToKey) {\n                    filteredComponents.push(components[key]);\n                }\n            }\n            this.orderComponents(result, filteredComponents);\n            if (searchValue) {\n                result.default = true;\n            }\n            if (result.componentOrder.length || subgroups.length) {\n                return result;\n            }\n            return null;\n        };\n        const filterGroupOrder = (groupOrder, searchValue) => {\n            const result = lodash_1.default.cloneDeep(groupOrder);\n            return result.filter(key => filterGroupBy(this.groups[key], searchValue));\n        };\n        const filterSubgroups = (groups, searchValue) => {\n            const result = lodash_1.default.clone(groups);\n            return result\n                .map(subgroup => filterGroupBy(subgroup, searchValue))\n                .filter(subgroup => !lodash_1.default.isNull(subgroup));\n        };\n        const toTemplate = groupKey => {\n            return {\n                group: filterGroupBy(this.groups[groupKey], searchValue),\n                groupKey,\n                groupId: sidebar.id || sidebarGroups.id,\n                subgroups: filterSubgroups(this.groups[groupKey].subgroups, searchValue)\n                    .map((group) => this.renderTemplate('builderSidebarGroup', {\n                    group,\n                    groupKey: group.key,\n                    groupId: `group-container-${groupKey}`,\n                    subgroups: []\n                })),\n            };\n        };\n        sidebarGroups.innerHTML = filterGroupOrder(this.groupOrder, searchValue)\n            .map(groupKey => this.renderTemplate('builderSidebarGroup', toTemplate(groupKey)))\n            .join('');\n        this.loadRefs(this.element, {\n            'sidebar-groups': 'single',\n            'sidebar-anchor': 'multiple',\n            'sidebar-group': 'multiple',\n            'sidebar-container': 'multiple',\n        });\n        this.updateDragAndDrop();\n        if (searchValue === '') {\n            this.triggerRedraw();\n        }\n    }\n    orderComponents(groupInfo, foundComponents) {\n        const components = foundComponents || groupInfo.components;\n        const isResource = groupInfo.key.indexOf('resource-') === 0;\n        if (components) {\n            groupInfo.componentOrder = Object.keys(components)\n                .map(key => components[key])\n                .filter(component => component && !component.ignore && !component.ignoreForForm)\n                .sort((a, b) => a.weight - b.weight)\n                .map(component => isResource ? `component-${component.key}` : component.key);\n        }\n    }\n    updateDragAndDrop() {\n        if (this.dragDropEnabled) {\n            this.initDragula();\n        }\n        if (this.refs.form) {\n            return this.webform.attach(this.refs.form);\n        }\n    }\n    initDragula() {\n        const options = this.options;\n        if (this.dragula) {\n            this.dragula.destroy();\n        }\n        const containersArray = Array.prototype.slice.call(this.refs['sidebar-container']).filter(item => {\n            return item.id !== 'group-container-resource';\n        });\n        if (!dragula_1.default) {\n            return;\n        }\n        this.dragula = (0, dragula_1.default)(containersArray, {\n            moves(el) {\n                let moves = true;\n                const list = Array.from(el.classList).filter(item => item.indexOf('formio-component-') === 0);\n                list.forEach(item => {\n                    const key = item.slice('formio-component-'.length);\n                    if (options.disabled && options.disabled.includes(key)) {\n                        moves = false;\n                    }\n                });\n                if (el.classList.contains('no-drag')) {\n                    moves = false;\n                }\n                return moves;\n            },\n            copy(el) {\n                return el.classList.contains('drag-copy');\n            },\n            accepts(el, target) {\n                return !el.contains(target) && !target.classList.contains('no-drop');\n            }\n        }).on('drop', (element, target, source, sibling) => this.onDrop(element, target, source, sibling));\n    }\n    detach() {\n        if (this.dragula) {\n            this.dragula.destroy();\n        }\n        this.dragula = null;\n        if (this.sideBarScroll && Templates_1.default.current.clearBuilderSidebarScroll) {\n            Templates_1.default.current.clearBuilderSidebarScroll.call(this, this);\n        }\n        super.detach();\n    }\n    getComponentInfo(key, group) {\n        let info;\n        // Need to check in first order as resource component key can be the same as from webform default components\n        if (group && group.slice(0, group.indexOf('-')) === 'resource') {\n            // This is an existing resource field.\n            const resourceGroups = this.groups.resource.subgroups;\n            const resourceGroup = lodash_1.default.find(resourceGroups, { key: group });\n            if (resourceGroup && resourceGroup.components.hasOwnProperty(`component-${key}`)) {\n                info = (0, utils_1.fastCloneDeep)(resourceGroup.components[`component-${key}`].schema);\n            }\n        }\n        // This is a new component\n        else if (this.schemas.hasOwnProperty(key)) {\n            info = (0, utils_1.fastCloneDeep)(this.schemas[key]);\n        }\n        else if (this.groups.hasOwnProperty(group)) {\n            const groupComponents = this.groups[group].components;\n            if (groupComponents.hasOwnProperty(key)) {\n                info = (0, utils_1.fastCloneDeep)(groupComponents[key].schema);\n            }\n        }\n        else if (group === 'searchFields') { //Search components go into this group\n            const resourceGroups = this.groups.resource.subgroups;\n            for (let ix = 0; ix < resourceGroups.length; ix++) {\n                const resourceGroup = resourceGroups[ix];\n                if (resourceGroup.components.hasOwnProperty(`component-${key}`)) {\n                    info = (0, utils_1.fastCloneDeep)(resourceGroup.components[`component-${key}`].schema);\n                    break;\n                }\n            }\n        }\n        if (info) {\n            //if this is a custom component that was already assigned a key, don't stomp on it\n            if (!Components_1.default.components.hasOwnProperty(info.type) && info.key) {\n                return info;\n            }\n            info.key = this.generateKey(info);\n        }\n        return info;\n    }\n    getComponentsPath(component, parent) {\n        // Get path to the component in the parent component.\n        let path = 'components';\n        let columnIndex = 0;\n        let tableRowIndex = 0;\n        let tableColumnIndex = 0;\n        let tabIndex = 0;\n        switch (parent.type) {\n            case 'table':\n                tableRowIndex = lodash_1.default.findIndex(parent.rows, row => row.some(column => column.components.some(comp => comp.key === component.key)));\n                tableColumnIndex = lodash_1.default.findIndex(parent.rows[tableRowIndex], (column => column.components.some(comp => comp.key === component.key)));\n                path = `rows[${tableRowIndex}][${tableColumnIndex}].components`;\n                break;\n            case 'columns':\n                columnIndex = lodash_1.default.findIndex(parent.columns, column => column.components.some(comp => comp.key === component.key));\n                path = `columns[${columnIndex}].components`;\n                break;\n            case 'tabs':\n                tabIndex = lodash_1.default.findIndex(parent.components, tab => tab.components.some(comp => comp.key === component.key));\n                path = `components[${tabIndex}].components`;\n                break;\n        }\n        return path;\n    }\n    /* eslint-disable max-statements */\n    onDrop(element, target, source, sibling) {\n        var _a;\n        if (!target) {\n            return;\n        }\n        // If you try to drop within itself.\n        if (element.contains(target)) {\n            return;\n        }\n        const key = element.getAttribute('data-key');\n        const type = element.getAttribute('data-type');\n        const group = element.getAttribute('data-group');\n        let info, isNew, path, index;\n        if (key && group) {\n            // This is a new component.\n            info = this.getComponentInfo(key, group);\n            if (!info && type) {\n                info = this.getComponentInfo(type, group);\n            }\n            isNew = true;\n        }\n        else if (source.formioContainer) {\n            index = lodash_1.default.findIndex(source.formioContainer, { key: element.formioComponent.component.key });\n            if (index !== -1) {\n                // Grab and remove the component from the source container.\n                info = source.formioContainer.splice(lodash_1.default.findIndex(source.formioContainer, { key: element.formioComponent.component.key }), 1);\n                // Since splice returns an array of one object, we need to destructure it.\n                info = info[0];\n            }\n        }\n        // If we haven't found the component, stop.\n        if (!info) {\n            return;\n        }\n        // Show an error if siblings are disabled for a component and such a component already exists.\n        const compKey = (group === 'resource') ? `component-${key}` : key;\n        const draggableComponent = ((_a = this.groups[group]) === null || _a === void 0 ? void 0 : _a.components[compKey]) || {};\n        if (draggableComponent.disableSiblings) {\n            let isCompAlreadyExists = false;\n            (0, utils_1.eachComponent)(this.webform.components, (component) => {\n                if (component.type === draggableComponent.schema.type) {\n                    isCompAlreadyExists = true;\n                    return;\n                }\n            }, true);\n            if (isCompAlreadyExists) {\n                this.webform.redraw();\n                this.webform.setAlert('danger', `You cannot add more than one ${draggableComponent.key} component to one page.`);\n                return;\n            }\n        }\n        if (draggableComponent.uniqueComponent) {\n            let isCompAlreadyExists = false;\n            (0, utils_1.eachComponent)(this.webform.components, (component) => {\n                if (component.key === draggableComponent.schema.key) {\n                    isCompAlreadyExists = true;\n                    return;\n                }\n            }, true);\n            if (isCompAlreadyExists) {\n                this.webform.redraw();\n                this.webform.setAlert('danger', `You cannot add more than one ${draggableComponent.title} component to one page.`);\n                return;\n            }\n        }\n        if (target !== source) {\n            // Ensure the key remains unique in its new container.\n            builder_1.default.uniquify(this.findNamespaceRoot(target.formioComponent), info);\n        }\n        const parent = target.formioComponent;\n        // Insert in the new container.\n        if (target.formioContainer) {\n            if (sibling) {\n                if (!sibling.getAttribute('data-noattach')) {\n                    index = lodash_1.default.findIndex(target.formioContainer, { key: lodash_1.default.get(sibling, 'formioComponent.component.key') });\n                    index = (index === -1) ? 0 : index;\n                }\n                else {\n                    index = sibling.getAttribute('data-position');\n                }\n                if (index !== -1) {\n                    target.formioContainer.splice(index, 0, info);\n                }\n            }\n            else {\n                target.formioContainer.push(info);\n            }\n            path = this.getComponentsPath(info, parent.component);\n            index = lodash_1.default.findIndex(lodash_1.default.get(parent.schema, path), { key: info.key });\n            if (index === -1) {\n                index = 0;\n            }\n        }\n        if (parent && parent.addChildComponent) {\n            parent.addChildComponent(info, element, target, source, sibling);\n        }\n        const componentInDataGrid = parent.type === 'datagrid';\n        if (isNew\n            && !this.options.noNewEdit\n            && !info.noNewEdit\n            && this.hasEditTabs(info.type)\n            && !(this.options.design && info.type === 'reviewpage')) {\n            this.editComponent(info, target, isNew, null, null, { inDataGrid: componentInDataGrid });\n        }\n        // Only rebuild the parts needing to be rebuilt.\n        let rebuild;\n        if (target !== source) {\n            if (source.formioContainer && source.contains(target)) {\n                rebuild = source.formioComponent.rebuild();\n            }\n            else if (target.contains(source)) {\n                rebuild = target.formioComponent.rebuild();\n            }\n            else {\n                if (source.formioContainer) {\n                    rebuild = source.formioComponent.rebuild();\n                }\n                rebuild = target.formioComponent.rebuild();\n            }\n        }\n        else {\n            // If they are the same, only rebuild one.\n            rebuild = target.formioComponent.rebuild();\n        }\n        if (!rebuild) {\n            rebuild = Promise.resolve();\n        }\n        return rebuild.then(() => {\n            this.emit('addComponent', info, parent, path, index, isNew && !this.options.noNewEdit && !info.noNewEdit);\n            if (!isNew || this.options.noNewEdit || info.noNewEdit) {\n                this.emit('change', this.form);\n            }\n        });\n    }\n    setForm(form) {\n        var _a;\n        if (!form.components) {\n            form.components = [];\n        }\n        if (form && form.properties) {\n            this.options.properties = form.properties;\n        }\n        let keyboardActionsEnabled = lodash_1.default.get(this.options, 'keyboardBuilder', false) || ((_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.keyboardBuilder);\n        if (typeof keyboardActionsEnabled === 'string') {\n            keyboardActionsEnabled = keyboardActionsEnabled === 'true';\n        }\n        this.keyboardActionsEnabled = keyboardActionsEnabled;\n        const { display, noAddSubmitButton, noDefaultSubmitButton } = this.options;\n        const { _id, components } = form;\n        const isSubmitButton = ({ type, action }) => type === 'button' && (action === 'submit' || !action);\n        const hasSubmitButton = components.some(isSubmitButton);\n        // Add submit button if form display was switched from wizard\n        // Don't add if there is noAddSubmitButton flag passed, or the form has id, or the form has a submit button already\n        const shouldAddSubmitButton = (display === 'wizard' && !hasSubmitButton) ||\n            (!noAddSubmitButton && !_id && !hasSubmitButton);\n        // Ensure there is at least a submit button.\n        if (!noDefaultSubmitButton && shouldAddSubmitButton) {\n            form.components.push({\n                type: 'button',\n                label: 'Submit',\n                key: 'submit',\n                size: 'md',\n                block: false,\n                action: 'submit',\n                disableOnInvalid: true,\n                theme: 'primary'\n            });\n        }\n        if (this.webform) {\n            const shouldRebuild = !this.webform.form.components ||\n                (form.components.length !== this.webform.form.components.length);\n            return this.webform.setForm(form, { keepAsReference: true }).then(() => {\n                if (this.refs.form) {\n                    this.builderHeight = this.refs.form.offsetHeight;\n                }\n                if (!shouldRebuild) {\n                    return this.form;\n                }\n                return this.rebuild().then(() => this.form);\n            });\n        }\n        return Promise.resolve(form);\n    }\n    populateCaptchaSettings(form) {\n        //populate isEnabled for captcha form settings\n        let isCaptchaEnabled = false;\n        if (this.form.components) {\n            (0, utils_1.eachComponent)(form.components, component => {\n                if (isCaptchaEnabled) {\n                    return;\n                }\n                if (component.type === 'captcha') {\n                    isCaptchaEnabled = true;\n                    return false;\n                }\n            });\n            if (isCaptchaEnabled) {\n                lodash_1.default.set(form, 'settings.captcha.isEnabled', true);\n            }\n            else if (lodash_1.default.get(form, 'settings.captcha.isEnabled')) {\n                lodash_1.default.set(form, 'settings.captcha.isEnabled', false);\n            }\n        }\n    }\n    removeComponent(component, parent, original, componentInstance) {\n        if (!parent) {\n            return;\n        }\n        let remove = true;\n        const removingComponentsGroup = !component.skipRemoveConfirm &&\n            ((Array.isArray(component.components) && component.components.length) ||\n                (Array.isArray(component.rows) && component.rows.length) ||\n                (Array.isArray(component.columns) && component.columns.length));\n        if (this.options.alwaysConfirmComponentRemoval || removingComponentsGroup) {\n            const message = removingComponentsGroup ? 'Removing this component will also remove all of its children. Are you sure you want to do this?'\n                : 'Are you sure you want to remove this component?';\n            remove = window.confirm(this.t(message));\n        }\n        if (!original) {\n            original = parent.formioContainer.find((comp) => comp.id === component.id);\n        }\n        const index = parent.formioContainer ? parent.formioContainer.indexOf(original) : 0;\n        if (remove && index !== -1) {\n            const path = this.getComponentsPath(component, parent.formioComponent.component);\n            if (parent.formioContainer) {\n                parent.formioContainer.splice(index, 1);\n            }\n            else if (parent.formioComponent && parent.formioComponent.removeChildComponent) {\n                parent.formioComponent.removeChildComponent(component);\n            }\n            if (component.input && componentInstance && parent.formioComponent) {\n                const parentDefaultValue = lodash_1.default.get(parent.formioComponent, 'component.defaultValue', null);\n                if (Array.isArray(parentDefaultValue)) {\n                    parentDefaultValue.forEach(v => lodash_1.default.unset(v, componentInstance.key));\n                }\n                else if (typeof parentDefaultValue === 'object') {\n                    lodash_1.default.unset(parentDefaultValue, componentInstance.key);\n                }\n            }\n            const rebuild = parent.formioComponent.rebuild() || Promise.resolve();\n            rebuild.then(() => {\n                this.emit('removeComponent', component, parent.formioComponent.schema, path, index);\n                this.emit('change', this.form);\n            });\n        }\n        return remove;\n    }\n    replaceDoubleQuotes(data, fieldsToRemoveDoubleQuotes = []) {\n        if (data) {\n            fieldsToRemoveDoubleQuotes.forEach((key) => {\n                if (data[key]) {\n                    data[key] = data[key].replace(/\"/g, \"'\");\n                }\n            });\n            return data;\n        }\n    }\n    updateComponent(component, changed) {\n        const sanitizeConfig = lodash_1.default.get(this.webform, 'form.settings.sanitizeConfig') || lodash_1.default.get(this.webform, 'form.globalSettings.sanitizeConfig');\n        // Update the preview.\n        if (this.preview) {\n            this.preview.form = {\n                components: [lodash_1.default.omit(Object.assign({}, component), [\n                        'hidden',\n                        'conditional',\n                        'calculateValue',\n                        'logic',\n                        'autofocus',\n                        'customConditional',\n                    ])],\n                config: this.options.formConfig || {},\n                sanitizeConfig,\n            };\n            const fieldsToRemoveDoubleQuotes = ['label', 'tooltip'];\n            this.preview.form.components.forEach(component => this.replaceDoubleQuotes(component, fieldsToRemoveDoubleQuotes));\n            const previewElement = this.componentEdit.querySelector(`[${this._referenceAttributeName}=\"preview\"]`);\n            if (previewElement) {\n                this.setContent(previewElement, this.preview.render(), null, sanitizeConfig);\n                this.preview.attach(previewElement);\n            }\n        }\n        // Change the \"default value\" field to be reflective of this component.\n        const defaultValueComponent = (0, utils_1.getComponent)(this.editForm.components, 'defaultValue', true);\n        if (defaultValueComponent && component.type !== 'hidden') {\n            const defaultChanged = changed && ((changed.component && changed.component.key === 'defaultValue')\n                || (changed.instance && defaultValueComponent.hasComponent && defaultValueComponent.hasComponent(changed.instance)));\n            if (!defaultChanged) {\n                lodash_1.default.assign(defaultValueComponent.component, lodash_1.default.omit(Object.assign({}, component), [\n                    'key',\n                    'label',\n                    'labelPosition',\n                    'labelMargin',\n                    'labelWidth',\n                    'placeholder',\n                    'tooltip',\n                    'hidden',\n                    'autofocus',\n                    'validate',\n                    'disabled',\n                    'defaultValue',\n                    'customDefaultValue',\n                    'calculateValue',\n                    'conditional',\n                    'customConditional',\n                    'id',\n                    'logic',\n                    'fields.day.required',\n                    'fields.month.required',\n                    'fields.year.required',\n                ]));\n                const parentComponent = defaultValueComponent.parent;\n                let tabIndex = -1;\n                let index = -1;\n                parentComponent.tabs.some((tab, tIndex) => {\n                    tab.some((comp, compIndex) => {\n                        if (comp.id === defaultValueComponent.id) {\n                            tabIndex = tIndex;\n                            index = compIndex;\n                            return true;\n                        }\n                        return false;\n                    });\n                });\n                if (tabIndex !== -1 && index !== -1 && changed && !lodash_1.default.isNil(changed.value)) {\n                    const sibling = parentComponent.tabs[tabIndex][index + 1];\n                    parentComponent.removeComponent(defaultValueComponent);\n                    const newComp = parentComponent.addComponent(defaultValueComponent.component, defaultValueComponent.data, sibling);\n                    lodash_1.default.pull(newComp.validators, 'required');\n                    parentComponent.tabs[tabIndex].splice(index, 1, newComp);\n                    newComp.processOwnValidation = true;\n                    newComp.build(defaultValueComponent.element);\n                    if (this.preview && !this.preview.defaultChanged) {\n                        const defaultValue = lodash_1.default.get(this.preview._data, this.editForm._data.key);\n                        if (lodash_1.default.isObject(defaultValue) && !lodash_1.default.isArray(defaultValue)) {\n                            this.editForm._data.defaultValue = defaultValue;\n                        }\n                    }\n                }\n            }\n            else {\n                let dataPath = changed.instance._data.key;\n                const path = (0, utils_1.getArrayFromComponentPath)(changed.instance.path);\n                path.shift();\n                if (path.length) {\n                    path.unshift(component.key);\n                    dataPath = (0, utils_1.getStringFromComponentPath)(path);\n                }\n                this.preview.defaultChanged = true;\n                lodash_1.default.set(this.preview._data, dataPath, changed.value);\n                lodash_1.default.set(this.webform._data, dataPath, changed.value);\n            }\n        }\n        // Called when we update a component.\n        this.emit('updateComponent', component);\n    }\n    findComponentsWithRepeatablePaths() {\n        const repeatablePaths = {};\n        const keys = new Map();\n        (0, utils_1.eachComponent)(this.form.components, (comp, path, components, parent, paths) => {\n            var _a, _b;\n            const isRadioCheckbox = comp.type === 'checkbox' && comp.inputType === 'radio';\n            const isLayout = (0, utils_1.componentInfo)(comp).layout;\n            if (!isLayout) {\n                if (keys.has(paths.dataPath)) {\n                    const onlyRadioCheckboxes = ((_a = repeatablePaths[paths.dataPath]) === null || _a === void 0 ? void 0 : _a.onlyRadioCheckboxes) === false ? false : isRadioCheckbox;\n                    repeatablePaths[paths.dataPath] = {\n                        comps: [...(((_b = repeatablePaths[paths.dataPath]) === null || _b === void 0 ? void 0 : _b.comps) || []), keys.get(paths.dataPath), comp],\n                        onlyRadioCheckboxes,\n                    };\n                }\n                else {\n                    keys.set(paths.dataPath, comp);\n                }\n            }\n        }, true);\n        const componentsWithRepeatablePaths = [];\n        Object.keys(repeatablePaths).forEach((path) => {\n            const { comps, onlyRadioCheckboxes } = repeatablePaths[path];\n            if (!onlyRadioCheckboxes) {\n                componentsWithRepeatablePaths.push(...comps);\n            }\n        });\n        return componentsWithRepeatablePaths;\n    }\n    highlightInvalidComponents() {\n        const repeatablePathsComps = this.findComponentsWithRepeatablePaths();\n        let hasInvalidComponents = false;\n        this.webform.everyComponent((comp) => {\n            if (repeatablePathsComps.includes(comp.component)) {\n                comp.setCustomValidity(this.t('apiKey', { key: comp.key }));\n                hasInvalidComponents = true;\n            }\n            else {\n                comp.setCustomValidity();\n            }\n        });\n        this.emit('builderFormValidityChange', hasInvalidComponents);\n    }\n    /**\n     * Called when a new component is saved.\n     * @param {Component} component - The component instance to save.\n     * @param {Component} parent - The parent component.\n     * @param {boolean} isNew - If this is a new component.\n     * @param {Component} original - The original component.\n     * @returns {boolean} - If the component was saved.\n     */\n    saveComponent(component, parent, isNew, original) {\n        this.editForm.detach();\n        const parentContainer = parent ? parent.formioContainer : this.container;\n        const parentComponent = parent ? parent.formioComponent : this;\n        this.dialog.close();\n        const path = parentContainer ? this.getComponentsPath(component, parentComponent.component) : '';\n        if (!original) {\n            original = parent.formioContainer.find((comp) => comp.id === component.id);\n        }\n        const index = parentContainer ? parentContainer.indexOf(original) : 0;\n        if (index !== -1) {\n            let submissionData = this.editForm.submission.data;\n            submissionData = submissionData.componentJson || submissionData;\n            const fieldsToRemoveDoubleQuotes = ['label', 'tooltip'];\n            this.replaceDoubleQuotes(submissionData, fieldsToRemoveDoubleQuotes);\n            this.hook('beforeSaveComponentSettings', submissionData);\n            let comp = null;\n            parentComponent.getComponents().forEach((component) => {\n                if (component.component.key === original.key) {\n                    comp = component;\n                }\n            });\n            const originalComp = comp === null || comp === void 0 ? void 0 : comp.component;\n            const originalComponentSchema = comp === null || comp === void 0 ? void 0 : comp.schema;\n            const isParentSaveChildMethod = this.isParentSaveChildMethod(parent.formioComponent);\n            if (parentContainer && !isParentSaveChildMethod) {\n                parentContainer[index] = submissionData;\n                if (comp) {\n                    comp.component = submissionData;\n                }\n            }\n            else if (isParentSaveChildMethod) {\n                parent.formioComponent.saveChildComponent(submissionData);\n            }\n            const rebuild = parentComponent.rebuild() || Promise.resolve();\n            return rebuild.then(() => {\n                parentComponent.resetValue();\n                const schema = parentContainer ? parentContainer[index] : (comp ? comp.schema : []);\n                this.emitSaveComponentEvent(schema, originalComp, parentComponent.schema, path, index, isNew, originalComponentSchema);\n                this.emit('change', this.form);\n                this.highlightInvalidComponents();\n                if (this.isComponentCreated) {\n                    const component = parent.formioComponent.components[0];\n                    this.moveComponent(component);\n                    this.isComponentCreated = false;\n                }\n            });\n        }\n        this.highlightInvalidComponents();\n        return Promise.resolve();\n    }\n    emitSaveComponentEvent(schema, originalComp, parentComponentSchema, path, index, isNew, originalComponentSchema) {\n        this.emit('saveComponent', schema, originalComp, parentComponentSchema, path, index, isNew, originalComponentSchema);\n    }\n    attachEditComponentControls(component, parent, isNew, original, ComponentClass) {\n        const cancelButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}=\"cancelButton\"]`);\n        cancelButtons.forEach((cancelButton) => {\n            this.editForm.addEventListener(cancelButton, 'click', (event) => {\n                event.preventDefault();\n                this.editForm.detach();\n                this.emit('cancelComponent', component);\n                this.dialog.close();\n                this.highlightInvalidComponents();\n            });\n        });\n        const removeButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}=\"removeButton\"]`);\n        removeButtons.forEach((removeButton) => {\n            this.editForm.addEventListener(removeButton, 'click', (event) => {\n                event.preventDefault();\n                // Since we are already removing the component, don't trigger another remove.\n                this.saved = true;\n                this.editForm.detach();\n                this.removeComponent(component, parent, original);\n                this.dialog.close();\n                this.highlightInvalidComponents();\n            });\n        });\n        const saveButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}=\"saveButton\"]`);\n        saveButtons.forEach((saveButton) => {\n            this.editForm.addEventListener(saveButton, 'click', (event) => {\n                event.preventDefault();\n                const errors = this.editForm.validate(this.editForm.data, {\n                    dirty: true\n                });\n                if (errors.length) {\n                    this.editForm.setPristine(false);\n                    this.editForm.showErrors(errors);\n                    return false;\n                }\n                this.saved = true;\n                this.saveComponent(component, parent, isNew, original);\n            });\n        });\n        const previewButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}=\"previewButton\"]`);\n        previewButtons.forEach((previewButton) => {\n            this.editForm.addEventListener(previewButton, 'click', (event) => {\n                var _a;\n                event.preventDefault();\n                this.showPreview = !this.showPreview;\n                this.editForm.detach();\n                this.setContent(this.componentEdit, this.renderTemplate('builderEditForm', {\n                    componentInfo: ComponentClass.builderInfo,\n                    editForm: this.editForm.render(),\n                    preview: this.preview ? this.preview.render() : false,\n                    showPreview: this.showPreview,\n                    helplinks: this.helplinks,\n                }));\n                this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}=\"editForm\"]`));\n                const editFormData = (_a = this.editForm.submission) === null || _a === void 0 ? void 0 : _a.data;\n                this.updateComponent((editFormData === null || editFormData === void 0 ? void 0 : editFormData.componentJson) || editFormData || component);\n                this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);\n            });\n        });\n    }\n    editComponent(component, parent, isNew, isJsonEdit, original, flags = {}) {\n        var _a, _b;\n        if (!component.key) {\n            return;\n        }\n        this.saved = false;\n        const componentCopy = (0, utils_1.fastCloneDeep)(component);\n        let ComponentClass = Components_1.default.components[componentCopy.type];\n        const isCustom = ComponentClass === undefined;\n        isJsonEdit = isJsonEdit || isCustom;\n        ComponentClass = isCustom ? Components_1.default.components.unknown : ComponentClass;\n        // Make sure we only have one dialog open at a time.\n        if (this.dialog) {\n            this.dialog.close();\n            this.highlightInvalidComponents();\n        }\n        // This is the render step.\n        const editFormOptions = lodash_1.default.clone(lodash_1.default.get(this, 'options.editForm', {}));\n        if (this.editForm) {\n            this.editForm.destroy();\n        }\n        // Allow editForm overrides per component.\n        const overrides = lodash_1.default.get(this.options, `editForm.${componentCopy.type}`, {});\n        // Pass along the form being edited.\n        editFormOptions.editForm = this.form;\n        editFormOptions.editComponent = component;\n        editFormOptions.flags = flags;\n        this.hook('editComponentParentInstance', editFormOptions, parent);\n        this.editForm = new Webform_1.default(Object.assign(Object.assign(Object.assign(Object.assign({}, lodash_1.default.omit(this.options, ['hooks', 'builder', 'events', 'attachMode', 'skipInit'])), { language: this.options.language }), editFormOptions), { evalContext: Object.assign(Object.assign({}, ((editFormOptions === null || editFormOptions === void 0 ? void 0 : editFormOptions.evalContext) || ((_a = this.options) === null || _a === void 0 ? void 0 : _a.evalContext) || {})), { buildingForm: this.form }) }));\n        this.hook('editFormProperties', parent);\n        this.editForm.form = (isJsonEdit && !isCustom) ? {\n            components: [\n                {\n                    type: 'textarea',\n                    as: 'json',\n                    editor: 'ace',\n                    weight: 10,\n                    input: true,\n                    key: 'componentJson',\n                    label: 'Component JSON',\n                    tooltip: 'Edit the JSON for this component.'\n                },\n                {\n                    type: 'checkbox',\n                    key: 'showFullSchema',\n                    label: 'Full Schema'\n                }\n            ]\n        } : ComponentClass.editForm(lodash_1.default.cloneDeep(overrides));\n        const instanceOptions = {\n            inFormBuilder: true,\n        };\n        this.hook('instanceOptionsPreview', instanceOptions);\n        const instance = new ComponentClass(componentCopy, instanceOptions);\n        const schema = this.hook('builderComponentSchema', component, instance);\n        this.editForm.submission = isJsonEdit ? {\n            data: {\n                componentJson: schema,\n                showFullSchema: this.options.showFullJsonSchema\n            },\n        } : {\n            data: instance.component,\n        };\n        if (this.preview) {\n            this.preview.destroy();\n        }\n        if (!ComponentClass.builderInfo.hasOwnProperty('preview') || ComponentClass.builderInfo.preview) {\n            this.preview = new Webform_1.default(lodash_1.default.omit(Object.assign(Object.assign({}, this.options), { preview: true }), [\n                'hooks',\n                'builder',\n                'events',\n                'attachMode',\n                'calculateValue'\n            ]));\n            this.hook('previewFormSettitngs', schema, isJsonEdit);\n        }\n        this.showPreview = (_b = ComponentClass.builderInfo.showPreview) !== null && _b !== void 0 ? _b : true;\n        this.componentEdit = this.ce('div', { 'class': 'component-edit-container' });\n        this.setContent(this.componentEdit, this.renderTemplate('builderEditForm', {\n            componentInfo: ComponentClass.builderInfo,\n            editForm: this.editForm.render(),\n            preview: this.preview ? this.preview.render() : false,\n            showPreview: this.showPreview,\n            helplinks: this.helplinks\n        }));\n        this.dialog = this.createModal(this.componentEdit, lodash_1.default.get(this.options, 'dialogAttr', {}));\n        // This is the attach step.\n        this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}=\"editForm\"]`));\n        this.hook('editFormWrapper');\n        this.updateComponent(componentCopy);\n        this.editForm.on('change', (event) => {\n            if (event.changed) {\n                if (event.changed.component && event.changed.component.key === 'showFullSchema') {\n                    const { value } = event.changed;\n                    this.editForm.submission = {\n                        data: {\n                            componentJson: value ? instance.component : component,\n                            showFullSchema: value\n                        },\n                    };\n                    return;\n                }\n                // See if this is a manually modified key. Treat custom component keys as manually modified\n                if ((event.changed.component && (event.changed.component.key === 'key')) || isJsonEdit) {\n                    componentCopy.keyModified = true;\n                }\n                let isComponentLabelChanged = false;\n                if (event.changed.instance) {\n                    isComponentLabelChanged = ['label', 'title'].includes(event.changed.instance.path);\n                }\n                else if (event.changed.component) {\n                    isComponentLabelChanged = ['label', 'title'].includes(event.changed.component.key);\n                }\n                if (isComponentLabelChanged) {\n                    // Ensure this component has a key.\n                    if (isNew) {\n                        if (!event.data.keyModified) {\n                            this.editForm.everyComponent(component => {\n                                if (component.key === 'key' && component.parent.component.key === 'tabs') {\n                                    component.setValue(this.updateComponentKey(event.data));\n                                    return false;\n                                }\n                            });\n                        }\n                        if (this.form) {\n                            let formComponents = this.findNamespaceRoot(parent.formioComponent);\n                            // excluding component which key uniqueness is to be checked to prevent the comparing of the same keys\n                            formComponents = formComponents.filter(comp => editFormOptions.editComponent.id !== comp.id);\n                            // Set a unique key for this component.\n                            builder_1.default.uniquify(formComponents, event.data);\n                        }\n                    }\n                }\n                // If the edit form has any nested form inside, we get a partial data (nested form's data) in the\n                // event.data property\n                let editFormData;\n                if (event.changed.instance && event.changed.instance.root && event.changed.instance.root.id !== this.editForm.id) {\n                    editFormData = this.editForm.data;\n                }\n                // Update the component.\n                this.updateComponent(event.data.componentJson || editFormData || event.data, event.changed);\n            }\n        });\n        this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);\n        const dialogClose = () => {\n            this.editForm.destroy(true);\n            if (this.preview) {\n                this.preview.destroy(true);\n                this.preview = null;\n            }\n            if (isNew && !this.saved) {\n                this.removeComponent(component, parent, original);\n                this.highlightInvalidComponents();\n            }\n            // Clean up.\n            this.removeEventListener(this.dialog, 'close', dialogClose);\n            this.dialog = null;\n        };\n        this.addEventListener(this.dialog, 'close', dialogClose);\n        // Called when we edit a component.\n        this.emit('editComponent', component);\n    }\n    updateComponentKey(data) {\n        return lodash_1.default.camelCase(data.title ||\n            data.label ||\n            data.placeholder ||\n            data.type).replace(/^[0-9]*/, '');\n    }\n    moveComponent(component) {\n        var _a;\n        if (this.selectedComponent) {\n            const prevSelected = this.selectedComponent;\n            (_a = prevSelected.element) === null || _a === void 0 ? void 0 : _a.classList.remove('builder-component-selected');\n            this.removeEventListener(document, 'keydown');\n        }\n        component.element.focus();\n        component.element.classList.add('builder-component-selected');\n        this.selectedComponent = component;\n        this.addEventListener(document, 'keydown', this.moveHandler.bind(this));\n    }\n    updateComponentPlacement(direction) {\n        const component = this.selectedComponent;\n        let index, info;\n        const step = direction ? -1 : 1;\n        if (component) {\n            const element = component.element;\n            const sibling = direction ? element.previousElementSibling : element.nextElementSibling;\n            const source = element.parentNode;\n            const containerLength = source.formioContainer.length;\n            if (containerLength && containerLength <= 1) {\n                return;\n            }\n            if (source.formioContainer) {\n                index = lodash_1.default.findIndex(source.formioContainer, { key: element.formioComponent.component.key });\n                if (index !== -1) {\n                    info = source.formioContainer.splice(lodash_1.default.findIndex(source.formioContainer, { key: element.formioComponent.component.key }), 1);\n                    info = info[0];\n                    source.removeChild(element);\n                }\n            }\n            const len = source.formioComponent.components.length;\n            index = (index === -1) ? 0 : index + step;\n            if (index === -1) {\n                source.formioContainer.push(info);\n                source.appendChild(element);\n            }\n            else if (index === len) {\n                const key = source.formioContainer[0].key;\n                index = lodash_1.default.findIndex(source.formioComponent.components, { key: key });\n                const firstElement = source.formioComponent.components[index].element;\n                source.formioContainer.splice(0, 0, info);\n                source.insertBefore(element, firstElement);\n            }\n            else if (index !== -1) {\n                source.formioContainer.splice(index, 0, info);\n                direction\n                    ? source.insertBefore(element, sibling)\n                    : source.insertBefore(element, sibling.nextElementSibling);\n            }\n            element.focus();\n        }\n    }\n    stopMoving(comp) {\n        const parent = comp.element.parentNode;\n        this.removeEventListener(document, 'keydown');\n        parent.formioComponent.rebuild();\n        this.selectedComponent = null;\n    }\n    addNewComponent(element) {\n        var _a;\n        const source = document.querySelector('.formio-builder-form');\n        const key = element.getAttribute('data-key');\n        const group = element.getAttribute('data-group');\n        const isNew = true;\n        let info;\n        if (key && group) {\n            info = this.getComponentInfo(key, group);\n        }\n        if (isNew && !this.options.noNewEdit && !info.noNewEdit) {\n            builder_1.default.uniquify(this.findNamespaceRoot(source.formioComponent), info);\n            this.editComponent(info, source, isNew, null, null);\n        }\n        const firstComponent = (_a = source.formioComponent.components[0]) === null || _a === void 0 ? void 0 : _a.element;\n        if (firstComponent) {\n            source.formioContainer.splice(0, 0, info);\n        }\n        else {\n            source.formioContainer.push(info);\n        }\n        source.formioComponent.rebuild().then(() => {\n            this.isComponentCreated = true;\n        });\n    }\n    /**\n     * Creates copy of component schema and stores it under sessionStorage.\n     * @param {Component} component - The component to copy.\n     * @returns {void}\n     */\n    copyComponent(component) {\n        if (!window.sessionStorage) {\n            return console.warn('Session storage is not supported in this browser.');\n        }\n        this.addClass(this.refs.form, 'builder-paste-mode');\n        window.sessionStorage.setItem('formio.clipboard', JSON.stringify(component.schema));\n    }\n    /**\n     * Paste copied component after the current component.\n     * @param {Component} component - The component to paste after.\n     * @returns {void}\n     */\n    pasteComponent(component) {\n        if (!window.sessionStorage) {\n            return console.warn('Session storage is not supported in this browser.');\n        }\n        this.removeClass(this.refs.form, 'builder-paste-mode');\n        if (window.sessionStorage) {\n            const data = window.sessionStorage.getItem('formio.clipboard');\n            if (data) {\n                const schema = JSON.parse(data);\n                const parent = this.getParentElement(component.element);\n                if (parent) {\n                    builder_1.default.uniquify(this.findNamespaceRoot(parent.formioComponent), schema);\n                    let path = '';\n                    let index = 0;\n                    const isParentSaveChildMethod = this.isParentSaveChildMethod(parent.formioComponent);\n                    if (parent.formioContainer && !isParentSaveChildMethod) {\n                        index = parent.formioContainer.indexOf(component.component);\n                        path = this.getComponentsPath(schema, parent.formioComponent.component);\n                        parent.formioContainer.splice(index + 1, 0, schema);\n                    }\n                    else if (isParentSaveChildMethod) {\n                        parent.formioComponent.saveChildComponent(schema, false);\n                    }\n                    parent.formioComponent.rebuild();\n                    this.emitSaveComponentEvent(schema, schema, parent.formioComponent.component, path, (index + 1), true, schema);\n                }\n                this.emit('change', this.form);\n            }\n        }\n    }\n    isParentSaveChildMethod(parentComp) {\n        return !!(parentComp && parentComp.saveChildComponent);\n    }\n    getParentElement(element) {\n        let container = element;\n        do {\n            container = container.parentNode;\n        } while (container && !container.formioComponent);\n        return container;\n    }\n    addBuilderComponentInfo(component) {\n        if (!component || !component.group || !this.groups[component.group]) {\n            return;\n        }\n        component = lodash_1.default.clone(component);\n        const groupInfo = this.groups[component.group];\n        if (!groupInfo.components.hasOwnProperty(component.key)) {\n            groupInfo.components[component.key] = component;\n        }\n        return component;\n    }\n    init() {\n        if (this.webform) {\n            this.webform.init();\n        }\n        return super.init();\n    }\n    clear() {\n        if (this.webform.initialized) {\n            this.webform.clear();\n        }\n    }\n    destroy(all = false) {\n        if (this.webform.initialized) {\n            this.webform.destroy(all);\n        }\n        super.destroy(all);\n    }\n    addBuilderGroup(name, group) {\n        if (!this.groups[name]) {\n            this.groups[name] = group;\n            this.groupOrder.push(name);\n            this.triggerRedraw();\n        }\n        else {\n            this.updateBuilderGroup(name, group);\n        }\n    }\n    updateBuilderGroup(name, group) {\n        if (this.groups[name]) {\n            this.groups[name] = group;\n            this.triggerRedraw();\n        }\n    }\n    generateKey(info) {\n        return info.key || lodash_1.default.camelCase(info.title ||\n            info.label ||\n            info.placeholder ||\n            info.type);\n    }\n    hasEditTabs(type) {\n        // If the component type does not exist then it has no edit tabs\n        if (!Components_1.default.components[type === 'custom' ? 'unknown' : type]) {\n            return false;\n        }\n        const editTabs = (0, utils_1.getComponent)(Components_1.default.components[type === 'custom' ? 'unknown' : type].editForm().components, 'tabs', true).components;\n        const hiddenEditTabs = lodash_1.default.filter(lodash_1.default.get(this.options, `editForm.${type}`, []), 'ignore');\n        return lodash_1.default.intersectionBy(editTabs, hiddenEditTabs, 'key').length !== editTabs.length;\n    }\n}\nexports[\"default\"] = WebformBuilder;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/WebformBuilder.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 Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.js\"));\nconst Component_1 = __importDefault(__webpack_require__(/*! ./components/_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst tippy_js_1 = __importDefault(__webpack_require__(/*! tippy.js */ \"./node_modules/tippy.js/dist/tippy.esm.js\"));\nconst Components_1 = __importDefault(__webpack_require__(/*! ./components/Components */ \"./lib/cjs/components/Components.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __webpack_require__(/*! ./utils */ \"./lib/cjs/utils/index.js\");\nconst builder_1 = __importDefault(__webpack_require__(/*! ./utils/builder */ \"./lib/cjs/utils/builder.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst dom_autoscroller_1 = __importDefault(__webpack_require__(/*! dom-autoscroller */ \"./node_modules/dom-autoscroller/dist/bundle.js\"));\nconst Templates_1 = __importDefault(__webpack_require__(/*! ./templates/Templates */ \"./lib/cjs/templates/Templates.js\"));\n__webpack_require__(/*! ./components/builder */ \"./lib/cjs/components/builder.js\");\n// We need this here because dragula pulls in CustomEvent class that requires global to exist.\nif (typeof window !== 'undefined' && typeof window.global === 'undefined') {\n    window.global = window;\n}\nconst dragula_1 = __importDefault(__webpack_require__(/*! dragula */ \"./node_modules/dragula/dragula.js\"));\nclass WebformBuilder extends Component_1.default {\n    // eslint-disable-next-line max-statements\n    constructor() {\n        let element, options;\n        if (arguments[0] instanceof HTMLElement || arguments[1]) {\n            element = arguments[0];\n            options = arguments[1];\n        }\n        else {\n            options = arguments[0];\n        }\n        // Reset skipInit in case PDFBuilder has set it.\n        options.skipInit = false;\n        options.display = options.display || 'form';\n        super(null, options);\n        this.moveHandler = (e) => {\n            if (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 13) {\n                e.stopPropagation();\n                e.preventDefault();\n            }\n            if (e.keyCode === 38) {\n                this.updateComponentPlacement(true);\n            }\n            if (e.keyCode === 40) {\n                this.updateComponentPlacement(false);\n            }\n            if (e.keyCode === 13) {\n                this.stopMoving(this.selectedComponent);\n            }\n        };\n        this.setElement(element);\n        this.dragulaLib = dragula_1.default;\n        this.builderHeight = 0;\n        this.schemas = {};\n        this.repeatablePaths = [];\n        this.sideBarScroll = lodash_1.default.get(this.options, 'sideBarScroll', true);\n        this.sideBarScrollOffset = lodash_1.default.get(this.options, 'sideBarScrollOffset', 0);\n        this.dragDropEnabled = true;\n        // Setup the builder options.\n        this.builder = lodash_1.default.defaultsDeep({}, this.options.builder, this.defaultGroups);\n        // Turn off if explicitely said to do so...\n        lodash_1.default.each(this.defaultGroups, (config, key) => {\n            if (config === false) {\n                this.builder[key] = false;\n            }\n        });\n        // Add the groups.////\n        this.groups = {};\n        this.groupOrder = [];\n        for (const group in this.builder) {\n            if (this.builder[group]) {\n                this.builder[group].key = group;\n                this.groups[group] = this.builder[group];\n                this.groups[group].components = this.groups[group].components || {};\n                this.groups[group].componentOrder = this.groups[group].componentOrder || [];\n                this.groups[group].subgroups = Object.keys(this.groups[group].groups || {}).map((groupKey) => {\n                    this.groups[group].groups[groupKey].componentOrder = Object.keys(this.groups[group].groups[groupKey].components).map((key) => key);\n                    return this.groups[group].groups[groupKey];\n                });\n                this.groupOrder.push(this.groups[group]);\n            }\n        }\n        this.groupOrder = this.groupOrder\n            .filter(group => group && !group.ignore)\n            .sort((a, b) => a.weight - b.weight);\n        const defaultOpenedGroup = this.groupOrder.find(x => x.key !== 'basic' && x.default);\n        if (defaultOpenedGroup) {\n            this.groupOrder.forEach(x => {\n                if ('default' in x && x.key !== defaultOpenedGroup.key) {\n                    x.default = false;\n                }\n            });\n        }\n        this.groupOrder = this.groupOrder.map(group => group.key);\n        for (const type in Components_1.default.components) {\n            const component = Components_1.default.components[type];\n            if (component.builderInfo && component.builderInfo.schema) {\n                this.schemas[type] = component.builderInfo.schema;\n                component.type = type;\n                const builderInfo = component.builderInfo;\n                builderInfo.key = component.type;\n                this.addBuilderComponentInfo(builderInfo);\n            }\n        }\n        // Filter out any extra components.\n        // Add the components in each group.\n        for (const group in this.groups) {\n            const info = this.groups[group];\n            for (const key in info.components) {\n                const compKey = group === 'resource' ? `component-${key}` : key;\n                let comp = info.components[compKey];\n                if (comp === true &&\n                    Components_1.default.components[key] &&\n                    Components_1.default.components[key].builderInfo) {\n                    comp = Components_1.default.components[key].builderInfo;\n                }\n                if (comp && comp.schema) {\n                    this.schemas[key] = comp.schema;\n                    info.components[compKey] = comp;\n                    info.components[compKey].key = key;\n                }\n                else {\n                    // Do not include this component in the components array.\n                    delete info.components[compKey];\n                }\n            }\n            // Order the components.\n            this.orderComponents(info);\n        }\n        this.options.hooks = this.options.hooks || {};\n        this.options.hooks.renderComponent = (html, { component, self }) => {\n            var _a, _b, _c;\n            if (self.type === 'form' && !self.key) {\n                const template = this.hook('renderComponentFormTemplate', html.replace('formio-component-form', ''));\n                // The main webform shouldn't have this class as it adds extra styles.\n                return template;\n            }\n            if (this.options.disabled && this.options.disabled.includes(self.key) || self.parent.noDragDrop) {\n                return html;\n            }\n            return this.renderTemplate('builderComponent', {\n                html,\n                disableBuilderActions: (_a = self === null || self === void 0 ? void 0 : self.component) === null || _a === void 0 ? void 0 : _a.disableBuilderActions,\n                childComponent: component,\n                design: (_b = self === null || self === void 0 ? void 0 : self.options) === null || _b === void 0 ? void 0 : _b.design,\n                editJson: (_c = self === null || self === void 0 ? void 0 : self.options) === null || _c === void 0 ? void 0 : _c.editJson,\n                editComponent: this.hasEditTabs(component.type)\n            });\n        };\n        this.options.hooks.renderComponents = (html, { components, self }) => {\n            // if Datagrid and already has a component, don't make it droppable.\n            if (self.type === 'datagrid' && components.length > 0 || self.noDragDrop) {\n                return html;\n            }\n            if (!components ||\n                (!components.length && !components.nodrop) ||\n                (self.type === 'form' && components.length <= 1 && (components.length === 0 || components[0].type === 'button'))) {\n                html = this.renderTemplate('builderPlaceholder', {\n                    position: 0\n                }) + html;\n            }\n            return this.renderTemplate('builderComponents', {\n                key: self.key,\n                type: self.type,\n                html,\n            });\n        };\n        this.options.hooks.renderInput = (html, { self }) => {\n            if (self.type === 'hidden') {\n                return html + self.name;\n            }\n            return html;\n        };\n        this.options.hooks.renderLoading = (html, { self }) => {\n            if (self.type === 'form' && self.key) {\n                return self.name;\n            }\n            return html;\n        };\n        this.options.hooks.attachComponents = (element, components, container, component) => {\n            // Don't attach if no element was found or component doesn't participate in drag'n'drop.\n            if (!element) {\n                return;\n            }\n            if (component.noDragDrop) {\n                return element;\n            }\n            // Attach container and component to element for later reference.\n            const containerElement = element.querySelector(`[${this._referenceAttributeName}=\"${component.component.key}-container\"]`) || element;\n            containerElement.formioContainer = container;\n            containerElement.formioComponent = component;\n            // Add container to draggable list.\n            if (this.dragula && this.allowDrop(element)) {\n                this.dragula.containers.push(containerElement);\n            }\n            // If this is an existing datagrid element, don't make it draggable.\n            if ((component.type === 'datagrid' || component.type === 'datamap') && components.length > 0) {\n                return element;\n            }\n            // Since we added a wrapper, need to return the original element so that we can find the components inside it.\n            return element.children[0];\n        };\n        this.options.hooks.attachDatagrid = (element, component) => {\n            component.loadRefs(element, {\n                [`${component.key}-container`]: 'single',\n            });\n            const dataGridContainer = component.refs[`${component.key}-container`];\n            if (dataGridContainer) {\n                component.attachComponents(dataGridContainer.parentNode, [], component.component.components);\n            }\n            // Need to set up horizontal rearrangement of fields.\n        };\n        this.options.hooks.attachComponent = this.attachComponent.bind(this);\n        // Load resources tagged as 'builder'\n        const query = {\n            params: {\n                type: 'resource',\n                limit: 1000000,\n                select: '_id,title,name,components'\n            }\n        };\n        if (this.options && this.options.resourceTag) {\n            query.params.tags = [this.options.resourceTag];\n        }\n        else if (!this.options || !this.options.hasOwnProperty('resourceTag')) {\n            query.params.tags = ['builder'];\n        }\n        const formio = new Formio_1.Formio(Formio_1.Formio.projectUrl);\n        const isResourcesDisabled = this.options.builder && this.options.builder.resource === false;\n        formio.loadProject().then((project) => {\n            if (project && (lodash_1.default.get(project, 'settings.addConfigToForms', false) || lodash_1.default.get(project, 'addConfigToForms', false))) {\n                const config = project.config || {};\n                this.options.formConfig = config;\n                const pathToFormConfig = 'webform._form.config';\n                const webformConfig = lodash_1.default.get(this, pathToFormConfig);\n                if (this.webform && !webformConfig) {\n                    lodash_1.default.set(this, pathToFormConfig, config);\n                }\n            }\n        }).catch((err) => {\n            console.warn(`Could not load project settings: ${err.message || err}`);\n        });\n        if (!formio.noProject && !isResourcesDisabled && formio.formsUrl) {\n            const resourceOptions = this.options.builder && this.options.builder.resource;\n            formio.loadForms(query)\n                .then((resources) => {\n                if (resources.length) {\n                    this.builder.resource = {\n                        title: resourceOptions ? resourceOptions.title : 'Existing Resource Fields',\n                        key: 'resource',\n                        weight: resourceOptions ? resourceOptions.weight : 50,\n                        subgroups: [],\n                        components: [],\n                        componentOrder: []\n                    };\n                    this.groups.resource = {\n                        title: resourceOptions ? resourceOptions.title : 'Existing Resource Fields',\n                        key: 'resource',\n                        weight: resourceOptions ? resourceOptions.weight : 50,\n                        subgroups: [],\n                        components: [],\n                        componentOrder: []\n                    };\n                    if (!this.groupOrder.includes('resource')) {\n                        this.groupOrder.push('resource');\n                    }\n                    this.addExistingResourceFields(resources);\n                }\n            });\n        }\n        // Notify components if they need to modify their render.\n        this.options.attachMode = 'builder';\n        this.webform = this.webform || this.createForm(this.options);\n        this.pathComponentsMapping = {};\n        this.arrayDataComponentPaths = [];\n        this.nestedDataComponents = [];\n        this.arrayDataComponents = [];\n    }\n    allowDrop() {\n        return true;\n    }\n    addExistingResourceFields(resources) {\n        lodash_1.default.each(resources, (resource, index) => {\n            const resourceKey = `resource-${resource.name}`;\n            const subgroup = {\n                key: resourceKey,\n                title: resource.title,\n                components: [],\n                componentOrder: [],\n                default: index === 0,\n            };\n            (0, utils_1.eachComponent)(resource.components, (component) => {\n                if (component.type === 'button')\n                    return;\n                if (this.options &&\n                    this.options.resourceFilter &&\n                    (!component.tags || component.tags.indexOf(this.options.resourceFilter) === -1))\n                    return;\n                let componentName = component.label;\n                if (!componentName && component.key) {\n                    componentName = lodash_1.default.upperFirst(component.key);\n                }\n                subgroup.componentOrder.push(`component-${component.key}`);\n                subgroup.components[`component-${component.key}`] = lodash_1.default.merge((0, utils_1.fastCloneDeep)(Components_1.default.components[component.type]\n                    ? Components_1.default.components[component.type].builderInfo\n                    : Components_1.default.components['unknown'].builderInfo), {\n                    key: component.key,\n                    title: componentName,\n                    group: 'resource',\n                    subgroup: resourceKey,\n                }, {\n                    schema: Object.assign(Object.assign({}, component), { label: component.label, key: component.key, lockKey: true, source: (!this.options.noSource ? resource._id : undefined), isNew: true })\n                });\n            }, true);\n            this.groups.resource.subgroups.push(subgroup);\n        });\n        this.triggerRedraw();\n    }\n    attachTooltip(component, title) {\n        return (0, tippy_js_1.default)(component, {\n            allowHTML: true,\n            trigger: 'mouseenter focus',\n            placement: 'top',\n            delay: [200, 0],\n            zIndex: 10000,\n            content: title\n        });\n    }\n    attachComponent(element, component) {\n        if (component instanceof WebformBuilder) {\n            return;\n        }\n        // Add component to element for later reference.\n        element.formioComponent = component;\n        component.loadRefs(element, {\n            removeComponent: 'single',\n            editComponent: 'single',\n            moveComponent: 'single',\n            copyComponent: 'single',\n            pasteComponent: 'single',\n            editJson: 'single'\n        });\n        if (component.refs.copyComponent) {\n            this.attachTooltip(component.refs.copyComponent, this.t('Copy'));\n            component.addEventListener(component.refs.copyComponent, 'click', () => this.copyComponent(component));\n        }\n        if (component.refs.pasteComponent) {\n            const pasteToolTip = this.attachTooltip(component.refs.pasteComponent, this.t('Paste below'));\n            component.addEventListener(component.refs.pasteComponent, 'click', () => {\n                pasteToolTip.hide();\n                this.pasteComponent(component);\n            });\n        }\n        if (component.refs.moveComponent) {\n            this.attachTooltip(component.refs.moveComponent, this.t('Move'));\n            if (this.keyboardActionsEnabled) {\n                component.addEventListener(component.refs.moveComponent, 'click', () => {\n                    this.moveComponent(component);\n                });\n            }\n        }\n        const parent = this.getParentElement(element);\n        if (component.refs.editComponent) {\n            this.attachTooltip(component.refs.editComponent, this.t('Edit'));\n            component.addEventListener(component.refs.editComponent, 'click', () => this.editComponent(component.schema, parent, false, false, component.component, { inDataGrid: component.isInDataGrid }));\n        }\n        if (component.refs.editJson) {\n            this.attachTooltip(component.refs.editJson, this.t('Edit JSON'));\n            component.addEventListener(component.refs.editJson, 'click', () => this.editComponent(component.schema, parent, false, true, component.component));\n        }\n        if (component.refs.removeComponent) {\n            this.attachTooltip(component.refs.removeComponent, this.t('Remove'));\n            component.addEventListener(component.refs.removeComponent, 'click', () => this.removeComponent(component.schema, parent, component.component, component));\n        }\n        return element;\n    }\n    createForm(options) {\n        this.webform = new Webform_1.default(this.element, options);\n        if (this.element) {\n            this.loadRefs(this.element, {\n                form: 'single'\n            });\n            if (this.refs.form) {\n                this.webform.element = this.refs.form;\n            }\n        }\n        return this.webform;\n    }\n    /**\n     * Called when everything is ready.\n     * @returns {Promise} - Wait for webform to be ready.\n     */\n    get ready() {\n        return this.webform.ready;\n    }\n    get defaultGroups() {\n        return {\n            basic: {\n                title: 'Basic',\n                weight: 0,\n                default: true,\n            },\n            advanced: {\n                title: 'Advanced',\n                weight: 10\n            },\n            layout: {\n                title: 'Layout',\n                weight: 20\n            },\n            data: {\n                title: 'Data',\n                weight: 30\n            },\n            premium: {\n                title: 'Premium',\n                weight: 40\n            }\n        };\n    }\n    redraw() {\n        return Webform_1.default.prototype.redraw.call(this);\n    }\n    get form() {\n        return this.webform.form;\n    }\n    get schema() {\n        return this.webform.schema;\n    }\n    set form(value) {\n        this.setForm(value);\n    }\n    get container() {\n        return this.webform.form.components;\n    }\n    /**\n     * When a component sets its api key, we need to check if it is unique within its namespace. Find the namespace root\n     * so we can calculate this correctly.\n     * @param {import('@formio/core').Component} component - The component to find the namespace root for.\n     * @returns {import('@formio/core').Component[]} - The components root for this namespace.\n     */\n    findNamespaceRoot(component) {\n        const path = (0, utils_1.getArrayFromComponentPath)(component.path);\n        // First get the component with nested parents.\n        let comp = this.webform.getComponent(path);\n        comp = Array.isArray(comp) ? comp[0] : comp;\n        const namespaceKey = this.recurseNamespace(comp);\n        // If there is no key, it is the root form.\n        if (!namespaceKey || this.form.key === namespaceKey) {\n            return this.form.components;\n        }\n        const componentSchema = component.component;\n        // If the current component is the namespace, we don't need to find it again.\n        if (namespaceKey === component.key) {\n            return [...componentSchema.components, componentSchema];\n        }\n        // Get the namespace component so we have the original object.\n        const namespaceComponent = (0, utils_1.getComponent)(this.form.components, namespaceKey, true);\n        return namespaceComponent ? namespaceComponent.components : comp.components;\n    }\n    recurseNamespace(component) {\n        // If there is no parent, we are at the root level.\n        if (!component) {\n            return null;\n        }\n        // Some components are their own namespace.\n        if (['address', 'container', 'datagrid', 'editgrid', 'dynamicWizard', 'tree'].includes(component.type) || component.tree || component.arrayTree) {\n            return component.key;\n        }\n        // Anything else, keep going up.\n        return this.recurseNamespace(component.parent);\n    }\n    render() {\n        return this.renderTemplate('builder', {\n            sidebar: this.renderTemplate('builderSidebar', {\n                scrollEnabled: this.sideBarScroll,\n                groupOrder: this.groupOrder,\n                groupId: `builder-sidebar-${this.id}`,\n                groups: this.groupOrder.map((groupKey) => this.renderTemplate('builderSidebarGroup', {\n                    group: this.groups[groupKey],\n                    groupKey,\n                    groupId: `builder-sidebar-${this.id}`,\n                    subgroups: this.groups[groupKey].subgroups.map((group) => this.renderTemplate('builderSidebarGroup', {\n                        group,\n                        groupKey: group.key,\n                        groupId: `group-container-${groupKey}`,\n                        subgroups: []\n                    })),\n                    keyboardActionsEnabled: this.keyboardActionsEnabled,\n                })),\n            }),\n            form: this.webform.render(),\n        });\n    }\n    attach(element) {\n        this.on('change', (form) => {\n            this.populateCaptchaSettings(form);\n            this.webform.setAlert(false);\n        });\n        return super.attach(element).then(() => {\n            this.loadRefs(element, {\n                form: 'single',\n                sidebar: 'single',\n                'sidebar-search': 'single',\n                'sidebar-groups': 'single',\n                'container': 'multiple',\n                'sidebar-anchor': 'multiple',\n                'sidebar-group': 'multiple',\n                'sidebar-container': 'multiple',\n                'sidebar-component': 'multiple',\n            });\n            if (this.sideBarScroll && Templates_1.default.current.handleBuilderSidebarScroll) {\n                Templates_1.default.current.handleBuilderSidebarScroll.call(this, this);\n            }\n            // Add the paste status in form\n            if (typeof window !== 'undefined' && window.sessionStorage) {\n                const data = window.sessionStorage.getItem('formio.clipboard');\n                if (data) {\n                    this.addClass(this.refs.form, 'builder-paste-mode');\n                }\n            }\n            if (!(0, utils_1.bootstrapVersion)(this.options)) {\n                const getAttribute = (anchor, attribute) => {\n                    let elem = anchor.getAttribute(`data-${attribute}`);\n                    if (!elem) {\n                        elem = anchor.getAttribute(`data-bs-${attribute}`);\n                    }\n                    return elem;\n                };\n                const hideShow = (group, show) => {\n                    if (show) {\n                        group.classList.add(['show']);\n                        group.style.display = 'inherit';\n                    }\n                    else {\n                        group.classList.remove(['show']);\n                        group.style.display = 'none';\n                    }\n                };\n                // Initialize\n                this.refs['sidebar-group'].forEach((group) => {\n                    hideShow(group, getAttribute(group, 'default') === 'true');\n                });\n                // Click event\n                this.refs['sidebar-anchor'].forEach((anchor, index) => {\n                    this.addEventListener(anchor, 'click', () => {\n                        const clickedParentId = getAttribute(anchor, 'parent').slice('#builder-sidebar-'.length);\n                        const clickedId = getAttribute(anchor, 'target').slice('#group-'.length);\n                        this.refs['sidebar-group'].forEach((group, groupIndex) => {\n                            const openByDefault = getAttribute(group, 'default') === 'true';\n                            const groupId = group.getAttribute('id').slice('group-'.length);\n                            const groupParent = getAttribute(group, 'parent').slice('#builder-sidebar-'.length);\n                            hideShow(group, ((openByDefault && groupParent === clickedId) || groupId === clickedParentId || groupIndex === index));\n                        });\n                    }, true);\n                });\n            }\n            if (this.keyboardActionsEnabled) {\n                this.refs['sidebar-component'].forEach((component) => {\n                    this.addEventListener(component, 'keydown', (event) => {\n                        if (event.keyCode === 13) {\n                            this.addNewComponent(component);\n                        }\n                    });\n                });\n            }\n            this.addEventListener(this.refs['sidebar-search'], 'input', lodash_1.default.debounce((e) => {\n                const searchString = e.target.value;\n                this.searchFields(searchString);\n            }, 300));\n            if (this.dragDropEnabled) {\n                this.initDragula();\n            }\n            const drake = this.dragula;\n            if (this.refs.form) {\n                (0, dom_autoscroller_1.default)([window], {\n                    margin: 20,\n                    maxSpeed: 6,\n                    scrollWhenOutside: true,\n                    autoScroll: function () {\n                        return this.down && (drake === null || drake === void 0 ? void 0 : drake.dragging);\n                    }\n                });\n                return this.webform.attach(this.refs.form);\n            }\n        });\n    }\n    searchFields(searchString = '') {\n        const searchValue = searchString.toLowerCase();\n        const sidebar = this.refs['sidebar'];\n        const sidebarGroups = this.refs['sidebar-groups'];\n        if (!sidebar || !sidebarGroups) {\n            return;\n        }\n        const filterGroupBy = (group, searchValue = '') => {\n            const result = lodash_1.default.toPlainObject(group);\n            const { subgroups = [], components } = result;\n            const filteredComponents = [];\n            for (const key in components) {\n                const isMatchedToTitle = this.t(components[key].title).toLowerCase().match(searchValue);\n                const isMatchedToKey = components[key].key.toLowerCase().match(searchValue);\n                if (isMatchedToTitle || isMatchedToKey) {\n                    filteredComponents.push(components[key]);\n                }\n            }\n            this.orderComponents(result, filteredComponents);\n            if (searchValue) {\n                result.default = true;\n            }\n            if (result.componentOrder.length || subgroups.length) {\n                return result;\n            }\n            return null;\n        };\n        const filterGroupOrder = (groupOrder, searchValue) => {\n            const result = lodash_1.default.cloneDeep(groupOrder);\n            return result.filter(key => filterGroupBy(this.groups[key], searchValue));\n        };\n        const filterSubgroups = (groups, searchValue) => {\n            const result = lodash_1.default.clone(groups);\n            return result\n                .map(subgroup => filterGroupBy(subgroup, searchValue))\n                .filter(subgroup => !lodash_1.default.isNull(subgroup));\n        };\n        const toTemplate = groupKey => {\n            return {\n                group: filterGroupBy(this.groups[groupKey], searchValue),\n                groupKey,\n                groupId: sidebar.id || sidebarGroups.id,\n                subgroups: filterSubgroups(this.groups[groupKey].subgroups, searchValue)\n                    .map((group) => this.renderTemplate('builderSidebarGroup', {\n                    group,\n                    groupKey: group.key,\n                    groupId: `group-container-${groupKey}`,\n                    subgroups: []\n                })),\n            };\n        };\n        sidebarGroups.innerHTML = filterGroupOrder(this.groupOrder, searchValue)\n            .map(groupKey => this.renderTemplate('builderSidebarGroup', toTemplate(groupKey)))\n            .join('');\n        this.loadRefs(this.element, {\n            'sidebar-groups': 'single',\n            'sidebar-anchor': 'multiple',\n            'sidebar-group': 'multiple',\n            'sidebar-container': 'multiple',\n        });\n        this.updateDragAndDrop();\n        if (searchValue === '') {\n            this.triggerRedraw();\n        }\n    }\n    orderComponents(groupInfo, foundComponents) {\n        const components = foundComponents || groupInfo.components;\n        const isResource = groupInfo.key.indexOf('resource-') === 0;\n        if (components) {\n            groupInfo.componentOrder = Object.keys(components)\n                .map(key => components[key])\n                .filter(component => component && !component.ignore && !component.ignoreForForm)\n                .sort((a, b) => a.weight - b.weight)\n                .map(component => isResource ? `component-${component.key}` : component.key);\n        }\n    }\n    updateDragAndDrop() {\n        if (this.dragDropEnabled) {\n            this.initDragula();\n        }\n        if (this.refs.form) {\n            return this.webform.attach(this.refs.form);\n        }\n    }\n    initDragula() {\n        const options = this.options;\n        if (this.dragula) {\n            this.dragula.destroy();\n        }\n        const containersArray = Array.prototype.slice.call(this.refs['sidebar-container']).filter(item => {\n            return item.id !== 'group-container-resource';\n        });\n        if (!dragula_1.default) {\n            return;\n        }\n        this.dragula = (0, dragula_1.default)(containersArray, {\n            moves(el) {\n                let moves = true;\n                const list = Array.from(el.classList).filter(item => item.indexOf('formio-component-') === 0);\n                list.forEach(item => {\n                    const key = item.slice('formio-component-'.length);\n                    if (options.disabled && options.disabled.includes(key)) {\n                        moves = false;\n                    }\n                });\n                if (el.classList.contains('no-drag')) {\n                    moves = false;\n                }\n                return moves;\n            },\n            copy(el) {\n                return el.classList.contains('drag-copy');\n            },\n            accepts(el, target) {\n                return !el.contains(target) && !target.classList.contains('no-drop');\n            }\n        }).on('drop', (element, target, source, sibling) => this.onDrop(element, target, source, sibling));\n    }\n    detach() {\n        if (this.dragula) {\n            this.dragula.destroy();\n        }\n        this.dragula = null;\n        if (this.sideBarScroll && Templates_1.default.current.clearBuilderSidebarScroll) {\n            Templates_1.default.current.clearBuilderSidebarScroll.call(this, this);\n        }\n        super.detach();\n    }\n    getComponentInfo(key, group) {\n        let info;\n        // Need to check in first order as resource component key can be the same as from webform default components\n        if (group && group.slice(0, group.indexOf('-')) === 'resource') {\n            // This is an existing resource field.\n            const resourceGroups = this.groups.resource.subgroups;\n            const resourceGroup = lodash_1.default.find(resourceGroups, { key: group });\n            if (resourceGroup && resourceGroup.components.hasOwnProperty(`component-${key}`)) {\n                info = (0, utils_1.fastCloneDeep)(resourceGroup.components[`component-${key}`].schema);\n            }\n        }\n        // This is a new component\n        else if (this.schemas.hasOwnProperty(key)) {\n            info = (0, utils_1.fastCloneDeep)(this.schemas[key]);\n        }\n        else if (this.groups.hasOwnProperty(group)) {\n            const groupComponents = this.groups[group].components;\n            if (groupComponents.hasOwnProperty(key)) {\n                info = (0, utils_1.fastCloneDeep)(groupComponents[key].schema);\n            }\n        }\n        else if (group === 'searchFields') { //Search components go into this group\n            const resourceGroups = this.groups.resource.subgroups;\n            for (let ix = 0; ix < resourceGroups.length; ix++) {\n                const resourceGroup = resourceGroups[ix];\n                if (resourceGroup.components.hasOwnProperty(`component-${key}`)) {\n                    info = (0, utils_1.fastCloneDeep)(resourceGroup.components[`component-${key}`].schema);\n                    break;\n                }\n            }\n        }\n        if (info) {\n            //if this is a custom component that was already assigned a key, don't stomp on it\n            if (!Components_1.default.components.hasOwnProperty(info.type) && info.key) {\n                return info;\n            }\n            info.key = this.generateKey(info);\n        }\n        return info;\n    }\n    getComponentsPath(component, parent) {\n        // Get path to the component in the parent component.\n        let path = 'components';\n        let columnIndex = 0;\n        let tableRowIndex = 0;\n        let tableColumnIndex = 0;\n        let tabIndex = 0;\n        switch (parent.type) {\n            case 'table':\n                tableRowIndex = lodash_1.default.findIndex(parent.rows, row => row.some(column => column.components.some(comp => comp.key === component.key)));\n                tableColumnIndex = lodash_1.default.findIndex(parent.rows[tableRowIndex], (column => column.components.some(comp => comp.key === component.key)));\n                path = `rows[${tableRowIndex}][${tableColumnIndex}].components`;\n                break;\n            case 'columns':\n                columnIndex = lodash_1.default.findIndex(parent.columns, column => column.components.some(comp => comp.key === component.key));\n                path = `columns[${columnIndex}].components`;\n                break;\n            case 'tabs':\n                tabIndex = lodash_1.default.findIndex(parent.components, tab => tab.components.some(comp => comp.key === component.key));\n                path = `components[${tabIndex}].components`;\n                break;\n        }\n        return path;\n    }\n    /* eslint-disable max-statements */\n    onDrop(element, target, source, sibling) {\n        var _a;\n        if (!target) {\n            return;\n        }\n        // If you try to drop within itself.\n        if (element.contains(target)) {\n            return;\n        }\n        const key = element.getAttribute('data-key');\n        const type = element.getAttribute('data-type');\n        const group = element.getAttribute('data-group');\n        let info, isNew, path, index;\n        if (key && group) {\n            // This is a new component.\n            info = this.getComponentInfo(key, group);\n            if (!info && type) {\n                info = this.getComponentInfo(type, group);\n            }\n            isNew = true;\n        }\n        else if (source.formioContainer) {\n            index = lodash_1.default.findIndex(source.formioContainer, { key: element.formioComponent.component.key });\n            if (index !== -1) {\n                // Grab and remove the component from the source container.\n                info = source.formioContainer.splice(lodash_1.default.findIndex(source.formioContainer, { key: element.formioComponent.component.key }), 1);\n                // Since splice returns an array of one object, we need to destructure it.\n                info = info[0];\n            }\n        }\n        // If we haven't found the component, stop.\n        if (!info) {\n            return;\n        }\n        // Show an error if siblings are disabled for a component and such a component already exists.\n        const compKey = (group === 'resource') ? `component-${key}` : key;\n        const draggableComponent = ((_a = this.groups[group]) === null || _a === void 0 ? void 0 : _a.components[compKey]) || {};\n        if (draggableComponent.disableSiblings) {\n            let isCompAlreadyExists = false;\n            (0, utils_1.eachComponent)(this.webform.components, (component) => {\n                if (component.type === draggableComponent.schema.type) {\n                    isCompAlreadyExists = true;\n                    return;\n                }\n            }, true);\n            if (isCompAlreadyExists) {\n                this.webform.redraw();\n                this.webform.setAlert('danger', `You cannot add more than one ${draggableComponent.key} component to one page.`);\n                return;\n            }\n        }\n        if (draggableComponent.uniqueComponent) {\n            let isCompAlreadyExists = false;\n            (0, utils_1.eachComponent)(this.webform.components, (component) => {\n                if (component.key === draggableComponent.schema.key) {\n                    isCompAlreadyExists = true;\n                    return;\n                }\n            }, true);\n            if (isCompAlreadyExists) {\n                this.webform.redraw();\n                this.webform.setAlert('danger', `You cannot add more than one ${draggableComponent.title} component to one page.`);\n                return;\n            }\n        }\n        if (target !== source) {\n            // Ensure the key remains unique in its new container.\n            builder_1.default.uniquify(this.findNamespaceRoot(target.formioComponent), info);\n        }\n        const parent = target.formioComponent;\n        // Insert in the new container.\n        if (target.formioContainer) {\n            if (sibling) {\n                if (!sibling.getAttribute('data-noattach')) {\n                    index = lodash_1.default.findIndex(target.formioContainer, { key: lodash_1.default.get(sibling, 'formioComponent.component.key') });\n                    index = (index === -1) ? 0 : index;\n                }\n                else {\n                    index = sibling.getAttribute('data-position');\n                }\n                if (index !== -1) {\n                    target.formioContainer.splice(index, 0, info);\n                }\n            }\n            else {\n                target.formioContainer.push(info);\n            }\n            path = this.getComponentsPath(info, parent.component);\n            index = lodash_1.default.findIndex(lodash_1.default.get(parent.schema, path), { key: info.key });\n            if (index === -1) {\n                index = 0;\n            }\n        }\n        if (parent && parent.addChildComponent) {\n            parent.addChildComponent(info, element, target, source, sibling);\n        }\n        const componentInDataGrid = parent.type === 'datagrid';\n        if (isNew\n            && !this.options.noNewEdit\n            && !info.noNewEdit\n            && this.hasEditTabs(info.type)\n            && !(this.options.design && info.type === 'reviewpage')) {\n            this.editComponent(info, target, isNew, null, null, { inDataGrid: componentInDataGrid });\n        }\n        // Only rebuild the parts needing to be rebuilt.\n        let rebuild;\n        if (target !== source) {\n            if (source.formioContainer && source.contains(target)) {\n                rebuild = source.formioComponent.rebuild();\n            }\n            else if (target.contains(source)) {\n                rebuild = target.formioComponent.rebuild();\n            }\n            else {\n                if (source.formioContainer) {\n                    rebuild = source.formioComponent.rebuild();\n                }\n                rebuild = target.formioComponent.rebuild();\n            }\n        }\n        else {\n            // If they are the same, only rebuild one.\n            rebuild = target.formioComponent.rebuild();\n        }\n        if (!rebuild) {\n            rebuild = Promise.resolve();\n        }\n        return rebuild.then(() => {\n            this.emit('addComponent', info, parent, path, index, isNew && !this.options.noNewEdit && !info.noNewEdit);\n            if (!isNew || this.options.noNewEdit || info.noNewEdit) {\n                this.emit('change', this.form);\n            }\n        });\n    }\n    setForm(form) {\n        var _a;\n        if (!form.components) {\n            form.components = [];\n        }\n        if (form && form.properties) {\n            this.options.properties = form.properties;\n        }\n        let keyboardActionsEnabled = lodash_1.default.get(this.options, 'keyboardBuilder', false) || ((_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.keyboardBuilder);\n        if (typeof keyboardActionsEnabled === 'string') {\n            keyboardActionsEnabled = keyboardActionsEnabled === 'true';\n        }\n        this.keyboardActionsEnabled = keyboardActionsEnabled;\n        const { display, noAddSubmitButton, noDefaultSubmitButton } = this.options;\n        const { _id, components } = form;\n        const isSubmitButton = ({ type, action }) => type === 'button' && (action === 'submit' || !action);\n        const hasSubmitButton = components.some(isSubmitButton);\n        // Add submit button if form display was switched from wizard\n        // Don't add if there is noAddSubmitButton flag passed, or the form has id, or the form has a submit button already\n        const shouldAddSubmitButton = (display === 'wizard' && !hasSubmitButton) ||\n            (!noAddSubmitButton && !_id && !hasSubmitButton);\n        // Ensure there is at least a submit button.\n        if (!noDefaultSubmitButton && shouldAddSubmitButton) {\n            form.components.push({\n                type: 'button',\n                label: 'Submit',\n                key: 'submit',\n                size: 'md',\n                block: false,\n                action: 'submit',\n                disableOnInvalid: true,\n                theme: 'primary'\n            });\n        }\n        if (this.webform) {\n            const shouldRebuild = !this.webform.form.components ||\n                (form.components.length !== this.webform.form.components.length);\n            return this.webform.setForm(form, { keepAsReference: true }).then(() => {\n                if (this.refs.form) {\n                    this.builderHeight = this.refs.form.offsetHeight;\n                }\n                if (!shouldRebuild) {\n                    return this.form;\n                }\n                return this.rebuild().then(() => this.form);\n            });\n        }\n        return Promise.resolve(form);\n    }\n    populateCaptchaSettings(form) {\n        //populate isEnabled for captcha form settings\n        let isCaptchaEnabled = false;\n        if (this.form.components) {\n            (0, utils_1.eachComponent)(form.components, component => {\n                if (isCaptchaEnabled) {\n                    return;\n                }\n                if (component.type === 'captcha') {\n                    isCaptchaEnabled = true;\n                    return false;\n                }\n            });\n            if (isCaptchaEnabled) {\n                lodash_1.default.set(form, 'settings.captcha.isEnabled', true);\n            }\n            else if (lodash_1.default.get(form, 'settings.captcha.isEnabled')) {\n                lodash_1.default.set(form, 'settings.captcha.isEnabled', false);\n            }\n        }\n    }\n    removeComponent(component, parent, original, componentInstance) {\n        if (!parent) {\n            return;\n        }\n        let remove = true;\n        const removingComponentsGroup = !component.skipRemoveConfirm &&\n            ((Array.isArray(component.components) && component.components.length) ||\n                (Array.isArray(component.rows) && component.rows.length) ||\n                (Array.isArray(component.columns) && component.columns.length));\n        if (this.options.alwaysConfirmComponentRemoval || removingComponentsGroup) {\n            const message = removingComponentsGroup ? 'Removing this component will also remove all of its children. Are you sure you want to do this?'\n                : 'Are you sure you want to remove this component?';\n            remove = window.confirm(this.t(message));\n        }\n        if (!original) {\n            original = parent.formioContainer.find((comp) => comp.id === component.id);\n        }\n        const index = parent.formioContainer ? parent.formioContainer.indexOf(original) : 0;\n        if (remove && index !== -1) {\n            const path = this.getComponentsPath(component, parent.formioComponent.component);\n            if (parent.formioContainer) {\n                parent.formioContainer.splice(index, 1);\n            }\n            else if (parent.formioComponent && parent.formioComponent.removeChildComponent) {\n                parent.formioComponent.removeChildComponent(component);\n            }\n            if (component.input && componentInstance && parent.formioComponent) {\n                const parentDefaultValue = lodash_1.default.get(parent.formioComponent, 'component.defaultValue', null);\n                if (Array.isArray(parentDefaultValue)) {\n                    parentDefaultValue.forEach(v => lodash_1.default.unset(v, componentInstance.key));\n                }\n                else if (typeof parentDefaultValue === 'object') {\n                    lodash_1.default.unset(parentDefaultValue, componentInstance.key);\n                }\n            }\n            const rebuild = parent.formioComponent.rebuild() || Promise.resolve();\n            rebuild.then(() => {\n                this.emit('removeComponent', component, parent.formioComponent.schema, path, index);\n                this.emit('change', this.form);\n            });\n        }\n        return remove;\n    }\n    replaceDoubleQuotes(data, fieldsToRemoveDoubleQuotes = []) {\n        if (data) {\n            fieldsToRemoveDoubleQuotes.forEach((key) => {\n                if (data[key]) {\n                    data[key] = data[key].replace(/\"/g, \"'\");\n                }\n            });\n            return data;\n        }\n    }\n    updateComponent(component, changed) {\n        const sanitizeConfig = lodash_1.default.get(this.webform, 'form.settings.sanitizeConfig') || lodash_1.default.get(this.webform, 'form.globalSettings.sanitizeConfig');\n        // Update the preview.\n        if (this.preview) {\n            this.preview.form = {\n                components: [lodash_1.default.omit(Object.assign({}, component), [\n                        'hidden',\n                        'conditional',\n                        'calculateValue',\n                        'logic',\n                        'autofocus',\n                        'customConditional',\n                    ])],\n                config: this.options.formConfig || {},\n                sanitizeConfig,\n            };\n            const fieldsToRemoveDoubleQuotes = ['label', 'tooltip'];\n            this.preview.form.components.forEach(component => this.replaceDoubleQuotes(component, fieldsToRemoveDoubleQuotes));\n            const previewElement = this.componentEdit.querySelector(`[${this._referenceAttributeName}=\"preview\"]`);\n            if (previewElement) {\n                this.setContent(previewElement, this.preview.render(), null, sanitizeConfig);\n                this.preview.attach(previewElement);\n            }\n        }\n        // Change the \"default value\" field to be reflective of this component.\n        const defaultValueComponent = (0, utils_1.getComponent)(this.editForm.components, 'defaultValue', true);\n        if (defaultValueComponent && component.type !== 'hidden') {\n            const defaultChanged = changed && ((changed.component && changed.component.key === 'defaultValue')\n                || (changed.instance && defaultValueComponent.hasComponent && defaultValueComponent.hasComponent(changed.instance)));\n            if (!defaultChanged) {\n                lodash_1.default.assign(defaultValueComponent.component, lodash_1.default.omit(Object.assign({}, component), [\n                    'key',\n                    'label',\n                    'labelPosition',\n                    'labelMargin',\n                    'labelWidth',\n                    'placeholder',\n                    'tooltip',\n                    'hidden',\n                    'autofocus',\n                    'validate',\n                    'disabled',\n                    'defaultValue',\n                    'customDefaultValue',\n                    'calculateValue',\n                    'conditional',\n                    'customConditional',\n                    'id',\n                    'logic',\n                    'fields.day.required',\n                    'fields.month.required',\n                    'fields.year.required',\n                ]));\n                if (defaultValueComponent.component.components) {\n                    if (!this.originalDefaultValue) {\n                        this.originalDefaultValue = (0, utils_1.fastCloneDeep)(defaultValueComponent.component);\n                    }\n                    (0, utils_1.eachComponent)(defaultValueComponent.component.components, (comp => {\n                        var _a;\n                        if ((_a = comp.validate) === null || _a === void 0 ? void 0 : _a.required) {\n                            comp.validate.required = false;\n                        }\n                    }));\n                }\n                const parentComponent = defaultValueComponent.parent;\n                let tabIndex = -1;\n                let index = -1;\n                parentComponent.tabs.some((tab, tIndex) => {\n                    tab.some((comp, compIndex) => {\n                        if (comp.id === defaultValueComponent.id) {\n                            tabIndex = tIndex;\n                            index = compIndex;\n                            return true;\n                        }\n                        return false;\n                    });\n                });\n                if (tabIndex !== -1 && index !== -1 && changed && !lodash_1.default.isNil(changed.value)) {\n                    const sibling = parentComponent.tabs[tabIndex][index + 1];\n                    parentComponent.removeComponent(defaultValueComponent);\n                    const newComp = parentComponent.addComponent(defaultValueComponent.component, defaultValueComponent.data, sibling);\n                    lodash_1.default.pull(newComp.validators, 'required');\n                    parentComponent.tabs[tabIndex].splice(index, 1, newComp);\n                    newComp.processOwnValidation = true;\n                    newComp.build(defaultValueComponent.element);\n                    if (this.preview && !this.preview.defaultChanged) {\n                        const defaultValue = lodash_1.default.get(this.preview._data, this.editForm._data.key);\n                        if (lodash_1.default.isObject(defaultValue) && !lodash_1.default.isArray(defaultValue)) {\n                            this.editForm._data.defaultValue = defaultValue;\n                        }\n                    }\n                }\n            }\n            else {\n                let dataPath = changed.instance._data.key;\n                const path = (0, utils_1.getArrayFromComponentPath)(changed.instance.path);\n                path.shift();\n                if (path.length) {\n                    path.unshift(component.key);\n                    dataPath = (0, utils_1.getStringFromComponentPath)(path);\n                }\n                this.preview.defaultChanged = true;\n                lodash_1.default.set(this.preview._data, dataPath, changed.value);\n                lodash_1.default.set(this.webform._data, dataPath, changed.value);\n            }\n        }\n        // Called when we update a component.\n        this.emit('updateComponent', component);\n    }\n    findComponentsWithRepeatablePaths() {\n        const repeatablePaths = {};\n        const keys = new Map();\n        (0, utils_1.eachComponent)(this.form.components, (comp, path, components, parent, paths) => {\n            var _a, _b;\n            const isRadioCheckbox = comp.type === 'checkbox' && comp.inputType === 'radio';\n            const isLayout = (0, utils_1.componentInfo)(comp).layout;\n            if (!isLayout) {\n                if (keys.has(paths.dataPath)) {\n                    const onlyRadioCheckboxes = ((_a = repeatablePaths[paths.dataPath]) === null || _a === void 0 ? void 0 : _a.onlyRadioCheckboxes) === false ? false : isRadioCheckbox;\n                    repeatablePaths[paths.dataPath] = {\n                        comps: [...(((_b = repeatablePaths[paths.dataPath]) === null || _b === void 0 ? void 0 : _b.comps) || []), keys.get(paths.dataPath), comp],\n                        onlyRadioCheckboxes,\n                    };\n                }\n                else {\n                    keys.set(paths.dataPath, comp);\n                }\n            }\n        }, true);\n        const componentsWithRepeatablePaths = [];\n        Object.keys(repeatablePaths).forEach((path) => {\n            const { comps, onlyRadioCheckboxes } = repeatablePaths[path];\n            if (!onlyRadioCheckboxes) {\n                componentsWithRepeatablePaths.push(...comps);\n            }\n        });\n        return componentsWithRepeatablePaths;\n    }\n    highlightInvalidComponents() {\n        const repeatablePathsComps = this.findComponentsWithRepeatablePaths();\n        let hasInvalidComponents = false;\n        this.webform.everyComponent((comp) => {\n            if (repeatablePathsComps.includes(comp.component)) {\n                comp.setCustomValidity(this.t('apiKey', { key: comp.key }));\n                hasInvalidComponents = true;\n            }\n            else {\n                comp.setCustomValidity();\n            }\n        });\n        this.emit('builderFormValidityChange', hasInvalidComponents);\n    }\n    /**\n     * Called when a new component is saved.\n     * @param {Component} component - The component instance to save.\n     * @param {Component} parent - The parent component.\n     * @param {boolean} isNew - If this is a new component.\n     * @param {Component} original - The original component.\n     * @returns {boolean} - If the component was saved.\n     */\n    saveComponent(component, parent, isNew, original) {\n        this.editForm.detach();\n        const parentContainer = parent ? parent.formioContainer : this.container;\n        const parentComponent = parent ? parent.formioComponent : this;\n        this.dialog.close();\n        const path = parentContainer ? this.getComponentsPath(component, parentComponent.component) : '';\n        if (!original) {\n            original = parent.formioContainer.find((comp) => comp.id === component.id);\n        }\n        const index = parentContainer ? parentContainer.indexOf(original) : 0;\n        if (index !== -1) {\n            let submissionData = this.editForm.submission.data;\n            submissionData = submissionData.componentJson || submissionData;\n            if (submissionData.components && this.originalDefaultValue) {\n                submissionData.components = this.originalDefaultValue.components;\n                this.originalDefaultValue = null;\n            }\n            const fieldsToRemoveDoubleQuotes = ['label', 'tooltip'];\n            this.replaceDoubleQuotes(submissionData, fieldsToRemoveDoubleQuotes);\n            this.hook('beforeSaveComponentSettings', submissionData);\n            let comp = null;\n            parentComponent.getComponents().forEach((component) => {\n                if (component.component.key === original.key) {\n                    comp = component;\n                }\n            });\n            const originalComp = comp === null || comp === void 0 ? void 0 : comp.component;\n            const originalComponentSchema = comp === null || comp === void 0 ? void 0 : comp.schema;\n            const isParentSaveChildMethod = this.isParentSaveChildMethod(parent.formioComponent);\n            if (parentContainer && !isParentSaveChildMethod) {\n                parentContainer[index] = submissionData;\n                if (comp) {\n                    comp.component = submissionData;\n                }\n            }\n            else if (isParentSaveChildMethod) {\n                parent.formioComponent.saveChildComponent(submissionData);\n            }\n            const rebuild = parentComponent.rebuild() || Promise.resolve();\n            return rebuild.then(() => {\n                parentComponent.resetValue();\n                const schema = parentContainer ? parentContainer[index] : (comp ? comp.schema : []);\n                this.emitSaveComponentEvent(schema, originalComp, parentComponent.schema, path, index, isNew, originalComponentSchema);\n                this.emit('change', this.form);\n                this.highlightInvalidComponents();\n                if (this.isComponentCreated) {\n                    const component = parent.formioComponent.components[0];\n                    this.moveComponent(component);\n                    this.isComponentCreated = false;\n                }\n            });\n        }\n        this.highlightInvalidComponents();\n        return Promise.resolve();\n    }\n    emitSaveComponentEvent(schema, originalComp, parentComponentSchema, path, index, isNew, originalComponentSchema) {\n        this.emit('saveComponent', schema, originalComp, parentComponentSchema, path, index, isNew, originalComponentSchema);\n    }\n    attachEditComponentControls(component, parent, isNew, original, ComponentClass) {\n        const cancelButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}=\"cancelButton\"]`);\n        cancelButtons.forEach((cancelButton) => {\n            this.editForm.addEventListener(cancelButton, 'click', (event) => {\n                event.preventDefault();\n                this.editForm.detach();\n                this.emit('cancelComponent', component);\n                this.dialog.close();\n                this.highlightInvalidComponents();\n            });\n        });\n        const removeButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}=\"removeButton\"]`);\n        removeButtons.forEach((removeButton) => {\n            this.editForm.addEventListener(removeButton, 'click', (event) => {\n                event.preventDefault();\n                // Since we are already removing the component, don't trigger another remove.\n                this.saved = true;\n                this.editForm.detach();\n                this.removeComponent(component, parent, original);\n                this.dialog.close();\n                this.highlightInvalidComponents();\n            });\n        });\n        const saveButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}=\"saveButton\"]`);\n        saveButtons.forEach((saveButton) => {\n            this.editForm.addEventListener(saveButton, 'click', (event) => {\n                event.preventDefault();\n                const errors = this.editForm.validate(this.editForm.data, {\n                    dirty: true\n                });\n                if (errors.length) {\n                    this.editForm.setPristine(false);\n                    this.editForm.showErrors(errors);\n                    return false;\n                }\n                this.saved = true;\n                this.saveComponent(component, parent, isNew, original);\n            });\n        });\n        const previewButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}=\"previewButton\"]`);\n        previewButtons.forEach((previewButton) => {\n            this.editForm.addEventListener(previewButton, 'click', (event) => {\n                var _a;\n                event.preventDefault();\n                this.showPreview = !this.showPreview;\n                this.editForm.detach();\n                this.setContent(this.componentEdit, this.renderTemplate('builderEditForm', {\n                    componentInfo: ComponentClass.builderInfo,\n                    editForm: this.editForm.render(),\n                    preview: this.preview ? this.preview.render() : false,\n                    showPreview: this.showPreview,\n                    helplinks: this.helplinks,\n                }));\n                this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}=\"editForm\"]`));\n                const editFormData = (_a = this.editForm.submission) === null || _a === void 0 ? void 0 : _a.data;\n                this.updateComponent((editFormData === null || editFormData === void 0 ? void 0 : editFormData.componentJson) || editFormData || component);\n                this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);\n            });\n        });\n    }\n    editComponent(component, parent, isNew, isJsonEdit, original, flags = {}) {\n        var _a, _b;\n        if (!component.key) {\n            return;\n        }\n        this.saved = false;\n        const componentCopy = (0, utils_1.fastCloneDeep)(component);\n        let ComponentClass = Components_1.default.components[componentCopy.type];\n        const isCustom = ComponentClass === undefined;\n        isJsonEdit = isJsonEdit || isCustom;\n        ComponentClass = isCustom ? Components_1.default.components.unknown : ComponentClass;\n        // Make sure we only have one dialog open at a time.\n        if (this.dialog) {\n            this.dialog.close();\n            this.highlightInvalidComponents();\n        }\n        // This is the render step.\n        const editFormOptions = lodash_1.default.clone(lodash_1.default.get(this, 'options.editForm', {}));\n        if (this.editForm) {\n            this.editForm.destroy();\n        }\n        // Allow editForm overrides per component.\n        const overrides = lodash_1.default.get(this.options, `editForm.${componentCopy.type}`, {});\n        // Pass along the form being edited.\n        editFormOptions.editForm = this.form;\n        editFormOptions.editComponent = component;\n        editFormOptions.flags = flags;\n        this.hook('editComponentParentInstance', editFormOptions, parent);\n        this.editForm = new Webform_1.default(Object.assign(Object.assign(Object.assign(Object.assign({}, lodash_1.default.omit(this.options, ['hooks', 'builder', 'events', 'attachMode', 'skipInit'])), { language: this.options.language }), editFormOptions), { evalContext: Object.assign(Object.assign({}, ((editFormOptions === null || editFormOptions === void 0 ? void 0 : editFormOptions.evalContext) || ((_a = this.options) === null || _a === void 0 ? void 0 : _a.evalContext) || {})), { buildingForm: this.form }) }));\n        this.hook('editFormProperties', parent);\n        this.editForm.form = (isJsonEdit && !isCustom) ? {\n            components: [\n                {\n                    type: 'textarea',\n                    as: 'json',\n                    editor: 'ace',\n                    weight: 10,\n                    input: true,\n                    key: 'componentJson',\n                    label: 'Component JSON',\n                    tooltip: 'Edit the JSON for this component.'\n                },\n                {\n                    type: 'checkbox',\n                    key: 'showFullSchema',\n                    label: 'Full Schema'\n                }\n            ]\n        } : ComponentClass.editForm(lodash_1.default.cloneDeep(overrides));\n        const instanceOptions = {\n            inFormBuilder: true,\n        };\n        this.hook('instanceOptionsPreview', instanceOptions);\n        const instance = new ComponentClass(componentCopy, instanceOptions);\n        const schema = this.hook('builderComponentSchema', component, instance);\n        this.editForm.submission = isJsonEdit ? {\n            data: {\n                componentJson: schema,\n                showFullSchema: this.options.showFullJsonSchema\n            },\n        } : {\n            data: instance.component,\n        };\n        if (this.preview) {\n            this.preview.destroy();\n        }\n        if (!ComponentClass.builderInfo.hasOwnProperty('preview') || ComponentClass.builderInfo.preview) {\n            this.preview = new Webform_1.default(lodash_1.default.omit(Object.assign(Object.assign({}, this.options), { preview: true }), [\n                'hooks',\n                'builder',\n                'events',\n                'attachMode',\n                'calculateValue'\n            ]));\n            this.hook('previewFormSettitngs', schema, isJsonEdit);\n        }\n        this.showPreview = (_b = ComponentClass.builderInfo.showPreview) !== null && _b !== void 0 ? _b : true;\n        this.componentEdit = this.ce('div', { 'class': 'component-edit-container' });\n        this.setContent(this.componentEdit, this.renderTemplate('builderEditForm', {\n            componentInfo: ComponentClass.builderInfo,\n            editForm: this.editForm.render(),\n            preview: this.preview ? this.preview.render() : false,\n            showPreview: this.showPreview,\n            helplinks: this.helplinks\n        }));\n        this.dialog = this.createModal(this.componentEdit, lodash_1.default.get(this.options, 'dialogAttr', {}));\n        // This is the attach step.\n        this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}=\"editForm\"]`));\n        this.hook('editFormWrapper');\n        this.updateComponent(componentCopy);\n        this.editForm.on('change', (event) => {\n            if (event.changed) {\n                if (event.changed.component && event.changed.component.key === 'showFullSchema') {\n                    const { value } = event.changed;\n                    this.editForm.submission = {\n                        data: {\n                            componentJson: value ? instance.component : component,\n                            showFullSchema: value\n                        },\n                    };\n                    return;\n                }\n                // See if this is a manually modified key. Treat custom component keys as manually modified\n                if ((event.changed.component && (event.changed.component.key === 'key')) || isJsonEdit) {\n                    componentCopy.keyModified = true;\n                }\n                let isComponentLabelChanged = false;\n                if (event.changed.instance) {\n                    isComponentLabelChanged = ['label', 'title'].includes(event.changed.instance.path);\n                }\n                else if (event.changed.component) {\n                    isComponentLabelChanged = ['label', 'title'].includes(event.changed.component.key);\n                }\n                if (isComponentLabelChanged) {\n                    // Ensure this component has a key.\n                    if (isNew) {\n                        if (!event.data.keyModified) {\n                            this.editForm.everyComponent(component => {\n                                if (component.key === 'key' && component.parent.component.key === 'tabs') {\n                                    component.setValue(this.updateComponentKey(event.data));\n                                    return false;\n                                }\n                            });\n                        }\n                        if (this.form) {\n                            let formComponents = this.findNamespaceRoot(parent.formioComponent);\n                            // excluding component which key uniqueness is to be checked to prevent the comparing of the same keys\n                            formComponents = formComponents.filter(comp => editFormOptions.editComponent.id !== comp.id);\n                            // Set a unique key for this component.\n                            builder_1.default.uniquify(formComponents, event.data);\n                        }\n                    }\n                }\n                // If the edit form has any nested form inside, we get a partial data (nested form's data) in the\n                // event.data property\n                let editFormData;\n                if (event.changed.instance && event.changed.instance.root && event.changed.instance.root.id !== this.editForm.id) {\n                    editFormData = this.editForm.data;\n                }\n                // Update the component.\n                this.updateComponent(event.data.componentJson || editFormData || event.data, event.changed);\n            }\n        });\n        this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);\n        const dialogClose = () => {\n            this.editForm.destroy(true);\n            if (this.preview) {\n                this.preview.destroy(true);\n                this.preview = null;\n            }\n            if (isNew && !this.saved) {\n                this.removeComponent(component, parent, original);\n                this.highlightInvalidComponents();\n            }\n            // Clean up.\n            this.removeEventListener(this.dialog, 'close', dialogClose);\n            this.dialog = null;\n        };\n        this.addEventListener(this.dialog, 'close', dialogClose);\n        // Called when we edit a component.\n        this.emit('editComponent', component);\n    }\n    updateComponentKey(data) {\n        return lodash_1.default.camelCase(data.title ||\n            data.label ||\n            data.placeholder ||\n            data.type).replace(/^[0-9]*/, '');\n    }\n    moveComponent(component) {\n        var _a;\n        if (this.selectedComponent) {\n            const prevSelected = this.selectedComponent;\n            (_a = prevSelected.element) === null || _a === void 0 ? void 0 : _a.classList.remove('builder-component-selected');\n            this.removeEventListener(document, 'keydown');\n        }\n        component.element.focus();\n        component.element.classList.add('builder-component-selected');\n        this.selectedComponent = component;\n        this.addEventListener(document, 'keydown', this.moveHandler.bind(this));\n    }\n    updateComponentPlacement(direction) {\n        const component = this.selectedComponent;\n        let index, info;\n        const step = direction ? -1 : 1;\n        if (component) {\n            const element = component.element;\n            const sibling = direction ? element.previousElementSibling : element.nextElementSibling;\n            const source = element.parentNode;\n            const containerLength = source.formioContainer.length;\n            if (containerLength && containerLength <= 1) {\n                return;\n            }\n            if (source.formioContainer) {\n                index = lodash_1.default.findIndex(source.formioContainer, { key: element.formioComponent.component.key });\n                if (index !== -1) {\n                    info = source.formioContainer.splice(lodash_1.default.findIndex(source.formioContainer, { key: element.formioComponent.component.key }), 1);\n                    info = info[0];\n                    source.removeChild(element);\n                }\n            }\n            const len = source.formioComponent.components.length;\n            index = (index === -1) ? 0 : index + step;\n            if (index === -1) {\n                source.formioContainer.push(info);\n                source.appendChild(element);\n            }\n            else if (index === len) {\n                const key = source.formioContainer[0].key;\n                index = lodash_1.default.findIndex(source.formioComponent.components, { key: key });\n                const firstElement = source.formioComponent.components[index].element;\n                source.formioContainer.splice(0, 0, info);\n                source.insertBefore(element, firstElement);\n            }\n            else if (index !== -1) {\n                source.formioContainer.splice(index, 0, info);\n                direction\n                    ? source.insertBefore(element, sibling)\n                    : source.insertBefore(element, sibling.nextElementSibling);\n            }\n            element.focus();\n        }\n    }\n    stopMoving(comp) {\n        const parent = comp.element.parentNode;\n        this.removeEventListener(document, 'keydown');\n        parent.formioComponent.rebuild();\n        this.selectedComponent = null;\n    }\n    addNewComponent(element) {\n        var _a;\n        const source = document.querySelector('.formio-builder-form');\n        const key = element.getAttribute('data-key');\n        const group = element.getAttribute('data-group');\n        const isNew = true;\n        let info;\n        if (key && group) {\n            info = this.getComponentInfo(key, group);\n        }\n        if (isNew && !this.options.noNewEdit && !info.noNewEdit) {\n            builder_1.default.uniquify(this.findNamespaceRoot(source.formioComponent), info);\n            this.editComponent(info, source, isNew, null, null);\n        }\n        const firstComponent = (_a = source.formioComponent.components[0]) === null || _a === void 0 ? void 0 : _a.element;\n        if (firstComponent) {\n            source.formioContainer.splice(0, 0, info);\n        }\n        else {\n            source.formioContainer.push(info);\n        }\n        source.formioComponent.rebuild().then(() => {\n            this.isComponentCreated = true;\n        });\n    }\n    /**\n     * Creates copy of component schema and stores it under sessionStorage.\n     * @param {Component} component - The component to copy.\n     * @returns {void}\n     */\n    copyComponent(component) {\n        if (!window.sessionStorage) {\n            return console.warn('Session storage is not supported in this browser.');\n        }\n        this.addClass(this.refs.form, 'builder-paste-mode');\n        window.sessionStorage.setItem('formio.clipboard', JSON.stringify(component.schema));\n    }\n    /**\n     * Paste copied component after the current component.\n     * @param {Component} component - The component to paste after.\n     * @returns {void}\n     */\n    pasteComponent(component) {\n        if (!window.sessionStorage) {\n            return console.warn('Session storage is not supported in this browser.');\n        }\n        this.removeClass(this.refs.form, 'builder-paste-mode');\n        if (window.sessionStorage) {\n            const data = window.sessionStorage.getItem('formio.clipboard');\n            if (data) {\n                const schema = JSON.parse(data);\n                const parent = this.getParentElement(component.element);\n                if (parent) {\n                    builder_1.default.uniquify(this.findNamespaceRoot(parent.formioComponent), schema);\n                    let path = '';\n                    let index = 0;\n                    const isParentSaveChildMethod = this.isParentSaveChildMethod(parent.formioComponent);\n                    if (parent.formioContainer && !isParentSaveChildMethod) {\n                        index = parent.formioContainer.indexOf(component.component);\n                        path = this.getComponentsPath(schema, parent.formioComponent.component);\n                        parent.formioContainer.splice(index + 1, 0, schema);\n                    }\n                    else if (isParentSaveChildMethod) {\n                        parent.formioComponent.saveChildComponent(schema, false);\n                    }\n                    parent.formioComponent.rebuild();\n                    this.emitSaveComponentEvent(schema, schema, parent.formioComponent.component, path, (index + 1), true, schema);\n                }\n                this.emit('change', this.form);\n            }\n        }\n    }\n    isParentSaveChildMethod(parentComp) {\n        return !!(parentComp && parentComp.saveChildComponent);\n    }\n    getParentElement(element) {\n        let container = element;\n        do {\n            container = container.parentNode;\n        } while (container && !container.formioComponent);\n        return container;\n    }\n    addBuilderComponentInfo(component) {\n        if (!component || !component.group || !this.groups[component.group]) {\n            return;\n        }\n        component = lodash_1.default.clone(component);\n        const groupInfo = this.groups[component.group];\n        if (!groupInfo.components.hasOwnProperty(component.key)) {\n            groupInfo.components[component.key] = component;\n        }\n        return component;\n    }\n    init() {\n        if (this.webform) {\n            this.webform.init();\n        }\n        return super.init();\n    }\n    clear() {\n        if (this.webform.initialized) {\n            this.webform.clear();\n        }\n    }\n    destroy(all = false) {\n        if (this.webform.initialized) {\n            this.webform.destroy(all);\n        }\n        super.destroy(all);\n    }\n    addBuilderGroup(name, group) {\n        if (!this.groups[name]) {\n            this.groups[name] = group;\n            this.groupOrder.push(name);\n            this.triggerRedraw();\n        }\n        else {\n            this.updateBuilderGroup(name, group);\n        }\n    }\n    updateBuilderGroup(name, group) {\n        if (this.groups[name]) {\n            this.groups[name] = group;\n            this.triggerRedraw();\n        }\n    }\n    generateKey(info) {\n        return info.key || lodash_1.default.camelCase(info.title ||\n            info.label ||\n            info.placeholder ||\n            info.type);\n    }\n    hasEditTabs(type) {\n        // If the component type does not exist then it has no edit tabs\n        if (!Components_1.default.components[type === 'custom' ? 'unknown' : type]) {\n            return false;\n        }\n        const editTabs = (0, utils_1.getComponent)(Components_1.default.components[type === 'custom' ? 'unknown' : type].editForm().components, 'tabs', true).components;\n        const hiddenEditTabs = lodash_1.default.filter(lodash_1.default.get(this.options, `editForm.${type}`, []), 'ignore');\n        return lodash_1.default.intersectionBy(editTabs, hiddenEditTabs, 'key').length !== editTabs.length;\n    }\n}\nexports[\"default\"] = WebformBuilder;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/WebformBuilder.js?");
 
 /***/ }),
 
@@ -5402,7 +5402,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __webpack_require__(/*! ./utils */ \"./lib/cjs/utils/index.js\");\nclass Wizard extends Webform_1.default {\n    /**\n     * Constructor for wizard-based forms.\n     * @param {HTMLElement | object | import('Form').FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.\n     * @param {import('Form').FormOptions} [_options] - The options to create a new form instance.\n     *    - breadcrumbSettings.clickable: true (default) - determines if the breadcrumb bar is clickable.\n     *    - buttonSettings.show*(Previous, Next, Cancel): true (default) - determines if the button is shown.\n     *    - allowPrevious: false (default) - determines if the breadcrumb bar is clickable for visited tabs.\n     */\n    constructor(elementOrOptions = undefined, _options = undefined) {\n        let element, options;\n        if (elementOrOptions instanceof HTMLElement || _options) {\n            element = elementOrOptions;\n            options = _options || {};\n        }\n        else {\n            options = elementOrOptions || {};\n        }\n        options.display = 'wizard';\n        super(element, options);\n        this.pages = [];\n        this.prefixComps = [];\n        this.suffixComps = [];\n        this.components = [];\n        this.originalComponents = [];\n        this.page = 0;\n        this.currentPanel = null;\n        this.currentNextPage = 0;\n        this._seenPages = [0];\n        this.subWizards = [];\n        this.allPages = [];\n        this.lastPromise = Promise.resolve();\n        this.enabledIndex = 0;\n        this.editMode = false;\n        this.originalOptions = lodash_1.default.cloneDeep(this.options);\n    }\n    isLastPage() {\n        const next = this.getNextPage();\n        if (lodash_1.default.isNumber(next)) {\n            return next === -1;\n        }\n        return lodash_1.default.isNull(next);\n    }\n    getPages(args = {}) {\n        const { all = false } = args;\n        const pages = this.hasSubWizards ? this.components : this.pages;\n        const filteredPages = pages\n            .filter(all ? lodash_1.default.identity : (p, index) => this._seenPages.includes(index));\n        return filteredPages;\n    }\n    get hasSubWizards() {\n        return !lodash_1.default.isEmpty(this.subWizards);\n    }\n    get data() {\n        return super.data;\n    }\n    get localData() {\n        var _a, _b;\n        return ((_b = (_a = this.pages[this.page]) === null || _a === void 0 ? void 0 : _a.root) === null || _b === void 0 ? void 0 : _b.submission.data) || this.submission.data;\n    }\n    checkConditions(data, flags, row) {\n        const visible = super.checkConditions(data, flags, row);\n        this.establishPages(data);\n        return visible;\n    }\n    set data(value) {\n        this._data = value;\n        lodash_1.default.each(this.getPages({ all: true }), (component) => {\n            component.data = this.componentContext(component);\n        });\n    }\n    getComponents() {\n        return this.submitting\n            ? this.getPages({ all: this.isLastPage() })\n            : super.getComponents();\n    }\n    resetValue() {\n        this.getPages({ all: true }).forEach((page) => page.resetValue());\n        this.setPristine(true);\n    }\n    init() {\n        var _a;\n        // Check for and initlize button settings object\n        this.options.buttonSettings = lodash_1.default.defaults(this.options.buttonSettings, {\n            showPrevious: true,\n            showNext: true,\n            showSubmit: true,\n            showCancel: !this.options.readOnly\n        });\n        this.options.breadcrumbSettings = lodash_1.default.defaults(this.options.breadcrumbSettings, {\n            clickable: true\n        });\n        this.options.allowPrevious = this.options.allowPrevious || false;\n        this.page = 0;\n        const onReady = super.init();\n        this.setComponentSchema();\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[this.page]) {\n            this.component = this.pages[this.page].component;\n        }\n        this.on('subWizardsUpdated', (subForm) => {\n            const subWizard = this.subWizards.find(subWizard => { var _a; return (subForm === null || subForm === void 0 ? void 0 : subForm.id) && ((_a = subWizard.subForm) === null || _a === void 0 ? void 0 : _a.id) === (subForm === null || subForm === void 0 ? void 0 : subForm.id); });\n            if (this.subWizards.length && subWizard) {\n                subWizard.subForm.setValue(subForm._submission, {}, true);\n                this.establishPages();\n                this.redraw();\n            }\n        });\n        return onReady;\n    }\n    get wizardKey() {\n        return `wizard-${this.id}`;\n    }\n    get wizard() {\n        return this.form;\n    }\n    set wizard(form) {\n        this.setForm(form);\n    }\n    get buttons() {\n        const buttons = {};\n        [\n            { name: 'cancel', method: 'cancel' },\n            { name: 'previous', method: 'prevPage' },\n            { name: 'next', method: 'nextPage' },\n            { name: 'submit', method: 'submit' }\n        ].forEach((button) => {\n            if (this.hasButton(button.name)) {\n                buttons[button.name] = button;\n            }\n        });\n        return buttons;\n    }\n    get buttonOrder() {\n        var _a, _b, _c;\n        const defaultButtonOrder = [\n            'cancel',\n            'previous',\n            'next',\n            'submit'\n        ];\n        return (_c = (_b = (_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.wizardButtonOrder) === null || _b === void 0 ? void 0 : _b.toLowerCase().split(', ')) !== null && _c !== void 0 ? _c : defaultButtonOrder;\n    }\n    get renderContext() {\n        var _a, _b;\n        return {\n            disableWizardSubmit: this.form.disableWizardSubmit,\n            wizardKey: this.wizardKey,\n            isBreadcrumbClickable: this.isBreadcrumbClickable(),\n            isSubForm: !!this.parent && !((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.type) === 'wizard',\n            panels: this.allPages.length ? this.allPages.map(page => page.component) : this.pages.map(page => page.component),\n            buttons: this.buttons,\n            currentPage: this.page,\n            buttonOrder: this.buttonOrder,\n        };\n    }\n    prepareNavigationSettings(ctx) {\n        const currentPanel = this.currentPanel;\n        if (currentPanel && currentPanel.buttonSettings) {\n            Object.keys(currentPanel.buttonSettings).forEach(() => {\n                Object.keys(ctx.buttons).forEach(key => {\n                    if (typeof currentPanel.buttonSettings[key] !== 'undefined' && !currentPanel.buttonSettings[key] || ctx.isSubForm) {\n                        ctx.buttons[key] = null;\n                    }\n                });\n            });\n        }\n        return this.renderTemplate('wizardNav', ctx);\n    }\n    prepareHeaderSettings(ctx, headerType) {\n        var _a;\n        const shouldHideBreadcrumbs = ((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.breadcrumb) === 'none' ||\n            lodash_1.default.get(this.form, 'settings.wizardBreadcrumbsType', '') === 'none';\n        if (shouldHideBreadcrumbs || ctx.isSubForm) {\n            return null;\n        }\n        return this.renderTemplate(headerType, ctx);\n    }\n    render() {\n        const ctx = this.renderContext;\n        if (this.component.id) {\n            ctx.panels.forEach(panel => {\n                if (panel.id === this.component.id) {\n                    this.currentPanel = panel;\n                    ctx.wizardPageTooltip = this.getFormattedTooltip(panel.tooltip);\n                }\n            });\n        }\n        const wizardNav = this.prepareNavigationSettings(ctx);\n        const wizardHeaderType = `wizardHeader${lodash_1.default.get(this.form, 'settings.wizardHeaderType', '')}`;\n        const wizardHeaderLocation = lodash_1.default.get(this.form, 'settings.wizardHeaderLocation', 'left');\n        const wizardHeader = this.prepareHeaderSettings(ctx, wizardHeaderType);\n        return this.renderTemplate('wizard', Object.assign(Object.assign({}, ctx), { className: super.getClassName(), wizardHeader,\n            wizardHeaderType,\n            wizardHeaderLocation,\n            wizardNav, components: this.renderComponents([\n                ...this.prefixComps,\n                ...this.currentPage.components,\n                ...this.suffixComps\n            ]) }), this.builderMode ? 'builder' : 'form');\n    }\n    redrawNavigation() {\n        if (this.element) {\n            let navElement = this.element.querySelector(`#${this.wizardKey}-nav`);\n            if (navElement) {\n                this.detachNav();\n                navElement.outerHTML = this.renderTemplate('wizardNav', this.renderContext);\n                navElement = this.element.querySelector(`#${this.wizardKey}-nav`);\n                this.loadRefs(navElement, {\n                    [`${this.wizardKey}-cancel`]: 'single',\n                    [`${this.wizardKey}-previous`]: 'single',\n                    [`${this.wizardKey}-next`]: 'single',\n                    [`${this.wizardKey}-submit`]: 'single',\n                });\n                this.attachNav();\n            }\n        }\n    }\n    redrawHeader() {\n        if (this.element) {\n            let headerElement = this.element.querySelector(`#${this.wizardKey}-header`);\n            if (headerElement) {\n                this.detachHeader();\n                headerElement.outerHTML = this.renderTemplate(`wizardHeader${lodash_1.default.get(this.form, 'settings.wizardHeaderType', '')}`, this.renderContext);\n                headerElement = this.element.querySelector(`#${this.wizardKey}-header`);\n                this.loadRefs(headerElement, {\n                    [`${this.wizardKey}-link`]: 'multiple',\n                    [`${this.wizardKey}-tooltip`]: 'multiple'\n                });\n                this.attachHeader();\n            }\n        }\n    }\n    /**\n     * Attaches the wizard to the provided DOM element, initializes component references, sets up navigation,\n     * and emits a render event. It will initialize the wizard's index if necessary,\n     * attach event hooks, and make sure that the current page is rendered and displayed correctly.\n     * @param {HTMLElement} element - The DOM element to which the wizard will be attached.\n     * @returns {Promise} A promise that resolves when all components have been successfully attached.\n     */\n    attach(element) {\n        var _a;\n        this.setElement(element);\n        this.loadRefs(element, {\n            [this.wizardKey]: 'single',\n            [`${this.wizardKey}-header`]: 'single',\n            [`${this.wizardKey}-cancel`]: 'single',\n            [`${this.wizardKey}-previous`]: 'single',\n            [`${this.wizardKey}-next`]: 'single',\n            [`${this.wizardKey}-submit`]: 'single',\n            [`${this.wizardKey}-link`]: 'multiple',\n            [`${this.wizardKey}-tooltip`]: 'multiple'\n        });\n        if ((this.options.readOnly || this.editMode) && !this.enabledIndex) {\n            this.enabledIndex = ((_a = this.pages) === null || _a === void 0 ? void 0 : _a.length) - 1;\n        }\n        this.hook('attachWebform', element, this);\n        const promises = this.attachComponents(this.refs[this.wizardKey], [\n            ...this.prefixComps,\n            ...this.currentPage.components,\n            ...this.suffixComps,\n        ]);\n        this.attachNav();\n        this.attachHeader();\n        return promises.then(() => {\n            this.emit('render', { component: this.currentPage, page: this.page });\n            if (this.component.scrollToTop) {\n                this.scrollPageToTop();\n            }\n        });\n    }\n    scrollPageToTop() {\n        var _a;\n        const pageTop = (_a = this.refs[`${this.wizardKey}-header`]) !== null && _a !== void 0 ? _a : this.refs[this.wizardKey];\n        if (!pageTop) {\n            return;\n        }\n        if ('scrollIntoView' in pageTop) {\n            pageTop.scrollIntoView(true);\n        }\n        else {\n            this.scrollIntoView(pageTop);\n        }\n    }\n    isBreadcrumbClickable() {\n        let currentPage = null;\n        this.pages.map(page => {\n            if (lodash_1.default.isEqual(this.currentPage.component, page.component)) {\n                currentPage = page;\n            }\n        });\n        if (lodash_1.default.has(currentPage, 'component.breadcrumbClickable')) {\n            return lodash_1.default.get(currentPage, 'component.breadcrumbClickable');\n        }\n        if (lodash_1.default.has(this.options, 'breadcrumbSettings.clickable')) {\n            return this.options.breadcrumbSettings.clickable;\n        }\n        return true;\n    }\n    isAllowPrevious() {\n        let currentPage = null;\n        this.pages.map(page => {\n            if (lodash_1.default.isEqual(this.currentPage.component, page.component)) {\n                currentPage = page;\n            }\n        });\n        return lodash_1.default.get(currentPage.component, 'allowPrevious', this.options.allowPrevious);\n    }\n    /**\n     * Handles navigate on 'Enter' key event in a wizard form.\n     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.\n     */\n    handleNaviageteOnEnter(event) {\n        if (event.keyCode === 13) {\n            const clickEvent = new CustomEvent('click');\n            const buttonElement = this.refs[`${this.wizardKey}-${this.buttons.next.name}`];\n            if (buttonElement) {\n                buttonElement.dispatchEvent(clickEvent);\n            }\n        }\n    }\n    /**\n     * Handles save on 'Enter' key event in a wizard form.\n     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.\n     */\n    handleSaveOnEnter(event) {\n        if (event.keyCode === 13) {\n            const clickEvent = new CustomEvent('click');\n            const buttonElement = this.refs[`${this.wizardKey}-${this.buttons.submit.name}`];\n            if (buttonElement) {\n                buttonElement.dispatchEvent(clickEvent);\n            }\n        }\n    }\n    attachNav() {\n        if (this.component.navigateOnEnter) {\n            this.addEventListener(document, 'keyup', this.handleNaviageteOnEnter.bind(this));\n        }\n        if (this.component.saveOnEnter) {\n            this.addEventListener(document, 'keyup', this.handleSaveOnEnter.bind(this));\n        }\n        lodash_1.default.each(this.buttons, (button) => {\n            const buttonElement = this.refs[`${this.wizardKey}-${button.name}`];\n            this.addEventListener(buttonElement, 'click', (event) => {\n                event.preventDefault();\n                // Disable the button until done.\n                buttonElement.setAttribute('disabled', 'disabled');\n                this.setLoading(buttonElement, true);\n                // Call the button method, then re-enable the button.\n                this[button.method]().then(() => {\n                    buttonElement.removeAttribute('disabled');\n                    this.setLoading(buttonElement, false);\n                }).catch(() => {\n                    buttonElement.removeAttribute('disabled');\n                    this.setLoading(buttonElement, false);\n                });\n            });\n        });\n    }\n    /**\n     * Emits an event indicating that a wizard page has been selected.\n     * @param {number} index - Index of the selected wizard page in the `pages` array.\n     * @fires emit - Emits the 'wizardPageSelected' event with the page object and index.\n     */\n    emitWizardPageSelected(index) {\n        this.emit('wizardPageSelected', this.pages[index], index);\n    }\n    attachHeader() {\n        var _a, _b;\n        const isAllowPrevious = this.isAllowPrevious();\n        this.attachTooltips(this.refs[`${this.wizardKey}-tooltip`], (_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.tooltip);\n        if (this.isBreadcrumbClickable() || isAllowPrevious) {\n            (_b = this.refs[`${this.wizardKey}-link`]) === null || _b === void 0 ? void 0 : _b.forEach((link, index) => {\n                if (!isAllowPrevious || index <= this.enabledIndex) {\n                    this.addEventListener(link, 'click', (event) => {\n                        this.emit('wizardNavigationClicked', this.pages[index]);\n                        event.preventDefault();\n                        return this.setPage(index).then(() => {\n                            this.emitWizardPageSelected(index);\n                        });\n                    });\n                }\n            });\n        }\n    }\n    detachNav() {\n        if (this.component.navigateOnEnter) {\n            this.removeEventListener(document, 'keyup', this.handleNaviageteOnEnter.bind(this));\n        }\n        if (this.component.saveOnEnter) {\n            this.removeEventListener(document, 'keyup', this.handleSaveOnEnter.bind(this));\n        }\n        lodash_1.default.each(this.buttons, (button) => {\n            this.removeEventListener(this.refs[`${this.wizardKey}-${button.name}`], 'click');\n        });\n    }\n    detachHeader() {\n        if (this.refs[`${this.wizardKey}-link`]) {\n            this.refs[`${this.wizardKey}-link`].forEach((link) => {\n                this.removeEventListener(link, 'click');\n            });\n        }\n    }\n    transformPages() {\n        const allComponents = [];\n        const components = this.getSortedComponents(this);\n        let defferedComponents = [];\n        this.allPages = [];\n        // Get all components including all nested components and line up in the correct order\n        const getAllComponents = (nestedComp, compsArr, pushAllowed = true) => {\n            const nestedPages = [];\n            const dataArrayComponents = ['datagrid', 'editgrid', 'dynamicWizard'];\n            const currentComponents = (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.subForm) ? this.getSortedComponents(nestedComp.subForm) : (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.components) || [];\n            const visibleComponents = currentComponents.filter(comp => comp._visible);\n            const filteredComponents = visibleComponents.filter(comp => !dataArrayComponents.includes(comp.component.type) && (comp.type !== 'form' || comp.isNestedWizard));\n            const additionalComponents = currentComponents.filter(comp => { var _a; return ((_a = comp.subForm) === null || _a === void 0 ? void 0 : _a._form.display) !== 'wizard'; });\n            let hasNested = false;\n            (0, utils_1.eachComponent)(filteredComponents, (comp) => {\n                if (comp && comp.component) {\n                    if (comp.component.type === 'panel' && (comp === null || comp === void 0 ? void 0 : comp.parent.wizard) && !getAllComponents(comp, compsArr, false)) {\n                        if (pushAllowed) {\n                            this.setRootPanelId(comp);\n                            nestedPages.push(comp);\n                        }\n                        hasNested = true;\n                    }\n                    if (comp.isNestedWizard && comp.subForm) {\n                        const hasNestedForm = getAllComponents(comp, nestedPages, pushAllowed);\n                        if (!hasNested) {\n                            hasNested = hasNestedForm;\n                        }\n                    }\n                }\n            }, true);\n            if (nestedComp.component.type === 'panel') {\n                if (!hasNested && pushAllowed) {\n                    this.setRootPanelId(nestedComp);\n                    compsArr.push(nestedComp);\n                }\n                if (hasNested && additionalComponents.length) {\n                    const newComp = lodash_1.default.clone(nestedComp);\n                    newComp.components = additionalComponents;\n                    this.setRootPanelId(newComp);\n                    defferedComponents.push(newComp);\n                }\n            }\n            if (pushAllowed) {\n                compsArr.push(...defferedComponents, ...nestedPages);\n                defferedComponents = [];\n            }\n            return hasNested;\n        };\n        components.forEach((component) => {\n            if (component.visible) {\n                getAllComponents(component, allComponents);\n            }\n        }, []);\n        // recalculate pages only for root wizards, including the situation when the wizard is in a wrapper\n        if (this.localRoot && this.id === this.localRoot.id) {\n            allComponents.forEach((comp, index) => {\n                comp.eachComponent((component) => {\n                    component.page = index;\n                });\n            });\n        }\n        this.allPages = allComponents;\n    }\n    getSortedComponents({ components, originalComponents }) {\n        const currentComponents = [];\n        const currentPages = [];\n        if (components && components.length) {\n            components.map(page => {\n                if (page.component.type === 'panel') {\n                    currentPages[page.component.key || page.component.title] = page;\n                }\n            });\n        }\n        originalComponents === null || originalComponents === void 0 ? void 0 : originalComponents.forEach((item) => {\n            if (!item.key) {\n                item.key = item.title;\n            }\n            if (currentPages[item.key]) {\n                currentComponents.push(currentPages[item.key]);\n            }\n        });\n        return currentComponents;\n    }\n    findRootPanel(component) {\n        var _a;\n        return ((_a = component.parent) === null || _a === void 0 ? void 0 : _a.parent) ? this.findRootPanel(component.parent) : component;\n    }\n    setRootPanelId(component) {\n        var _a;\n        if (component.rootPanelId && component.rootPanelId !== component.id) {\n            return;\n        }\n        const parent = ((_a = component.parent) === null || _a === void 0 ? void 0 : _a.parent) ? this.findRootPanel(component.parent) : component;\n        component.rootPanelId = parent.id;\n    }\n    establishPages(data = this.data) {\n        this.pages = [];\n        this.prefixComps = [];\n        this.suffixComps = [];\n        const visible = [];\n        const currentPages = {};\n        const pageOptions = Object.assign(Object.assign({}, (lodash_1.default.clone(this.options))), (this.parent ? { root: this } : {}));\n        if (this.components && this.components.length) {\n            this.components.forEach(page => {\n                if (page.component.type === 'panel') {\n                    currentPages[page.component.key || page.component.title] = page;\n                }\n            });\n        }\n        if (this.originalComponents) {\n            this.originalComponents.forEach((item) => {\n                if (item.type === 'panel') {\n                    if (!item.key) {\n                        item.key = item.title;\n                    }\n                    let page = currentPages[item.key];\n                    const forceShow = this.shouldForceShow(item);\n                    const forceHide = this.shouldForceHide(item);\n                    let isVisible = !page\n                        ? (0, utils_1.checkCondition)(item, data, data, this.component, this) && !item.hidden\n                        : page.visible;\n                    if (forceShow) {\n                        isVisible = true;\n                    }\n                    else if (forceHide) {\n                        isVisible = false;\n                    }\n                    if (isVisible) {\n                        visible.push(item);\n                        if (page) {\n                            this.pages.push(page);\n                        }\n                    }\n                    if (!page && isVisible) {\n                        page = this.createComponent(item, pageOptions);\n                        page.visible = isVisible;\n                        this.pages.push(page);\n                        page.eachComponent((component) => {\n                            component.page = (this.pages.length - 1);\n                        });\n                    }\n                }\n                else if (item.type !== 'button') {\n                    if (!this.pages.length) {\n                        this.prefixComps.push(this.createComponent(item, pageOptions));\n                    }\n                    else {\n                        this.suffixComps.push(this.createComponent(item, pageOptions));\n                    }\n                }\n            });\n        }\n        if (this.pages.length) {\n            this.emit('pagesChanged');\n        }\n        this.transformPages();\n        if (this.allPages && this.allPages.length) {\n            this.updatePages();\n        }\n        return visible;\n    }\n    updatePages() {\n        this.pages = this.allPages;\n    }\n    addComponents() {\n        this.establishPages();\n    }\n    setPage(num) {\n        if (num === this.page) {\n            return Promise.resolve();\n        }\n        if (num >= 0 && num < this.pages.length) {\n            this.page = num;\n            this.pageFieldLogic(num);\n            this.getNextPage();\n            let parentNum = num;\n            if (this.hasSubWizards) {\n                const pageFromPages = this.pages[num];\n                const pageFromComponents = this.components[num];\n                if (!pageFromComponents || (pageFromPages === null || pageFromPages === void 0 ? void 0 : pageFromPages.id) !== pageFromComponents.id) {\n                    parentNum = this.components.findIndex(comp => {\n                        var _a, _b;\n                        return comp.id === ((_b = (_a = this.pages) === null || _a === void 0 ? void 0 : _a[parentNum]) === null || _b === void 0 ? void 0 : _b.rootPanelId);\n                    });\n                }\n            }\n            if (!this._seenPages.includes(parentNum)) {\n                this._seenPages = this._seenPages.concat(parentNum);\n            }\n            this.redraw().then(() => {\n                this.checkData(this.submission.data);\n                this.triggerCaptcha(this.currentPage.components);\n                const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();\n                if (this.alert) {\n                    this.showErrors(errors, true, true);\n                }\n            });\n            return Promise.resolve();\n        }\n        else if (!this.pages.length) {\n            this.redraw();\n            return Promise.resolve();\n        }\n        return Promise.reject('Page not found');\n    }\n    pageFieldLogic(page) {\n        var _a;\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[page]) {\n            // Handle field logic on pages.\n            this.component = this.pages[page].component;\n            this.originalComponent = (0, utils_1.fastCloneDeep)(this.component);\n            this.fieldLogic(this.data);\n            // If disabled changed, be sure to distribute the setting.\n            this.disabled = this.shouldDisabled;\n        }\n    }\n    get currentPage() {\n        return (this.pages && (this.pages.length >= this.page)) ? this.pages[this.page] : { components: [] };\n    }\n    getNextPage() {\n        var _a;\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[this.page]) {\n            const data = this.submission.data;\n            const form = this.pages[this.page].component;\n            // Check conditional nextPage\n            if (form) {\n                const page = this.pages.length > (this.page + 1) && !this.showAllErrors ? this.page + 1 : -1;\n                if (form.nextPage) {\n                    const next = this.evaluate(form.nextPage, {\n                        next: page,\n                        data,\n                        page,\n                        form\n                    }, 'next');\n                    if (next === null) {\n                        this.currentNextPage = null;\n                        return null;\n                    }\n                    const pageNum = parseInt(next, 10);\n                    if (!isNaN(parseInt(pageNum, 10)) && isFinite(pageNum)) {\n                        this.currentNextPage = pageNum;\n                        return pageNum;\n                    }\n                    this.currentNextPage = this.getPageIndexByKey(next);\n                    return this.currentNextPage;\n                }\n                this.currentNextPage = page;\n                return page;\n            }\n            this.currentNextPage = null;\n        }\n        return null;\n    }\n    getPreviousPage() {\n        return this.page - 1;\n    }\n    beforeSubmit() {\n        const pages = this.getPages({ all: true });\n        return Promise.all(pages.map((page) => {\n            this.triggerButtonCaptcha(page);\n            page.options.beforeSubmit = true;\n            return page.beforeSubmit();\n        }));\n    }\n    beforePage(next) {\n        return new Promise((resolve, reject) => {\n            this.hook(next ? 'beforeNext' : 'beforePrev', this.currentPage, this.submission, (err) => {\n                if (err) {\n                    this.showErrors(err, true);\n                    reject(err);\n                }\n                const form = this.currentPage;\n                if (form) {\n                    form.beforePage(next).then(resolve).catch(reject);\n                }\n                else {\n                    resolve();\n                }\n            });\n        });\n    }\n    emitNextPage() {\n        this.emit('nextPage', { page: this.page, submission: this.submission });\n    }\n    nextPage() {\n        // Read-only forms should not worry about validation before going to next page, nor should they submit.\n        if (this.options.readOnly) {\n            return this.beforePage(true).then(() => {\n                return this.setPage(this.getNextPage()).then(() => {\n                    this.emitNextPage();\n                });\n            });\n        }\n        // Validate the form before going to the next page\n        const currentPageErrors = this.validateCurrentPage({ dirty: true });\n        const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : currentPageErrors;\n        // allow going to the next page if the current page is valid, even if there are form level errors\n        if (currentPageErrors.length === 0) {\n            this.checkData(this.submission.data);\n            return this.beforePage(true).then(() => {\n                return this.setPage(this.getNextPage()).then(() => {\n                    if (!(this.options.readOnly || this.editMode) && this.enabledIndex < this.page) {\n                        this.enabledIndex = this.page;\n                        this.redraw();\n                    }\n                    this.emitNextPage();\n                });\n            });\n        }\n        else {\n            this.currentPage.components.forEach((comp) => comp.setPristine(false));\n            this.scrollIntoView(this.element, true);\n            return Promise.reject(this.showErrors(errors, true));\n        }\n    }\n    validateCurrentPage(flags = {}) {\n        var _a, _b, _c, _d;\n        const components = (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components.map((component) => component.component);\n        // Accessing the parent ensures the right instance (whether it's the parent Wizard or a nested Wizard) performs its validation\n        if ((_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.parent) {\n            return (_c = this.currentPage) === null || _c === void 0 ? void 0 : _c.parent.validateComponents(components, this.root.data, flags);\n        }\n        return (_d = this.currentPage) === null || _d === void 0 ? void 0 : _d.validateComponents(components, this.root ? this.root.data : this.data, flags);\n    }\n    emitPrevPage() {\n        this.emit('prevPage', { page: this.page, submission: this.submission });\n    }\n    prevPage() {\n        return this.beforePage().then(() => {\n            return this.setPage(this.getPreviousPage()).then(() => {\n                this.emitPrevPage();\n            });\n        });\n    }\n    cancel(noconfirm) {\n        if (this.options.readOnly) {\n            return Promise.resolve();\n        }\n        if (super.cancel(noconfirm)) {\n            this.setPristine(true);\n            return this.setPage(0).then(() => {\n                if (this.enabledIndex) {\n                    this.enabledIndex = 0;\n                }\n                this.onChange({ resetValue: true });\n                this.redraw();\n                return this.page;\n            });\n        }\n        return Promise.resolve();\n    }\n    getPageIndexByKey(key) {\n        let pageIndex = this.page;\n        this.pages.forEach((page, index) => {\n            if (page.component.key === key) {\n                pageIndex = index;\n                return false;\n            }\n        });\n        return pageIndex;\n    }\n    get schema() {\n        return this.wizard;\n    }\n    setComponentSchema() {\n        const pageKeys = {};\n        this.originalComponents = [];\n        this.component.components.map((item) => {\n            if (item.type === 'panel') {\n                item.key = (0, utils_1.uniqueKey)(pageKeys, (item.key || 'panel'));\n                pageKeys[item.key] = true;\n                if (this.wizard.full) {\n                    this.options.show = this.options.show || {};\n                    this.options.show[item.key] = true;\n                }\n                else if (Object.prototype.hasOwnProperty.call(this.wizard, 'full')\n                    && !lodash_1.default.isEqual(this.originalOptions.show, this.options.show)) {\n                    this.options.show = Object.assign({}, (this.originalOptions.show || {}));\n                }\n            }\n            this.originalComponents.push(lodash_1.default.clone(item));\n        });\n        if (!Object.keys(pageKeys).length) {\n            const newPage = {\n                type: 'panel',\n                title: 'Page 1',\n                label: 'Page 1',\n                key: 'page1',\n                components: this.component.components\n            };\n            this.component.components = [newPage];\n            this.originalComponents.push(lodash_1.default.clone(newPage));\n        }\n    }\n    setForm(form, flags = {}) {\n        if (!form) {\n            return;\n        }\n        return super.setForm(form, flags);\n    }\n    onSetForm(clonedForm, initialForm) {\n        this.component.components = (this.parent ? initialForm.components : clonedForm.components) || [];\n        this.setComponentSchema();\n    }\n    setEditMode(submission) {\n        if (!this.editMode && submission._id && !this.options.readOnly) {\n            this.editMode = true;\n            this.redraw();\n        }\n    }\n    setValue(submission, flags = {}, ignoreEstablishment) {\n        if (!submission || !submission.data) {\n            submission = {\n                data: {},\n            };\n        }\n        const changed = this.getPages({ all: true }).reduce((changed, page) => {\n            return this.setNestedValue(page, submission.data, flags, changed) || changed;\n        }, false);\n        this.mergeData(this.data, submission.data);\n        if (changed) {\n            this.pageFieldLogic(this.page);\n        }\n        submission.data = this.data;\n        this._submission = submission;\n        if (!ignoreEstablishment) {\n            this.establishPages(submission.data);\n        }\n        this.setEditMode(submission);\n        return changed;\n    }\n    isClickable(page, index) {\n        return this.page !== index && (0, utils_1.firstNonNil)([\n            lodash_1.default.get(page, 'breadcrumbClickable'),\n            this.options.breadcrumbSettings.clickable\n        ]);\n    }\n    hasButton(name, nextPage = this.getNextPage()) {\n        // get page options with global options as default values\n        const { previous = this.options.buttonSettings.showPrevious, cancel = this.options.buttonSettings.showCancel, submit = this.options.buttonSettings.showSubmit, next = this.options.buttonSettings.showNext } = lodash_1.default.get(this.currentPage, 'component.buttonSettings', {});\n        switch (name) {\n            case 'previous':\n                return previous && (this.getPreviousPage() > -1);\n            case 'next':\n                return next && (nextPage !== null) && (nextPage !== -1);\n            case 'cancel':\n                return cancel && !this.options.readOnly;\n            case 'submit':\n                return submit && !this.options.readOnly && ((nextPage === null) || (this.page === (this.pages.length - 1)));\n            default:\n                return true;\n        }\n    }\n    pageId(page) {\n        if (page.key) {\n            // Some panels have the same key....\n            return `${page.key}-${page.title}`;\n        }\n        else if (page.components &&\n            page.components.length > 0) {\n            return this.pageId(page.components[0]);\n        }\n        else {\n            return page.title;\n        }\n    }\n    onChange(flags, changed, modified, changes) {\n        var _a;\n        super.onChange(flags, changed, modified, changes);\n        // The onChange loop doesn't need all components for wizards\n        const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();\n        if (this.alert) {\n            this.showErrors(errors, true, true);\n        }\n        // If the pages change, need to redraw the header.\n        const currentPanels = this.pages;\n        // calling this.establishPages() updates/mutates this.pages to be the current pages\n        this.establishPages();\n        const newPanels = this.pages;\n        const currentNextPage = this.currentNextPage;\n        const panelsUpdated = !lodash_1.default.isEqual(newPanels, currentPanels);\n        if (((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.id) && this.pages.length && (!this.hasSubWizards || (this.hasSubWizards && panelsUpdated))) {\n            const newIndex = this.pages.findIndex(page => page.id === this.currentPanel.id);\n            if (newIndex !== -1)\n                this.setPage(newIndex);\n        }\n        if (panelsUpdated || (flags && flags.fromSubmission)) {\n            this.redrawHeader();\n        }\n        // If the next page changes, then make sure to redraw navigation.\n        if (currentNextPage !== this.getNextPage()) {\n            this.redrawNavigation();\n        }\n        if (this.options.readOnly && (this.prefixComps.length || this.suffixComps.length)) {\n            this.redraw();\n        }\n    }\n    rebuild() {\n        const currentPage = this.page;\n        const setCurrentPage = () => this.setPage(currentPage);\n        return super.rebuild().then(setCurrentPage);\n    }\n    checkValidity(data, dirty, row, currentPageOnly, childErrors = []) {\n        if (!this.checkCondition(row, data)) {\n            this.setCustomValidity('');\n            return true;\n        }\n        const components = !currentPageOnly || this.isLastPage()\n            ? this.getComponents()\n            : this.currentPage.components;\n        return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, currentPageOnly, childErrors) && check, true);\n    }\n    get errors() {\n        return !this.isLastPage() && !this.submitted ? this.currentPage.errors : super.errors;\n    }\n    focusOnComponent(key) {\n        const component = this.getComponent(key);\n        if (component) {\n            let topPanel = component.parent;\n            while (!(topPanel.parent instanceof Wizard)) {\n                topPanel = topPanel.parent;\n            }\n            const pageIndex = this.pages.findIndex(page => page.id === topPanel.id);\n            if (pageIndex >= 0) {\n                const page = this.pages[pageIndex];\n                if (page && page !== this.currentPage) {\n                    return this.setPage(pageIndex).then(() => {\n                        this.showErrors(this.validate(this.localData, { dirty: true }));\n                        super.focusOnComponent(key);\n                    });\n                }\n            }\n        }\n        return super.focusOnComponent(key);\n    }\n    triggerButtonCaptcha(page) {\n        if (!page.components) {\n            return;\n        }\n        let captchaComponent;\n        page.eachComponent((component) => {\n            if (/^(re)?captcha$/.test(component.component.type) &&\n                component.component.eventType === 'buttonClick' &&\n                component.component.buttonKey === 'submit') {\n                captchaComponent = component;\n            }\n        });\n        if (captchaComponent) {\n            captchaComponent.verify(`submitClick`);\n        }\n    }\n}\nexports[\"default\"] = Wizard;\nWizard.setBaseUrl = Formio_1.Formio.setBaseUrl;\nWizard.setApiUrl = Formio_1.Formio.setApiUrl;\nWizard.setAppUrl = Formio_1.Formio.setAppUrl;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Wizard.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __webpack_require__(/*! ./utils */ \"./lib/cjs/utils/index.js\");\nclass Wizard extends Webform_1.default {\n    /**\n     * Constructor for wizard-based forms.\n     * @param {HTMLElement | object | import('Form').FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.\n     * @param {import('Form').FormOptions} [_options] - The options to create a new form instance.\n     *    - breadcrumbSettings.clickable: true (default) - determines if the breadcrumb bar is clickable.\n     *    - buttonSettings.show*(Previous, Next, Cancel): true (default) - determines if the button is shown.\n     *    - allowPrevious: false (default) - determines if the breadcrumb bar is clickable for visited tabs.\n     */\n    constructor(elementOrOptions = undefined, _options = undefined) {\n        let element, options;\n        if (elementOrOptions instanceof HTMLElement || _options) {\n            element = elementOrOptions;\n            options = _options || {};\n        }\n        else {\n            options = elementOrOptions || {};\n        }\n        options.display = 'wizard';\n        super(element, options);\n        this.pages = [];\n        this.prefixComps = [];\n        this.suffixComps = [];\n        this.components = [];\n        this.originalComponents = [];\n        this.page = 0;\n        this.currentPanel = null;\n        this.currentNextPage = 0;\n        this._seenPages = [0];\n        this.subWizards = [];\n        this.allPages = [];\n        this.lastPromise = Promise.resolve();\n        this.enabledIndex = 0;\n        this.editMode = false;\n        this.originalOptions = lodash_1.default.cloneDeep(this.options);\n    }\n    isLastPage() {\n        const next = this.getNextPage();\n        if (lodash_1.default.isNumber(next)) {\n            return next === -1;\n        }\n        return lodash_1.default.isNull(next);\n    }\n    getPages(args = {}) {\n        const { all = false } = args;\n        const pages = this.hasSubWizards ? this.components : this.pages;\n        const filteredPages = pages\n            .filter(all ? lodash_1.default.identity : (p, index) => this._seenPages.includes(index));\n        return filteredPages;\n    }\n    get hasSubWizards() {\n        return !lodash_1.default.isEmpty(this.subWizards);\n    }\n    get data() {\n        return super.data;\n    }\n    get localData() {\n        var _a, _b;\n        return ((_b = (_a = this.pages[this.page]) === null || _a === void 0 ? void 0 : _a.root) === null || _b === void 0 ? void 0 : _b.submission.data) || this.submission.data;\n    }\n    checkConditions(data, flags, row) {\n        const visible = super.checkConditions(data, flags, row);\n        this.establishPages(data);\n        return visible;\n    }\n    set data(value) {\n        this._data = value;\n        lodash_1.default.each(this.getPages({ all: true }), (component) => {\n            component.data = this.componentContext(component);\n        });\n    }\n    getComponents() {\n        return this.submitting\n            ? this.getPages({ all: this.isLastPage() })\n            : super.getComponents();\n    }\n    resetValue() {\n        this.getPages({ all: true }).forEach((page) => page.resetValue());\n        this.setPristine(true);\n    }\n    init() {\n        var _a;\n        // Check for and initlize button settings object\n        this.options.buttonSettings = lodash_1.default.defaults(this.options.buttonSettings, {\n            showPrevious: true,\n            showNext: true,\n            showSubmit: true,\n            showCancel: !this.options.readOnly\n        });\n        this.options.breadcrumbSettings = lodash_1.default.defaults(this.options.breadcrumbSettings, {\n            clickable: true\n        });\n        this.options.allowPrevious = this.options.allowPrevious || false;\n        this.page = 0;\n        const onReady = super.init();\n        this.setComponentSchema();\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[this.page]) {\n            this.component = this.pages[this.page].component;\n        }\n        this.on('subWizardsUpdated', (subForm) => {\n            const subWizard = this.subWizards.find(subWizard => { var _a; return (subForm === null || subForm === void 0 ? void 0 : subForm.id) && ((_a = subWizard.subForm) === null || _a === void 0 ? void 0 : _a.id) === (subForm === null || subForm === void 0 ? void 0 : subForm.id); });\n            if (this.subWizards.length && subWizard) {\n                subWizard.subForm.setValue(subForm._submission, {}, true);\n                this.establishPages();\n                this.redraw();\n            }\n        });\n        return onReady;\n    }\n    get wizardKey() {\n        return `wizard-${this.id}`;\n    }\n    get wizard() {\n        return this.form;\n    }\n    set wizard(form) {\n        this.setForm(form);\n    }\n    get buttons() {\n        const buttons = {};\n        [\n            { name: 'cancel', method: 'cancel' },\n            { name: 'previous', method: 'prevPage' },\n            { name: 'next', method: 'nextPage' },\n            { name: 'submit', method: 'submit' }\n        ].forEach((button) => {\n            if (this.hasButton(button.name)) {\n                buttons[button.name] = button;\n            }\n        });\n        return buttons;\n    }\n    get buttonOrder() {\n        var _a, _b, _c;\n        const defaultButtonOrder = [\n            'cancel',\n            'previous',\n            'next',\n            'submit'\n        ];\n        return (_c = (_b = (_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.wizardButtonOrder) === null || _b === void 0 ? void 0 : _b.toLowerCase().split(', ')) !== null && _c !== void 0 ? _c : defaultButtonOrder;\n    }\n    get renderContext() {\n        var _a, _b;\n        return {\n            disableWizardSubmit: this.form.disableWizardSubmit,\n            wizardKey: this.wizardKey,\n            isBreadcrumbClickable: this.isBreadcrumbClickable(),\n            isSubForm: !!this.parent && !((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.type) === 'wizard',\n            panels: this.allPages.length ? this.allPages.map(page => page.component) : this.pages.map(page => page.component),\n            buttons: this.buttons,\n            currentPage: this.page,\n            buttonOrder: this.buttonOrder,\n        };\n    }\n    prepareNavigationSettings(ctx) {\n        const currentPanel = this.currentPanel;\n        if (currentPanel && currentPanel.buttonSettings) {\n            Object.keys(currentPanel.buttonSettings).forEach(() => {\n                Object.keys(ctx.buttons).forEach(key => {\n                    if (typeof currentPanel.buttonSettings[key] !== 'undefined' && !currentPanel.buttonSettings[key] || ctx.isSubForm) {\n                        ctx.buttons[key] = null;\n                    }\n                });\n            });\n        }\n        return this.renderTemplate('wizardNav', ctx);\n    }\n    prepareHeaderSettings(ctx, headerType) {\n        var _a;\n        const shouldHideBreadcrumbs = ((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.breadcrumb) === 'none' ||\n            lodash_1.default.get(this.form, 'settings.wizardBreadcrumbsType', '') === 'none';\n        if (shouldHideBreadcrumbs || ctx.isSubForm) {\n            return null;\n        }\n        return this.renderTemplate(headerType, ctx);\n    }\n    render() {\n        const ctx = this.renderContext;\n        if (this.component.id) {\n            ctx.panels.forEach(panel => {\n                if (panel.id === this.component.id) {\n                    this.currentPanel = panel;\n                    ctx.wizardPageTooltip = this.getFormattedTooltip(panel.tooltip);\n                }\n            });\n        }\n        const wizardNav = this.prepareNavigationSettings(ctx);\n        const wizardHeaderType = `wizardHeader${lodash_1.default.get(this.form, 'settings.wizardHeaderType', '')}`;\n        const wizardHeaderLocation = lodash_1.default.get(this.form, 'settings.wizardHeaderLocation', 'left');\n        const wizardHeader = this.prepareHeaderSettings(ctx, wizardHeaderType);\n        return this.renderTemplate('wizard', Object.assign(Object.assign({}, ctx), { className: super.getClassName(), wizardHeader,\n            wizardHeaderType,\n            wizardHeaderLocation,\n            wizardNav, components: this.renderComponents([\n                ...this.prefixComps,\n                ...this.currentPage.components,\n                ...this.suffixComps\n            ]) }), this.builderMode ? 'builder' : 'form');\n    }\n    redrawNavigation() {\n        if (this.element) {\n            let navElement = this.element.querySelector(`#${this.wizardKey}-nav`);\n            if (navElement) {\n                this.detachNav();\n                navElement.outerHTML = this.renderTemplate('wizardNav', this.renderContext);\n                navElement = this.element.querySelector(`#${this.wizardKey}-nav`);\n                this.loadRefs(navElement, {\n                    [`${this.wizardKey}-cancel`]: 'single',\n                    [`${this.wizardKey}-previous`]: 'single',\n                    [`${this.wizardKey}-next`]: 'single',\n                    [`${this.wizardKey}-submit`]: 'single',\n                });\n                this.attachNav();\n            }\n        }\n    }\n    redrawHeader() {\n        if (this.element) {\n            let headerElement = this.element.querySelector(`#${this.wizardKey}-header`);\n            if (headerElement) {\n                this.detachHeader();\n                headerElement.outerHTML = this.renderTemplate(`wizardHeader${lodash_1.default.get(this.form, 'settings.wizardHeaderType', '')}`, this.renderContext);\n                headerElement = this.element.querySelector(`#${this.wizardKey}-header`);\n                this.loadRefs(headerElement, {\n                    [`${this.wizardKey}-link`]: 'multiple',\n                    [`${this.wizardKey}-tooltip`]: 'multiple'\n                });\n                this.attachHeader();\n            }\n        }\n    }\n    /**\n     * Attaches the wizard to the provided DOM element, initializes component references, sets up navigation,\n     * and emits a render event. It will initialize the wizard's index if necessary,\n     * attach event hooks, and make sure that the current page is rendered and displayed correctly.\n     * @param {HTMLElement} element - The DOM element to which the wizard will be attached.\n     * @returns {Promise} A promise that resolves when all components have been successfully attached.\n     */\n    attach(element) {\n        var _a;\n        this.setElement(element);\n        this.loadRefs(element, {\n            [this.wizardKey]: 'single',\n            [`${this.wizardKey}-header`]: 'single',\n            [`${this.wizardKey}-cancel`]: 'single',\n            [`${this.wizardKey}-previous`]: 'single',\n            [`${this.wizardKey}-next`]: 'single',\n            [`${this.wizardKey}-submit`]: 'single',\n            [`${this.wizardKey}-link`]: 'multiple',\n            [`${this.wizardKey}-tooltip`]: 'multiple'\n        });\n        if ((this.options.readOnly || this.editMode) && !this.enabledIndex) {\n            this.enabledIndex = ((_a = this.pages) === null || _a === void 0 ? void 0 : _a.length) - 1;\n        }\n        this.hook('attachWebform', element, this);\n        const promises = this.attachComponents(this.refs[this.wizardKey], [\n            ...this.prefixComps,\n            ...this.currentPage.components,\n            ...this.suffixComps,\n        ]);\n        this.attachNav();\n        this.attachHeader();\n        return promises.then(() => {\n            this.emit('render', { component: this.currentPage, page: this.page });\n            if (this.component.scrollToTop) {\n                this.scrollPageToTop();\n            }\n        });\n    }\n    scrollPageToTop() {\n        var _a;\n        const pageTop = (_a = this.refs[`${this.wizardKey}-header`]) !== null && _a !== void 0 ? _a : this.refs[this.wizardKey];\n        if (!pageTop) {\n            return;\n        }\n        if ('scrollIntoView' in pageTop) {\n            pageTop.scrollIntoView(true);\n        }\n        else {\n            this.scrollIntoView(pageTop);\n        }\n    }\n    isBreadcrumbClickable() {\n        let currentPage = null;\n        this.pages.map(page => {\n            if (lodash_1.default.isEqual(this.currentPage.component, page.component)) {\n                currentPage = page;\n            }\n        });\n        if (lodash_1.default.has(currentPage, 'component.breadcrumbClickable')) {\n            return lodash_1.default.get(currentPage, 'component.breadcrumbClickable');\n        }\n        if (lodash_1.default.has(this.options, 'breadcrumbSettings.clickable')) {\n            return this.options.breadcrumbSettings.clickable;\n        }\n        return true;\n    }\n    isAllowPrevious() {\n        let currentPage = null;\n        this.pages.map(page => {\n            if (lodash_1.default.isEqual(this.currentPage.component, page.component)) {\n                currentPage = page;\n            }\n        });\n        return lodash_1.default.get(currentPage.component, 'allowPrevious', this.options.allowPrevious);\n    }\n    /**\n     * Handles navigate on 'Enter' key event in a wizard form.\n     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.\n     */\n    handleNaviageteOnEnter(event) {\n        if (event.keyCode === 13) {\n            const clickEvent = new CustomEvent('click');\n            const buttonElement = this.refs[`${this.wizardKey}-${this.buttons.next.name}`];\n            if (buttonElement) {\n                buttonElement.dispatchEvent(clickEvent);\n            }\n        }\n    }\n    /**\n     * Handles save on 'Enter' key event in a wizard form.\n     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.\n     */\n    handleSaveOnEnter(event) {\n        if (event.keyCode === 13) {\n            const clickEvent = new CustomEvent('click');\n            const buttonElement = this.refs[`${this.wizardKey}-${this.buttons.submit.name}`];\n            if (buttonElement) {\n                buttonElement.dispatchEvent(clickEvent);\n            }\n        }\n    }\n    attachNav() {\n        if (this.component.navigateOnEnter) {\n            this.addEventListener(document, 'keyup', this.handleNaviageteOnEnter.bind(this));\n        }\n        if (this.component.saveOnEnter) {\n            this.addEventListener(document, 'keyup', this.handleSaveOnEnter.bind(this));\n        }\n        lodash_1.default.each(this.buttons, (button) => {\n            const buttonElement = this.refs[`${this.wizardKey}-${button.name}`];\n            this.addEventListener(buttonElement, 'click', (event) => {\n                event.preventDefault();\n                // Disable the button until done.\n                buttonElement.setAttribute('disabled', 'disabled');\n                this.setLoading(buttonElement, true);\n                // Call the button method, then re-enable the button.\n                this[button.method]().then(() => {\n                    buttonElement.removeAttribute('disabled');\n                    this.setLoading(buttonElement, false);\n                }).catch(() => {\n                    buttonElement.removeAttribute('disabled');\n                    this.setLoading(buttonElement, false);\n                });\n            });\n        });\n    }\n    /**\n     * Emits an event indicating that a wizard page has been selected.\n     * @param {number} index - Index of the selected wizard page in the `pages` array.\n     * @fires emit - Emits the 'wizardPageSelected' event with the page object and index.\n     */\n    emitWizardPageSelected(index) {\n        this.emit('wizardPageSelected', this.pages[index], index);\n    }\n    attachHeader() {\n        var _a, _b;\n        const isAllowPrevious = this.isAllowPrevious();\n        this.attachTooltips(this.refs[`${this.wizardKey}-tooltip`], (_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.tooltip);\n        if (this.isBreadcrumbClickable() || isAllowPrevious) {\n            (_b = this.refs[`${this.wizardKey}-link`]) === null || _b === void 0 ? void 0 : _b.forEach((link, index) => {\n                if (!isAllowPrevious || index <= this.enabledIndex) {\n                    this.addEventListener(link, 'click', (event) => {\n                        this.emit('wizardNavigationClicked', this.pages[index]);\n                        event.preventDefault();\n                        return this.setPage(index).then(() => {\n                            this.emitWizardPageSelected(index);\n                        });\n                    });\n                }\n            });\n        }\n    }\n    detachNav() {\n        if (this.component.navigateOnEnter) {\n            this.removeEventListener(document, 'keyup', this.handleNaviageteOnEnter.bind(this));\n        }\n        if (this.component.saveOnEnter) {\n            this.removeEventListener(document, 'keyup', this.handleSaveOnEnter.bind(this));\n        }\n        lodash_1.default.each(this.buttons, (button) => {\n            this.removeEventListener(this.refs[`${this.wizardKey}-${button.name}`], 'click');\n        });\n    }\n    detachHeader() {\n        if (this.refs[`${this.wizardKey}-link`]) {\n            this.refs[`${this.wizardKey}-link`].forEach((link) => {\n                this.removeEventListener(link, 'click');\n            });\n        }\n    }\n    transformPages() {\n        const allComponents = [];\n        const components = this.getSortedComponents(this);\n        let defferedComponents = [];\n        this.allPages = [];\n        // Get all components including all nested components and line up in the correct order\n        const getAllComponents = (nestedComp, compsArr, pushAllowed = true) => {\n            const nestedPages = [];\n            const dataArrayComponents = ['datagrid', 'editgrid', 'dynamicWizard'];\n            const currentComponents = (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.subForm) ? this.getSortedComponents(nestedComp.subForm) : (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.components) || [];\n            const visibleComponents = currentComponents.filter(comp => comp._visible);\n            const filteredComponents = visibleComponents.filter(comp => !dataArrayComponents.includes(comp.component.type) && (comp.type !== 'form' || comp.isNestedWizard));\n            const additionalComponents = currentComponents.filter(comp => { var _a; return ((_a = comp.subForm) === null || _a === void 0 ? void 0 : _a._form.display) !== 'wizard'; });\n            let hasNested = false;\n            (0, utils_1.eachComponent)(filteredComponents, (comp) => {\n                if (comp && comp.component) {\n                    if (comp.component.type === 'panel' && (comp === null || comp === void 0 ? void 0 : comp.parent.wizard) && !getAllComponents(comp, compsArr, false)) {\n                        if (pushAllowed) {\n                            this.setRootPanelId(comp);\n                            nestedPages.push(comp);\n                        }\n                        hasNested = true;\n                    }\n                    if (comp.isNestedWizard && comp.subForm) {\n                        const hasNestedForm = getAllComponents(comp, nestedPages, pushAllowed);\n                        if (!hasNested) {\n                            hasNested = hasNestedForm;\n                        }\n                    }\n                }\n            }, true);\n            if (nestedComp.component.type === 'panel') {\n                if (!hasNested && pushAllowed) {\n                    this.setRootPanelId(nestedComp);\n                    compsArr.push(nestedComp);\n                }\n                if (hasNested && additionalComponents.length) {\n                    const newComp = lodash_1.default.clone(nestedComp);\n                    newComp.components = additionalComponents;\n                    this.setRootPanelId(newComp);\n                    defferedComponents.push(newComp);\n                }\n            }\n            if (pushAllowed) {\n                compsArr.push(...defferedComponents, ...nestedPages);\n                defferedComponents = [];\n            }\n            return hasNested;\n        };\n        components.forEach((component) => {\n            if (component.visible) {\n                getAllComponents(component, allComponents);\n            }\n        }, []);\n        // recalculate pages only for root wizards, including the situation when the wizard is in a wrapper\n        if (this.localRoot && this.id === this.localRoot.id) {\n            allComponents.forEach((comp, index) => {\n                comp.eachComponent((component) => {\n                    component.page = index;\n                });\n            });\n        }\n        this.allPages = allComponents;\n    }\n    getSortedComponents({ components, originalComponents }) {\n        const currentComponents = [];\n        const currentPages = [];\n        if (components && components.length) {\n            components.map(page => {\n                if (page.component.type === 'panel') {\n                    currentPages[page.component.key || page.component.title] = page;\n                }\n            });\n        }\n        originalComponents === null || originalComponents === void 0 ? void 0 : originalComponents.forEach((item) => {\n            if (!item.key) {\n                item.key = item.title;\n            }\n            if (currentPages[item.key]) {\n                currentComponents.push(currentPages[item.key]);\n            }\n        });\n        return currentComponents;\n    }\n    findRootPanel(component) {\n        var _a;\n        return ((_a = component.parent) === null || _a === void 0 ? void 0 : _a.parent) ? this.findRootPanel(component.parent) : component;\n    }\n    setRootPanelId(component) {\n        var _a;\n        if (component.rootPanelId && component.rootPanelId !== component.id) {\n            return;\n        }\n        const parent = ((_a = component.parent) === null || _a === void 0 ? void 0 : _a.parent) ? this.findRootPanel(component.parent) : component;\n        component.rootPanelId = parent.id;\n    }\n    establishPages(data = this.data) {\n        this.pages = [];\n        this.prefixComps = [];\n        this.suffixComps = [];\n        const visible = [];\n        const currentPages = {};\n        const pageOptions = Object.assign(Object.assign({}, (lodash_1.default.clone(this.options))), (this.parent ? { root: this } : {}));\n        if (this.components && this.components.length) {\n            this.components.forEach(page => {\n                if (page.component.type === 'panel') {\n                    currentPages[page.component.key || page.component.title] = page;\n                }\n            });\n        }\n        if (this.originalComponents) {\n            this.originalComponents.forEach((item) => {\n                if (item.type === 'panel') {\n                    if (!item.key) {\n                        item.key = item.title;\n                    }\n                    let page = currentPages[item.key];\n                    const forceShow = this.shouldForceShow(item);\n                    const forceHide = this.shouldForceHide(item);\n                    let isVisible = !page\n                        ? (0, utils_1.checkCondition)(item, data, data, this.component, this) && !item.hidden\n                        : page.visible;\n                    if (forceShow) {\n                        isVisible = true;\n                    }\n                    else if (forceHide) {\n                        isVisible = false;\n                    }\n                    if (isVisible) {\n                        visible.push(item);\n                        if (page) {\n                            this.pages.push(page);\n                        }\n                    }\n                    if (!page && isVisible) {\n                        page = this.createComponent(item, pageOptions);\n                        page.visible = isVisible;\n                        this.pages.push(page);\n                        page.eachComponent((component) => {\n                            component.page = (this.pages.length - 1);\n                        });\n                    }\n                }\n                else if (item.type !== 'button') {\n                    if (!this.pages.length) {\n                        this.prefixComps.push(this.createComponent(item, pageOptions));\n                    }\n                    else {\n                        this.suffixComps.push(this.createComponent(item, pageOptions));\n                    }\n                }\n            });\n        }\n        if (this.pages.length) {\n            this.emit('pagesChanged');\n        }\n        this.transformPages();\n        if (this.allPages && this.allPages.length) {\n            this.updatePages();\n        }\n        return visible;\n    }\n    updatePages() {\n        this.pages = this.allPages;\n    }\n    addComponents() {\n        this.establishPages();\n    }\n    setPage(num) {\n        if (num === this.page) {\n            return Promise.resolve();\n        }\n        if (num >= 0 && num < this.pages.length) {\n            this.page = num;\n            this.pageFieldLogic(num);\n            this.getNextPage();\n            let parentNum = num;\n            if (this.hasSubWizards) {\n                const pageFromPages = this.pages[num];\n                const pageFromComponents = this.components[num];\n                if (!pageFromComponents || (pageFromPages === null || pageFromPages === void 0 ? void 0 : pageFromPages.id) !== pageFromComponents.id) {\n                    parentNum = this.components.findIndex(comp => {\n                        var _a, _b;\n                        return comp.id === ((_b = (_a = this.pages) === null || _a === void 0 ? void 0 : _a[parentNum]) === null || _b === void 0 ? void 0 : _b.rootPanelId);\n                    });\n                }\n            }\n            if (!this._seenPages.includes(parentNum)) {\n                this._seenPages = this._seenPages.concat(parentNum);\n            }\n            return this.redraw().then(() => {\n                this.checkData(this.submission.data);\n                this.triggerCaptcha(this.currentPage.components);\n                const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();\n                if (this.alert) {\n                    this.showErrors(errors, true, true);\n                }\n            });\n        }\n        else if (!this.pages.length) {\n            this.redraw();\n            return Promise.resolve();\n        }\n        return Promise.reject('Page not found');\n    }\n    pageFieldLogic(page) {\n        var _a;\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[page]) {\n            // Handle field logic on pages.\n            this.component = this.pages[page].component;\n            this.originalComponent = (0, utils_1.fastCloneDeep)(this.component);\n            this.fieldLogic(this.data);\n            // If disabled changed, be sure to distribute the setting.\n            this.disabled = this.shouldDisabled;\n        }\n    }\n    get currentPage() {\n        return (this.pages && (this.pages.length >= this.page)) ? this.pages[this.page] : { components: [] };\n    }\n    getNextPage() {\n        var _a;\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[this.page]) {\n            const data = this.submission.data;\n            const form = this.pages[this.page].component;\n            // Check conditional nextPage\n            if (form) {\n                const page = this.pages.length > (this.page + 1) && !this.showAllErrors ? this.page + 1 : -1;\n                if (form.nextPage) {\n                    const next = this.evaluate(form.nextPage, {\n                        next: page,\n                        data,\n                        page,\n                        form\n                    }, 'next');\n                    if (next === null) {\n                        this.currentNextPage = null;\n                        return null;\n                    }\n                    const pageNum = parseInt(next, 10);\n                    if (!isNaN(parseInt(pageNum, 10)) && isFinite(pageNum)) {\n                        this.currentNextPage = pageNum;\n                        return pageNum;\n                    }\n                    this.currentNextPage = this.getPageIndexByKey(next);\n                    return this.currentNextPage;\n                }\n                this.currentNextPage = page;\n                return page;\n            }\n            this.currentNextPage = null;\n        }\n        return null;\n    }\n    getPreviousPage() {\n        return this.page - 1;\n    }\n    beforeSubmit() {\n        const pages = this.getPages({ all: true });\n        return Promise.all(pages.map((page) => {\n            this.triggerButtonCaptcha(page);\n            page.options.beforeSubmit = true;\n            return page.beforeSubmit();\n        }));\n    }\n    beforePage(next) {\n        return new Promise((resolve, reject) => {\n            this.hook(next ? 'beforeNext' : 'beforePrev', this.currentPage, this.submission, (err) => {\n                if (err) {\n                    this.showErrors(err, true);\n                    reject(err);\n                }\n                const form = this.currentPage;\n                if (form) {\n                    form.beforePage(next).then(resolve).catch(reject);\n                }\n                else {\n                    resolve();\n                }\n            });\n        });\n    }\n    emitNextPage() {\n        this.emit('nextPage', { page: this.page, submission: this.submission });\n    }\n    nextPage() {\n        // Read-only forms should not worry about validation before going to next page, nor should they submit.\n        if (this.options.readOnly) {\n            return this.beforePage(true).then(() => {\n                return this.setPage(this.getNextPage()).then(() => {\n                    this.emitNextPage();\n                });\n            });\n        }\n        // Validate the form before going to the next page\n        const currentPageErrors = this.validateCurrentPage({ dirty: true });\n        const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : currentPageErrors;\n        // allow going to the next page if the current page is valid, even if there are form level errors\n        if (currentPageErrors.length === 0) {\n            this.checkData(this.submission.data);\n            return this.beforePage(true).then(() => {\n                return this.setPage(this.getNextPage()).then(() => {\n                    if (!(this.options.readOnly || this.editMode) && this.enabledIndex < this.page) {\n                        this.enabledIndex = this.page;\n                        this.redraw();\n                    }\n                    this.emitNextPage();\n                });\n            });\n        }\n        else {\n            this.currentPage.components.forEach((comp) => comp.setPristine(false));\n            this.scrollIntoView(this.element, true);\n            return Promise.reject(this.showErrors(errors, true));\n        }\n    }\n    validateCurrentPage(flags = {}) {\n        var _a, _b, _c, _d;\n        const components = (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components.map((component) => component.component);\n        // Accessing the parent ensures the right instance (whether it's the parent Wizard or a nested Wizard) performs its validation\n        if ((_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.parent) {\n            return (_c = this.currentPage) === null || _c === void 0 ? void 0 : _c.parent.validateComponents(components, this.root.data, flags);\n        }\n        return (_d = this.currentPage) === null || _d === void 0 ? void 0 : _d.validateComponents(components, this.root ? this.root.data : this.data, flags);\n    }\n    emitPrevPage() {\n        this.emit('prevPage', { page: this.page, submission: this.submission });\n    }\n    prevPage() {\n        return this.beforePage().then(() => {\n            return this.setPage(this.getPreviousPage()).then(() => {\n                this.emitPrevPage();\n            });\n        });\n    }\n    cancel(noconfirm) {\n        if (this.options.readOnly) {\n            return Promise.resolve();\n        }\n        if (super.cancel(noconfirm)) {\n            this.setPristine(true);\n            return this.setPage(0).then(() => {\n                if (this.enabledIndex) {\n                    this.enabledIndex = 0;\n                }\n                this.onChange({ resetValue: true });\n                this.redraw();\n                return this.page;\n            });\n        }\n        return Promise.resolve();\n    }\n    getPageIndexByKey(key) {\n        let pageIndex = this.page;\n        this.pages.forEach((page, index) => {\n            if (page.component.key === key) {\n                pageIndex = index;\n                return false;\n            }\n        });\n        return pageIndex;\n    }\n    get schema() {\n        return this.wizard;\n    }\n    setComponentSchema() {\n        const pageKeys = {};\n        this.originalComponents = [];\n        this.component.components.map((item) => {\n            if (item.type === 'panel') {\n                item.key = (0, utils_1.uniqueKey)(pageKeys, (item.key || 'panel'));\n                pageKeys[item.key] = true;\n                if (this.wizard.full) {\n                    this.options.show = this.options.show || {};\n                    this.options.show[item.key] = true;\n                }\n                else if (Object.prototype.hasOwnProperty.call(this.wizard, 'full')\n                    && !lodash_1.default.isEqual(this.originalOptions.show, this.options.show)) {\n                    this.options.show = Object.assign({}, (this.originalOptions.show || {}));\n                }\n            }\n            this.originalComponents.push(lodash_1.default.clone(item));\n        });\n        if (!Object.keys(pageKeys).length) {\n            const newPage = {\n                type: 'panel',\n                title: 'Page 1',\n                label: 'Page 1',\n                key: 'page1',\n                components: this.component.components\n            };\n            this.component.components = [newPage];\n            this.originalComponents.push(lodash_1.default.clone(newPage));\n        }\n    }\n    setForm(form, flags = {}) {\n        if (!form) {\n            return;\n        }\n        return super.setForm(form, flags);\n    }\n    onSetForm(clonedForm, initialForm) {\n        this.component.components = (this.parent ? initialForm.components : clonedForm.components) || [];\n        this.setComponentSchema();\n    }\n    setEditMode(submission) {\n        if (!this.editMode && submission._id && !this.options.readOnly) {\n            this.editMode = true;\n            this.redraw();\n        }\n    }\n    setValue(submission, flags = {}, ignoreEstablishment) {\n        if (!submission || !submission.data) {\n            submission = {\n                data: {},\n            };\n        }\n        const changed = this.getPages({ all: true }).reduce((changed, page) => {\n            return this.setNestedValue(page, submission.data, flags, changed) || changed;\n        }, false);\n        this.mergeData(this.data, submission.data);\n        if (changed) {\n            this.pageFieldLogic(this.page);\n        }\n        submission.data = this.data;\n        this._submission = submission;\n        if (!ignoreEstablishment) {\n            this.establishPages(submission.data);\n        }\n        this.setEditMode(submission);\n        return changed;\n    }\n    isClickable(page, index) {\n        return this.page !== index && (0, utils_1.firstNonNil)([\n            lodash_1.default.get(page, 'breadcrumbClickable'),\n            this.options.breadcrumbSettings.clickable\n        ]);\n    }\n    hasButton(name, nextPage = this.getNextPage()) {\n        // get page options with global options as default values\n        const { previous = this.options.buttonSettings.showPrevious, cancel = this.options.buttonSettings.showCancel, submit = this.options.buttonSettings.showSubmit, next = this.options.buttonSettings.showNext } = lodash_1.default.get(this.currentPage, 'component.buttonSettings', {});\n        switch (name) {\n            case 'previous':\n                return previous && (this.getPreviousPage() > -1);\n            case 'next':\n                return next && (nextPage !== null) && (nextPage !== -1);\n            case 'cancel':\n                return cancel && !this.options.readOnly;\n            case 'submit':\n                return submit && !this.options.readOnly && ((nextPage === null) || (this.page === (this.pages.length - 1)));\n            default:\n                return true;\n        }\n    }\n    pageId(page) {\n        if (page.key) {\n            // Some panels have the same key....\n            return `${page.key}-${page.title}`;\n        }\n        else if (page.components &&\n            page.components.length > 0) {\n            return this.pageId(page.components[0]);\n        }\n        else {\n            return page.title;\n        }\n    }\n    onChange(flags, changed, modified, changes) {\n        var _a;\n        super.onChange(flags, changed, modified, changes);\n        // The onChange loop doesn't need all components for wizards\n        const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();\n        if (this.alert) {\n            this.showErrors(errors, true, true);\n        }\n        // If the pages change, need to redraw the header.\n        const currentPanels = this.pages;\n        // calling this.establishPages() updates/mutates this.pages to be the current pages\n        this.establishPages();\n        const newPanels = this.pages;\n        const currentNextPage = this.currentNextPage;\n        const panelsUpdated = !lodash_1.default.isEqual(newPanels, currentPanels);\n        if (((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.id) && this.pages.length && (!this.hasSubWizards || (this.hasSubWizards && panelsUpdated))) {\n            const newIndex = this.pages.findIndex(page => page.id === this.currentPanel.id);\n            if (newIndex !== -1)\n                this.setPage(newIndex);\n        }\n        if (panelsUpdated || (flags && flags.fromSubmission)) {\n            this.redrawHeader();\n        }\n        // If the next page changes, then make sure to redraw navigation.\n        if (currentNextPage !== this.getNextPage()) {\n            this.redrawNavigation();\n        }\n        if (this.options.readOnly && (this.prefixComps.length || this.suffixComps.length)) {\n            this.redraw();\n        }\n    }\n    rebuild() {\n        const currentPage = this.page;\n        const setCurrentPage = () => this.setPage(currentPage);\n        return super.rebuild().then(setCurrentPage);\n    }\n    checkValidity(data, dirty, row, currentPageOnly, childErrors = []) {\n        if (!this.checkCondition(row, data)) {\n            this.setCustomValidity('');\n            return true;\n        }\n        const components = !currentPageOnly || this.isLastPage()\n            ? this.getComponents()\n            : this.currentPage.components;\n        return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, currentPageOnly, childErrors) && check, true);\n    }\n    get errors() {\n        return !this.isLastPage() && !this.submitted ? this.currentPage.errors : super.errors;\n    }\n    focusOnComponent(key) {\n        const component = this.getComponent(key);\n        if (component) {\n            let topPanel = component.parent;\n            while (!(topPanel.parent instanceof Wizard)) {\n                topPanel = topPanel.parent;\n            }\n            const pageIndex = this.pages.findIndex(page => page.id === topPanel.id);\n            if (pageIndex >= 0) {\n                const page = this.pages[pageIndex];\n                if (page && page !== this.currentPage) {\n                    return this.setPage(pageIndex).then(() => super.focusOnComponent(key));\n                }\n            }\n        }\n        return super.focusOnComponent(key);\n    }\n    triggerButtonCaptcha(page) {\n        if (!page.components) {\n            return;\n        }\n        let captchaComponent;\n        page.eachComponent((component) => {\n            if (/^(re)?captcha$/.test(component.component.type) &&\n                component.component.eventType === 'buttonClick' &&\n                component.component.buttonKey === 'submit') {\n                captchaComponent = component;\n            }\n        });\n        if (captchaComponent) {\n            captchaComponent.verify(`submitClick`);\n        }\n    }\n}\nexports[\"default\"] = Wizard;\nWizard.setBaseUrl = Formio_1.Formio.setBaseUrl;\nWizard.setApiUrl = Formio_1.Formio.setApiUrl;\nWizard.setAppUrl = Formio_1.Formio.setAppUrl;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Wizard.js?");
 
 /***/ }),
 
@@ -5413,7 +5413,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst WebformBuilder_1 = __importDefault(__webpack_require__(/*! ./WebformBuilder */ \"./lib/cjs/WebformBuilder.js\"));\nconst Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.js\"));\nconst builder_1 = __importDefault(__webpack_require__(/*! ./utils/builder */ \"./lib/cjs/utils/builder.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst utils_1 = __webpack_require__(/*! ./utils */ \"./lib/cjs/utils/index.js\");\nclass WizardBuilder extends WebformBuilder_1.default {\n    constructor() {\n        let element, options;\n        if (arguments[0] instanceof HTMLElement || arguments[1]) {\n            element = arguments[0];\n            options = arguments[1];\n        }\n        else {\n            options = arguments[0];\n        }\n        // Reset skipInit in case PDFBuilder has set it.\n        options.skipInit = false;\n        options.display = 'wizard';\n        super(element, options);\n        this._form = {\n            components: [\n                this.getPageConfig(1),\n            ],\n        };\n        this.page = 0;\n        // Need to create a component order for each group.\n        for (const group in this.groups) {\n            if (this.groups[group] && this.groups[group].components) {\n                this.groups[group].componentOrder = Object.keys(this.groups[group].components)\n                    .map(key => this.groups[group].components[key])\n                    .filter(component => component && !component.ignore)\n                    .sort((a, b) => a.weight - b.weight)\n                    .map(component => component.key);\n            }\n        }\n        const originalRenderComponentsHook = this.options.hooks.renderComponents;\n        this.options.hooks.renderComponents = (html, { components, self }) => {\n            if (self.type === 'form' && !self.root) {\n                return html;\n            }\n            else {\n                return originalRenderComponentsHook(html, { components, self });\n            }\n        };\n        const originalAttachComponentsHook = this.options.hooks.attachComponents;\n        this.options.hooks.attachComponents = (element, components, container, component) => {\n            if (component.type === 'form' && !component.root) {\n                return element;\n            }\n            return originalAttachComponentsHook(element, components, container, component);\n        };\n        // Wizard pages don't replace themselves in the right array. Do that here.\n        this.on('saveComponent', (component, originalComponent) => {\n            const webformComponents = this.webform.components.map(({ component }) => component);\n            if (this._form.components.includes(originalComponent)) {\n                this._form.components[this._form.components.indexOf(originalComponent)] = component;\n                this.rebuild();\n            }\n            else if (webformComponents.includes(originalComponent)) {\n                this._form.components.push(component);\n                this.rebuild();\n            }\n            else {\n                // Fallback to look for panel based on key.\n                const formComponentIndex = this._form.components.findIndex((comp) => originalComponent.key === comp.key);\n                if (formComponentIndex !== -1) {\n                    this._form.components[formComponentIndex] = component;\n                    this.rebuild();\n                }\n            }\n        }, true);\n    }\n    removeComponent(component, parent, original) {\n        const remove = super.removeComponent(component, parent, original);\n        // If user agrees to remove the whole group of the components and it could be a Wizard page, find it and remove\n        if (remove && component.type === 'panel') {\n            const pageIndex = this.pages.findIndex((page) => page.key === component.key);\n            const componentIndex = this._form.components.findIndex((comp) => comp.key === component.key);\n            if (pageIndex !== -1) {\n                this.removePage(pageIndex, componentIndex);\n            }\n        }\n        return remove;\n    }\n    allowDrop(element) {\n        return (this.webform && this.webform.refs && this.webform.refs.webform === element) ? false : true;\n    }\n    get pages() {\n        return lodash_1.default.filter(this._form.components, { type: 'panel' });\n    }\n    get currentPage() {\n        const pages = this.pages;\n        return (pages && (pages.length >= this.page)) ? pages[this.page] : null;\n    }\n    setForm(value) {\n        this._form = value;\n        if (!this._form.components || !Array.isArray(this._form.components)) {\n            this._form.components = [];\n        }\n        if (this.pages.length === 0) {\n            const components = this._form.components.filter((component) => component.type !== 'button');\n            this._form.components = [this.getPageConfig(1, components)];\n        }\n        else {\n            const components = this._form.components\n                .filter((component) => component.type !== 'button' || component.action !== 'submit');\n            this._form.components = components;\n        }\n        this.rebuild();\n    }\n    set form(value) {\n        this.setForm(value);\n    }\n    get form() {\n        return this._form;\n    }\n    get schema() {\n        lodash_1.default.assign(this.currentPage, this.webform._form.components[0]);\n        const webform = new Webform_1.default(this.options);\n        webform.setForm(this._form, { noEmit: true });\n        return webform.schema;\n    }\n    render() {\n        return this.renderTemplate('builderWizard', {\n            sidebar: this.renderTemplate('builderSidebar', {\n                scrollEnabled: this.sideBarScroll,\n                groupOrder: this.groupOrder,\n                groupId: `builder-sidebar-${this.id}`,\n                groups: this.groupOrder.map((groupKey) => this.renderTemplate('builderSidebarGroup', {\n                    group: this.groups[groupKey],\n                    groupKey,\n                    groupId: `builder-sidebar-${this.id}`,\n                    subgroups: this.groups[groupKey].subgroups.map((group) => this.renderTemplate('builderSidebarGroup', {\n                        group,\n                        groupKey: group.key,\n                        groupId: `group-container-${groupKey}`,\n                        subgroups: []\n                    })),\n                })),\n            }),\n            pages: this.pages,\n            form: this.webform.render(),\n        });\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            addPage: 'multiple',\n            gotoPage: 'multiple',\n        });\n        this.refs.gotoPage.forEach((page, index) => {\n            page.parentNode.dragInfo = { index };\n        });\n        if (this.dragulaLib) {\n            this.navigationDragula = this.dragulaLib([this.element.querySelector('.wizard-pages')], {\n                moves: (el) => (!el.classList.contains('wizard-add-page')),\n                accepts: (el, target, source, sibling) => (sibling ? true : false),\n            })\n                .on('drop', this.onReorder.bind(this));\n        }\n        this.refs.addPage.forEach(link => {\n            this.addEventListener(link, 'click', (event) => {\n                event.preventDefault();\n                this.addPage();\n            });\n        });\n        this.refs.gotoPage.forEach((link, index) => {\n            this.addEventListener(link, 'click', (event) => {\n                event.preventDefault();\n                this.setPage(index);\n            });\n        });\n        return super.attach(element);\n    }\n    detach() {\n        if (this.navigationDragula) {\n            this.navigationDragula.destroy();\n        }\n        this.navigationDragula = null;\n        super.detach();\n    }\n    rebuild() {\n        var _a;\n        const page = this.currentPage;\n        this.webform.setForm({\n            display: 'form',\n            type: 'form',\n            components: page ? [page] : [],\n            controller: ((_a = this._form) === null || _a === void 0 ? void 0 : _a.controller) || ''\n        }, { keepAsReference: true });\n        return this.redraw();\n    }\n    addPage(page) {\n        const newPage = page && page.schema ? (0, utils_1.fastCloneDeep)(page.schema) : this.getPageConfig(this.pages.length + 1);\n        builder_1.default.uniquify(this._form.components, newPage);\n        this._form.components.push(newPage);\n        this.emitSaveComponentEvent(newPage, newPage, this._form, 'components', (this._form.components.length - 1), true, newPage);\n        this.emit('change', this._form);\n        return this.rebuild();\n    }\n    removePage(pageIndex, componentIndex) {\n        this._form.components.splice(componentIndex, 1);\n        this.emit('change', this._form);\n        if (pageIndex === this.pages.length) {\n            // If the last page is removed.\n            if (pageIndex === 0) {\n                this._form.components.push(this.getPageConfig(1));\n                return this.rebuild();\n            }\n            else {\n                return this.setPage(pageIndex - 1);\n            }\n        }\n        else {\n            return this.rebuild();\n        }\n    }\n    onReorder(element, _target, _source, sibling) {\n        const isSiblingAnAddPageButton = sibling === null || sibling === void 0 ? void 0 : sibling.classList.contains('wizard-add-page');\n        // We still can paste before Add Page button\n        if (!element.dragInfo || (sibling && !sibling.dragInfo && !isSiblingAnAddPageButton)) {\n            console.warn('There is no Drag Info available for either dragged or sibling element');\n            return;\n        }\n        const oldPosition = element.dragInfo.index;\n        //should drop at next sibling position; no next sibling means drop to last position\n        const newPosition = (sibling && sibling.dragInfo ? sibling.dragInfo.index : this.pages.length);\n        const movedBelow = newPosition > oldPosition;\n        const formComponents = (0, utils_1.fastCloneDeep)(this._form.components);\n        const draggedRowData = this._form.components[oldPosition];\n        //insert element at new position\n        formComponents.splice(newPosition, 0, draggedRowData);\n        //remove element from old position (if was moved above, after insertion it's at +1 index)\n        formComponents.splice(movedBelow ? oldPosition : oldPosition + 1, 1);\n        this._form.components = (0, utils_1.fastCloneDeep)(formComponents);\n        return this.rebuild().then(() => {\n            this.emit('change', this._form);\n        });\n    }\n    setPage(index) {\n        if (index === this.page) {\n            return;\n        }\n        this.page = index;\n        return this.rebuild();\n    }\n    getPageConfig(index, components = []) {\n        return {\n            title: `Page ${index}`,\n            label: `Page ${index}`,\n            type: 'panel',\n            key: `page${index}`,\n            components,\n        };\n    }\n    pasteComponent(component) {\n        if (component instanceof WizardBuilder) {\n            return;\n        }\n        if (this._form.components.find(comp => lodash_1.default.isEqual(component.component, comp))) {\n            this.addPage(component);\n        }\n        else {\n            return super.pasteComponent(component);\n        }\n    }\n}\nexports[\"default\"] = WizardBuilder;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/WizardBuilder.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 WebformBuilder_1 = __importDefault(__webpack_require__(/*! ./WebformBuilder */ \"./lib/cjs/WebformBuilder.js\"));\nconst Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.js\"));\nconst builder_1 = __importDefault(__webpack_require__(/*! ./utils/builder */ \"./lib/cjs/utils/builder.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst utils_1 = __webpack_require__(/*! ./utils */ \"./lib/cjs/utils/index.js\");\nclass WizardBuilder extends WebformBuilder_1.default {\n    constructor() {\n        let element, options;\n        if (arguments[0] instanceof HTMLElement || arguments[1]) {\n            element = arguments[0];\n            options = arguments[1];\n        }\n        else {\n            options = arguments[0];\n        }\n        // Reset skipInit in case PDFBuilder has set it.\n        options.skipInit = false;\n        options.display = 'wizard';\n        super(element, options);\n        this._form = {\n            components: [\n                this.getPageConfig(1),\n            ],\n        };\n        this.page = 0;\n        // Need to create a component order for each group.\n        for (const group in this.groups) {\n            if (this.groups[group] && this.groups[group].components) {\n                this.groups[group].componentOrder = Object.keys(this.groups[group].components)\n                    .map(key => this.groups[group].components[key])\n                    .filter(component => component && !component.ignore)\n                    .sort((a, b) => a.weight - b.weight)\n                    .map(component => component.key);\n            }\n        }\n        const originalRenderComponentsHook = this.options.hooks.renderComponents;\n        this.options.hooks.renderComponents = (html, { components, self }) => {\n            if (self.type === 'form' && !self.root) {\n                return html;\n            }\n            else {\n                return originalRenderComponentsHook(html, { components, self });\n            }\n        };\n        const originalAttachComponentsHook = this.options.hooks.attachComponents;\n        this.options.hooks.attachComponents = (element, components, container, component) => {\n            if (component.type === 'form' && !component.root) {\n                return element;\n            }\n            return originalAttachComponentsHook(element, components, container, component);\n        };\n        // Wizard pages don't replace themselves in the right array. Do that here.\n        this.on('saveComponent', (component, originalComponent) => {\n            const webformComponents = this.webform.components.map(({ component }) => component);\n            if (this._form.components.includes(originalComponent)) {\n                this._form.components[this._form.components.indexOf(originalComponent)] = component;\n                this.rebuild();\n            }\n            else if (webformComponents.includes(originalComponent)) {\n                this._form.components.push(component);\n                this.rebuild();\n            }\n            else {\n                // Fallback to look for panel based on key.\n                const formComponentIndex = this._form.components.findIndex((comp) => originalComponent.key === comp.key);\n                if (formComponentIndex !== -1) {\n                    this._form.components[formComponentIndex] = component;\n                    this.rebuild();\n                }\n            }\n        }, true);\n    }\n    removeComponent(component, parent, original) {\n        const remove = super.removeComponent(component, parent, original);\n        // If user agrees to remove the whole group of the components and it could be a Wizard page, find it and remove\n        if (remove && component.type === 'panel') {\n            const pageIndex = this.pages.findIndex((page) => page.key === component.key);\n            const componentIndex = this._form.components.findIndex((comp) => comp.key === component.key);\n            if (pageIndex !== -1) {\n                this.removePage(pageIndex, componentIndex);\n            }\n        }\n        return remove;\n    }\n    allowDrop(element) {\n        return (this.webform && this.webform.refs && this.webform.refs.webform === element) ? false : true;\n    }\n    get pages() {\n        return lodash_1.default.filter(this._form.components, { type: 'panel' });\n    }\n    get currentPage() {\n        const pages = this.pages;\n        return (pages && (pages.length >= this.page)) ? pages[this.page] : null;\n    }\n    setForm(value) {\n        this._form = value;\n        if (!this._form.components || !Array.isArray(this._form.components)) {\n            this._form.components = [];\n        }\n        if (this.pages.length === 0) {\n            const components = this._form.components.filter((component) => component.type !== 'button');\n            this._form.components = [this.getPageConfig(1, components)];\n        }\n        else {\n            const components = this._form.components\n                .filter((component) => component.type !== 'button' || component.action !== 'submit');\n            this._form.components = components;\n        }\n        this.rebuild();\n    }\n    set form(value) {\n        this.setForm(value);\n    }\n    get form() {\n        return this._form;\n    }\n    get schema() {\n        lodash_1.default.assign(this.currentPage, this.webform._form.components[0]);\n        const webform = new Webform_1.default(this.options);\n        webform.setForm(this._form, { noEmit: true });\n        return webform.schema;\n    }\n    render() {\n        return this.renderTemplate('builderWizard', {\n            sidebar: this.renderTemplate('builderSidebar', {\n                scrollEnabled: this.sideBarScroll,\n                groupOrder: this.groupOrder,\n                groupId: `builder-sidebar-${this.id}`,\n                groups: this.groupOrder.map((groupKey) => this.renderTemplate('builderSidebarGroup', {\n                    group: this.groups[groupKey],\n                    groupKey,\n                    groupId: `builder-sidebar-${this.id}`,\n                    subgroups: this.groups[groupKey].subgroups.map((group) => this.renderTemplate('builderSidebarGroup', {\n                        group,\n                        groupKey: group.key,\n                        groupId: `group-container-${groupKey}`,\n                        subgroups: []\n                    })),\n                })),\n            }),\n            pages: this.pages,\n            form: this.webform.render(),\n        });\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            addPage: 'multiple',\n            gotoPage: 'multiple',\n        });\n        this.refs.gotoPage.forEach((page, index) => {\n            page.parentNode.dragInfo = { index };\n        });\n        if (this.dragulaLib) {\n            this.navigationDragula = this.dragulaLib([this.element.querySelector('.wizard-pages')], {\n                moves: (el) => (!el.classList.contains('wizard-add-page')),\n                accepts: (el, target, source, sibling) => (sibling ? true : false),\n            })\n                .on('drop', this.onReorder.bind(this));\n        }\n        this.refs.addPage.forEach(link => {\n            this.addEventListener(link, 'click', (event) => {\n                event.preventDefault();\n                this.addPage();\n            });\n        });\n        this.refs.gotoPage.forEach((link, index) => {\n            this.addEventListener(link, 'click', (event) => {\n                event.preventDefault();\n                this.setPage(index);\n            });\n        });\n        return super.attach(element);\n    }\n    detach() {\n        if (this.navigationDragula) {\n            this.navigationDragula.destroy();\n        }\n        this.navigationDragula = null;\n        super.detach();\n    }\n    destroy(all = false) {\n        this.off('saveComponent');\n        super.destroy(all);\n    }\n    rebuild() {\n        var _a;\n        const page = this.currentPage;\n        this.webform.setForm({\n            display: 'form',\n            type: 'form',\n            components: page ? [page] : [],\n            controller: ((_a = this._form) === null || _a === void 0 ? void 0 : _a.controller) || ''\n        }, { keepAsReference: true });\n        return this.redraw();\n    }\n    addPage(page) {\n        const newPage = page && page.schema ? (0, utils_1.fastCloneDeep)(page.schema) : this.getPageConfig(this.pages.length + 1);\n        builder_1.default.uniquify(this._form.components, newPage);\n        this._form.components.push(newPage);\n        this.emitSaveComponentEvent(newPage, newPage, this._form, 'components', (this._form.components.length - 1), true, newPage);\n        this.emit('change', this._form);\n        return this.rebuild();\n    }\n    removePage(pageIndex, componentIndex) {\n        this._form.components.splice(componentIndex, 1);\n        this.emit('change', this._form);\n        if (pageIndex === this.pages.length) {\n            // If the last page is removed.\n            if (pageIndex === 0) {\n                this._form.components.push(this.getPageConfig(1));\n                return this.rebuild();\n            }\n            else {\n                return this.setPage(pageIndex - 1);\n            }\n        }\n        else {\n            return this.rebuild();\n        }\n    }\n    onReorder(element, _target, _source, sibling) {\n        const isSiblingAnAddPageButton = sibling === null || sibling === void 0 ? void 0 : sibling.classList.contains('wizard-add-page');\n        // We still can paste before Add Page button\n        if (!element.dragInfo || (sibling && !sibling.dragInfo && !isSiblingAnAddPageButton)) {\n            console.warn('There is no Drag Info available for either dragged or sibling element');\n            return;\n        }\n        const oldPosition = element.dragInfo.index;\n        //should drop at next sibling position; no next sibling means drop to last position\n        const newPosition = (sibling && sibling.dragInfo ? sibling.dragInfo.index : this.pages.length);\n        const movedBelow = newPosition > oldPosition;\n        const formComponents = (0, utils_1.fastCloneDeep)(this._form.components);\n        const draggedRowData = this._form.components[oldPosition];\n        //insert element at new position\n        formComponents.splice(newPosition, 0, draggedRowData);\n        //remove element from old position (if was moved above, after insertion it's at +1 index)\n        formComponents.splice(movedBelow ? oldPosition : oldPosition + 1, 1);\n        this._form.components = (0, utils_1.fastCloneDeep)(formComponents);\n        return this.rebuild().then(() => {\n            this.emit('change', this._form);\n        });\n    }\n    setPage(index) {\n        if (index === this.page) {\n            return;\n        }\n        this.page = index;\n        return this.rebuild();\n    }\n    getPageConfig(index, components = []) {\n        return {\n            title: `Page ${index}`,\n            label: `Page ${index}`,\n            type: 'panel',\n            key: `page${index}`,\n            components,\n        };\n    }\n    pasteComponent(component) {\n        if (component instanceof WizardBuilder) {\n            return;\n        }\n        if (this._form.components.find(comp => lodash_1.default.isEqual(component.component, comp))) {\n            this.addPage(component);\n        }\n        else {\n            return super.pasteComponent(component);\n        }\n    }\n}\nexports[\"default\"] = WizardBuilder;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/WizardBuilder.js?");
 
 /***/ }),
 
@@ -5699,7 +5699,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Field_1 = __importDefault(__webpack_require__(/*! ../field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst Components_1 = __importDefault(__webpack_require__(/*! ../../Components */ \"./lib/cjs/components/Components.js\"));\n'';\nconst utils_1 = __importDefault(__webpack_require__(/*! ../../../utils */ \"./lib/cjs/utils/index.js\"));\nconst process_1 = __webpack_require__(/*! @formio/core/process */ \"./node_modules/@formio/core/lib/process/index.js\");\n/**\n * NestedComponent class.\n * @augments Field\n */\nclass NestedComponent extends Field_1.default {\n    static schema(...extend) {\n        return Field_1.default.schema({\n            tree: false,\n            lazyLoad: false,\n        }, ...extend);\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        this.type = 'components';\n        /**\n         * The collapsed state of this NestedComponent.\n         * @type {boolean}\n         * @default false\n         * @private\n         */\n        this._collapsed = !!this.component.collapsed;\n    }\n    get defaultSchema() {\n        return NestedComponent.schema();\n    }\n    /**\n     * Get the schema for the NestedComponent.\n     * @returns {object} The schema for the NestedComponent.\n     * @override\n     */\n    get schema() {\n        const schema = super.schema;\n        const components = lodash_1.default.uniqBy(this.getComponents(), 'component.key');\n        schema.components = lodash_1.default.map(components, 'schema');\n        return schema;\n    }\n    /**\n     * Get collapsed state.\n     * @returns {boolean} The collapsed state.\n     */\n    get collapsed() {\n        return this._collapsed;\n    }\n    /**\n     * Set collapsed state.\n     * @param {boolean} value - The collapsed state.\n     * @returns {void}\n     */\n    collapse(value) {\n        const promise = this.redraw();\n        if (!value) {\n            this.checkValidity(this.data, !this.pristine);\n        }\n        return promise;\n    }\n    /**\n     * Set collapsed state.\n     * @param {boolean} value - The collapsed state.\n     * @returns {void}\n     */\n    set collapsed(value) {\n        this._collapsed = value;\n        this.collapse(value);\n    }\n    /**\n     * Set visible state of parent and each child component.\n     * @param {boolean} value - The visible state.\n     * @returns {void}\n     */\n    set visible(value) {\n        // DO NOT CALL super here.  There is an issue where clearOnHide was getting triggered with\n        // subcomponents because the \"parentVisible\" flag was set to false when it should really be\n        // set to true.\n        const visibilityChanged = this._visible !== value;\n        this._visible = value;\n        const isVisible = this.visible;\n        const forceShow = this.shouldForceShow();\n        const forceHide = this.shouldForceHide();\n        this.components.forEach((component) => {\n            // Set the parent visibility first since we may have nested components within nested components\n            // and they need to be able to determine their visibility based on the parent visibility.\n            component.parentVisible = isVisible;\n            let visible;\n            if (component.hasCondition()) {\n                visible = !component.conditionallyHidden();\n            }\n            else {\n                visible = !component.component.hidden;\n            }\n            if (forceShow || visible) {\n                component.visible = true;\n            }\n            else if (forceHide || !isVisible || !visible) {\n                component.visible = false;\n            }\n            // If hiding a nested component, clear all errors below.\n            if (!component.visible) {\n                component.error = '';\n            }\n        });\n        if (visibilityChanged) {\n            this.redraw();\n        }\n    }\n    /**\n     * Get visible state.\n     * @returns {boolean} The visible state.\n     */\n    get visible() {\n        return super.visible;\n    }\n    /**\n     * Set parent visibility.\n     * @param {boolean} value - The parent visibility.\n     * @returns {void}\n     */\n    set parentVisible(value) {\n        super.parentVisible = value;\n        this.components.forEach(component => component.parentVisible = this.visible);\n    }\n    /**\n     * Get parent visibility.\n     * @returns {boolean} The parent visibility.\n     */\n    get parentVisible() {\n        return super.parentVisible;\n    }\n    /**\n     * Get the disabled state.\n     * @returns {boolean} - The disabled state.\n     */\n    get disabled() {\n        return super.disabled;\n    }\n    /**\n     * Set the disabled state.\n     * @param {boolean} disabled - The disabled state.\n     */\n    set disabled(disabled) {\n        super.disabled = disabled;\n        this.components.forEach((component) => component.parentDisabled = disabled);\n    }\n    /**\n     * Set parent disabled state.\n     * @param {boolean} value - The parent disabled state.\n     * @returns {void}\n     */\n    set parentDisabled(value) {\n        super.parentDisabled = value;\n        this.components.forEach(component => {\n            component.parentDisabled = this.disabled;\n        });\n    }\n    /**\n     * Get parent disabled state.\n     * @returns {boolean} The parent disabled state.\n     */\n    get parentDisabled() {\n        return super.parentDisabled;\n    }\n    /**\n     * Get ready state from all components.\n     * @returns {Promise<Array>} - The promise that resolves when all components are ready.\n     */\n    get ready() {\n        return Promise.all(this.getComponents().map(component => component.ready));\n    }\n    /**\n     * Get currentForm object.\n     * @returns {object} - The current form object.\n     */\n    get currentForm() {\n        return super.currentForm;\n    }\n    /**\n     * Set currentForm object.\n     * @param {object} instance - The current form object.\n     * @returns {void}\n     */\n    set currentForm(instance) {\n        super.currentForm = instance;\n        this.getComponents().forEach(component => {\n            component.currentForm = instance;\n        });\n    }\n    /**\n     * Get Row Index.\n     * @returns {number} - The row index.\n     */\n    get rowIndex() {\n        return this._rowIndex;\n    }\n    /**\n     * Set Row Index to row and update each component.\n     * @param {number} value - The row index.\n     * @returns {void}\n     */\n    set rowIndex(value) {\n        var _a, _b;\n        this._rowIndex = value;\n        this.paths = utils_1.default.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths) || {})), { dataIndex: value }));\n        this.eachComponent((component) => {\n            component.rowIndex = value;\n        });\n    }\n    /**\n     * Get Contextual data of the component.\n     * @returns {object} - The contextual data of the component.\n     * @override\n     */\n    componentContext() {\n        return this._data;\n    }\n    /**\n     * Get the data of the component.\n     * @returns {object} - The data of the component.\n     * @override\n     */\n    get data() {\n        return this._data;\n    }\n    /**\n     * Set the data of the component.\n     * @param {object} value - The data of the component.\n     * @returns {void}\n     */\n    set data(value) {\n        this._data = value;\n        this.eachComponent((component) => {\n            component.data = this.componentContext(component);\n        });\n    }\n    /**\n     * Get components array.\n     * @returns {Array} - The components array.\n     */\n    getComponents() {\n        return this.components || [];\n    }\n    /**\n     * Perform a deep iteration over every component, including those\n     * within other container based components.\n     * @param {Function} fn - Called for every component.\n     * @param {any} options - The options to include with this everyComponent call.\n     */\n    everyComponent(fn, options = {}) {\n        const components = this.getComponents();\n        lodash_1.default.each(components, (component, index) => {\n            if (fn(component, components, index) === false) {\n                return false;\n            }\n            if (typeof component.everyComponent === 'function') {\n                if (component.everyComponent(fn, options) === false) {\n                    return false;\n                }\n            }\n        });\n    }\n    /**\n     * Check if the component has a component.\n     * @param {import('@formio/core').Component} component - The component to check.\n     * @returns {boolean} - TRUE if the component has a component, FALSE otherwise.\n     */\n    hasComponent(component) {\n        let result = false;\n        this.everyComponent((comp) => {\n            if (comp === component) {\n                result = true;\n                return false;\n            }\n        });\n        return result;\n    }\n    /**\n     * Get the flattened components of this NestedComponent.\n     * @returns {object} - The flattened components of this NestedComponent.\n     */\n    flattenComponents() {\n        const result = {};\n        this.everyComponent((component) => {\n            result[component.component.flattenAs || component.key] = component;\n        });\n        return result;\n    }\n    /**\n     * Perform an iteration over each component within this container component.\n     * @param {Function} fn - Called for each component\n     */\n    eachComponent(fn) {\n        lodash_1.default.each(this.getComponents(), (component, index) => {\n            if (fn(component, index) === false) {\n                return false;\n            }\n        });\n    }\n    /**\n     * Returns a component provided a key. This performs a deep search within the component tree.\n     * @param {string} path - The path to the component.\n     * @returns {any} - The component that is located.\n     */\n    getComponent(path) {\n        var _a;\n        // If the component is found\n        if (!this.componentMatches) {\n            this.componentMatches = {};\n        }\n        if (this.componentMatches && this.componentMatches[path]) {\n            return this.componentMatches[path];\n        }\n        path = utils_1.default.getStringFromComponentPath(path);\n        const matches = {\n            path: undefined,\n            fullPath: undefined,\n            localPath: undefined,\n            fullLocalPath: undefined,\n            dataPath: undefined,\n            localDataPath: undefined,\n            key: undefined,\n        };\n        this.everyComponent((component) => {\n            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;\n            // All searches are relative to this component so replace this path from the child paths.\n            utils_1.default.componentMatches(component.component, {\n                path: (_b = (_a = component.paths) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.replace(new RegExp(`^${(_c = this.paths) === null || _c === void 0 ? void 0 : _c.path}\\\\.?`), ''),\n                fullPath: (_e = (_d = component.paths) === null || _d === void 0 ? void 0 : _d.fullPath) === null || _e === void 0 ? void 0 : _e.replace(new RegExp(`^${(_f = this.paths) === null || _f === void 0 ? void 0 : _f.fullPath}\\\\.?`), ''),\n                localPath: (_h = (_g = component.paths) === null || _g === void 0 ? void 0 : _g.localPath) === null || _h === void 0 ? void 0 : _h.replace(new RegExp(`^${(_j = this.paths) === null || _j === void 0 ? void 0 : _j.localPath}\\\\.?`), ''),\n                fullLocalPath: (_l = (_k = component.paths) === null || _k === void 0 ? void 0 : _k.fullLocalPath) === null || _l === void 0 ? void 0 : _l.replace(new RegExp(`^${(_m = this.paths) === null || _m === void 0 ? void 0 : _m.fullLocalPath}\\\\.?`), ''),\n                dataPath: (_p = (_o = component.paths) === null || _o === void 0 ? void 0 : _o.dataPath) === null || _p === void 0 ? void 0 : _p.replace(new RegExp(`^${(_q = this.paths) === null || _q === void 0 ? void 0 : _q.dataPath}\\\\.?`), ''),\n                localDataPath: (_s = (_r = component.paths) === null || _r === void 0 ? void 0 : _r.localDataPath) === null || _s === void 0 ? void 0 : _s.replace(new RegExp(`^${(_t = this.paths) === null || _t === void 0 ? void 0 : _t.localDataPath}\\\\.?`), ''),\n            }, path, this.rowIndex, matches, (type, match) => {\n                match.instance = component;\n                return match;\n            });\n        });\n        this.componentMatches[path] = (_a = utils_1.default.getBestMatch(matches)) === null || _a === void 0 ? void 0 : _a.instance;\n        return this.componentMatches[path];\n    }\n    /**\n     * Return a component provided the Id of the component.\n     * @param {string} id - The Id of the component.\n     * @param {Function} fn - Called with the component once it is retrieved.\n     * @returns {object} - The component retrieved.\n     */\n    getComponentById(id, fn = null) {\n        let comp = null;\n        this.everyComponent((component, components) => {\n            if (component.id === id) {\n                comp = component;\n                if (fn) {\n                    fn(component, components);\n                }\n                return false;\n            }\n        });\n        return comp;\n    }\n    /**\n     * Create a new component and add it to the components array.\n     * @param {import('@formio/core').Component} component - The component JSON schema to create.\n     * @param {object} options - The options to create the component with.\n     * @param {import('@formio/core').DataObject} data - The submission data object to house the data for this component.\n     * @param {import('@formio/core').Component} [before] - The component before which to add this component.\n     * @param {import('@formio/core').Component} [replacedComp] - The component to replace with this component.\n     * @returns {any} - The created component instance.\n     */\n    createComponent(component, options, data, before, replacedComp) {\n        if (!component) {\n            return;\n        }\n        options = options || this.options;\n        data = data || this.data;\n        options.parent = this;\n        options.parentVisible = this.visible;\n        options.root = (options === null || options === void 0 ? void 0 : options.root) || this.root || this;\n        options.localRoot = this.localRoot;\n        options.skipInit = true;\n        if (!(options.display === 'pdf' && this.builderMode)) {\n            component.id = utils_1.default.getRandomComponentId();\n        }\n        const comp = Components_1.default.create(component, options, data, true);\n        comp.init();\n        if (component.internal) {\n            return comp;\n        }\n        if (before) {\n            const index = lodash_1.default.findIndex(this.components, { id: before.id });\n            if (index !== -1) {\n                this.components.splice(index, 0, comp);\n            }\n            else {\n                this.components.push(comp);\n            }\n        }\n        else if (replacedComp) {\n            const index = lodash_1.default.findIndex(this.components, { id: replacedComp.id });\n            if (index !== -1) {\n                this.components[index] = comp;\n            }\n            else {\n                this.components.push(comp);\n            }\n        }\n        else {\n            this.components.push(comp);\n        }\n        return comp;\n    }\n    getContainer() {\n        return this.element;\n    }\n    get componentComponents() {\n        return this.component.components || [];\n    }\n    get nestedKey() {\n        return `nested-${this.key}`;\n    }\n    get templateName() {\n        return 'container';\n    }\n    init() {\n        this.components = this.components || [];\n        this.addComponents();\n        return super.init();\n    }\n    /**\n     * Add a new component instance to the components array.\n     * @param {import('@formio/core').DataObject} [data] - The Submission data for this component.\n     * @param {object} [options] - The options for this component.\n     */\n    addComponents(data, options) {\n        data = data || this.data;\n        this.components = this.components || [];\n        options = options || this.options;\n        if (options.components) {\n            this.components = options.components;\n        }\n        else {\n            const components = this.hook('addComponents', this.componentComponents, this) || [];\n            components.forEach((component) => this.addComponent(component, data));\n        }\n    }\n    /**\n     * Add a new component to the components array.\n     * @param {import('@formio/core').Component} component - The component JSON schema to add.\n     * @param {object} data - The submission data object to house the data for this component.\n     * @param {HTMLElement} before - A DOM element to insert this element before.\n     * @param {boolean} [noAdd] - A possibly extraneous boolean flag.\n     * @returns {any} - The created component instance.\n     */\n    addComponent(component, data = null, before = null, noAdd = false) {\n        data = data || this.data;\n        this.components = this.components || [];\n        component = this.hook('addComponent', component, data, before, noAdd);\n        const comp = this.createComponent(component, this.options, data, before ? before : null);\n        if (noAdd) {\n            return comp;\n        }\n        return comp;\n    }\n    beforeFocus() {\n        if (this.parent && 'beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n    }\n    render(children) {\n        // If already rendering, don't re-render.\n        return super.render(children || this.renderTemplate(this.templateName, {\n            children: !this.visible ? '' : this.renderComponents(),\n            nestedKey: this.nestedKey,\n            collapsed: this.options.pdf ? false : this.collapsed,\n        }));\n    }\n    renderComponents(components) {\n        components = components || this.getComponents();\n        const children = components.map(component => component.render());\n        return this.renderTemplate('components', {\n            children,\n            components,\n        });\n    }\n    attach(element) {\n        const superPromise = super.attach(element);\n        this.loadRefs(element, {\n            header: 'single',\n            collapsed: this.collapsed,\n            [this.nestedKey]: 'single',\n            messageContainer: 'single-scope',\n        });\n        let childPromise = Promise.resolve();\n        if (this.refs[this.nestedKey]) {\n            childPromise = this.attachComponents(this.refs[this.nestedKey]);\n        }\n        if (!this.visible) {\n            this.attachComponentsLogic();\n        }\n        if (this.component.collapsible && this.refs.header) {\n            this.addEventListener(this.refs.header, 'click', () => {\n                this.collapsed = !this.collapsed;\n            });\n            this.addEventListener(this.refs.header, 'keydown', (e) => {\n                if (e.keyCode === 13 || e.keyCode === 32) {\n                    e.preventDefault();\n                    this.collapsed = !this.collapsed;\n                }\n            });\n        }\n        return Promise.all([\n            superPromise,\n            childPromise,\n        ]);\n    }\n    /**\n     * Attach the logic to the components.\n     * @param {import('@formio/core').Component[]} components - The components to attach logic to.\n     */\n    attachComponentsLogic(components) {\n        components = components || this.components;\n        lodash_1.default.each(components, (comp) => {\n            comp.attachLogic();\n            if (lodash_1.default.isFunction(comp.attachComponentsLogic)) {\n                comp.attachComponentsLogic();\n            }\n        });\n    }\n    attachComponents(element, components, container) {\n        components = components || this.components;\n        container = container || this.component.components;\n        element = this.hook('attachComponents', element, components, container, this);\n        if (!element) {\n            // Return a non-resolving promise.\n            return (new Promise(() => { }));\n        }\n        let index = 0;\n        const promises = [];\n        Array.prototype.slice.call(element.children).forEach(child => {\n            if (!child.getAttribute('data-noattach') && components[index]) {\n                promises.push(components[index].attach(child));\n                index++;\n            }\n        });\n        return Promise.all(promises);\n    }\n    /**\n     * Remove a component from the components array and from the children object\n     * @param {import('@formio/core').Component} component - The component to remove from the components.\n     * @param {import('@formio/core').Component[]} components - An array of components to remove this component from.\n     * @param {boolean} [all] - If set to TRUE will cascade remove all components.\n     */\n    removeComponent(component, components, all = false) {\n        var _a, _b;\n        components = components || this.components;\n        component.destroy(all);\n        lodash_1.default.remove(components, { id: component.id });\n        if (this.componentsMap[component.path]) {\n            delete this.componentsMap[component.path];\n        }\n        if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.componentsMap[component.path]) {\n            (_b = this.root) === null || _b === void 0 ? true : delete _b.componentsMap[component.path];\n        }\n    }\n    /**\n     * Removes a component provided the API key of that component.\n     * @param {string} key - The API key of the component to remove.\n     * @param {Function} fn - Called once the component is removed.\n     * @returns {null|void} - Returns nothing if the component is not found.\n     */\n    removeComponentByKey(key, fn = null) {\n        const comp = this.getComponent(key, (component, components) => {\n            this.removeComponent(component, components);\n            if (fn) {\n                fn(component, components);\n            }\n        });\n        if (!comp) {\n            if (fn) {\n                fn(null);\n            }\n            return null;\n        }\n    }\n    /**\n     * Removes a component provided the Id of the component.\n     * @param {string} id - The Id of the component to remove.\n     * @param {Function} fn - Called when the component is removed.\n     * @returns {null|void} - Returns nothing if the component is not found.\n     */\n    removeComponentById(id, fn = null) {\n        const comp = this.getComponentById(id, (component, components) => {\n            this.removeComponent(component, components);\n            if (fn) {\n                fn(component, components);\n            }\n        });\n        if (!comp) {\n            if (fn) {\n                fn(null);\n            }\n            return null;\n        }\n    }\n    updateValue(value, flags = {}) {\n        return this.components.reduce((changed, comp) => {\n            return comp.updateValue(null, flags) || changed;\n        }, super.updateValue(value, flags));\n    }\n    shouldSkipValidation(data, row, flags) {\n        // Nested components with no input should not be validated.\n        if (!this.component.input) {\n            return true;\n        }\n        else {\n            return super.shouldSkipValidation(data, row, flags);\n        }\n    }\n    checkData(data, flags, row, components) {\n        if (this.builderMode) {\n            return true;\n        }\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        components = components && lodash_1.default.isArray(components) ? components : this.getComponents();\n        super.checkData(data, Object.assign({}, flags), row);\n        components.forEach((comp) => comp.checkData(data, Object.assign({}, flags), row));\n    }\n    checkConditions(data, flags, row) {\n        // check conditions of parent component first, because it may influence on visibility of it's children\n        const check = super.checkConditions(data, flags, row);\n        //row data of parent component not always corresponds to row of nested components, use comp.data as row data for children instead\n        this.getComponents().forEach(comp => comp.checkConditions(data, flags, comp.data));\n        return check;\n    }\n    clearOnHide(show) {\n        super.clearOnHide(show);\n        this.getComponents().forEach(component => component.clearOnHide(show));\n    }\n    /**\n     * Allow components to hook into the next page trigger to perform their own logic.\n     * @param {Function} next - The callback to continue to the next page.\n     * @returns {Promise} - A promise when the page has been processed.\n     */\n    beforePage(next) {\n        return Promise.all(this.getComponents().map((comp) => comp.beforePage(next)));\n    }\n    /**\n     * Allow components to hook into the submission to provide their own async data.\n     * @returns {Promise} - Returns a promise when the constituent beforeSubmit functions are complete.\n     */\n    beforeSubmit() {\n        return Promise.allSettled(this.getComponents().map((comp) => comp.beforeSubmit()));\n    }\n    calculateValue(data, flags, row) {\n        // Do not iterate into children and calculateValues if this nested component is conditionally hidden.\n        if (this.conditionallyHidden()) {\n            return false;\n        }\n        return this.getComponents().reduce((changed, comp) => comp.calculateValue(data, flags, row) || changed, super.calculateValue(data, flags, row));\n    }\n    isLastPage() {\n        return this.pages.length - 1 === this.page;\n    }\n    isValid(data, dirty) {\n        return this.getComponents().reduce((valid, comp) => comp.isValid(data, dirty) && valid, super.isValid(data, dirty));\n    }\n    validationProcessor({ scope, data, row, instance, paths }, flags) {\n        var _a;\n        const { dirty } = flags;\n        if (this.root && this.root.hasSubWizards && this.page !== this.root.page) {\n            instance = ((_a = this.componentsMap) === null || _a === void 0 ? void 0 : _a.hasOwnProperty(paths.dataPath))\n                ? this.componentsMap[paths.dataPath]\n                : this.getComponent(paths.dataPath);\n        }\n        if (!instance) {\n            return;\n        }\n        instance.checkComponentValidity(data, dirty, row, flags, scope.errors);\n        if (instance.processOwnValidation) {\n            scope.noRecurse = true;\n        }\n    }\n    /**\n     * Perform a validation on all child components of this nested component.\n     * @param {import('@formio/core').Component[]} components - The components to validate.\n     * @param {import('@formio/core').DataObject} data - The data to validate.\n     * @param {object} flags - The flags to use when validating.\n     * @returns {Promise<Array>|Array} - The errors if any exist.\n     */\n    validateComponents(components = null, data = null, flags = {}) {\n        components = components || this.component.components;\n        data = data || this.rootValue;\n        const { async, dirty, process } = flags;\n        const validationProcessorProcess = (context) => this.validationProcessor(context, flags);\n        const checkModalProcessorProcess = ({ instance, component, components }) => {\n            // If we just validated the last component, and there are errors from our parent, then we need to show a model of those errors.\n            if (instance &&\n                instance.parent &&\n                (component === components[components.length - 1]) &&\n                instance.parent.componentModal) {\n                instance.parent.checkModal(instance.parent.childErrors, dirty);\n            }\n        };\n        const processorContext = {\n            process: process || 'unknown',\n            components,\n            instances: this.componentsMap,\n            data: data,\n            local: !!flags.local,\n            scope: { errors: [] },\n            parent: this.component,\n            parentPaths: this.paths,\n            processors: [\n                {\n                    process: validationProcessorProcess,\n                    processSync: validationProcessorProcess\n                },\n                {\n                    process: checkModalProcessorProcess,\n                    processSync: checkModalProcessorProcess\n                }\n            ]\n        };\n        return async ? (0, process_1.process)(processorContext).then((scope) => scope.errors) : (0, process_1.processSync)(processorContext).errors;\n    }\n    /**\n     * Validate a nested component with data, or its own internal data.\n     * @param {import('@formio/core').DataObject} data - The data to validate.\n     * @param {object} flags - The flags to use when validating.\n     * @returns {Array} - The errors if any exist.\n     */\n    validate(data = null, flags = {}) {\n        data = data || this.rootValue;\n        return this.validateComponents(this.getComponents().map((component) => component.component), data, flags);\n    }\n    checkComponentValidity(data = null, dirty = false, row = null, flags = {}, allErrors = []) {\n        this.childErrors = [];\n        return super.checkComponentValidity(data, dirty, row, flags, allErrors);\n    }\n    /**\n     * Checks the validity of the component.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {*} row - The contextual row data for this component.\n     * @param {boolean} silentCheck - If the check should be silent and not set the error messages.\n     * @param {Array<any>} childErrors - An array of all errors that have occured so that it can be appended when another one occurs here.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    checkValidity(data = null, dirty = false, row = null, silentCheck = false, childErrors = []) {\n        childErrors.push(...this.validate(data, { dirty, silentCheck }));\n        return this.checkComponentValidity(data, dirty, row, { dirty, silentCheck }, childErrors) && childErrors.length === 0;\n    }\n    checkAsyncValidity(data = null, dirty = false, row = null, silentCheck = false) {\n        return this.ready.then(() => {\n            return this.validate(data, { dirty, silentCheck, async: true }).then((childErrors) => {\n                return this.checkComponentValidity(data, dirty, row, { dirty, silentCheck, async: true }, childErrors).then((valid) => {\n                    return valid && childErrors.length === 0;\n                });\n            });\n        });\n    }\n    setPristine(pristine) {\n        super.setPristine(pristine);\n        this.getComponents().forEach((comp) => comp.setPristine(pristine));\n    }\n    get isPristine() {\n        return this.pristine && this.getComponents().every((c) => c.isPristine);\n    }\n    get isDirty() {\n        return this.dirty && this.getComponents().every((c) => c.isDirty);\n    }\n    detach() {\n        this.components.forEach(component => {\n            component.detach();\n        });\n        super.detach();\n    }\n    clear() {\n        this.components.forEach(component => {\n            component.clear();\n        });\n        super.clear();\n    }\n    destroy(all = false) {\n        this.destroyComponents(all);\n        super.destroy(all);\n    }\n    destroyComponents(all = false) {\n        const components = this.getComponents().slice();\n        components.forEach((comp) => this.removeComponent(comp, this.components, all));\n        this.components = [];\n    }\n    get visibleErrors() {\n        return this.getComponents().reduce((errors, comp) => errors.concat(comp.visibleErrors || []), super.visibleErrors);\n    }\n    get errors() {\n        const thisErrors = super.errors;\n        return this.getComponents()\n            .reduce((errors, comp) => errors.concat(comp.errors || []), thisErrors)\n            .filter(err => err.level !== 'hidden');\n    }\n    getValue() {\n        return this.data;\n    }\n    resetValue() {\n        super.resetValue();\n        this.getComponents().forEach((comp) => comp.resetValue());\n        this.setPristine(true);\n    }\n    get dataReady() {\n        return Promise.all(this.getComponents().map((component) => component.dataReady));\n    }\n    setNestedValue(component, value, flags = {}) {\n        component._data = this.componentContext(component);\n        if (component.type === 'button') {\n            return false;\n        }\n        if (component.type === 'components') {\n            if ((component.tree || component.hasInput) && component.hasValue(value)) {\n                return component.setValue(lodash_1.default.get(value, component.key), flags);\n            }\n            return component.setValue(value, flags);\n        }\n        else if (value && component.hasValue(value)) {\n            return component.setValue(lodash_1.default.get(value, component.key), flags);\n        }\n        else if ((!this.rootPristine || component.visible) && (flags.resetValue || component.shouldAddDefaultValue)) {\n            flags.noValidate = !flags.dirty;\n            flags.resetValue = true;\n            return component.setValue(component.defaultValue, flags);\n        }\n    }\n    setValue(value, flags = {}) {\n        // If the value is equal to the empty value, then this means we need to reset the values.\n        if (lodash_1.default.isEqual(value, this.emptyValue)) {\n            // TO-DO: For a future major release, we need to investigate removing the need for the\n            // \"resetValue\" flag. This seems like a hack that is no longer necessary and the renderer\n            // may behave more deterministically without it.\n            flags.resetValue = true;\n        }\n        return this.getComponents().reduce((changed, component) => {\n            return this.setNestedValue(component, value, flags, changed) || changed;\n        }, false);\n    }\n    get lazyLoad() {\n        var _a;\n        return (_a = this.component.lazyLoad) !== null && _a !== void 0 ? _a : false;\n    }\n}\nexports[\"default\"] = NestedComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/nested/NestedComponent.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Field_1 = __importDefault(__webpack_require__(/*! ../field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst Components_1 = __importDefault(__webpack_require__(/*! ../../Components */ \"./lib/cjs/components/Components.js\"));\n'';\nconst utils_1 = __importDefault(__webpack_require__(/*! ../../../utils */ \"./lib/cjs/utils/index.js\"));\nconst process_1 = __webpack_require__(/*! @formio/core/process */ \"./node_modules/@formio/core/lib/process/index.js\");\n/**\n * NestedComponent class.\n * @augments Field\n */\nclass NestedComponent extends Field_1.default {\n    static schema(...extend) {\n        return Field_1.default.schema({\n            tree: false,\n            lazyLoad: false,\n        }, ...extend);\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        this.type = 'components';\n        /**\n         * The collapsed state of this NestedComponent.\n         * @type {boolean}\n         * @default false\n         * @private\n         */\n        this._collapsed = !!this.component.collapsed;\n    }\n    get defaultSchema() {\n        return NestedComponent.schema();\n    }\n    /**\n     * Get the schema for the NestedComponent.\n     * @returns {object} The schema for the NestedComponent.\n     * @override\n     */\n    get schema() {\n        const schema = super.schema;\n        const components = lodash_1.default.uniqBy(this.getComponents(), 'component.key');\n        schema.components = lodash_1.default.map(components, 'schema');\n        return schema;\n    }\n    /**\n     * Get collapsed state.\n     * @returns {boolean} The collapsed state.\n     */\n    get collapsed() {\n        return this._collapsed;\n    }\n    /**\n     * Set collapsed state.\n     * @param {boolean} value - The collapsed state.\n     * @returns {void}\n     */\n    collapse(value) {\n        const promise = this.redraw();\n        if (!value) {\n            this.checkValidity(this.data, !this.pristine);\n        }\n        return promise;\n    }\n    /**\n     * Set collapsed state.\n     * @param {boolean} value - The collapsed state.\n     * @returns {void}\n     */\n    set collapsed(value) {\n        this._collapsed = value;\n        this.collapse(value);\n    }\n    /**\n     * Set visible state of parent and each child component.\n     * @param {boolean} value - The visible state.\n     * @returns {void}\n     */\n    set visible(value) {\n        // DO NOT CALL super here.  There is an issue where clearOnHide was getting triggered with\n        // subcomponents because the \"parentVisible\" flag was set to false when it should really be\n        // set to true.\n        const visibilityChanged = this._visible !== value;\n        this._visible = value;\n        const isVisible = this.visible;\n        const forceShow = this.shouldForceShow();\n        const forceHide = this.shouldForceHide();\n        this.components.forEach((component) => {\n            // Set the parent visibility first since we may have nested components within nested components\n            // and they need to be able to determine their visibility based on the parent visibility.\n            component.parentVisible = isVisible;\n            let visible;\n            if (component.hasCondition()) {\n                visible = !component.conditionallyHidden();\n            }\n            else {\n                visible = !component.component.hidden;\n            }\n            if (forceShow || visible) {\n                component.visible = true;\n            }\n            else if (forceHide || !isVisible || !visible) {\n                component.visible = false;\n            }\n            // If hiding a nested component, clear all errors below.\n            if (!component.visible) {\n                component.error = '';\n            }\n        });\n        if (visibilityChanged) {\n            this.redraw();\n        }\n    }\n    /**\n     * Get visible state.\n     * @returns {boolean} The visible state.\n     */\n    get visible() {\n        return super.visible;\n    }\n    /**\n     * Set parent visibility.\n     * @param {boolean} value - The parent visibility.\n     * @returns {void}\n     */\n    set parentVisible(value) {\n        super.parentVisible = value;\n        this.components.forEach(component => component.parentVisible = this.visible);\n    }\n    /**\n     * Get parent visibility.\n     * @returns {boolean} The parent visibility.\n     */\n    get parentVisible() {\n        return super.parentVisible;\n    }\n    /**\n     * Get the disabled state.\n     * @returns {boolean} - The disabled state.\n     */\n    get disabled() {\n        return super.disabled;\n    }\n    /**\n     * Set the disabled state.\n     * @param {boolean} disabled - The disabled state.\n     */\n    set disabled(disabled) {\n        super.disabled = disabled;\n        this.components.forEach((component) => component.parentDisabled = disabled);\n    }\n    /**\n     * Set parent disabled state.\n     * @param {boolean} value - The parent disabled state.\n     * @returns {void}\n     */\n    set parentDisabled(value) {\n        super.parentDisabled = value;\n        this.components.forEach(component => {\n            component.parentDisabled = this.disabled;\n        });\n    }\n    /**\n     * Get parent disabled state.\n     * @returns {boolean} The parent disabled state.\n     */\n    get parentDisabled() {\n        return super.parentDisabled;\n    }\n    /**\n     * Get ready state from all components.\n     * @returns {Promise<Array>} - The promise that resolves when all components are ready.\n     */\n    get ready() {\n        return Promise.all(this.getComponents().map(component => component.ready));\n    }\n    /**\n     * Get currentForm object.\n     * @returns {object} - The current form object.\n     */\n    get currentForm() {\n        return super.currentForm;\n    }\n    /**\n     * Set currentForm object.\n     * @param {object} instance - The current form object.\n     * @returns {void}\n     */\n    set currentForm(instance) {\n        super.currentForm = instance;\n        this.getComponents().forEach(component => {\n            component.currentForm = instance;\n        });\n    }\n    /**\n     * Get Row Index.\n     * @returns {number} - The row index.\n     */\n    get rowIndex() {\n        return this._rowIndex;\n    }\n    /**\n     * Set Row Index to row and update each component.\n     * @param {number} value - The row index.\n     * @returns {void}\n     */\n    set rowIndex(value) {\n        var _a, _b;\n        this._rowIndex = value;\n        this.paths = utils_1.default.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths) || {})), { dataIndex: value }));\n        this.eachComponent((component) => {\n            component.rowIndex = value;\n        });\n    }\n    /**\n     * Get Contextual data of the component.\n     * @returns {object} - The contextual data of the component.\n     * @override\n     */\n    componentContext() {\n        return this._data;\n    }\n    /**\n     * Get the data of the component.\n     * @returns {object} - The data of the component.\n     * @override\n     */\n    get data() {\n        return this._data;\n    }\n    /**\n     * Set the data of the component.\n     * @param {object} value - The data of the component.\n     * @returns {void}\n     */\n    set data(value) {\n        this._data = value;\n        this.eachComponent((component) => {\n            component.data = this.componentContext(component);\n        });\n    }\n    /**\n     * Get components array.\n     * @returns {Array} - The components array.\n     */\n    getComponents() {\n        return this.components || [];\n    }\n    /**\n     * Perform a deep iteration over every component, including those\n     * within other container based components.\n     * @param {Function} fn - Called for every component.\n     * @param {any} options - The options to include with this everyComponent call.\n     */\n    everyComponent(fn, options = {}) {\n        const components = this.getComponents();\n        lodash_1.default.each(components, (component, index) => {\n            if (fn(component, components, index) === false) {\n                return false;\n            }\n            if (typeof component.everyComponent === 'function') {\n                if (component.everyComponent(fn, options) === false) {\n                    return false;\n                }\n            }\n        });\n    }\n    /**\n     * Check if the component has a component.\n     * @param {import('@formio/core').Component} component - The component to check.\n     * @returns {boolean} - TRUE if the component has a component, FALSE otherwise.\n     */\n    hasComponent(component) {\n        let result = false;\n        this.everyComponent((comp) => {\n            if (comp === component) {\n                result = true;\n                return false;\n            }\n        });\n        return result;\n    }\n    /**\n     * Get the flattened components of this NestedComponent.\n     * @returns {object} - The flattened components of this NestedComponent.\n     */\n    flattenComponents() {\n        const result = {};\n        this.everyComponent((component) => {\n            result[component.component.flattenAs || component.key] = component;\n        });\n        return result;\n    }\n    /**\n     * Perform an iteration over each component within this container component.\n     * @param {Function} fn - Called for each component\n     */\n    eachComponent(fn) {\n        lodash_1.default.each(this.getComponents(), (component, index) => {\n            if (fn(component, index) === false) {\n                return false;\n            }\n        });\n    }\n    /**\n     * Returns a component provided a key. This performs a deep search within the component tree.\n     * @param {string} path - The path to the component.\n     * @returns {any} - The component that is located.\n     */\n    getComponent(path) {\n        var _a;\n        // If the component is found\n        if (!this.componentMatches) {\n            this.componentMatches = {};\n        }\n        if (this.componentMatches && this.componentMatches[path]) {\n            return this.componentMatches[path];\n        }\n        path = utils_1.default.getStringFromComponentPath(path);\n        const matches = {\n            path: undefined,\n            fullPath: undefined,\n            localPath: undefined,\n            fullLocalPath: undefined,\n            dataPath: undefined,\n            localDataPath: undefined,\n            key: undefined,\n        };\n        this.everyComponent((component) => {\n            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;\n            // All searches are relative to this component so replace this path from the child paths.\n            utils_1.default.componentMatches(component.component, {\n                path: (_b = (_a = component.paths) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.replace(new RegExp(`^${(_c = this.paths) === null || _c === void 0 ? void 0 : _c.path}\\\\.?`), ''),\n                fullPath: (_e = (_d = component.paths) === null || _d === void 0 ? void 0 : _d.fullPath) === null || _e === void 0 ? void 0 : _e.replace(new RegExp(`^${(_f = this.paths) === null || _f === void 0 ? void 0 : _f.fullPath}\\\\.?`), ''),\n                localPath: (_h = (_g = component.paths) === null || _g === void 0 ? void 0 : _g.localPath) === null || _h === void 0 ? void 0 : _h.replace(new RegExp(`^${(_j = this.paths) === null || _j === void 0 ? void 0 : _j.localPath}\\\\.?`), ''),\n                fullLocalPath: (_l = (_k = component.paths) === null || _k === void 0 ? void 0 : _k.fullLocalPath) === null || _l === void 0 ? void 0 : _l.replace(new RegExp(`^${(_m = this.paths) === null || _m === void 0 ? void 0 : _m.fullLocalPath}\\\\.?`), ''),\n                dataPath: (_p = (_o = component.paths) === null || _o === void 0 ? void 0 : _o.dataPath) === null || _p === void 0 ? void 0 : _p.replace(new RegExp(`^${(_q = this.paths) === null || _q === void 0 ? void 0 : _q.dataPath}\\\\.?`), ''),\n                localDataPath: (_s = (_r = component.paths) === null || _r === void 0 ? void 0 : _r.localDataPath) === null || _s === void 0 ? void 0 : _s.replace(new RegExp(`^${(_t = this.paths) === null || _t === void 0 ? void 0 : _t.localDataPath}\\\\.?`), ''),\n            }, path, this.rowIndex, matches, (type, match) => {\n                match.instance = component;\n                return match;\n            });\n        });\n        this.componentMatches[path] = (_a = utils_1.default.getBestMatch(matches)) === null || _a === void 0 ? void 0 : _a.instance;\n        return this.componentMatches[path];\n    }\n    /**\n     * Return a component provided the Id of the component.\n     * @param {string} id - The Id of the component.\n     * @param {Function} fn - Called with the component once it is retrieved.\n     * @returns {object} - The component retrieved.\n     */\n    getComponentById(id, fn = null) {\n        let comp = null;\n        this.everyComponent((component, components) => {\n            if (component.id === id) {\n                comp = component;\n                if (fn) {\n                    fn(component, components);\n                }\n                return false;\n            }\n        });\n        return comp;\n    }\n    /**\n     * Create a new component and add it to the components array.\n     * @param {import('@formio/core').Component} component - The component JSON schema to create.\n     * @param {object} options - The options to create the component with.\n     * @param {import('@formio/core').DataObject} data - The submission data object to house the data for this component.\n     * @param {import('@formio/core').Component} [before] - The component before which to add this component.\n     * @param {import('@formio/core').Component} [replacedComp] - The component to replace with this component.\n     * @returns {any} - The created component instance.\n     */\n    createComponent(component, options, data, before, replacedComp) {\n        if (!component) {\n            return;\n        }\n        options = options || this.options;\n        data = data || this.data;\n        options.parent = this;\n        options.parentVisible = this.visible;\n        options.root = (options === null || options === void 0 ? void 0 : options.root) || this.root || this;\n        options.localRoot = this.localRoot;\n        options.skipInit = true;\n        if (!(options.display === 'pdf' && this.builderMode)) {\n            component.id = utils_1.default.getRandomComponentId();\n        }\n        const comp = Components_1.default.create(component, options, data, true);\n        comp.init();\n        if (component.internal) {\n            return comp;\n        }\n        if (before) {\n            const index = lodash_1.default.findIndex(this.components, { id: before.id });\n            if (index !== -1) {\n                this.components.splice(index, 0, comp);\n            }\n            else {\n                this.components.push(comp);\n            }\n        }\n        else if (replacedComp) {\n            const index = lodash_1.default.findIndex(this.components, { id: replacedComp.id });\n            if (index !== -1) {\n                this.components[index] = comp;\n            }\n            else {\n                this.components.push(comp);\n            }\n        }\n        else {\n            this.components.push(comp);\n        }\n        return comp;\n    }\n    getContainer() {\n        return this.element;\n    }\n    get componentComponents() {\n        return this.component.components || [];\n    }\n    get nestedKey() {\n        return `nested-${this.key}`;\n    }\n    get templateName() {\n        return 'container';\n    }\n    init() {\n        this.components = this.components || [];\n        this.addComponents();\n        return super.init();\n    }\n    /**\n     * Add a new component instance to the components array.\n     * @param {import('@formio/core').DataObject} [data] - The Submission data for this component.\n     * @param {object} [options] - The options for this component.\n     */\n    addComponents(data, options) {\n        data = data || this.data;\n        this.components = this.components || [];\n        options = options || this.options;\n        if (options.components) {\n            this.components = options.components;\n        }\n        else {\n            const components = this.hook('addComponents', this.componentComponents, this) || [];\n            components.forEach((component) => this.addComponent(component, data));\n        }\n    }\n    /**\n     * Add a new component to the components array.\n     * @param {import('@formio/core').Component} component - The component JSON schema to add.\n     * @param {object} data - The submission data object to house the data for this component.\n     * @param {HTMLElement} before - A DOM element to insert this element before.\n     * @param {boolean} [noAdd] - A possibly extraneous boolean flag.\n     * @returns {any} - The created component instance.\n     */\n    addComponent(component, data = null, before = null, noAdd = false) {\n        data = data || this.data;\n        this.components = this.components || [];\n        component = this.hook('addComponent', component, data, before, noAdd);\n        const comp = this.createComponent(component, this.options, data, before ? before : null);\n        if (noAdd) {\n            return comp;\n        }\n        return comp;\n    }\n    beforeFocus() {\n        if (this.parent && 'beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n    }\n    render(children) {\n        // If already rendering, don't re-render.\n        return super.render(children || this.renderTemplate(this.templateName, {\n            children: !this.visible ? '' : this.renderComponents(),\n            nestedKey: this.nestedKey,\n            collapsed: this.options.pdf ? false : this.collapsed,\n        }));\n    }\n    renderComponents(components) {\n        components = components || this.getComponents();\n        const children = components.map(component => component.render());\n        return this.renderTemplate('components', {\n            children,\n            components,\n        });\n    }\n    attach(element) {\n        const superPromise = super.attach(element);\n        this.loadRefs(element, {\n            header: 'single',\n            collapsed: this.collapsed,\n            [this.nestedKey]: 'single',\n            messageContainer: 'single-scope',\n        });\n        let childPromise = Promise.resolve();\n        if (this.refs[this.nestedKey]) {\n            childPromise = this.attachComponents(this.refs[this.nestedKey]);\n        }\n        if (!this.visible) {\n            this.attachComponentsLogic();\n        }\n        if (this.component.collapsible && this.refs.header) {\n            this.addEventListener(this.refs.header, 'click', () => {\n                this.collapsed = !this.collapsed;\n            });\n            this.addEventListener(this.refs.header, 'keydown', (e) => {\n                if (e.keyCode === 13 || e.keyCode === 32) {\n                    e.preventDefault();\n                    this.collapsed = !this.collapsed;\n                }\n            });\n        }\n        return Promise.all([\n            superPromise,\n            childPromise,\n        ]);\n    }\n    /**\n     * Attach the logic to the components.\n     * @param {import('@formio/core').Component[]} components - The components to attach logic to.\n     */\n    attachComponentsLogic(components) {\n        components = components || this.components;\n        lodash_1.default.each(components, (comp) => {\n            comp.attachLogic();\n            if (lodash_1.default.isFunction(comp.attachComponentsLogic)) {\n                comp.attachComponentsLogic();\n            }\n        });\n    }\n    attachComponents(element, components, container) {\n        components = components || this.components;\n        container = container || this.component.components;\n        element = this.hook('attachComponents', element, components, container, this);\n        if (!element) {\n            return Promise.resolve();\n        }\n        let index = 0;\n        const promises = [];\n        Array.prototype.slice.call(element.children).forEach(child => {\n            if (!child.getAttribute('data-noattach') && components[index]) {\n                promises.push(components[index].attach(child));\n                index++;\n            }\n        });\n        return Promise.all(promises);\n    }\n    /**\n     * Remove a component from the components array and from the children object\n     * @param {import('@formio/core').Component} component - The component to remove from the components.\n     * @param {import('@formio/core').Component[]} components - An array of components to remove this component from.\n     * @param {boolean} [all] - If set to TRUE will cascade remove all components.\n     */\n    removeComponent(component, components, all = false) {\n        var _a, _b;\n        components = components || this.components;\n        component.destroy(all);\n        lodash_1.default.remove(components, { id: component.id });\n        if (this.componentsMap[component.path]) {\n            delete this.componentsMap[component.path];\n        }\n        if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.componentsMap[component.path]) {\n            (_b = this.root) === null || _b === void 0 ? true : delete _b.componentsMap[component.path];\n        }\n    }\n    /**\n     * Removes a component provided the API key of that component.\n     * @param {string} key - The API key of the component to remove.\n     * @param {Function} fn - Called once the component is removed.\n     * @returns {null|void} - Returns nothing if the component is not found.\n     */\n    removeComponentByKey(key, fn = null) {\n        const comp = this.getComponent(key, (component, components) => {\n            this.removeComponent(component, components);\n            if (fn) {\n                fn(component, components);\n            }\n        });\n        if (!comp) {\n            if (fn) {\n                fn(null);\n            }\n            return null;\n        }\n    }\n    /**\n     * Removes a component provided the Id of the component.\n     * @param {string} id - The Id of the component to remove.\n     * @param {Function} fn - Called when the component is removed.\n     * @returns {null|void} - Returns nothing if the component is not found.\n     */\n    removeComponentById(id, fn = null) {\n        const comp = this.getComponentById(id, (component, components) => {\n            this.removeComponent(component, components);\n            if (fn) {\n                fn(component, components);\n            }\n        });\n        if (!comp) {\n            if (fn) {\n                fn(null);\n            }\n            return null;\n        }\n    }\n    updateValue(value, flags = {}) {\n        return this.components.reduce((changed, comp) => {\n            return comp.updateValue(null, flags) || changed;\n        }, super.updateValue(value, flags));\n    }\n    shouldSkipValidation(data, row, flags) {\n        // Nested components with no input should not be validated.\n        if (!this.component.input) {\n            return true;\n        }\n        else {\n            return super.shouldSkipValidation(data, row, flags);\n        }\n    }\n    checkData(data, flags, row, components) {\n        if (this.builderMode) {\n            return true;\n        }\n        data = data || this.rootValue;\n        flags = flags || {};\n        row = row || this.data;\n        components = components && lodash_1.default.isArray(components) ? components : this.getComponents();\n        super.checkData(data, Object.assign({}, flags), row);\n        components.forEach((comp) => comp.checkData(data, Object.assign({}, flags), row));\n    }\n    checkConditions(data, flags, row) {\n        // check conditions of parent component first, because it may influence on visibility of it's children\n        const check = super.checkConditions(data, flags, row);\n        //row data of parent component not always corresponds to row of nested components, use comp.data as row data for children instead\n        this.getComponents().forEach(comp => comp.checkConditions(data, flags, comp.data));\n        return check;\n    }\n    clearOnHide(show) {\n        super.clearOnHide(show);\n        this.getComponents().forEach(component => component.clearOnHide(show));\n    }\n    /**\n     * Allow components to hook into the next page trigger to perform their own logic.\n     * @param {Function} next - The callback to continue to the next page.\n     * @returns {Promise} - A promise when the page has been processed.\n     */\n    beforePage(next) {\n        return Promise.all(this.getComponents().map((comp) => comp.beforePage(next)));\n    }\n    /**\n     * Allow components to hook into the submission to provide their own async data.\n     * @returns {Promise} - Returns a promise when the constituent beforeSubmit functions are complete.\n     */\n    beforeSubmit() {\n        return Promise.allSettled(this.getComponents().map((comp) => comp.beforeSubmit()));\n    }\n    calculateValue(data, flags, row) {\n        // Do not iterate into children and calculateValues if this nested component is conditionally hidden.\n        if (this.conditionallyHidden()) {\n            return false;\n        }\n        return this.getComponents().reduce((changed, comp) => comp.calculateValue(data, flags, row) || changed, super.calculateValue(data, flags, row));\n    }\n    isLastPage() {\n        return this.pages.length - 1 === this.page;\n    }\n    isValid(data, dirty) {\n        return this.getComponents().reduce((valid, comp) => comp.isValid(data, dirty) && valid, super.isValid(data, dirty));\n    }\n    validationProcessor({ scope, data, row, instance, paths }, flags) {\n        var _a;\n        const { dirty } = flags;\n        if (this.root && this.root.hasSubWizards && this.page !== this.root.page) {\n            instance = ((_a = this.componentsMap) === null || _a === void 0 ? void 0 : _a.hasOwnProperty(paths.dataPath))\n                ? this.componentsMap[paths.dataPath]\n                : this.getComponent(paths.dataPath);\n        }\n        if (!instance) {\n            return;\n        }\n        instance.checkComponentValidity(data, dirty, row, flags, scope.errors);\n        if (instance.processOwnValidation) {\n            scope.noRecurse = true;\n        }\n    }\n    /**\n     * Perform a validation on all child components of this nested component.\n     * @param {import('@formio/core').Component[]} components - The components to validate.\n     * @param {import('@formio/core').DataObject} data - The data to validate.\n     * @param {object} flags - The flags to use when validating.\n     * @returns {Promise<Array>|Array} - The errors if any exist.\n     */\n    validateComponents(components = null, data = null, flags = {}) {\n        components = components || this.component.components;\n        data = data || this.rootValue;\n        const { async, dirty, process } = flags;\n        const validationProcessorProcess = (context) => this.validationProcessor(context, flags);\n        const checkModalProcessorProcess = ({ instance, component, components }) => {\n            // If we just validated the last component, and there are errors from our parent, then we need to show a model of those errors.\n            if (instance &&\n                instance.parent &&\n                (component === components[components.length - 1]) &&\n                instance.parent.componentModal) {\n                instance.parent.checkModal(instance.parent.childErrors, dirty);\n            }\n        };\n        const processorContext = {\n            process: process || 'unknown',\n            components,\n            instances: this.componentsMap,\n            data: data,\n            local: !!flags.local,\n            scope: { errors: [] },\n            parent: this.component,\n            parentPaths: this.paths,\n            processors: [\n                {\n                    process: validationProcessorProcess,\n                    processSync: validationProcessorProcess\n                },\n                {\n                    process: checkModalProcessorProcess,\n                    processSync: checkModalProcessorProcess\n                }\n            ]\n        };\n        return async ? (0, process_1.process)(processorContext).then((scope) => scope.errors) : (0, process_1.processSync)(processorContext).errors;\n    }\n    /**\n     * Validate a nested component with data, or its own internal data.\n     * @param {import('@formio/core').DataObject} data - The data to validate.\n     * @param {object} flags - The flags to use when validating.\n     * @returns {Array} - The errors if any exist.\n     */\n    validate(data = null, flags = {}) {\n        data = data || this.rootValue;\n        return this.validateComponents(this.getComponents().map((component) => component.component), data, flags);\n    }\n    checkComponentValidity(data = null, dirty = false, row = null, flags = {}, allErrors = []) {\n        this.childErrors = [];\n        return super.checkComponentValidity(data, dirty, row, flags, allErrors);\n    }\n    /**\n     * Checks the validity of the component.\n     * @param {*} data - The data to check if the component is valid.\n     * @param {boolean} dirty - If the component is dirty.\n     * @param {*} row - The contextual row data for this component.\n     * @param {boolean} silentCheck - If the check should be silent and not set the error messages.\n     * @param {Array<any>} childErrors - An array of all errors that have occured so that it can be appended when another one occurs here.\n     * @returns {boolean} - TRUE if the component is valid.\n     */\n    checkValidity(data = null, dirty = false, row = null, silentCheck = false, childErrors = []) {\n        childErrors.push(...this.validate(data, { dirty, silentCheck }));\n        return this.checkComponentValidity(data, dirty, row, { dirty, silentCheck }, childErrors) && childErrors.length === 0;\n    }\n    checkAsyncValidity(data = null, dirty = false, row = null, silentCheck = false) {\n        return this.ready.then(() => {\n            return this.validate(data, { dirty, silentCheck, async: true }).then((childErrors) => {\n                return this.checkComponentValidity(data, dirty, row, { dirty, silentCheck, async: true }, childErrors).then((valid) => {\n                    return valid && childErrors.length === 0;\n                });\n            });\n        });\n    }\n    setPristine(pristine) {\n        super.setPristine(pristine);\n        this.getComponents().forEach((comp) => comp.setPristine(pristine));\n    }\n    get isPristine() {\n        return this.pristine && this.getComponents().every((c) => c.isPristine);\n    }\n    get isDirty() {\n        return this.dirty && this.getComponents().every((c) => c.isDirty);\n    }\n    detach() {\n        this.components.forEach(component => {\n            component.detach();\n        });\n        super.detach();\n    }\n    clear() {\n        this.components.forEach(component => {\n            component.clear();\n        });\n        super.clear();\n    }\n    destroy(all = false) {\n        this.destroyComponents(all);\n        super.destroy(all);\n    }\n    destroyComponents(all = false) {\n        const components = this.getComponents().slice();\n        components.forEach((comp) => this.removeComponent(comp, this.components, all));\n        this.components = [];\n    }\n    get visibleErrors() {\n        return this.getComponents().reduce((errors, comp) => errors.concat(comp.visibleErrors || []), super.visibleErrors);\n    }\n    get errors() {\n        const thisErrors = super.errors;\n        return this.getComponents()\n            .reduce((errors, comp) => errors.concat(comp.errors || []), thisErrors)\n            .filter(err => err.level !== 'hidden');\n    }\n    getValue() {\n        return this.data;\n    }\n    resetValue() {\n        super.resetValue();\n        this.getComponents().forEach((comp) => comp.resetValue());\n        this.setPristine(true);\n    }\n    get dataReady() {\n        return Promise.all(this.getComponents().map((component) => component.dataReady));\n    }\n    setNestedValue(component, value, flags = {}) {\n        component._data = this.componentContext(component);\n        if (component.type === 'button') {\n            return false;\n        }\n        if (component.type === 'components') {\n            if ((component.tree || component.hasInput) && component.hasValue(value)) {\n                return component.setValue(lodash_1.default.get(value, component.key), flags);\n            }\n            return component.setValue(value, flags);\n        }\n        else if (value && component.hasValue(value)) {\n            return component.setValue(lodash_1.default.get(value, component.key), flags);\n        }\n        else if ((!this.rootPristine || component.visible) && (flags.resetValue || component.shouldAddDefaultValue)) {\n            flags.noValidate = !flags.dirty;\n            flags.resetValue = true;\n            return component.setValue(component.defaultValue, flags);\n        }\n    }\n    setValue(value, flags = {}) {\n        if (!value) {\n            return false;\n        }\n        // If the value is equal to the empty value, then this means we need to reset the values.\n        if (lodash_1.default.isEqual(value, this.emptyValue)) {\n            // TO-DO: For a future major release, we need to investigate removing the need for the\n            // \"resetValue\" flag. This seems like a hack that is no longer necessary and the renderer\n            // may behave more deterministically without it.\n            flags.resetValue = true;\n        }\n        return this.getComponents().reduce((changed, component) => {\n            return this.setNestedValue(component, value, flags, changed) || changed;\n        }, false);\n    }\n    get lazyLoad() {\n        var _a;\n        return (_a = this.component.lazyLoad) !== null && _a !== void 0 ? _a : false;\n    }\n}\nexports[\"default\"] = NestedComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/nested/NestedComponent.js?");
 
 /***/ }),
 
@@ -6546,7 +6546,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n/* eslint-disable max-statements */\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Component_1 = __importDefault(__webpack_require__(/*! ../_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst ComponentModal_1 = __importDefault(__webpack_require__(/*! ../_classes/componentModal/ComponentModal */ \"./lib/cjs/components/_classes/componentModal/ComponentModal.js\"));\nconst eventemitter3_1 = __importDefault(__webpack_require__(/*! eventemitter3 */ \"./node_modules/eventemitter3/index.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./lib/cjs/utils/index.js\");\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst Form_1 = __importDefault(__webpack_require__(/*! ../../Form */ \"./lib/cjs/Form.js\"));\nclass FormComponent extends Component_1.default {\n    static schema(...extend) {\n        return Component_1.default.schema({\n            label: 'Form',\n            type: 'form',\n            key: 'form',\n            src: '',\n            reference: true,\n            form: '',\n            path: '',\n            tableView: true,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Nested Form',\n            icon: 'wpforms',\n            group: 'premium',\n            documentation: '/userguide/form-building/premium-components#nested-form',\n            weight: 110,\n            schema: FormComponent.schema()\n        };\n    }\n    static savedValueTypes() {\n        return [utils_1.componentValueTypes.object];\n    }\n    init() {\n        super.init();\n        this.formObj = {\n            display: this.component.display,\n            settings: this.component.settings,\n            components: this.component.components\n        };\n        this.valueChanged = false;\n        this.subForm = null;\n        this.formSrc = '';\n        if (this.component.src) {\n            this.formSrc = this.component.src;\n        }\n        if (!this.component.src &&\n            !this.options.formio &&\n            (this.component.form || this.component.path)) {\n            if (this.component.project) {\n                this.formSrc = Formio_1.Formio.getBaseUrl();\n                // Check to see if it is a MongoID.\n                if ((0, utils_1.isMongoId)(this.component.project)) {\n                    this.formSrc += '/project';\n                }\n                this.formSrc += `/${this.component.project}`;\n                this.options.project = this.formSrc;\n            }\n            else {\n                this.formSrc = Formio_1.Formio.getProjectUrl();\n                this.options.project = this.formSrc;\n            }\n            if (this.component.form) {\n                if ((0, utils_1.isMongoId)(this.component.form)) {\n                    this.formSrc += `/form/${this.component.form}`;\n                }\n                else {\n                    this.formSrc += `/${this.component.form}`;\n                }\n            }\n            else if (this.component.path) {\n                this.formSrc += `/${this.component.path}`;\n            }\n        }\n        // Build the source based on the root src path.\n        if (!this.formSrc && this.options.formio) {\n            const rootSrc = this.options.formio.formsUrl;\n            if (this.component.form && (0, utils_1.isMongoId)(this.component.form)) {\n                this.formSrc = `${rootSrc}/${this.component.form}`;\n            }\n            else {\n                const formPath = this.component.path || this.component.form;\n                this.formSrc = `${rootSrc.replace(/\\/form$/, '')}/${formPath}`;\n            }\n        }\n        if (this.builderMode && this.component.hasOwnProperty('formRevision')) {\n            this.component.revision = this.component.formRevision;\n            delete this.component.formRevision;\n        }\n        // Add revision version if set.\n        if (this.component.revision || this.component.revision === 0 ||\n            this.component.formRevision || this.component.formRevision === 0\n            || this.component.revisionId) {\n            this.setFormRevision(this.component.revisionId || this.component.revision || this.component.formRevision);\n        }\n        return this.createSubForm();\n    }\n    shouldConditionallyClearOnPristine() {\n        return !this.hasSetValue && super.shouldConditionallyClearOnPristine();\n    }\n    get dataReady() {\n        return this.subFormReady || Promise.resolve();\n    }\n    get defaultValue() {\n        // Not not provide a default value unless the subform is ready so that it will initialize correctly.\n        return this.subForm ? super.defaultValue : null;\n    }\n    get defaultSchema() {\n        return FormComponent.schema();\n    }\n    get emptyValue() {\n        return { data: {} };\n    }\n    // In order for the subform values to set properly, we must always say that nested forms have a default value.\n    get hasDefaultValue() {\n        return true;\n    }\n    get ready() {\n        return this.subFormReady || Promise.resolve();\n    }\n    get useOriginalRevision() {\n        var _a, _b;\n        return ((_a = this.component) === null || _a === void 0 ? void 0 : _a.useOriginalRevision) && !!((_b = this.formObj) === null || _b === void 0 ? void 0 : _b.revisions);\n    }\n    setFormRevision(rev) {\n        // Remove current revisions from src if it is\n        this.formSrc = this.formSrc.replace(/\\/v\\/[0-9a-z]+/, '');\n        const revNumber = Number.parseInt(rev);\n        if (!isNaN(revNumber)) {\n            this.subFormRevision = rev;\n            this.formSrc += `/v/${rev}`;\n        }\n        else {\n            this.subFormRevision = undefined;\n        }\n    }\n    getComponent(path) {\n        if (!this.subForm) {\n            return null;\n        }\n        return this.subForm.getComponent(path);\n    }\n    /* eslint-disable max-statements */\n    getSubOptions(options = {}) {\n        options.events = this.createEmitter();\n        // Make sure to not show the submit button in wizards in the nested forms.\n        lodash_1.default.set(options, 'buttonSettings.showSubmit', false);\n        // Set the parent option to the subform so those references are stable when the subform is created\n        options.parent = this;\n        if (!this.options) {\n            return options;\n        }\n        if (this.options.base) {\n            options.base = this.options.base;\n        }\n        if (this.options.project) {\n            options.project = this.options.project;\n        }\n        if (this.options.readOnly || this.component.disabled) {\n            options.readOnly = this.options.readOnly || this.component.disabled;\n        }\n        if (this.options.breadcrumbSettings) {\n            options.breadcrumbSettings = this.options.breadcrumbSettings;\n        }\n        if (this.options.buttonSettings) {\n            options.buttonSettings = lodash_1.default.clone(this.options.buttonSettings);\n        }\n        if (this.options.viewAsHtml) {\n            options.viewAsHtml = this.options.viewAsHtml;\n        }\n        if (this.options.language) {\n            options.language = this.options.language;\n        }\n        if (this.options.template) {\n            options.template = this.options.template;\n        }\n        if (this.options.templates) {\n            options.templates = this.options.templates;\n        }\n        if (this.options.renderMode) {\n            options.renderMode = this.options.renderMode;\n        }\n        if (this.options.attachMode) {\n            options.attachMode = this.options.attachMode;\n        }\n        if (this.options.iconset) {\n            options.iconset = this.options.iconset;\n        }\n        if (this.options.fileService) {\n            options.fileService = this.options.fileService;\n        }\n        if (this.options.onChange) {\n            options.onChange = this.options.onChange;\n        }\n        if (this.options.preview) {\n            options.preview = this.options.preview;\n        }\n        if (this.options.inEditGrid) {\n            options.inEditGrid = this.options.inEditGrid;\n        }\n        if (this.options.saveDraft) {\n            options.saveDraft = this.options.saveDraft;\n            options.formio = new Formio_1.Formio(this.formSrc);\n        }\n        if (this.options.saveDraftThrottle) {\n            options.saveDraftThrottle = this.options.saveDraftThrottle;\n        }\n        if (this.options.skipDraftRestore) {\n            options.skipDraftRestore = this.options.skipDraftRestore;\n        }\n        options.parent = this;\n        return options;\n    }\n    /* eslint-enable max-statements */\n    render() {\n        if (this.builderMode) {\n            return super.render(this.component.label || 'Nested form');\n        }\n        const subform = this.subForm ? this.subForm.render() : this.renderTemplate('loading');\n        return super.render(subform);\n    }\n    asString(value) {\n        return this.getValueAsString(value);\n    }\n    /**\n     * Prints out the value of form components as a datagrid value.\n     */\n    getValueAsString(value, options) {\n        if (!value) {\n            return 'No data provided';\n        }\n        if (!value.data && value._id) {\n            return value._id;\n        }\n        if (!value.data || !Object.keys(value.data).length) {\n            return 'No data provided';\n        }\n        if (options === null || options === void 0 ? void 0 : options.email) {\n            let result = (`\n        <table border=\"1\" style=\"width:100%\">\n          <tbody>\n      `);\n            this.everyComponent((component) => {\n                if (component.isInputComponent && component.visible && !component.skipInEmail) {\n                    result += (`\n            <tr>\n              <th style=\"padding: 5px 10px;\">${component.label}</th>\n              <td style=\"width:100%;padding:5px 10px;\">${component.getView(component.dataValue, options)}</td>\n            </tr>\n          `);\n                }\n            }, Object.assign(Object.assign({}, options), { fromRoot: true }));\n            result += (`\n          </tbody>\n        </table>\n      `);\n            return result;\n        }\n        if (lodash_1.default.isEmpty(value)) {\n            return '';\n        }\n        return '[Complex Data]';\n    }\n    attach(element) {\n        // Don't attach in builder.\n        if (this.builderMode) {\n            return super.attach(element);\n        }\n        return super.attach(element)\n            .then(() => {\n            if (this.isSubFormLazyLoad() && !this.hasLoadedForm && !this.subFormLoading) {\n                this.createSubForm(true);\n            }\n            if (!this.subFormReady) {\n                return Promise.resolve();\n            }\n            return this.subFormReady.then(() => {\n                this.empty(element);\n                if (this.options.builder) {\n                    this.setContent(element, this.ce('div', {\n                        class: 'text-muted text-center p-2'\n                    }, this.text(this.formObj.title)));\n                    return;\n                }\n                this.setContent(element, this.render());\n                if (this.subForm) {\n                    if (this.isNestedWizard) {\n                        element = this.root.element;\n                    }\n                    this.subForm.attach(element);\n                    this.valueChanged = this.hasSetValue;\n                    if (!this.shouldConditionallyClear()) {\n                        if (!this.valueChanged && this.dataValue.state !== 'submitted') {\n                            this.setDefaultValue();\n                        }\n                        else {\n                            this.restoreValue();\n                        }\n                    }\n                }\n                if (!this.builderMode && this.component.modalEdit) {\n                    const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;\n                    const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;\n                    this.componentModal = new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);\n                    this.subForm.element = this.componentModal.refs.componentContent || this.subForm.element;\n                    this.setOpenModalElement();\n                }\n                this.calculateValue();\n            });\n        });\n    }\n    detach() {\n        if (this.subForm) {\n            this.subForm.detach();\n        }\n        super.detach();\n    }\n    get currentForm() {\n        return this._currentForm;\n    }\n    get hasLoadedForm() {\n        return this.formObj\n            && this.formObj.components\n            && Array.isArray(this.formObj.components)\n            && this.formObj.components.length;\n    }\n    set currentForm(instance) {\n        this._currentForm = instance;\n        if (!this.subForm) {\n            return;\n        }\n        this.subForm.getComponents().forEach(component => {\n            component.currentForm = this;\n        });\n    }\n    get isRevisionChanged() {\n        return lodash_1.default.isNumber(this.subFormRevision)\n            && lodash_1.default.isNumber(this.formObj._vid)\n            && this.formObj._vid !== this.subFormRevision;\n    }\n    get subFormData() {\n        var _a;\n        return ((_a = this.dataValue) === null || _a === void 0 ? void 0 : _a.data) || {};\n    }\n    destroy(all = false) {\n        if (this.subForm) {\n            this.subForm.destroy(all);\n            this.subForm = null;\n            this.subFormReady = null;\n        }\n        super.destroy(all);\n    }\n    redraw() {\n        if (this.subForm) {\n            this.subForm.form = this.formObj;\n            this.setSubFormDisabled(this.subForm);\n        }\n        return super.redraw();\n    }\n    /**\n     * Pass everyComponent to subform.\n     * @param {any[]} args - Arguments to pass through to the subform's everyComponent method.\n     * @returns {*} - The result of the subform's everyComponent method.\n     */\n    everyComponent(...args) {\n        if (this.subForm) {\n            this.subForm.everyComponent(...args);\n        }\n    }\n    setSubFormDisabled(subForm) {\n        subForm.disabled = this.disabled; // When the Nested Form is disabled make the subForm disabled\n    }\n    updateSubWizards(subForm) {\n        var _a, _b;\n        if (this.isNestedWizard && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.subWizards) && ((_b = subForm === null || subForm === void 0 ? void 0 : subForm._form) === null || _b === void 0 ? void 0 : _b.display) === 'wizard') {\n            const existedForm = this.root.subWizards.findIndex(form => form.component.form === this.component.form);\n            if (existedForm !== -1) {\n                this.root.subWizards[existedForm] = this;\n            }\n            else {\n                this.root.subWizards.push(this);\n            }\n            this.emit('subWizardsUpdated', subForm);\n        }\n    }\n    /**\n     * Create a subform instance.\n     * @param {boolean} [fromAttach] - This function is being called from an `attach` method.\n     * @param {boolean} [beforeSubmit] - This function is being called from a `beforeSubmit` method.\n     * @returns {*} - The subform instance.\n     */\n    createSubForm(fromAttach, beforeSubmit) {\n        this.subFormReady = this.loadSubForm(fromAttach, beforeSubmit).then((form) => {\n            if (!form) {\n                return;\n            }\n            // Iterate through every component and hide the submit button.\n            (0, utils_1.eachComponent)(form.components, (component) => {\n                this.hideSubmitButton(component);\n            });\n            // If the subform is already created then destroy the old one.\n            if (this.subForm) {\n                this.subForm.destroy();\n            }\n            // Render the form.\n            return (new Form_1.default(form, this.getSubOptions())).ready.then((instance) => {\n                var _a, _b;\n                this.subForm = instance;\n                this.subForm.currentForm = this;\n                this.subForm.parentVisible = this.visible;\n                const componentsMap = this.componentsMap;\n                const formComponentsMap = this.subForm.componentsMap;\n                lodash_1.default.assign(componentsMap, formComponentsMap);\n                this.component.components = (_a = this.subForm._form) === null || _a === void 0 ? void 0 : _a.components;\n                this.component.display = (_b = this.subForm._form) === null || _b === void 0 ? void 0 : _b.display;\n                this.subForm.on('change', () => {\n                    if (this.subForm && !this.shouldConditionallyClear()) {\n                        this.dataValue = this.subForm.getValue();\n                        this.triggerChange({\n                            noEmit: true\n                        });\n                    }\n                });\n                this.subForm.url = this.formSrc;\n                this.subForm.nosubmit = true;\n                this.subForm.root = this.root;\n                this.subForm.localRoot = this.isNestedWizard ? this.localRoot : this.subForm;\n                this.restoreValue();\n                this.valueChanged = this.hasSetValue;\n                this.onChange();\n                return this.subForm;\n            }).catch((err) => {\n                console.log(err);\n            });\n        }).then((subForm) => {\n            this.updateSubWizards(subForm);\n            return subForm;\n        });\n        return this.subFormReady;\n    }\n    hideSubmitButton(component) {\n        const isSubmitButton = component.type === 'button' && (component.action === 'submit' || !component.action);\n        if (isSubmitButton) {\n            component.hidden = true;\n            // clearOnHide no longer clears from the JSON `hidden` flag, so we make the button conditionally hidden to clear its data\n            component.customConditional = 'show = false';\n        }\n    }\n    /**\n     * Load the subform.\n     * @param {boolean} fromAttach - This function is being called from an `attach` method.\n     * @param {boolean} beforeSubmit - This function is being called from a `beforeSubmit` method.\n     * @returns {Promise} - The promise that resolves when the subform is loaded.\n     */\n    loadSubForm(fromAttach, beforeSubmit) {\n        var _a, _b, _c, _d, _e;\n        const loadHiddenForm = beforeSubmit && !this.component.clearOnHide;\n        if (this.builderMode || (this.conditionallyHidden() && !loadHiddenForm) || (this.isSubFormLazyLoad() && !fromAttach)) {\n            return Promise.resolve();\n        }\n        if (this.hasLoadedForm && !this.isRevisionChanged &&\n            !(this.options.pdf && ((_a = this.component) === null || _a === void 0 ? void 0 : _a.useOriginalRevision) && lodash_1.default.isNull(this.subForm) && !this.subFormLoading)) {\n            // Pass config down to sub forms.\n            if (this.root && this.root.form && this.root.form.config && !this.formObj.config) {\n                this.formObj.config = this.root.form.config;\n            }\n            return Promise.resolve(this.formObj);\n        }\n        else if (this.formSrc) {\n            this.subFormLoading = true;\n            const options = ((_c = (_b = this.root) === null || _b === void 0 ? void 0 : _b.formio) === null || _c === void 0 ? void 0 : _c.base) && ((_e = (_d = this.root) === null || _d === void 0 ? void 0 : _d.formio) === null || _e === void 0 ? void 0 : _e.projectUrl)\n                ? {\n                    base: this.root.formio.base,\n                    project: this.root.formio.projectUrl,\n                }\n                : {};\n            return (new Formio_1.Formio(this.formSrc, options)).loadForm({ params: { live: 1 } })\n                .then((formObj) => {\n                this.formObj = formObj;\n                if (this.options.pdf && this.component.useOriginalRevision) {\n                    this.formObj.display = 'form';\n                }\n                this.subFormLoading = false;\n                return formObj;\n            })\n                .catch((err) => {\n                console.log(err);\n                return null;\n            });\n        }\n        return Promise.resolve();\n    }\n    checkComponentConditions(data, flags, row) {\n        const visible = super.checkComponentConditions(data, flags, row);\n        // Return if already hidden\n        if (!visible) {\n            return visible;\n        }\n        if (this.subForm) {\n            return this.subForm.checkConditions(this.subFormData, flags);\n        }\n        // There are few cases when subForm is not loaded when a change is triggered,\n        // so we need to perform checkConditions after it is ready, or some conditional fields might be hidden in View mode\n        else if (this.subFormReady) {\n            this.subFormReady.then(() => {\n                if (this.subForm) {\n                    return this.subForm.checkConditions(this.subFormData, flags);\n                }\n            });\n        }\n        return visible;\n    }\n    calculateValue(data, flags, row) {\n        if (this.subForm) {\n            return this.subForm.calculateValue(this.subFormData, flags);\n        }\n        return super.calculateValue(data, flags, row);\n    }\n    setPristine(pristine) {\n        super.setPristine(pristine);\n        if (this.subForm) {\n            this.subForm.setPristine(pristine);\n        }\n    }\n    /**\n     * Determine if the subform should be submitted.\n     * @returns {*|boolean} - TRUE if the subform should be submitted, FALSE if it should not.\n     */\n    get shouldSubmit() {\n        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.shouldConditionallyClear();\n    }\n    /**\n     * Returns the data for the subform.\n     * @returns {*} - the data for the subform.\n     */\n    getSubFormData() {\n        if (lodash_1.default.get(this.subForm, 'form.display') === 'pdf') {\n            return this.subForm.getSubmission();\n        }\n        else {\n            return Promise.resolve(this.dataValue);\n        }\n    }\n    /**\n     * Submit the subform if configured to do so.\n     * @returns {Promise} - The promise that resolves when the subform is submitted.\n     */\n    submitSubForm() {\n        // If we wish to submit the form on next page, then do that here.\n        if (this.shouldSubmit) {\n            return this.subFormReady.then(() => {\n                if (!this.subForm) {\n                    return this.dataValue;\n                }\n                this.subForm.nosubmit = false;\n                this.subForm.submitted = true;\n                return this.subForm.submitForm({}, true).then(result => {\n                    this.subForm.loading = false;\n                    this.subForm.showAllErrors = false;\n                    this.dataValue = result.submission;\n                    return this.dataValue;\n                }).catch(err => {\n                    this.subForm.showAllErrors = true;\n                    this.subForm.onSubmissionError(err);\n                    return Promise.reject(err);\n                });\n            });\n        }\n        return this.getSubFormData();\n    }\n    /**\n     * Submit the form before the next page is triggered.\n     * @param {Function} next - The function to trigger the next page.\n     * @returns {Promise} - The promise that resolves when the subform submission is complete (if necessary) and the next page is triggered.\n     */\n    beforePage(next) {\n        // Should not submit child forms if we are going to the previous page\n        if (!next) {\n            return super.beforePage(next);\n        }\n        return this.submitSubForm(true).then(() => super.beforePage(next));\n    }\n    /**\n     * Submit the form before the whole form is triggered.\n     * @returns {Promise} - The promise that resolves when the subform submission is complete (if necessary) and the form is submitted.\n     */\n    beforeSubmit() {\n        var _a, _b, _c;\n        const submission = this.dataValue;\n        // Cancel triggered saveDraft\n        if (((_a = this.subForm) === null || _a === void 0 ? void 0 : _a.draftEnabled) && ((_b = this.subForm.triggerSaveDraft) === null || _b === void 0 ? void 0 : _b.cancel)) {\n            this.subForm.triggerSaveDraft.cancel();\n        }\n        const isAlreadySubmitted = submission && submission._id && submission.form;\n        const isDraftSubmission = this.options.saveDraft && submission.state === 'draft';\n        // This submission has already been submitted, so just return the reference data.\n        if (isAlreadySubmitted && !((_c = this.subForm) === null || _c === void 0 ? void 0 : _c.wizard) && !isDraftSubmission) {\n            this.dataValue = submission;\n            return Promise.resolve(this.dataValue);\n        }\n        // we need to load a hidden form (when clearOnHide is disabled) in order to get and submit (if needed) its data\n        const loadHiddenForm = !this.component.clearOnHide;\n        if ((this.isSubFormLazyLoad() || loadHiddenForm) && !this.subFormLoading && !this.subForm) {\n            return this.createSubForm(true, true)\n                .then(() => this.submitSubForm(false))\n                .then(() => this.dataValue)\n                .then(() => super.beforeSubmit());\n        }\n        else {\n            return this.submitSubForm(false)\n                .then(() => this.dataValue)\n                .then(() => super.beforeSubmit());\n        }\n    }\n    isSubFormLazyLoad() {\n        var _a, _b;\n        return ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a._form) === null || _b === void 0 ? void 0 : _b.display) === 'wizard' && this.component.lazyLoad;\n    }\n    isHidden() {\n        if (!this.visible) {\n            return true;\n        }\n        return !super.checkConditions(this.rootValue);\n    }\n    setValue(submission, flags = {}) {\n        var _a;\n        const changed = super.setValue(submission, flags);\n        this.valueChanged = true;\n        if (this.subForm) {\n            const revisionPath = submission._frid ? '_frid' : '_vid';\n            const shouldLoadOriginalRevision = this.useOriginalRevision\n                && (lodash_1.default.isNumber(submission[revisionPath]) || lodash_1.default.isNumber(submission._fvid))\n                && lodash_1.default.isNumber((_a = this.subForm.form) === null || _a === void 0 ? void 0 : _a[revisionPath])\n                && submission._fvid !== this.subForm.form[revisionPath];\n            if (shouldLoadOriginalRevision) {\n                this.setFormRevision(submission._frid || submission._fvid);\n                this.createSubForm().then(() => {\n                    this.attach(this.element);\n                });\n            }\n            else {\n                this.setSubFormValue(submission, flags);\n            }\n        }\n        return changed;\n    }\n    setSubFormValue(submission, flags) {\n        var _a, _b, _c, _d;\n        const shouldLoadSubmissionById = submission\n            && submission._id\n            && this.subForm.formio\n            && lodash_1.default.isEmpty(submission.data);\n        const shouldLoadDraftById = this.options.saveDraft && lodash_1.default.isEmpty(submission.data) && lodash_1.default.get(this.subForm, 'submission._id');\n        if (shouldLoadSubmissionById || shouldLoadDraftById) {\n            const formId = submission.form || this.formObj.form || this.component.form;\n            const submissionUrl = `${this.subForm.formio.formsUrl}/${formId}/submission/${submission._id || this.subForm.submission._id}`;\n            const options = ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.formio) === null || _b === void 0 ? void 0 : _b.base) && ((_d = (_c = this.root) === null || _c === void 0 ? void 0 : _c.formio) === null || _d === void 0 ? void 0 : _d.projectUrl)\n                ? {\n                    base: this.root.formio.base,\n                    project: this.root.formio.projectUrl,\n                }\n                : {};\n            this.subForm.setUrl(submissionUrl, Object.assign(Object.assign({}, this.options), options));\n            this.subForm.loadSubmission().catch((err) => {\n                console.error(`Unable to load subform submission ${submission._id}:`, err);\n            });\n        }\n        else {\n            this.onSetSubFormValue(submission, flags);\n        }\n    }\n    /**\n     * Sets the subform value\n     * @param {object|null|undefined} submission - The submission to set.\n     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.\n     * @returns {void}\n     */\n    onSetSubFormValue(submission, flags) {\n        this.subForm.setValue(submission, flags);\n    }\n    isEmpty(value = this.dataValue) {\n        return value === null || lodash_1.default.isEqual(value, this.emptyValue);\n    }\n    getValue() {\n        if (this.subForm) {\n            return this.subForm.getValue();\n        }\n        return this.dataValue;\n    }\n    get errors() {\n        let errors = super.errors;\n        if (this.subForm) {\n            errors = errors.concat(this.subForm.errors);\n        }\n        return errors;\n    }\n    conditionallyHidden() {\n        const conditionallyHidden = super.conditionallyHidden();\n        if (this.subForm) {\n            this.subForm._conditionallyHidden = conditionallyHidden;\n        }\n        return conditionallyHidden;\n    }\n    updateSubFormVisibility() {\n        if (this.subForm) {\n            this.subForm.parentVisible = this.visible;\n        }\n    }\n    /**\n     * Determines if this form is a Nested Wizard\n     * which means it should be a Wizard itself and should be a direct child of a Wizard's page\n     * @returns {boolean} - TRUE if this form is a Nested Wizard, FALSE otherwise\n     */\n    get isNestedWizard() {\n        var _a, _b, _c, _d, _e;\n        return ((_b = (_a = this.subForm) === null || _a === void 0 ? void 0 : _a._form) === null || _b === void 0 ? void 0 : _b.display) === 'wizard' && ((_e = (_d = (_c = this.parent) === null || _c === void 0 ? void 0 : _c.parent) === null || _d === void 0 ? void 0 : _d._form) === null || _e === void 0 ? void 0 : _e.display) === 'wizard';\n    }\n    get visible() {\n        return super.visible;\n    }\n    set visible(value) {\n        const isNestedWizard = this.isNestedWizard;\n        if (this._visible !== value) {\n            this._visible = value;\n            // Form doesn't load if hidden. If it becomes visible, create the form.\n            if (!this.subForm && value) {\n                this.createSubForm();\n                this.subFormReady.then(() => {\n                    this.updateSubFormVisibility();\n                    this.clearOnHide();\n                });\n                this.redraw();\n                return;\n            }\n            this.updateSubFormVisibility();\n            this.clearOnHide();\n            isNestedWizard ? this.rebuild() : this.redraw();\n        }\n        if (!value && isNestedWizard) {\n            this.root.redraw();\n        }\n    }\n    get parentVisible() {\n        return super.parentVisible;\n    }\n    set parentVisible(value) {\n        if (this._parentVisible !== value) {\n            this._parentVisible = value;\n            this.clearOnHide();\n            // Form doesn't load if hidden. If it becomes visible, create the form.\n            if (!this.subForm && value) {\n                this.createSubForm();\n                this.subFormReady.then(() => {\n                    this.updateSubFormVisibility();\n                });\n                this.redraw();\n                return;\n            }\n            this.updateSubFormVisibility();\n            this.redraw();\n        }\n    }\n    isInternalEvent(event) {\n        switch (event) {\n            case 'focus':\n            case 'blur':\n            case 'componentChange':\n            case 'componentError':\n            case 'error':\n            case 'formLoad':\n            case 'languageChanged':\n            case 'render':\n            case 'checkValidity':\n            case 'initialized':\n            case 'submit':\n            case 'submitButton':\n            case 'nosubmit':\n            case 'updateComponent':\n            case 'submitDone':\n            case 'submissionDeleted':\n            case 'requestDone':\n            case 'nextPage':\n            case 'prevPage':\n            case 'wizardNavigationClicked':\n            case 'updateWizardNav':\n            case 'restoreDraft':\n            case 'saveDraft':\n            case 'saveComponent':\n            case 'pdfUploaded':\n                return true;\n            default:\n                return false;\n        }\n    }\n    createEmitter() {\n        const emitter = new eventemitter3_1.default();\n        const nativeEmit = emitter.emit;\n        const that = this;\n        emitter.emit = function (event, ...args) {\n            const eventType = event.replace(`${that.options.namespace}.`, '');\n            nativeEmit.call(this, event, ...args);\n            if (!that.isInternalEvent(eventType)) {\n                that.emit(eventType, ...args);\n            }\n        };\n        return emitter;\n    }\n    deleteValue() {\n        super.setValue(null, {\n            noUpdateEvent: true,\n            noDefault: true\n        });\n        this.unset();\n    }\n}\nexports[\"default\"] = FormComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/form/Form.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n/* eslint-disable max-statements */\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Component_1 = __importDefault(__webpack_require__(/*! ../_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst ComponentModal_1 = __importDefault(__webpack_require__(/*! ../_classes/componentModal/ComponentModal */ \"./lib/cjs/components/_classes/componentModal/ComponentModal.js\"));\nconst eventemitter3_1 = __importDefault(__webpack_require__(/*! eventemitter3 */ \"./node_modules/eventemitter3/index.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./lib/cjs/utils/index.js\");\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst Form_1 = __importDefault(__webpack_require__(/*! ../../Form */ \"./lib/cjs/Form.js\"));\nclass FormComponent extends Component_1.default {\n    static schema(...extend) {\n        return Component_1.default.schema({\n            label: 'Form',\n            type: 'form',\n            key: 'form',\n            src: '',\n            reference: true,\n            form: '',\n            path: '',\n            tableView: true,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Nested Form',\n            icon: 'wpforms',\n            group: 'premium',\n            documentation: '/userguide/form-building/premium-components#nested-form',\n            weight: 110,\n            schema: FormComponent.schema()\n        };\n    }\n    static savedValueTypes() {\n        return [utils_1.componentValueTypes.object];\n    }\n    init() {\n        super.init();\n        this.formObj = {\n            display: this.component.display,\n            settings: this.component.settings,\n            components: this.component.components\n        };\n        this.valueChanged = false;\n        this.subForm = null;\n        this.formSrc = '';\n        if (this.component.src) {\n            this.formSrc = this.component.src;\n        }\n        if (!this.component.src &&\n            !this.options.formio &&\n            (this.component.form || this.component.path)) {\n            if (this.component.project) {\n                this.formSrc = Formio_1.Formio.getBaseUrl();\n                // Check to see if it is a MongoID.\n                if ((0, utils_1.isMongoId)(this.component.project)) {\n                    this.formSrc += '/project';\n                }\n                this.formSrc += `/${this.component.project}`;\n                this.options.project = this.formSrc;\n            }\n            else {\n                this.formSrc = Formio_1.Formio.getProjectUrl();\n                this.options.project = this.formSrc;\n            }\n            if (this.component.form) {\n                if ((0, utils_1.isMongoId)(this.component.form)) {\n                    this.formSrc += `/form/${this.component.form}`;\n                }\n                else {\n                    this.formSrc += `/${this.component.form}`;\n                }\n            }\n            else if (this.component.path) {\n                this.formSrc += `/${this.component.path}`;\n            }\n        }\n        // Build the source based on the root src path.\n        if (!this.formSrc && this.options.formio) {\n            const rootSrc = this.options.formio.formsUrl;\n            if (this.component.form && (0, utils_1.isMongoId)(this.component.form)) {\n                this.formSrc = `${rootSrc}/${this.component.form}`;\n            }\n            else {\n                const formPath = this.component.path || this.component.form;\n                this.formSrc = `${rootSrc.replace(/\\/form$/, '')}/${formPath}`;\n            }\n        }\n        if (this.builderMode && this.component.hasOwnProperty('formRevision')) {\n            this.component.revision = this.component.formRevision;\n            delete this.component.formRevision;\n        }\n        // Add revision version if set.\n        if (this.component.revision || this.component.revision === 0 ||\n            this.component.formRevision || this.component.formRevision === 0\n            || this.component.revisionId) {\n            this.setFormRevision(this.component.revisionId || this.component.revision || this.component.formRevision);\n        }\n        return this.createSubForm();\n    }\n    shouldConditionallyClearOnPristine() {\n        return !this.hasSetValue && super.shouldConditionallyClearOnPristine();\n    }\n    get dataReady() {\n        return this.subFormReady || Promise.resolve();\n    }\n    get defaultValue() {\n        // Not not provide a default value unless the subform is ready so that it will initialize correctly.\n        return this.subForm ? super.defaultValue : null;\n    }\n    get defaultSchema() {\n        return FormComponent.schema();\n    }\n    get emptyValue() {\n        return { data: {} };\n    }\n    // In order for the subform values to set properly, we must always say that nested forms have a default value.\n    get hasDefaultValue() {\n        return true;\n    }\n    get ready() {\n        return this.subFormReady || Promise.resolve();\n    }\n    get useOriginalRevision() {\n        var _a, _b;\n        return ((_a = this.component) === null || _a === void 0 ? void 0 : _a.useOriginalRevision) && !!((_b = this.formObj) === null || _b === void 0 ? void 0 : _b.revisions);\n    }\n    setFormRevision(rev) {\n        // Remove current revisions from src if it is\n        this.formSrc = this.formSrc.replace(/\\/v\\/[0-9a-z]+/, '');\n        const revNumber = Number.parseInt(rev);\n        if (!isNaN(revNumber)) {\n            this.subFormRevision = rev;\n            this.formSrc += `/v/${rev}`;\n        }\n        else {\n            this.subFormRevision = undefined;\n        }\n    }\n    getComponent(path) {\n        if (!this.subForm) {\n            return null;\n        }\n        return this.subForm.getComponent(path);\n    }\n    /* eslint-disable max-statements */\n    getSubOptions(options = {}) {\n        options.events = this.createEmitter();\n        // Make sure to not show the submit button in wizards in the nested forms.\n        lodash_1.default.set(options, 'buttonSettings.showSubmit', false);\n        // Set the parent option to the subform so those references are stable when the subform is created\n        options.parent = this;\n        if (!this.options) {\n            return options;\n        }\n        if (this.options.base) {\n            options.base = this.options.base;\n        }\n        if (this.options.project) {\n            options.project = this.options.project;\n        }\n        if (this.options.readOnly || this.component.disabled) {\n            options.readOnly = this.options.readOnly || this.component.disabled;\n        }\n        if (this.options.breadcrumbSettings) {\n            options.breadcrumbSettings = this.options.breadcrumbSettings;\n        }\n        if (this.options.buttonSettings) {\n            options.buttonSettings = lodash_1.default.clone(this.options.buttonSettings);\n        }\n        if (this.options.viewAsHtml) {\n            options.viewAsHtml = this.options.viewAsHtml;\n        }\n        if (this.options.language) {\n            options.language = this.options.language;\n        }\n        if (this.options.template) {\n            options.template = this.options.template;\n        }\n        if (this.options.templates) {\n            options.templates = this.options.templates;\n        }\n        if (this.options.renderMode) {\n            options.renderMode = this.options.renderMode;\n        }\n        if (this.options.attachMode) {\n            options.attachMode = this.options.attachMode;\n        }\n        if (this.options.iconset) {\n            options.iconset = this.options.iconset;\n        }\n        if (this.options.fileService) {\n            options.fileService = this.options.fileService;\n        }\n        if (this.options.onChange) {\n            options.onChange = this.options.onChange;\n        }\n        if (this.options.preview) {\n            options.preview = this.options.preview;\n        }\n        if (this.options.inEditGrid) {\n            options.inEditGrid = this.options.inEditGrid;\n        }\n        if (this.options.saveDraft) {\n            options.saveDraft = this.options.saveDraft;\n            options.formio = new Formio_1.Formio(this.formSrc);\n        }\n        if (this.options.saveDraftThrottle) {\n            options.saveDraftThrottle = this.options.saveDraftThrottle;\n        }\n        if (this.options.skipDraftRestore) {\n            options.skipDraftRestore = this.options.skipDraftRestore;\n        }\n        options.parent = this;\n        return options;\n    }\n    /* eslint-enable max-statements */\n    render() {\n        if (this.builderMode) {\n            return super.render(this.component.label || 'Nested form');\n        }\n        const subform = this.subForm ? this.subForm.render() : this.renderTemplate('loading');\n        return super.render(subform);\n    }\n    asString(value) {\n        return this.getValueAsString(value);\n    }\n    /**\n     * Prints out the value of form components as a datagrid value.\n     */\n    getValueAsString(value, options) {\n        if (!value) {\n            return 'No data provided';\n        }\n        if (!value.data && value._id) {\n            return value._id;\n        }\n        if (!value.data || !Object.keys(value.data).length) {\n            return 'No data provided';\n        }\n        if (options === null || options === void 0 ? void 0 : options.email) {\n            let result = (`\n        <table border=\"1\" style=\"width:100%\">\n          <tbody>\n      `);\n            this.everyComponent((component) => {\n                if (component.isInputComponent && component.visible && !component.skipInEmail) {\n                    result += (`\n            <tr>\n              <th style=\"padding: 5px 10px;\">${component.label}</th>\n              <td style=\"width:100%;padding:5px 10px;\">${component.getView(component.dataValue, options)}</td>\n            </tr>\n          `);\n                }\n            }, Object.assign(Object.assign({}, options), { fromRoot: true }));\n            result += (`\n          </tbody>\n        </table>\n      `);\n            return result;\n        }\n        if (lodash_1.default.isEmpty(value)) {\n            return '';\n        }\n        return '[Complex Data]';\n    }\n    attach(element) {\n        // Don't attach in builder.\n        if (this.builderMode) {\n            return super.attach(element);\n        }\n        return super.attach(element)\n            .then(() => {\n            if (this.isSubFormLazyLoad() && !this.hasLoadedForm && !this.subFormLoading) {\n                this.createSubForm(true);\n            }\n            if (!this.subFormReady) {\n                return Promise.resolve();\n            }\n            return this.subFormReady.then(() => {\n                this.empty(element);\n                if (this.options.builder) {\n                    this.setContent(element, this.ce('div', {\n                        class: 'text-muted text-center p-2'\n                    }, this.text(this.formObj.title)));\n                    return;\n                }\n                this.setContent(element, this.render());\n                const postAttach = () => {\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                if (this.subForm) {\n                    if (this.isNestedWizard) {\n                        element = this.root.element;\n                    }\n                    return this.subForm.attach(element).then(() => {\n                        this.valueChanged = this.hasSetValue;\n                        if (!this.shouldConditionallyClear()) {\n                            if (!this.valueChanged && this.dataValue.state !== 'submitted') {\n                                this.setDefaultValue();\n                            }\n                            else {\n                                this.restoreValue();\n                            }\n                        }\n                        postAttach();\n                        this.setComponentsMap();\n                    });\n                }\n                postAttach();\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    setComponentsMap() {\n        if (!this.subForm) {\n            return;\n        }\n        const componentsMap = this.componentsMap;\n        const formComponentsMap = this.subForm.componentsMap;\n        lodash_1.default.assign(componentsMap, formComponentsMap);\n    }\n    /**\n     * Create a subform instance.\n     * @param {boolean} [fromAttach] - This function is being called from an `attach` method.\n     * @param {boolean} [beforeSubmit] - This function is being called from a `beforeSubmit` method.\n     * @returns {*} - The subform instance.\n     */\n    createSubForm(fromAttach, beforeSubmit) {\n        this.subFormReady = this.loadSubForm(fromAttach, beforeSubmit).then((form) => {\n            if (!form) {\n                return;\n            }\n            // Iterate through every component and hide the submit button.\n            (0, utils_1.eachComponent)(form.components, (component) => {\n                this.hideSubmitButton(component);\n            });\n            // If the subform is already created then destroy the old one.\n            if (this.subForm) {\n                this.subForm.destroy();\n            }\n            // Render the form.\n            return (new Form_1.default(form, this.getSubOptions())).ready.then((instance) => {\n                var _a, _b;\n                this.subForm = instance;\n                this.subForm.currentForm = this;\n                this.subForm.parentVisible = this.visible;\n                this.setComponentsMap();\n                this.component.components = (_a = this.subForm._form) === null || _a === void 0 ? void 0 : _a.components;\n                this.component.display = (_b = this.subForm._form) === null || _b === void 0 ? void 0 : _b.display;\n                this.subForm.on('change', () => {\n                    if (this.subForm && !this.shouldConditionallyClear()) {\n                        this.dataValue = this.subForm.getValue();\n                        this.triggerChange({\n                            noEmit: true\n                        });\n                    }\n                });\n                this.subForm.url = this.formSrc;\n                this.subForm.nosubmit = true;\n                this.subForm.root = this.root;\n                this.subForm.localRoot = this.isNestedWizard ? this.localRoot : this.subForm;\n                this.restoreValue();\n                this.valueChanged = this.hasSetValue;\n                this.onChange();\n                return this.subForm;\n            }).catch((err) => {\n                console.log(err);\n            });\n        }).then((subForm) => {\n            this.updateSubWizards(subForm);\n            return subForm;\n        });\n        return this.subFormReady;\n    }\n    hideSubmitButton(component) {\n        const isSubmitButton = component.type === 'button' && (component.action === 'submit' || !component.action);\n        if (isSubmitButton) {\n            component.hidden = true;\n            // clearOnHide no longer clears from the JSON `hidden` flag, so we make the button conditionally hidden to clear its data\n            component.customConditional = 'show = false';\n        }\n    }\n    /**\n     * Load the subform.\n     * @param {boolean} fromAttach - This function is being called from an `attach` method.\n     * @param {boolean} beforeSubmit - This function is being called from a `beforeSubmit` method.\n     * @returns {Promise} - The promise that resolves when the subform is loaded.\n     */\n    loadSubForm(fromAttach, beforeSubmit) {\n        var _a, _b, _c, _d, _e;\n        const loadHiddenForm = beforeSubmit && !this.component.clearOnHide;\n        if (this.builderMode || (this.conditionallyHidden() && !loadHiddenForm) || (this.isSubFormLazyLoad() && !fromAttach)) {\n            return Promise.resolve();\n        }\n        if (this.hasLoadedForm && !this.isRevisionChanged &&\n            !(this.options.pdf && ((_a = this.component) === null || _a === void 0 ? void 0 : _a.useOriginalRevision) && lodash_1.default.isNull(this.subForm) && !this.subFormLoading)) {\n            // Pass config down to sub forms.\n            if (this.root && this.root.form && this.root.form.config && !this.formObj.config) {\n                this.formObj.config = this.root.form.config;\n            }\n            return Promise.resolve(this.formObj);\n        }\n        else if (this.formSrc) {\n            this.subFormLoading = true;\n            const options = ((_c = (_b = this.root) === null || _b === void 0 ? void 0 : _b.formio) === null || _c === void 0 ? void 0 : _c.base) && ((_e = (_d = this.root) === null || _d === void 0 ? void 0 : _d.formio) === null || _e === void 0 ? void 0 : _e.projectUrl)\n                ? {\n                    base: this.root.formio.base,\n                    project: this.root.formio.projectUrl,\n                }\n                : {};\n            return (new Formio_1.Formio(this.formSrc, options)).loadForm({ params: { live: 1 } })\n                .then((formObj) => {\n                this.formObj = formObj;\n                if (this.options.pdf && this.component.useOriginalRevision) {\n                    this.formObj.display = 'form';\n                }\n                this.subFormLoading = false;\n                return formObj;\n            })\n                .catch((err) => {\n                console.log(err);\n                return null;\n            });\n        }\n        return Promise.resolve();\n    }\n    checkComponentConditions(data, flags, row) {\n        const visible = super.checkComponentConditions(data, flags, row);\n        // Return if already hidden\n        if (!visible) {\n            return visible;\n        }\n        if (this.subForm) {\n            return this.subForm.checkConditions(this.subFormData, flags);\n        }\n        // There are few cases when subForm is not loaded when a change is triggered,\n        // so we need to perform checkConditions after it is ready, or some conditional fields might be hidden in View mode\n        else if (this.subFormReady) {\n            this.subFormReady.then(() => {\n                if (this.subForm) {\n                    return this.subForm.checkConditions(this.subFormData, flags);\n                }\n            });\n        }\n        return visible;\n    }\n    calculateValue(data, flags, row) {\n        if (this.subForm) {\n            return this.subForm.calculateValue(this.subFormData, flags);\n        }\n        return super.calculateValue(data, flags, row);\n    }\n    setPristine(pristine) {\n        super.setPristine(pristine);\n        if (this.subForm) {\n            this.subForm.setPristine(pristine);\n        }\n    }\n    /**\n     * Determine if the subform should be submitted.\n     * @returns {*|boolean} - TRUE if the subform should be submitted, FALSE if it should not.\n     */\n    get shouldSubmit() {\n        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.shouldConditionallyClear();\n    }\n    /**\n     * Returns the data for the subform.\n     * @returns {*} - the data for the subform.\n     */\n    getSubFormData() {\n        if (lodash_1.default.get(this.subForm, 'form.display') === 'pdf') {\n            return this.subForm.getSubmission();\n        }\n        else {\n            return Promise.resolve(this.dataValue);\n        }\n    }\n    /**\n     * Submit the subform if configured to do so.\n     * @returns {Promise} - The promise that resolves when the subform is submitted.\n     */\n    submitSubForm() {\n        // If we wish to submit the form on next page, then do that here.\n        if (this.shouldSubmit) {\n            return this.subFormReady.then(() => {\n                if (!this.subForm) {\n                    return this.dataValue;\n                }\n                this.subForm.nosubmit = false;\n                this.subForm.submitted = true;\n                return this.subForm.submitForm({}, true).then(result => {\n                    this.subForm.loading = false;\n                    this.subForm.showAllErrors = false;\n                    this.dataValue = result.submission;\n                    return this.dataValue;\n                }).catch(err => {\n                    this.subForm.showAllErrors = true;\n                    this.subForm.onSubmissionError(err);\n                    return Promise.reject(err);\n                });\n            });\n        }\n        return this.getSubFormData();\n    }\n    /**\n     * Submit the form before the next page is triggered.\n     * @param {Function} next - The function to trigger the next page.\n     * @returns {Promise} - The promise that resolves when the subform submission is complete (if necessary) and the next page is triggered.\n     */\n    beforePage(next) {\n        // Should not submit child forms if we are going to the previous page\n        if (!next) {\n            return super.beforePage(next);\n        }\n        return this.submitSubForm(true).then(() => super.beforePage(next));\n    }\n    /**\n     * Submit the form before the whole form is triggered.\n     * @returns {Promise} - The promise that resolves when the subform submission is complete (if necessary) and the form is submitted.\n     */\n    beforeSubmit() {\n        var _a, _b, _c;\n        const submission = this.dataValue;\n        // Cancel triggered saveDraft\n        if (((_a = this.subForm) === null || _a === void 0 ? void 0 : _a.draftEnabled) && ((_b = this.subForm.triggerSaveDraft) === null || _b === void 0 ? void 0 : _b.cancel)) {\n            this.subForm.triggerSaveDraft.cancel();\n        }\n        const isAlreadySubmitted = submission && submission._id && submission.form;\n        const isDraftSubmission = this.options.saveDraft && submission.state === 'draft';\n        // This submission has already been submitted, so just return the reference data.\n        if (isAlreadySubmitted && !((_c = this.subForm) === null || _c === void 0 ? void 0 : _c.wizard) && !isDraftSubmission) {\n            this.dataValue = submission;\n            return Promise.resolve(this.dataValue);\n        }\n        // we need to load a hidden form (when clearOnHide is disabled) in order to get and submit (if needed) its data\n        const loadHiddenForm = !this.component.clearOnHide;\n        if ((this.isSubFormLazyLoad() || loadHiddenForm) && !this.subFormLoading && !this.subForm) {\n            return this.createSubForm(true, true)\n                .then(() => this.submitSubForm(false))\n                .then(() => this.dataValue)\n                .then(() => super.beforeSubmit());\n        }\n        else {\n            return this.submitSubForm(false)\n                .then(() => this.dataValue)\n                .then(() => super.beforeSubmit());\n        }\n    }\n    isSubFormLazyLoad() {\n        var _a, _b;\n        return ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a._form) === null || _b === void 0 ? void 0 : _b.display) === 'wizard' && this.component.lazyLoad;\n    }\n    isHidden() {\n        if (!this.visible) {\n            return true;\n        }\n        return !super.checkConditions(this.rootValue);\n    }\n    setValue(submission, flags = {}) {\n        var _a;\n        const changed = super.setValue(submission, flags);\n        this.valueChanged = true;\n        if (this.subForm) {\n            const revisionPath = submission._frid ? '_frid' : '_vid';\n            const shouldLoadOriginalRevision = this.useOriginalRevision\n                && (lodash_1.default.isNumber(submission[revisionPath]) || lodash_1.default.isNumber(submission._fvid))\n                && lodash_1.default.isNumber((_a = this.subForm.form) === null || _a === void 0 ? void 0 : _a[revisionPath])\n                && submission._fvid !== this.subForm.form[revisionPath];\n            if (shouldLoadOriginalRevision) {\n                this.setFormRevision(submission._frid || submission._fvid);\n                this.createSubForm().then(() => {\n                    this.attach(this.element);\n                });\n            }\n            else {\n                this.setSubFormValue(submission, flags);\n            }\n        }\n        return changed;\n    }\n    setSubFormValue(submission, flags) {\n        var _a, _b, _c, _d;\n        const shouldLoadSubmissionById = submission\n            && submission._id\n            && this.subForm.formio\n            && lodash_1.default.isEmpty(submission.data);\n        const shouldLoadDraftById = this.options.saveDraft && lodash_1.default.isEmpty(submission.data) && lodash_1.default.get(this.subForm, 'submission._id');\n        if (shouldLoadSubmissionById || shouldLoadDraftById) {\n            const formId = submission.form || this.formObj.form || this.component.form;\n            const submissionUrl = `${this.subForm.formio.formsUrl}/${formId}/submission/${submission._id || this.subForm.submission._id}`;\n            const options = ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.formio) === null || _b === void 0 ? void 0 : _b.base) && ((_d = (_c = this.root) === null || _c === void 0 ? void 0 : _c.formio) === null || _d === void 0 ? void 0 : _d.projectUrl)\n                ? {\n                    base: this.root.formio.base,\n                    project: this.root.formio.projectUrl,\n                }\n                : {};\n            this.subForm.setUrl(submissionUrl, Object.assign(Object.assign({}, this.options), options));\n            this.subForm.loadSubmission().catch((err) => {\n                console.error(`Unable to load subform submission ${submission._id}:`, err);\n            });\n        }\n        else {\n            this.onSetSubFormValue(submission, flags);\n        }\n    }\n    /**\n     * Sets the subform value\n     * @param {object|null|undefined} submission - The submission to set.\n     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.\n     * @returns {void}\n     */\n    onSetSubFormValue(submission, flags) {\n        this.subForm.setValue(submission, flags);\n    }\n    isEmpty(value = this.dataValue) {\n        return value === null || lodash_1.default.isEqual(value, this.emptyValue);\n    }\n    getValue() {\n        if (this.subForm) {\n            return this.subForm.getValue();\n        }\n        return this.dataValue;\n    }\n    get errors() {\n        let errors = super.errors;\n        if (this.subForm) {\n            errors = errors.concat(this.subForm.errors);\n        }\n        return errors;\n    }\n    conditionallyHidden() {\n        const conditionallyHidden = super.conditionallyHidden();\n        if (this.subForm) {\n            this.subForm._conditionallyHidden = conditionallyHidden;\n        }\n        return conditionallyHidden;\n    }\n    updateSubFormVisibility() {\n        if (this.subForm) {\n            this.subForm.parentVisible = this.visible;\n        }\n    }\n    /**\n     * Determines if this form is a Nested Wizard\n     * which means it should be a Wizard itself and should be a direct child of a Wizard's page\n     * @returns {boolean} - TRUE if this form is a Nested Wizard, FALSE otherwise\n     */\n    get isNestedWizard() {\n        var _a, _b, _c, _d, _e;\n        return ((_b = (_a = this.subForm) === null || _a === void 0 ? void 0 : _a._form) === null || _b === void 0 ? void 0 : _b.display) === 'wizard' && ((_e = (_d = (_c = this.parent) === null || _c === void 0 ? void 0 : _c.parent) === null || _d === void 0 ? void 0 : _d._form) === null || _e === void 0 ? void 0 : _e.display) === 'wizard';\n    }\n    get visible() {\n        return super.visible;\n    }\n    set visible(value) {\n        const isNestedWizard = this.isNestedWizard;\n        if (this._visible !== value) {\n            this._visible = value;\n            // Form doesn't load if hidden. If it becomes visible, create the form.\n            if (!this.subForm && value) {\n                this.createSubForm();\n                this.subFormReady.then(() => {\n                    this.updateSubFormVisibility();\n                    this.clearOnHide();\n                });\n                this.redraw();\n                return;\n            }\n            this.updateSubFormVisibility();\n            this.clearOnHide();\n            isNestedWizard ? this.rebuild() : this.redraw();\n        }\n        if (!value && isNestedWizard) {\n            this.root.redraw();\n        }\n    }\n    get parentVisible() {\n        return super.parentVisible;\n    }\n    set parentVisible(value) {\n        if (this._parentVisible !== value) {\n            this._parentVisible = value;\n            this.clearOnHide();\n            // Form doesn't load if hidden. If it becomes visible, create the form.\n            if (!this.subForm && value) {\n                this.createSubForm();\n                this.subFormReady.then(() => {\n                    this.updateSubFormVisibility();\n                });\n                this.redraw();\n                return;\n            }\n            this.updateSubFormVisibility();\n            this.redraw();\n        }\n    }\n    isInternalEvent(event) {\n        switch (event) {\n            case 'focus':\n            case 'blur':\n            case 'componentChange':\n            case 'componentError':\n            case 'error':\n            case 'formLoad':\n            case 'languageChanged':\n            case 'render':\n            case 'checkValidity':\n            case 'initialized':\n            case 'submit':\n            case 'submitButton':\n            case 'nosubmit':\n            case 'updateComponent':\n            case 'submitDone':\n            case 'submissionDeleted':\n            case 'requestDone':\n            case 'nextPage':\n            case 'prevPage':\n            case 'wizardNavigationClicked':\n            case 'updateWizardNav':\n            case 'restoreDraft':\n            case 'saveDraft':\n            case 'saveComponent':\n            case 'pdfUploaded':\n                return true;\n            default:\n                return false;\n        }\n    }\n    createEmitter() {\n        const emitter = new eventemitter3_1.default();\n        const nativeEmit = emitter.emit;\n        const that = this;\n        emitter.emit = function (event, ...args) {\n            const eventType = event.replace(`${that.options.namespace}.`, '');\n            nativeEmit.call(this, event, ...args);\n            if (!that.isInternalEvent(eventType)) {\n                that.emit(eventType, ...args);\n            }\n        };\n        return emitter;\n    }\n    deleteValue() {\n        super.setValue(null, {\n            noUpdateEvent: true,\n            noDefault: true\n        });\n        this.unset();\n    }\n}\nexports[\"default\"] = FormComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/form/Form.js?");
 
 /***/ }),
 
@@ -6975,7 +6975,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 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 */ \"./lib/cjs/utils/index.js\");\nconst ChoicesWrapper_1 = __importDefault(__webpack_require__(/*! ../../utils/ChoicesWrapper */ \"./lib/cjs/utils/ChoicesWrapper.js\"));\nclass SelectComponent extends ListComponent_1.default {\n    static schema(...extend) {\n        return ListComponent_1.default.schema({\n            type: 'select',\n            label: 'Select',\n            key: 'select',\n            idPath: 'id',\n            data: {\n                values: [{ label: '', value: '' }],\n                json: '',\n                url: '',\n                resource: '',\n                custom: ''\n            },\n            clearOnRefresh: false,\n            limit: 100,\n            valueProperty: '',\n            lazyLoad: true,\n            filter: '',\n            searchEnabled: true,\n            searchDebounce: 0.3,\n            searchField: '',\n            minSearch: 0,\n            readOnlyValue: false,\n            selectFields: '',\n            selectThreshold: 0.3,\n            uniqueOptions: false,\n            tableView: true,\n            fuseOptions: {\n                include: 'score',\n                threshold: 0.3,\n            },\n            indexeddb: {\n                filter: {}\n            },\n            customOptions: {},\n            useExactSearch: false,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Select',\n            group: 'basic',\n            icon: 'th-list',\n            weight: 70,\n            documentation: '/userguide/form-building/form-components#select',\n            schema: SelectComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return SelectComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        const numberType = () => ({ type: 'number' });\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {\n                const valueComp = Object.assign(Object.assign({}, classComp), { type: 'select' });\n                if ((0, utils_1.isSelectResourceWithObjectValue)(classComp)) {\n                    valueComp.reference = false;\n                    valueComp.onSetItems = `\n            var templateKeys = utils.getItemTemplateKeys(component.template) || [];\n            items = _.map(items || [], i => {\n              var item = {};\n              _.each(templateKeys, k =>  _.set(item, k, _.get(i, k)));\n              return item;\n            })\n          `;\n                }\n                return valueComp;\n            }, dataTypeOperators: {\n                number: ['lessThan', 'greaterThan', 'lessThanOrEqual', 'greaterThanOrEqual'],\n            }, dataTypeValueComponents: {\n                number: {\n                    lessThan: numberType,\n                    greaterThan: numberType,\n                    lessThanOrEqual: numberType,\n                    greaterThanOrEqual: numberType,\n                },\n            } });\n    }\n    static savedValueTypes(schema) {\n        const { boolean, string, number, object, array } = utils_1.componentValueTypes;\n        const { dataType, reference } = schema;\n        const types = (0, utils_1.getComponentSavedTypes)(schema);\n        if (types) {\n            return types;\n        }\n        if (reference) {\n            return [object];\n        }\n        if (dataType === 'object') {\n            return [object, array];\n        }\n        if (utils_1.componentValueTypes[dataType]) {\n            return [utils_1.componentValueTypes[dataType]];\n        }\n        return [boolean, string, number, object, array];\n    }\n    init() {\n        super.init();\n        this.templateData = {};\n        // Trigger an update.\n        let updateArgs = [];\n        const triggerUpdate = lodash_1.default.debounce((...args) => {\n            updateArgs = [];\n            return this.updateItems.apply(this, args);\n        }, 100);\n        this.triggerUpdate = (...args) => {\n            // Make sure we always resolve the previous promise before reassign it\n            if (typeof this.itemsLoadedResolve === 'function') {\n                this.itemsLoadedResolve();\n            }\n            this.itemsLoaded = new Promise((resolve) => {\n                this.itemsLoadedResolve = resolve;\n            });\n            if (args.length) {\n                updateArgs = args;\n            }\n            return triggerUpdate(...updateArgs);\n        };\n        // Keep track of the select options.\n        this.selectOptions = [];\n        if (this.itemsFromUrl) {\n            this.isFromSearch = false;\n            this.searchServerCount = null;\n            this.defaultServerCount = null;\n            this.isScrollLoading = false;\n            this.searchDownloadedResources = [];\n            this.defaultDownloadedResources = [];\n        }\n        // If this component has been activated.//\n        this.activated = false;\n        this.itemsLoaded = new Promise((resolve) => {\n            this.itemsLoadedResolve = resolve;\n        });\n        this.shouldPositionDropdown = this.hasDataGridAncestor();\n        if (this.isHtmlRenderMode()) {\n            this.activate();\n        }\n        // Get the template keys for this select component.\n        this.getTemplateKeys();\n    }\n    get defaultSchema() {\n        return SelectComponent.schema();\n    }\n    get emptyValue() {\n        if (this.component.multiple) {\n            return [];\n        }\n        // if select has JSON data source type, we are defining if empty value would be an object or a string by checking JSON's first item\n        if (this.component.dataSrc === 'json' && this.component.data.json) {\n            const firstItem = this.component.data.json[0];\n            let firstValue;\n            if (this.valueProperty) {\n                firstValue = lodash_1.default.get(firstItem, this.valueProperty);\n            }\n            else {\n                firstValue = firstItem;\n            }\n            if (firstValue && typeof firstValue === 'string') {\n                return '';\n            }\n            else {\n                return {};\n            }\n        }\n        if (this.valueProperty) {\n            return '';\n        }\n        return {};\n    }\n    get valueProperty() {\n        if (this.component.valueProperty) {\n            return this.component.valueProperty;\n        }\n        // Force values datasource to use values without actually setting it on the component settings.\n        if (this.component.dataSrc === 'values') {\n            return 'value';\n        }\n        return '';\n    }\n    get inputInfo() {\n        const info = super.elementInfo();\n        info.type = 'select';\n        info.changeEvent = 'change';\n        return info;\n    }\n    get isSelectResource() {\n        return this.component.dataSrc === 'resource';\n    }\n    get itemsFromUrl() {\n        return this.isSelectResource || this.isSelectURL;\n    }\n    get isInfiniteScrollProvided() {\n        return this.itemsFromUrl;\n    }\n    get shouldDisabled() {\n        return super.shouldDisabled || this.parentDisabled;\n    }\n    get shouldInitialLoad() {\n        if (this.component.widget === 'html5' &&\n            this.isEntireObjectDisplay() &&\n            this.component.searchField &&\n            this.dataValue) {\n            return false;\n        }\n        return super.shouldLoad;\n    }\n    get selectMetadata() {\n        return super.selectData;\n    }\n    get selectData() {\n        return this.selectMetadata || this.component.selectData;\n    }\n    isEntireObjectDisplay() {\n        return this.component.dataSrc === 'resource' && this.valueProperty === 'data';\n    }\n    selectValueAndLabel(data) {\n        const value = this.getOptionValue((this.isEntireObjectDisplay() && !this.itemValue(data)) ? data : this.itemValue(data));\n        return {\n            value,\n            label: this.itemTemplate((this.isEntireObjectDisplay() && !lodash_1.default.isObject(data.data)) ? { data: data } : data, value)\n        };\n    }\n    itemTemplate(data, value) {\n        if (!lodash_1.default.isNumber(data) && lodash_1.default.isEmpty(data)) {\n            return '';\n        }\n        // If they wish to show the value in read only mode, then just return the itemValue here.\n        if (this.options.readOnly && this.component.readOnlyValue) {\n            return this.itemValue(data);\n        }\n        // Perform a fast interpretation if we should not use the template.\n        if (data && !this.component.template) {\n            const itemLabel = data.label || data;\n            const value = (typeof itemLabel === 'string') ? this.t(itemLabel, { _userInput: true }) : itemLabel;\n            return this.sanitize(value, this.shouldSanitizeValue);\n        }\n        // Inside DataTable component won't have dataValue set\n        const shouldUseSelectData = (this.component.multiple && lodash_1.default.isArray(this.dataValue)\n            ? this.dataValue.find((val) => this.normalizeSingleValue(value) === val)\n            : (this.dataValue === this.normalizeSingleValue(value))) || this.inDataTable;\n        if (shouldUseSelectData) {\n            const selectData = this.selectData;\n            if (selectData) {\n                const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;\n                if (!this.templateData || !this.templateData[templateValue]) {\n                    this.getOptionTemplate(data, value);\n                }\n                if (this.component.multiple) {\n                    if (selectData[templateValue]) {\n                        data = selectData[templateValue];\n                    }\n                }\n                else {\n                    data = selectData;\n                }\n            }\n        }\n        if (typeof data === 'string' || typeof data === 'number') {\n            return this.sanitize(this.t(data, { _userInput: true }), this.shouldSanitizeValue);\n        }\n        if (Array.isArray(data)) {\n            return data.map((val) => {\n                if (typeof val === 'string' || typeof val === 'number') {\n                    return this.sanitize(this.t(val, { _userInput: true }), this.shouldSanitizeValue);\n                }\n                return val;\n            });\n        }\n        if (data.data) {\n            // checking additional fields in the template for the selected Entire Object option\n            const hasNestedFields = /item\\.data\\.\\w*/g.test(this.component.template);\n            data.data = this.isEntireObjectDisplay() && lodash_1.default.isObject(data.data) && !hasNestedFields\n                ? JSON.stringify(data.data)\n                : data.data;\n        }\n        return super.itemTemplate(data, value);\n    }\n    /**\n     * Adds an option to the select dropdown.\n     * @param {*} value - The value of the new option.\n     * @param {string} label - The label of the new option.\n     * @param {object} [attrs] - Additional value attributes. Defaults to {}.\n     * @param {string} [id] - An id. Defaults to a random string.\n     */\n    addOption(value, label, attrs = {}, id = (0, utils_1.getRandomComponentId)()) {\n        if (lodash_1.default.isNil(label))\n            return;\n        const idPath = this.component.idPath\n            ? this.component.idPath.split('.').reduceRight((obj, key) => ({ [key]: obj }), id)\n            : {};\n        const option = Object.assign({ value: this.getOptionValue(value), label }, idPath);\n        const skipOption = this.component.uniqueOptions\n            ? !!this.selectOptions.find((selectOption) => lodash_1.default.isEqual(selectOption.value, option.value))\n            : false;\n        if (skipOption) {\n            return;\n        }\n        if (value) {\n            this.selectOptions.push(option);\n        }\n        if (this.refs.selectContainer && (this.component.widget === 'html5')) {\n            // Replace an empty Object value to an empty String.\n            if (option.value && lodash_1.default.isObject(option.value) && lodash_1.default.isEmpty(option.value)) {\n                option.value = '';\n            }\n            // Add element to option so we can reference it later.\n            const div = document.createElement('div');\n            div.innerHTML = this.sanitize(this.renderTemplate('selectOption', {\n                selected: lodash_1.default.isEqual(this.getOptionValue(this.dataValue), option.value),\n                option,\n                attrs,\n                id,\n                useId: (this.valueProperty === '' || this.isEntireObjectDisplay()) && lodash_1.default.isObject(value) && id,\n            }), this.shouldSanitizeValue).trim();\n            option.element = div.firstChild;\n            this.refs.selectContainer.appendChild(option.element);\n        }\n    }\n    addValueOptions(items) {\n        items = items || [];\n        let added = false;\n        let data = this.dataValue;\n        // preset submission value with value property before request.\n        if (this.options.pdf && !items.length && this.component.dataSrc === 'url' && this.valueProperty) {\n            data = Array.isArray(data)\n                ? data.map(item => lodash_1.default.set({}, this.valueProperty, item))\n                : lodash_1.default.set({}, this.valueProperty, data);\n        }\n        if (!this.selectOptions.length) {\n            // Add the currently selected choices if they don't already exist.\n            const currentChoices = Array.isArray(data) && this.component.multiple ? data : [data];\n            added = this.addCurrentChoices(currentChoices, items);\n            if (!added && !this.component.multiple) {\n                this.addPlaceholder();\n            }\n        }\n        return added;\n    }\n    disableInfiniteScroll() {\n        if (!this.downloadedResources) {\n            return;\n        }\n        this.downloadedResources.serverCount = this.downloadedResources.length;\n        this.serverCount = this.downloadedResources.length;\n    }\n    shouldResetChoicesItems(items) {\n        if (this.choices._store.choices.length !== items.length) {\n            return true;\n        }\n        for (let item of items) {\n            const choicesItem = this.choices._store.choices.find((i) => i.label === item.label);\n            if (!choicesItem) {\n                return true;\n            }\n        }\n        return false;\n    }\n    /* eslint-disable max-statements */\n    setItems(items, fromSearch) {\n        var _a, _b;\n        this.selectItems = items;\n        // If the items is a string, then parse as JSON.\n        if (typeof items == 'string') {\n            try {\n                items = JSON.parse(items);\n            }\n            catch (err) {\n                console.warn(err.message);\n                items = [];\n            }\n        }\n        // Allow js processing (needed for form builder)\n        if (this.component.onSetItems) {\n            const newItems = typeof this.component.onSetItems === 'function'\n                ? this.component.onSetItems(this, items)\n                : this.evaluate(this.component.onSetItems, { items: items }, 'items');\n            if (newItems) {\n                items = newItems;\n            }\n        }\n        if (!this.choices && this.refs.selectContainer) {\n            this.empty(this.refs.selectContainer);\n        }\n        // If they provided select values, then we need to get them instead.\n        if (this.component.selectValues) {\n            items = lodash_1.default.get(items, this.component.selectValues, items) || [];\n        }\n        let areItemsEqual;\n        if (this.itemsFromUrl) {\n            areItemsEqual = this.isSelectURL ? lodash_1.default.isEqual(items, this.downloadedResources) : false;\n            const areItemsEnded = this.component.limit > items.length;\n            const areItemsDownloaded = areItemsEqual\n                && this.downloadedResources\n                && this.downloadedResources.length === items.length;\n            if (areItemsEnded) {\n                this.disableInfiniteScroll();\n            }\n            else if (areItemsDownloaded) {\n                this.selectOptions = [];\n            }\n            else {\n                this.serverCount = items.serverCount;\n            }\n        }\n        if (this.isScrollLoading && items) {\n            if (!areItemsEqual) {\n                this.downloadedResources = this.downloadedResources\n                    ? this.downloadedResources.concat(items)\n                    : items;\n            }\n            this.downloadedResources.serverCount = items.serverCount || this.downloadedResources.serverCount;\n        }\n        else {\n            this.downloadedResources = items || [];\n            this.selectOptions = [];\n            // If there is new select option with same id as already selected, set the new one\n            if (!lodash_1.default.isEmpty(this.dataValue) && this.component.idPath) {\n                const selectedOptionId = lodash_1.default.get(this.dataValue, this.component.idPath, null);\n                const newOptionWithSameId = !lodash_1.default.isNil(selectedOptionId) && items.find(item => {\n                    const itemId = lodash_1.default.get(item, this.component.idPath);\n                    return itemId === selectedOptionId;\n                });\n                if (newOptionWithSameId) {\n                    this.setValue(newOptionWithSameId);\n                }\n            }\n        }\n        // Add the value options.\n        if (!fromSearch) {\n            this.addValueOptions(items);\n        }\n        if (this.component.widget === 'html5' && !this.component.placeholder) {\n            this.addOption(null, '');\n        }\n        // Iterate through each of the items.\n        lodash_1.default.each(items, (item, index) => {\n            // preventing references of the components inside the form to the parent form when building forms\n            if (this.root && this.root.options.editForm && this.root.options.editForm._id && this.root.options.editForm._id === item._id)\n                return;\n            const itemValueAndLabel = this.selectValueAndLabel(item);\n            this.addOption(itemValueAndLabel.value, itemValueAndLabel.label, {}, lodash_1.default.get(item, this.component.idPath, String(index)));\n        });\n        if (this.choices) {\n            this.choices.setChoices(this.selectOptions, 'value', 'label', true, true, !fromSearch && this.shouldResetChoicesItems(this.selectOptions));\n        }\n        else if (this.loading) {\n            // Re-attach select input.\n            // this.appendTo(this.refs.input[0], this.selectContainer);\n        }\n        // We are no longer loading.\n        this.isScrollLoading = false;\n        this.loading = false;\n        const searching = fromSearch && ((_b = (_a = this.choices) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.isFocussed);\n        if (!searching) {\n            // If a value is provided, then select it.\n            if (!this.isEmpty() || this.isRemoveButtonPressed) {\n                this.setValue(this.dataValue, {\n                    noUpdateEvent: true\n                });\n            }\n            else if (this.shouldAddDefaultValue && !this.options.readOnly) {\n                // If a default value is provided then select it.\n                const defaultValue = this.defaultValue;\n                if (!this.isEmpty(defaultValue)) {\n                    this.setValue(defaultValue);\n                }\n            }\n        }\n        // Say we are done loading the items.\n        this.itemsLoadedResolve();\n    }\n    getSingleItemValueForHTMLMode(data) {\n        var _a;\n        const option = (_a = this.selectOptions) === null || _a === void 0 ? void 0 : _a.find(({ value }) => lodash_1.default.isEqual(value, data));\n        if (option) {\n            return option.label || data;\n        }\n        return data;\n    }\n    itemValueForHTMLMode(value) {\n        if (!this.isHtmlRenderMode()) {\n            return super.itemValueForHTMLMode(value);\n        }\n        if (Array.isArray(value)) {\n            const values = value.map(item => Array.isArray(item)\n                ? this.itemValueForHTMLMode(item)\n                : this.getSingleItemValueForHTMLMode(item));\n            return values.join(', ');\n        }\n        return this.getSingleItemValueForHTMLMode(value);\n    }\n    /* eslint-enable max-statements */\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (!defaultValue && (this.component.defaultValue === false || this.component.defaultValue === 0)) {\n            defaultValue = this.component.defaultValue;\n        }\n        return defaultValue;\n    }\n    get loadingError() {\n        return !this.component.refreshOn && !this.component.refreshOnBlur && this.networkError;\n    }\n    loadItems(url, search, headers, options, method, body) {\n        options = options || {};\n        // See if we should load items or not.\n        if (!this.shouldLoad || (!this.itemsFromUrl && this.options.readOnly)) {\n            this.isScrollLoading = false;\n            this.loading = false;\n            this.itemsLoadedResolve();\n            return;\n        }\n        // See if they have not met the minimum search requirements.\n        const minSearch = parseInt(this.component.minSearch, 10);\n        if (this.component.searchField &&\n            (minSearch > 0) &&\n            (!search || (search.length < minSearch))) {\n            // Set empty items.\n            return this.setItems([]);\n        }\n        // Ensure we have a method and remove any body if method is get\n        method = method || 'GET';\n        if (method.toUpperCase() === 'GET') {\n            body = null;\n        }\n        const limit = this.component.limit || 100;\n        const skip = this.isScrollLoading ? this.selectOptions.length : 0;\n        const query = this.component.disableLimit ? {} : {\n            limit,\n            skip,\n        };\n        // Allow for url interpolation.\n        url = this.sanitize(this.interpolate(url, {\n            formioBase: Formio_1.Formio.getBaseUrl(),\n            search,\n            limit,\n            skip,\n            page: Math.abs(Math.floor(skip / limit))\n        }), this.shouldSanitizeValue);\n        // Add search capability.\n        if (this.component.searchField && search) {\n            const searchValue = Array.isArray(search)\n                ? search.join(',')\n                : typeof search === 'object'\n                    ? JSON.stringify(search)\n                    : search;\n            query[this.component.searchField] = this.component.searchField.endsWith('__regex')\n                ? lodash_1.default.escapeRegExp(searchValue)\n                : searchValue;\n        }\n        // If they wish to return only some fields.\n        if (this.component.selectFields) {\n            query.select = this.component.selectFields;\n        }\n        // Add sort capability\n        if (this.component.sort) {\n            query.sort = this.component.sort;\n        }\n        if (!lodash_1.default.isEmpty(query)) {\n            // Add the query string.\n            url += (!url.includes('?') ? '?' : '&') + Formio_1.Formio.serialize(query, (item) => this.interpolate(item));\n        }\n        // Add filter capability\n        if (this.component.filter) {\n            url += (!url.includes('?') ? '?' : '&') + this.interpolate(this.component.filter);\n        }\n        // Set ignoreCache if it is\n        options.ignoreCache = this.component.ignoreCache;\n        // Make the request.\n        options.header = headers;\n        this.loading = true;\n        Formio_1.Formio.makeRequest(this.options.formio, 'select', url, method, body, options)\n            .then((response) => {\n            this.loading = false;\n            this.setItems(response, !!search);\n        })\n            .catch((err) => {\n            if (this.itemsFromUrl) {\n                this.setItems([]);\n                this.disableInfiniteScroll();\n            }\n            this.isScrollLoading = false;\n            this.handleLoadingError(err);\n        });\n    }\n    handleLoadingError(err) {\n        this.loading = false;\n        if (err.networkError) {\n            this.networkError = true;\n        }\n        this.itemsLoadedResolve();\n        this.emit('componentError', {\n            component: this.component,\n            message: err.toString(),\n        });\n        console.warn(`Unable to load resources for ${this.key}`);\n    }\n    /**\n     * Get the request headers for this select dropdown.\n     * @returns {*} - Returns the request headers for this select dropdown.\n     */\n    get requestHeaders() {\n        // Create the headers object.\n        const headers = new Formio_1.Formio.Headers();\n        // Add custom headers to the url.\n        if (this.component.data && this.component.data.headers) {\n            try {\n                lodash_1.default.each(this.component.data.headers, (header) => {\n                    if (header.key) {\n                        headers.set(header.key, this.interpolate(header.value));\n                    }\n                });\n            }\n            catch (err) {\n                console.warn(err.message);\n            }\n        }\n        return headers;\n    }\n    getCustomItems() {\n        const customItems = this.evaluate(this.component.data.custom, {\n            values: []\n        }, 'values');\n        this.asyncValues = (0, utils_1.isPromise)(customItems);\n        return customItems;\n    }\n    asyncCustomValues() {\n        if (!lodash_1.default.isBoolean(this.asyncValues)) {\n            this.getCustomItems();\n        }\n        return this.asyncValues;\n    }\n    updateCustomItems(forceUpdate) {\n        if (this.asyncCustomValues()) {\n            if (!forceUpdate && !this.active) {\n                this.itemsLoadedResolve();\n                return;\n            }\n            this.loading = true;\n            this.getCustomItems()\n                .then(items => {\n                this.loading = false;\n                this.setItems(items || []);\n            })\n                .catch(err => {\n                this.handleLoadingError(err);\n            });\n        }\n        else {\n            this.setItems(this.getCustomItems() || []);\n        }\n    }\n    isEmpty(value = this.dataValue) {\n        return super.isEmpty(value) || value === undefined;\n    }\n    refresh(value, { instance }) {\n        if (this.component.clearOnRefresh && (instance && !instance.pristine)) {\n            this.setValue(this.emptyValue);\n        }\n        this.updateItems(null, true);\n    }\n    get additionalResourcesAvailable() {\n        return lodash_1.default.isNil(this.serverCount) || (this.serverCount > this.downloadedResources.length);\n    }\n    get serverCount() {\n        if (this.isFromSearch) {\n            return this.searchServerCount;\n        }\n        return this.defaultServerCount;\n    }\n    set serverCount(value) {\n        if (this.isFromSearch) {\n            this.searchServerCount = value;\n        }\n        else {\n            this.defaultServerCount = value;\n        }\n    }\n    get downloadedResources() {\n        if (this.isFromSearch) {\n            return this.searchDownloadedResources;\n        }\n        return this.defaultDownloadedResources;\n    }\n    set downloadedResources(value) {\n        if (this.isFromSearch) {\n            this.searchDownloadedResources = value;\n        }\n        else {\n            this.defaultDownloadedResources = value;\n        }\n    }\n    addPlaceholder() {\n        if (!this.component.placeholder) {\n            return;\n        }\n        this.addOption('', this.component.placeholder, { placeholder: true });\n    }\n    /**\n     * Activate this select control.\n     */\n    activate() {\n        if (this.loading || !this.active) {\n            this.setLoadingItem();\n        }\n        if (this.active) {\n            return;\n        }\n        this.activated = true;\n        this.triggerUpdate();\n    }\n    setLoadingItem(addToCurrentList = false) {\n        if (this.choices) {\n            if (addToCurrentList) {\n                this.choices.setChoices([{\n                        value: `${this.id}-loading`,\n                        label: 'Loading...',\n                        disabled: true,\n                    }], 'value', 'label');\n            }\n            else {\n                this.choices.setChoices([{\n                        value: '',\n                        label: `<i class=\"${this.iconClass('refresh')}\" style=\"font-size:1.3em;\"></i>`,\n                        disabled: true,\n                    }], 'value', 'label', true);\n            }\n        }\n        else if (this.component.dataSrc === 'url' || this.component.dataSrc === 'resource') {\n            this.addOption('', this.t('loading...'));\n        }\n    }\n    get active() {\n        return !this.component.lazyLoad || this.activated;\n    }\n    render() {\n        const info = this.inputInfo;\n        info.attr = info.attr || {};\n        info.multiple = this.component.multiple;\n        return super.render(this.wrapElement(this.renderTemplate('select', {\n            input: info,\n            selectOptions: '',\n            index: null,\n        })));\n    }\n    wrapElement(element) {\n        return this.component.addResource && !this.options.readOnly\n            ? (this.renderTemplate('resourceAdd', {\n                element\n            }))\n            : element;\n    }\n    choicesOptions() {\n        const useSearch = this.component.hasOwnProperty('searchEnabled') ? this.component.searchEnabled : true;\n        const placeholderValue = this.t(this.component.placeholder, { _userInput: true });\n        let customOptions = this.component.customOptions || {};\n        if (typeof customOptions == 'string') {\n            try {\n                customOptions = JSON.parse(customOptions);\n            }\n            catch (err) {\n                console.warn(err.message);\n                customOptions = {};\n            }\n        }\n        const commonFuseOptions = {\n            maxPatternLength: 1000,\n            distance: 1000,\n        };\n        return Object.assign({ removeItemButton: this.component.disabled ? false : lodash_1.default.get(this.component, 'removeItemButton', true), itemSelectText: '', classNames: {\n                containerOuter: ['choices', 'form-group', 'formio-choices'],\n                containerInner: this.transform('class', 'form-control ui fluid selection dropdown').split(' '),\n            }, addItemText: false, allowHTML: true, placeholder: !!this.component.placeholder, placeholderValue: placeholderValue, noResultsText: this.t('No results found'), noChoicesText: this.t('No choices to choose from'), searchPlaceholderValue: this.t('Type to search'), shouldSort: false, position: (this.component.dropdown || 'auto'), searchEnabled: useSearch, searchChoices: !this.component.searchField, searchFields: lodash_1.default.get(this, 'component.searchFields', ['label']), shadowRoot: this.root ? this.root.shadowRoot : null, fuseOptions: this.component.useExactSearch\n                ? Object.assign({ tokenize: true, matchAllTokens: true }, commonFuseOptions) : Object.assign({}, lodash_1.default.get(this, 'component.fuseOptions', {}), Object.assign({ include: 'score', threshold: lodash_1.default.get(this, 'component.selectThreshold', 0.3) }, commonFuseOptions)), valueComparer: lodash_1.default.isEqual, resetScrollPosition: false, duplicateItemsAllowed: false }, customOptions);\n    }\n    /* eslint-disable max-statements */\n    attach(element) {\n        var _a, _b, _c;\n        const superAttach = super.attach(element);\n        this.loadRefs(element, {\n            selectContainer: 'single',\n            addResource: 'single',\n            autocompleteInput: 'single'\n        });\n        //enable autocomplete for select\n        const autocompleteInput = this.refs.autocompleteInput;\n        if (autocompleteInput) {\n            this.addEventListener(autocompleteInput, 'change', (event) => {\n                this.setValue(event.target.value);\n            });\n        }\n        const input = this.refs.selectContainer;\n        if (!input) {\n            return;\n        }\n        this.addEventListener(input, this.inputInfo.changeEvent, () => this.updateValue(null, {\n            modified: true\n        }));\n        this.attachRefreshOnBlur();\n        if (this.component.widget === 'html5') {\n            this.addFocusBlurEvents(input);\n            this.triggerUpdate(null, true);\n            if (this.visible) {\n                this.setItems(this.selectItems || []);\n            }\n            this.focusableElement = input;\n            if (this.component.dataSrc === 'custom') {\n                this.addEventListener(input, 'focus', () => this.updateCustomItems());\n            }\n            this.addEventListener(input, 'keydown', (event) => {\n                const { key } = event;\n                if (['Backspace', 'Delete'].includes(key)) {\n                    this.setValue(this.emptyValue);\n                }\n            });\n            return;\n        }\n        const tabIndex = input.tabIndex;\n        this.addPlaceholder();\n        if (this.i18next) {\n            input.setAttribute('dir', this.i18next.dir());\n        }\n        if ((_c = (_b = (_a = this.choices) === null || _a === void 0 ? void 0 : _a.containerOuter) === null || _b === void 0 ? void 0 : _b.element) === null || _c === void 0 ? void 0 : _c.parentNode) {\n            this.choices.destroy();\n        }\n        const choicesOptions = this.choicesOptions();\n        if (ChoicesWrapper_1.default) {\n            this.choices = new ChoicesWrapper_1.default(input, choicesOptions);\n            if (this.selectOptions && this.selectOptions.length) {\n                this.choices.setChoices(this.selectOptions, 'value', 'label', true);\n            }\n            if (this.component.multiple) {\n                this.focusableElement = this.choices.input.element;\n            }\n            else {\n                this.focusableElement = this.choices.containerInner.element;\n                this.choices.containerOuter.element.setAttribute('tabIndex', '-1');\n                this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());\n            }\n            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('Failed to normalize value', err);\n            return value;\n        }\n    }\n    /**\n     * Normalize values coming into updateValue. For example, depending on the configuration, string value `\"true\"` will be normalized to boolean `true`.\n     * @param {*} value - The value to normalize\n     * @returns {*} - Returns the normalized value\n     */\n    normalizeValue(value) {\n        if (this.component.multiple && Array.isArray(value)) {\n            return value.map((singleValue) => this.normalizeSingleValue(singleValue));\n        }\n        return super.normalizeValue(this.normalizeSingleValue(value));\n    }\n    setMetadata(value, flags = {}) {\n        var _a, _b;\n        if (lodash_1.default.isNil(value)) {\n            return;\n        }\n        const valueIsObject = lodash_1.default.isObject(value);\n        //check if value equals to default emptyValue\n        if (valueIsObject && Object.keys(value).length === 0) {\n            return value;\n        }\n        // Check to see if we need to save off the template data into our metadata.\n        const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;\n        const shouldSaveData = (!valueIsObject || this.component.reference) && !this.inDataTable;\n        if (!lodash_1.default.isNil(templateValue) && shouldSaveData && this.templateData && this.templateData[templateValue] && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submission)) {\n            const submission = this.root.submission;\n            if (!submission.metadata) {\n                submission.metadata = {};\n            }\n            if (!submission.metadata.selectData) {\n                submission.metadata.selectData = {};\n            }\n            let templateData = this.templateData[templateValue];\n            if (this.component.multiple) {\n                templateData = {};\n                const dataValue = this.dataValue;\n                if (dataValue && lodash_1.default.isArray(dataValue) && dataValue.length) {\n                    dataValue.forEach((dataValueItem) => {\n                        const dataValueItemValue = this.component.reference ? dataValueItem._id.toString() : dataValueItem;\n                        templateData[dataValueItemValue] = this.templateData[dataValueItemValue];\n                    });\n                }\n                templateData[value] = this.templateData[value];\n            }\n            lodash_1.default.set(submission.metadata.selectData, this.path, templateData);\n        }\n        if (flags.resetValue && ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submission) && !this.options.readOnly) {\n            const submission = this.root.submission;\n            if (!submission.metadata) {\n                submission.metadata = {};\n            }\n            submission.metadata.selectData = {};\n        }\n    }\n    updateValue(value, flags) {\n        const changed = super.updateValue(value, flags);\n        if (changed || !this.selectMetadata || flags.resetValue) {\n            if (this.component.multiple && Array.isArray(this.dataValue)) {\n                this.dataValue.forEach(singleValue => this.setMetadata(singleValue, flags));\n            }\n            else {\n                this.setMetadata(this.dataValue, flags);\n            }\n        }\n        return changed;\n    }\n    undoValueTyping(value) {\n        let untypedValue = value;\n        if (this.component.multiple && Array.isArray(value)) {\n            untypedValue = value.map(v => {\n                if (typeof v === 'boolean' || typeof v === 'number') {\n                    return v.toString();\n                }\n                return v;\n            });\n        }\n        else {\n            if (typeof value === 'boolean' || typeof value === 'number') {\n                untypedValue = value.toString();\n            }\n        }\n        return untypedValue;\n    }\n    setValue(value, flags = {}) {\n        const previousValue = this.dataValue;\n        const changed = this.updateValue(value, flags);\n        if (this.component.widget === 'html5' && (lodash_1.default.isEqual(value, previousValue) || lodash_1.default.isEqual(previousValue, {}) && lodash_1.default.isEqual(flags, {})) && !flags.fromSubmission) {\n            return false;\n        }\n        value = this.dataValue;\n        const hasPreviousValue = !this.isEmpty(previousValue);\n        const hasValue = !this.isEmpty(value);\n        // Undo typing when searching to set the value.\n        value = this.undoValueTyping(value);\n        if (this.isHtmlRenderMode() && flags && flags.fromSubmission && changed) {\n            this.itemsLoaded.then(() => {\n                this.redraw();\n            });\n            return changed;\n        }\n        // Do not set the value if we are loading... that will happen after it is done.\n        if (this.loading) {\n            return changed;\n        }\n        // Determine if we need to perform an initial lazyLoad api call if searchField is provided.\n        if (this.isInitApiCallNeeded(hasValue)) {\n            this.loading = true;\n            this.lazyLoadInit = true;\n            const searchProperty = this.component.searchField || this.component.valueProperty;\n            this.triggerUpdate(lodash_1.default.get(value.data || value, searchProperty, value), true);\n            return changed;\n        }\n        // Add the value options.\n        this.itemsLoaded.then(() => {\n            this.addValueOptions();\n            this.setChoicesValue(value, hasPreviousValue, flags);\n        });\n        return changed;\n    }\n    isInitApiCallNeeded(hasValue) {\n        return this.component.lazyLoad &&\n            !this.lazyLoadInit &&\n            !this.active &&\n            !this.selectOptions.length &&\n            hasValue &&\n            this.shouldInitialLoad &&\n            this.visible && (this.component.searchField || this.component.valueProperty);\n    }\n    setChoicesValue(value, hasPreviousValue, flags = {}) {\n        const hasValue = !this.isEmpty(value) || flags.fromSubmission;\n        hasPreviousValue = (hasPreviousValue === undefined) ? true : hasPreviousValue;\n        if (this.choices) {\n            // Now set the value.\n            if (hasValue) {\n                this.choices.removeActiveItems();\n                // Add the currently selected choices if they don't already exist.\n                const currentChoices = Array.isArray(value) && this.component.multiple ? value : [value];\n                if (!this.addCurrentChoices(currentChoices, this.selectOptions, true)) {\n                    this.choices.setChoices(this.selectOptions, 'value', 'label', true);\n                }\n                this.choices.setChoiceByValue(currentChoices);\n            }\n            else if (hasPreviousValue || flags.resetValue) {\n                this.choices.removeActiveItems();\n            }\n        }\n        else {\n            if (hasValue) {\n                const values = Array.isArray(value) ? value : [value];\n                if (!lodash_1.default.isEqual(this.dataValue, this.defaultValue) && this.selectOptions.length < 2\n                    || (this.selectData && flags.fromSubmission)) {\n                    const { value, label } = this.selectValueAndLabel(this.dataValue);\n                    this.addOption(value, label);\n                }\n                lodash_1.default.each(this.selectOptions, (selectOption) => {\n                    lodash_1.default.each(values, (val) => {\n                        if (selectOption.value === '') {\n                            selectOption.value = {};\n                        }\n                        if (lodash_1.default.isEqual(val, selectOption.value) && selectOption.element) {\n                            selectOption.element.selected = true;\n                            selectOption.element.setAttribute('selected', 'selected');\n                            return false;\n                        }\n                    });\n                });\n            }\n            else {\n                lodash_1.default.each(this.selectOptions, (selectOption) => {\n                    if (selectOption.element) {\n                        selectOption.element.selected = false;\n                        selectOption.element.removeAttribute('selected');\n                    }\n                });\n            }\n        }\n    }\n    validateValueAvailability(setting, value) {\n        if (!(0, utils_1.boolValue)(setting) || !value) {\n            return true;\n        }\n        const values = this.getOptionsValues();\n        if (values) {\n            if (lodash_1.default.isObject(value)) {\n                const compareComplexValues = (optionValue) => {\n                    const normalizedOptionValue = this.normalizeSingleValue(optionValue);\n                    if (!lodash_1.default.isObject(normalizedOptionValue)) {\n                        return false;\n                    }\n                    try {\n                        return (JSON.stringify(normalizedOptionValue) === JSON.stringify(value));\n                    }\n                    catch (err) {\n                        console.warn.error('Error while comparing items', err);\n                        return false;\n                    }\n                };\n                return values.findIndex((optionValue) => compareComplexValues(optionValue)) !== -1;\n            }\n            return values.findIndex((optionValue) => this.normalizeSingleValue(optionValue) === value) !== -1;\n        }\n        return false;\n    }\n    /**\n     * Performs required transformations on the initial value to use in selectOptions\n     * @param {*} value - The value to transform.\n     * @returns {*} - Returns the options value.\n     */\n    getOptionValue(value) {\n        return lodash_1.default.isObject(value) && this.isEntireObjectDisplay()\n            ? this.normalizeSingleValue(value)\n            : lodash_1.default.isObject(value) && (this.valueProperty || this.component.key !== 'resource')\n                ? value\n                : lodash_1.default.isObject(value) && !this.valueProperty\n                    ? this.interpolate(this.component.template, { item: value }).replace(/<\\/?[^>]+(>|$)/g, '')\n                    : lodash_1.default.isNull(value)\n                        ? this.emptyValue\n                        : String(this.normalizeSingleValue(value));\n    }\n    /**\n     * If component has static values (values, json) or custom values, returns an array of them\n     * @returns {Array<*>|undefined} - Returns an array of the static or custom values.\n     */\n    getOptionsValues() {\n        let rawItems = [];\n        switch (this.component.dataSrc) {\n            case 'values':\n                rawItems = this.component.data.values;\n                break;\n            case 'json':\n                rawItems = this.component.data.json;\n                break;\n            case 'custom':\n                rawItems = this.getCustomItems();\n                break;\n            case 'url':\n                rawItems = this.selectItems;\n                break;\n        }\n        if (typeof rawItems === 'string') {\n            try {\n                rawItems = JSON.parse(rawItems);\n            }\n            catch (err) {\n                console.warn(err.message);\n                rawItems = [];\n            }\n        }\n        if (!Array.isArray(rawItems)) {\n            return;\n        }\n        return rawItems.map((item) => this.getOptionValue(this.itemValue(item)));\n    }\n    /**\n     * Deletes the value of the component.\n     */\n    deleteValue() {\n        this.setValue('', {\n            noUpdateEvent: true\n        });\n        this.unset();\n    }\n    /**\n     * Check if a component is eligible for multiple validation\n     * @returns {boolean} - Returns FALSE for select components.\n     */\n    validateMultiple() {\n        // Select component will contain one input when flagged as multiple.\n        return false;\n    }\n    /**\n     * Output this select dropdown as a string value.\n     * @returns {*}\n     */\n    isBooleanOrNumber(value) {\n        return typeof value === 'number' || typeof value === 'boolean';\n    }\n    getNormalizedValues() {\n        if (!this.component || !this.component.data || !this.component.data.values) {\n            return;\n        }\n        return this.component.data.values.map(value => ({ label: value.label, value: String(this.normalizeSingleValue(value.value)) }));\n    }\n    asString(value, options = {}) {\n        var _a;\n        value = value !== null && value !== void 0 ? value : this.getValue();\n        if (options.modalPreview || this.inDataTable) {\n            if (this.inDataTable) {\n                value = this.undoValueTyping(value);\n            }\n            const templateValue = (this.isEntireObjectDisplay() && !lodash_1.default.isObject(value.data)) ? { data: value } : value;\n            const template = this.itemTemplate(templateValue, value, options);\n            return template;\n        }\n        //need to convert values to strings to be able to compare values with available options that are strings\n        const convertToString = (data, valueProperty) => {\n            if (valueProperty) {\n                if (Array.isArray(data)) {\n                    data.forEach((item) => item[valueProperty] = item[valueProperty].toString());\n                }\n                else if (lodash_1.default.isObject(data)) {\n                    data[valueProperty] = data[valueProperty].toString();\n                }\n                return data;\n            }\n            if (this.isBooleanOrNumber(data)) {\n                data = data.toString();\n            }\n            if (Array.isArray(data) && data.some(item => this.isBooleanOrNumber(item))) {\n                data = data.map(item => this.isBooleanOrNumber(item) ? item.toString() : item);\n            }\n            return data;\n        };\n        value = convertToString(value);\n        if (['values', 'custom'].includes(this.component.dataSrc) && !this.asyncCustomValues()) {\n            const { items, valueProperty, } = this.component.dataSrc === 'values'\n                ? {\n                    items: convertToString(this.getNormalizedValues(), 'value'),\n                    valueProperty: 'value',\n                }\n                : {\n                    items: convertToString(this.getCustomItems(), this.valueProperty),\n                    valueProperty: this.valueProperty,\n                };\n            const getFromValues = () => {\n                const initialValue = lodash_1.default.find(items, [valueProperty, value]);\n                const values = this.defaultSchema.data.values || [];\n                return lodash_1.default.isEqual(initialValue, values[0]) ? '-' : initialValue;\n            };\n            value = (this.component.multiple && Array.isArray(value))\n                ? lodash_1.default.filter(items, (item) => value.includes(item.value))\n                : (valueProperty && items)\n                    ? (_a = getFromValues()) !== null && _a !== void 0 ? _a : { value, label: value }\n                    : value;\n        }\n        if (lodash_1.default.isString(value)) {\n            return value;\n        }\n        const getTemplateValue = (v) => {\n            const itemTemplate = this.itemTemplate(v);\n            return options.csv && itemTemplate\n                ? (0, utils_1.removeHTML)(itemTemplate)\n                : itemTemplate;\n        };\n        if (Array.isArray(value)) {\n            const items = [];\n            value.forEach(item => items.push(getTemplateValue(item)));\n            if (this.component.dataSrc === 'resource' && items.length > 0) {\n                return items.join(', ');\n            }\n            else if (items.length > 0) {\n                return items.join('<br />');\n            }\n            else {\n                return '-';\n            }\n        }\n        if (this.isEntireObjectDisplay() && lodash_1.default.isObject(value)) {\n            return JSON.stringify(value);\n        }\n        return !lodash_1.default.isNil(value)\n            ? getTemplateValue(value)\n            : '-';\n    }\n    detach() {\n        var _a, _b;\n        this.off('blur');\n        if (this.choices) {\n            if ((_b = (_a = this.choices.containerOuter) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.parentNode) {\n                this.choices.destroy();\n            }\n            this.choices = null;\n        }\n        super.detach();\n    }\n    focus() {\n        super.focus.call(this);\n        if (this.focusableElement) {\n            this.focusableElement.focus();\n        }\n    }\n    setErrorClasses(elements, dirty, hasError, hasMessages, element = this.element) {\n        super.setErrorClasses(elements, dirty, hasError, hasMessages, element);\n        if (this.choices) {\n            super.setErrorClasses([this.choices.containerInner.element], dirty, hasError, hasMessages, element);\n        }\n        else {\n            super.setErrorClasses([this.refs.selectContainer], dirty, hasError, hasMessages, element);\n        }\n    }\n}\nexports[\"default\"] = SelectComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/select/Select.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst ListComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/list/ListComponent */ \"./lib/cjs/components/_classes/list/ListComponent.js\"));\nconst Form_1 = __importDefault(__webpack_require__(/*! ../../Form */ \"./lib/cjs/Form.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./lib/cjs/utils/index.js\");\nconst ChoicesWrapper_1 = __importDefault(__webpack_require__(/*! ../../utils/ChoicesWrapper */ \"./lib/cjs/utils/ChoicesWrapper.js\"));\nclass SelectComponent extends ListComponent_1.default {\n    static schema(...extend) {\n        return ListComponent_1.default.schema({\n            type: 'select',\n            label: 'Select',\n            key: 'select',\n            idPath: 'id',\n            data: {\n                values: [{ label: '', value: '' }],\n                json: '',\n                url: '',\n                resource: '',\n                custom: ''\n            },\n            clearOnRefresh: false,\n            limit: 100,\n            valueProperty: '',\n            lazyLoad: true,\n            filter: '',\n            searchEnabled: true,\n            searchDebounce: 0.3,\n            searchField: '',\n            minSearch: 0,\n            readOnlyValue: false,\n            selectFields: '',\n            selectThreshold: 0.3,\n            uniqueOptions: false,\n            tableView: true,\n            fuseOptions: {\n                include: 'score',\n                threshold: 0.3,\n            },\n            indexeddb: {\n                filter: {}\n            },\n            customOptions: {},\n            useExactSearch: false,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Select',\n            group: 'basic',\n            icon: 'th-list',\n            weight: 70,\n            documentation: '/userguide/form-building/form-components#select',\n            schema: SelectComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return SelectComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        const numberType = () => ({ type: 'number' });\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {\n                const valueComp = Object.assign(Object.assign({}, classComp), { type: 'select' });\n                if ((0, utils_1.isSelectResourceWithObjectValue)(classComp)) {\n                    valueComp.reference = false;\n                    valueComp.onSetItems = `\n            var templateKeys = utils.getItemTemplateKeys(component.template) || [];\n            items = _.map(items || [], i => {\n              var item = {};\n              _.each(templateKeys, k =>  _.set(item, k, _.get(i, k)));\n              return item;\n            })\n          `;\n                }\n                return valueComp;\n            }, dataTypeOperators: {\n                number: ['lessThan', 'greaterThan', 'lessThanOrEqual', 'greaterThanOrEqual'],\n            }, dataTypeValueComponents: {\n                number: {\n                    lessThan: numberType,\n                    greaterThan: numberType,\n                    lessThanOrEqual: numberType,\n                    greaterThanOrEqual: numberType,\n                },\n            } });\n    }\n    static savedValueTypes(schema) {\n        const { boolean, string, number, object, array } = utils_1.componentValueTypes;\n        const { dataType, reference } = schema;\n        const types = (0, utils_1.getComponentSavedTypes)(schema);\n        if (types) {\n            return types;\n        }\n        if (reference) {\n            return [object];\n        }\n        if (dataType === 'object') {\n            return [object, array];\n        }\n        if (utils_1.componentValueTypes[dataType]) {\n            return [utils_1.componentValueTypes[dataType]];\n        }\n        return [boolean, string, number, object, array];\n    }\n    init() {\n        super.init();\n        this.templateData = {};\n        // Trigger an update.\n        let updateArgs = [];\n        const triggerUpdate = lodash_1.default.debounce((...args) => {\n            updateArgs = [];\n            return this.updateItems.apply(this, args);\n        }, 100);\n        this.triggerUpdate = (...args) => {\n            // Make sure we always resolve the previous promise before reassign it\n            if (typeof this.itemsLoadedResolve === 'function') {\n                this.itemsLoadedResolve();\n            }\n            this.itemsLoaded = new Promise((resolve) => {\n                this.itemsLoadedResolve = resolve;\n            });\n            if (args.length) {\n                updateArgs = args;\n            }\n            return triggerUpdate(...updateArgs);\n        };\n        // Keep track of the select options.\n        this.selectOptions = [];\n        if (this.itemsFromUrl) {\n            this.isFromSearch = false;\n            this.searchServerCount = null;\n            this.defaultServerCount = null;\n            this.isScrollLoading = false;\n            this.searchDownloadedResources = [];\n            this.defaultDownloadedResources = [];\n        }\n        // If this component has been activated.//\n        this.activated = false;\n        this.itemsLoaded = new Promise((resolve) => {\n            this.itemsLoadedResolve = resolve;\n        });\n        this.shouldPositionDropdown = this.hasDataGridAncestor();\n        if (this.isHtmlRenderMode()) {\n            this.activate();\n        }\n        // Get the template keys for this select component.\n        this.getTemplateKeys();\n    }\n    get defaultSchema() {\n        return SelectComponent.schema();\n    }\n    get emptyValue() {\n        if (this.component.multiple) {\n            return [];\n        }\n        // if select has JSON data source type, we are defining if empty value would be an object or a string by checking JSON's first item\n        if (this.component.dataSrc === 'json' && this.component.data.json) {\n            const firstItem = this.component.data.json[0];\n            let firstValue;\n            if (this.valueProperty) {\n                firstValue = lodash_1.default.get(firstItem, this.valueProperty);\n            }\n            else {\n                firstValue = firstItem;\n            }\n            if (firstValue && typeof firstValue === 'string') {\n                return '';\n            }\n            else {\n                return {};\n            }\n        }\n        if (this.valueProperty) {\n            return '';\n        }\n        return {};\n    }\n    get valueProperty() {\n        if (this.component.valueProperty) {\n            return this.component.valueProperty;\n        }\n        // Force values datasource to use values without actually setting it on the component settings.\n        if (this.component.dataSrc === 'values') {\n            return 'value';\n        }\n        return '';\n    }\n    get inputInfo() {\n        const info = super.elementInfo();\n        info.type = 'select';\n        info.changeEvent = 'change';\n        return info;\n    }\n    get isSelectResource() {\n        return this.component.dataSrc === 'resource';\n    }\n    get itemsFromUrl() {\n        return this.isSelectResource || this.isSelectURL;\n    }\n    get isInfiniteScrollProvided() {\n        return this.itemsFromUrl;\n    }\n    get shouldDisabled() {\n        return super.shouldDisabled || this.parentDisabled;\n    }\n    get shouldInitialLoad() {\n        if (this.component.widget === 'html5' &&\n            this.isEntireObjectDisplay() &&\n            this.component.searchField &&\n            this.dataValue) {\n            return false;\n        }\n        return super.shouldLoad;\n    }\n    get selectMetadata() {\n        return super.selectData;\n    }\n    get selectData() {\n        return this.selectMetadata || this.component.selectData;\n    }\n    isEntireObjectDisplay() {\n        return this.component.dataSrc === 'resource' && this.valueProperty === 'data';\n    }\n    selectValueAndLabel(data) {\n        const value = this.getOptionValue((this.isEntireObjectDisplay() && !this.itemValue(data)) ? data : this.itemValue(data));\n        return {\n            value,\n            label: this.itemTemplate((this.isEntireObjectDisplay() && !lodash_1.default.isObject(data.data)) ? { data: data } : data, value)\n        };\n    }\n    itemTemplate(data, value) {\n        if (!lodash_1.default.isNumber(data) && lodash_1.default.isEmpty(data)) {\n            return '';\n        }\n        // If they wish to show the value in read only mode, then just return the itemValue here.\n        if (this.options.readOnly && this.component.readOnlyValue) {\n            return this.itemValue(data);\n        }\n        // Perform a fast interpretation if we should not use the template.\n        if (data && !this.component.template) {\n            const itemLabel = data.label || data;\n            const value = (typeof itemLabel === 'string') ? this.t(itemLabel, { _userInput: true }) : itemLabel;\n            return this.sanitize(value, this.shouldSanitizeValue);\n        }\n        // Inside DataTable component won't have dataValue set\n        const shouldUseSelectData = (this.component.multiple && lodash_1.default.isArray(this.dataValue)\n            ? this.dataValue.find((val) => this.normalizeSingleValue(value) === val)\n            : (this.dataValue === this.normalizeSingleValue(value))) || this.inDataTable;\n        if (shouldUseSelectData) {\n            const selectData = this.selectData;\n            if (selectData) {\n                const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;\n                if (!this.templateData || !this.templateData[templateValue]) {\n                    this.getOptionTemplate(data, value);\n                }\n                if (this.component.multiple) {\n                    if (selectData[templateValue]) {\n                        data = selectData[templateValue];\n                    }\n                }\n                else {\n                    data = selectData;\n                }\n            }\n        }\n        if (typeof data === 'string' || typeof data === 'number') {\n            return this.sanitize(this.t(data, { _userInput: true }), this.shouldSanitizeValue);\n        }\n        if (Array.isArray(data)) {\n            return data.map((val) => {\n                if (typeof val === 'string' || typeof val === 'number') {\n                    return this.sanitize(this.t(val, { _userInput: true }), this.shouldSanitizeValue);\n                }\n                return val;\n            });\n        }\n        if (data.data) {\n            // checking additional fields in the template for the selected Entire Object option\n            const hasNestedFields = /item\\.data\\.\\w*/g.test(this.component.template);\n            data.data = this.isEntireObjectDisplay() && lodash_1.default.isObject(data.data) && !hasNestedFields\n                ? JSON.stringify(data.data)\n                : data.data;\n        }\n        return super.itemTemplate(data, value);\n    }\n    /**\n     * Adds an option to the select dropdown.\n     * @param {*} value - The value of the new option.\n     * @param {string} label - The label of the new option.\n     * @param {object} [attrs] - Additional value attributes. Defaults to {}.\n     * @param {string} [id] - An id. Defaults to a random string.\n     */\n    addOption(value, label, attrs = {}, id = (0, utils_1.getRandomComponentId)()) {\n        if (lodash_1.default.isNil(label))\n            return;\n        const idPath = this.component.idPath\n            ? this.component.idPath.split('.').reduceRight((obj, key) => ({ [key]: obj }), id)\n            : {};\n        const option = Object.assign({ value: this.getOptionValue(value), label }, idPath);\n        const skipOption = this.component.uniqueOptions\n            ? !!this.selectOptions.find((selectOption) => lodash_1.default.isEqual(selectOption.value, option.value))\n            : false;\n        if (skipOption) {\n            return;\n        }\n        if (value) {\n            this.selectOptions.push(option);\n        }\n        if (this.refs.selectContainer && (this.component.widget === 'html5')) {\n            // Replace an empty Object value to an empty String.\n            if (option.value && lodash_1.default.isObject(option.value) && lodash_1.default.isEmpty(option.value)) {\n                option.value = '';\n            }\n            // Add element to option so we can reference it later.\n            const div = document.createElement('div');\n            div.innerHTML = this.sanitize(this.renderTemplate('selectOption', {\n                selected: lodash_1.default.isEqual(this.getOptionValue(this.dataValue), option.value),\n                option,\n                attrs,\n                id,\n                useId: (this.valueProperty === '' || this.isEntireObjectDisplay()) && lodash_1.default.isObject(value) && id,\n            }), this.shouldSanitizeValue).trim();\n            option.element = div.firstChild;\n            this.refs.selectContainer.appendChild(option.element);\n        }\n    }\n    addValueOptions(items) {\n        items = items || [];\n        let added = false;\n        let data = this.dataValue;\n        // preset submission value with value property before request.\n        if (this.options.pdf && !items.length && this.component.dataSrc === 'url' && this.valueProperty) {\n            data = Array.isArray(data)\n                ? data.map(item => lodash_1.default.set({}, this.valueProperty, item))\n                : lodash_1.default.set({}, this.valueProperty, data);\n        }\n        if (!this.selectOptions.length) {\n            // Add the currently selected choices if they don't already exist.\n            const currentChoices = Array.isArray(data) && this.component.multiple ? data : [data];\n            added = this.addCurrentChoices(currentChoices, items);\n            if (!added && !this.component.multiple) {\n                this.addPlaceholder();\n            }\n        }\n        return added;\n    }\n    disableInfiniteScroll() {\n        if (!this.downloadedResources) {\n            return;\n        }\n        this.downloadedResources.serverCount = this.downloadedResources.length;\n        this.serverCount = this.downloadedResources.length;\n    }\n    shouldResetChoicesItems(items) {\n        if (this.choices._store.choices.length !== items.length) {\n            return true;\n        }\n        for (let item of items) {\n            const choicesItem = this.choices._store.choices.find((i) => i.label === item.label);\n            if (!choicesItem) {\n                return true;\n            }\n        }\n        return false;\n    }\n    /* eslint-disable max-statements */\n    setItems(items, fromSearch) {\n        var _a, _b;\n        this.selectItems = items;\n        // If the items is a string, then parse as JSON.\n        if (typeof items == 'string') {\n            try {\n                items = JSON.parse(items);\n            }\n            catch (err) {\n                console.warn(err.message);\n                items = [];\n            }\n        }\n        // Allow js processing (needed for form builder)\n        if (this.component.onSetItems) {\n            const newItems = typeof this.component.onSetItems === 'function'\n                ? this.component.onSetItems(this, items)\n                : this.evaluate(this.component.onSetItems, { items: items }, 'items');\n            if (newItems) {\n                items = newItems;\n            }\n        }\n        if (!this.choices && this.refs.selectContainer) {\n            this.empty(this.refs.selectContainer);\n        }\n        // If they provided select values, then we need to get them instead.\n        if (this.component.selectValues) {\n            items = lodash_1.default.get(items, this.component.selectValues, items) || [];\n        }\n        let areItemsEqual;\n        if (this.itemsFromUrl) {\n            areItemsEqual = this.isSelectURL ? lodash_1.default.isEqual(items, this.downloadedResources) : false;\n            const areItemsEnded = this.component.limit > items.length;\n            const areItemsDownloaded = areItemsEqual\n                && this.downloadedResources\n                && this.downloadedResources.length === items.length;\n            if (areItemsEnded) {\n                this.disableInfiniteScroll();\n            }\n            else if (areItemsDownloaded) {\n                this.selectOptions = [];\n            }\n            else {\n                this.serverCount = items.serverCount;\n            }\n        }\n        if (this.isScrollLoading && items) {\n            if (!areItemsEqual) {\n                this.downloadedResources = this.downloadedResources\n                    ? this.downloadedResources.concat(items)\n                    : items;\n            }\n            this.downloadedResources.serverCount = items.serverCount || this.downloadedResources.serverCount;\n        }\n        else {\n            this.downloadedResources = items || [];\n            this.selectOptions = [];\n            // If there is new select option with same id as already selected, set the new one\n            if (!lodash_1.default.isEmpty(this.dataValue) && this.component.idPath) {\n                const selectedOptionId = lodash_1.default.get(this.dataValue, this.component.idPath, null);\n                const newOptionWithSameId = !lodash_1.default.isNil(selectedOptionId) && items.find(item => {\n                    const itemId = lodash_1.default.get(item, this.component.idPath);\n                    return itemId === selectedOptionId;\n                });\n                if (newOptionWithSameId) {\n                    this.setValue(newOptionWithSameId);\n                }\n            }\n        }\n        // Add the value options.\n        if (!fromSearch) {\n            this.addValueOptions(items);\n        }\n        if (this.component.widget === 'html5' && !this.component.placeholder) {\n            this.addOption(null, '');\n        }\n        // Iterate through each of the items.\n        lodash_1.default.each(items, (item, index) => {\n            // preventing references of the components inside the form to the parent form when building forms\n            if (this.root && this.root.options.editForm && this.root.options.editForm._id && this.root.options.editForm._id === item._id)\n                return;\n            const itemValueAndLabel = this.selectValueAndLabel(item);\n            this.addOption(itemValueAndLabel.value, itemValueAndLabel.label, {}, lodash_1.default.get(item, this.component.idPath, String(index)));\n        });\n        if (this.choices) {\n            this.choices.setChoices(this.selectOptions, 'value', 'label', true, true, !fromSearch && this.shouldResetChoicesItems(this.selectOptions));\n        }\n        else if (this.loading) {\n            // Re-attach select input.\n            // this.appendTo(this.refs.input[0], this.selectContainer);\n        }\n        // We are no longer loading.\n        this.isScrollLoading = false;\n        this.loading = false;\n        const searching = fromSearch && ((_b = (_a = this.choices) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.isFocussed);\n        if (!searching) {\n            // If a value is provided, then select it.\n            if (!this.isEmpty() || this.isRemoveButtonPressed) {\n                this.setValue(this.dataValue, {\n                    noUpdateEvent: true\n                });\n            }\n            else if (this.shouldAddDefaultValue && !this.options.readOnly) {\n                // If a default value is provided then select it.\n                const defaultValue = this.defaultValue;\n                if (!this.isEmpty(defaultValue)) {\n                    this.setValue(defaultValue);\n                }\n            }\n        }\n        // Say we are done loading the items.\n        this.itemsLoadedResolve();\n    }\n    getSingleItemValueForHTMLMode(data) {\n        var _a;\n        const option = (_a = this.selectOptions) === null || _a === void 0 ? void 0 : _a.find(({ value }) => lodash_1.default.isEqual(value, data));\n        if (option) {\n            return option.label || data;\n        }\n        return data;\n    }\n    itemValueForHTMLMode(value) {\n        if (!this.isHtmlRenderMode()) {\n            return super.itemValueForHTMLMode(value);\n        }\n        if (Array.isArray(value)) {\n            const values = value.map(item => Array.isArray(item)\n                ? this.itemValueForHTMLMode(item)\n                : this.getSingleItemValueForHTMLMode(item));\n            return values.join(', ');\n        }\n        return this.getSingleItemValueForHTMLMode(value);\n    }\n    /* eslint-enable max-statements */\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (!defaultValue && (this.component.defaultValue === false || this.component.defaultValue === 0)) {\n            defaultValue = this.component.defaultValue;\n        }\n        return defaultValue;\n    }\n    get loadingError() {\n        return !this.component.refreshOn && !this.component.refreshOnBlur && this.networkError;\n    }\n    loadItems(url, search, headers, options, method, body) {\n        options = options || {};\n        // See if we should load items or not.\n        if (!this.shouldLoad || (!this.itemsFromUrl && this.options.readOnly)) {\n            this.isScrollLoading = false;\n            this.loading = false;\n            this.itemsLoadedResolve();\n            return;\n        }\n        // See if they have not met the minimum search requirements.\n        const minSearch = parseInt(this.component.minSearch, 10);\n        if (this.component.searchField &&\n            (minSearch > 0) &&\n            (!search || (search.length < minSearch))) {\n            // Set empty items.\n            return this.setItems([]);\n        }\n        // Ensure we have a method and remove any body if method is get\n        method = method || 'GET';\n        if (method.toUpperCase() === 'GET') {\n            body = null;\n        }\n        const limit = this.component.limit || 100;\n        const skip = this.isScrollLoading ? this.selectOptions.length : 0;\n        const query = this.component.disableLimit ? {} : {\n            limit,\n            skip,\n        };\n        // Allow for url interpolation.\n        url = this.sanitize(this.interpolate(url, {\n            formioBase: Formio_1.Formio.getBaseUrl(),\n            search,\n            limit,\n            skip,\n            page: Math.abs(Math.floor(skip / limit))\n        }), this.shouldSanitizeValue);\n        // Add search capability.\n        if (this.component.searchField && search) {\n            const searchValue = Array.isArray(search)\n                ? search.join(',')\n                : typeof search === 'object'\n                    ? JSON.stringify(search)\n                    : search;\n            query[this.component.searchField] = this.component.searchField.endsWith('__regex')\n                ? lodash_1.default.escapeRegExp(searchValue)\n                : searchValue;\n        }\n        // If they wish to return only some fields.\n        if (this.component.selectFields) {\n            query.select = this.component.selectFields;\n        }\n        // Add sort capability\n        if (this.component.sort) {\n            query.sort = this.component.sort;\n        }\n        if (!lodash_1.default.isEmpty(query)) {\n            // Add the query string.\n            url += (!url.includes('?') ? '?' : '&') + Formio_1.Formio.serialize(query, (item) => this.interpolate(item));\n        }\n        // Add filter capability\n        if (this.component.filter) {\n            url += (!url.includes('?') ? '?' : '&') + this.interpolate(this.component.filter);\n        }\n        // Set ignoreCache if it is\n        options.ignoreCache = this.component.ignoreCache;\n        // Make the request.\n        options.header = headers;\n        this.loading = true;\n        Formio_1.Formio.makeRequest(this.options.formio, 'select', url, method, body, options)\n            .then((response) => {\n            this.loading = false;\n            this.setItems(response, !!search);\n        })\n            .catch((err) => {\n            if (this.itemsFromUrl) {\n                this.setItems([]);\n                this.disableInfiniteScroll();\n            }\n            this.isScrollLoading = false;\n            this.handleLoadingError(err);\n        });\n    }\n    handleLoadingError(err) {\n        this.loading = false;\n        if (err.networkError) {\n            this.networkError = true;\n        }\n        this.itemsLoadedResolve();\n        this.emit('componentError', {\n            component: this.component,\n            message: err.toString(),\n        });\n        console.warn(`Unable to load resources for ${this.key}`);\n    }\n    /**\n     * Get the request headers for this select dropdown.\n     * @returns {*} - Returns the request headers for this select dropdown.\n     */\n    get requestHeaders() {\n        // Create the headers object.\n        const headers = new Formio_1.Formio.Headers();\n        // Add custom headers to the url.\n        if (this.component.data && this.component.data.headers) {\n            try {\n                lodash_1.default.each(this.component.data.headers, (header) => {\n                    if (header.key) {\n                        headers.set(header.key, this.interpolate(header.value));\n                    }\n                });\n            }\n            catch (err) {\n                console.warn(err.message);\n            }\n        }\n        return headers;\n    }\n    getCustomItems() {\n        const customItems = this.evaluate(this.component.data.custom, {\n            values: []\n        }, 'values');\n        this.asyncValues = (0, utils_1.isPromise)(customItems);\n        return customItems;\n    }\n    asyncCustomValues() {\n        if (!lodash_1.default.isBoolean(this.asyncValues)) {\n            this.getCustomItems();\n        }\n        return this.asyncValues;\n    }\n    updateCustomItems(forceUpdate) {\n        if (this.asyncCustomValues()) {\n            if (!forceUpdate && !this.active) {\n                this.itemsLoadedResolve();\n                return;\n            }\n            this.loading = true;\n            this.getCustomItems()\n                .then(items => {\n                this.loading = false;\n                this.setItems(items || []);\n            })\n                .catch(err => {\n                this.handleLoadingError(err);\n            });\n        }\n        else {\n            this.setItems(this.getCustomItems() || []);\n        }\n    }\n    isEmpty(value = this.dataValue) {\n        return super.isEmpty(value) || value === undefined;\n    }\n    refresh(value, { instance }) {\n        if (this.component.clearOnRefresh && (instance && !instance.pristine)) {\n            this.setValue(this.emptyValue);\n        }\n        this.updateItems(null, true);\n    }\n    get additionalResourcesAvailable() {\n        return lodash_1.default.isNil(this.serverCount) || (this.serverCount > this.downloadedResources.length);\n    }\n    get serverCount() {\n        if (this.isFromSearch) {\n            return this.searchServerCount;\n        }\n        return this.defaultServerCount;\n    }\n    set serverCount(value) {\n        if (this.isFromSearch) {\n            this.searchServerCount = value;\n        }\n        else {\n            this.defaultServerCount = value;\n        }\n    }\n    get downloadedResources() {\n        if (this.isFromSearch) {\n            return this.searchDownloadedResources;\n        }\n        return this.defaultDownloadedResources;\n    }\n    set downloadedResources(value) {\n        if (this.isFromSearch) {\n            this.searchDownloadedResources = value;\n        }\n        else {\n            this.defaultDownloadedResources = value;\n        }\n    }\n    addPlaceholder() {\n        if (!this.component.placeholder) {\n            return;\n        }\n        this.addOption('', this.component.placeholder, { placeholder: true });\n    }\n    /**\n     * Activate this select control.\n     */\n    activate() {\n        if (this.loading || !this.active) {\n            this.setLoadingItem();\n        }\n        if (this.active) {\n            return;\n        }\n        this.activated = true;\n        this.triggerUpdate();\n    }\n    setLoadingItem(addToCurrentList = false) {\n        if (this.choices) {\n            if (addToCurrentList) {\n                this.choices.setChoices([{\n                        value: `${this.id}-loading`,\n                        label: 'Loading...',\n                        disabled: true,\n                    }], 'value', 'label');\n            }\n            else {\n                this.choices.setChoices([{\n                        value: '',\n                        label: `<i class=\"${this.iconClass('refresh')}\" style=\"font-size:1.3em;\"></i>`,\n                        disabled: true,\n                    }], 'value', 'label', true);\n            }\n        }\n        else if (this.component.dataSrc === 'url' || this.component.dataSrc === 'resource') {\n            this.addOption('', this.t('loading...'));\n        }\n    }\n    get active() {\n        return !this.component.lazyLoad || this.activated;\n    }\n    render() {\n        const info = this.inputInfo;\n        info.attr = info.attr || {};\n        info.multiple = this.component.multiple;\n        return super.render(this.wrapElement(this.renderTemplate('select', {\n            input: info,\n            selectOptions: '',\n            index: null,\n        })));\n    }\n    wrapElement(element) {\n        return this.component.addResource && !this.options.readOnly\n            ? (this.renderTemplate('resourceAdd', {\n                element\n            }))\n            : element;\n    }\n    choicesOptions() {\n        const useSearch = this.component.hasOwnProperty('searchEnabled') ? this.component.searchEnabled : true;\n        const placeholderValue = this.t(this.component.placeholder, { _userInput: true });\n        let customOptions = this.component.customOptions || {};\n        if (typeof customOptions == 'string') {\n            try {\n                customOptions = JSON.parse(customOptions);\n            }\n            catch (err) {\n                console.warn(err.message);\n                customOptions = {};\n            }\n        }\n        const commonFuseOptions = {\n            maxPatternLength: 1000,\n            distance: 1000,\n        };\n        return Object.assign({ removeItemButton: this.component.disabled ? false : lodash_1.default.get(this.component, 'removeItemButton', true), itemSelectText: '', classNames: {\n                containerOuter: ['choices', 'form-group', 'formio-choices'],\n                containerInner: this.transform('class', 'form-control ui fluid selection dropdown').split(' '),\n            }, addItemText: false, allowHTML: true, placeholder: !!this.component.placeholder, placeholderValue: placeholderValue, noResultsText: this.t('No results found'), noChoicesText: this.t('No choices to choose from'), searchPlaceholderValue: this.t('Type to search'), shouldSort: false, position: (this.component.dropdown || 'auto'), searchEnabled: useSearch, searchChoices: !this.component.searchField, searchFields: lodash_1.default.get(this, 'component.searchFields', ['label']), shadowRoot: this.root ? this.root.shadowRoot : null, fuseOptions: this.component.useExactSearch\n                ? Object.assign({ tokenize: true, matchAllTokens: true }, commonFuseOptions) : Object.assign({}, lodash_1.default.get(this, 'component.fuseOptions', {}), Object.assign({ include: 'score', threshold: lodash_1.default.get(this, 'component.selectThreshold', 0.3) }, commonFuseOptions)), valueComparer: lodash_1.default.isEqual, resetScrollPosition: false, duplicateItemsAllowed: false }, customOptions);\n    }\n    /* eslint-disable max-statements */\n    attach(element) {\n        var _a, _b, _c;\n        const superAttach = super.attach(element);\n        this.loadRefs(element, {\n            selectContainer: 'single',\n            addResource: 'single',\n            autocompleteInput: 'single'\n        });\n        //enable autocomplete for select\n        const autocompleteInput = this.refs.autocompleteInput;\n        if (autocompleteInput) {\n            this.addEventListener(autocompleteInput, 'change', (event) => {\n                this.setValue(event.target.value);\n            });\n        }\n        const input = this.refs.selectContainer;\n        if (!input) {\n            return;\n        }\n        this.addEventListener(input, this.inputInfo.changeEvent, () => this.updateValue(null, {\n            modified: true\n        }));\n        this.attachRefreshOnBlur();\n        if (this.component.widget === 'html5') {\n            this.addFocusBlurEvents(input);\n            this.triggerUpdate(null, true);\n            if (this.visible) {\n                this.setItems(this.selectItems || []);\n            }\n            this.focusableElement = input;\n            if (this.component.dataSrc === 'custom') {\n                this.addEventListener(input, 'focus', () => this.updateCustomItems());\n            }\n            this.addEventListener(input, 'keydown', (event) => {\n                const { key } = event;\n                if (['Backspace', 'Delete'].includes(key)) {\n                    this.setValue(this.emptyValue);\n                }\n            });\n            return;\n        }\n        const tabIndex = input.tabIndex;\n        this.addPlaceholder();\n        if (this.i18next) {\n            input.setAttribute('dir', this.i18next.dir());\n        }\n        if ((_c = (_b = (_a = this.choices) === null || _a === void 0 ? void 0 : _a.containerOuter) === null || _b === void 0 ? void 0 : _b.element) === null || _c === void 0 ? void 0 : _c.parentNode) {\n            this.choices.destroy();\n        }\n        const choicesOptions = this.choicesOptions();\n        if (ChoicesWrapper_1.default) {\n            this.choices = new ChoicesWrapper_1.default(input, choicesOptions);\n            if (this.selectOptions && this.selectOptions.length) {\n                this.choices.setChoices(this.selectOptions, 'value', 'label', true);\n            }\n            if (this.component.multiple) {\n                this.focusableElement = this.choices.input.element;\n            }\n            else {\n                this.focusableElement = this.choices.containerInner.element;\n                this.choices.containerOuter.element.setAttribute('tabIndex', '-1');\n                this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());\n            }\n            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 = this.emptyValue;\n        }\n        return value;\n    }\n    redraw() {\n        const done = super.redraw();\n        this.triggerUpdate();\n        return done;\n    }\n    normalizeSingleValue(value) {\n        if (lodash_1.default.isNil(value)) {\n            return;\n        }\n        const valueIsObject = lodash_1.default.isObject(value);\n        //check if value equals to default emptyValue\n        if (valueIsObject && Object.keys(value).length === 0) {\n            return value;\n        }\n        const dataType = this.component.dataType || 'auto';\n        const normalize = {\n            value,\n            number() {\n                const numberValue = Number(this.value);\n                const isEquivalent = value.toString() === numberValue.toString();\n                if (!Number.isNaN(numberValue) && Number.isFinite(numberValue) && value !== '' && isEquivalent) {\n                    this.value = numberValue;\n                }\n                return this;\n            },\n            boolean() {\n                if (lodash_1.default.isString(this.value)\n                    && (this.value.toLowerCase() === 'true'\n                        || this.value.toLowerCase() === 'false')) {\n                    this.value = (this.value.toLowerCase() === 'true');\n                }\n                return this;\n            },\n            string() {\n                this.value = String(this.value);\n                return this;\n            },\n            object() {\n                return this;\n            },\n            auto() {\n                if (lodash_1.default.isObject(this.value)) {\n                    this.value = this.object().value;\n                }\n                else {\n                    this.value = this.string().number().boolean().value;\n                }\n                return this;\n            }\n        };\n        try {\n            return normalize[dataType]().value;\n        }\n        catch (err) {\n            console.warn('Failed to normalize value', err);\n            return value;\n        }\n    }\n    /**\n     * Normalize values coming into updateValue. For example, depending on the configuration, string value `\"true\"` will be normalized to boolean `true`.\n     * @param {*} value - The value to normalize\n     * @returns {*} - Returns the normalized value\n     */\n    normalizeValue(value) {\n        if (this.component.multiple && Array.isArray(value)) {\n            return value.map((singleValue) => this.normalizeSingleValue(singleValue));\n        }\n        return super.normalizeValue(this.normalizeSingleValue(value));\n    }\n    setMetadata(value, flags = {}) {\n        var _a, _b;\n        if (lodash_1.default.isNil(value)) {\n            return;\n        }\n        const valueIsObject = lodash_1.default.isObject(value);\n        //check if value equals to default emptyValue\n        if (valueIsObject && Object.keys(value).length === 0) {\n            return value;\n        }\n        // Check to see if we need to save off the template data into our metadata.\n        const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;\n        const shouldSaveData = (!valueIsObject || this.component.reference) && !this.inDataTable;\n        if (!lodash_1.default.isNil(templateValue) && shouldSaveData && this.templateData && this.templateData[templateValue] && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submission)) {\n            const submission = this.root.submission;\n            if (!submission.metadata) {\n                submission.metadata = {};\n            }\n            if (!submission.metadata.selectData) {\n                submission.metadata.selectData = {};\n            }\n            let templateData = this.templateData[templateValue];\n            if (this.component.multiple) {\n                templateData = {};\n                const dataValue = this.dataValue;\n                if (dataValue && lodash_1.default.isArray(dataValue) && dataValue.length) {\n                    dataValue.forEach((dataValueItem) => {\n                        const dataValueItemValue = this.component.reference ? dataValueItem._id.toString() : dataValueItem;\n                        templateData[dataValueItemValue] = this.templateData[dataValueItemValue];\n                    });\n                }\n                templateData[value] = this.templateData[value];\n            }\n            lodash_1.default.set(submission.metadata.selectData, this.path, templateData);\n        }\n        if (flags.resetValue && ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submission) && !this.options.readOnly) {\n            const submission = this.root.submission;\n            if (!submission.metadata) {\n                submission.metadata = {};\n            }\n            submission.metadata.selectData = {};\n        }\n    }\n    updateValue(value, flags) {\n        const changed = super.updateValue(value, flags);\n        if (changed || !this.selectMetadata || flags.resetValue) {\n            if (this.component.multiple && Array.isArray(this.dataValue)) {\n                this.dataValue.forEach(singleValue => this.setMetadata(singleValue, flags));\n            }\n            else {\n                this.setMetadata(this.dataValue, flags);\n            }\n        }\n        return changed;\n    }\n    undoValueTyping(value) {\n        let untypedValue = value;\n        if (this.component.multiple && Array.isArray(value)) {\n            untypedValue = value.map(v => {\n                if (typeof v === 'boolean' || typeof v === 'number') {\n                    return v.toString();\n                }\n                return v;\n            });\n        }\n        else {\n            if (typeof value === 'boolean' || typeof value === 'number') {\n                untypedValue = value.toString();\n            }\n        }\n        return untypedValue;\n    }\n    setValue(value, flags = {}) {\n        const previousValue = this.dataValue;\n        const changed = this.updateValue(value, flags);\n        if (this.component.widget === 'html5' && (lodash_1.default.isEqual(value, previousValue) || lodash_1.default.isEqual(previousValue, {}) && lodash_1.default.isEqual(flags, {})) && !flags.fromSubmission) {\n            return false;\n        }\n        value = this.dataValue;\n        const hasPreviousValue = !this.isEmpty(previousValue);\n        const hasValue = !this.isEmpty(value);\n        // Undo typing when searching to set the value.\n        value = this.undoValueTyping(value);\n        if (this.isHtmlRenderMode() && flags && flags.fromSubmission && changed) {\n            this.itemsLoaded.then(() => {\n                this.redraw();\n            });\n            return changed;\n        }\n        // Do not set the value if we are loading... that will happen after it is done.\n        if (this.loading) {\n            return changed;\n        }\n        // Determine if we need to perform an initial lazyLoad api call if searchField is provided.\n        if (this.isInitApiCallNeeded(hasValue)) {\n            this.loading = true;\n            this.lazyLoadInit = true;\n            const searchProperty = this.component.searchField || this.component.valueProperty;\n            this.triggerUpdate(lodash_1.default.get(value.data || value, searchProperty, value), true);\n            return changed;\n        }\n        // Add the value options.\n        this.itemsLoaded.then(() => {\n            this.addValueOptions();\n            this.setChoicesValue(value, hasPreviousValue, flags);\n        });\n        return changed;\n    }\n    isInitApiCallNeeded(hasValue) {\n        return this.component.lazyLoad &&\n            !this.lazyLoadInit &&\n            !this.active &&\n            !this.selectOptions.length &&\n            hasValue &&\n            this.shouldInitialLoad &&\n            this.visible && (this.component.searchField || this.component.valueProperty);\n    }\n    setChoicesValue(value, hasPreviousValue, flags = {}) {\n        const hasValue = !this.isEmpty(value) || flags.fromSubmission;\n        hasPreviousValue = (hasPreviousValue === undefined) ? true : hasPreviousValue;\n        if (this.choices) {\n            // Now set the value.\n            if (hasValue) {\n                this.choices.removeActiveItems();\n                // Add the currently selected choices if they don't already exist.\n                const currentChoices = Array.isArray(value) && this.component.multiple ? value : [value];\n                if (!this.addCurrentChoices(currentChoices, this.selectOptions, true)) {\n                    this.choices.setChoices(this.selectOptions, 'value', 'label', true);\n                }\n                this.choices.setChoiceByValue(currentChoices);\n            }\n            else if (hasPreviousValue || flags.resetValue) {\n                this.choices.removeActiveItems();\n            }\n        }\n        else {\n            if (hasValue) {\n                const values = Array.isArray(value) ? value : [value];\n                if (!lodash_1.default.isEqual(this.dataValue, this.defaultValue) && this.selectOptions.length < 2\n                    || (this.selectData && flags.fromSubmission)) {\n                    const { value, label } = this.selectValueAndLabel(this.dataValue);\n                    this.addOption(value, label);\n                }\n                lodash_1.default.each(this.selectOptions, (selectOption) => {\n                    lodash_1.default.each(values, (val) => {\n                        if (selectOption.value === '') {\n                            selectOption.value = {};\n                        }\n                        if (lodash_1.default.isEqual(val, selectOption.value) && selectOption.element) {\n                            selectOption.element.selected = true;\n                            selectOption.element.setAttribute('selected', 'selected');\n                            return false;\n                        }\n                    });\n                });\n            }\n            else {\n                lodash_1.default.each(this.selectOptions, (selectOption) => {\n                    if (selectOption.element) {\n                        selectOption.element.selected = false;\n                        selectOption.element.removeAttribute('selected');\n                    }\n                });\n            }\n        }\n    }\n    validateValueAvailability(setting, value) {\n        if (!(0, utils_1.boolValue)(setting) || !value) {\n            return true;\n        }\n        const values = this.getOptionsValues();\n        if (values) {\n            if (lodash_1.default.isObject(value)) {\n                const compareComplexValues = (optionValue) => {\n                    const normalizedOptionValue = this.normalizeSingleValue(optionValue);\n                    if (!lodash_1.default.isObject(normalizedOptionValue)) {\n                        return false;\n                    }\n                    try {\n                        return (JSON.stringify(normalizedOptionValue) === JSON.stringify(value));\n                    }\n                    catch (err) {\n                        console.warn.error('Error while comparing items', err);\n                        return false;\n                    }\n                };\n                return values.findIndex((optionValue) => compareComplexValues(optionValue)) !== -1;\n            }\n            return values.findIndex((optionValue) => this.normalizeSingleValue(optionValue) === value) !== -1;\n        }\n        return false;\n    }\n    /**\n     * Performs required transformations on the initial value to use in selectOptions\n     * @param {*} value - The value to transform.\n     * @returns {*} - Returns the options value.\n     */\n    getOptionValue(value) {\n        return lodash_1.default.isObject(value) && this.isEntireObjectDisplay()\n            ? this.normalizeSingleValue(value)\n            : lodash_1.default.isObject(value) && (this.valueProperty || this.component.key !== 'resource')\n                ? value\n                : lodash_1.default.isObject(value) && !this.valueProperty\n                    ? this.interpolate(this.component.template, { item: value }).replace(/<\\/?[^>]+(>|$)/g, '')\n                    : lodash_1.default.isNull(value)\n                        ? this.emptyValue\n                        : String(this.normalizeSingleValue(value));\n    }\n    /**\n     * If component has static values (values, json) or custom values, returns an array of them\n     * @returns {Array<*>|undefined} - Returns an array of the static or custom values.\n     */\n    getOptionsValues() {\n        let rawItems = [];\n        switch (this.component.dataSrc) {\n            case 'values':\n                rawItems = this.component.data.values;\n                break;\n            case 'json':\n                rawItems = this.component.data.json;\n                break;\n            case 'custom':\n                rawItems = this.getCustomItems();\n                break;\n            case 'url':\n                rawItems = this.selectItems;\n                break;\n        }\n        if (typeof rawItems === 'string') {\n            try {\n                rawItems = JSON.parse(rawItems);\n            }\n            catch (err) {\n                console.warn(err.message);\n                rawItems = [];\n            }\n        }\n        if (!Array.isArray(rawItems)) {\n            return;\n        }\n        return rawItems.map((item) => this.getOptionValue(this.itemValue(item)));\n    }\n    /**\n     * Deletes the value of the component.\n     */\n    deleteValue() {\n        this.setValue('', {\n            noUpdateEvent: true\n        });\n        this.unset();\n    }\n    /**\n     * Check if a component is eligible for multiple validation\n     * @returns {boolean} - Returns FALSE for select components.\n     */\n    validateMultiple() {\n        // Select component will contain one input when flagged as multiple.\n        return false;\n    }\n    /**\n     * Output this select dropdown as a string value.\n     * @returns {*}\n     */\n    isBooleanOrNumber(value) {\n        return typeof value === 'number' || typeof value === 'boolean';\n    }\n    getNormalizedValues() {\n        if (!this.component || !this.component.data || !this.component.data.values) {\n            return;\n        }\n        return this.component.data.values.map(value => ({ label: value.label, value: String(this.normalizeSingleValue(value.value)) }));\n    }\n    asString(value, options = {}) {\n        var _a;\n        value = value !== null && value !== void 0 ? value : this.getValue();\n        if (options.modalPreview || this.inDataTable) {\n            if (this.inDataTable) {\n                value = this.undoValueTyping(value);\n            }\n            const templateValue = (this.isEntireObjectDisplay() && !lodash_1.default.isObject(value.data)) ? { data: value } : value;\n            const template = this.itemTemplate(templateValue, value, options);\n            return template;\n        }\n        //need to convert values to strings to be able to compare values with available options that are strings\n        const convertToString = (data, valueProperty) => {\n            if (valueProperty) {\n                if (Array.isArray(data)) {\n                    data.forEach((item) => item[valueProperty] = item[valueProperty].toString());\n                }\n                else if (lodash_1.default.isObject(data)) {\n                    data[valueProperty] = data[valueProperty].toString();\n                }\n                return data;\n            }\n            if (this.isBooleanOrNumber(data)) {\n                data = data.toString();\n            }\n            if (Array.isArray(data) && data.some(item => this.isBooleanOrNumber(item))) {\n                data = data.map(item => this.isBooleanOrNumber(item) ? item.toString() : item);\n            }\n            return data;\n        };\n        value = convertToString(value);\n        if (['values', 'custom'].includes(this.component.dataSrc) && !this.asyncCustomValues()) {\n            const { items, valueProperty, } = this.component.dataSrc === 'values'\n                ? {\n                    items: convertToString(this.getNormalizedValues(), 'value'),\n                    valueProperty: 'value',\n                }\n                : {\n                    items: convertToString(this.getCustomItems(), this.valueProperty),\n                    valueProperty: this.valueProperty,\n                };\n            const getFromValues = () => {\n                const initialValue = lodash_1.default.find(items, [valueProperty, value]);\n                const values = this.defaultSchema.data.values || [];\n                return lodash_1.default.isEqual(initialValue, values[0]) ? '-' : initialValue;\n            };\n            value = (this.component.multiple && Array.isArray(value))\n                ? lodash_1.default.filter(items, (item) => value.includes(item.value))\n                : (valueProperty && items)\n                    ? (_a = getFromValues()) !== null && _a !== void 0 ? _a : { value, label: value }\n                    : value;\n        }\n        if (lodash_1.default.isString(value)) {\n            return value;\n        }\n        const getTemplateValue = (v) => {\n            const itemTemplate = this.itemTemplate(v);\n            return options.csv && itemTemplate\n                ? (0, utils_1.removeHTML)(itemTemplate)\n                : itemTemplate;\n        };\n        if (Array.isArray(value)) {\n            const items = [];\n            value.forEach(item => items.push(getTemplateValue(item)));\n            if (this.component.dataSrc === 'resource' && items.length > 0) {\n                return items.join(', ');\n            }\n            else if (items.length > 0) {\n                return items.join('<br />');\n            }\n            else {\n                return '-';\n            }\n        }\n        if (this.isEntireObjectDisplay() && lodash_1.default.isObject(value)) {\n            return JSON.stringify(value);\n        }\n        return !lodash_1.default.isNil(value)\n            ? getTemplateValue(value)\n            : '-';\n    }\n    detach() {\n        var _a, _b;\n        this.off('blur');\n        if (this.choices) {\n            if ((_b = (_a = this.choices.containerOuter) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.parentNode) {\n                this.choices.destroy();\n            }\n            this.choices = null;\n        }\n        super.detach();\n    }\n    focus() {\n        super.focus.call(this);\n        if (this.focusableElement) {\n            this.focusableElement.focus();\n        }\n    }\n    setErrorClasses(elements, dirty, hasError, hasMessages, element = this.element) {\n        super.setErrorClasses(elements, dirty, hasError, hasMessages, element);\n        if (this.choices) {\n            super.setErrorClasses([this.choices.containerInner.element], dirty, hasError, hasMessages, element);\n        }\n        else {\n            super.setErrorClasses([this.refs.selectContainer], dirty, hasError, hasMessages, element);\n        }\n    }\n}\nexports[\"default\"] = SelectComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/select/Select.js?");
 
 /***/ }),
 
@@ -7239,7 +7239,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./lib/cjs/utils/index.js\");\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst choices_js_1 = __importDefault(__webpack_require__(/*! 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?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./lib/cjs/utils/index.js\");\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst choices_js_1 = __importDefault(__webpack_require__(/*! choices.js */ \"./node_modules/choices.js/public/assets/scripts/choices.js\"));\nclass TagsComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            type: 'tags',\n            label: 'Tags',\n            key: 'tags',\n            delimeter: ',',\n            storeas: 'string',\n            maxTags: 0\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Tags',\n            icon: 'tags',\n            group: 'advanced',\n            documentation: '/userguide/form-building/advanced-components#tags',\n            weight: 30,\n            schema: TagsComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return TagsComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: [...super.conditionOperatorsSettings.operators, 'includes', 'notIncludes'] });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes[schema.storeas] || utils_1.componentValueTypes.string];\n    }\n    init() {\n        super.init();\n    }\n    get emptyValue() {\n        return (this.component.storeas === 'string') ? '' : [];\n    }\n    get defaultSchema() {\n        return TagsComponent.schema();\n    }\n    get inputInfo() {\n        const info = super.inputInfo;\n        info.type = 'input';\n        info.attr.type = 'text';\n        info.changeEvent = 'change';\n        return info;\n    }\n    get delimiter() {\n        return this.component.delimeter || ',';\n    }\n    attachElement(element, index) {\n        super.attachElement(element, index);\n        if (!element) {\n            return;\n        }\n        if (this.i18next) {\n            element.setAttribute('dir', this.i18next.dir());\n        }\n        if (this.choices) {\n            this.choices.destroy();\n        }\n        if (!choices_js_1.default) {\n            return;\n        }\n        const hasPlaceholder = !!this.component.placeholder;\n        this.choices = new choices_js_1.default(element, {\n            delimiter: this.delimiter,\n            editItems: true,\n            allowHTML: true,\n            maxItemCount: this.component.maxTags,\n            removeItemButton: true,\n            duplicateItemsAllowed: false,\n            shadowRoot: this.root ? this.root.shadowRoot : null,\n            placeholder: hasPlaceholder,\n            placeholderValue: hasPlaceholder ? this.t(this.component.placeholder, { _userInput: true }) : null,\n        });\n        this.choices.itemList.element.tabIndex = element.tabIndex;\n        this.addEventListener(this.choices.input.element, 'blur', () => {\n            // Emit event to the native Formio input, so the listener attached in the Input.js will be invoked\n            element.dispatchEvent(new Event('blur'));\n            const value = this.choices.input.value;\n            const maxTagsNumber = this.component.maxTags;\n            const valuesCount = this.choices.getValue(true).length;\n            const isRepeatedValue = this.choices.getValue(true).some(existingValue => existingValue.trim() === value.trim());\n            if (value) {\n                if (maxTagsNumber && valuesCount === maxTagsNumber) {\n                    this.choices.addItems = false;\n                    this.choices.clearInput();\n                }\n                else if (isRepeatedValue) {\n                    this.choices.clearInput();\n                }\n                else {\n                    this.choices.setValue([value]);\n                    this.choices.clearInput();\n                    this.choices.hideDropdown(true);\n                    this.updateValue(null, {\n                        modified: true\n                    });\n                }\n            }\n        });\n    }\n    detach() {\n        if (this.choices) {\n            this.choices.destroy();\n            this.choices = null;\n        }\n        super.detach();\n    }\n    normalizeValue(value) {\n        if (this.component.storeas === 'string' && Array.isArray(value)) {\n            return super.normalizeValue(value.join(this.delimiter));\n        }\n        else if (this.component.storeas === 'array' && typeof value === 'string') {\n            return super.normalizeValue(value.split(this.delimiter).filter(result => result));\n        }\n        return super.normalizeValue(value);\n    }\n    setValue(value, flags = {}) {\n        const changed = super.setValue(value, flags);\n        if (this.choices) {\n            let dataValue = this.dataValue;\n            this.choices.clearStore();\n            if (dataValue) {\n                if (typeof dataValue === 'string') {\n                    dataValue = dataValue.split(this.delimiter).filter(result => result);\n                }\n                const value = Array.isArray(dataValue) ? dataValue : [dataValue];\n                this.choices.setValue(value.map((val) => this.sanitize(val, this.shouldSanitizeValue)));\n            }\n        }\n        return changed;\n    }\n    set disabled(disabled) {\n        super.disabled = disabled;\n        if (!this.choices) {\n            return;\n        }\n        if (disabled) {\n            this.choices.disable();\n        }\n        else {\n            this.choices.enable();\n        }\n    }\n    get disabled() {\n        return super.disabled;\n    }\n    focus() {\n        if (this.refs.input && this.refs.input.length) {\n            this.refs.input[0].parentNode.lastChild.focus();\n        }\n    }\n    getValue() {\n        if (this.choices) {\n            const value = this.choices.getValue(true);\n            return value.join(`${this.delimiter}`);\n        }\n        return super.getValue();\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?");
 
 /***/ }),
 
@@ -7547,7 +7547,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Webform = exports.EventEmitter = exports.Licenses = exports.Formio = exports.Form = exports.Utils = exports.Templates = exports.Widgets = exports.Providers = exports.Displays = exports.Components = exports.FormioCore = exports.useModule = exports.registerModule = void 0;\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nObject.defineProperty(exports, \"Formio\", ({ enumerable: true, get: function () { return Formio_1.Formio; } }));\nconst components_1 = __importDefault(__webpack_require__(/*! ./components */ \"./lib/cjs/components/index.js\"));\nconst Components_1 = __importDefault(__webpack_require__(/*! ./components/Components */ \"./lib/cjs/components/Components.js\"));\nexports.Components = Components_1.default;\nconst Displays_1 = __importDefault(__webpack_require__(/*! ./displays/Displays */ \"./lib/cjs/displays/Displays.js\"));\nexports.Displays = Displays_1.default;\nconst Templates_1 = __importDefault(__webpack_require__(/*! ./templates/Templates */ \"./lib/cjs/templates/Templates.js\"));\nexports.Templates = Templates_1.default;\nconst providers_1 = __importDefault(__webpack_require__(/*! ./providers */ \"./lib/cjs/providers/index.js\"));\nexports.Providers = providers_1.default;\nconst widgets_1 = __importDefault(__webpack_require__(/*! ./widgets */ \"./lib/cjs/widgets/index.js\"));\nexports.Widgets = widgets_1.default;\nconst Form_1 = __importDefault(__webpack_require__(/*! ./Form */ \"./lib/cjs/Form.js\"));\nexports.Form = Form_1.default;\nconst utils_1 = __importDefault(__webpack_require__(/*! ./utils */ \"./lib/cjs/utils/index.js\"));\nexports.Utils = utils_1.default;\nconst licenses_1 = __importDefault(__webpack_require__(/*! ./licenses */ \"./lib/cjs/licenses/index.js\"));\nexports.Licenses = licenses_1.default;\nconst EventEmitter_1 = __importDefault(__webpack_require__(/*! ./EventEmitter */ \"./lib/cjs/EventEmitter.js\"));\nexports.EventEmitter = EventEmitter_1.default;\nconst Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.js\"));\nexports.Webform = Webform_1.default;\nconst utils_2 = __webpack_require__(/*! ./utils */ \"./lib/cjs/utils/index.js\");\nFormio_1.Formio.loadModules = (path = `${Formio_1.Formio.getApiUrl()}/externalModules.js`, name = 'externalModules') => {\n    Formio_1.Formio.requireLibrary(name, name, path, true)\n        .then((modules) => {\n        Formio_1.Formio.use(modules);\n    });\n};\n// This is needed to maintain correct imports using the \"dist\" file.\nFormio_1.Formio.isRenderer = true;\nFormio_1.Formio.Components = Components_1.default;\nFormio_1.Formio.Templates = Templates_1.default;\nFormio_1.Formio.Utils = utils_1.default;\nFormio_1.Formio.Form = Form_1.default;\nFormio_1.Formio.Displays = Displays_1.default;\nFormio_1.Formio.Providers = providers_1.default;\nFormio_1.Formio.Widgets = widgets_1.default;\nFormio_1.Formio.Evaluator = utils_2.Evaluator;\nFormio_1.Formio.AllComponents = components_1.default;\nFormio_1.Formio.Licenses = licenses_1.default;\n// This is strange, but is needed for \"premium\" components to import correctly.\nFormio_1.Formio.Formio = Formio_1.Formio;\nFormio_1.Formio.Components.setComponents(components_1.default);\n/**\n * Register a module\n * @param {any} mod - The module object to register. This can also be a function which accepts Formio as an argument.\n * @param {Function|null} [defaultFn] - The default function to call if the module does not have a known key.\n * @param {any} options - Options for the module.\n * @returns {void}\n */\nfunction registerModule(mod, defaultFn = null, options = {}) {\n    if (typeof mod === 'function') {\n        return registerModule(mod(Formio_1.Formio), defaultFn, options);\n    }\n    if (typeof mod !== 'object') {\n        return;\n    }\n    for (const key of Object.keys(mod)) {\n        const current = mod.framework || Formio_1.Formio.Templates.framework || 'bootstrap';\n        switch (key) {\n            case 'options':\n                Formio_1.Formio.options = lodash_1.default.merge(Formio_1.Formio.options, mod.options);\n                break;\n            case 'templates':\n                for (const framework of Object.keys(mod.templates)) {\n                    Formio_1.Formio.Templates.extendTemplate(framework, mod.templates[framework]);\n                    Formio_1.Formio.Templates.defaultTemplates = lodash_1.default.defaults(mod.templates[framework], Formio_1.Formio.Templates.defaultTemplates);\n                }\n                if (mod.templates[current]) {\n                    Formio_1.Formio.Templates.current = mod.templates[current];\n                }\n                break;\n            case 'components':\n                Formio_1.Formio.Components.setComponents(mod.components);\n                break;\n            case 'framework':\n                Formio_1.Formio.Templates.framework = mod.framework;\n                break;\n            case 'fetch':\n                for (const name of Object.keys(mod.fetch)) {\n                    Formio_1.Formio.registerPlugin(mod.fetch[name], name);\n                }\n                break;\n            case 'providers':\n                for (const type of Object.keys(mod.providers)) {\n                    Formio_1.Formio.Providers.addProviders(type, mod.providers[type]);\n                }\n                break;\n            case 'displays':\n                Formio_1.Formio.Displays.addDisplays(mod.displays);\n                break;\n            case 'evaluator':\n                (0, utils_2.registerEvaluator)(mod.evaluator);\n                break;\n            case 'library':\n                options.license\n                    ? Formio_1.Formio.Licenses.addLicense(mod.library, options.license)\n                    : Formio_1.Formio.Licenses.removeLicense(mod.library);\n                break;\n            default:\n                if (defaultFn) {\n                    if (!defaultFn(key, mod)) {\n                        console.warn('Unknown module option', key);\n                    }\n                    break;\n                }\n                console.log('Unknown module option', key);\n        }\n    }\n}\nexports.registerModule = registerModule;\n/**\n * @param {Function|null} defaultFn - The default function to call if the module does not have a known key.\n * @returns {void}\n */\nfunction useModule(defaultFn = null) {\n    return (plugins, options = {}) => {\n        plugins = lodash_1.default.isArray(plugins) ? plugins : [plugins];\n        plugins.forEach((plugin) => {\n            if (Array.isArray(plugin)) {\n                plugin.forEach(p => registerModule(p, defaultFn, options));\n            }\n            else {\n                registerModule(plugin, defaultFn, options);\n            }\n        });\n    };\n}\nexports.useModule = useModule;\n/**\n * Allows passing in plugins as an array of plugins or a single plugin.\n *\n * Formio.plugins(plugin1, options);\n * Formio.plugins([plugin1, plugin2, etc], options);\n */\nFormio_1.Formio.use = useModule();\nvar Formio_2 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nObject.defineProperty(exports, \"FormioCore\", ({ enumerable: true, get: function () { return Formio_2.Formio; } }));\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/formio.form.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.DefaultEvaluator = exports.Webform = exports.EventEmitter = exports.Licenses = exports.Formio = exports.Form = exports.Utils = exports.Templates = exports.Widgets = exports.Providers = exports.Displays = exports.Components = exports.FormioCore = exports.useModule = exports.registerModule = void 0;\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nObject.defineProperty(exports, \"Formio\", ({ enumerable: true, get: function () { return Formio_1.Formio; } }));\nconst components_1 = __importDefault(__webpack_require__(/*! ./components */ \"./lib/cjs/components/index.js\"));\nconst Components_1 = __importDefault(__webpack_require__(/*! ./components/Components */ \"./lib/cjs/components/Components.js\"));\nexports.Components = Components_1.default;\nconst Displays_1 = __importDefault(__webpack_require__(/*! ./displays/Displays */ \"./lib/cjs/displays/Displays.js\"));\nexports.Displays = Displays_1.default;\nconst Templates_1 = __importDefault(__webpack_require__(/*! ./templates/Templates */ \"./lib/cjs/templates/Templates.js\"));\nexports.Templates = Templates_1.default;\nconst providers_1 = __importDefault(__webpack_require__(/*! ./providers */ \"./lib/cjs/providers/index.js\"));\nexports.Providers = providers_1.default;\nconst widgets_1 = __importDefault(__webpack_require__(/*! ./widgets */ \"./lib/cjs/widgets/index.js\"));\nexports.Widgets = widgets_1.default;\nconst Form_1 = __importDefault(__webpack_require__(/*! ./Form */ \"./lib/cjs/Form.js\"));\nexports.Form = Form_1.default;\nconst utils_1 = __importDefault(__webpack_require__(/*! ./utils */ \"./lib/cjs/utils/index.js\"));\nexports.Utils = utils_1.default;\nconst licenses_1 = __importDefault(__webpack_require__(/*! ./licenses */ \"./lib/cjs/licenses/index.js\"));\nexports.Licenses = licenses_1.default;\nconst EventEmitter_1 = __importDefault(__webpack_require__(/*! ./EventEmitter */ \"./lib/cjs/EventEmitter.js\"));\nexports.EventEmitter = EventEmitter_1.default;\nconst Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.js\"));\nexports.Webform = Webform_1.default;\nconst utils_2 = __webpack_require__(/*! ./utils */ \"./lib/cjs/utils/index.js\");\nObject.defineProperty(exports, \"DefaultEvaluator\", ({ enumerable: true, get: function () { return utils_2.DefaultEvaluator; } }));\nFormio_1.Formio.loadModules = (path = `${Formio_1.Formio.getApiUrl()}/externalModules.js`, name = 'externalModules') => {\n    Formio_1.Formio.requireLibrary(name, name, path, true)\n        .then((modules) => {\n        Formio_1.Formio.use(modules);\n    });\n};\n// This is needed to maintain correct imports using the \"dist\" file.\nFormio_1.Formio.isRenderer = true;\nFormio_1.Formio.Components = Components_1.default;\nFormio_1.Formio.Templates = Templates_1.default;\nFormio_1.Formio.Utils = utils_1.default;\nFormio_1.Formio.Form = Form_1.default;\nFormio_1.Formio.Displays = Displays_1.default;\nFormio_1.Formio.Providers = providers_1.default;\nFormio_1.Formio.Widgets = widgets_1.default;\nFormio_1.Formio.Evaluator = utils_2.Evaluator;\nFormio_1.Formio.AllComponents = components_1.default;\nFormio_1.Formio.Licenses = licenses_1.default;\nFormio_1.Formio.DefaultEvaluator = utils_2.DefaultEvaluator;\n// This is strange, but is needed for \"premium\" components to import correctly.\nFormio_1.Formio.Formio = Formio_1.Formio;\nFormio_1.Formio.Components.setComponents(components_1.default);\n/**\n * Register a module\n * @param {any} mod - The module object to register. This can also be a function which accepts Formio as an argument.\n * @param {Function|null} [defaultFn] - The default function to call if the module does not have a known key.\n * @param {any} options - Options for the module.\n * @returns {void}\n */\nfunction registerModule(mod, defaultFn = null, options = {}) {\n    if (typeof mod === 'function') {\n        return registerModule(mod(Formio_1.Formio), defaultFn, options);\n    }\n    if (typeof mod !== 'object') {\n        return;\n    }\n    for (const key of Object.keys(mod)) {\n        const current = mod.framework || Formio_1.Formio.Templates.framework || 'bootstrap';\n        switch (key) {\n            case 'options':\n                Formio_1.Formio.options = lodash_1.default.merge(Formio_1.Formio.options, mod.options);\n                break;\n            case 'templates':\n                for (const framework of Object.keys(mod.templates)) {\n                    Formio_1.Formio.Templates.extendTemplate(framework, mod.templates[framework]);\n                    Formio_1.Formio.Templates.defaultTemplates = lodash_1.default.defaults(mod.templates[framework], Formio_1.Formio.Templates.defaultTemplates);\n                }\n                if (mod.templates[current]) {\n                    Formio_1.Formio.Templates.current = mod.templates[current];\n                }\n                break;\n            case 'components':\n                Formio_1.Formio.Components.setComponents(mod.components);\n                break;\n            case 'framework':\n                Formio_1.Formio.Templates.framework = mod.framework;\n                break;\n            case 'fetch':\n                for (const name of Object.keys(mod.fetch)) {\n                    Formio_1.Formio.registerPlugin(mod.fetch[name], name);\n                }\n                break;\n            case 'providers':\n                for (const type of Object.keys(mod.providers)) {\n                    Formio_1.Formio.Providers.addProviders(type, mod.providers[type]);\n                }\n                break;\n            case 'displays':\n                Formio_1.Formio.Displays.addDisplays(mod.displays);\n                break;\n            case 'evaluator':\n                (0, utils_2.registerEvaluator)(mod.evaluator);\n                break;\n            case 'library':\n                options.license\n                    ? Formio_1.Formio.Licenses.addLicense(mod.library, options.license)\n                    : Formio_1.Formio.Licenses.removeLicense(mod.library);\n                break;\n            default:\n                if (defaultFn) {\n                    if (!defaultFn(key, mod)) {\n                        console.warn('Unknown module option', key);\n                    }\n                    break;\n                }\n                console.log('Unknown module option', key);\n        }\n    }\n}\nexports.registerModule = registerModule;\n/**\n * @param {Function|null} defaultFn - The default function to call if the module does not have a known key.\n * @returns {void}\n */\nfunction useModule(defaultFn = null) {\n    return (plugins, options = {}) => {\n        plugins = lodash_1.default.isArray(plugins) ? plugins : [plugins];\n        plugins.forEach((plugin) => {\n            if (Array.isArray(plugin)) {\n                plugin.forEach(p => registerModule(p, defaultFn, options));\n            }\n            else {\n                registerModule(plugin, defaultFn, options);\n            }\n        });\n    };\n}\nexports.useModule = useModule;\n/**\n * Allows passing in plugins as an array of plugins or a single plugin.\n *\n * Formio.plugins(plugin1, options);\n * Formio.plugins([plugin1, plugin2, etc], options);\n */\nFormio_1.Formio.use = useModule();\nvar Formio_2 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nObject.defineProperty(exports, \"FormioCore\", ({ enumerable: true, get: function () { return Formio_2.Formio; } }));\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/formio.form.js?");
 
 /***/ }),
 
@@ -8130,7 +8130,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 __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.registerEvaluator = exports.Evaluator = exports.Utils = void 0;\nconst utils = __importStar(__webpack_require__(/*! ./utils */ \"./lib/cjs/utils/utils.js\"));\nconst formUtils = __importStar(__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; } }));\nObject.defineProperty(exports, \"registerEvaluator\", ({ enumerable: true, get: function () { return Evaluator_1.registerEvaluator; } }));\nconst conditionOperators_1 = __importDefault(__webpack_require__(/*! ./conditionOperators */ \"./lib/cjs/utils/conditionOperators/index.js\"));\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 FormioUtils = Object.assign(Object.assign(Object.assign({}, utils), formUtils), { Evaluator: Evaluator_1.Evaluator,\n    interpolate: Evaluator_1.interpolate,\n    ConditionOperators: conditionOperators_1.default,\n    _: lodash_1.default,\n    moment: moment_1.default });\nexports.Utils = FormioUtils;\nif (typeof __webpack_require__.g === 'object') {\n    __webpack_require__.g.FormioUtils = FormioUtils;\n}\n__exportStar(__webpack_require__(/*! ./utils */ \"./lib/cjs/utils/utils.js\"), exports);\n__exportStar(__webpack_require__(/*! ./formUtils */ \"./lib/cjs/utils/formUtils.js\"), exports);\nexports[\"default\"] = FormioUtils;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/utils/index.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 __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.DefaultEvaluator = exports.registerEvaluator = exports.Evaluator = exports.Utils = void 0;\nconst utils = __importStar(__webpack_require__(/*! ./utils */ \"./lib/cjs/utils/utils.js\"));\nconst formUtils = __importStar(__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; } }));\nObject.defineProperty(exports, \"registerEvaluator\", ({ enumerable: true, get: function () { return Evaluator_1.registerEvaluator; } }));\nObject.defineProperty(exports, \"DefaultEvaluator\", ({ enumerable: true, get: function () { return Evaluator_1.DefaultEvaluator; } }));\nconst conditionOperators_1 = __importDefault(__webpack_require__(/*! ./conditionOperators */ \"./lib/cjs/utils/conditionOperators/index.js\"));\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 FormioUtils = Object.assign(Object.assign(Object.assign({}, utils), formUtils), { Evaluator: Evaluator_1.Evaluator,\n    interpolate: Evaluator_1.interpolate,\n    ConditionOperators: conditionOperators_1.default,\n    _: lodash_1.default,\n    moment: moment_1.default });\nexports.Utils = FormioUtils;\nif (typeof __webpack_require__.g === 'object') {\n    __webpack_require__.g.FormioUtils = FormioUtils;\n}\n__exportStar(__webpack_require__(/*! ./utils */ \"./lib/cjs/utils/utils.js\"), exports);\n__exportStar(__webpack_require__(/*! ./formUtils */ \"./lib/cjs/utils/formUtils.js\"), exports);\nexports[\"default\"] = FormioUtils;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/utils/index.js?");
 
 /***/ }),
 
@@ -10876,7 +10876,7 @@ eval("\nvar parent = __webpack_require__(/*! ../../es/object/from-entries */ \".
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nvar _a;\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.FormBuilder = exports.Form = exports.Formio = void 0;\nconst CDN_js_1 = __importDefault(__webpack_require__(/*! ./CDN.js */ \"./lib/cjs/CDN.js\"));\nclass Formio {\n    static setLicense(license, norecurse = false) {\n        _a.license = license;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setLicense(license);\n        }\n    }\n    static setBaseUrl(url, norecurse = false) {\n        _a.baseUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setBaseUrl(url);\n        }\n    }\n    static setApiUrl(url, norecurse = false) {\n        _a.baseUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setApiUrl(url);\n        }\n    }\n    static setProjectUrl(url, norecurse = false) {\n        _a.projectUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setProjectUrl(url);\n        }\n    }\n    static setAppUrl(url, norecurse = false) {\n        _a.projectUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setAppUrl(url);\n        }\n    }\n    static setPathType(type, norecurse = false) {\n        _a.pathType = type;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setPathType(type);\n        }\n    }\n    static debug(...args) {\n        if (_a.config.debug) {\n            console.log(...args);\n        }\n    }\n    static clearCache() {\n        if (_a.FormioClass) {\n            _a.FormioClass.clearCache();\n        }\n    }\n    static global(prop, flag = '') {\n        const globalValue = window[prop];\n        if (flag && globalValue && !globalValue[flag]) {\n            return null;\n        }\n        _a.debug(`Getting global ${prop}`, globalValue);\n        return globalValue;\n    }\n    static use(module) {\n        if (_a.FormioClass && _a.FormioClass.isRenderer) {\n            _a.FormioClass.use(module);\n        }\n        else {\n            _a.modules.push(module);\n        }\n    }\n    static createElement(type, attrs, children) {\n        const element = document.createElement(type);\n        if (!attrs) {\n            return element;\n        }\n        Object.keys(attrs).forEach(key => {\n            element.setAttribute(key, attrs[key]);\n        });\n        (children || []).forEach(child => {\n            element.appendChild(_a.createElement(child.tag, child.attrs, child.children));\n        });\n        return element;\n    }\n    static addScript(wrapper, src, name, flag = '') {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!src) {\n                return Promise.resolve();\n            }\n            if (typeof src !== 'string' && src.length) {\n                return Promise.all(src.map(ref => _a.addScript(wrapper, ref)));\n            }\n            if (name && _a.global(name, flag)) {\n                _a.debug(`${name} already loaded.`);\n                return Promise.resolve(_a.global(name));\n            }\n            _a.debug('Adding Script', src);\n            try {\n                wrapper.appendChild(_a.createElement('script', {\n                    src\n                }));\n            }\n            catch (err) {\n                _a.debug(err);\n                return Promise.resolve();\n            }\n            if (!name) {\n                return Promise.resolve();\n            }\n            return new Promise((resolve) => {\n                _a.debug(`Waiting to load ${name}`);\n                const wait = setInterval(() => {\n                    if (_a.global(name, flag)) {\n                        clearInterval(wait);\n                        _a.debug(`${name} loaded.`);\n                        resolve(_a.global(name));\n                    }\n                }, 100);\n            });\n        });\n    }\n    static addStyles(wrapper, href) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!href) {\n                return;\n            }\n            if (typeof href !== 'string' && href.length) {\n                href.forEach(ref => _a.addStyles(wrapper, ref));\n                return;\n            }\n            _a.debug('Adding Styles', href);\n            wrapper.appendChild(_a.createElement('link', {\n                rel: 'stylesheet',\n                href\n            }));\n        });\n    }\n    static submitDone(instance, submission) {\n        return __awaiter(this, void 0, void 0, function* () {\n            _a.debug('Submision Complete', submission);\n            if (_a.config.submitDone) {\n                _a.config.submitDone(submission, instance);\n            }\n            const successMessage = (_a.config.success || '').toString();\n            if (successMessage && successMessage.toLowerCase() !== 'false' && instance.element) {\n                instance.element.innerHTML = `<div class=\"alert-success\" role=\"alert\">${successMessage}</div>`;\n            }\n            let returnUrl = _a.config.redirect;\n            // Allow form based configuration for return url.\n            if (!returnUrl &&\n                (instance._form &&\n                    instance._form.settings &&\n                    (instance._form.settings.returnUrl ||\n                        instance._form.settings.redirect))) {\n                _a.debug('Return url found in form configuration');\n                returnUrl = instance._form.settings.returnUrl || instance._form.settings.redirect;\n            }\n            if (returnUrl) {\n                const formSrc = instance.formio ? instance.formio.formUrl : '';\n                const hasQuery = !!returnUrl.match(/\\?/);\n                const isOrigin = returnUrl.indexOf(location.origin) === 0;\n                returnUrl += hasQuery ? '&' : '?';\n                returnUrl += `sub=${submission._id}`;\n                if (!isOrigin && formSrc) {\n                    returnUrl += `&form=${encodeURIComponent(formSrc)}`;\n                }\n                _a.debug('Return URL', returnUrl);\n                window.location.href = returnUrl;\n                if (isOrigin) {\n                    window.location.reload();\n                }\n            }\n        });\n    }\n    // Return the full script if the builder is being used.\n    static formioScript(script, builder) {\n        builder = builder || _a.config.includeBuilder;\n        if (_a.fullAdded || builder) {\n            _a.fullAdded = true;\n            return script.replace('formio.form', 'formio.full');\n        }\n        return script;\n    }\n    static addLibrary(libWrapper, lib, name) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!lib) {\n                return;\n            }\n            if (lib.dependencies) {\n                for (let i = 0; i < lib.dependencies.length; i++) {\n                    const libName = lib.dependencies[i];\n                    yield _a.addLibrary(libWrapper, _a.config.libs[libName], libName);\n                }\n            }\n            if (lib.css) {\n                yield _a.addStyles((lib.global ? document.body : libWrapper), lib.css);\n            }\n            if (lib.js) {\n                const module = yield _a.addScript((lib.global ? document.body : libWrapper), lib.js, lib.use ? name : false);\n                if (lib.use) {\n                    _a.debug(`Using ${name}`);\n                    const options = lib.options || {};\n                    if (!options.license && _a.license) {\n                        options.license = _a.license;\n                    }\n                    _a.use((typeof lib.use === 'function' ? lib.use(module) : module), options);\n                }\n            }\n            if (lib.globalStyle) {\n                const style = _a.createElement('style');\n                style.type = 'text/css';\n                style.innerHTML = lib.globalStyle;\n                document.body.appendChild(style);\n            }\n        });\n    }\n    static addLoader(wrapper) {\n        return __awaiter(this, void 0, void 0, function* () {\n            wrapper.appendChild(_a.createElement('div', {\n                'class': 'formio-loader'\n            }, [{\n                    tag: 'div',\n                    attrs: {\n                        class: 'loader-wrapper'\n                    },\n                    children: [{\n                            tag: 'div',\n                            attrs: {\n                                class: 'loader text-center'\n                            }\n                        }]\n                }]));\n        });\n    }\n    // eslint-disable-next-line max-statements\n    static init(element, options = {}, builder = false) {\n        return __awaiter(this, void 0, void 0, function* () {\n            _a.cdn = new CDN_js_1.default(_a.config.cdn, _a.config.cdnUrls || {});\n            _a.config.libs = _a.config.libs || {\n                uswds: {\n                    dependencies: ['fontawesome'],\n                    js: `${_a.cdn.uswds}/uswds.min.js`,\n                    css: `${_a.cdn.uswds}/uswds.min.css`,\n                    use: true\n                },\n                fontawesome: {\n                    // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need\n                    // to do 2 things. 1.) Load the fonts from the global cdn, and 2.) add the font-face to the global styles on the page.\n                    css: `https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css`,\n                    globalStyle: `@font-face {\n                    font-family: 'FontAwesome';\n                    src: url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');\n                    src: url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');\n                    font-weight: normal;\n                    font-style: normal;\n                  }`\n                },\n                bootstrap4: {\n                    dependencies: ['fontawesome'],\n                    css: `${_a.cdn.bootstrap4}/css/bootstrap.min.css`\n                },\n                bootstrap: {\n                    dependencies: ['bootstrap-icons'],\n                    css: `${_a.cdn.bootstrap}/css/bootstrap.min.css`\n                },\n                'bootstrap-icons': {\n                    // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need\n                    // to do 2 things. 1.) Load the fonts from the global cdn, and 2.) add the font-face to the global styles on the page.\n                    css: 'https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.min.css',\n                    globalStyle: `@font-face {\n                    font-display: block;\n                    font-family: \"bootstrap-icons\";\n                    src: url(\"https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6\") format(\"woff2\"),\n                         url(\"https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6\") format(\"woff\");\n                }`\n                }\n            };\n            // Add all bootswatch templates.\n            ['cerulean', 'cosmo', 'cyborg', 'darkly', 'flatly', 'journal', 'litera', 'lumen', 'lux', 'materia', 'minty', 'pulse', 'sandstone', 'simplex', 'sketchy', 'slate', 'solar', 'spacelab', 'superhero', 'united', 'yeti'].forEach((template) => {\n                _a.config.libs[template] = {\n                    dependencies: ['bootstrap-icons'],\n                    css: `${_a.cdn.bootswatch}/dist/${template}/bootstrap.min.css`\n                };\n            });\n            const id = _a.config.id || `formio-${Math.random().toString(36).substring(7)}`;\n            // Create a new wrapper and add the element inside of a new wrapper.\n            let wrapper = _a.createElement('div', {\n                'id': `${id}-wrapper`\n            });\n            element.parentNode.insertBefore(wrapper, element);\n            // If we include the libraries, then we will attempt to run this in shadow dom.\n            const useShadowDom = _a.config.includeLibs && !_a.config.noshadow && (typeof wrapper.attachShadow === 'function');\n            if (useShadowDom) {\n                wrapper = wrapper.attachShadow({\n                    mode: 'open'\n                });\n                options.shadowRoot = wrapper;\n            }\n            element.parentNode.removeChild(element);\n            wrapper.appendChild(element);\n            // If this is inside of shadow dom, then we need to add the styles and scripts to the shadow dom.\n            const libWrapper = useShadowDom ? wrapper : document.body;\n            // Load the renderer styles.\n            yield _a.addStyles(libWrapper, _a.config.embedCSS || `${_a.cdn.js}/formio.embed.css`);\n            // Add a loader.\n            _a.addLoader(wrapper);\n            const formioSrc = _a.config.full ? 'formio.full' : 'formio.form';\n            const renderer = _a.config.debug ? formioSrc : `${formioSrc}.min`;\n            _a.FormioClass = yield _a.addScript(libWrapper, _a.formioScript(_a.config.script || `${_a.cdn.js}/${renderer}.js`, builder), 'Formio', builder ? 'isBuilder' : 'isRenderer');\n            _a.FormioClass.cdn = _a.cdn;\n            _a.FormioClass.setBaseUrl(options.baseUrl || _a.baseUrl || _a.config.base);\n            _a.FormioClass.setProjectUrl(options.projectUrl || _a.projectUrl || _a.config.project);\n            _a.FormioClass.language = _a.language;\n            _a.setLicense(_a.license || _a.config.license || false);\n            _a.modules.forEach((module) => {\n                _a.FormioClass.use(module);\n            });\n            if (_a.icons) {\n                _a.FormioClass.icons = _a.icons;\n            }\n            if (_a.pathType) {\n                _a.FormioClass.setPathType(_a.pathType);\n            }\n            // Add libraries if they wish to include the libs.\n            if (_a.config.template && _a.config.includeLibs) {\n                yield _a.addLibrary(libWrapper, _a.config.libs[_a.config.template], _a.config.template);\n            }\n            if (!_a.config.libraries) {\n                _a.config.libraries = _a.config.modules || {};\n            }\n            // Adding premium if it is provided via the config.\n            if (_a.config.premium) {\n                _a.config.libraries.premium = _a.config.premium;\n            }\n            // Allow adding dynamic modules.\n            if (_a.config.libraries) {\n                for (const name in _a.config.libraries) {\n                    const lib = _a.config.libraries[name];\n                    lib.use = lib.use || true;\n                    yield _a.addLibrary(libWrapper, lib, name);\n                }\n            }\n            yield _a.addStyles(libWrapper, _a.formioScript(_a.config.style || `${_a.cdn.js}/${renderer}.css`, builder));\n            if (_a.config.before) {\n                yield _a.config.before(_a.FormioClass, element, _a.config);\n            }\n            _a.FormioClass.license = true;\n            _a._formioReady(_a.FormioClass);\n            return wrapper;\n        });\n    }\n    // Called after an instance has been created.\n    static afterCreate(instance, wrapper, readyEvent) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const loader = wrapper.querySelector('.formio-loader');\n            if (loader) {\n                wrapper.removeChild(loader);\n            }\n            _a.FormioClass.events.emit(readyEvent, instance);\n            if (_a.config.after) {\n                _a.debug('Calling ready callback');\n                _a.config.after(instance, _a.config);\n            }\n            return instance;\n        });\n    }\n    // Create a new form.\n    static createForm(element, form, options = {}) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (_a.FormioClass) {\n                return _a.FormioClass.createForm(element, form, Object.assign(Object.assign({}, options), { noLoader: true }));\n            }\n            const wrapper = yield _a.init(element, options);\n            return _a.FormioClass.createForm(element, form, Object.assign(Object.assign({}, options), { noLoader: true })).then((instance) => {\n                // Set the default submission data.\n                if (_a.config.submission) {\n                    _a.debug('Setting submission', _a.config.submission);\n                    instance.submission = _a.config.submission;\n                }\n                // Call the after create method.\n                _a.afterCreate(instance, wrapper, 'formEmbedded');\n                return instance;\n            });\n        });\n    }\n    // Create a form builder.\n    static builder(element, form, options = {}) {\n        var _b;\n        return __awaiter(this, void 0, void 0, function* () {\n            if ((_b = _a.FormioClass) === null || _b === void 0 ? void 0 : _b.builder) {\n                return _a.FormioClass.builder(element, form, options);\n            }\n            const wrapper = yield _a.init(element, options, true);\n            return _a.FormioClass.builder(element, form, options).then((instance) => {\n                _a.afterCreate(instance, wrapper, 'builderEmbedded');\n                return instance;\n            });\n        });\n    }\n}\nexports.Formio = Formio;\n_a = Formio;\nFormio.FormioClass = null;\nFormio.config = {};\nFormio.modules = [];\nFormio.icons = '';\nFormio.license = '';\nFormio.formioReady = new Promise((ready, reject) => {\n    _a._formioReady = ready;\n    _a._formioReadyReject = reject;\n});\nFormio.version = '5.2.1-rc.9';\n// Create a report.\nFormio.Report = {\n    create: (element, submission, options = {}) => __awaiter(void 0, void 0, void 0, function* () {\n        var _b;\n        if ((_b = _a.FormioClass) === null || _b === void 0 ? void 0 : _b.Report) {\n            return _a.FormioClass.Report.create(element, submission, options);\n        }\n        const wrapper = yield _a.init(element, options, true);\n        return _a.FormioClass.Report.create(element, submission, options).then((instance) => {\n            _a.afterCreate(instance, wrapper, 'reportEmbedded');\n            return instance;\n        });\n    })\n};\nCDN_js_1.default.defaultCDN = Formio.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';\nclass Form {\n    constructor(element, form, options) {\n        this.form = form;\n        this.element = element;\n        this.options = options || {};\n        this.init();\n        this.instance = {\n            proxy: true,\n            ready: this.ready,\n            destroy: () => { }\n        };\n    }\n    init() {\n        if (this.instance && !this.instance.proxy) {\n            this.instance.destroy();\n        }\n        this.element.innerHTML = '';\n        this.ready = this.create().then((instance) => {\n            this.instance = instance;\n            this.form = instance.form;\n            return instance;\n        });\n    }\n    create() {\n        return Formio.createForm(this.element, this.form, this.options);\n    }\n    setForm(form) {\n        this.form = form;\n        if (this.instance) {\n            this.instance.setForm(form);\n        }\n    }\n    setDisplay(display) {\n        if (this.instance.proxy) {\n            return this.ready;\n        }\n        this.form.display = display;\n        this.instance.destroy();\n        this.ready = this.create().then((instance) => {\n            this.instance = instance;\n            this.setForm(this.form);\n        });\n        return this.ready;\n    }\n}\nexports.Form = Form;\nclass FormBuilder extends Form {\n    create() {\n        return Formio.builder(this.element, this.form, this.options);\n    }\n}\nexports.FormBuilder = FormBuilder;\nFormio.Form = Form;\nFormio.FormBuilder = FormBuilder;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Embed.js?");
+eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nvar _a;\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.FormBuilder = exports.Form = exports.Formio = void 0;\nconst CDN_js_1 = __importDefault(__webpack_require__(/*! ./CDN.js */ \"./lib/cjs/CDN.js\"));\nclass Formio {\n    static setLicense(license, norecurse = false) {\n        _a.license = license;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setLicense(license);\n        }\n    }\n    static setBaseUrl(url, norecurse = false) {\n        _a.baseUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setBaseUrl(url);\n        }\n    }\n    static setApiUrl(url, norecurse = false) {\n        _a.baseUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setApiUrl(url);\n        }\n    }\n    static setProjectUrl(url, norecurse = false) {\n        _a.projectUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setProjectUrl(url);\n        }\n    }\n    static setAppUrl(url, norecurse = false) {\n        _a.projectUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setAppUrl(url);\n        }\n    }\n    static setPathType(type, norecurse = false) {\n        _a.pathType = type;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setPathType(type);\n        }\n    }\n    static debug(...args) {\n        if (_a.config.debug) {\n            console.log(...args);\n        }\n    }\n    static clearCache() {\n        if (_a.FormioClass) {\n            _a.FormioClass.clearCache();\n        }\n    }\n    static global(prop, flag = '') {\n        const globalValue = window[prop];\n        if (flag && globalValue && !globalValue[flag]) {\n            return null;\n        }\n        _a.debug(`Getting global ${prop}`, globalValue);\n        return globalValue;\n    }\n    static use(module) {\n        if (_a.FormioClass && _a.FormioClass.isRenderer) {\n            _a.FormioClass.use(module);\n        }\n        else {\n            _a.modules.push(module);\n        }\n    }\n    static createElement(type, attrs, children) {\n        const element = document.createElement(type);\n        if (!attrs) {\n            return element;\n        }\n        Object.keys(attrs).forEach(key => {\n            element.setAttribute(key, attrs[key]);\n        });\n        (children || []).forEach(child => {\n            element.appendChild(_a.createElement(child.tag, child.attrs, child.children));\n        });\n        return element;\n    }\n    static addScript(wrapper, src, name, flag = '') {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!src) {\n                return Promise.resolve();\n            }\n            if (typeof src !== 'string' && src.length) {\n                return Promise.all(src.map(ref => _a.addScript(wrapper, ref)));\n            }\n            if (name && _a.global(name, flag)) {\n                _a.debug(`${name} already loaded.`);\n                return Promise.resolve(_a.global(name));\n            }\n            _a.debug('Adding Script', src);\n            try {\n                wrapper.appendChild(_a.createElement('script', {\n                    src\n                }));\n            }\n            catch (err) {\n                _a.debug(err);\n                return Promise.resolve();\n            }\n            if (!name) {\n                return Promise.resolve();\n            }\n            return new Promise((resolve) => {\n                _a.debug(`Waiting to load ${name}`);\n                const wait = setInterval(() => {\n                    if (_a.global(name, flag)) {\n                        clearInterval(wait);\n                        _a.debug(`${name} loaded.`);\n                        resolve(_a.global(name));\n                    }\n                }, 100);\n            });\n        });\n    }\n    static addStyles(wrapper, href) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!href) {\n                return;\n            }\n            if (typeof href !== 'string' && href.length) {\n                href.forEach(ref => _a.addStyles(wrapper, ref));\n                return;\n            }\n            _a.debug('Adding Styles', href);\n            wrapper.appendChild(_a.createElement('link', {\n                rel: 'stylesheet',\n                href\n            }));\n        });\n    }\n    static submitDone(instance, submission) {\n        return __awaiter(this, void 0, void 0, function* () {\n            _a.debug('Submision Complete', submission);\n            if (_a.config.submitDone) {\n                _a.config.submitDone(submission, instance);\n            }\n            const successMessage = (_a.config.success || '').toString();\n            if (successMessage && successMessage.toLowerCase() !== 'false' && instance.element) {\n                instance.element.innerHTML = `<div class=\"alert-success\" role=\"alert\">${successMessage}</div>`;\n            }\n            let returnUrl = _a.config.redirect;\n            // Allow form based configuration for return url.\n            if (!returnUrl &&\n                (instance._form &&\n                    instance._form.settings &&\n                    (instance._form.settings.returnUrl ||\n                        instance._form.settings.redirect))) {\n                _a.debug('Return url found in form configuration');\n                returnUrl = instance._form.settings.returnUrl || instance._form.settings.redirect;\n            }\n            if (returnUrl) {\n                const formSrc = instance.formio ? instance.formio.formUrl : '';\n                const hasQuery = !!returnUrl.match(/\\?/);\n                const isOrigin = returnUrl.indexOf(location.origin) === 0;\n                returnUrl += hasQuery ? '&' : '?';\n                returnUrl += `sub=${submission._id}`;\n                if (!isOrigin && formSrc) {\n                    returnUrl += `&form=${encodeURIComponent(formSrc)}`;\n                }\n                _a.debug('Return URL', returnUrl);\n                window.location.href = returnUrl;\n                if (isOrigin) {\n                    window.location.reload();\n                }\n            }\n        });\n    }\n    // Return the full script if the builder is being used.\n    static formioScript(script, builder) {\n        builder = builder || _a.config.includeBuilder;\n        if (_a.fullAdded || builder) {\n            _a.fullAdded = true;\n            return script.replace('formio.form', 'formio.full');\n        }\n        return script;\n    }\n    static addLibrary(libWrapper, lib, name) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!lib) {\n                return;\n            }\n            if (lib.dependencies) {\n                for (let i = 0; i < lib.dependencies.length; i++) {\n                    const libName = lib.dependencies[i];\n                    yield _a.addLibrary(libWrapper, _a.config.libs[libName], libName);\n                }\n            }\n            if (lib.css) {\n                yield _a.addStyles((lib.global ? document.body : libWrapper), lib.css);\n            }\n            if (lib.js) {\n                const module = yield _a.addScript((lib.global ? document.body : libWrapper), lib.js, lib.use ? name : false);\n                if (lib.use) {\n                    _a.debug(`Using ${name}`);\n                    const options = lib.options || {};\n                    if (!options.license && _a.license) {\n                        options.license = _a.license;\n                    }\n                    _a.use((typeof lib.use === 'function' ? lib.use(module) : module), options);\n                }\n            }\n            if (lib.globalStyle) {\n                const style = _a.createElement('style');\n                style.type = 'text/css';\n                style.innerHTML = lib.globalStyle;\n                document.body.appendChild(style);\n            }\n        });\n    }\n    static addLoader(wrapper) {\n        return __awaiter(this, void 0, void 0, function* () {\n            wrapper.appendChild(_a.createElement('div', {\n                'class': 'formio-loader'\n            }, [{\n                    tag: 'div',\n                    attrs: {\n                        class: 'loader-wrapper'\n                    },\n                    children: [{\n                            tag: 'div',\n                            attrs: {\n                                class: 'loader text-center'\n                            }\n                        }]\n                }]));\n        });\n    }\n    // eslint-disable-next-line max-statements\n    static init(element, options = {}, builder = false) {\n        return __awaiter(this, void 0, void 0, function* () {\n            _a.cdn = new CDN_js_1.default(_a.config.cdn, _a.config.cdnUrls || {});\n            _a.config.libs = _a.config.libs || {\n                uswds: {\n                    dependencies: ['fontawesome'],\n                    js: `${_a.cdn.uswds}/uswds.min.js`,\n                    css: `${_a.cdn.uswds}/uswds.min.css`,\n                    use: true\n                },\n                fontawesome: {\n                    // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need\n                    // to do 2 things. 1.) Load the fonts from the global cdn, and 2.) add the font-face to the global styles on the page.\n                    css: `https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css`,\n                    globalStyle: `@font-face {\n                    font-family: 'FontAwesome';\n                    src: url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');\n                    src: url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');\n                    font-weight: normal;\n                    font-style: normal;\n                  }`\n                },\n                bootstrap4: {\n                    dependencies: ['fontawesome'],\n                    css: `${_a.cdn.bootstrap4}/css/bootstrap.min.css`\n                },\n                bootstrap: {\n                    dependencies: ['bootstrap-icons'],\n                    css: `${_a.cdn.bootstrap}/css/bootstrap.min.css`\n                },\n                'bootstrap-icons': {\n                    // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need\n                    // to do 2 things. 1.) Load the fonts from the global cdn, and 2.) add the font-face to the global styles on the page.\n                    css: 'https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.min.css',\n                    globalStyle: `@font-face {\n                    font-display: block;\n                    font-family: \"bootstrap-icons\";\n                    src: url(\"https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6\") format(\"woff2\"),\n                         url(\"https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6\") format(\"woff\");\n                }`\n                }\n            };\n            // Add all bootswatch templates.\n            ['cerulean', 'cosmo', 'cyborg', 'darkly', 'flatly', 'journal', 'litera', 'lumen', 'lux', 'materia', 'minty', 'pulse', 'sandstone', 'simplex', 'sketchy', 'slate', 'solar', 'spacelab', 'superhero', 'united', 'yeti'].forEach((template) => {\n                _a.config.libs[template] = {\n                    dependencies: ['bootstrap-icons'],\n                    css: `${_a.cdn.bootswatch}/dist/${template}/bootstrap.min.css`\n                };\n            });\n            const id = _a.config.id || `formio-${Math.random().toString(36).substring(7)}`;\n            // Create a new wrapper and add the element inside of a new wrapper.\n            let wrapper = _a.createElement('div', {\n                'id': `${id}-wrapper`\n            });\n            element.parentNode.insertBefore(wrapper, element);\n            // If we include the libraries, then we will attempt to run this in shadow dom.\n            const useShadowDom = _a.config.includeLibs && !_a.config.noshadow && (typeof wrapper.attachShadow === 'function');\n            if (useShadowDom) {\n                wrapper = wrapper.attachShadow({\n                    mode: 'open'\n                });\n                options.shadowRoot = wrapper;\n            }\n            element.parentNode.removeChild(element);\n            wrapper.appendChild(element);\n            // If this is inside of shadow dom, then we need to add the styles and scripts to the shadow dom.\n            const libWrapper = useShadowDom ? wrapper : document.body;\n            // Load the renderer styles.\n            yield _a.addStyles(libWrapper, _a.config.embedCSS || `${_a.cdn.js}/formio.embed.css`);\n            // Add a loader.\n            _a.addLoader(wrapper);\n            const formioSrc = _a.config.full ? 'formio.full' : 'formio.form';\n            const renderer = _a.config.debug ? formioSrc : `${formioSrc}.min`;\n            _a.FormioClass = yield _a.addScript(libWrapper, _a.formioScript(_a.config.script || `${_a.cdn.js}/${renderer}.js`, builder), 'Formio', builder ? 'isBuilder' : 'isRenderer');\n            _a.FormioClass.cdn = _a.cdn;\n            _a.FormioClass.setBaseUrl(options.baseUrl || _a.baseUrl || _a.config.base);\n            _a.FormioClass.setProjectUrl(options.projectUrl || _a.projectUrl || _a.config.project);\n            _a.FormioClass.language = _a.language;\n            _a.setLicense(_a.license || _a.config.license || false);\n            _a.modules.forEach((module) => {\n                _a.FormioClass.use(module);\n            });\n            if (_a.icons) {\n                _a.FormioClass.icons = _a.icons;\n            }\n            if (_a.pathType) {\n                _a.FormioClass.setPathType(_a.pathType);\n            }\n            // Add libraries if they wish to include the libs.\n            if (_a.config.template && _a.config.includeLibs) {\n                yield _a.addLibrary(libWrapper, _a.config.libs[_a.config.template], _a.config.template);\n            }\n            if (!_a.config.libraries) {\n                _a.config.libraries = _a.config.modules || {};\n            }\n            // Adding premium if it is provided via the config.\n            if (_a.config.premium) {\n                _a.config.libraries.premium = _a.config.premium;\n            }\n            // Allow adding dynamic modules.\n            if (_a.config.libraries) {\n                for (const name in _a.config.libraries) {\n                    const lib = _a.config.libraries[name];\n                    lib.use = lib.use || true;\n                    yield _a.addLibrary(libWrapper, lib, name);\n                }\n            }\n            yield _a.addStyles(libWrapper, _a.formioScript(_a.config.style || `${_a.cdn.js}/${renderer}.css`, builder));\n            if (_a.config.before) {\n                yield _a.config.before(_a.FormioClass, element, _a.config);\n            }\n            _a.FormioClass.license = true;\n            _a._formioReady(_a.FormioClass);\n            return wrapper;\n        });\n    }\n    // Called after an instance has been created.\n    static afterCreate(instance, wrapper, readyEvent) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const loader = wrapper.querySelector('.formio-loader');\n            if (loader) {\n                wrapper.removeChild(loader);\n            }\n            _a.FormioClass.events.emit(readyEvent, instance);\n            if (_a.config.after) {\n                _a.debug('Calling ready callback');\n                _a.config.after(instance, _a.config);\n            }\n            return instance;\n        });\n    }\n    // Create a new form.\n    static createForm(element, form, options = {}) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (_a.FormioClass) {\n                return _a.FormioClass.createForm(element, form, Object.assign(Object.assign({}, options), { noLoader: true }));\n            }\n            const wrapper = yield _a.init(element, options);\n            return _a.FormioClass.createForm(element, form, Object.assign(Object.assign({}, options), { noLoader: true })).then((instance) => {\n                // Set the default submission data.\n                if (_a.config.submission) {\n                    _a.debug('Setting submission', _a.config.submission);\n                    instance.submission = _a.config.submission;\n                }\n                // Call the after create method.\n                _a.afterCreate(instance, wrapper, 'formEmbedded');\n                return instance;\n            });\n        });\n    }\n    // Create a form builder.\n    static builder(element, form, options = {}) {\n        var _b;\n        return __awaiter(this, void 0, void 0, function* () {\n            if ((_b = _a.FormioClass) === null || _b === void 0 ? void 0 : _b.builder) {\n                return _a.FormioClass.builder(element, form, options);\n            }\n            const wrapper = yield _a.init(element, options, true);\n            return _a.FormioClass.builder(element, form, options).then((instance) => {\n                _a.afterCreate(instance, wrapper, 'builderEmbedded');\n                return instance;\n            });\n        });\n    }\n}\nexports.Formio = Formio;\n_a = Formio;\nFormio.FormioClass = null;\nFormio.config = {};\nFormio.modules = [];\nFormio.icons = '';\nFormio.license = '';\nFormio.formioReady = new Promise((ready, reject) => {\n    _a._formioReady = ready;\n    _a._formioReadyReject = reject;\n});\nFormio.version = '5.2.1';\n// Create a report.\nFormio.Report = {\n    create: (element, submission, options = {}) => __awaiter(void 0, void 0, void 0, function* () {\n        var _b;\n        if ((_b = _a.FormioClass) === null || _b === void 0 ? void 0 : _b.Report) {\n            return _a.FormioClass.Report.create(element, submission, options);\n        }\n        const wrapper = yield _a.init(element, options, true);\n        return _a.FormioClass.Report.create(element, submission, options).then((instance) => {\n            _a.afterCreate(instance, wrapper, 'reportEmbedded');\n            return instance;\n        });\n    })\n};\nCDN_js_1.default.defaultCDN = Formio.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';\nclass Form {\n    constructor(element, form, options) {\n        this.form = form;\n        this.element = element;\n        this.options = options || {};\n        this.init();\n        this.instance = {\n            proxy: true,\n            ready: this.ready,\n            destroy: () => { }\n        };\n    }\n    init() {\n        if (this.instance && !this.instance.proxy) {\n            this.instance.destroy();\n        }\n        this.element.innerHTML = '';\n        this.ready = this.create().then((instance) => {\n            this.instance = instance;\n            this.form = instance.form;\n            return instance;\n        });\n    }\n    create() {\n        return Formio.createForm(this.element, this.form, this.options);\n    }\n    setForm(form) {\n        this.form = form;\n        if (this.instance) {\n            this.instance.setForm(form);\n        }\n    }\n    setDisplay(display) {\n        if (this.instance.proxy) {\n            return this.ready;\n        }\n        this.form.display = display;\n        this.instance.destroy();\n        this.ready = this.create().then((instance) => {\n            this.instance = instance;\n            this.setForm(this.form);\n        });\n        return this.ready;\n    }\n}\nexports.Form = Form;\nclass FormBuilder extends Form {\n    create() {\n        return Formio.builder(this.element, this.form, this.options);\n    }\n}\nexports.FormBuilder = FormBuilder;\nFormio.Form = Form;\nFormio.FormBuilder = FormBuilder;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Embed.js?");
 
 /***/ }),
 
@@ -10887,7 +10887,7 @@ eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _argument
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Formio = void 0;\nconst sdk_1 = __webpack_require__(/*! @formio/core/sdk */ \"./node_modules/@formio/core/lib/sdk/index.js\");\nObject.defineProperty(exports, \"Formio\", ({ enumerable: true, get: function () { return sdk_1.Formio; } }));\nconst Embed_1 = __webpack_require__(/*! ./Embed */ \"./lib/cjs/Embed.js\");\nconst CDN_1 = __importDefault(__webpack_require__(/*! ./CDN */ \"./lib/cjs/CDN.js\"));\nconst providers_1 = __importDefault(__webpack_require__(/*! ./providers */ \"./lib/cjs/providers/index.js\"));\nsdk_1.Formio.cdn = new CDN_1.default();\nsdk_1.Formio.Providers = providers_1.default;\nsdk_1.Formio.version = '5.2.1-rc.9';\nCDN_1.default.defaultCDN = sdk_1.Formio.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';\nconst isNil = (val) => val === null || val === undefined;\nsdk_1.Formio.prototype.uploadFile = function (storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback, multipartOptions) {\n    const requestArgs = {\n        provider: storage,\n        method: 'upload',\n        file: file,\n        fileName: fileName,\n        dir: dir\n    };\n    fileKey = fileKey || 'file';\n    const request = sdk_1.Formio.pluginWait('preRequest', requestArgs)\n        .then(() => {\n        return sdk_1.Formio.pluginGet('fileRequest', requestArgs)\n            .then((result) => {\n            if (storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    if (uploadStartCallback) {\n                        uploadStartCallback();\n                    }\n                    return provider.uploadFile(file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback, multipartOptions);\n                }\n                else {\n                    throw ('Storage provider not found');\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return sdk_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\nsdk_1.Formio.prototype.downloadFile = function (file, options) {\n    const requestArgs = {\n        method: 'download',\n        file: file\n    };\n    const request = sdk_1.Formio.pluginWait('preRequest', requestArgs)\n        .then(() => {\n        return sdk_1.Formio.pluginGet('fileRequest', requestArgs)\n            .then((result) => {\n            if (file.storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', file.storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    return provider.downloadFile(file, options);\n                }\n                else {\n                    throw ('Storage provider not found');\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return sdk_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\nsdk_1.Formio.prototype.deleteFile = function (file, options) {\n    const requestArgs = {\n        method: 'delete',\n        file: file\n    };\n    const request = sdk_1.Formio.pluginWait('preRequest', requestArgs)\n        .then(() => {\n        return sdk_1.Formio.pluginGet('fileRequest', requestArgs)\n            .then((result) => {\n            if (file.storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', file.storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    return provider.deleteFile(file, options);\n                }\n                else {\n                    throw ('Storage provider not found');\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return sdk_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\n// Esnure we proxy the following methods to the FormioEmbed class.\n['setBaseUrl', 'setApiUrl', 'setAppUrl', 'setProjectUrl', 'setPathType', 'setLicense'].forEach((fn) => {\n    const baseFn = sdk_1.Formio[fn];\n    sdk_1.Formio[fn] = function (arg) {\n        const retVal = Embed_1.Formio[fn](arg, true);\n        return baseFn ? baseFn.call(this, arg) : retVal;\n    };\n});\n// For reverse compatability.\nsdk_1.Formio.Promise = Promise;\nsdk_1.Formio.formioReady = Embed_1.Formio.formioReady;\nsdk_1.Formio.config = Embed_1.Formio.config;\nsdk_1.Formio.builder = Embed_1.Formio.builder;\nsdk_1.Formio.Report = Embed_1.Formio.Report;\nsdk_1.Formio.Form = Embed_1.Formio.Form;\nsdk_1.Formio.FormBuilder = Embed_1.Formio.FormBuilder;\nsdk_1.Formio.use = Embed_1.Formio.use;\nsdk_1.Formio.createForm = Embed_1.Formio.createForm;\nsdk_1.Formio.submitDone = Embed_1.Formio.submitDone;\nsdk_1.Formio.addLibrary = Embed_1.Formio.addLibrary;\nsdk_1.Formio.addLoader = Embed_1.Formio.addLoader;\nsdk_1.Formio.addToGlobal = (global) => {\n    if (typeof global === 'object' && !global.Formio) {\n        global.Formio = sdk_1.Formio;\n    }\n};\nif (typeof __webpack_require__.g !== 'undefined') {\n    sdk_1.Formio.addToGlobal(__webpack_require__.g);\n}\nif (typeof window !== 'undefined') {\n    sdk_1.Formio.addToGlobal(window);\n}\nEmbed_1.Formio._formioReady(sdk_1.Formio);\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Formio.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Formio = void 0;\nconst sdk_1 = __webpack_require__(/*! @formio/core/sdk */ \"./node_modules/@formio/core/lib/sdk/index.js\");\nObject.defineProperty(exports, \"Formio\", ({ enumerable: true, get: function () { return sdk_1.Formio; } }));\nconst Embed_1 = __webpack_require__(/*! ./Embed */ \"./lib/cjs/Embed.js\");\nconst CDN_1 = __importDefault(__webpack_require__(/*! ./CDN */ \"./lib/cjs/CDN.js\"));\nconst providers_1 = __importDefault(__webpack_require__(/*! ./providers */ \"./lib/cjs/providers/index.js\"));\nsdk_1.Formio.cdn = new CDN_1.default();\nsdk_1.Formio.Providers = providers_1.default;\nsdk_1.Formio.version = '5.2.1';\nCDN_1.default.defaultCDN = sdk_1.Formio.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';\nconst isNil = (val) => val === null || val === undefined;\nsdk_1.Formio.prototype.uploadFile = function (storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback, multipartOptions) {\n    const requestArgs = {\n        provider: storage,\n        method: 'upload',\n        file: file,\n        fileName: fileName,\n        dir: dir\n    };\n    fileKey = fileKey || 'file';\n    const request = sdk_1.Formio.pluginWait('preRequest', requestArgs)\n        .then(() => {\n        return sdk_1.Formio.pluginGet('fileRequest', requestArgs)\n            .then((result) => {\n            if (storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    if (uploadStartCallback) {\n                        uploadStartCallback();\n                    }\n                    return provider.uploadFile(file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback, multipartOptions);\n                }\n                else {\n                    throw ('Storage provider not found');\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return sdk_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\nsdk_1.Formio.prototype.downloadFile = function (file, options) {\n    const requestArgs = {\n        method: 'download',\n        file: file\n    };\n    const request = sdk_1.Formio.pluginWait('preRequest', requestArgs)\n        .then(() => {\n        return sdk_1.Formio.pluginGet('fileRequest', requestArgs)\n            .then((result) => {\n            if (file.storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', file.storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    return provider.downloadFile(file, options);\n                }\n                else {\n                    throw ('Storage provider not found');\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return sdk_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\nsdk_1.Formio.prototype.deleteFile = function (file, options) {\n    const requestArgs = {\n        method: 'delete',\n        file: file\n    };\n    const request = sdk_1.Formio.pluginWait('preRequest', requestArgs)\n        .then(() => {\n        return sdk_1.Formio.pluginGet('fileRequest', requestArgs)\n            .then((result) => {\n            if (file.storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', file.storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    return provider.deleteFile(file, options);\n                }\n                else {\n                    throw ('Storage provider not found');\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return sdk_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\n// Esnure we proxy the following methods to the FormioEmbed class.\n['setBaseUrl', 'setApiUrl', 'setAppUrl', 'setProjectUrl', 'setPathType', 'setLicense'].forEach((fn) => {\n    const baseFn = sdk_1.Formio[fn];\n    sdk_1.Formio[fn] = function (arg) {\n        const retVal = Embed_1.Formio[fn](arg, true);\n        return baseFn ? baseFn.call(this, arg) : retVal;\n    };\n});\n// For reverse compatability.\nsdk_1.Formio.Promise = Promise;\nsdk_1.Formio.formioReady = Embed_1.Formio.formioReady;\nsdk_1.Formio.config = Embed_1.Formio.config;\nsdk_1.Formio.builder = Embed_1.Formio.builder;\nsdk_1.Formio.Report = Embed_1.Formio.Report;\nsdk_1.Formio.Form = Embed_1.Formio.Form;\nsdk_1.Formio.FormBuilder = Embed_1.Formio.FormBuilder;\nsdk_1.Formio.use = Embed_1.Formio.use;\nsdk_1.Formio.createForm = Embed_1.Formio.createForm;\nsdk_1.Formio.submitDone = Embed_1.Formio.submitDone;\nsdk_1.Formio.addLibrary = Embed_1.Formio.addLibrary;\nsdk_1.Formio.addLoader = Embed_1.Formio.addLoader;\nsdk_1.Formio.addToGlobal = (global) => {\n    if (typeof global === 'object' && !global.Formio) {\n        global.Formio = sdk_1.Formio;\n    }\n};\nif (typeof __webpack_require__.g !== 'undefined') {\n    sdk_1.Formio.addToGlobal(__webpack_require__.g);\n}\nif (typeof window !== 'undefined') {\n    sdk_1.Formio.addToGlobal(window);\n}\nEmbed_1.Formio._formioReady(sdk_1.Formio);\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Formio.js?");
 
 /***/ }),