@formio/js 5.0.0-dev.5740.c7c00bc → 5.0.0-dev.5745.3c80f7d

package/Changelog.md

@@ -42,7 +42,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
  - FIO-8570: fixed thousandSeparator problem and decimal symbol problem
  - FIO-8710: fixed incorrect Components import that causes errors when interacting with form components
  - FIO-8801: fixed submission metadata nullish
- - FIO-8809: fixed runtime error in setForm when passing string argument to Formio.builder 
+ - FIO-8809: fixed runtime error in setForm when passing string argument to Formio.builder
+ - FIO-8684: Fixes cannot attach more than one component to the PDF form
+ - FIO-8719: fixed validation for Data Grid component inside nested wizard
 
 ### New Features
 

package/dist/formio.form.js

@@ -4697,7 +4697,7 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.js\"));\nconst utils_1 = __webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass PDF extends Webform_1.default {\n    constructor(element, options) {\n        options.display = 'pdf';\n        super(element, options);\n        this.components = [];\n    }\n    init() {\n        super.init();\n        // Handle an iframe submission.\n        this.on('iframe-submission', (submission) => this.setValue(submission, {\n            fromIframe: true\n        }), true);\n        this.on('iframe-change', (submission) => this.setValue(submission, {\n            fromIframe: true\n        }), true);\n        this.on('iframe-getIframePositions', (query) => {\n            const iframe = document.getElementById(`iframe-${query.formId}`);\n            if (iframe) {\n                const iframeBoundingClientRect = iframe.getBoundingClientRect();\n                this.postMessage({\n                    name: 'iframePositions',\n                    data: {\n                        formId: query.formId,\n                        iframe: {\n                            top: iframeBoundingClientRect.top\n                        },\n                        scrollY: window.scrollY || window.pageYOffset\n                    }\n                });\n            }\n        });\n        // Trigger when this form is ready.\n        this.on('iframe-ready', () => this.iframeReadyResolve(), true);\n    }\n    render() {\n        this.submitButton = this.addComponent({\n            disabled: this.form.disableWizardSubmit,\n            input: true,\n            type: 'button',\n            action: 'submit',\n            internal: true,\n            label: 'Submit',\n            key: 'submit',\n            ref: 'button',\n            hidden: this.isSubmitButtonHidden()\n        });\n        return this.renderTemplate('pdf', {\n            submitButton: this.submitButton.render(),\n            classes: 'formio-form-pdf',\n            children: this.renderComponents()\n        });\n    }\n    redraw() {\n        this.postMessage({ name: 'redraw' });\n        return this.builderMode ? Promise.resolve() : super.redraw();\n    }\n    destroy(all = false) {\n        if (this.iframeElement) {\n            delete this.iframeElement.formioComponent;\n            this.iframeElement.formioComponent = null;\n        }\n        super.destroy(all);\n    }\n    rebuild() {\n        if (this.attached && this.builderMode && this.component.components) {\n            this.destroyComponents();\n            this.addComponents();\n            return Promise.resolve();\n        }\n        this.postMessage({ name: 'redraw' });\n        return super.rebuild();\n    }\n    // Do not attach nested components for pdf.\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        return Promise.resolve();\n    }\n    attach(element) {\n        return super.attach(element).then(() => {\n            this.loadRefs(element, {\n                button: 'single',\n                buttonMessageContainer: 'single',\n                buttonMessage: 'single',\n                zoomIn: 'single',\n                zoomOut: 'single',\n                iframeContainer: 'single'\n            });\n            this.submitButton.refs = Object.assign({}, this.refs);\n            this.submitButton.attachButton();\n            // Reset the iframeReady promise.\n            this.iframeReady = new Promise((resolve, reject) => {\n                this.iframeReadyResolve = resolve;\n                this.iframeReadyReject = reject;\n            });\n            // iframes cannot be in the template so manually create it\n            this.iframeElement = this.ce('iframe', {\n                src: this.getSrc(),\n                id: `iframe-${this.id}`,\n                seamless: true,\n                class: 'formio-iframe'\n            });\n            this.iframeElement.formioContainer = this.component.components;\n            this.iframeElement.formioComponent = this;\n            // Append the iframe to the iframeContainer in the template\n            this.empty(this.refs.iframeContainer);\n            this.appendChild(this.refs.iframeContainer, this.iframeElement);\n            // Post the form to the iframe\n            this.form.base = Formio_1.Formio.getBaseUrl();\n            this.form.projectUrl = Formio_1.Formio.getProjectUrl();\n            this.postMessage({ name: 'form', data: this.form });\n            // Hide the submit button if the associated component is hidden\n            const submitButton = this.components.find(c => c.element === this.refs.button);\n            if (submitButton) {\n                this.refs.button.classList.toggle('hidden', !submitButton.visible);\n            }\n            this.addEventListener(this.refs.zoomIn, 'click', (event) => {\n                event.preventDefault();\n                this.postMessage({ name: 'zoomIn' });\n            });\n            this.addEventListener(this.refs.zoomOut, 'click', (event) => {\n                event.preventDefault();\n                this.postMessage({ name: 'zoomOut' });\n            });\n            const form = (0, utils_1.fastCloneDeep)(this.form);\n            if (this.formio) {\n                form.projectUrl = this.formio.projectUrl;\n                form.url = this.formio.formUrl;\n                form.base = this.formio.base;\n                this.postMessage({ name: 'token', data: this.formio.getToken() });\n            }\n            this.emit('attach');\n        });\n    }\n    /**\n     * Get the submission from the iframe.\n     * @returns {Promise<any>} - The submission from the iframe.\n     */\n    getSubmission() {\n        return new Promise((resolve) => {\n            this.once('iframe-submission', resolve);\n            this.postMessage({ name: 'getSubmission' });\n        });\n    }\n    /**\n     * Ensure we have the submission from the iframe before we submit the form.\n     * @param {any} options - The options for submission.\n     * @returns {Promise<any>} - Resolves when the form is submitted.\n     */\n    submitForm(options = {}) {\n        this.postMessage({ name: 'getErrors' });\n        return this.getSubmission().then(() => super.submitForm(options));\n    }\n    getSrc() {\n        if (!this._form || !this._form.settings || !this._form.settings.pdf) {\n            return '';\n        }\n        let iframeSrc = `${this._form.settings.pdf.src}.html`;\n        const params = [`id=${this.id}`];\n        if (this.options.showCheckboxBackground || this._form.settings.showCheckboxBackground) {\n            params.push('checkboxbackground=1');\n        }\n        if (this.options.readOnly) {\n            params.push('readonly=1');\n        }\n        if (this.options.zoom) {\n            params.push(`zoom=${this.options.zoom}`);\n        }\n        if (this.builderMode) {\n            params.push('builder=1');\n        }\n        if (params.length) {\n            iframeSrc += `?${params.join('&')}`;\n        }\n        return iframeSrc;\n    }\n    setForm(form, flags = {}) {\n        return super.setForm(form, flags).then(() => {\n            if (this.formio) {\n                form.projectUrl = this.formio.projectUrl;\n                form.url = this.formio.formUrl;\n                form.base = this.formio.base;\n                this.postMessage({ name: 'token', data: this.formio.getToken() });\n            }\n            this.postMessage({ name: 'form', data: this.form });\n        });\n    }\n    /**\n     * Set's the value of this form component.\n     * @param {import('@formio/core').Submission} submission - The submission JSON to set the value of this form.\n     * @param {any} flags - The flags to use when setting the submission.\n     * @returns {boolean} - If the value changed or not.\n     */\n    setValue(submission, flags = {}) {\n        const changed = super.setValue(submission, flags);\n        if (!flags || !flags.fromIframe) {\n            this.once('iframe-ready', () => {\n                if (changed) {\n                    this.postMessage({ name: 'submission', data: submission });\n                }\n            });\n        }\n        return changed;\n    }\n    postMessage(message) {\n        // If we get here before the iframeReady promise is set up, it's via the superclass constructor\n        if (!this.iframeReady) {\n            return;\n        }\n        if (!message.type) {\n            message.type = 'iframe-data';\n        }\n        this.iframeReady.then(() => {\n            if (this.iframeElement && this.iframeElement.contentWindow && !(message.name === 'form' && this.iframeFormSetUp)) {\n                this.iframeElement.contentWindow.postMessage(JSON.stringify(message), '*');\n                this.iframeFormSetUp = message.name === 'form';\n            }\n        });\n    }\n    focusOnComponent(key) {\n        this.postMessage({\n            name: 'focusErroredField',\n            data: key,\n        });\n    }\n    // Do not clear the iframe.\n    clear() { }\n    showErrors(error, triggerEvent) {\n        var _a;\n        const helpBlock = document.getElementById('submit-error');\n        const submitError = this.t('submitError');\n        const isSubmitErrorShown = ((_a = this.refs.buttonMessage) === null || _a === void 0 ? void 0 : _a.textContent.trim()) === submitError;\n        if (!helpBlock && error.length && !isSubmitErrorShown) {\n            const p = this.ce('p', { class: 'help-block' });\n            this.setContent(p, submitError);\n            p.addEventListener('click', () => {\n                window.scrollTo(0, 0);\n            });\n            const div = this.ce('div', { id: 'submit-error', class: 'has-error' });\n            this.appendTo(p, div);\n            this.appendTo(div, this.element);\n        }\n        if (!error.length && helpBlock) {\n            helpBlock.remove();\n        }\n        super.showErrors(error, triggerEvent);\n    }\n    isSubmitButtonHidden() {\n        let hidden = false;\n        (0, utils_1.eachComponent)(this.component.components, (component) => {\n            if ((component.type === 'button') &&\n                ((component.action === 'submit') || !component.action)) {\n                hidden = component.hidden || false;\n            }\n        });\n        return hidden;\n    }\n}\nexports[\"default\"] = PDF;\n/**\n * Listen for window messages.\n */\nif (typeof window !== 'undefined') {\n    window.addEventListener('message', (event) => {\n        let eventData = null;\n        try {\n            eventData = JSON.parse(event.data);\n        }\n        catch (err) {\n            eventData = null;\n        }\n        // If this form exists, then emit the event within this form.\n        if (eventData &&\n            eventData.name &&\n            eventData.formId &&\n            Formio_1.Formio.forms.hasOwnProperty(eventData.formId)) {\n            Formio_1.Formio.forms[eventData.formId].emit(`iframe-${eventData.name}`, eventData.data);\n        }\n    });\n}\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/PDF.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.js\"));\nconst utils_1 = __webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass PDF extends Webform_1.default {\n    constructor(element, options) {\n        options.display = 'pdf';\n        super(element, options);\n        this.components = [];\n    }\n    init() {\n        super.init();\n        // Handle an iframe submission.\n        this.on('iframe-submission', (submission) => this.setValue(submission, {\n            fromIframe: true\n        }), true);\n        this.on('iframe-change', (submission) => this.setValue(submission, {\n            fromIframe: true\n        }), true);\n        this.on('iframe-getIframePositions', (query) => {\n            const iframe = document.getElementById(`iframe-${query.formId}`);\n            if (iframe) {\n                const iframeBoundingClientRect = iframe.getBoundingClientRect();\n                this.postMessage({\n                    name: 'iframePositions',\n                    data: {\n                        formId: query.formId,\n                        iframe: {\n                            top: iframeBoundingClientRect.top\n                        },\n                        scrollY: window.scrollY || window.pageYOffset\n                    }\n                });\n            }\n        });\n        // Trigger when this form is ready.\n        this.on('iframe-ready', () => this.iframeReadyResolve(), true);\n    }\n    render() {\n        this.submitButton = this.addComponent({\n            disabled: this.form.disableWizardSubmit,\n            input: true,\n            type: 'button',\n            action: 'submit',\n            internal: true,\n            label: 'Submit',\n            key: 'submit',\n            ref: 'button',\n            hidden: this.isSubmitButtonHidden()\n        });\n        return this.renderTemplate('pdf', {\n            submitButton: this.submitButton.render(),\n            classes: 'formio-form-pdf',\n            children: this.renderComponents()\n        });\n    }\n    redraw() {\n        this.postMessage({ name: 'redraw' });\n        return this.builderMode ? Promise.resolve() : super.redraw();\n    }\n    destroy(all = false) {\n        if (this.iframeElement) {\n            delete this.iframeElement.formioComponent;\n            this.iframeElement.formioComponent = null;\n        }\n        super.destroy(all);\n    }\n    rebuild() {\n        if (this.builderMode && this.component.components) {\n            this.destroyComponents();\n            this.addComponents();\n            return Promise.resolve();\n        }\n        this.postMessage({ name: 'redraw' });\n        return super.rebuild();\n    }\n    // Do not attach nested components for pdf.\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        return Promise.resolve();\n    }\n    attach(element) {\n        return super.attach(element).then(() => {\n            this.loadRefs(element, {\n                button: 'single',\n                buttonMessageContainer: 'single',\n                buttonMessage: 'single',\n                zoomIn: 'single',\n                zoomOut: 'single',\n                iframeContainer: 'single'\n            });\n            this.submitButton.refs = Object.assign({}, this.refs);\n            this.submitButton.attachButton();\n            // Reset the iframeReady promise.\n            this.iframeReady = new Promise((resolve, reject) => {\n                this.iframeReadyResolve = resolve;\n                this.iframeReadyReject = reject;\n            });\n            // iframes cannot be in the template so manually create it\n            this.iframeElement = this.ce('iframe', {\n                src: this.getSrc(),\n                id: `iframe-${this.id}`,\n                seamless: true,\n                class: 'formio-iframe'\n            });\n            this.iframeElement.formioContainer = this.component.components;\n            this.iframeElement.formioComponent = this;\n            // Append the iframe to the iframeContainer in the template\n            this.empty(this.refs.iframeContainer);\n            this.appendChild(this.refs.iframeContainer, this.iframeElement);\n            // Post the form to the iframe\n            this.form.base = Formio_1.Formio.getBaseUrl();\n            this.form.projectUrl = Formio_1.Formio.getProjectUrl();\n            this.postMessage({ name: 'form', data: this.form });\n            // Hide the submit button if the associated component is hidden\n            const submitButton = this.components.find(c => c.element === this.refs.button);\n            if (submitButton) {\n                this.refs.button.classList.toggle('hidden', !submitButton.visible);\n            }\n            this.addEventListener(this.refs.zoomIn, 'click', (event) => {\n                event.preventDefault();\n                this.postMessage({ name: 'zoomIn' });\n            });\n            this.addEventListener(this.refs.zoomOut, 'click', (event) => {\n                event.preventDefault();\n                this.postMessage({ name: 'zoomOut' });\n            });\n            const form = (0, utils_1.fastCloneDeep)(this.form);\n            if (this.formio) {\n                form.projectUrl = this.formio.projectUrl;\n                form.url = this.formio.formUrl;\n                form.base = this.formio.base;\n                this.postMessage({ name: 'token', data: this.formio.getToken() });\n            }\n            this.emit('attach');\n        });\n    }\n    /**\n     * Get the submission from the iframe.\n     * @returns {Promise<any>} - The submission from the iframe.\n     */\n    getSubmission() {\n        return new Promise((resolve) => {\n            this.once('iframe-submission', resolve);\n            this.postMessage({ name: 'getSubmission' });\n        });\n    }\n    /**\n     * Ensure we have the submission from the iframe before we submit the form.\n     * @param {any} options - The options for submission.\n     * @returns {Promise<any>} - Resolves when the form is submitted.\n     */\n    submitForm(options = {}) {\n        this.postMessage({ name: 'getErrors' });\n        return this.getSubmission().then(() => super.submitForm(options));\n    }\n    getSrc() {\n        if (!this._form || !this._form.settings || !this._form.settings.pdf) {\n            return '';\n        }\n        let iframeSrc = `${this._form.settings.pdf.src}.html`;\n        const params = [`id=${this.id}`];\n        if (this.options.showCheckboxBackground || this._form.settings.showCheckboxBackground) {\n            params.push('checkboxbackground=1');\n        }\n        if (this.options.readOnly) {\n            params.push('readonly=1');\n        }\n        if (this.options.zoom) {\n            params.push(`zoom=${this.options.zoom}`);\n        }\n        if (this.builderMode) {\n            params.push('builder=1');\n        }\n        if (params.length) {\n            iframeSrc += `?${params.join('&')}`;\n        }\n        return iframeSrc;\n    }\n    setForm(form, flags = {}) {\n        return super.setForm(form, flags).then(() => {\n            if (this.formio) {\n                form.projectUrl = this.formio.projectUrl;\n                form.url = this.formio.formUrl;\n                form.base = this.formio.base;\n                this.postMessage({ name: 'token', data: this.formio.getToken() });\n            }\n            this.postMessage({ name: 'form', data: this.form });\n        });\n    }\n    /**\n     * Set's the value of this form component.\n     * @param {import('@formio/core').Submission} submission - The submission JSON to set the value of this form.\n     * @param {any} flags - The flags to use when setting the submission.\n     * @returns {boolean} - If the value changed or not.\n     */\n    setValue(submission, flags = {}) {\n        const changed = super.setValue(submission, flags);\n        if (!flags || !flags.fromIframe) {\n            this.once('iframe-ready', () => {\n                if (changed) {\n                    this.postMessage({ name: 'submission', data: submission });\n                }\n            });\n        }\n        return changed;\n    }\n    postMessage(message) {\n        // If we get here before the iframeReady promise is set up, it's via the superclass constructor\n        if (!this.iframeReady) {\n            return;\n        }\n        if (!message.type) {\n            message.type = 'iframe-data';\n        }\n        this.iframeReady.then(() => {\n            if (this.iframeElement && this.iframeElement.contentWindow && !(message.name === 'form' && this.iframeFormSetUp)) {\n                this.iframeElement.contentWindow.postMessage(JSON.stringify(message), '*');\n                this.iframeFormSetUp = message.name === 'form';\n            }\n        });\n    }\n    focusOnComponent(key) {\n        this.postMessage({\n            name: 'focusErroredField',\n            data: key,\n        });\n    }\n    // Do not clear the iframe.\n    clear() { }\n    showErrors(error, triggerEvent) {\n        var _a;\n        const helpBlock = document.getElementById('submit-error');\n        const submitError = this.t('submitError');\n        const isSubmitErrorShown = ((_a = this.refs.buttonMessage) === null || _a === void 0 ? void 0 : _a.textContent.trim()) === submitError;\n        if (!helpBlock && error.length && !isSubmitErrorShown) {\n            const p = this.ce('p', { class: 'help-block' });\n            this.setContent(p, submitError);\n            p.addEventListener('click', () => {\n                window.scrollTo(0, 0);\n            });\n            const div = this.ce('div', { id: 'submit-error', class: 'has-error' });\n            this.appendTo(p, div);\n            this.appendTo(div, this.element);\n        }\n        if (!error.length && helpBlock) {\n            helpBlock.remove();\n        }\n        super.showErrors(error, triggerEvent);\n    }\n    isSubmitButtonHidden() {\n        let hidden = false;\n        (0, utils_1.eachComponent)(this.component.components, (component) => {\n            if ((component.type === 'button') &&\n                ((component.action === 'submit') || !component.action)) {\n                hidden = component.hidden || false;\n            }\n        });\n        return hidden;\n    }\n}\nexports[\"default\"] = PDF;\n/**\n * Listen for window messages.\n */\nif (typeof window !== 'undefined') {\n    window.addEventListener('message', (event) => {\n        let eventData = null;\n        try {\n            eventData = JSON.parse(event.data);\n        }\n        catch (err) {\n            eventData = null;\n        }\n        // If this form exists, then emit the event within this form.\n        if (eventData &&\n            eventData.name &&\n            eventData.formId &&\n            Formio_1.Formio.forms.hasOwnProperty(eventData.formId)) {\n            Formio_1.Formio.forms[eventData.formId].emit(`iframe-${eventData.name}`, eventData.data);\n        }\n    });\n}\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/PDF.js?");
 
 /***/ }),
 
