@formio/js 5.0.0-dev.5641.6eb7b96 → 5.0.0-dev.5641.d9ab3df

package/dist/formio.form.js

@@ -5317,7 +5317,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst vanilla_text_mask_1 = __webpack_require__(/*! @formio/vanilla-text-mask */ \"./node_modules/@formio/vanilla-text-mask/dist/vanillaTextMask.js\");\nconst inputmask_1 = __importDefault(__webpack_require__(/*! inputmask */ \"./node_modules/inputmask/dist/inputmask.js\"));\nconst FormioUtils = __importStar(__webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nclass TextFieldComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            label: 'Text Field',\n            key: 'textField',\n            type: 'textfield',\n            mask: false,\n            inputType: 'text',\n            inputFormat: 'plain',\n            inputMask: '',\n            displayMask: '',\n            tableView: true,\n            spellcheck: true,\n            truncateMultipleSpaces: false,\n            validate: {\n                minLength: '',\n                maxLength: '',\n                pattern: ''\n            }\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Text Field',\n            icon: 'terminal',\n            group: 'basic',\n            documentation: '/userguide/form-building/form-components#text-field',\n            weight: 0,\n            schema: TextFieldComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return TextFieldComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: [...super.conditionOperatorsSettings.operators, 'includes', 'notIncludes', 'endsWith', 'startsWith'], valueComponent(classComp) {\n                return Object.assign(Object.assign({}, classComp), { type: 'textfield' });\n            } });\n    }\n    static savedValueTypes(schema) {\n        return FormioUtils.getComponentSavedTypes(schema) || [FormioUtils.componentValueTypes.string];\n    }\n    get defaultSchema() {\n        return TextFieldComponent.schema();\n    }\n    get inputInfo() {\n        const info = super.inputInfo;\n        info.type = 'input';\n        if (this.component.hasOwnProperty('spellcheck')) {\n            info.attr.spellcheck = this.component.spellcheck;\n        }\n        if (this.component.mask) {\n            info.attr.type = 'password';\n        }\n        else {\n            info.attr.type = (this.component.inputType === 'password') ? 'password' : 'text';\n        }\n        info.changeEvent = (this.component.applyMaskOn === 'blur') ? 'blur' : 'input';\n        return info;\n    }\n    get emptyValue() {\n        return '';\n    }\n    constructor(component, options, data) {\n        var _a, _b, _c;\n        super(component, options, data);\n        const timezone = (((_a = this.component.widget) === null || _a === void 0 ? void 0 : _a.timezone) || this.options.timezone);\n        const displayInTimezone = (((_b = this.component.widget) === null || _b === void 0 ? void 0 : _b.displayInTimezone) || 'viewer');\n        if (((_c = this.component.widget) === null || _c === void 0 ? void 0 : _c.type) === 'calendar') {\n            this.component.widget = Object.assign(Object.assign({}, this.component.widget), { readOnly: this.options.readOnly, timezone,\n                displayInTimezone, locale: this.component.widget.locale || this.options.language, saveAs: 'text' });\n        }\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            valueMaskInput: 'single',\n        });\n        return super.attach(element);\n    }\n    /**\n     * Returns the mask value object (mutates value!).\n     * @param {any} [value] - The value to convert to a mask value.\n     * @param {any} [flags] - The flags to use when converting to a mask value.\n     * @returns {*} - The value as a mask value.\n     */\n    maskValue(value, flags = {}) {\n        // Convert it into the correct format.\n        if (!value || (typeof value !== 'object')) {\n            value = {\n                value,\n                maskName: this.component.inputMasks[0].label\n            };\n        }\n        // If no value is provided, then set the defaultValue.\n        if (!value.value) {\n            const defaultValue = flags.noDefault ? this.emptyValue : this.defaultValue;\n            value.value = Array.isArray(defaultValue) ? defaultValue[0] : defaultValue;\n        }\n        return value;\n    }\n    /**\n     * Normalize the value set in the data object.\n     * @param {any} value - The value to normalize.\n     * @param {any} flags - The flags to use when normalizing the value.\n     * @returns {*} - Returns the normalized value.\n     */\n    normalizeValue(value, flags = {}) {\n        if (!this.isMultipleMasksField) {\n            return super.normalizeValue(value);\n        }\n        if (Array.isArray(value)) {\n            return super.normalizeValue(value.map((val) => this.maskValue(val, flags)));\n        }\n        return super.normalizeValue(this.maskValue(value, flags));\n    }\n    /**\n     * Sets the value at this index.\n     * @param {number} index - The index to set the value at.\n     * @param {any} value - The value to set.\n     * @param {any} [flags] - The flags to use when setting the value.\n     * @returns {void}\n     */\n    setValueAt(index, value, flags = {}) {\n        if (!this.isMultipleMasksField) {\n            return super.setValueAt(index, value, flags);\n        }\n        value = this.maskValue(value, flags);\n        const textValue = value.value || '';\n        const textInput = this.refs.mask ? this.refs.mask[index] : null;\n        const maskInput = this.refs.select ? this.refs.select[index] : null;\n        const mask = this.getMaskPattern(value.maskName);\n        if (textInput && maskInput && mask) {\n            maskInput.value = value.maskName;\n            if (textInput.inputmask) {\n                this.setInputMask(textInput, mask);\n                textInput.inputmask.setValue(textValue);\n            }\n            else {\n                const placeholderChar = this.placeholderChar;\n                textInput.value = (0, vanilla_text_mask_1.conformToMask)(textValue, FormioUtils.getInputMask(mask), { placeholderChar }).conformedValue;\n            }\n        }\n        else {\n            return super.setValueAt(index, textValue, flags);\n        }\n    }\n    unmaskValue(value, format = this.component.displayMask) {\n        const mask = FormioUtils.getInputMask(format, this.placeholderChar);\n        return FormioUtils.unmaskValue(value, mask, this.placeholderChar);\n    }\n    /**\n     * Returns the value at this index.\n     * @param {number} index - The index to get the value from.\n     * @returns {*} - The value at the index.\n     */\n    getValueAt(index) {\n        var _a, _b;\n        if (!this.isMultipleMasksField) {\n            const value = super.getValueAt(index);\n            const valueMask = this.component.inputMask;\n            const displayMask = this.component.displayMask;\n            // If the input has only the valueMask or the displayMask is the same as the valueMask,\n            // just return the value which is already formatted\n            if (valueMask && !displayMask || displayMask === valueMask) {\n                return value;\n            }\n            // If there is only the displayMask, return the raw (unmasked) value\n            if (displayMask && !valueMask) {\n                return this.unmaskValue(value, displayMask);\n            }\n            if (displayMask && displayMask !== valueMask) {\n                return inputmask_1.default.format(inputmask_1.default.unmask(value, displayMask), valueMask);\n            }\n            if (((_a = this.refs.valueMaskInput) === null || _a === void 0 ? void 0 : _a.mask) && this.refs.valueMaskInput.mask.textMaskInputElement) {\n                this.refs.valueMaskInput.mask.textMaskInputElement.update(value);\n                return (_b = this.refs.valueMaskInput) === null || _b === void 0 ? void 0 : _b.value;\n            }\n            return value;\n        }\n        const textInput = this.refs.mask ? this.refs.mask[index] : null;\n        const maskInput = this.refs.select ? this.refs.select[index] : null;\n        return {\n            value: textInput ? textInput.value : undefined,\n            maskName: maskInput ? maskInput.value : undefined\n        };\n    }\n    checkInputMaskValue(inputMask) {\n        let valid = true;\n        const maskValues = lodash_1.default.values(inputMask.split('').reduce((acc, el, i, mask) => {\n            var _a;\n            if (el === '{' || el === '}') {\n                if (mask[i + 1] === '{' || mask[i + 1] === '}') {\n                    valid = false;\n                }\n                acc[el] = ((_a = acc[el]) !== null && _a !== void 0 ? _a : 0) + 1;\n            }\n            return acc;\n        }, {}));\n        if (maskValues[0] !== maskValues[1]) {\n            valid = false;\n        }\n        return valid;\n    }\n    setInputMask(input, inputMask, usePlaceholder) {\n        if (this.type !== 'textfield') {\n            super.setInputMask(input, inputMask, usePlaceholder);\n            return;\n        }\n        inputMask = inputMask || this.component.displayMask || this.component.inputMask;\n        const mask = FormioUtils.getInputMask(inputMask, this.placeholderChar);\n        this.defaultMask = mask;\n        if (input && inputMask) {\n            try {\n                //remove previous mask\n                if (input.mask) {\n                    input.mask.remove();\n                }\n                if (this.checkInputMaskValue(inputMask)) {\n                    input.mask = new inputmask_1.default(inputMask, {\n                        clearMaskOnLostFocus: !!this.component.placeholder,\n                        showMaskOnHover: !this.component.placeholder,\n                        placeholder: this.placeholderChar || '',\n                    }).mask(input);\n                }\n            }\n            catch (e) {\n                console.warn(e);\n            }\n            if (mask.numeric) {\n                input.setAttribute('pattern', '\\\\d*');\n            }\n            if (this.component.placeholder) {\n                input.setAttribute('placeholder', this.component.placeholder);\n            }\n        }\n    }\n    isHtmlRenderMode() {\n        return super.isHtmlRenderMode() ||\n            ((this.options.readOnly || this.disabled) &&\n                this.component.inputFormat === 'html' &&\n                this.type === 'textfield');\n    }\n    isEmpty(value = this.dataValue) {\n        if (!this.isMultipleMasksField) {\n            return super.isEmpty((value || '').toString().trim());\n        }\n        return super.isEmpty(value) || (this.component.multiple ? value.length === 0 : (!value.maskName || !value.value));\n    }\n    truncateMultipleSpaces(value) {\n        if (value) {\n            return value.trim().replace(/\\s{2,}/g, ' ');\n        }\n        return value;\n    }\n    get validationValue() {\n        const value = super.validationValue;\n        if (value && this.component.truncateMultipleSpaces) {\n            return this.truncateMultipleSpaces(value);\n        }\n        return value;\n    }\n    beforeSubmit() {\n        let value = this.dataValue;\n        if (!this.component.truncateMultipleSpaces || !value) {\n            return Promise.resolve(value);\n        }\n        value = this.truncateMultipleSpaces(value);\n        this.dataValue = value;\n        return Promise.resolve(value).then(() => super.beforeSubmit());\n    }\n    getValueAsString(value, options) {\n        if ((options === null || options === void 0 ? void 0 : options.email) && this.visible && !this.skipInEmail && lodash_1.default.isObject(value)) {\n            const result = (`\n        <table border=\"1\" style=\"width:100%\">\n          <tbody>\n          <tr>\n            <th style=\"padding: 5px 10px;\">${value.maskName}</th>\n            <td style=\"width:100%;padding:5px 10px;\">${value.value}</td>\n          </tr>\n          </tbody>\n        </table>\n      `);\n            return result;\n        }\n        if (value && this.component.inputFormat === 'plain' && /<[^<>]+>/g.test(value)) {\n            value = value.replaceAll('<', '&lt;').replaceAll('>', '&gt;');\n        }\n        return super.getValueAsString(value, options);\n    }\n}\nexports[\"default\"] = TextFieldComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/textfield/TextField.js?");
+eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst vanilla_text_mask_1 = __webpack_require__(/*! @formio/vanilla-text-mask */ \"./node_modules/@formio/vanilla-text-mask/dist/vanillaTextMask.js\");\nconst inputmask_1 = __importDefault(__webpack_require__(/*! inputmask */ \"./node_modules/inputmask/dist/inputmask.js\"));\nconst FormioUtils = __importStar(__webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nclass TextFieldComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            label: 'Text Field',\n            key: 'textField',\n            type: 'textfield',\n            mask: false,\n            inputType: 'text',\n            inputFormat: 'plain',\n            inputMask: '',\n            displayMask: '',\n            tableView: true,\n            spellcheck: true,\n            truncateMultipleSpaces: false,\n            validate: {\n                minLength: '',\n                maxLength: '',\n                pattern: ''\n            }\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Text Field',\n            icon: 'terminal',\n            group: 'basic',\n            documentation: '/userguide/form-building/form-components#text-field',\n            weight: 0,\n            schema: TextFieldComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return TextFieldComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: [...super.conditionOperatorsSettings.operators, 'includes', 'notIncludes', 'endsWith', 'startsWith'], valueComponent(classComp) {\n                return Object.assign(Object.assign({}, classComp), { type: 'textfield' });\n            } });\n    }\n    static savedValueTypes(schema) {\n        return FormioUtils.getComponentSavedTypes(schema) || [FormioUtils.componentValueTypes.string];\n    }\n    get defaultSchema() {\n        return TextFieldComponent.schema();\n    }\n    get inputInfo() {\n        const info = super.inputInfo;\n        info.type = 'input';\n        if (this.component.hasOwnProperty('spellcheck')) {\n            info.attr.spellcheck = this.component.spellcheck;\n        }\n        if (this.component.mask) {\n            info.attr.type = 'password';\n        }\n        else {\n            info.attr.type = (this.component.inputType === 'password') ? 'password' : 'text';\n        }\n        info.changeEvent = (this.component.applyMaskOn === 'blur') ? 'blur' : 'input';\n        return info;\n    }\n    get emptyValue() {\n        return '';\n    }\n    constructor(component, options, data) {\n        var _a, _b, _c;\n        super(component, options, data);\n        const timezone = (((_a = this.component.widget) === null || _a === void 0 ? void 0 : _a.timezone) || this.options.timezone);\n        const displayInTimezone = (((_b = this.component.widget) === null || _b === void 0 ? void 0 : _b.displayInTimezone) || 'viewer');\n        if (((_c = this.component.widget) === null || _c === void 0 ? void 0 : _c.type) === 'calendar') {\n            this.component.widget = Object.assign(Object.assign({}, this.component.widget), { readOnly: this.options.readOnly, timezone,\n                displayInTimezone, locale: this.component.widget.locale || this.options.language, saveAs: 'text' });\n        }\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            valueMaskInput: 'single',\n        });\n        return super.attach(element);\n    }\n    /**\n     * Returns the mask value object (mutates value!).\n     * @param {any} [value] - The value to convert to a mask value.\n     * @param {any} [flags] - The flags to use when converting to a mask value.\n     * @returns {*} - The value as a mask value.\n     */\n    maskValue(value, flags = {}) {\n        // Convert it into the correct format.\n        if (!value || (typeof value !== 'object')) {\n            value = {\n                value,\n                maskName: this.component.inputMasks[0].label\n            };\n        }\n        // If no value is provided, then set the defaultValue.\n        if (!value.value) {\n            const defaultValue = flags.noDefault ? this.emptyValue : this.defaultValue;\n            value.value = Array.isArray(defaultValue) ? defaultValue[0] : defaultValue;\n        }\n        return value;\n    }\n    /**\n     * Normalize the value set in the data object.\n     * @param {any} value - The value to normalize.\n     * @param {any} flags - The flags to use when normalizing the value.\n     * @returns {*} - Returns the normalized value.\n     */\n    normalizeValue(value, flags = {}) {\n        if (!this.isMultipleMasksField) {\n            return super.normalizeValue(value);\n        }\n        if (Array.isArray(value)) {\n            return super.normalizeValue(value.map((val) => this.maskValue(val, flags)));\n        }\n        return super.normalizeValue(this.maskValue(value, flags));\n    }\n    /**\n     * Sets the value at this index.\n     * @param {number} index - The index to set the value at.\n     * @param {any} value - The value to set.\n     * @param {any} [flags] - The flags to use when setting the value.\n     * @returns {void}\n     */\n    setValueAt(index, value, flags = {}) {\n        if (!this.isMultipleMasksField) {\n            return super.setValueAt(index, value, flags);\n        }\n        value = this.maskValue(value, flags);\n        const textValue = value.value || '';\n        const textInput = this.refs.mask ? this.refs.mask[index] : null;\n        const maskInput = this.refs.select ? this.refs.select[index] : null;\n        const mask = this.getMaskPattern(value.maskName);\n        if (textInput && maskInput && mask) {\n            // We need to set the maskInput (select dropdown) value before calling inputmask.setValue because, this\n            // function will trigger a \"change\" event, which was calling updateValue setting the mask type to an incorrect value.\n            maskInput.value = value.maskName;\n            if (textInput.inputmask) {\n                this.setInputMask(textInput, mask);\n                textInput.inputmask.setValue(textValue);\n            }\n            else {\n                const placeholderChar = this.placeholderChar;\n                textInput.value = (0, vanilla_text_mask_1.conformToMask)(textValue, FormioUtils.getInputMask(mask), { placeholderChar }).conformedValue;\n            }\n        }\n        else {\n            return super.setValueAt(index, textValue, flags);\n        }\n    }\n    unmaskValue(value, format = this.component.displayMask) {\n        const mask = FormioUtils.getInputMask(format, this.placeholderChar);\n        return FormioUtils.unmaskValue(value, mask, this.placeholderChar);\n    }\n    /**\n     * Returns the value at this index.\n     * @param {number} index - The index to get the value from.\n     * @returns {*} - The value at the index.\n     */\n    getValueAt(index) {\n        var _a, _b;\n        if (!this.isMultipleMasksField) {\n            const value = super.getValueAt(index);\n            const valueMask = this.component.inputMask;\n            const displayMask = this.component.displayMask;\n            // If the input has only the valueMask or the displayMask is the same as the valueMask,\n            // just return the value which is already formatted\n            if (valueMask && !displayMask || displayMask === valueMask) {\n                return value;\n            }\n            // If there is only the displayMask, return the raw (unmasked) value\n            if (displayMask && !valueMask) {\n                return this.unmaskValue(value, displayMask);\n            }\n            if (displayMask && displayMask !== valueMask) {\n                return inputmask_1.default.format(inputmask_1.default.unmask(value, displayMask), valueMask);\n            }\n            if (((_a = this.refs.valueMaskInput) === null || _a === void 0 ? void 0 : _a.mask) && this.refs.valueMaskInput.mask.textMaskInputElement) {\n                this.refs.valueMaskInput.mask.textMaskInputElement.update(value);\n                return (_b = this.refs.valueMaskInput) === null || _b === void 0 ? void 0 : _b.value;\n            }\n            return value;\n        }\n        const textInput = this.refs.mask ? this.refs.mask[index] : null;\n        const maskInput = this.refs.select ? this.refs.select[index] : null;\n        return {\n            value: textInput ? textInput.value : undefined,\n            maskName: maskInput ? maskInput.value : undefined\n        };\n    }\n    checkInputMaskValue(inputMask) {\n        let valid = true;\n        const maskValues = lodash_1.default.values(inputMask.split('').reduce((acc, el, i, mask) => {\n            var _a;\n            if (el === '{' || el === '}') {\n                if (mask[i + 1] === '{' || mask[i + 1] === '}') {\n                    valid = false;\n                }\n                acc[el] = ((_a = acc[el]) !== null && _a !== void 0 ? _a : 0) + 1;\n            }\n            return acc;\n        }, {}));\n        if (maskValues[0] !== maskValues[1]) {\n            valid = false;\n        }\n        return valid;\n    }\n    setInputMask(input, inputMask, usePlaceholder) {\n        if (this.type !== 'textfield') {\n            super.setInputMask(input, inputMask, usePlaceholder);\n            return;\n        }\n        inputMask = inputMask || this.component.displayMask || this.component.inputMask;\n        const mask = FormioUtils.getInputMask(inputMask, this.placeholderChar);\n        this.defaultMask = mask;\n        if (input && inputMask) {\n            try {\n                //remove previous mask\n                if (input.mask) {\n                    input.mask.remove();\n                }\n                if (this.checkInputMaskValue(inputMask)) {\n                    input.mask = new inputmask_1.default(inputMask, {\n                        clearMaskOnLostFocus: !!this.component.placeholder,\n                        showMaskOnHover: !this.component.placeholder,\n                        placeholder: this.placeholderChar || '',\n                    }).mask(input);\n                }\n            }\n            catch (e) {\n                console.warn(e);\n            }\n            if (mask.numeric) {\n                input.setAttribute('pattern', '\\\\d*');\n            }\n            if (this.component.placeholder) {\n                input.setAttribute('placeholder', this.component.placeholder);\n            }\n        }\n    }\n    isHtmlRenderMode() {\n        return super.isHtmlRenderMode() ||\n            ((this.options.readOnly || this.disabled) &&\n                this.component.inputFormat === 'html' &&\n                this.type === 'textfield');\n    }\n    isEmpty(value = this.dataValue) {\n        if (!this.isMultipleMasksField) {\n            return super.isEmpty((value || '').toString().trim());\n        }\n        return super.isEmpty(value) || (this.component.multiple ? value.length === 0 : (!value.maskName || !value.value));\n    }\n    truncateMultipleSpaces(value) {\n        if (value) {\n            return value.trim().replace(/\\s{2,}/g, ' ');\n        }\n        return value;\n    }\n    get validationValue() {\n        const value = super.validationValue;\n        if (value && this.component.truncateMultipleSpaces) {\n            return this.truncateMultipleSpaces(value);\n        }\n        return value;\n    }\n    beforeSubmit() {\n        let value = this.dataValue;\n        if (!this.component.truncateMultipleSpaces || !value) {\n            return Promise.resolve(value);\n        }\n        value = this.truncateMultipleSpaces(value);\n        this.dataValue = value;\n        return Promise.resolve(value).then(() => super.beforeSubmit());\n    }\n    getValueAsString(value, options) {\n        if ((options === null || options === void 0 ? void 0 : options.email) && this.visible && !this.skipInEmail && lodash_1.default.isObject(value)) {\n            const result = (`\n        <table border=\"1\" style=\"width:100%\">\n          <tbody>\n          <tr>\n            <th style=\"padding: 5px 10px;\">${value.maskName}</th>\n            <td style=\"width:100%;padding:5px 10px;\">${value.value}</td>\n          </tr>\n          </tbody>\n        </table>\n      `);\n            return result;\n        }\n        if (value && this.component.inputFormat === 'plain' && /<[^<>]+>/g.test(value)) {\n            value = value.replaceAll('<', '&lt;').replaceAll('>', '&gt;');\n        }\n        return super.getValueAsString(value, options);\n    }\n}\nexports[\"default\"] = TextFieldComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/textfield/TextField.js?");
 
 /***/ }),
 