@@ -5104,7 +5104,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst Field_1 = __importDefault(__webpack_require__(/*! ../_classes/field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass DayComponent extends Field_1.default {\n    static schema(...extend) {\n        return Field_1.default.schema({\n            type: 'day',\n            label: 'Day',\n            key: 'day',\n            fields: {\n                day: {\n                    type: 'number',\n                    placeholder: '',\n                    required: false\n                },\n                month: {\n                    type: 'select',\n                    placeholder: '',\n                    required: false\n                },\n                year: {\n                    type: 'number',\n                    placeholder: '',\n                    required: false\n                }\n            },\n            dayFirst: false\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Day',\n            group: 'advanced',\n            icon: 'calendar',\n            documentation: '/userguide/form-building/advanced-components#day',\n            weight: 50,\n            schema: DayComponent.schema()\n        };\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isDateEqual', 'isNotDateEqual', 'isEmpty', 'isNotEmpty', 'dateLessThan', 'dateGreaterThan', 'dateLessThanOrEqual', 'dateGreaterThanOrEqual'] });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.string];\n    }\n    constructor(component, options, data) {\n        if (component.maxDate && component.maxDate.indexOf('moment(') === -1) {\n            component.maxDate = (0, moment_1.default)(component.maxDate, 'YYYY-MM-DD').toISOString();\n        }\n        if (component.minDate && component.minDate.indexOf('moment(') === -1) {\n            component.minDate = (0, moment_1.default)(component.minDate, 'YYYY-MM-DD').toISOString();\n        }\n        super(component, options, data);\n    }\n    static get serverConditionSettings() {\n        return DayComponent.conditionOperatorsSettings;\n    }\n    /**\n     * The empty value for day component.\n     * @returns {'00/00/0000'} - The empty value of the day component.\n     */\n    get emptyValue() {\n        return '00/00/0000';\n    }\n    get valueMask() {\n        return /^\\d{2}\\/\\d{2}\\/\\d{4}$/;\n    }\n    get dayRequired() {\n        return this.showDay && lodash_1.default.get(this.component, 'fields.day.required', false);\n    }\n    get showDay() {\n        return !lodash_1.default.get(this.component, 'fields.day.hide', false);\n    }\n    get monthRequired() {\n        return this.showMonth && lodash_1.default.get(this.component, 'fields.month.required', false);\n    }\n    get showMonth() {\n        return !lodash_1.default.get(this.component, 'fields.month.hide', false);\n    }\n    get yearRequired() {\n        return this.showYear && lodash_1.default.get(this.component, 'fields.year.required', false);\n    }\n    get showYear() {\n        return !lodash_1.default.get(this.component, 'fields.year.hide', false);\n    }\n    get defaultSchema() {\n        return DayComponent.schema();\n    }\n    get shouldDisabled() {\n        return super.shouldDisabled || this.parentDisabled;\n    }\n    get inputInfo() {\n        const info = super.elementInfo();\n        info.type = 'input';\n        info.attr.type = 'hidden';\n        info.changeEvent = 'input';\n        return info;\n    }\n    inputDefinition(name) {\n        let min, max;\n        if (name === 'day') {\n            min = 1;\n            max = 31;\n        }\n        if (name === 'month') {\n            min = 1;\n            max = 12;\n        }\n        if (name === 'year') {\n            min = lodash_1.default.get(this.component, 'fields.year.minYear', 1900) || 1900;\n            max = lodash_1.default.get(this.component, 'fields.year.maxYear', 2030) || 1900;\n        }\n        return {\n            type: 'input',\n            ref: name,\n            attr: {\n                id: `${this.component.key}-${name}`,\n                class: `form-control ${this.transform('class', `formio-day-component-${name}`)}`,\n                type: this.component.fields[name].type === 'select' ? 'select' : 'number',\n                placeholder: this.t(this.component.fields[name].placeholder),\n                step: 1,\n                min,\n                max,\n            }\n        };\n    }\n    selectDefinition(name) {\n        return {\n            multiple: false,\n            ref: name,\n            widget: 'html5',\n            attr: {\n                id: `${this.component.key}-${name}`,\n                class: 'form-control',\n                name,\n                lang: this.options.language\n            }\n        };\n    }\n    get days() {\n        if (this._days) {\n            return this._days;\n        }\n        this._days = [\n            { value: '', label: lodash_1.default.get(this.component, 'fields.day.placeholder', '') }\n        ];\n        for (let x = 1; x <= 31; x++) {\n            this._days.push({\n                value: x,\n                label: x.toString()\n            });\n        }\n        return this._days;\n    }\n    get months() {\n        if (this._months) {\n            return this._months;\n        }\n        this._months = [\n            {\n                value: '',\n                label: lodash_1.default.get(this.component, 'fields.month.placeholder') || (this.hideInputLabels ? this.t('Month') : '')\n            },\n            { value: 1, label: 'January' },\n            { value: 2, label: 'February' },\n            { value: 3, label: 'March' },\n            { value: 4, label: 'April' },\n            { value: 5, label: 'May' },\n            { value: 6, label: 'June' },\n            { value: 7, label: 'July' },\n            { value: 8, label: 'August' },\n            { value: 9, label: 'September' },\n            { value: 10, label: 'October' },\n            { value: 11, label: 'November' },\n            { value: 12, label: 'December' }\n        ];\n        return this._months;\n    }\n    get years() {\n        if (this._years) {\n            return this._years;\n        }\n        this._years = [\n            { value: '', label: lodash_1.default.get(this.component, 'fields.year.placeholder', '') }\n        ];\n        const minYears = lodash_1.default.get(this.component, 'fields.year.minYear', 1900) || 1900;\n        const maxYears = lodash_1.default.get(this.component, 'fields.year.maxYear', 2030) || 2030;\n        for (let x = minYears; x <= maxYears; x++) {\n            this._years.push({\n                value: x,\n                label: x.toString()\n            });\n        }\n        return this._years;\n    }\n    setErrorClasses(elements, dirty, hasError) {\n        super.setErrorClasses(elements, dirty, hasError);\n        super.setErrorClasses([this.refs.day, this.refs.month, this.refs.year], dirty, hasError);\n    }\n    removeInputError(elements) {\n        super.removeInputError([this.refs.day, this.refs.month, this.refs.year]);\n        super.removeInputError(elements);\n    }\n    init() {\n        super.init();\n        const minYear = this.component.fields.year.minYear;\n        const maxYear = this.component.fields.year.maxYear;\n        this.component.maxYear = maxYear;\n        this.component.minYear = minYear;\n        const dateFormatInfo = (0, utils_1.getLocaleDateFormatInfo)(this.options.language);\n        this.dayFirst = this.component.useLocaleSettings\n            ? dateFormatInfo.dayFirst\n            : this.component.dayFirst;\n    }\n    render() {\n        if (this.isHtmlRenderMode()) {\n            return super.render(this.renderTemplate('input'));\n        }\n        return super.render(this.renderTemplate('day', {\n            dayFirst: this.dayFirst,\n            showDay: this.showDay,\n            showMonth: this.showMonth,\n            showYear: this.showYear,\n            day: this.renderField('day'),\n            month: this.renderField('month'),\n            year: this.renderField('year'),\n        }));\n    }\n    renderField(name) {\n        if (this.component.fields[name].type === 'select') {\n            return this.renderTemplate('select', {\n                input: this.selectDefinition(name),\n                selectOptions: this[`${name}s`].reduce((html, option) => html + this.renderTemplate('selectOption', {\n                    option,\n                    selected: false,\n                    attrs: {}\n                }), ''),\n            });\n        }\n        else {\n            return this.renderTemplate('input', {\n                prefix: this.prefix,\n                suffix: this.suffix,\n                input: this.inputDefinition(name)\n            });\n        }\n    }\n    attach(element) {\n        this.loadRefs(element, { day: 'single', month: 'single', year: 'single', input: 'multiple' });\n        const superAttach = super.attach(element);\n        const updateValueAndSaveFocus = (element, name) => () => {\n            try {\n                this.saveCaretPosition(element, name);\n            }\n            catch (err) {\n                console.warn('An error occurred while trying to save caret position', err);\n            }\n            this.updateValue(null, {\n                modified: true,\n            });\n        };\n        if (this.shouldDisabled) {\n            this.setDisabled(this.refs.day, true);\n            this.setDisabled(this.refs.month, true);\n            this.setDisabled(this.refs.year, true);\n            if (this.refs.input) {\n                this.refs.input.forEach((input) => this.setDisabled(input, true));\n            }\n        }\n        else {\n            this.addEventListener(this.refs.day, 'input', updateValueAndSaveFocus(this.refs.day, 'day'));\n            // TODO: Need to rework this to work with day select as well.\n            // Change day max input when month changes.\n            this.addEventListener(this.refs.month, 'input', () => {\n                const maxDay = this.refs.year ? parseInt(new Date(this.refs.year.value, this.refs.month.value, 0).getDate(), 10)\n                    : '';\n                const day = this.getFieldValue('day');\n                if (!this.component.fields.day.hide && maxDay) {\n                    this.refs.day.max = maxDay;\n                }\n                if (maxDay && day > maxDay) {\n                    this.refs.day.value = this.refs.day.max;\n                }\n                updateValueAndSaveFocus(this.refs.month, 'month')();\n            });\n            this.addEventListener(this.refs.year, 'input', updateValueAndSaveFocus(this.refs.year, 'year'));\n            this.addEventListener(this.refs.input, this.info.changeEvent, () => this.updateValue(null, {\n                modified: true\n            }));\n            [this.refs.day, this.refs.month, this.refs.year].filter((element) => !!element).forEach((element) => {\n                super.addFocusBlurEvents(element);\n            });\n        }\n        this.setValue(this.dataValue);\n        // Force the disabled state with getters and setters.\n        this.disabled = this.shouldDisabled;\n        return superAttach;\n    }\n    validateRequired(setting, value) {\n        const { day, month, year } = this.parts;\n        if (this.dayRequired && !day) {\n            return false;\n        }\n        if (this.monthRequired && !month) {\n            return false;\n        }\n        if (this.yearRequired && !year) {\n            return false;\n        }\n        if (!(0, utils_1.boolValue)(setting)) {\n            return true;\n        }\n        return !this.isEmpty(value);\n    }\n    set disabled(disabled) {\n        super.disabled = disabled;\n        if (!this.refs.year || !this.refs.month || !this.refs.day) {\n            return;\n        }\n        if (disabled) {\n            this.refs.year.setAttribute('disabled', 'disabled');\n            this.refs.month.setAttribute('disabled', 'disabled');\n            this.refs.day.setAttribute('disabled', 'disabled');\n        }\n        else {\n            this.refs.year.removeAttribute('disabled');\n            this.refs.month.removeAttribute('disabled');\n            this.refs.day.removeAttribute('disabled');\n        }\n    }\n    normalizeValue(value) {\n        if (!value || this.valueMask.test(value)) {\n            return value;\n        }\n        const dateParts = [];\n        const valueParts = value.split('/');\n        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        const defaultValue = this.component.defaultValue ? this.component.defaultValue.split('/') : '';\n        const getNextPart = (shouldTake, defaultValue) => dateParts.push(shouldTake ? valueParts.shift() : defaultValue);\n        if (this.dayFirst) {\n            getNextPart(this.showDay, defaultValue ? defaultValue[DAY] : '00');\n        }\n        getNextPart(this.showMonth, defaultValue ? defaultValue[MONTH] : '00');\n        if (!this.dayFirst) {\n            getNextPart(this.showDay, defaultValue ? defaultValue[DAY] : '00');\n        }\n        getNextPart(this.showYear, defaultValue ? defaultValue[YEAR] : '0000');\n        return dateParts.join('/');\n    }\n    /**\n     * Set the value at a specific index and updates the component's refs.\n     * @param {number} index - The index to set.\n     * @param {any} value - The value to set.\n     * @returns {null|void} - Returns null if the value is invalid, otherwise void.\n     */\n    setValueAt(index, value) {\n        // temporary solution to avoid input reset\n        // on invalid date.\n        if (!value || value === 'Invalid date') {\n            return null;\n        }\n        const parts = value.split('/');\n        let day;\n        if (this.component.dayFirst) {\n            day = parts.shift();\n        }\n        const month = parts.shift();\n        if (!this.component.dayFirst) {\n            day = parts.shift();\n        }\n        const year = parts.shift();\n        if (this.refs.day && this.showDay) {\n            this.refs.day.value = day === '00' ? '' : parseInt(day, 10);\n        }\n        if (this.refs.month && this.showMonth) {\n            this.refs.month.value = month === '00' ? '' : parseInt(month, 10);\n        }\n        if (this.refs.year && this.showYear) {\n            this.refs.year.value = year === '0000' ? '' : parseInt(year, 10);\n        }\n    }\n    getFieldValue(name) {\n        const parts = this.dataValue ? this.dataValue.split('/') : [];\n        let val = 0;\n        switch (name) {\n            case 'month':\n                val = parts[this.dayFirst ? 1 : 0];\n                break;\n            case 'day':\n                val = parts[this.dayFirst ? 0 : 1];\n                break;\n            case 'year':\n                val = parts[2];\n                break;\n        }\n        val = parseInt(val, 10);\n        return (!lodash_1.default.isNaN(val) && lodash_1.default.isNumber(val)) ? val : 0;\n    }\n    get parts() {\n        return {\n            day: this.getFieldValue('day'),\n            month: this.getFieldValue('month'),\n            year: this.getFieldValue('year'),\n        };\n    }\n    /**\n     * Get the format for the value string.\n     * @returns {string} - the format for the value string.\n     */\n    get format() {\n        let format = '';\n        if (this.component.dayFirst && this.showDay) {\n            format += 'D/';\n        }\n        if (this.showMonth) {\n            format += 'M/';\n        }\n        if (!this.component.dayFirst && this.showDay) {\n            format += 'D/';\n        }\n        if (this.showYear) {\n            format += 'YYYY';\n            return format;\n        }\n        else {\n            // Trim off the \"/\" from the end of the format string.\n            return format.length ? format.substring(0, format.length - 1) : format;\n        }\n    }\n    /**\n     * Return the date for this component.\n     * @param {any} value - The value to convert to a date.\n     * @returns {null|string} - The date string.\n     */\n    getDate(value) {\n        let defaults = [], day, month, year;\n        // Map positions to identifiers to get default values for each part of day\n        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        const defaultValue = value || this.component.defaultValue;\n        if (defaultValue) {\n            defaults = defaultValue.split('/').map(x => parseInt(x, 10));\n        }\n        if (this.showDay && this.refs.day) {\n            day = parseInt(this.refs.day.value, 10);\n        }\n        if (day === undefined || lodash_1.default.isNaN(day)) {\n            day = defaults[DAY] && !lodash_1.default.isNaN(defaults[DAY]) ? defaults[DAY] : 0;\n        }\n        if (this.showMonth && this.refs.month) {\n            // Months are 0 indexed.\n            month = parseInt(this.refs.month.value, 10);\n        }\n        if (month === undefined || lodash_1.default.isNaN(month)) {\n            month = defaults[MONTH] && !lodash_1.default.isNaN(defaults[MONTH]) ? defaults[MONTH] : 0;\n        }\n        if (this.showYear && this.refs.year) {\n            year = parseInt(this.refs.year.value);\n        }\n        if (year === undefined || lodash_1.default.isNaN(year)) {\n            year = defaults[YEAR] && !lodash_1.default.isNaN(defaults[YEAR]) ? defaults[YEAR] : 0;\n        }\n        let result;\n        if (!day && !month && !year) {\n            return null;\n        }\n        // add trailing zeros if the data is showed\n        day = this.showDay ? day.toString().padStart(2, 0) : '';\n        month = this.showMonth ? month.toString().padStart(2, 0) : '';\n        year = this.showYear ? year.toString().padStart(4, 0) : '';\n        if (this.component.dayFirst) {\n            result = `${day}${this.showDay && this.showMonth || this.showDay && this.showYear ? '/' : ''}${month}${this.showMonth && this.showYear ? '/' : ''}${year}`;\n        }\n        else {\n            result = `${month}${this.showDay && this.showMonth || this.showMonth && this.showYear ? '/' : ''}${day}${this.showDay && this.showYear ? '/' : ''}${year}`;\n        }\n        return result;\n    }\n    /**\n     * Return the date string for this component.\n     * @returns {string|null} - The date string for this component.\n     */\n    get date() {\n        return this.getDate();\n    }\n    /**\n     * Return the raw value.\n     * @returns {string} - The raw value of the component.\n     */\n    get validationValue() {\n        return this.dataValue;\n    }\n    getValue() {\n        const result = super.getValue();\n        return (!result) ? this.dataValue : result;\n    }\n    /**\n     * Get the value at a specific index.\n     * @param {number} index - The index to get the value from.\n     * @returns {*} - The value at index.\n     */\n    getValueAt(index) {\n        const date = this.date || this.emptyValue;\n        if (date) {\n            this.refs.input[index].value = date;\n            return this.refs.input[index].value;\n        }\n        else {\n            this.refs.input[index].value = '';\n            return null;\n        }\n    }\n    /**\n     * Get the input value of the date.\n     * @param {any} value - The value to convert to a string.\n     * @returns {string|null} - The string value of the date.\n     */\n    getValueAsString(value) {\n        return this.getDate(value) || '';\n    }\n    focus(field) {\n        var _a, _b, _c;\n        if (field && typeof field === 'string' && this.refs[field]) {\n            this.refs[field].focus();\n        }\n        else if (this.dayFirst && this.showDay || !this.dayFirst && !this.showMonth && this.showDay) {\n            (_a = this.refs.day) === null || _a === void 0 ? void 0 : _a.focus();\n        }\n        else if (this.dayFirst && !this.showDay && this.showMonth || !this.dayFirst && this.showMonth) {\n            (_b = this.refs.month) === null || _b === void 0 ? void 0 : _b.focus();\n        }\n        else if (!this.showDay && !this.showDay && this.showYear) {\n            (_c = this.refs.year) === null || _c === void 0 ? void 0 : _c.focus();\n        }\n    }\n    restoreCaretPosition() {\n        var _a;\n        if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.currentSelection) {\n            const { selection, index } = this.root.currentSelection;\n            if (this.refs[index]) {\n                const input = this.refs[index];\n                const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test((i === null || i === void 0 ? void 0 : i.type) || '');\n                if (isInputRangeSelectable(input)) {\n                    input.setSelectionRange(...selection);\n                }\n            }\n        }\n    }\n    isPartialDay(value) {\n        if (!value) {\n            return false;\n        }\n        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        const values = value.split('/');\n        return (values[DAY] === '00' || values[MONTH] === '00' || values[YEAR] === '0000');\n    }\n    getValidationFormat() {\n        return this.dayFirst ? 'DD-MM-YYYY' : 'MM-DD-YYYY';\n    }\n}\nexports[\"default\"] = DayComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/day/Day.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst Field_1 = __importDefault(__webpack_require__(/*! ../_classes/field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass DayComponent extends Field_1.default {\n    static schema(...extend) {\n        return Field_1.default.schema({\n            type: 'day',\n            label: 'Day',\n            key: 'day',\n            fields: {\n                day: {\n                    type: 'number',\n                    placeholder: '',\n                    required: false\n                },\n                month: {\n                    type: 'select',\n                    placeholder: '',\n                    required: false\n                },\n                year: {\n                    type: 'number',\n                    placeholder: '',\n                    required: false\n                }\n            },\n            dayFirst: false\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Day',\n            group: 'advanced',\n            icon: 'calendar',\n            documentation: '/userguide/form-building/advanced-components#day',\n            weight: 50,\n            schema: DayComponent.schema()\n        };\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isDateEqual', 'isNotDateEqual', 'isEmpty', 'isNotEmpty', 'dateLessThan', 'dateGreaterThan', 'dateLessThanOrEqual', 'dateGreaterThanOrEqual'] });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.string];\n    }\n    constructor(component, options, data) {\n        if (component.maxDate && component.maxDate.indexOf('moment(') === -1) {\n            component.maxDate = (0, moment_1.default)(component.maxDate, 'YYYY-MM-DD').toISOString();\n        }\n        if (component.minDate && component.minDate.indexOf('moment(') === -1) {\n            component.minDate = (0, moment_1.default)(component.minDate, 'YYYY-MM-DD').toISOString();\n        }\n        super(component, options, data);\n    }\n    static get serverConditionSettings() {\n        return DayComponent.conditionOperatorsSettings;\n    }\n    /**\n     * The empty value for day component.\n     * @returns {''} - The empty value of the day component.\n     */\n    get emptyValue() {\n        return '';\n    }\n    get valueMask() {\n        return /^\\d{2}\\/\\d{2}\\/\\d{4}$/;\n    }\n    get dayRequired() {\n        return this.showDay && lodash_1.default.get(this.component, 'fields.day.required', false);\n    }\n    get showDay() {\n        return !lodash_1.default.get(this.component, 'fields.day.hide', false);\n    }\n    get monthRequired() {\n        return this.showMonth && lodash_1.default.get(this.component, 'fields.month.required', false);\n    }\n    get showMonth() {\n        return !lodash_1.default.get(this.component, 'fields.month.hide', false);\n    }\n    get yearRequired() {\n        return this.showYear && lodash_1.default.get(this.component, 'fields.year.required', false);\n    }\n    get showYear() {\n        return !lodash_1.default.get(this.component, 'fields.year.hide', false);\n    }\n    get defaultSchema() {\n        return DayComponent.schema();\n    }\n    get shouldDisabled() {\n        return super.shouldDisabled || this.parentDisabled;\n    }\n    get inputInfo() {\n        const info = super.elementInfo();\n        info.type = 'input';\n        info.attr.type = 'hidden';\n        info.changeEvent = 'input';\n        return info;\n    }\n    inputDefinition(name) {\n        let min, max;\n        if (name === 'day') {\n            min = 1;\n            max = 31;\n        }\n        if (name === 'month') {\n            min = 1;\n            max = 12;\n        }\n        if (name === 'year') {\n            min = lodash_1.default.get(this.component, 'fields.year.minYear', 1900) || 1900;\n            max = lodash_1.default.get(this.component, 'fields.year.maxYear', 2030) || 1900;\n        }\n        return {\n            type: 'input',\n            ref: name,\n            attr: {\n                id: `${this.component.key}-${name}`,\n                class: `form-control ${this.transform('class', `formio-day-component-${name}`)}`,\n                type: this.component.fields[name].type === 'select' ? 'select' : 'number',\n                placeholder: this.t(this.component.fields[name].placeholder),\n                step: 1,\n                min,\n                max,\n            }\n        };\n    }\n    selectDefinition(name) {\n        return {\n            multiple: false,\n            ref: name,\n            widget: 'html5',\n            attr: {\n                id: `${this.component.key}-${name}`,\n                class: 'form-control',\n                name,\n                lang: this.options.language\n            }\n        };\n    }\n    get days() {\n        if (this._days) {\n            return this._days;\n        }\n        this._days = [\n            { value: '', label: lodash_1.default.get(this.component, 'fields.day.placeholder', '') }\n        ];\n        for (let x = 1; x <= 31; x++) {\n            this._days.push({\n                value: x,\n                label: x.toString()\n            });\n        }\n        return this._days;\n    }\n    get months() {\n        if (this._months) {\n            return this._months;\n        }\n        this._months = [\n            {\n                value: '',\n                label: lodash_1.default.get(this.component, 'fields.month.placeholder') || (this.hideInputLabels ? this.t('Month') : '')\n            },\n            { value: 1, label: 'January' },\n            { value: 2, label: 'February' },\n            { value: 3, label: 'March' },\n            { value: 4, label: 'April' },\n            { value: 5, label: 'May' },\n            { value: 6, label: 'June' },\n            { value: 7, label: 'July' },\n            { value: 8, label: 'August' },\n            { value: 9, label: 'September' },\n            { value: 10, label: 'October' },\n            { value: 11, label: 'November' },\n            { value: 12, label: 'December' }\n        ];\n        return this._months;\n    }\n    get years() {\n        if (this._years) {\n            return this._years;\n        }\n        this._years = [\n            { value: '', label: lodash_1.default.get(this.component, 'fields.year.placeholder', '') }\n        ];\n        const minYears = lodash_1.default.get(this.component, 'fields.year.minYear', 1900) || 1900;\n        const maxYears = lodash_1.default.get(this.component, 'fields.year.maxYear', 2030) || 2030;\n        for (let x = minYears; x <= maxYears; x++) {\n            this._years.push({\n                value: x,\n                label: x.toString()\n            });\n        }\n        return this._years;\n    }\n    setErrorClasses(elements, dirty, hasError) {\n        super.setErrorClasses(elements, dirty, hasError);\n        super.setErrorClasses([this.refs.day, this.refs.month, this.refs.year], dirty, hasError);\n    }\n    removeInputError(elements) {\n        super.removeInputError([this.refs.day, this.refs.month, this.refs.year]);\n        super.removeInputError(elements);\n    }\n    init() {\n        super.init();\n        const minYear = this.component.fields.year.minYear;\n        const maxYear = this.component.fields.year.maxYear;\n        this.component.maxYear = maxYear;\n        this.component.minYear = minYear;\n        const dateFormatInfo = (0, utils_1.getLocaleDateFormatInfo)(this.options.language);\n        this.dayFirst = this.component.useLocaleSettings\n            ? dateFormatInfo.dayFirst\n            : this.component.dayFirst;\n    }\n    render() {\n        if (this.isHtmlRenderMode()) {\n            return super.render(this.renderTemplate('input'));\n        }\n        return super.render(this.renderTemplate('day', {\n            dayFirst: this.dayFirst,\n            showDay: this.showDay,\n            showMonth: this.showMonth,\n            showYear: this.showYear,\n            day: this.renderField('day'),\n            month: this.renderField('month'),\n            year: this.renderField('year'),\n        }));\n    }\n    renderField(name) {\n        if (this.component.fields[name].type === 'select') {\n            return this.renderTemplate('select', {\n                input: this.selectDefinition(name),\n                selectOptions: this[`${name}s`].reduce((html, option) => html + this.renderTemplate('selectOption', {\n                    option,\n                    selected: false,\n                    attrs: {}\n                }), ''),\n            });\n        }\n        else {\n            return this.renderTemplate('input', {\n                prefix: this.prefix,\n                suffix: this.suffix,\n                input: this.inputDefinition(name)\n            });\n        }\n    }\n    attach(element) {\n        this.loadRefs(element, { day: 'single', month: 'single', year: 'single', input: 'multiple' });\n        const superAttach = super.attach(element);\n        const updateValueAndSaveFocus = (element, name) => () => {\n            try {\n                this.saveCaretPosition(element, name);\n            }\n            catch (err) {\n                console.warn('An error occurred while trying to save caret position', err);\n            }\n            this.updateValue(null, {\n                modified: true,\n            });\n        };\n        if (this.shouldDisabled) {\n            this.setDisabled(this.refs.day, true);\n            this.setDisabled(this.refs.month, true);\n            this.setDisabled(this.refs.year, true);\n            if (this.refs.input) {\n                this.refs.input.forEach((input) => this.setDisabled(input, true));\n            }\n        }\n        else {\n            this.addEventListener(this.refs.day, 'input', updateValueAndSaveFocus(this.refs.day, 'day'));\n            // TODO: Need to rework this to work with day select as well.\n            // Change day max input when month changes.\n            this.addEventListener(this.refs.month, 'input', () => {\n                const maxDay = this.refs.year ? parseInt(new Date(this.refs.year.value, this.refs.month.value, 0).getDate(), 10)\n                    : '';\n                const day = this.getFieldValue('day');\n                if (!this.component.fields.day.hide && maxDay) {\n                    this.refs.day.max = maxDay;\n                }\n                if (maxDay && day > maxDay) {\n                    this.refs.day.value = this.refs.day.max;\n                }\n                updateValueAndSaveFocus(this.refs.month, 'month')();\n            });\n            this.addEventListener(this.refs.year, 'input', updateValueAndSaveFocus(this.refs.year, 'year'));\n            this.addEventListener(this.refs.input, this.info.changeEvent, () => this.updateValue(null, {\n                modified: true\n            }));\n            [this.refs.day, this.refs.month, this.refs.year].filter((element) => !!element).forEach((element) => {\n                super.addFocusBlurEvents(element);\n            });\n        }\n        this.setValue(this.dataValue);\n        // Force the disabled state with getters and setters.\n        this.disabled = this.shouldDisabled;\n        return superAttach;\n    }\n    validateRequired(setting, value) {\n        const { day, month, year } = this.parts;\n        if (this.dayRequired && !day) {\n            return false;\n        }\n        if (this.monthRequired && !month) {\n            return false;\n        }\n        if (this.yearRequired && !year) {\n            return false;\n        }\n        if (!(0, utils_1.boolValue)(setting)) {\n            return true;\n        }\n        return !this.isEmpty(value);\n    }\n    set disabled(disabled) {\n        super.disabled = disabled;\n        if (!this.refs.year || !this.refs.month || !this.refs.day) {\n            return;\n        }\n        if (disabled) {\n            this.refs.year.setAttribute('disabled', 'disabled');\n            this.refs.month.setAttribute('disabled', 'disabled');\n            this.refs.day.setAttribute('disabled', 'disabled');\n        }\n        else {\n            this.refs.year.removeAttribute('disabled');\n            this.refs.month.removeAttribute('disabled');\n            this.refs.day.removeAttribute('disabled');\n        }\n    }\n    normalizeValue(value) {\n        if (!value || this.valueMask.test(value)) {\n            return value;\n        }\n        const dateParts = [];\n        const valueParts = value.split('/');\n        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        const defaultValue = this.component.defaultValue ? this.component.defaultValue.split('/') : '';\n        const getNextPart = (shouldTake, defaultValue) => dateParts.push(shouldTake ? valueParts.shift() : defaultValue);\n        if (this.dayFirst) {\n            getNextPart(this.showDay, defaultValue ? defaultValue[DAY] : '00');\n        }\n        getNextPart(this.showMonth, defaultValue ? defaultValue[MONTH] : '00');\n        if (!this.dayFirst) {\n            getNextPart(this.showDay, defaultValue ? defaultValue[DAY] : '00');\n        }\n        getNextPart(this.showYear, defaultValue ? defaultValue[YEAR] : '0000');\n        return dateParts.join('/');\n    }\n    /**\n     * Set the value at a specific index and updates the component's refs.\n     * @param {number} index - The index to set.\n     * @param {any} value - The value to set.\n     * @returns {null|void} - Returns null if the value is invalid, otherwise void.\n     */\n    setValueAt(index, value) {\n        // temporary solution to avoid input reset\n        // on invalid date.\n        if (value === 'Invalid date') {\n            return null;\n        }\n        const parts = value.split('/');\n        let day;\n        if (this.component.dayFirst) {\n            day = parts.shift();\n        }\n        const month = parts.shift();\n        if (!this.component.dayFirst) {\n            day = parts.shift();\n        }\n        const year = parts.shift();\n        if (this.refs.day && this.showDay) {\n            this.refs.day.value = day === '00' ? '' : parseInt(day, 10);\n        }\n        if (this.refs.month && this.showMonth) {\n            this.refs.month.value = month === '00' ? '' : parseInt(month, 10);\n        }\n        if (this.refs.year && this.showYear) {\n            this.refs.year.value = year === '0000' ? '' : parseInt(year, 10);\n        }\n    }\n    getFieldValue(name) {\n        const parts = this.dataValue ? this.dataValue.split('/') : [];\n        let val = 0;\n        switch (name) {\n            case 'month':\n                val = parts[this.dayFirst ? 1 : 0];\n                break;\n            case 'day':\n                val = parts[this.dayFirst ? 0 : 1];\n                break;\n            case 'year':\n                val = parts[2];\n                break;\n        }\n        val = parseInt(val, 10);\n        return (!lodash_1.default.isNaN(val) && lodash_1.default.isNumber(val)) ? val : 0;\n    }\n    get parts() {\n        return {\n            day: this.getFieldValue('day'),\n            month: this.getFieldValue('month'),\n            year: this.getFieldValue('year'),\n        };\n    }\n    /**\n     * Get the format for the value string.\n     * @returns {string} - the format for the value string.\n     */\n    get format() {\n        let format = '';\n        if (this.component.dayFirst && this.showDay) {\n            format += 'D/';\n        }\n        if (this.showMonth) {\n            format += 'M/';\n        }\n        if (!this.component.dayFirst && this.showDay) {\n            format += 'D/';\n        }\n        if (this.showYear) {\n            format += 'YYYY';\n            return format;\n        }\n        else {\n            // Trim off the \"/\" from the end of the format string.\n            return format.length ? format.substring(0, format.length - 1) : format;\n        }\n    }\n    /**\n     * Return the date for this component.\n     * @param {any} value - The value to convert to a date.\n     * @returns {null|string} - The date string.\n     */\n    getDate(value) {\n        let defaults = [], day, month, year;\n        // Map positions to identifiers to get default values for each part of day\n        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        const defaultValue = value || this.component.defaultValue;\n        if (defaultValue) {\n            defaults = defaultValue.split('/').map(x => parseInt(x, 10));\n        }\n        if (this.showDay && this.refs.day) {\n            day = parseInt(this.refs.day.value, 10);\n        }\n        if (day === undefined || lodash_1.default.isNaN(day)) {\n            day = defaults[DAY] && !lodash_1.default.isNaN(defaults[DAY]) ? defaults[DAY] : 0;\n        }\n        if (this.showMonth && this.refs.month) {\n            // Months are 0 indexed.\n            month = parseInt(this.refs.month.value, 10);\n        }\n        if (month === undefined || lodash_1.default.isNaN(month)) {\n            month = defaults[MONTH] && !lodash_1.default.isNaN(defaults[MONTH]) ? defaults[MONTH] : 0;\n        }\n        if (this.showYear && this.refs.year) {\n            year = parseInt(this.refs.year.value);\n        }\n        if (year === undefined || lodash_1.default.isNaN(year)) {\n            year = defaults[YEAR] && !lodash_1.default.isNaN(defaults[YEAR]) ? defaults[YEAR] : 0;\n        }\n        let result;\n        if (!day && !month && !year) {\n            return null;\n        }\n        // add trailing zeros if the data is showed\n        day = this.showDay ? day.toString().padStart(2, 0) : '';\n        month = this.showMonth ? month.toString().padStart(2, 0) : '';\n        year = this.showYear ? year.toString().padStart(4, 0) : '';\n        if (this.component.dayFirst) {\n            result = `${day}${this.showDay && this.showMonth || this.showDay && this.showYear ? '/' : ''}${month}${this.showMonth && this.showYear ? '/' : ''}${year}`;\n        }\n        else {\n            result = `${month}${this.showDay && this.showMonth || this.showMonth && this.showYear ? '/' : ''}${day}${this.showDay && this.showYear ? '/' : ''}${year}`;\n        }\n        return result;\n    }\n    /**\n     * Return the date string for this component.\n     * @returns {string|null} - The date string for this component.\n     */\n    get date() {\n        return this.getDate();\n    }\n    /**\n     * Return the raw value.\n     * @returns {string} - The raw value of the component.\n     */\n    get validationValue() {\n        return this.dataValue;\n    }\n    getValue() {\n        const result = super.getValue();\n        return (!result) ? this.dataValue : result;\n    }\n    /**\n     * Get the value at a specific index.\n     * @param {number} index - The index to get the value from.\n     * @returns {*} - The value at index.\n     */\n    getValueAt(index) {\n        const date = this.date || this.emptyValue;\n        if (date) {\n            this.refs.input[index].value = date;\n            return this.refs.input[index].value;\n        }\n        else {\n            this.refs.input[index].value = '';\n            return null;\n        }\n    }\n    /**\n     * Get the input value of the date.\n     * @param {any} value - The value to convert to a string.\n     * @returns {string|null} - The string value of the date.\n     */\n    getValueAsString(value) {\n        return this.getDate(value) || '';\n    }\n    focus(field) {\n        var _a, _b, _c;\n        if (field && typeof field === 'string' && this.refs[field]) {\n            this.refs[field].focus();\n        }\n        else if (this.dayFirst && this.showDay || !this.dayFirst && !this.showMonth && this.showDay) {\n            (_a = this.refs.day) === null || _a === void 0 ? void 0 : _a.focus();\n        }\n        else if (this.dayFirst && !this.showDay && this.showMonth || !this.dayFirst && this.showMonth) {\n            (_b = this.refs.month) === null || _b === void 0 ? void 0 : _b.focus();\n        }\n        else if (!this.showDay && !this.showDay && this.showYear) {\n            (_c = this.refs.year) === null || _c === void 0 ? void 0 : _c.focus();\n        }\n    }\n    restoreCaretPosition() {\n        var _a;\n        if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.currentSelection) {\n            const { selection, index } = this.root.currentSelection;\n            if (this.refs[index]) {\n                const input = this.refs[index];\n                const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test((i === null || i === void 0 ? void 0 : i.type) || '');\n                if (isInputRangeSelectable(input)) {\n                    input.setSelectionRange(...selection);\n                }\n            }\n        }\n    }\n    isPartialDay(value) {\n        if (!value) {\n            return false;\n        }\n        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];\n        const values = value.split('/');\n        return (values[DAY] === '00' || values[MONTH] === '00' || values[YEAR] === '0000');\n    }\n    getValidationFormat() {\n        return this.dayFirst ? 'DD-MM-YYYY' : 'MM-DD-YYYY';\n    }\n}\nexports[\"default\"] = DayComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/day/Day.js?");
 
 /***/ }),
 
@@ -5720,7 +5720,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = {\n    unsavedRowsError: 'Please save all rows before proceeding.',\n    invalidRowsError: 'Please correct invalid rows before proceeding.',\n    invalidRowError: 'Invalid row. Please correct it or delete.',\n    invalidOption: '{{field}} is an invalid value.',\n    invalidDay: '{{field}} is not a valid day.',\n    alertMessageWithLabel: '{{label}}: {{message}}',\n    alertMessage: '{{message}}',\n    complete: 'Submission Complete',\n    error: 'Please fix the following errors before submitting.',\n    errorListHotkey: 'Press Ctrl + Alt + X to go back to the error list.',\n    errorsListNavigationMessage: 'Click to navigate to the field with following error.',\n    submitError: 'Please check the form and correct all errors before submitting.',\n    required: '{{field}} is required',\n    unique: '{{field}} must be unique',\n    array: '{{field}} must be an array',\n    array_nonempty: '{{field}} must be a non-empty array', // eslint-disable-line camelcase\n    nonarray: '{{field}} must not be an array',\n    select: '{{field}} contains an invalid selection',\n    pattern: '{{field}} does not match the pattern {{pattern}}',\n    minLength: '{{field}} must have at least {{length}} characters.',\n    maxLength: '{{field}} must have no more than {{length}} characters.',\n    minWords: '{{field}} must have at least {{length}} words.',\n    maxWords: '{{field}} must have no more than {{length}} words.',\n    min: '{{field}} cannot be less than {{min}}.',\n    max: '{{field}} cannot be greater than {{max}}.',\n    maxDate: '{{field}} should not contain date after {{- maxDate}}',\n    minDate: '{{field}} should not contain date before {{- minDate}}',\n    maxYear: '{{field}} should not contain year greater than {{maxYear}}',\n    minYear: '{{field}} should not contain year less than {{minYear}}',\n    minSelectedCount: 'You must select at least {{minCount}} items',\n    maxSelectedCount: 'You may only select up to {{maxCount}} items',\n    invalid_email: '{{field}} must be a valid email.', // eslint-disable-line camelcase\n    invalid_url: '{{field}} must be a valid url.', // eslint-disable-line camelcase\n    invalid_regex: '{{field}} does not match the pattern {{regex}}.', // eslint-disable-line camelcase\n    invalid_date: '{{field}} is not a valid date.', // eslint-disable-line camelcase\n    invalid_day: '{{field}} is not a valid day.', // eslint-disable-line camelcase\n    invalidValueProperty: 'Invalid Value Property',\n    mask: '{{field}} does not match the mask.',\n    valueIsNotAvailable: '{{ field }} is an invalid value.',\n    stripe: '{{stripe}}',\n    month: 'Month',\n    day: 'Day',\n    year: 'Year',\n    january: 'January',\n    february: 'February',\n    march: 'March',\n    april: 'April',\n    may: 'May',\n    june: 'June',\n    july: 'July',\n    august: 'August',\n    september: 'September',\n    october: 'October',\n    november: 'November',\n    december: 'December',\n    next: 'Next',\n    previous: 'Previous',\n    cancel: 'Cancel',\n    submit: 'Submit Form',\n    confirmCancel: 'Are you sure you want to cancel?',\n    saveDraftInstanceError: 'Cannot save draft because there is no formio instance.',\n    saveDraftAuthError: 'Cannot save draft unless a user is authenticated.',\n    restoreDraftInstanceError: 'Cannot restore draft because there is no formio instance.',\n    saveDraftError: 'Unable to save draft.',\n    restoreDraftError: 'Unable to restore draft.',\n    time: 'Invalid time',\n    cancelButtonAriaLabel: 'Cancel button. Click to reset the form',\n    previousButtonAriaLabel: 'Previous button. Click to go back to the previous tab',\n    nextButtonAriaLabel: 'Next button. Click to go to the next tab',\n    submitButtonAriaLabel: 'Submit Form button. Click to submit the form',\n    reCaptchaTokenValidationError: 'ReCAPTCHA: Token validation error',\n    reCaptchaTokenNotSpecifiedError: 'ReCAPTCHA: Token is not specified in submission',\n    apiKey: 'API Key is not unique: {{key}}',\n    typeRemaining: '{{ remaining }} {{ type }} remaining.',\n    typeCount: '{{ count }} {{ type }}',\n    requiredDayField: '{{ field }} is required',\n    requiredMonthField: '{{ field }} is required',\n    requiredYearField: '{{ field }} is required'\n};\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/translations/en.js?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = {\n    unsavedRowsError: 'Please save all rows before proceeding.',\n    invalidRowsError: 'Please correct invalid rows before proceeding.',\n    invalidRowError: 'Invalid row. Please correct it or delete.',\n    invalidOption: '{{field}} is an invalid value.',\n    invalidDay: '{{field}} is not a valid day.',\n    alertMessageWithLabel: '{{label}}: {{message}}',\n    alertMessage: '{{message}}',\n    complete: 'Submission Complete',\n    error: 'Please fix the following errors before submitting.',\n    errorListHotkey: 'Press Ctrl + Alt + X to go back to the error list.',\n    errorsListNavigationMessage: 'Click to navigate to the field with following error.',\n    submitError: 'Please check the form and correct all errors before submitting.',\n    required: '{{field}} is required',\n    unique: '{{field}} must be unique',\n    array: '{{field}} must be an array',\n    array_nonempty: '{{field}} must be a non-empty array', // eslint-disable-line camelcase\n    nonarray: '{{field}} must not be an array',\n    select: '{{field}} contains an invalid selection',\n    pattern: '{{field}} does not match the pattern {{pattern}}',\n    minLength: '{{field}} must have at least {{length}} characters.',\n    maxLength: '{{field}} must have no more than {{length}} characters.',\n    minWords: '{{field}} must have at least {{length}} words.',\n    maxWords: '{{field}} must have no more than {{length}} words.',\n    min: '{{field}} cannot be less than {{min}}.',\n    max: '{{field}} cannot be greater than {{max}}.',\n    maxDate: '{{field}} should not contain date after {{- maxDate}}',\n    minDate: '{{field}} should not contain date before {{- minDate}}',\n    maxYear: '{{field}} should not contain year greater than {{maxYear}}',\n    minYear: '{{field}} should not contain year less than {{minYear}}',\n    minSelectedCount: 'You must select at least {{minCount}} items',\n    maxSelectedCount: 'You may only select up to {{maxCount}} items',\n    invalid_email: '{{field}} must be a valid email.', // eslint-disable-line camelcase\n    invalid_url: '{{field}} must be a valid url.', // eslint-disable-line camelcase\n    invalid_regex: '{{field}} does not match the pattern {{regex}}.', // eslint-disable-line camelcase\n    invalid_date: '{{field}} is not a valid date.', // eslint-disable-line camelcase\n    invalid_day: '{{field}} is not a valid day.', // eslint-disable-line camelcase\n    invalidValueProperty: 'Invalid Value Property',\n    mask: '{{field}} does not match the mask.',\n    valueIsNotAvailable: '{{ field }} is an invalid value.',\n    stripe: '{{stripe}}',\n    month: 'Month',\n    day: 'Day',\n    year: 'Year',\n    january: 'January',\n    february: 'February',\n    march: 'March',\n    april: 'April',\n    may: 'May',\n    june: 'June',\n    july: 'July',\n    august: 'August',\n    september: 'September',\n    october: 'October',\n    november: 'November',\n    december: 'December',\n    next: 'Next',\n    previous: 'Previous',\n    cancel: 'Cancel',\n    submit: 'Submit Form',\n    confirmCancel: 'Are you sure you want to cancel?',\n    saveDraftInstanceError: 'Cannot save draft because there is no formio instance.',\n    saveDraftAuthError: 'Cannot save draft unless a user is authenticated.',\n    restoreDraftInstanceError: 'Cannot restore draft because there is no formio instance.',\n    saveDraftError: 'Unable to save draft.',\n    restoreDraftError: 'Unable to restore draft.',\n    time: 'Invalid time',\n    cancelButtonAriaLabel: 'Cancel button. Click to reset the form',\n    previousButtonAriaLabel: 'Previous button. Click to go back to the previous tab',\n    nextButtonAriaLabel: 'Next button. Click to go to the next tab',\n    submitButtonAriaLabel: 'Submit Form button. Click to submit the form',\n    reCaptchaTokenValidationError: 'ReCAPTCHA: Token validation error',\n    reCaptchaTokenNotSpecifiedError: 'ReCAPTCHA: Token is not specified in submission',\n    apiKey: 'API Key is not unique: {{key}}',\n    typeRemaining: '{{ remaining }} {{ type }} remaining.',\n    typeCount: '{{ count }} {{ type }}',\n    requiredDayField: '{{ field }} is required',\n    requiredDayEmpty: '{{ field }} is required',\n    requiredMonthField: '{{ field }} is required',\n    requiredYearField: '{{ field }} is required'\n};\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/translations/en.js?");
 
 /***/ }),