package/dist/formio.full.js

@@ -7250,7 +7250,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst vanilla_text_mask_1 = __webpack_require__(/*! @formio/vanilla-text-mask */ \"./node_modules/@formio/vanilla-text-mask/dist/vanillaTextMask.js\");\nconst inputmask_1 = __importDefault(__webpack_require__(/*! inputmask */ \"./node_modules/inputmask/dist/inputmask.js\"));\nconst FormioUtils = __importStar(__webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nclass TextFieldComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            label: 'Text Field',\n            key: 'textField',\n            type: 'textfield',\n            mask: false,\n            inputType: 'text',\n            inputFormat: 'plain',\n            inputMask: '',\n            displayMask: '',\n            tableView: true,\n            spellcheck: true,\n            truncateMultipleSpaces: false,\n            validate: {\n                minLength: '',\n                maxLength: '',\n                pattern: ''\n            }\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Text Field',\n            icon: 'terminal',\n            group: 'basic',\n            documentation: '/userguide/form-building/form-components#text-field',\n            weight: 0,\n            schema: TextFieldComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return TextFieldComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: [...super.conditionOperatorsSettings.operators, 'includes', 'notIncludes', 'endsWith', 'startsWith'], valueComponent(classComp) {\n                return Object.assign(Object.assign({}, classComp), { type: 'textfield' });\n            } });\n    }\n    static savedValueTypes(schema) {\n        return FormioUtils.getComponentSavedTypes(schema) || [FormioUtils.componentValueTypes.string];\n    }\n    get defaultSchema() {\n        return TextFieldComponent.schema();\n    }\n    get inputInfo() {\n        const info = super.inputInfo;\n        info.type = 'input';\n        if (this.component.hasOwnProperty('spellcheck')) {\n            info.attr.spellcheck = this.component.spellcheck;\n        }\n        if (this.component.mask) {\n            info.attr.type = 'password';\n        }\n        else {\n            info.attr.type = (this.component.inputType === 'password') ? 'password' : 'text';\n        }\n        info.changeEvent = (this.component.applyMaskOn === 'blur') ? 'blur' : 'input';\n        return info;\n    }\n    get emptyValue() {\n        return '';\n    }\n    constructor(component, options, data) {\n        var _a, _b, _c;\n        super(component, options, data);\n        const timezone = (((_a = this.component.widget) === null || _a === void 0 ? void 0 : _a.timezone) || this.options.timezone);\n        const displayInTimezone = (((_b = this.component.widget) === null || _b === void 0 ? void 0 : _b.displayInTimezone) || 'viewer');\n        if (((_c = this.component.widget) === null || _c === void 0 ? void 0 : _c.type) === 'calendar') {\n            this.component.widget = Object.assign(Object.assign({}, this.component.widget), { readOnly: this.options.readOnly, timezone,\n                displayInTimezone, locale: this.component.widget.locale || this.options.language, saveAs: 'text' });\n        }\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            valueMaskInput: 'single',\n        });\n        return super.attach(element);\n    }\n    /**\n     * Returns the mask value object (mutates value!).\n     * @param {any} [value] - The value to convert to a mask value.\n     * @param {any} [flags] - The flags to use when converting to a mask value.\n     * @returns {*} - The value as a mask value.\n     */\n    maskValue(value, flags = {}) {\n        // Convert it into the correct format.\n        if (!value || (typeof value !== 'object')) {\n            value = {\n                value,\n                maskName: this.component.inputMasks[0].label\n            };\n        }\n        // If no value is provided, then set the defaultValue.\n        if (!value.value) {\n            const defaultValue = flags.noDefault ? this.emptyValue : this.defaultValue;\n            value.value = Array.isArray(defaultValue) ? defaultValue[0] : defaultValue;\n        }\n        return value;\n    }\n    /**\n     * Normalize the value set in the data object.\n     * @param {any} value - The value to normalize.\n     * @param {any} flags - The flags to use when normalizing the value.\n     * @returns {*} - Returns the normalized value.\n     */\n    normalizeValue(value, flags = {}) {\n        if (!this.isMultipleMasksField) {\n            return super.normalizeValue(value);\n        }\n        if (Array.isArray(value)) {\n            return super.normalizeValue(value.map((val) => this.maskValue(val, flags)));\n        }\n        return super.normalizeValue(this.maskValue(value, flags));\n    }\n    /**\n     * Sets the value at this index.\n     * @param {number} index - The index to set the value at.\n     * @param {any} value - The value to set.\n     * @param {any} [flags] - The flags to use when setting the value.\n     * @returns {void}\n     */\n    setValueAt(index, value, flags = {}) {\n        if (!this.isMultipleMasksField) {\n            return super.setValueAt(index, value, flags);\n        }\n        value = this.maskValue(value, flags);\n        const textValue = value.value || '';\n        const textInput = this.refs.mask ? this.refs.mask[index] : null;\n        const maskInput = this.refs.select ? this.refs.select[index] : null;\n        const mask = this.getMaskPattern(value.maskName);\n        if (textInput && maskInput && mask) {\n            maskInput.value = value.maskName;\n            if (textInput.inputmask) {\n                this.setInputMask(textInput, mask);\n                textInput.inputmask.setValue(textValue);\n            }\n            else {\n                const placeholderChar = this.placeholderChar;\n                textInput.value = (0, vanilla_text_mask_1.conformToMask)(textValue, FormioUtils.getInputMask(mask), { placeholderChar }).conformedValue;\n            }\n        }\n        else {\n            return super.setValueAt(index, textValue, flags);\n        }\n    }\n    unmaskValue(value, format = this.component.displayMask) {\n        const mask = FormioUtils.getInputMask(format, this.placeholderChar);\n        return FormioUtils.unmaskValue(value, mask, this.placeholderChar);\n    }\n    /**\n     * Returns the value at this index.\n     * @param {number} index - The index to get the value from.\n     * @returns {*} - The value at the index.\n     */\n    getValueAt(index) {\n        var _a, _b;\n        if (!this.isMultipleMasksField) {\n            const value = super.getValueAt(index);\n            const valueMask = this.component.inputMask;\n            const displayMask = this.component.displayMask;\n            // If the input has only the valueMask or the displayMask is the same as the valueMask,\n            // just return the value which is already formatted\n            if (valueMask && !displayMask || displayMask === valueMask) {\n                return value;\n            }\n            // If there is only the displayMask, return the raw (unmasked) value\n            if (displayMask && !valueMask) {\n                return this.unmaskValue(value, displayMask);\n            }\n            if (displayMask && displayMask !== valueMask) {\n                return inputmask_1.default.format(inputmask_1.default.unmask(value, displayMask), valueMask);\n            }\n            if (((_a = this.refs.valueMaskInput) === null || _a === void 0 ? void 0 : _a.mask) && this.refs.valueMaskInput.mask.textMaskInputElement) {\n                this.refs.valueMaskInput.mask.textMaskInputElement.update(value);\n                return (_b = this.refs.valueMaskInput) === null || _b === void 0 ? void 0 : _b.value;\n            }\n            return value;\n        }\n        const textInput = this.refs.mask ? this.refs.mask[index] : null;\n        const maskInput = this.refs.select ? this.refs.select[index] : null;\n        return {\n            value: textInput ? textInput.value : undefined,\n            maskName: maskInput ? maskInput.value : undefined\n        };\n    }\n    checkInputMaskValue(inputMask) {\n        let valid = true;\n        const maskValues = lodash_1.default.values(inputMask.split('').reduce((acc, el, i, mask) => {\n            var _a;\n            if (el === '{' || el === '}') {\n                if (mask[i + 1] === '{' || mask[i + 1] === '}') {\n                    valid = false;\n                }\n                acc[el] = ((_a = acc[el]) !== null && _a !== void 0 ? _a : 0) + 1;\n            }\n            return acc;\n        }, {}));\n        if (maskValues[0] !== maskValues[1]) {\n            valid = false;\n        }\n        return valid;\n    }\n    setInputMask(input, inputMask, usePlaceholder) {\n        if (this.type !== 'textfield') {\n            super.setInputMask(input, inputMask, usePlaceholder);\n            return;\n        }\n        inputMask = inputMask || this.component.displayMask || this.component.inputMask;\n        const mask = FormioUtils.getInputMask(inputMask, this.placeholderChar);\n        this.defaultMask = mask;\n        if (input && inputMask) {\n            try {\n                //remove previous mask\n                if (input.mask) {\n                    input.mask.remove();\n                }\n                if (this.checkInputMaskValue(inputMask)) {\n                    input.mask = new inputmask_1.default(inputMask, {\n                        clearMaskOnLostFocus: !!this.component.placeholder,\n                        showMaskOnHover: !this.component.placeholder,\n                        placeholder: this.placeholderChar || '',\n                    }).mask(input);\n                }\n            }\n            catch (e) {\n                console.warn(e);\n            }\n            if (mask.numeric) {\n                input.setAttribute('pattern', '\\\\d*');\n            }\n            if (this.component.placeholder) {\n                input.setAttribute('placeholder', this.component.placeholder);\n            }\n        }\n    }\n    isHtmlRenderMode() {\n        return super.isHtmlRenderMode() ||\n            ((this.options.readOnly || this.disabled) &&\n                this.component.inputFormat === 'html' &&\n                this.type === 'textfield');\n    }\n    isEmpty(value = this.dataValue) {\n        if (!this.isMultipleMasksField) {\n            return super.isEmpty((value || '').toString().trim());\n        }\n        return super.isEmpty(value) || (this.component.multiple ? value.length === 0 : (!value.maskName || !value.value));\n    }\n    truncateMultipleSpaces(value) {\n        if (value) {\n            return value.trim().replace(/\\s{2,}/g, ' ');\n        }\n        return value;\n    }\n    get validationValue() {\n        const value = super.validationValue;\n        if (value && this.component.truncateMultipleSpaces) {\n            return this.truncateMultipleSpaces(value);\n        }\n        return value;\n    }\n    beforeSubmit() {\n        let value = this.dataValue;\n        if (!this.component.truncateMultipleSpaces || !value) {\n            return Promise.resolve(value);\n        }\n        value = this.truncateMultipleSpaces(value);\n        this.dataValue = value;\n        return Promise.resolve(value).then(() => super.beforeSubmit());\n    }\n    getValueAsString(value, options) {\n        if ((options === null || options === void 0 ? void 0 : options.email) && this.visible && !this.skipInEmail && lodash_1.default.isObject(value)) {\n            const result = (`\n        <table border=\"1\" style=\"width:100%\">\n          <tbody>\n          <tr>\n            <th style=\"padding: 5px 10px;\">${value.maskName}</th>\n            <td style=\"width:100%;padding:5px 10px;\">${value.value}</td>\n          </tr>\n          </tbody>\n        </table>\n      `);\n            return result;\n        }\n        if (value && this.component.inputFormat === 'plain' && /<[^<>]+>/g.test(value)) {\n            value = value.replaceAll('<', '&lt;').replaceAll('>', '&gt;');\n        }\n        return super.getValueAsString(value, options);\n    }\n}\nexports[\"default\"] = TextFieldComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/textfield/TextField.js?");
+eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst vanilla_text_mask_1 = __webpack_require__(/*! @formio/vanilla-text-mask */ \"./node_modules/@formio/vanilla-text-mask/dist/vanillaTextMask.js\");\nconst inputmask_1 = __importDefault(__webpack_require__(/*! inputmask */ \"./node_modules/inputmask/dist/inputmask.js\"));\nconst FormioUtils = __importStar(__webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nclass TextFieldComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            label: 'Text Field',\n            key: 'textField',\n            type: 'textfield',\n            mask: false,\n            inputType: 'text',\n            inputFormat: 'plain',\n            inputMask: '',\n            displayMask: '',\n            tableView: true,\n            spellcheck: true,\n            truncateMultipleSpaces: false,\n            validate: {\n                minLength: '',\n                maxLength: '',\n                pattern: ''\n            }\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Text Field',\n            icon: 'terminal',\n            group: 'basic',\n            documentation: '/userguide/form-building/form-components#text-field',\n            weight: 0,\n            schema: TextFieldComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return TextFieldComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: [...super.conditionOperatorsSettings.operators, 'includes', 'notIncludes', 'endsWith', 'startsWith'], valueComponent(classComp) {\n                return Object.assign(Object.assign({}, classComp), { type: 'textfield' });\n            } });\n    }\n    static savedValueTypes(schema) {\n        return FormioUtils.getComponentSavedTypes(schema) || [FormioUtils.componentValueTypes.string];\n    }\n    get defaultSchema() {\n        return TextFieldComponent.schema();\n    }\n    get inputInfo() {\n        const info = super.inputInfo;\n        info.type = 'input';\n        if (this.component.hasOwnProperty('spellcheck')) {\n            info.attr.spellcheck = this.component.spellcheck;\n        }\n        if (this.component.mask) {\n            info.attr.type = 'password';\n        }\n        else {\n            info.attr.type = (this.component.inputType === 'password') ? 'password' : 'text';\n        }\n        info.changeEvent = (this.component.applyMaskOn === 'blur') ? 'blur' : 'input';\n        return info;\n    }\n    get emptyValue() {\n        return '';\n    }\n    constructor(component, options, data) {\n        var _a, _b, _c;\n        super(component, options, data);\n        const timezone = (((_a = this.component.widget) === null || _a === void 0 ? void 0 : _a.timezone) || this.options.timezone);\n        const displayInTimezone = (((_b = this.component.widget) === null || _b === void 0 ? void 0 : _b.displayInTimezone) || 'viewer');\n        if (((_c = this.component.widget) === null || _c === void 0 ? void 0 : _c.type) === 'calendar') {\n            this.component.widget = Object.assign(Object.assign({}, this.component.widget), { readOnly: this.options.readOnly, timezone,\n                displayInTimezone, locale: this.component.widget.locale || this.options.language, saveAs: 'text' });\n        }\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            valueMaskInput: 'single',\n        });\n        return super.attach(element);\n    }\n    /**\n     * Returns the mask value object (mutates value!).\n     * @param {any} [value] - The value to convert to a mask value.\n     * @param {any} [flags] - The flags to use when converting to a mask value.\n     * @returns {*} - The value as a mask value.\n     */\n    maskValue(value, flags = {}) {\n        // Convert it into the correct format.\n        if (!value || (typeof value !== 'object')) {\n            value = {\n                value,\n                maskName: this.component.inputMasks[0].label\n            };\n        }\n        // If no value is provided, then set the defaultValue.\n        if (!value.value) {\n            const defaultValue = flags.noDefault ? this.emptyValue : this.defaultValue;\n            value.value = Array.isArray(defaultValue) ? defaultValue[0] : defaultValue;\n        }\n        return value;\n    }\n    /**\n     * Normalize the value set in the data object.\n     * @param {any} value - The value to normalize.\n     * @param {any} flags - The flags to use when normalizing the value.\n     * @returns {*} - Returns the normalized value.\n     */\n    normalizeValue(value, flags = {}) {\n        if (!this.isMultipleMasksField) {\n            return super.normalizeValue(value);\n        }\n        if (Array.isArray(value)) {\n            return super.normalizeValue(value.map((val) => this.maskValue(val, flags)));\n        }\n        return super.normalizeValue(this.maskValue(value, flags));\n    }\n    /**\n     * Sets the value at this index.\n     * @param {number} index - The index to set the value at.\n     * @param {any} value - The value to set.\n     * @param {any} [flags] - The flags to use when setting the value.\n     * @returns {void}\n     */\n    setValueAt(index, value, flags = {}) {\n        if (!this.isMultipleMasksField) {\n            return super.setValueAt(index, value, flags);\n        }\n        value = this.maskValue(value, flags);\n        const textValue = value.value || '';\n        const textInput = this.refs.mask ? this.refs.mask[index] : null;\n        const maskInput = this.refs.select ? this.refs.select[index] : null;\n        const mask = this.getMaskPattern(value.maskName);\n        if (textInput && maskInput && mask) {\n            // We need to set the maskInput (select dropdown) value before calling inputmask.setValue because, this\n            // function will trigger a \"change\" event, which was calling updateValue setting the mask type to an incorrect value.\n            maskInput.value = value.maskName;\n            if (textInput.inputmask) {\n                this.setInputMask(textInput, mask);\n                textInput.inputmask.setValue(textValue);\n            }\n            else {\n                const placeholderChar = this.placeholderChar;\n                textInput.value = (0, vanilla_text_mask_1.conformToMask)(textValue, FormioUtils.getInputMask(mask), { placeholderChar }).conformedValue;\n            }\n        }\n        else {\n            return super.setValueAt(index, textValue, flags);\n        }\n    }\n    unmaskValue(value, format = this.component.displayMask) {\n        const mask = FormioUtils.getInputMask(format, this.placeholderChar);\n        return FormioUtils.unmaskValue(value, mask, this.placeholderChar);\n    }\n    /**\n     * Returns the value at this index.\n     * @param {number} index - The index to get the value from.\n     * @returns {*} - The value at the index.\n     */\n    getValueAt(index) {\n        var _a, _b;\n        if (!this.isMultipleMasksField) {\n            const value = super.getValueAt(index);\n            const valueMask = this.component.inputMask;\n            const displayMask = this.component.displayMask;\n            // If the input has only the valueMask or the displayMask is the same as the valueMask,\n            // just return the value which is already formatted\n            if (valueMask && !displayMask || displayMask === valueMask) {\n                return value;\n            }\n            // If there is only the displayMask, return the raw (unmasked) value\n            if (displayMask && !valueMask) {\n                return this.unmaskValue(value, displayMask);\n            }\n            if (displayMask && displayMask !== valueMask) {\n                return inputmask_1.default.format(inputmask_1.default.unmask(value, displayMask), valueMask);\n            }\n            if (((_a = this.refs.valueMaskInput) === null || _a === void 0 ? void 0 : _a.mask) && this.refs.valueMaskInput.mask.textMaskInputElement) {\n                this.refs.valueMaskInput.mask.textMaskInputElement.update(value);\n                return (_b = this.refs.valueMaskInput) === null || _b === void 0 ? void 0 : _b.value;\n            }\n            return value;\n        }\n        const textInput = this.refs.mask ? this.refs.mask[index] : null;\n        const maskInput = this.refs.select ? this.refs.select[index] : null;\n        return {\n            value: textInput ? textInput.value : undefined,\n            maskName: maskInput ? maskInput.value : undefined\n        };\n    }\n    checkInputMaskValue(inputMask) {\n        let valid = true;\n        const maskValues = lodash_1.default.values(inputMask.split('').reduce((acc, el, i, mask) => {\n            var _a;\n            if (el === '{' || el === '}') {\n                if (mask[i + 1] === '{' || mask[i + 1] === '}') {\n                    valid = false;\n                }\n                acc[el] = ((_a = acc[el]) !== null && _a !== void 0 ? _a : 0) + 1;\n            }\n            return acc;\n        }, {}));\n        if (maskValues[0] !== maskValues[1]) {\n            valid = false;\n        }\n        return valid;\n    }\n    setInputMask(input, inputMask, usePlaceholder) {\n        if (this.type !== 'textfield') {\n            super.setInputMask(input, inputMask, usePlaceholder);\n            return;\n        }\n        inputMask = inputMask || this.component.displayMask || this.component.inputMask;\n        const mask = FormioUtils.getInputMask(inputMask, this.placeholderChar);\n        this.defaultMask = mask;\n        if (input && inputMask) {\n            try {\n                //remove previous mask\n                if (input.mask) {\n                    input.mask.remove();\n                }\n                if (this.checkInputMaskValue(inputMask)) {\n                    input.mask = new inputmask_1.default(inputMask, {\n                        clearMaskOnLostFocus: !!this.component.placeholder,\n                        showMaskOnHover: !this.component.placeholder,\n                        placeholder: this.placeholderChar || '',\n                    }).mask(input);\n                }\n            }\n            catch (e) {\n                console.warn(e);\n            }\n            if (mask.numeric) {\n                input.setAttribute('pattern', '\\\\d*');\n            }\n            if (this.component.placeholder) {\n                input.setAttribute('placeholder', this.component.placeholder);\n            }\n        }\n    }\n    isHtmlRenderMode() {\n        return super.isHtmlRenderMode() ||\n            ((this.options.readOnly || this.disabled) &&\n                this.component.inputFormat === 'html' &&\n                this.type === 'textfield');\n    }\n    isEmpty(value = this.dataValue) {\n        if (!this.isMultipleMasksField) {\n            return super.isEmpty((value || '').toString().trim());\n        }\n        return super.isEmpty(value) || (this.component.multiple ? value.length === 0 : (!value.maskName || !value.value));\n    }\n    truncateMultipleSpaces(value) {\n        if (value) {\n            return value.trim().replace(/\\s{2,}/g, ' ');\n        }\n        return value;\n    }\n    get validationValue() {\n        const value = super.validationValue;\n        if (value && this.component.truncateMultipleSpaces) {\n            return this.truncateMultipleSpaces(value);\n        }\n        return value;\n    }\n    beforeSubmit() {\n        let value = this.dataValue;\n        if (!this.component.truncateMultipleSpaces || !value) {\n            return Promise.resolve(value);\n        }\n        value = this.truncateMultipleSpaces(value);\n        this.dataValue = value;\n        return Promise.resolve(value).then(() => super.beforeSubmit());\n    }\n    getValueAsString(value, options) {\n        if ((options === null || options === void 0 ? void 0 : options.email) && this.visible && !this.skipInEmail && lodash_1.default.isObject(value)) {\n            const result = (`\n        <table border=\"1\" style=\"width:100%\">\n          <tbody>\n          <tr>\n            <th style=\"padding: 5px 10px;\">${value.maskName}</th>\n            <td style=\"width:100%;padding:5px 10px;\">${value.value}</td>\n          </tr>\n          </tbody>\n        </table>\n      `);\n            return result;\n        }\n        if (value && this.component.inputFormat === 'plain' && /<[^<>]+>/g.test(value)) {\n            value = value.replaceAll('<', '&lt;').replaceAll('>', '&gt;');\n        }\n        return super.getValueAsString(value, options);\n    }\n}\nexports[\"default\"] = TextFieldComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/textfield/TextField.js?");
 
 /***/ }),
 

package/lib/cjs/components/textfield/TextField.js

@@ -163,6 +163,8 @@ class TextFieldComponent extends Input_1.default {
         const maskInput = this.refs.select ? this.refs.select[index] : null;
         const mask = this.getMaskPattern(value.maskName);
         if (textInput && maskInput && mask) {
+            // We need to set the maskInput (select dropdown) value before calling inputmask.setValue because, this
+            // function will trigger a "change" event, which was calling updateValue setting the mask type to an incorrect value.
             maskInput.value = value.maskName;
             if (textInput.inputmask) {
                 this.setInputMask(textInput, mask);

package/lib/mjs/components/textfield/TextField.js

@@ -147,6 +147,8 @@ export default class TextFieldComponent extends Input {
         const maskInput = this.refs.select ? this.refs.select[index] : null;
         const mask = this.getMaskPattern(value.maskName);
         if (textInput && maskInput && mask) {
+            // We need to set the maskInput (select dropdown) value before calling inputmask.setValue because, this
+            // function will trigger a "change" event, which was calling updateValue setting the mask type to an incorrect value.
             maskInput.value = value.maskName;
             if (textInput.inputmask) {
                 this.setInputMask(textInput, mask);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-dev.5641.6eb7b96",
+  "version": "5.0.0-dev.5641.d9ab3df",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {