@formio/js 5.1.0-dev.6058.189ce78 → 5.1.0-dev.6060.19e3bfc

package/dist/formio.full.js

@@ -5699,7 +5699,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Components_1 = __importDefault(__webpack_require__(/*! ../../Components */ \"./lib/cjs/components/Components.js\"));\n/**\n * The Edit Form function.\n * @param {...any} extend - The components that extend the edit form.\n * @returns {import('@formio/core').Component[]} - The edit form components.\n */\nfunction default_1(...extend) {\n    return Components_1.default.baseEditForm([\n        {\n            key: 'data',\n            ignore: true\n        },\n        {\n            key: 'validation',\n            ignore: true\n        }\n    ], ...extend);\n}\nexports[\"default\"] = default_1;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/nested/NestedComponent.form.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Components_1 = __importDefault(__webpack_require__(/*! ../../Components */ \"./lib/cjs/components/Components.js\"));\n/**\n * The Edit Form function.\n * @param {...any} extend - The components that extend the edit form.\n * @returns {import('@formio/core').Component[]} - The edit form components.\n */\nfunction default_1(...extend) {\n    return Components_1.default.baseEditForm([\n        {\n            key: 'display',\n            components: [\n                {\n                    key: 'labelWidth',\n                    ignore: true\n                },\n                {\n                    key: 'labelMargin',\n                    ignore: true\n                }\n            ]\n        },\n        {\n            key: 'data',\n            ignore: true\n        },\n        {\n            key: 'validation',\n            ignore: true\n        }\n    ], ...extend);\n}\nexports[\"default\"] = default_1;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/nested/NestedComponent.form.js?");
 
 /***/ }),
 
@@ -5754,7 +5754,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.AddressComponentMode = void 0;\nconst autocompleter_1 = __importDefault(__webpack_require__(/*! autocompleter */ \"./node_modules/autocompleter/autocomplete.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst GoogleAddressProvider_1 = __webpack_require__(/*! ../../providers/address/GoogleAddressProvider */ \"./lib/cjs/providers/address/GoogleAddressProvider.js\");\nconst Field_1 = __importDefault(__webpack_require__(/*! ../_classes/field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst NestedComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/nested/NestedComponent */ \"./lib/cjs/components/_classes/nested/NestedComponent.js\"));\nconst Container_1 = __importDefault(__webpack_require__(/*! ../container/Container */ \"./lib/cjs/components/container/Container.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nexports.AddressComponentMode = {\n    Autocomplete: 'autocomplete',\n    Manual: 'manual',\n};\nconst RemoveValueIconHiddenClass = 'address-autocomplete-remove-value-icon--hidden';\nconst ChildConditional = 'show = _.get(instance, \\'parent.manualMode\\', false);';\nclass AddressComponent extends Container_1.default {\n    static schema(...extend) {\n        return Container_1.default.schema({\n            type: 'address',\n            label: 'Address',\n            key: 'address',\n            switchToManualModeLabel: 'Can\\'t find address? Switch to manual mode.',\n            provider: '',\n            manualModeViewString: '',\n            hideLabel: false,\n            disableClearIcon: false,\n            enableManualMode: false,\n            components: [\n                {\n                    label: 'Address 1',\n                    tableView: false,\n                    key: 'address1',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'Address 2',\n                    tableView: false,\n                    key: 'address2',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'City',\n                    tableView: false,\n                    key: 'city',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'State',\n                    tableView: false,\n                    key: 'state',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'Country',\n                    tableView: false,\n                    key: 'country',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'Zip Code',\n                    tableView: false,\n                    key: 'zip',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n            ],\n        }, ...extend);\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];\n    }\n    static get builderInfo() {\n        return {\n            title: 'Address',\n            group: 'advanced',\n            icon: 'home',\n            documentation: '/userguide/form-building/advanced-components#address',\n            weight: 35,\n            schema: AddressComponent.schema(),\n        };\n    }\n    static get serverConditionSettings() {\n        return AddressComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEmpty', 'isNotEmpty'] });\n    }\n    mergeSchema(component = {}) {\n        let { defaultSchema } = this;\n        if (component.components) {\n            defaultSchema = lodash_1.default.omit(defaultSchema, 'components');\n        }\n        return lodash_1.default.defaultsDeep(component, defaultSchema);\n    }\n    init() {\n        this.components = this.components || [];\n        if (this.builderMode || this.manualModeEnabled) {\n            NestedComponent_1.default.prototype.addComponents.call(this, this.manualMode ? this.address : {});\n        }\n        Field_1.default.prototype.init.call(this);\n        let provider = this.component.provider;\n        const providerOptions = this.providerOptions;\n        const map = this.component.map;\n        if (!this.builderMode) {\n            if (provider) {\n                if (lodash_1.default.get(providerOptions, 'params.subscriptionKey')) {\n                    lodash_1.default.set(providerOptions, \"params['subscription-key']\", lodash_1.default.get(providerOptions, 'params.subscriptionKey'));\n                    lodash_1.default.unset(providerOptions, 'params.subscriptionKey');\n                }\n                this.provider = this.initializeProvider(provider, providerOptions);\n            }\n            else if (map) {\n                // Fallback to legacy version where Google Maps was the only provider.\n                provider = this.component.provider = GoogleAddressProvider_1.GoogleAddressProvider.name;\n                const { key, region, } = map;\n                if (key) {\n                    lodash_1.default.set(providerOptions, 'params.key', key);\n                }\n                if (region) {\n                    lodash_1.default.set(providerOptions, 'params.region', region);\n                }\n                this.provider = this.initializeProvider(provider, providerOptions);\n            }\n        }\n    }\n    initializeProvider(provider, options = {}) {\n        const url = this.interpolate(options.url);\n        const Provider = Formio_1.Formio.Providers.getProvider('address', provider);\n        return new Provider(Object.assign(Object.assign({}, options), { url }));\n    }\n    get emptyValue() {\n        return this.manualModeEnabled\n            ? {\n                mode: exports.AddressComponentMode.Autocomplete,\n                address: {},\n            }\n            : {};\n    }\n    get mode() {\n        var _a, _b;\n        if (!this.manualModeEnabled) {\n            return exports.AddressComponentMode.Autocomplete;\n        }\n        return (_b = (_a = this.dataValue) === null || _a === void 0 ? void 0 : _a.mode) !== null && _b !== void 0 ? _b : exports.AddressComponentMode.Autocomplete;\n    }\n    set mode(value) {\n        if (this.manualModeEnabled) {\n            this.dataValue.mode = value;\n        }\n    }\n    get autocompleteMode() {\n        return this.mode === exports.AddressComponentMode.Autocomplete;\n    }\n    get manualMode() {\n        return this.mode === exports.AddressComponentMode.Manual;\n    }\n    get manualModeEnabled() {\n        return !this.isMultiple && Boolean(this.component.enableManualMode);\n    }\n    restoreComponentsContext() {\n        this.getComponents().forEach((component) => {\n            component.data = this.address;\n            component.setValue(component.dataValue, {\n                noUpdateEvent: true,\n            });\n        });\n    }\n    get isMultiple() {\n        return Boolean(this.component.multiple);\n    }\n    get address() {\n        if (this.isMultiple) {\n            return lodash_1.default.isArray(this.dataValue) ? this.dataValue : [this.dataValue];\n        }\n        // Manual mode is not implementing for multiple value\n        return (this.manualModeEnabled && this.dataValue) ? this.dataValue.address : this.dataValue;\n    }\n    set address(value) {\n        if (this.manualModeEnabled && !this.isMultiple && !lodash_1.default.isEqual(value, this.emptyValue)) {\n            this.dataValue.address = value;\n        }\n        else {\n            this.dataValue = value;\n        }\n    }\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (this.isMultiple) {\n            defaultValue = lodash_1.default.isArray(defaultValue) ? defaultValue : [defaultValue];\n        }\n        return defaultValue;\n    }\n    get defaultSchema() {\n        return AddressComponent.schema();\n    }\n    isValueInLegacyFormat(value) {\n        return value && !value.mode;\n    }\n    set dataValue(value) {\n        super.dataValue = value;\n    }\n    get dataValue() {\n        const resultValue = lodash_1.default.get(this._data, this.path);\n        if (!lodash_1.default.isArray(resultValue) && this.component.multiple) {\n            return [resultValue];\n        }\n        return super.dataValue;\n    }\n    normalizeValue(value) {\n        return (this.manualModeEnabled && this.isValueInLegacyFormat(value))\n            ? {\n                mode: exports.AddressComponentMode.Autocomplete,\n                address: value,\n            }\n            : value;\n    }\n    setValue(value, flags = {}) {\n        const changed = Field_1.default.prototype.setValue.call(this, value, flags);\n        if (this.manualMode) {\n            this.restoreComponentsContext();\n        }\n        if (changed || !lodash_1.default.isEmpty(value) && flags.fromSubmission) {\n            this.redraw();\n        }\n        return changed;\n    }\n    static get modeSwitcherRef() {\n        return 'modeSwitcher';\n    }\n    static get removeValueIconRef() {\n        return 'removeValueIcon';\n    }\n    static get searchInputRef() {\n        return 'searchInput';\n    }\n    static get addRowButtonRef() {\n        return 'addButton';\n    }\n    static get removeRowButtonRef() {\n        return 'removeRow';\n    }\n    get modeSwitcher() {\n        return this.refs\n            ? (this.refs[AddressComponent.modeSwitcherRef] || null)\n            : null;\n    }\n    get providerOptions() {\n        return {\n            params: Object.assign({ subscriptionKey: this.component.subscriptionKey, key: this.component.apiKey }, this.component.params),\n            url: this.component.url,\n            queryProperty: this.component.queryProperty,\n            responseProperty: this.component.responseProperty,\n            displayValueProperty: this.component.displayValueProperty,\n            autocompleteOptions: this.component.autocompleteOptions\n        };\n    }\n    get removeValueIcon() {\n        return this.refs\n            ? (this.refs[AddressComponent.removeValueIconRef] || null)\n            : null;\n    }\n    get searchInput() {\n        return this.refs\n            ? (this.refs[AddressComponent.searchInputRef] || null)\n            : null;\n    }\n    get addRowButton() {\n        return this.refs\n            ? (this.refs[AddressComponent.addRowButtonRef] || null)\n            : null;\n    }\n    get removeRowButton() {\n        return this.refs\n            ? (this.refs[AddressComponent.removeRowButtonRef] || null)\n            : null;\n    }\n    get searchInputAttributes() {\n        const attr = {\n            name: this.options.name,\n            type: 'text',\n            class: 'form-control',\n            lang: this.options.language,\n            tabindex: this.component.tabindex || 0,\n        };\n        if (this.component.placeholder) {\n            attr.placeholder = this.t(this.component.placeholder), { _userInput: true };\n        }\n        if (this.disabled) {\n            attr.disabled = 'disabled';\n        }\n        lodash_1.default.defaults(attr, this.component.attributes);\n        return attr;\n    }\n    get templateName() {\n        return 'address';\n    }\n    get gridTemplateName() {\n        return 'multiValueTable';\n    }\n    get rowTemplateName() {\n        return 'multiValueRow';\n    }\n    get hasChildren() {\n        return !this.isMultiple && (this.builderMode || this.manualModeEnabled);\n    }\n    get addAnother() {\n        return this.t(this.component.addAnother || 'addAnother');\n    }\n    renderElement(value) {\n        return this.renderTemplate(this.templateName, {\n            children: this.hasChildren ? this.renderComponents() : '',\n            nestedKey: this.nestedKey,\n            inputAttributes: this.searchInputAttributes,\n            ref: {\n                modeSwitcher: AddressComponent.modeSwitcherRef,\n                removeValueIcon: AddressComponent.removeValueIconRef,\n                searchInput: AddressComponent.searchInputRef,\n            },\n            displayValue: this.getDisplayValue(value),\n            mode: {\n                autocomplete: this.autocompleteMode,\n                manual: this.manualMode,\n            },\n        });\n    }\n    renderRow(value, index) {\n        return this.renderTemplate(this.rowTemplateName, {\n            index,\n            disabled: this.disabled,\n            element: `${this.renderElement(value, index)}`,\n        });\n    }\n    renderGrid() {\n        return this.renderTemplate(this.gridTemplateName, {\n            rows: this.address.map(this.renderRow.bind(this)).join(''),\n            disabled: this.disabled,\n            addAnother: this.addAnother,\n        });\n    }\n    render() {\n        if (this.isMultiple) {\n            return super.render(this.renderGrid());\n        }\n        return super.render(this.renderElement());\n    }\n    onSelectAddress(address, element, index) {\n        if (this.isMultiple) {\n            this.address[index] = address;\n            this.address = [...this.address];\n        }\n        else {\n            this.address = address;\n        }\n        this.triggerChange({\n            modified: true,\n        });\n        if (element) {\n            element.value = this.getDisplayValue(this.isMultiple ? this.address[index] : this.address);\n        }\n        this.updateRemoveIcon(index);\n    }\n    addRow() {\n        this.address = this.address.concat(this.emptyValue);\n        super.redraw();\n    }\n    attach(element) {\n        const result = ((this.builderMode || this.manualMode) ? super.attach : Field_1.default.prototype.attach).call(this, element);\n        if (!this.builderMode) {\n            if (!this.provider && this.component.provider) {\n                const provider = this.component.provider;\n                const providerOptions = this.providerOptions;\n                this.provider = this.initializeProvider(provider, providerOptions);\n            }\n        }\n        this.loadRefs(element, {\n            [AddressComponent.addRowButtonRef]: 'single',\n            [AddressComponent.modeSwitcherRef]: 'single',\n            [AddressComponent.removeRowButtonRef]: 'multiple',\n            [AddressComponent.removeValueIconRef]: 'multiple',\n            [AddressComponent.searchInputRef]: 'multiple',\n        });\n        this.searchInput.forEach((element, index) => {\n            if (!this.builderMode && element && this.provider) {\n                if (this.component.provider === 'google') {\n                    this.provider.attachAutocomplete(element, index, this.onSelectAddress.bind(this));\n                }\n                else {\n                    (0, autocompleter_1.default)({\n                        input: element,\n                        debounceWaitMs: 300,\n                        fetch: (text, update) => {\n                            const query = text;\n                            this.provider.search(query).then(update);\n                        },\n                        render: (address) => {\n                            const div = this.ce('div');\n                            div.textContent = this.getDisplayValue(address);\n                            return div;\n                        },\n                        onSelect: (address) => {\n                            this.onSelectAddress(address, element, index);\n                        },\n                    });\n                }\n                this.addEventListener(element, 'blur', () => {\n                    if (!element) {\n                        return;\n                    }\n                    if (element.value) {\n                        element.value = this.getDisplayValue(this.isMultiple ? this.address[index] : this.address);\n                    }\n                });\n                this.addEventListener(element, 'keyup', () => {\n                    if (!element) {\n                        return;\n                    }\n                    if (!element.value) {\n                        this.clearAddress(element, index);\n                    }\n                });\n            }\n        });\n        if (this.addRowButton) {\n            this.addEventListener(this.addRowButton, 'click', event => {\n                event.preventDefault();\n                this.addRow();\n            });\n        }\n        this.removeRowButton.forEach((removeRowButton, index) => {\n            this.addEventListener(removeRowButton, 'click', event => {\n                event.preventDefault();\n                this.removeValue(index);\n            });\n        });\n        if (this.modeSwitcher) {\n            this.addEventListener(this.modeSwitcher, 'change', () => {\n                if (!this.modeSwitcher) {\n                    return;\n                }\n                this.dataValue = this.emptyValue;\n                this.mode = this.modeSwitcher.checked\n                    ? exports.AddressComponentMode.Manual\n                    : exports.AddressComponentMode.Autocomplete;\n                if (!this.builderMode) {\n                    if (this.manualMode) {\n                        this.restoreComponentsContext();\n                    }\n                    this.triggerChange({\n                        modified: true,\n                    });\n                }\n                this.redraw();\n            });\n        }\n        if (!this.builderMode) {\n            this.removeValueIcon.forEach((removeValueIcon, index) => {\n                this.updateRemoveIcon(index);\n                const removeValueHandler = () => {\n                    var _a;\n                    const searchInput = (_a = this.searchInput) === null || _a === void 0 ? void 0 : _a[index];\n                    this.clearAddress(searchInput, index);\n                    if (searchInput) {\n                        searchInput.focus();\n                    }\n                };\n                this.addEventListener(removeValueIcon, 'click', removeValueHandler);\n                this.addEventListener(removeValueIcon, 'keydown', ({ key }) => {\n                    if (key === 'Enter') {\n                        removeValueHandler();\n                    }\n                });\n            });\n            lodash_1.default.each(this.refs.searchInput || [], el => this.addFocusBlurEvents(el));\n        }\n        return result;\n    }\n    addChildComponent(component) {\n        component.customConditional = ChildConditional;\n    }\n    redraw() {\n        const modeSwitcherInFocus = (this.modeSwitcher && (document.activeElement === this.modeSwitcher));\n        return super.redraw()\n            .then((result) => {\n            if (modeSwitcherInFocus && this.modeSwitcher) {\n                this.modeSwitcher.focus();\n            }\n            return result;\n        });\n    }\n    clearAddress(element, index) {\n        var _a;\n        if (!this.isEmpty()) {\n            this.triggerChange();\n        }\n        if ((_a = this.address) === null || _a === void 0 ? void 0 : _a[index]) {\n            this.address[index] = this.emptyValue;\n        }\n        else {\n            this.address = this.emptyValue;\n        }\n        if (element) {\n            element.value = '';\n        }\n        this.updateRemoveIcon(index);\n    }\n    getDisplayValue(value = this.address) {\n        return (this.provider && !this.manualMode)\n            ? this.provider.getDisplayValue(value)\n            : '';\n    }\n    validateMultiple() {\n        return this.isMultiple;\n    }\n    updateRemoveIcon(index) {\n        var _a;\n        const removeValueIcon = (_a = this.removeValueIcon) === null || _a === void 0 ? void 0 : _a[index];\n        if (removeValueIcon) {\n            const value = this.isMultiple ? this.address[index] : this.address;\n            if (this.isEmpty(value) || this.disabled) {\n                this.addClass(removeValueIcon, RemoveValueIconHiddenClass);\n            }\n            else {\n                this.removeClass(removeValueIcon, RemoveValueIconHiddenClass);\n            }\n        }\n    }\n    getValueAsString(value, options) {\n        if (!value) {\n            return '';\n        }\n        const normalizedValue = this.normalizeValue(value);\n        const { address, mode, } = (this.manualModeEnabled\n            ? normalizedValue\n            : {\n                address: normalizedValue,\n                mode: exports.AddressComponentMode.Autocomplete,\n            });\n        const valueInManualMode = (mode === exports.AddressComponentMode.Manual);\n        if (this.provider && !valueInManualMode) {\n            return this.getDisplayValue(address);\n        }\n        if (valueInManualMode) {\n            if (this.component.manualModeViewString) {\n                return this.interpolate(this.component.manualModeViewString, {\n                    address,\n                    data: this.data,\n                    component: this.component,\n                });\n            }\n            return this.getComponents()\n                .filter((component) => component.hasValue(address))\n                .map((component) => [component, lodash_1.default.get(address, component.key)])\n                .filter(([component, componentValue]) => !component.isEmpty(componentValue))\n                .map(([component, componentValue]) => component.getValueAsString(componentValue, options))\n                .join(', ');\n        }\n        return super.getValueAsString(address, options);\n    }\n    focus() {\n        if (this.searchInput && this.searchInput[0]) {\n            this.searchInput[0].focus();\n        }\n    }\n}\nexports[\"default\"] = AddressComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/address/Address.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.AddressComponentMode = void 0;\nconst autocompleter_1 = __importDefault(__webpack_require__(/*! autocompleter */ \"./node_modules/autocompleter/autocomplete.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst GoogleAddressProvider_1 = __webpack_require__(/*! ../../providers/address/GoogleAddressProvider */ \"./lib/cjs/providers/address/GoogleAddressProvider.js\");\nconst Field_1 = __importDefault(__webpack_require__(/*! ../_classes/field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst NestedComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/nested/NestedComponent */ \"./lib/cjs/components/_classes/nested/NestedComponent.js\"));\nconst Container_1 = __importDefault(__webpack_require__(/*! ../container/Container */ \"./lib/cjs/components/container/Container.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nexports.AddressComponentMode = {\n    Autocomplete: 'autocomplete',\n    Manual: 'manual',\n};\nconst RemoveValueIconHiddenClass = 'address-autocomplete-remove-value-icon--hidden';\nconst ChildConditional = 'show = _.get(instance, \\'parent.manualMode\\', false);';\nclass AddressComponent extends Container_1.default {\n    static schema(...extend) {\n        return Container_1.default.schema({\n            type: 'address',\n            label: 'Address',\n            key: 'address',\n            switchToManualModeLabel: 'Can\\'t find address? Switch to manual mode.',\n            provider: '',\n            manualModeViewString: '',\n            hideLabel: false,\n            disableClearIcon: false,\n            enableManualMode: false,\n            components: [\n                {\n                    label: 'Address 1',\n                    tableView: false,\n                    key: 'address1',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'Address 2',\n                    tableView: false,\n                    key: 'address2',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'City',\n                    tableView: false,\n                    key: 'city',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'State',\n                    tableView: false,\n                    key: 'state',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'Country',\n                    tableView: false,\n                    key: 'country',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n                {\n                    label: 'Zip Code',\n                    tableView: false,\n                    key: 'zip',\n                    type: 'textfield',\n                    input: true,\n                    customConditional: ChildConditional,\n                },\n            ],\n        }, ...extend);\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];\n    }\n    static get builderInfo() {\n        return {\n            title: 'Address',\n            group: 'advanced',\n            icon: 'home',\n            documentation: '/userguide/form-building/advanced-components#address',\n            weight: 35,\n            schema: AddressComponent.schema(),\n        };\n    }\n    static get serverConditionSettings() {\n        return AddressComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEmpty', 'isNotEmpty'] });\n    }\n    mergeSchema(component = {}) {\n        let { defaultSchema } = this;\n        if (component.components) {\n            defaultSchema = lodash_1.default.omit(defaultSchema, 'components');\n        }\n        return lodash_1.default.defaultsDeep(component, defaultSchema);\n    }\n    init() {\n        this.components = this.components || [];\n        if (this.builderMode || this.manualModeEnabled) {\n            NestedComponent_1.default.prototype.addComponents.call(this, this.manualMode ? this.address : {});\n        }\n        Field_1.default.prototype.init.call(this);\n        // Added for backwards compatibility\n        if (this.component.providerOptions) {\n            const { params, url, queryProperty, responseProperty, displayValueProperty } = this.component.providerOptions;\n            const key = params === null || params === void 0 ? void 0 : params.key;\n            const autocompleteOptions = params === null || params === void 0 ? void 0 : params.autocompleteOptions;\n            delete this.component.providerOptions;\n            this.component.url = url;\n            this.component.queryProperty = queryProperty;\n            this.component.responseProperty = responseProperty;\n            this.component.displayValueProperty = displayValueProperty;\n            this.component.apiKey = key;\n            this.component.autocompleteOptions = autocompleteOptions;\n        }\n        let provider = this.component.provider;\n        const providerOptions = this.providerOptions;\n        const map = this.component.map;\n        if (!this.builderMode) {\n            if (provider) {\n                if (lodash_1.default.get(providerOptions, 'params.subscriptionKey')) {\n                    lodash_1.default.set(providerOptions, \"params['subscription-key']\", lodash_1.default.get(providerOptions, 'params.subscriptionKey'));\n                    lodash_1.default.unset(providerOptions, 'params.subscriptionKey');\n                }\n                this.provider = this.initializeProvider(provider, providerOptions);\n            }\n            else if (map) {\n                // Fallback to legacy version where Google Maps was the only provider.\n                provider = this.component.provider = GoogleAddressProvider_1.GoogleAddressProvider.name;\n                const { key, region, } = map;\n                if (key) {\n                    lodash_1.default.set(providerOptions, 'params.key', key);\n                }\n                if (region) {\n                    lodash_1.default.set(providerOptions, 'params.region', region);\n                }\n                this.provider = this.initializeProvider(provider, providerOptions);\n            }\n        }\n    }\n    initializeProvider(provider, options = {}) {\n        const url = this.interpolate(options.url);\n        const Provider = Formio_1.Formio.Providers.getProvider('address', provider);\n        return new Provider(Object.assign(Object.assign({}, options), { url }));\n    }\n    get emptyValue() {\n        return this.manualModeEnabled\n            ? {\n                mode: exports.AddressComponentMode.Autocomplete,\n                address: {},\n            }\n            : {};\n    }\n    get mode() {\n        var _a, _b;\n        if (!this.manualModeEnabled) {\n            return exports.AddressComponentMode.Autocomplete;\n        }\n        return (_b = (_a = this.dataValue) === null || _a === void 0 ? void 0 : _a.mode) !== null && _b !== void 0 ? _b : exports.AddressComponentMode.Autocomplete;\n    }\n    set mode(value) {\n        if (this.manualModeEnabled) {\n            this.dataValue.mode = value;\n        }\n    }\n    get autocompleteMode() {\n        return this.mode === exports.AddressComponentMode.Autocomplete;\n    }\n    get manualMode() {\n        return this.mode === exports.AddressComponentMode.Manual;\n    }\n    get manualModeEnabled() {\n        return !this.isMultiple && Boolean(this.component.enableManualMode);\n    }\n    restoreComponentsContext() {\n        this.getComponents().forEach((component) => {\n            component.data = this.address;\n            component.setValue(component.dataValue, {\n                noUpdateEvent: true,\n            });\n        });\n    }\n    get isMultiple() {\n        return Boolean(this.component.multiple);\n    }\n    get address() {\n        if (this.isMultiple) {\n            return lodash_1.default.isArray(this.dataValue) ? this.dataValue : [this.dataValue];\n        }\n        // Manual mode is not implementing for multiple value\n        return (this.manualModeEnabled && this.dataValue) ? this.dataValue.address : this.dataValue;\n    }\n    set address(value) {\n        if (this.manualModeEnabled && !this.isMultiple && !lodash_1.default.isEqual(value, this.emptyValue)) {\n            this.dataValue.address = value;\n        }\n        else {\n            this.dataValue = value;\n        }\n    }\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (this.isMultiple) {\n            defaultValue = lodash_1.default.isArray(defaultValue) ? defaultValue : [defaultValue];\n        }\n        return defaultValue;\n    }\n    get defaultSchema() {\n        return AddressComponent.schema();\n    }\n    isValueInLegacyFormat(value) {\n        return value && !value.mode;\n    }\n    set dataValue(value) {\n        super.dataValue = value;\n    }\n    get dataValue() {\n        const resultValue = lodash_1.default.get(this._data, this.path);\n        if (!lodash_1.default.isArray(resultValue) && this.component.multiple) {\n            return [resultValue];\n        }\n        return super.dataValue;\n    }\n    normalizeValue(value) {\n        return (this.manualModeEnabled && this.isValueInLegacyFormat(value))\n            ? {\n                mode: exports.AddressComponentMode.Autocomplete,\n                address: value,\n            }\n            : value;\n    }\n    setValue(value, flags = {}) {\n        const changed = Field_1.default.prototype.setValue.call(this, value, flags);\n        if (this.manualMode) {\n            this.restoreComponentsContext();\n        }\n        if (changed || !lodash_1.default.isEmpty(value) && flags.fromSubmission) {\n            this.redraw();\n        }\n        return changed;\n    }\n    static get modeSwitcherRef() {\n        return 'modeSwitcher';\n    }\n    static get removeValueIconRef() {\n        return 'removeValueIcon';\n    }\n    static get searchInputRef() {\n        return 'searchInput';\n    }\n    static get addRowButtonRef() {\n        return 'addButton';\n    }\n    static get removeRowButtonRef() {\n        return 'removeRow';\n    }\n    get modeSwitcher() {\n        return this.refs\n            ? (this.refs[AddressComponent.modeSwitcherRef] || null)\n            : null;\n    }\n    get providerOptions() {\n        return {\n            params: Object.assign({ subscriptionKey: this.component.subscriptionKey, key: this.component.apiKey }, this.component.params),\n            url: this.component.url,\n            queryProperty: this.component.queryProperty,\n            responseProperty: this.component.responseProperty,\n            displayValueProperty: this.component.displayValueProperty,\n            autocompleteOptions: this.component.autocompleteOptions\n        };\n    }\n    get removeValueIcon() {\n        return this.refs\n            ? (this.refs[AddressComponent.removeValueIconRef] || null)\n            : null;\n    }\n    get searchInput() {\n        return this.refs\n            ? (this.refs[AddressComponent.searchInputRef] || null)\n            : null;\n    }\n    get addRowButton() {\n        return this.refs\n            ? (this.refs[AddressComponent.addRowButtonRef] || null)\n            : null;\n    }\n    get removeRowButton() {\n        return this.refs\n            ? (this.refs[AddressComponent.removeRowButtonRef] || null)\n            : null;\n    }\n    get searchInputAttributes() {\n        const attr = {\n            name: this.options.name,\n            type: 'text',\n            class: 'form-control',\n            lang: this.options.language,\n            tabindex: this.component.tabindex || 0,\n        };\n        if (this.component.placeholder) {\n            attr.placeholder = this.t(this.component.placeholder), { _userInput: true };\n        }\n        if (this.disabled) {\n            attr.disabled = 'disabled';\n        }\n        lodash_1.default.defaults(attr, this.component.attributes);\n        return attr;\n    }\n    get templateName() {\n        return 'address';\n    }\n    get gridTemplateName() {\n        return 'multiValueTable';\n    }\n    get rowTemplateName() {\n        return 'multiValueRow';\n    }\n    get hasChildren() {\n        return !this.isMultiple && (this.builderMode || this.manualModeEnabled);\n    }\n    get addAnother() {\n        return this.t(this.component.addAnother || 'addAnother');\n    }\n    renderElement(value) {\n        return this.renderTemplate(this.templateName, {\n            children: this.hasChildren ? this.renderComponents() : '',\n            nestedKey: this.nestedKey,\n            inputAttributes: this.searchInputAttributes,\n            ref: {\n                modeSwitcher: AddressComponent.modeSwitcherRef,\n                removeValueIcon: AddressComponent.removeValueIconRef,\n                searchInput: AddressComponent.searchInputRef,\n            },\n            displayValue: this.getDisplayValue(value),\n            mode: {\n                autocomplete: this.autocompleteMode,\n                manual: this.manualMode,\n            },\n        });\n    }\n    renderRow(value, index) {\n        return this.renderTemplate(this.rowTemplateName, {\n            index,\n            disabled: this.disabled,\n            element: `${this.renderElement(value, index)}`,\n        });\n    }\n    renderGrid() {\n        return this.renderTemplate(this.gridTemplateName, {\n            rows: this.address.map(this.renderRow.bind(this)).join(''),\n            disabled: this.disabled,\n            addAnother: this.addAnother,\n        });\n    }\n    render() {\n        if (this.isMultiple) {\n            return super.render(this.renderGrid());\n        }\n        return super.render(this.renderElement());\n    }\n    onSelectAddress(address, element, index) {\n        if (this.isMultiple) {\n            this.address[index] = address;\n            this.address = [...this.address];\n        }\n        else {\n            this.address = address;\n        }\n        this.triggerChange({\n            modified: true,\n        });\n        if (element) {\n            element.value = this.getDisplayValue(this.isMultiple ? this.address[index] : this.address);\n        }\n        this.updateRemoveIcon(index);\n    }\n    addRow() {\n        this.address = this.address.concat(this.emptyValue);\n        super.redraw();\n    }\n    attach(element) {\n        const result = ((this.builderMode || this.manualMode) ? super.attach : Field_1.default.prototype.attach).call(this, element);\n        if (!this.builderMode) {\n            if (!this.provider && this.component.provider) {\n                const provider = this.component.provider;\n                const providerOptions = this.providerOptions;\n                this.provider = this.initializeProvider(provider, providerOptions);\n            }\n        }\n        this.loadRefs(element, {\n            [AddressComponent.addRowButtonRef]: 'single',\n            [AddressComponent.modeSwitcherRef]: 'single',\n            [AddressComponent.removeRowButtonRef]: 'multiple',\n            [AddressComponent.removeValueIconRef]: 'multiple',\n            [AddressComponent.searchInputRef]: 'multiple',\n        });\n        this.searchInput.forEach((element, index) => {\n            if (!this.builderMode && element && this.provider) {\n                if (this.component.provider === 'google') {\n                    this.provider.attachAutocomplete(element, index, this.onSelectAddress.bind(this));\n                }\n                else {\n                    (0, autocompleter_1.default)({\n                        input: element,\n                        debounceWaitMs: 300,\n                        fetch: (text, update) => {\n                            const query = text;\n                            this.provider.search(query).then(update);\n                        },\n                        render: (address) => {\n                            const div = this.ce('div');\n                            div.textContent = this.getDisplayValue(address);\n                            return div;\n                        },\n                        onSelect: (address) => {\n                            this.onSelectAddress(address, element, index);\n                        },\n                    });\n                }\n                this.addEventListener(element, 'blur', () => {\n                    if (!element) {\n                        return;\n                    }\n                    if (element.value) {\n                        element.value = this.getDisplayValue(this.isMultiple ? this.address[index] : this.address);\n                    }\n                });\n                this.addEventListener(element, 'keyup', () => {\n                    if (!element) {\n                        return;\n                    }\n                    if (!element.value) {\n                        this.clearAddress(element, index);\n                    }\n                });\n            }\n        });\n        if (this.addRowButton) {\n            this.addEventListener(this.addRowButton, 'click', event => {\n                event.preventDefault();\n                this.addRow();\n            });\n        }\n        this.removeRowButton.forEach((removeRowButton, index) => {\n            this.addEventListener(removeRowButton, 'click', event => {\n                event.preventDefault();\n                this.removeValue(index);\n            });\n        });\n        if (this.modeSwitcher) {\n            this.addEventListener(this.modeSwitcher, 'change', () => {\n                if (!this.modeSwitcher) {\n                    return;\n                }\n                this.dataValue = this.emptyValue;\n                this.mode = this.modeSwitcher.checked\n                    ? exports.AddressComponentMode.Manual\n                    : exports.AddressComponentMode.Autocomplete;\n                if (!this.builderMode) {\n                    if (this.manualMode) {\n                        this.restoreComponentsContext();\n                    }\n                    this.triggerChange({\n                        modified: true,\n                    });\n                }\n                this.redraw();\n            });\n        }\n        if (!this.builderMode) {\n            this.removeValueIcon.forEach((removeValueIcon, index) => {\n                this.updateRemoveIcon(index);\n                const removeValueHandler = () => {\n                    var _a;\n                    const searchInput = (_a = this.searchInput) === null || _a === void 0 ? void 0 : _a[index];\n                    this.clearAddress(searchInput, index);\n                    if (searchInput) {\n                        searchInput.focus();\n                    }\n                };\n                this.addEventListener(removeValueIcon, 'click', removeValueHandler);\n                this.addEventListener(removeValueIcon, 'keydown', ({ key }) => {\n                    if (key === 'Enter') {\n                        removeValueHandler();\n                    }\n                });\n            });\n            lodash_1.default.each(this.refs.searchInput || [], el => this.addFocusBlurEvents(el));\n        }\n        return result;\n    }\n    addChildComponent(component) {\n        component.customConditional = ChildConditional;\n    }\n    redraw() {\n        const modeSwitcherInFocus = (this.modeSwitcher && (document.activeElement === this.modeSwitcher));\n        return super.redraw()\n            .then((result) => {\n            if (modeSwitcherInFocus && this.modeSwitcher) {\n                this.modeSwitcher.focus();\n            }\n            return result;\n        });\n    }\n    clearAddress(element, index) {\n        var _a;\n        if (!this.isEmpty()) {\n            this.triggerChange();\n        }\n        if ((_a = this.address) === null || _a === void 0 ? void 0 : _a[index]) {\n            this.address[index] = this.emptyValue;\n        }\n        else {\n            this.address = this.emptyValue;\n        }\n        if (element) {\n            element.value = '';\n        }\n        this.updateRemoveIcon(index);\n    }\n    getDisplayValue(value = this.address) {\n        return (this.provider && !this.manualMode)\n            ? this.provider.getDisplayValue(value)\n            : '';\n    }\n    validateMultiple() {\n        return this.isMultiple;\n    }\n    updateRemoveIcon(index) {\n        var _a;\n        const removeValueIcon = (_a = this.removeValueIcon) === null || _a === void 0 ? void 0 : _a[index];\n        if (removeValueIcon) {\n            const value = this.isMultiple ? this.address[index] : this.address;\n            if (this.isEmpty(value) || this.disabled) {\n                this.addClass(removeValueIcon, RemoveValueIconHiddenClass);\n            }\n            else {\n                this.removeClass(removeValueIcon, RemoveValueIconHiddenClass);\n            }\n        }\n    }\n    getValueAsString(value, options) {\n        if (!value) {\n            return '';\n        }\n        const normalizedValue = this.normalizeValue(value);\n        const { address, mode, } = (this.manualModeEnabled\n            ? normalizedValue\n            : {\n                address: normalizedValue,\n                mode: exports.AddressComponentMode.Autocomplete,\n            });\n        const valueInManualMode = (mode === exports.AddressComponentMode.Manual);\n        if (this.provider && !valueInManualMode) {\n            return this.getDisplayValue(address);\n        }\n        if (valueInManualMode) {\n            if (this.component.manualModeViewString) {\n                return this.interpolate(this.component.manualModeViewString, {\n                    address,\n                    data: this.data,\n                    component: this.component,\n                });\n            }\n            return this.getComponents()\n                .filter((component) => component.hasValue(address))\n                .map((component) => [component, lodash_1.default.get(address, component.key)])\n                .filter(([component, componentValue]) => !component.isEmpty(componentValue))\n                .map(([component, componentValue]) => component.getValueAsString(componentValue, options))\n                .join(', ');\n        }\n        return super.getValueAsString(address, options);\n    }\n    focus() {\n        if (this.searchInput && this.searchInput[0]) {\n            this.searchInput[0].focus();\n        }\n    }\n}\nexports[\"default\"] = AddressComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/address/Address.js?");
 
 /***/ }),
 
@@ -6007,7 +6007,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    {\n        key: 'labelPosition',\n        ignore: true\n    },\n    {\n        key: 'placeholder',\n        ignore: true\n    },\n    {\n        key: 'description',\n        ignore: true\n    },\n    {\n        key: 'tooltip',\n        ignore: true\n    },\n    {\n        key: 'hideLabel',\n        ignore: true\n    },\n    {\n        key: 'autofocus',\n        ignore: true\n    },\n    {\n        key: 'disabled',\n        ignore: true\n    },\n    {\n        key: 'tabindex',\n        ignore: true\n    },\n    {\n        key: 'tableView',\n        ignore: true\n    },\n    {\n        weight: 700,\n        type: 'checkbox',\n        label: 'Refresh On Change',\n        tooltip: 'Rerender the field whenever a value on the form changes.',\n        key: 'refreshOnChange',\n        input: true\n    },\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/content/editForm/Content.edit.display.js?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = [\n    {\n        key: 'labelPosition',\n        ignore: true\n    },\n    {\n        key: 'labelWidth',\n        ignore: true\n    },\n    {\n        key: 'labelMargin',\n        ignore: true\n    },\n    {\n        key: 'placeholder',\n        ignore: true\n    },\n    {\n        key: 'description',\n        ignore: true\n    },\n    {\n        key: 'tooltip',\n        ignore: true\n    },\n    {\n        key: 'hideLabel',\n        ignore: true\n    },\n    {\n        key: 'autofocus',\n        ignore: true\n    },\n    {\n        key: 'disabled',\n        ignore: true\n    },\n    {\n        key: 'tabindex',\n        ignore: true\n    },\n    {\n        key: 'tableView',\n        ignore: true\n    },\n    {\n        weight: 700,\n        type: 'checkbox',\n        label: 'Refresh On Change',\n        tooltip: 'Rerender the field whenever a value on the form changes.',\n        key: 'refreshOnChange',\n        input: true\n    },\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/content/editForm/Content.edit.display.js?");
 
 /***/ }),
 
@@ -6062,7 +6062,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ (function(__unused_webpack_module, exports) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = [\n    {\n        key: 'inputMask',\n        ignore: true\n    },\n    {\n        key: 'allowMultipleMasks',\n        ignore: true\n    },\n    {\n        key: 'showWordCount',\n        ignore: true\n    },\n    {\n        key: 'showCharCount',\n        ignore: true\n    },\n    {\n        key: 'spellcheck',\n        ignore: true\n    },\n    {\n        type: 'textfield',\n        input: true,\n        weight: 310,\n        key: 'prefix',\n        label: 'prefix',\n        tooltip: 'Specify the prefix symbol after the component (e.g.: USD, EUR)'\n    },\n    {\n        type: 'textfield',\n        input: true,\n        weight: 320,\n        key: 'suffix',\n        label: 'suffix',\n        tooltip: 'Specify the suffix symbol after the component (e.g.: USD, EUR).'\n    }\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/currency/editForm/Currency.edit.display.js?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = [\n    {\n        key: 'inputMask',\n        ignore: true\n    },\n    {\n        key: 'allowMultipleMasks',\n        ignore: true\n    },\n    {\n        key: 'inputMasks',\n        ignore: true\n    },\n    {\n        key: 'widget.type',\n        ignore: true\n    },\n    {\n        key: 'widget',\n        ignore: true\n    },\n    {\n        key: 'showWordCount',\n        ignore: true\n    },\n    {\n        key: 'showCharCount',\n        ignore: true\n    },\n    {\n        key: 'spellcheck',\n        ignore: true\n    },\n    {\n        type: 'textfield',\n        input: true,\n        weight: 310,\n        key: 'prefix',\n        label: 'prefix',\n        tooltip: 'Specify the prefix symbol after the component (e.g.: USD, EUR)'\n    },\n    {\n        type: 'textfield',\n        input: true,\n        weight: 320,\n        key: 'suffix',\n        label: 'suffix',\n        tooltip: 'Specify the suffix symbol after the component (e.g.: USD, EUR).'\n    }\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/currency/editForm/Currency.edit.display.js?");
 
 /***/ }),
 
@@ -6293,7 +6293,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    {\n        key: 'labelPosition',\n        ignore: true\n    },\n    {\n        weight: 15,\n        type: 'checkbox',\n        label: 'Hide Input Labels',\n        tooltip: 'Hide the labels of component inputs. This allows you to show the labels in the form builder, but not when it is rendered.',\n        key: 'hideInputLabels',\n        input: true\n    },\n    {\n        type: 'select',\n        input: true,\n        key: 'inputsLabelPosition',\n        label: 'Inputs Label Position',\n        tooltip: 'Position for the labels for inputs for this field.',\n        weight: 40,\n        defaultValue: 'top',\n        dataSrc: 'values',\n        data: {\n            values: [\n                { label: 'Top', value: 'top' },\n                { label: 'Left', value: 'left' },\n                { label: 'Right', value: 'right' },\n                { label: 'Bottom', value: 'bottom' }\n            ]\n        }\n    },\n    {\n        key: 'placeholder',\n        ignore: true\n    },\n    {\n        weight: 213,\n        type: 'checkbox',\n        label: 'Use Locale Settings',\n        tooltip: 'Use locale settings to display day.',\n        key: 'useLocaleSettings',\n        input: true\n    },\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/day/editForm/Day.edit.display.js?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = [\n    {\n        key: 'labelPosition',\n        ignore: true\n    },\n    {\n        key: 'labelWidth',\n        ignore: true\n    },\n    {\n        key: 'labelMargin',\n        ignore: true\n    },\n    {\n        weight: 15,\n        type: 'checkbox',\n        label: 'Hide Input Labels',\n        tooltip: 'Hide the labels of component inputs. This allows you to show the labels in the form builder, but not when it is rendered.',\n        key: 'hideInputLabels',\n        input: true\n    },\n    {\n        type: 'select',\n        input: true,\n        key: 'inputsLabelPosition',\n        label: 'Inputs Label Position',\n        tooltip: 'Position for the labels for inputs for this field.',\n        weight: 40,\n        defaultValue: 'top',\n        dataSrc: 'values',\n        data: {\n            values: [\n                { label: 'Top', value: 'top' },\n                { label: 'Left', value: 'left' },\n                { label: 'Right', value: 'right' },\n                { label: 'Bottom', value: 'bottom' }\n            ]\n        }\n    },\n    {\n        key: 'placeholder',\n        ignore: true\n    },\n    {\n        weight: 213,\n        type: 'checkbox',\n        label: 'Use Locale Settings',\n        tooltip: 'Use locale settings to display day.',\n        key: 'useLocaleSettings',\n        input: true\n    },\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/day/editForm/Day.edit.display.js?");
 
 /***/ }),
 
@@ -6425,7 +6425,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    {\n        key: 'inputMask',\n        ignore: true,\n    },\n    {\n        key: 'allowMultipleMasks',\n        ignore: true,\n    },\n    {\n        key: 'showWordCount',\n        ignore: true\n    },\n    {\n        key: 'showCharCount',\n        ignore: true\n    }\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/email/editForm/Email.edit.display.js?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = [\n    {\n        key: 'inputMask',\n        ignore: true,\n    },\n    {\n        key: 'allowMultipleMasks',\n        ignore: true,\n    },\n    {\n        key: 'inputMasks',\n        ignore: true\n    },\n    {\n        key: 'widget.type',\n        ignore: true\n    },\n    {\n        key: 'widget',\n        ignore: true\n    },\n    {\n        key: 'showWordCount',\n        ignore: true\n    },\n    {\n        key: 'showCharCount',\n        ignore: true\n    }\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/email/editForm/Email.edit.display.js?");
 
 /***/ }),
 
@@ -6469,7 +6469,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    {\n        key: 'labelPosition',\n        ignore: true\n    },\n    {\n        key: 'placeholder',\n        ignore: true\n    },\n    {\n        key: 'description',\n        ignore: true\n    },\n    {\n        key: 'hideLabel',\n        ignore: true\n    },\n    {\n        key: 'autofocus',\n        ignore: true\n    },\n    {\n        key: 'tableView',\n        ignore: true\n    },\n    {\n        key: 'label',\n        hidden: true,\n        calculateValue(context) {\n            return context.data.legend;\n        }\n    },\n    {\n        weight: 1,\n        type: 'textfield',\n        input: true,\n        key: 'legend',\n        label: 'Legend',\n        placeholder: 'Legend',\n        tooltip: 'The legend for this Fieldset.'\n    },\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/fieldset/editForm/Fieldset.edit.display.js?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = [\n    {\n        key: 'labelPosition',\n        ignore: true\n    },\n    {\n        key: 'labelWidth',\n        ignore: true\n    },\n    {\n        key: 'labelMargin',\n        ignore: true\n    },\n    {\n        key: 'placeholder',\n        ignore: true\n    },\n    {\n        key: 'description',\n        ignore: true\n    },\n    {\n        key: 'hideLabel',\n        ignore: true\n    },\n    {\n        key: 'autofocus',\n        ignore: true\n    },\n    {\n        key: 'tableView',\n        ignore: true\n    },\n    {\n        key: 'label',\n        hidden: true,\n        calculateValue(context) {\n            return context.data.legend;\n        }\n    },\n    {\n        weight: 1,\n        type: 'textfield',\n        input: true,\n        key: 'legend',\n        label: 'Legend',\n        placeholder: 'Legend',\n        tooltip: 'The legend for this Fieldset.'\n    },\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/fieldset/editForm/Fieldset.edit.display.js?");
 
 /***/ }),
 
@@ -6491,7 +6491,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Field_1 = __importDefault(__webpack_require__(/*! ../_classes/field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst downloadjs_1 = __importDefault(__webpack_require__(/*! downloadjs */ \"./node_modules/downloadjs/download.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst fileProcessor_1 = __importDefault(__webpack_require__(/*! ../../providers/processor/fileProcessor */ \"./lib/cjs/providers/processor/fileProcessor.js\"));\nconst browser_md5_file_1 = __importDefault(__webpack_require__(/*! browser-md5-file */ \"./node_modules/browser-md5-file/dist/index.umd.js\"));\nlet Camera;\nlet webViewCamera = 'undefined' !== typeof window ? navigator.camera : Camera;\n// canvas.toBlob polyfill.\nlet htmlCanvasElement;\nif (typeof window !== 'undefined') {\n    htmlCanvasElement = window.HTMLCanvasElement;\n}\nelse if (typeof __webpack_require__.g !== 'undefined') {\n    htmlCanvasElement = __webpack_require__.g.HTMLCanvasElement;\n}\nif (htmlCanvasElement && !htmlCanvasElement.prototype.toBlob) {\n    Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {\n        value: function (callback, type, quality) {\n            var canvas = this;\n            setTimeout(function () {\n                var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]), len = binStr.length, arr = new Uint8Array(len);\n                for (var i = 0; i < len; i++) {\n                    arr[i] = binStr.charCodeAt(i);\n                }\n                callback(new Blob([arr], { type: type || 'image/png' }));\n            });\n        }\n    });\n}\nconst createRandomString = () => Math.random().toString(36).substring(2, 15);\nclass FileComponent extends Field_1.default {\n    static schema(...extend) {\n        return Field_1.default.schema({\n            type: 'file',\n            label: 'Upload',\n            key: 'file',\n            image: false,\n            privateDownload: false,\n            imageSize: '200',\n            filePattern: '*',\n            fileMinSize: '0KB',\n            fileMaxSize: '1GB',\n            uploadOnly: false,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'File',\n            group: 'premium',\n            icon: 'file',\n            documentation: '/userguide/form-building/premium-components#file',\n            weight: 100,\n            schema: FileComponent.schema(),\n        };\n    }\n    static get serverConditionSettings() {\n        return FileComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEmpty', 'isNotEmpty'] });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];\n    }\n    init() {\n        super.init();\n        webViewCamera = navigator.camera || Camera;\n        const fileReaderSupported = (typeof FileReader !== 'undefined');\n        const formDataSupported = typeof window !== 'undefined' ? Boolean(window.FormData) : false;\n        const progressSupported = (typeof window !== 'undefined' && window.XMLHttpRequest) ? ('upload' in new XMLHttpRequest) : false;\n        this.support = {\n            filereader: fileReaderSupported,\n            formdata: formDataSupported,\n            hasWarning: !fileReaderSupported || !formDataSupported || !progressSupported,\n            progress: progressSupported,\n        };\n        this.cameraMode = false;\n        this.fileDropHidden = false;\n        this.filesToSync = {\n            filesToUpload: [],\n            filesToDelete: [],\n        };\n        this.isSyncing = false;\n        this.abortUploads = [];\n    }\n    get dataReady() {\n        return this.filesReady || Promise.resolve();\n    }\n    get defaultSchema() {\n        return FileComponent.schema();\n    }\n    loadImage(fileInfo) {\n        if (this.component.privateDownload) {\n            fileInfo.private = true;\n        }\n        // pass the component to the downloadFile method\n        return this.fileService.downloadFile(fileInfo, this.component).then((result) => result.url);\n    }\n    get emptyValue() {\n        return [];\n    }\n    getValueAsString(value, options) {\n        if ((options === null || options === void 0 ? void 0 : options.review) && !this.component.uploadOnly) {\n            return lodash_1.default.map(value, (val, index) => {\n                return `<a href=\"${val.url || '#'}\" target=\"_blank\" data-path='${this.path}' data-fileindex='${index}'>${val.originalName}</a>`;\n            }).join(', ');\n        }\n        if (lodash_1.default.isArray(value)) {\n            return lodash_1.default.map(value, 'originalName').join(', ');\n        }\n        return lodash_1.default.get(value, 'originalName', '');\n    }\n    getValue() {\n        return this.dataValue;\n    }\n    get defaultValue() {\n        const value = super.defaultValue;\n        return Array.isArray(value) ? value : [];\n    }\n    get hasTypes() {\n        return this.component.fileTypes &&\n            Array.isArray(this.component.fileTypes) &&\n            this.component.fileTypes.length !== 0 &&\n            (this.component.fileTypes[0].label !== '' || this.component.fileTypes[0].value !== '');\n    }\n    get fileDropHidden() {\n        return this._fileBrowseHidden;\n    }\n    set fileDropHidden(value) {\n        if (typeof value !== 'boolean' || this.component.multiple) {\n            return;\n        }\n        this._fileBrowseHidden = value;\n    }\n    get shouldSyncFiles() {\n        return Boolean(this.filesToSync.filesToDelete.length || this.filesToSync.filesToUpload.length);\n    }\n    get autoSync() {\n        // Disable autoSync for now\n        return false;\n        // return _.get(this, 'component.autoSync', false);\n    }\n    get columnsSize() {\n        const actionsColumn = this.disabled ? 0 : this.autoSync ? 2 : 1;\n        const typeColumn = this.hasTypes ? 2 : 0;\n        const sizeColumn = 2;\n        const nameColumn = 12 - actionsColumn - typeColumn - sizeColumn;\n        return {\n            name: nameColumn,\n            size: sizeColumn,\n            type: typeColumn,\n            actions: actionsColumn,\n        };\n    }\n    render() {\n        const { filesToDelete, filesToUpload } = this.filesToSync;\n        return super.render(this.renderTemplate('file', {\n            fileSize: this.fileSize,\n            files: this.dataValue || [],\n            filesToDelete,\n            filesToUpload,\n            disabled: this.disabled,\n            support: this.support,\n            fileDropHidden: this.fileDropHidden,\n            showSyncButton: this.autoSync && (filesToDelete.length || filesToUpload.length),\n            isSyncing: this.isSyncing,\n            columns: this.columnsSize,\n        }));\n    }\n    getVideoStream(constraints) {\n        return navigator.mediaDevices.getUserMedia({\n            video: Object.assign({ width: { min: 640, ideal: 1920 }, height: { min: 360, ideal: 1080 }, aspectRatio: { ideal: 16 / 9 } }, constraints),\n            audio: false,\n        });\n    }\n    stopVideoStream(videoStream) {\n        videoStream.getVideoTracks().forEach((track) => track.stop());\n    }\n    getFrame(videoPlayer) {\n        return new Promise((resolve) => {\n            const canvas = document.createElement('canvas');\n            canvas.height = videoPlayer.videoHeight;\n            canvas.width = videoPlayer.videoWidth;\n            const context = canvas.getContext('2d');\n            context.drawImage(videoPlayer, 0, 0);\n            canvas.toBlob(resolve);\n        });\n    }\n    startVideo() {\n        this.getVideoStream()\n            .then((stream) => {\n            this.videoStream = stream;\n            const { videoPlayer } = this.refs;\n            if (!videoPlayer) {\n                console.warn(this.t('videoPlayerNotFound'));\n                this.cameraMode = false;\n                this.redraw();\n                return;\n            }\n            videoPlayer.srcObject = stream;\n            const width = parseInt(this.component.webcamSize) || 320;\n            videoPlayer.setAttribute('width', width);\n            videoPlayer.play();\n        })\n            .catch((err) => {\n            console.error(err);\n            this.cameraMode = false;\n            this.redraw();\n        });\n    }\n    stopVideo() {\n        if (this.videoStream) {\n            this.stopVideoStream(this.videoStream);\n            this.videoStream = null;\n        }\n    }\n    takePicture() {\n        const { videoPlayer } = this.refs;\n        if (!videoPlayer) {\n            console.warn(this.t('videoPlayerNotFound'));\n            this.cameraMode = false;\n            this.redraw();\n            return;\n        }\n        this.getFrame(videoPlayer)\n            .then((frame) => {\n            frame.name = `photo-${Date.now()}.png`;\n            this.handleFilesToUpload([frame]);\n            this.cameraMode = false;\n            this.redraw();\n        });\n    }\n    browseFiles(attrs = {}) {\n        return new Promise((resolve) => {\n            const fileInput = this.ce('input', Object.assign({ type: 'file', style: 'height: 0; width: 0; visibility: hidden;', tabindex: '-1' }, attrs));\n            document.body.appendChild(fileInput);\n            fileInput.addEventListener('change', () => {\n                resolve(fileInput.files);\n                document.body.removeChild(fileInput);\n            }, true);\n            // There is no direct way to trigger a file dialog. To work around this, create an input of type file and trigger\n            // a click event on it.\n            if (typeof fileInput.trigger === 'function') {\n                fileInput.trigger('click');\n            }\n            else {\n                fileInput.click();\n            }\n        });\n    }\n    set cameraMode(value) {\n        this._cameraMode = value;\n        if (value) {\n            this.startVideo();\n        }\n        else {\n            this.stopVideo();\n        }\n    }\n    get cameraMode() {\n        return this._cameraMode;\n    }\n    get useWebViewCamera() {\n        return this.imageUpload && webViewCamera;\n    }\n    get imageUpload() {\n        return Boolean(this.component.image);\n    }\n    get browseOptions() {\n        const options = {};\n        if (this.component.multiple) {\n            options.multiple = true;\n        }\n        if (this.component.capture) {\n            options.capture = this.component.capture;\n        }\n        //use \"accept\" attribute only for desktop devices because of its limited support by mobile browsers\n        const filePattern = this.component.filePattern.trim() || '';\n        if (!this.isMobile.any) {\n            const imagesPattern = 'image/*';\n            if (this.imageUpload && (!filePattern || filePattern === '*')) {\n                options.accept = imagesPattern;\n            }\n            else if (this.imageUpload && !filePattern.includes(imagesPattern)) {\n                options.accept = `${imagesPattern},${filePattern}`;\n            }\n            else {\n                options.accept = filePattern;\n            }\n        }\n        // if input capture is set, we need the \"accept\" attribute to determine which device to launch\n        else if (this.component.capture) {\n            if (filePattern.includes('video')) {\n                options.accept = 'video/*';\n            }\n            else if (filePattern.includes('audio')) {\n                options.accept = 'audio/*';\n            }\n            else {\n                options.accept = 'image/*';\n            }\n        }\n        return options;\n    }\n    get actions() {\n        return {\n            abort: this.abortRequest.bind(this),\n        };\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            fileDrop: 'single',\n            fileBrowse: 'single',\n            galleryButton: 'single',\n            cameraButton: 'single',\n            takePictureButton: 'single',\n            toggleCameraMode: 'single',\n            videoPlayer: 'single',\n            fileLink: 'multiple',\n            removeLink: 'multiple',\n            fileToSyncRemove: 'multiple',\n            fileImage: 'multiple',\n            fileType: 'multiple',\n            fileProcessingLoader: 'single',\n            syncNow: 'single',\n            restoreFile: 'multiple',\n            progress: 'multiple',\n        });\n        // Ensure we have an empty input refs. We need this for the setValue method to redraw the control when it is set.\n        this.refs.input = [];\n        const superAttach = super.attach(element);\n        if (this.refs.fileDrop) {\n            // if (!this.statuses.length) {\n            //   this.refs.fileDrop.removeAttribute('hidden');\n            // }\n            const _this = this;\n            this.addEventListener(this.refs.fileDrop, 'dragover', function (event) {\n                this.className = 'fileSelector fileDragOver';\n                event.preventDefault();\n            });\n            this.addEventListener(this.refs.fileDrop, 'dragleave', function (event) {\n                this.className = 'fileSelector';\n                event.preventDefault();\n            });\n            this.addEventListener(this.refs.fileDrop, 'drop', function (event) {\n                this.className = 'fileSelector';\n                event.preventDefault();\n                _this.handleFilesToUpload(event.dataTransfer.files);\n            });\n        }\n        this.addEventListener(element, 'click', (event) => {\n            this.handleAction(event);\n        });\n        if (this.refs.fileBrowse) {\n            this.addEventListener(this.refs.fileBrowse, 'click', (event) => {\n                event.preventDefault();\n                this.browseFiles(this.browseOptions)\n                    .then((files) => {\n                    this.handleFilesToUpload(files);\n                });\n            });\n        }\n        this.refs.fileLink.forEach((fileLink, index) => {\n            this.addEventListener(fileLink, 'click', (event) => {\n                event.preventDefault();\n                this.getFile(this.dataValue[index]);\n            });\n        });\n        this.refs.removeLink.forEach((removeLink, index) => {\n            this.addEventListener(removeLink, 'click', (event) => {\n                event.preventDefault();\n                const fileInfo = this.dataValue[index];\n                this.handleFileToRemove(fileInfo);\n            });\n        });\n        this.refs.fileToSyncRemove.forEach((fileToSyncRemove, index) => {\n            this.addEventListener(fileToSyncRemove, 'click', (event) => {\n                event.preventDefault();\n                this.filesToSync.filesToUpload.splice(index, 1);\n                this.redraw();\n            });\n        });\n        this.refs.restoreFile.forEach((fileToRestore, index) => {\n            this.addEventListener(fileToRestore, 'click', (event) => {\n                event.preventDefault();\n                const fileInfo = this.filesToSync.filesToDelete[index];\n                delete fileInfo.status;\n                delete fileInfo.message;\n                this.filesToSync.filesToDelete.splice(index, 1);\n                this.dataValue.push(fileInfo);\n                this.triggerChange();\n                this.redraw();\n            });\n        });\n        if (this.refs.galleryButton && webViewCamera) {\n            this.addEventListener(this.refs.galleryButton, 'click', (event) => {\n                event.preventDefault();\n                webViewCamera.getPicture((success) => {\n                    window.resolveLocalFileSystemURL(success, (fileEntry) => {\n                        fileEntry.file((file) => {\n                            const reader = new FileReader();\n                            reader.onloadend = (evt) => {\n                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });\n                                blob.name = file.name;\n                                this.handleFilesToUpload([blob]);\n                            };\n                            reader.readAsArrayBuffer(file);\n                        });\n                    });\n                }, (err) => {\n                    console.error(err);\n                }, {\n                    sourceType: webViewCamera.PictureSourceType.PHOTOLIBRARY,\n                });\n            });\n        }\n        if (this.refs.cameraButton && webViewCamera) {\n            this.addEventListener(this.refs.cameraButton, 'click', (event) => {\n                event.preventDefault();\n                webViewCamera.getPicture((success) => {\n                    window.resolveLocalFileSystemURL(success, (fileEntry) => {\n                        fileEntry.file((file) => {\n                            const reader = new FileReader();\n                            reader.onloadend = (evt) => {\n                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });\n                                blob.name = file.name;\n                                this.handleFilesToUpload([blob]);\n                            };\n                            reader.readAsArrayBuffer(file);\n                        });\n                    });\n                }, (err) => {\n                    console.error(err);\n                }, {\n                    sourceType: webViewCamera.PictureSourceType.CAMERA,\n                    encodingType: webViewCamera.EncodingType.PNG,\n                    mediaType: webViewCamera.MediaType.PICTURE,\n                    saveToPhotoAlbum: true,\n                    correctOrientation: false,\n                });\n            });\n        }\n        if (this.refs.takePictureButton) {\n            this.addEventListener(this.refs.takePictureButton, 'click', (event) => {\n                event.preventDefault();\n                this.takePicture();\n            });\n        }\n        if (this.refs.toggleCameraMode) {\n            this.addEventListener(this.refs.toggleCameraMode, 'click', (event) => {\n                event.preventDefault();\n                this.cameraMode = !this.cameraMode;\n                this.redraw();\n            });\n        }\n        this.refs.fileType.forEach((fileType, index) => {\n            if (!this.dataValue[index]) {\n                return;\n            }\n            this.dataValue[index].fileType = this.dataValue[index].fileType || this.component.fileTypes[0].label;\n            this.addEventListener(fileType, 'change', (event) => {\n                event.preventDefault();\n                const fileType = this.component.fileTypes.find((typeObj) => typeObj.value === event.target.value);\n                this.dataValue[index].fileType = fileType.label;\n            });\n        });\n        this.addEventListener(this.refs.syncNow, 'click', (event) => {\n            event.preventDefault();\n            this.syncFiles();\n        });\n        const fileService = this.fileService;\n        if (fileService) {\n            const loadingImages = [];\n            this.filesReady = new Promise((resolve, reject) => {\n                this.filesReadyResolve = resolve;\n                this.filesReadyReject = reject;\n            });\n            this.refs.fileImage.forEach((image, index) => {\n                loadingImages.push(this.loadImage(this.dataValue[index]).then((url) => (image.src = url)));\n            });\n            if (loadingImages.length) {\n                Promise.all(loadingImages).then(() => {\n                    this.filesReadyResolve();\n                }).catch(() => this.filesReadyReject());\n            }\n            else {\n                this.filesReadyResolve();\n            }\n        }\n        return superAttach;\n    }\n    /* eslint-disable max-len */\n    fileSize(a, b, c, d, e) {\n        return `${(b = Math, c = b.log, d = 1024, e = c(a) / c(d) | 0, a / b.pow(d, e)).toFixed(2)} ${e ? `${'kMGTPEZY'[--e]}B` : 'Bytes'}`;\n    }\n    /* eslint-enable max-len */\n    /* eslint-disable max-depth */\n    globStringToRegex(str) {\n        str = str.replace(/\\s/g, '');\n        let regexp = '', excludes = [];\n        if (str.length > 2 && str[0] === '/' && str[str.length - 1] === '/') {\n            regexp = str.substring(1, str.length - 1);\n        }\n        else {\n            const split = str.split(',');\n            if (split.length > 1) {\n                for (let i = 0; i < split.length; i++) {\n                    const r = this.globStringToRegex(split[i]);\n                    if (r.regexp) {\n                        regexp += `(${r.regexp})`;\n                        if (i < split.length - 1) {\n                            regexp += '|';\n                        }\n                    }\n                    else {\n                        excludes = excludes.concat(r.excludes);\n                    }\n                }\n            }\n            else {\n                if (str.startsWith('!')) {\n                    excludes.push(`^((?!${this.globStringToRegex(str.substring(1)).regexp}).)*$`);\n                }\n                else {\n                    if (str.startsWith('.')) {\n                        str = `*${str}`;\n                    }\n                    regexp = `^${str.replace(new RegExp('[.\\\\\\\\+*?\\\\[\\\\^\\\\]$(){}=!<>|:\\\\-]', 'g'), '\\\\$&')}$`;\n                    regexp = regexp.replace(/\\\\\\*/g, '.*').replace(/\\\\\\?/g, '.');\n                }\n            }\n        }\n        return { regexp, excludes };\n    }\n    /* eslint-enable max-depth */\n    translateScalars(str) {\n        if (typeof str === 'string') {\n            if (str.search(/kb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024);\n            }\n            if (str.search(/mb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024 * 1024);\n            }\n            if (str.search(/gb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024 * 1024 * 1024);\n            }\n            if (str.search(/b/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1));\n            }\n            if (str.search(/s/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1));\n            }\n            if (str.search(/m/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1) * 60);\n            }\n            if (str.search(/h/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1) * 3600);\n            }\n        }\n        return str;\n    }\n    validatePattern(file, val) {\n        if (!val) {\n            return true;\n        }\n        const pattern = this.globStringToRegex(val);\n        let valid = true;\n        if (pattern.regexp && pattern.regexp.length) {\n            const regexp = new RegExp(pattern.regexp, 'i');\n            valid = (!lodash_1.default.isNil(file.type) && regexp.test(file.type)) ||\n                (!lodash_1.default.isNil(file.name) && regexp.test(file.name));\n        }\n        valid = pattern.excludes.reduce((result, excludePattern) => {\n            const exclude = new RegExp(excludePattern, 'i');\n            return result && (lodash_1.default.isNil(file.type) || exclude.test(file.type)) &&\n                (lodash_1.default.isNil(file.name) || exclude.test(file.name));\n        }, valid);\n        return valid;\n    }\n    validateMinSize(file, val) {\n        return file.size + 0.1 >= this.translateScalars(val);\n    }\n    validateMaxSize(file, val) {\n        return file.size - 0.1 <= this.translateScalars(val);\n    }\n    abortRequest(id) {\n        const abortUpload = this.abortUploads.find(abortUpload => abortUpload.id === id);\n        if (abortUpload) {\n            abortUpload.abort();\n        }\n    }\n    handleAction(event) {\n        const target = event.target;\n        if (!target.id) {\n            return;\n        }\n        const [action, id] = target.id.split('-');\n        if (!action || !id || !this.actions[action]) {\n            return;\n        }\n        this.actions[action](id);\n    }\n    getFileName(file) {\n        return (0, utils_1.uniqueName)(file.name, this.component.fileNameTemplate, this.evalContext());\n    }\n    getInitFileToSync(file) {\n        const escapedFileName = file.name ? file.name.replaceAll('<', '&lt;').replaceAll('>', '&gt;') : file.name;\n        return {\n            id: createRandomString(),\n            // Get a unique name for this file to keep file collisions from occurring.\n            dir: this.interpolate(this.component.dir || ''),\n            name: this.getFileName(file),\n            originalName: escapedFileName,\n            fileKey: this.component.fileKey || 'file',\n            storage: this.component.storage,\n            options: this.component.options,\n            file,\n            size: file.size,\n            status: 'info',\n            message: this.t('waitFileProcessing'),\n            hash: '',\n        };\n    }\n    handleSubmissionRevisions(file) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (this.root.form.submissionRevisions !== 'true') {\n                return '';\n            }\n            const bmf = new browser_md5_file_1.default();\n            const hash = yield new Promise((resolve, reject) => {\n                this.emit('fileUploadingStart');\n                bmf.md5(file, (err, md5) => {\n                    if (err) {\n                        return reject(err);\n                    }\n                    return resolve(md5);\n                });\n            });\n            this.emit('fileUploadingEnd');\n            return hash;\n        });\n    }\n    validateFileName(file) {\n        // Check if file with the same name is being uploaded\n        const fileWithSameNameUploading = this.filesToSync.filesToUpload\n            .some(fileToSync => { var _a; return ((_a = fileToSync.file) === null || _a === void 0 ? void 0 : _a.name) === file.name; });\n        const fileWithSameNameUploaded = lodash_1.default.some(this.dataValue, fileStatus => fileStatus.originalName === file.name);\n        return fileWithSameNameUploaded || fileWithSameNameUploading\n            ? {\n                status: 'error',\n                message: this.t(fileWithSameNameUploading ? 'fileWithDuplicatedNameInProgress' : 'fileWithDuplicatedNameLoaded'),\n            }\n            : {};\n    }\n    validateFileSettings(file) {\n        // Check file pattern\n        if (this.component.filePattern && !this.validatePattern(file, this.component.filePattern)) {\n            return {\n                status: 'error',\n                message: this.t('wrongFileType', {\n                    pattern: this.component.filePattern,\n                }),\n            };\n        }\n        // Check file minimum size\n        if (this.component.fileMinSize && !this.validateMinSize(file, this.component.fileMinSize)) {\n            return {\n                status: 'error',\n                message: this.t('fileTooSmall', {\n                    size: this.component.fileMinSize,\n                }),\n            };\n        }\n        // Check file maximum size\n        if (this.component.fileMaxSize && !this.validateMaxSize(file, this.component.fileMaxSize)) {\n            return {\n                status: 'error',\n                message: this.t('fileTooBig', {\n                    size: this.component.fileMaxSize,\n                }),\n            };\n        }\n        return {};\n    }\n    validateFileService() {\n        const { fileService } = this;\n        return !fileService\n            ? {\n                status: 'error',\n                message: this.t('noFileService'),\n            }\n            : {};\n    }\n    validateFile(file) {\n        const fileServiceValidation = this.validateFileService();\n        if (fileServiceValidation.status === 'error') {\n            return fileServiceValidation;\n        }\n        const fileNameValidation = this.validateFileName(file);\n        if (fileNameValidation.status === 'error') {\n            return fileNameValidation;\n        }\n        return this.validateFileSettings(file);\n    }\n    getGroupPermissions() {\n        let groupKey = null;\n        let groupPermissions = null;\n        //Iterate through form components to find group resource if one exists\n        this.root.everyComponent((element) => {\n            var _a, _b;\n            if (((_a = element.component) === null || _a === void 0 ? void 0 : _a.submissionAccess) || ((_b = element.component) === null || _b === void 0 ? void 0 : _b.defaultPermission)) {\n                groupPermissions = !element.component.submissionAccess ? [\n                    {\n                        type: element.component.defaultPermission,\n                        roles: [],\n                    },\n                ] : element.component.submissionAccess;\n                groupPermissions.forEach((permission) => {\n                    groupKey = ['admin', 'write', 'create'].includes(permission.type) ? element.component.key : null;\n                });\n            }\n        });\n        return { groupKey, groupPermissions };\n    }\n    triggerFileProcessor(file) {\n        return __awaiter(this, void 0, void 0, function* () {\n            let processedFile = null;\n            if (this.root.options.fileProcessor) {\n                try {\n                    if (this.refs.fileProcessingLoader) {\n                        this.refs.fileProcessingLoader.style.display = 'block';\n                    }\n                    const fileProcessorHandler = (0, fileProcessor_1.default)(this.fileService, this.root.options.fileProcessor);\n                    processedFile = yield fileProcessorHandler(file, this.component.properties);\n                }\n                catch (err) {\n                    this.fileDropHidden = false;\n                    return {\n                        status: 'error',\n                        message: this.t('fileProcessingFailed'),\n                    };\n                }\n                finally {\n                    if (this.refs.fileProcessingLoader) {\n                        this.refs.fileProcessingLoader.style.display = 'none';\n                    }\n                }\n            }\n            return {\n                file: processedFile,\n            };\n        });\n    }\n    prepareFileToUpload(file) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const fileToSync = this.getInitFileToSync(file);\n            fileToSync.hash = yield this.handleSubmissionRevisions(file);\n            const { status, message } = this.validateFile(file);\n            if (status === 'error') {\n                fileToSync.isValidationError = true;\n                fileToSync.status = status;\n                fileToSync.message = message;\n                return this.filesToSync.filesToUpload.push(fileToSync);\n            }\n            if (this.component.privateDownload) {\n                file.private = true;\n            }\n            const { groupKey, groupPermissions } = this.getGroupPermissions();\n            const processedFile = yield this.triggerFileProcessor(file);\n            if (processedFile.status === 'error') {\n                fileToSync.status === 'error';\n                fileToSync.message = processedFile.message;\n                return this.filesToSync.filesToUpload.push(fileToSync);\n            }\n            if (this.autoSync) {\n                fileToSync.message = this.t('readyForUpload');\n            }\n            this.filesToSync.filesToUpload.push(Object.assign(Object.assign({}, fileToSync), { message: fileToSync.message, file: processedFile.file || file, url: this.interpolate(this.component.url, { file: fileToSync }), groupPermissions, groupResourceId: groupKey ? this.currentForm.submission.data[groupKey]._id : null }));\n        });\n    }\n    prepareFilesToUpload(files) {\n        return __awaiter(this, void 0, void 0, function* () {\n            // Only allow one upload if not multiple.\n            if (!this.component.multiple) {\n                files = Array.prototype.slice.call(files, 0, 1);\n            }\n            if (this.component.storage && files && files.length) {\n                this.fileDropHidden = true;\n                return Promise.all([...files].map((file) => __awaiter(this, void 0, void 0, function* () {\n                    yield this.prepareFileToUpload(file);\n                    this.redraw();\n                })));\n            }\n            else {\n                return Promise.resolve();\n            }\n        });\n    }\n    handleFilesToUpload(files) {\n        return __awaiter(this, void 0, void 0, function* () {\n            yield this.prepareFilesToUpload(files);\n            if (!this.autoSync) {\n                yield this.syncFiles();\n            }\n        });\n    }\n    prepareFileToDelete(fileInfo) {\n        this.filesToSync.filesToDelete.push(Object.assign(Object.assign({}, fileInfo), { status: 'info', message: this.autoSync\n                ? this.t('readyForRemovingFromStorage')\n                : this.t('preparingFileToRemove') }));\n        const index = this.dataValue.findIndex(file => file.name === fileInfo.name);\n        this.splice(index);\n        this.redraw();\n    }\n    handleFileToRemove(fileInfo) {\n        this.prepareFileToDelete(fileInfo);\n        if (!this.autoSync) {\n            this.syncFiles();\n        }\n    }\n    deleteFile(fileInfo) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const { options = {} } = this.component;\n            if (fileInfo && (['url', 'indexeddb', 's3', 'azure', 'googledrive'].includes(this.component.storage))) {\n                const { fileService } = this;\n                if (fileService && typeof fileService.deleteFile === 'function') {\n                    return yield fileService.deleteFile(fileInfo, options);\n                }\n                else {\n                    const formio = this.options.formio || (this.root && this.root.formio);\n                    if (formio) {\n                        return yield formio.makeRequest('', fileInfo.url, 'delete');\n                    }\n                }\n            }\n        });\n    }\n    delete() {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!this.filesToSync.filesToDelete.length) {\n                return Promise.resolve();\n            }\n            return yield Promise.all(this.filesToSync.filesToDelete.map((fileToSync) => __awaiter(this, void 0, void 0, function* () {\n                try {\n                    if (fileToSync.isValidationError) {\n                        return { fileToSync };\n                    }\n                    yield this.deleteFile(fileToSync);\n                    fileToSync.status = 'success';\n                    fileToSync.message = this.t('succefullyRemoved');\n                }\n                catch (response) {\n                    fileToSync.status = 'error';\n                    fileToSync.message = typeof response === 'string' ? response : response.toString();\n                }\n                finally {\n                    this.redraw();\n                }\n                return { fileToSync };\n            })));\n        });\n    }\n    updateProgress(fileInfo, progressEvent) {\n        fileInfo.progress = parseInt(100.0 * progressEvent.loaded / progressEvent.total);\n        if (fileInfo.status !== 'progress') {\n            fileInfo.status = 'progress';\n            delete fileInfo.message;\n            this.redraw();\n        }\n        else {\n            const progress = Array.prototype.find.call(this.refs.progress, progressElement => progressElement.id === fileInfo.id);\n            progress.innerHTML = `<span class=\"visually-hidden\">${fileInfo.progress}% ${this.t('Complete')}</span>`;\n            progress.style.width = `${fileInfo.progress}%`;\n            progress.ariaValueNow = fileInfo.progress.toString();\n        }\n    }\n    getMultipartOptions(fileToSync) {\n        let count = 0;\n        return this.component.useMultipartUpload && this.component.multipart ? Object.assign(Object.assign({}, this.component.multipart), { progressCallback: (total) => {\n                count++;\n                fileToSync.status = 'progress';\n                fileToSync.progress = parseInt(100 * count / total);\n                delete fileToSync.message;\n                this.redraw();\n            }, changeMessage: (message) => {\n                fileToSync.message = message;\n                this.redraw();\n            } }) : false;\n    }\n    uploadFile(fileToSync) {\n        return __awaiter(this, void 0, void 0, function* () {\n            return yield this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, \n            // Progress callback\n            this.updateProgress.bind(this, fileToSync), fileToSync.url, fileToSync.options, fileToSync.fileKey, fileToSync.groupPermissions, fileToSync.groupResourceId, () => { }, \n            // Abort upload callback\n            (abort) => this.abortUploads.push({\n                id: fileToSync.id,\n                abort,\n            }), this.getMultipartOptions(fileToSync));\n        });\n    }\n    upload() {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!this.filesToSync.filesToUpload.length) {\n                return Promise.resolve();\n            }\n            return yield Promise.all(this.filesToSync.filesToUpload.map((fileToSync) => __awaiter(this, void 0, void 0, function* () {\n                let fileInfo = null;\n                try {\n                    if (fileToSync.isValidationError) {\n                        return {\n                            fileToSync,\n                            fileInfo,\n                        };\n                    }\n                    fileInfo = yield this.uploadFile(fileToSync);\n                    fileToSync.status = 'success';\n                    fileToSync.message = this.t('succefullyUploaded');\n                    fileInfo.originalName = fileToSync.originalName;\n                    fileInfo.hash = fileToSync.hash;\n                }\n                catch (response) {\n                    fileToSync.status = 'error';\n                    delete fileToSync.progress;\n                    fileToSync.message = typeof response === 'string'\n                        ? response\n                        : response.type === 'abort'\n                            ? this.t('Request was aborted')\n                            : response.toString();\n                    this.emit('fileUploadError', {\n                        fileToSync,\n                        response,\n                    });\n                }\n                finally {\n                    delete fileToSync.progress;\n                    this.redraw();\n                }\n                return {\n                    fileToSync,\n                    fileInfo,\n                };\n            })));\n        });\n    }\n    syncFiles() {\n        return __awaiter(this, void 0, void 0, function* () {\n            this.isSyncing = true;\n            this.fileDropHidden = true;\n            this.redraw();\n            try {\n                const [filesToDelete = [], filesToUpload = []] = yield Promise.all([this.delete(), this.upload()]);\n                this.filesToSync.filesToDelete = filesToDelete\n                    .filter(file => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'error'; })\n                    .map(file => file.fileToSync);\n                this.filesToSync.filesToUpload = filesToUpload\n                    .filter(file => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'error'; })\n                    .map(file => file.fileToSync);\n                if (!this.hasValue()) {\n                    this.dataValue = [];\n                }\n                const data = filesToUpload\n                    .filter(file => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'success'; })\n                    .map(file => file.fileInfo);\n                this.dataValue.push(...data);\n                this.triggerChange();\n                return Promise.resolve();\n            }\n            catch (err) {\n                return Promise.reject();\n            }\n            finally {\n                this.isSyncing = false;\n                this.fileDropHidden = false;\n                this.abortUploads = [];\n                this.redraw();\n            }\n        });\n    }\n    getFile(fileInfo) {\n        const { options = {} } = this.component;\n        const { fileService } = this;\n        if (!fileService) {\n            return alert('File Service not provided');\n        }\n        if (this.component.privateDownload) {\n            fileInfo.private = true;\n        }\n        fileService.downloadFile(fileInfo, options).then((file) => {\n            if (file) {\n                if (['base64', 'indexeddb'].includes(file.storage)) {\n                    (0, downloadjs_1.default)(file.url, file.originalName || file.name, file.type);\n                }\n                else {\n                    window.open(file.url, '_blank');\n                }\n            }\n        })\n            .catch((response) => {\n            // Is alert the best way to do this?\n            // User is expecting an immediate notification due to attempting to download a file.\n            alert(response);\n        });\n    }\n    focus() {\n        if ('beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n        if (this.refs.fileBrowse) {\n            this.refs.fileBrowse.focus();\n        }\n    }\n    beforeSubmit() {\n        return __awaiter(this, void 0, void 0, function* () {\n            try {\n                if (!this.autoSync) {\n                    return Promise.resolve();\n                }\n                yield this.syncFiles();\n                return this.shouldSyncFiles\n                    ? Promise.reject(this.t('synchronizationFailed'))\n                    : Promise.resolve();\n            }\n            catch (error) {\n                return Promise.reject(error.message);\n            }\n        });\n    }\n    destroy(all) {\n        this.stopVideo();\n        super.destroy(all);\n    }\n}\nexports[\"default\"] = FileComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/file/File.js?");
+eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Field_1 = __importDefault(__webpack_require__(/*! ../_classes/field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst downloadjs_1 = __importDefault(__webpack_require__(/*! downloadjs */ \"./node_modules/downloadjs/download.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst fileProcessor_1 = __importDefault(__webpack_require__(/*! ../../providers/processor/fileProcessor */ \"./lib/cjs/providers/processor/fileProcessor.js\"));\nconst browser_md5_file_1 = __importDefault(__webpack_require__(/*! browser-md5-file */ \"./node_modules/browser-md5-file/dist/index.umd.js\"));\nlet Camera;\nlet webViewCamera = 'undefined' !== typeof window ? navigator.camera : Camera;\n// canvas.toBlob polyfill.\nlet htmlCanvasElement;\nif (typeof window !== 'undefined') {\n    htmlCanvasElement = window.HTMLCanvasElement;\n}\nelse if (typeof __webpack_require__.g !== 'undefined') {\n    htmlCanvasElement = __webpack_require__.g.HTMLCanvasElement;\n}\nif (htmlCanvasElement && !htmlCanvasElement.prototype.toBlob) {\n    Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {\n        value: function (callback, type, quality) {\n            var canvas = this;\n            setTimeout(function () {\n                var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]), len = binStr.length, arr = new Uint8Array(len);\n                for (var i = 0; i < len; i++) {\n                    arr[i] = binStr.charCodeAt(i);\n                }\n                callback(new Blob([arr], { type: type || 'image/png' }));\n            });\n        }\n    });\n}\nconst createRandomString = () => Math.random().toString(36).substring(2, 15);\nclass FileComponent extends Field_1.default {\n    static schema(...extend) {\n        return Field_1.default.schema({\n            type: 'file',\n            label: 'Upload',\n            key: 'file',\n            image: false,\n            privateDownload: false,\n            imageSize: '200',\n            filePattern: '*',\n            fileMinSize: '0KB',\n            fileMaxSize: '1GB',\n            uploadOnly: false,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'File',\n            group: 'premium',\n            icon: 'file',\n            documentation: '/userguide/form-building/premium-components#file',\n            weight: 100,\n            schema: FileComponent.schema(),\n        };\n    }\n    static get serverConditionSettings() {\n        return FileComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEmpty', 'isNotEmpty'] });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];\n    }\n    init() {\n        super.init();\n        webViewCamera = navigator.camera || Camera;\n        const fileReaderSupported = (typeof FileReader !== 'undefined');\n        const formDataSupported = typeof window !== 'undefined' ? Boolean(window.FormData) : false;\n        const progressSupported = (typeof window !== 'undefined' && window.XMLHttpRequest) ? ('upload' in new XMLHttpRequest) : false;\n        this.support = {\n            filereader: fileReaderSupported,\n            formdata: formDataSupported,\n            hasWarning: !fileReaderSupported || !formDataSupported || !progressSupported,\n            progress: progressSupported,\n        };\n        this.cameraMode = false;\n        this.fileDropHidden = false;\n        this.filesToSync = {\n            filesToUpload: [],\n            filesToDelete: [],\n        };\n        this.isSyncing = false;\n        this.abortUploads = [];\n    }\n    get dataReady() {\n        return this.filesReady || Promise.resolve();\n    }\n    get defaultSchema() {\n        return FileComponent.schema();\n    }\n    loadImage(fileInfo) {\n        if (this.component.privateDownload) {\n            fileInfo.private = true;\n        }\n        // pass the component to the downloadFile method\n        return this.fileService.downloadFile(fileInfo, this.component).then((result) => result.url);\n    }\n    get emptyValue() {\n        return [];\n    }\n    getValueAsString(value, options) {\n        if ((options === null || options === void 0 ? void 0 : options.review) && !this.component.uploadOnly) {\n            return lodash_1.default.map(value, (val, index) => {\n                return `<a href=\"${val.url || '#'}\" target=\"_blank\" data-path='${this.path}' data-fileindex='${index}'>${val.originalName}</a>`;\n            }).join(', ');\n        }\n        if (lodash_1.default.isArray(value)) {\n            return lodash_1.default.map(value, 'originalName').join(', ');\n        }\n        return lodash_1.default.get(value, 'originalName', '');\n    }\n    getValue() {\n        return this.dataValue;\n    }\n    get defaultValue() {\n        const value = super.defaultValue;\n        return Array.isArray(value) ? value : [];\n    }\n    get hasTypes() {\n        return this.component.fileTypes &&\n            Array.isArray(this.component.fileTypes) &&\n            this.component.fileTypes.length !== 0 &&\n            (this.component.fileTypes[0].label !== '' || this.component.fileTypes[0].value !== '');\n    }\n    get fileDropHidden() {\n        return this._fileBrowseHidden;\n    }\n    set fileDropHidden(value) {\n        if (typeof value !== 'boolean' || this.component.multiple) {\n            return;\n        }\n        this._fileBrowseHidden = value;\n    }\n    get shouldSyncFiles() {\n        return Boolean(this.filesToSync.filesToDelete.length || this.filesToSync.filesToUpload.length);\n    }\n    get autoSync() {\n        // Disable autoSync for now\n        return false;\n        // return _.get(this, 'component.autoSync', false);\n    }\n    get columnsSize() {\n        const actionsColumn = this.disabled ? 0 : this.autoSync ? 2 : 1;\n        const typeColumn = this.hasTypes ? 2 : 0;\n        const sizeColumn = 2;\n        const nameColumn = 12 - actionsColumn - typeColumn - sizeColumn;\n        return {\n            name: nameColumn,\n            size: sizeColumn,\n            type: typeColumn,\n            actions: actionsColumn,\n        };\n    }\n    render() {\n        const { filesToDelete, filesToUpload } = this.filesToSync;\n        return super.render(this.renderTemplate('file', {\n            fileSize: this.fileSize,\n            files: this.dataValue || [],\n            filesToDelete,\n            filesToUpload,\n            disabled: this.disabled,\n            support: this.support,\n            fileDropHidden: this.fileDropHidden,\n            showSyncButton: this.autoSync && (filesToDelete.length || filesToUpload.length),\n            isSyncing: this.isSyncing,\n            columns: this.columnsSize,\n        }));\n    }\n    getVideoStream(constraints) {\n        return navigator.mediaDevices.getUserMedia({\n            video: Object.assign({ width: { min: 640, ideal: 1920 }, height: { min: 360, ideal: 1080 }, aspectRatio: { ideal: 16 / 9 } }, constraints),\n            audio: false,\n        });\n    }\n    stopVideoStream(videoStream) {\n        videoStream.getVideoTracks().forEach((track) => track.stop());\n    }\n    getFrame(videoPlayer) {\n        return new Promise((resolve) => {\n            const canvas = document.createElement('canvas');\n            canvas.height = videoPlayer.videoHeight;\n            canvas.width = videoPlayer.videoWidth;\n            const context = canvas.getContext('2d');\n            context.drawImage(videoPlayer, 0, 0);\n            canvas.toBlob(resolve);\n        });\n    }\n    startVideo() {\n        this.getVideoStream()\n            .then((stream) => {\n            this.videoStream = stream;\n            const { videoPlayer } = this.refs;\n            if (!videoPlayer) {\n                console.warn(this.t('videoPlayerNotFound'));\n                this.cameraMode = false;\n                this.redraw();\n                return;\n            }\n            videoPlayer.srcObject = stream;\n            const width = parseInt(this.component.webcamSize) || 320;\n            videoPlayer.setAttribute('width', width);\n            videoPlayer.play();\n        })\n            .catch((err) => {\n            console.error(err);\n            this.cameraMode = false;\n            this.redraw();\n        });\n    }\n    stopVideo() {\n        if (this.videoStream) {\n            this.stopVideoStream(this.videoStream);\n            this.videoStream = null;\n        }\n    }\n    takePicture() {\n        const { videoPlayer } = this.refs;\n        if (!videoPlayer) {\n            console.warn(this.t('videoPlayerNotFound'));\n            this.cameraMode = false;\n            this.redraw();\n            return;\n        }\n        this.getFrame(videoPlayer)\n            .then((frame) => {\n            frame.name = `photo-${Date.now()}.png`;\n            this.handleFilesToUpload([frame]);\n            this.cameraMode = false;\n            this.redraw();\n        });\n    }\n    browseFiles(attrs = {}) {\n        return new Promise((resolve) => {\n            const fileInput = this.ce('input', Object.assign({ type: 'file', style: 'height: 0; width: 0; visibility: hidden;', tabindex: '-1' }, attrs));\n            document.body.appendChild(fileInput);\n            fileInput.addEventListener('change', () => {\n                resolve(fileInput.files);\n                document.body.removeChild(fileInput);\n            }, true);\n            // There is no direct way to trigger a file dialog. To work around this, create an input of type file and trigger\n            // a click event on it.\n            if (typeof fileInput.trigger === 'function') {\n                fileInput.trigger('click');\n            }\n            else {\n                fileInput.click();\n            }\n        });\n    }\n    set cameraMode(value) {\n        this._cameraMode = value;\n        if (value) {\n            this.startVideo();\n        }\n        else {\n            this.stopVideo();\n        }\n    }\n    get cameraMode() {\n        return this._cameraMode;\n    }\n    get useWebViewCamera() {\n        return this.imageUpload && webViewCamera;\n    }\n    get imageUpload() {\n        return Boolean(this.component.image);\n    }\n    get browseOptions() {\n        const options = {};\n        if (this.component.multiple) {\n            options.multiple = true;\n        }\n        if (this.component.capture) {\n            options.capture = this.component.capture;\n        }\n        //use \"accept\" attribute only for desktop devices because of its limited support by mobile browsers\n        const filePattern = this.component.filePattern.trim() || '';\n        if (!this.isMobile.any) {\n            const imagesPattern = 'image/*';\n            if (this.imageUpload && (!filePattern || filePattern === '*')) {\n                options.accept = imagesPattern;\n            }\n            else if (this.imageUpload && !filePattern.includes(imagesPattern)) {\n                options.accept = `${imagesPattern},${filePattern}`;\n            }\n            else {\n                options.accept = filePattern;\n            }\n        }\n        // if input capture is set, we need the \"accept\" attribute to determine which device to launch\n        else if (this.component.capture) {\n            if (filePattern.includes('video')) {\n                options.accept = 'video/*';\n            }\n            else if (filePattern.includes('audio')) {\n                options.accept = 'audio/*';\n            }\n            else {\n                options.accept = 'image/*';\n            }\n        }\n        return options;\n    }\n    get actions() {\n        return {\n            abort: this.abortRequest.bind(this),\n        };\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            fileDrop: 'single',\n            fileBrowse: 'single',\n            galleryButton: 'single',\n            cameraButton: 'single',\n            takePictureButton: 'single',\n            toggleCameraMode: 'single',\n            videoPlayer: 'single',\n            fileLink: 'multiple',\n            removeLink: 'multiple',\n            fileToSyncRemove: 'multiple',\n            fileImage: 'multiple',\n            fileType: 'multiple',\n            fileProcessingLoader: 'single',\n            syncNow: 'single',\n            restoreFile: 'multiple',\n            progress: 'multiple',\n        });\n        // Ensure we have an empty input refs. We need this for the setValue method to redraw the control when it is set.\n        this.refs.input = [];\n        const superAttach = super.attach(element);\n        if (this.refs.fileDrop) {\n            // if (!this.statuses.length) {\n            //   this.refs.fileDrop.removeAttribute('hidden');\n            // }\n            const _this = this;\n            this.addEventListener(this.refs.fileDrop, 'dragover', function (event) {\n                this.className = 'fileSelector fileDragOver';\n                event.preventDefault();\n            });\n            this.addEventListener(this.refs.fileDrop, 'dragleave', function (event) {\n                this.className = 'fileSelector';\n                event.preventDefault();\n            });\n            this.addEventListener(this.refs.fileDrop, 'drop', function (event) {\n                this.className = 'fileSelector';\n                event.preventDefault();\n                _this.handleFilesToUpload(event.dataTransfer.files);\n            });\n        }\n        this.addEventListener(element, 'click', (event) => {\n            this.handleAction(event);\n        });\n        if (this.refs.fileBrowse) {\n            this.addEventListener(this.refs.fileBrowse, 'click', (event) => {\n                event.preventDefault();\n                this.browseFiles(this.browseOptions)\n                    .then((files) => {\n                    this.handleFilesToUpload(files);\n                });\n            });\n        }\n        this.refs.fileLink.forEach((fileLink, index) => {\n            this.addEventListener(fileLink, 'click', (event) => {\n                event.preventDefault();\n                this.getFile(this.dataValue[index]);\n            });\n        });\n        this.refs.removeLink.forEach((removeLink, index) => {\n            this.addEventListener(removeLink, 'click', (event) => {\n                event.preventDefault();\n                const fileInfo = this.dataValue[index];\n                this.handleFileToRemove(fileInfo);\n            });\n        });\n        this.refs.fileToSyncRemove.forEach((fileToSyncRemove, index) => {\n            this.addEventListener(fileToSyncRemove, 'click', (event) => {\n                event.preventDefault();\n                this.filesToSync.filesToUpload.splice(index, 1);\n                this.redraw();\n            });\n        });\n        this.refs.restoreFile.forEach((fileToRestore, index) => {\n            this.addEventListener(fileToRestore, 'click', (event) => {\n                event.preventDefault();\n                const fileInfo = this.filesToSync.filesToDelete[index];\n                delete fileInfo.status;\n                delete fileInfo.message;\n                this.filesToSync.filesToDelete.splice(index, 1);\n                this.dataValue.push(fileInfo);\n                this.triggerChange();\n                this.redraw();\n            });\n        });\n        if (this.refs.galleryButton && webViewCamera) {\n            this.addEventListener(this.refs.galleryButton, 'click', (event) => {\n                event.preventDefault();\n                webViewCamera.getPicture((success) => {\n                    window.resolveLocalFileSystemURL(success, (fileEntry) => {\n                        fileEntry.file((file) => {\n                            const reader = new FileReader();\n                            reader.onloadend = (evt) => {\n                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });\n                                blob.name = file.name;\n                                this.handleFilesToUpload([blob]);\n                            };\n                            reader.readAsArrayBuffer(file);\n                        });\n                    });\n                }, (err) => {\n                    console.error(err);\n                }, {\n                    sourceType: webViewCamera.PictureSourceType.PHOTOLIBRARY,\n                });\n            });\n        }\n        if (this.refs.cameraButton && webViewCamera) {\n            this.addEventListener(this.refs.cameraButton, 'click', (event) => {\n                event.preventDefault();\n                webViewCamera.getPicture((success) => {\n                    window.resolveLocalFileSystemURL(success, (fileEntry) => {\n                        fileEntry.file((file) => {\n                            const reader = new FileReader();\n                            reader.onloadend = (evt) => {\n                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });\n                                blob.name = file.name;\n                                this.handleFilesToUpload([blob]);\n                            };\n                            reader.readAsArrayBuffer(file);\n                        });\n                    });\n                }, (err) => {\n                    console.error(err);\n                }, {\n                    sourceType: webViewCamera.PictureSourceType.CAMERA,\n                    encodingType: webViewCamera.EncodingType.PNG,\n                    mediaType: webViewCamera.MediaType.PICTURE,\n                    saveToPhotoAlbum: true,\n                    correctOrientation: false,\n                });\n            });\n        }\n        if (this.refs.takePictureButton) {\n            this.addEventListener(this.refs.takePictureButton, 'click', (event) => {\n                event.preventDefault();\n                this.takePicture();\n            });\n        }\n        if (this.refs.toggleCameraMode) {\n            this.addEventListener(this.refs.toggleCameraMode, 'click', (event) => {\n                event.preventDefault();\n                this.cameraMode = !this.cameraMode;\n                this.redraw();\n            });\n        }\n        this.refs.fileType.forEach((fileType, index) => {\n            if (!this.dataValue[index]) {\n                return;\n            }\n            this.dataValue[index].fileType = this.dataValue[index].fileType || this.component.fileTypes[0].label;\n            this.addEventListener(fileType, 'change', (event) => {\n                event.preventDefault();\n                const fileType = this.component.fileTypes.find((typeObj) => typeObj.value === event.target.value);\n                this.dataValue[index].fileType = fileType.label;\n            });\n        });\n        this.addEventListener(this.refs.syncNow, 'click', (event) => {\n            event.preventDefault();\n            this.syncFiles();\n        });\n        const fileService = this.fileService;\n        if (fileService) {\n            const loadingImages = [];\n            this.filesReady = new Promise((resolve, reject) => {\n                this.filesReadyResolve = resolve;\n                this.filesReadyReject = reject;\n            });\n            this.refs.fileImage.forEach((image, index) => {\n                loadingImages.push(this.loadImage(this.dataValue[index]).then((url) => (image.src = url)));\n            });\n            if (loadingImages.length) {\n                Promise.all(loadingImages).then(() => {\n                    this.filesReadyResolve();\n                }).catch(() => this.filesReadyReject());\n            }\n            else {\n                this.filesReadyResolve();\n            }\n        }\n        return superAttach;\n    }\n    /* eslint-disable max-len */\n    fileSize(a, b, c, d, e) {\n        return `${(b = Math, c = b.log, d = 1024, e = c(a) / c(d) | 0, a / b.pow(d, e)).toFixed(2)} ${e ? `${'kMGTPEZY'[--e]}B` : 'Bytes'}`;\n    }\n    /* eslint-enable max-len */\n    /* eslint-disable max-depth */\n    globStringToRegex(str) {\n        str = str.replace(/\\s/g, '');\n        let regexp = '', excludes = [];\n        if (str.length > 2 && str[0] === '/' && str[str.length - 1] === '/') {\n            regexp = str.substring(1, str.length - 1);\n        }\n        else {\n            const split = str.split(',');\n            if (split.length > 1) {\n                for (let i = 0; i < split.length; i++) {\n                    const r = this.globStringToRegex(split[i]);\n                    if (r.regexp) {\n                        regexp += `(${r.regexp})`;\n                        if (i < split.length - 1) {\n                            regexp += '|';\n                        }\n                    }\n                    else {\n                        excludes = excludes.concat(r.excludes);\n                    }\n                }\n            }\n            else {\n                if (str.startsWith('!')) {\n                    excludes.push(`^((?!${this.globStringToRegex(str.substring(1)).regexp}).)*$`);\n                }\n                else {\n                    if (str.startsWith('.')) {\n                        str = `*${str}`;\n                    }\n                    regexp = `^${str.replace(new RegExp('[.\\\\\\\\+*?\\\\[\\\\^\\\\]$(){}=!<>|:\\\\-]', 'g'), '\\\\$&')}$`;\n                    regexp = regexp.replace(/\\\\\\*/g, '.*').replace(/\\\\\\?/g, '.');\n                }\n            }\n        }\n        return { regexp, excludes };\n    }\n    /* eslint-enable max-depth */\n    translateScalars(str) {\n        if (typeof str === 'string') {\n            if (str.search(/kb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024);\n            }\n            if (str.search(/mb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024 * 1024);\n            }\n            if (str.search(/gb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024 * 1024 * 1024);\n            }\n            if (str.search(/b/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1));\n            }\n            if (str.search(/s/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1));\n            }\n            if (str.search(/m/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1) * 60);\n            }\n            if (str.search(/h/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1) * 3600);\n            }\n        }\n        return str;\n    }\n    validatePattern(file, val) {\n        if (!val) {\n            return true;\n        }\n        const pattern = this.globStringToRegex(val);\n        let valid = true;\n        if (pattern.regexp && pattern.regexp.length) {\n            const regexp = new RegExp(pattern.regexp, 'i');\n            valid = (!lodash_1.default.isNil(file.type) && regexp.test(file.type)) ||\n                (!lodash_1.default.isNil(file.name) && regexp.test(file.name));\n        }\n        valid = pattern.excludes.reduce((result, excludePattern) => {\n            const exclude = new RegExp(excludePattern, 'i');\n            return result && (lodash_1.default.isNil(file.type) || exclude.test(file.type)) &&\n                (lodash_1.default.isNil(file.name) || exclude.test(file.name));\n        }, valid);\n        return valid;\n    }\n    validateMinSize(file, val) {\n        return file.size + 0.1 >= this.translateScalars(val);\n    }\n    validateMaxSize(file, val) {\n        return file.size - 0.1 <= this.translateScalars(val);\n    }\n    abortRequest(id) {\n        const abortUpload = this.abortUploads.find(abortUpload => abortUpload.id === id);\n        if (abortUpload) {\n            abortUpload.abort();\n        }\n    }\n    handleAction(event) {\n        const target = event.target;\n        if (!target.id) {\n            return;\n        }\n        const [action, id] = target.id.split('-');\n        if (!action || !id || !this.actions[action]) {\n            return;\n        }\n        this.actions[action](id);\n    }\n    getFileName(file) {\n        return (0, utils_1.uniqueName)(file.name, this.component.fileNameTemplate, this.evalContext());\n    }\n    getInitFileToSync(file) {\n        const escapedFileName = file.name ? file.name.replaceAll('<', '&lt;').replaceAll('>', '&gt;') : file.name;\n        return {\n            id: createRandomString(),\n            // Get a unique name for this file to keep file collisions from occurring.\n            dir: this.interpolate(this.component.dir || ''),\n            name: this.getFileName(file),\n            originalName: escapedFileName,\n            fileKey: this.component.fileKey || 'file',\n            storage: this.component.storage,\n            options: this.component.options,\n            file,\n            size: file.size,\n            status: 'info',\n            message: this.t('waitFileProcessing'),\n            hash: '',\n        };\n    }\n    handleSubmissionRevisions(file) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (this.root.form.submissionRevisions !== 'true') {\n                return '';\n            }\n            const bmf = new browser_md5_file_1.default();\n            const hash = yield new Promise((resolve, reject) => {\n                this.emit('fileUploadingStart');\n                bmf.md5(file, (err, md5) => {\n                    if (err) {\n                        return reject(err);\n                    }\n                    return resolve(md5);\n                });\n            });\n            this.emit('fileUploadingEnd');\n            return hash;\n        });\n    }\n    validateFileName(file) {\n        // Check if file with the same name is being uploaded\n        const fileWithSameNameUploading = this.filesToSync.filesToUpload\n            .some(fileToSync => { var _a; return ((_a = fileToSync.file) === null || _a === void 0 ? void 0 : _a.name) === file.name; });\n        const fileWithSameNameUploaded = lodash_1.default.some(this.dataValue, fileStatus => fileStatus.originalName === file.name);\n        return fileWithSameNameUploaded || fileWithSameNameUploading\n            ? {\n                status: 'error',\n                message: this.t(fileWithSameNameUploading ? 'fileWithDuplicatedNameInProgress' : 'fileWithDuplicatedNameLoaded'),\n            }\n            : {};\n    }\n    validateFileSettings(file) {\n        // Check file pattern\n        if (this.component.filePattern && !this.validatePattern(file, this.component.filePattern)) {\n            return {\n                status: 'error',\n                message: this.t('wrongFileType', {\n                    pattern: this.component.filePattern,\n                }),\n            };\n        }\n        // Check file minimum size\n        if (this.component.fileMinSize && !this.validateMinSize(file, this.component.fileMinSize)) {\n            return {\n                status: 'error',\n                message: this.t('fileTooSmall', {\n                    size: this.component.fileMinSize,\n                }),\n            };\n        }\n        // Check file maximum size\n        if (this.component.fileMaxSize && !this.validateMaxSize(file, this.component.fileMaxSize)) {\n            return {\n                status: 'error',\n                message: this.t('fileTooBig', {\n                    size: this.component.fileMaxSize,\n                }),\n            };\n        }\n        return {};\n    }\n    validateFileService() {\n        const { fileService } = this;\n        return !fileService\n            ? {\n                status: 'error',\n                message: this.t('noFileService'),\n            }\n            : {};\n    }\n    validateFile(file) {\n        const fileServiceValidation = this.validateFileService();\n        if (fileServiceValidation.status === 'error') {\n            return fileServiceValidation;\n        }\n        const fileNameValidation = this.validateFileName(file);\n        if (fileNameValidation.status === 'error') {\n            return fileNameValidation;\n        }\n        return this.validateFileSettings(file);\n    }\n    getGroupPermissions() {\n        let groupKey = null;\n        let groupPermissions = null;\n        //Iterate through form components to find group resource if one exists\n        this.root.everyComponent((element) => {\n            var _a, _b;\n            if (((_a = element.component) === null || _a === void 0 ? void 0 : _a.submissionAccess) || ((_b = element.component) === null || _b === void 0 ? void 0 : _b.defaultPermission)) {\n                groupPermissions = !element.component.submissionAccess ? [\n                    {\n                        type: element.component.defaultPermission,\n                        roles: [],\n                    },\n                ] : element.component.submissionAccess;\n                groupPermissions.forEach((permission) => {\n                    groupKey = ['admin', 'write', 'create'].includes(permission.type) ? element.component.key : null;\n                });\n            }\n        });\n        return { groupKey, groupPermissions };\n    }\n    triggerFileProcessor(file) {\n        return __awaiter(this, void 0, void 0, function* () {\n            let processedFile = null;\n            if (this.root.options.fileProcessor) {\n                try {\n                    if (this.refs.fileProcessingLoader) {\n                        this.refs.fileProcessingLoader.style.display = 'block';\n                    }\n                    const fileProcessorHandler = (0, fileProcessor_1.default)(this.fileService, this.root.options.fileProcessor);\n                    processedFile = yield fileProcessorHandler(file, this.component.properties);\n                }\n                catch (err) {\n                    this.fileDropHidden = false;\n                    return {\n                        status: 'error',\n                        message: this.t('fileProcessingFailed'),\n                    };\n                }\n                finally {\n                    if (this.refs.fileProcessingLoader) {\n                        this.refs.fileProcessingLoader.style.display = 'none';\n                    }\n                }\n            }\n            return {\n                file: processedFile,\n            };\n        });\n    }\n    prepareFileToUpload(file) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const fileToSync = this.getInitFileToSync(file);\n            fileToSync.hash = yield this.handleSubmissionRevisions(file);\n            const { status, message } = this.validateFile(file);\n            if (status === 'error') {\n                fileToSync.isValidationError = true;\n                fileToSync.status = status;\n                fileToSync.message = message;\n                return this.filesToSync.filesToUpload.push(fileToSync);\n            }\n            if (this.component.privateDownload) {\n                file.private = true;\n            }\n            const { groupKey, groupPermissions } = this.getGroupPermissions();\n            const processedFile = yield this.triggerFileProcessor(file);\n            if (processedFile.status === 'error') {\n                fileToSync.status === 'error';\n                fileToSync.message = processedFile.message;\n                return this.filesToSync.filesToUpload.push(fileToSync);\n            }\n            if (this.autoSync) {\n                fileToSync.message = this.t('readyForUpload');\n            }\n            this.filesToSync.filesToUpload.push(Object.assign(Object.assign({}, fileToSync), { message: fileToSync.message, file: processedFile.file || file, url: this.interpolate(this.component.url, { file: fileToSync }), groupPermissions, groupResourceId: groupKey ? this.currentForm.submission.data[groupKey]._id : null }));\n        });\n    }\n    prepareFilesToUpload(files) {\n        return __awaiter(this, void 0, void 0, function* () {\n            // Only allow one upload if not multiple.\n            if (!this.component.multiple) {\n                files = Array.prototype.slice.call(files, 0, 1);\n            }\n            if (this.component.storage && files && files.length) {\n                this.fileDropHidden = true;\n                return Promise.all([...files].map((file) => __awaiter(this, void 0, void 0, function* () {\n                    yield this.prepareFileToUpload(file);\n                    this.redraw();\n                })));\n            }\n            else {\n                return Promise.resolve();\n            }\n        });\n    }\n    handleFilesToUpload(files) {\n        return __awaiter(this, void 0, void 0, function* () {\n            yield this.prepareFilesToUpload(files);\n            if (!this.autoSync) {\n                yield this.syncFiles();\n            }\n        });\n    }\n    prepareFileToDelete(fileInfo) {\n        this.filesToSync.filesToDelete.push(Object.assign(Object.assign({}, fileInfo), { status: 'info', message: this.autoSync\n                ? this.t('readyForRemovingFromStorage')\n                : this.t('preparingFileToRemove') }));\n        const index = this.dataValue.findIndex(file => file.name === fileInfo.name);\n        this.splice(index);\n        this.redraw();\n    }\n    handleFileToRemove(fileInfo) {\n        this.prepareFileToDelete(fileInfo);\n        if (!this.autoSync) {\n            this.syncFiles();\n        }\n    }\n    deleteFile(fileInfo) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const { options = {} } = this.component;\n            if (fileInfo && (['url', 'indexeddb', 's3', 'azure', 'googledrive'].includes(this.component.storage))) {\n                const { fileService } = this;\n                if (fileService && typeof fileService.deleteFile === 'function') {\n                    return yield fileService.deleteFile(fileInfo, options);\n                }\n                else {\n                    const formio = this.options.formio || (this.root && this.root.formio);\n                    if (formio) {\n                        return yield formio.makeRequest('', fileInfo.url, 'delete');\n                    }\n                }\n            }\n        });\n    }\n    delete() {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!this.filesToSync.filesToDelete.length) {\n                return Promise.resolve();\n            }\n            return yield Promise.all(this.filesToSync.filesToDelete.map((fileToSync) => __awaiter(this, void 0, void 0, function* () {\n                try {\n                    if (fileToSync.isValidationError) {\n                        return { fileToSync };\n                    }\n                    yield this.deleteFile(fileToSync);\n                    fileToSync.status = 'success';\n                    fileToSync.message = this.t('succefullyRemoved');\n                }\n                catch (response) {\n                    fileToSync.status = 'error';\n                    fileToSync.message = typeof response === 'string' ? response : response.toString();\n                }\n                finally {\n                    this.redraw();\n                }\n                return { fileToSync };\n            })));\n        });\n    }\n    updateProgress(fileInfo, progressEvent) {\n        fileInfo.progress = parseInt(100.0 * progressEvent.loaded / progressEvent.total);\n        if (fileInfo.status !== 'progress') {\n            fileInfo.status = 'progress';\n            delete fileInfo.message;\n            this.redraw();\n        }\n        else {\n            const progress = Array.prototype.find.call(this.refs.progress, progressElement => progressElement.id === fileInfo.id);\n            progress.innerHTML = `<span class=\"visually-hidden\">${fileInfo.progress}% ${this.t('Complete')}</span>`;\n            progress.style.width = `${fileInfo.progress}%`;\n            progress.ariaValueNow = fileInfo.progress.toString();\n        }\n    }\n    getMultipartOptions(fileToSync) {\n        let count = 0;\n        return this.component.useMultipartUpload && this.component.multipart ? Object.assign(Object.assign({}, this.component.multipart), { progressCallback: (total) => {\n                count++;\n                fileToSync.status = 'progress';\n                fileToSync.progress = parseInt(100 * count / total);\n                delete fileToSync.message;\n                this.redraw();\n            }, changeMessage: (message) => {\n                fileToSync.message = message;\n                this.redraw();\n            } }) : false;\n    }\n    uploadFile(fileToSync) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const filePromise = this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, \n            // Progress callback\n            this.updateProgress.bind(this, fileToSync), fileToSync.url, fileToSync.options, fileToSync.fileKey, fileToSync.groupPermissions, fileToSync.groupResourceId, () => {\n                this.emit('fileUploadingStart', filePromise);\n            }, \n            // Abort upload callback\n            (abort) => this.abortUploads.push({\n                id: fileToSync.id,\n                abort,\n            }), this.getMultipartOptions(fileToSync));\n            return yield filePromise;\n        });\n    }\n    upload() {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!this.filesToSync.filesToUpload.length) {\n                return Promise.resolve();\n            }\n            return yield Promise.all(this.filesToSync.filesToUpload.map((fileToSync) => __awaiter(this, void 0, void 0, function* () {\n                let fileInfo = null;\n                try {\n                    if (fileToSync.isValidationError) {\n                        return {\n                            fileToSync,\n                            fileInfo,\n                        };\n                    }\n                    fileInfo = yield this.uploadFile(fileToSync);\n                    fileToSync.status = 'success';\n                    fileToSync.message = this.t('succefullyUploaded');\n                    fileInfo.originalName = fileToSync.originalName;\n                    fileInfo.hash = fileToSync.hash;\n                    this.emit('fileUploadingEnd', Promise.resolve(fileInfo));\n                }\n                catch (response) {\n                    fileToSync.status = 'error';\n                    delete fileToSync.progress;\n                    fileToSync.message = typeof response === 'string'\n                        ? response\n                        : response.type === 'abort'\n                            ? this.t('Request was aborted')\n                            : response.toString();\n                    this.emit('fileUploadingEnd', Promise.reject(response));\n                    this.emit('fileUploadError', {\n                        fileToSync,\n                        response,\n                    });\n                }\n                finally {\n                    delete fileToSync.progress;\n                    this.redraw();\n                }\n                return {\n                    fileToSync,\n                    fileInfo,\n                };\n            })));\n        });\n    }\n    syncFiles() {\n        return __awaiter(this, void 0, void 0, function* () {\n            this.isSyncing = true;\n            this.fileDropHidden = true;\n            this.redraw();\n            try {\n                const [filesToDelete = [], filesToUpload = []] = yield Promise.all([this.delete(), this.upload()]);\n                this.filesToSync.filesToDelete = filesToDelete\n                    .filter(file => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'error'; })\n                    .map(file => file.fileToSync);\n                this.filesToSync.filesToUpload = filesToUpload\n                    .filter(file => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'error'; })\n                    .map(file => file.fileToSync);\n                if (!this.hasValue()) {\n                    this.dataValue = [];\n                }\n                const data = filesToUpload\n                    .filter(file => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'success'; })\n                    .map(file => file.fileInfo);\n                this.dataValue.push(...data);\n                this.triggerChange();\n                return Promise.resolve();\n            }\n            catch (err) {\n                return Promise.reject();\n            }\n            finally {\n                this.isSyncing = false;\n                this.fileDropHidden = false;\n                this.abortUploads = [];\n                this.redraw();\n            }\n        });\n    }\n    getFile(fileInfo) {\n        const { options = {} } = this.component;\n        const { fileService } = this;\n        if (!fileService) {\n            return alert('File Service not provided');\n        }\n        if (this.component.privateDownload) {\n            fileInfo.private = true;\n        }\n        fileService.downloadFile(fileInfo, options).then((file) => {\n            if (file) {\n                if (['base64', 'indexeddb'].includes(file.storage)) {\n                    (0, downloadjs_1.default)(file.url, file.originalName || file.name, file.type);\n                }\n                else {\n                    window.open(file.url, '_blank');\n                }\n            }\n        })\n            .catch((response) => {\n            // Is alert the best way to do this?\n            // User is expecting an immediate notification due to attempting to download a file.\n            alert(response);\n        });\n    }\n    focus() {\n        if ('beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n        if (this.refs.fileBrowse) {\n            this.refs.fileBrowse.focus();\n        }\n    }\n    beforeSubmit() {\n        return __awaiter(this, void 0, void 0, function* () {\n            try {\n                if (!this.autoSync) {\n                    return Promise.resolve();\n                }\n                yield this.syncFiles();\n                return this.shouldSyncFiles\n                    ? Promise.reject(this.t('synchronizationFailed'))\n                    : Promise.resolve();\n            }\n            catch (error) {\n                return Promise.reject(error.message);\n            }\n        });\n    }\n    destroy(all) {\n        this.stopVideo();\n        super.destroy(all);\n    }\n}\nexports[\"default\"] = FileComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/file/File.js?");
 
 /***/ }),
 
@@ -6634,7 +6634,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ (function(__unused_webpack_module, exports) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = [\n    {\n        key: 'labelPosition',\n        ignore: true\n    },\n    {\n        key: 'placeholder',\n        ignore: true\n    },\n    {\n        key: 'description',\n        ignore: true\n    },\n    {\n        key: 'tooltip',\n        ignore: true\n    },\n    {\n        key: 'hideLabel',\n        ignore: true\n    },\n    {\n        key: 'autofocus',\n        ignore: true\n    },\n    {\n        key: 'tabindex',\n        ignore: true\n    },\n    {\n        key: 'hidden',\n        ignore: true\n    },\n    {\n        key: 'tableView',\n        ignore: true\n    },\n    {\n        key: 'disabled',\n        ignore: true\n    },\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/hidden/editForm/Hidden.edit.display.js?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = [\n    {\n        key: 'labelPosition',\n        ignore: true\n    },\n    {\n        key: 'labelWidth',\n        ignore: true\n    },\n    {\n        key: 'labelMargin',\n        ignore: true\n    },\n    {\n        key: 'placeholder',\n        ignore: true\n    },\n    {\n        key: 'description',\n        ignore: true\n    },\n    {\n        key: 'tooltip',\n        ignore: true\n    },\n    {\n        key: 'hideLabel',\n        ignore: true\n    },\n    {\n        key: 'autofocus',\n        ignore: true\n    },\n    {\n        key: 'tabindex',\n        ignore: true\n    },\n    {\n        key: 'hidden',\n        ignore: true\n    },\n    {\n        key: 'tableView',\n        ignore: true\n    },\n    {\n        key: 'disabled',\n        ignore: true\n    },\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/hidden/editForm/Hidden.edit.display.js?");
 
 /***/ }),
 
@@ -6667,7 +6667,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    {\n        key: 'labelPosition',\n        ignore: true\n    },\n    {\n        key: 'placeholder',\n        ignore: true\n    },\n    {\n        key: 'description',\n        ignore: true\n    },\n    {\n        key: 'tooltip',\n        ignore: true\n    },\n    {\n        key: 'hideLabel',\n        ignore: true\n    },\n    {\n        key: 'autofocus',\n        ignore: true\n    },\n    {\n        key: 'disabled',\n        ignore: true\n    },\n    {\n        key: 'tabindex',\n        ignore: true\n    },\n    {\n        key: 'tableView',\n        ignore: true\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'tag',\n        weight: 50,\n        label: 'HTML Tag',\n        placeholder: 'HTML Element Tag',\n        tooltip: 'The tag of this HTML element.'\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'className',\n        weight: 60,\n        label: 'CSS Class',\n        placeholder: 'CSS Class',\n        tooltip: 'The CSS class for this HTML element.'\n    },\n    {\n        type: 'datagrid',\n        input: true,\n        label: 'Attributes',\n        key: 'attrs',\n        tooltip: 'The attributes for this HTML element. Only safe attributes are allowed, such as src, href, and title.',\n        weight: 70,\n        components: [\n            {\n                label: 'Attribute',\n                key: 'attr',\n                input: true,\n                type: 'textfield'\n            },\n            {\n                label: 'Value',\n                key: 'value',\n                input: true,\n                type: 'textfield'\n            }\n        ]\n    },\n    {\n        type: 'textarea',\n        input: true,\n        editor: 'ace',\n        rows: 10,\n        as: 'html',\n        label: 'Content',\n        tooltip: 'The content of this HTML element.',\n        defaultValue: '<div class=\"well\">Content</div>',\n        key: 'content',\n        weight: 80\n    },\n    {\n        weight: 85,\n        type: 'checkbox',\n        label: 'Refresh On Change',\n        tooltip: 'Rerender the field whenever a value on the form changes.',\n        key: 'refreshOnChange',\n        input: true\n    },\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/html/editForm/HTML.edit.display.js?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = [\n    {\n        key: 'labelPosition',\n        ignore: true\n    },\n    {\n        key: 'labelWidth',\n        ignore: true\n    },\n    {\n        key: 'labelMargin',\n        ignore: true\n    },\n    {\n        key: 'placeholder',\n        ignore: true\n    },\n    {\n        key: 'description',\n        ignore: true\n    },\n    {\n        key: 'tooltip',\n        ignore: true\n    },\n    {\n        key: 'hideLabel',\n        ignore: true\n    },\n    {\n        key: 'autofocus',\n        ignore: true\n    },\n    {\n        key: 'disabled',\n        ignore: true\n    },\n    {\n        key: 'tabindex',\n        ignore: true\n    },\n    {\n        key: 'tableView',\n        ignore: true\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'tag',\n        weight: 50,\n        label: 'HTML Tag',\n        placeholder: 'HTML Element Tag',\n        tooltip: 'The tag of this HTML element.'\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'className',\n        weight: 60,\n        label: 'CSS Class',\n        placeholder: 'CSS Class',\n        tooltip: 'The CSS class for this HTML element.'\n    },\n    {\n        type: 'datagrid',\n        input: true,\n        label: 'Attributes',\n        key: 'attrs',\n        tooltip: 'The attributes for this HTML element. Only safe attributes are allowed, such as src, href, and title.',\n        weight: 70,\n        components: [\n            {\n                label: 'Attribute',\n                key: 'attr',\n                input: true,\n                type: 'textfield'\n            },\n            {\n                label: 'Value',\n                key: 'value',\n                input: true,\n                type: 'textfield'\n            }\n        ]\n    },\n    {\n        type: 'textarea',\n        input: true,\n        editor: 'ace',\n        rows: 10,\n        as: 'html',\n        label: 'Content',\n        tooltip: 'The content of this HTML element.',\n        defaultValue: '<div class=\"well\">Content</div>',\n        key: 'content',\n        weight: 80\n    },\n    {\n        weight: 85,\n        type: 'checkbox',\n        label: 'Refresh On Change',\n        tooltip: 'Rerender the field whenever a value on the form changes.',\n        key: 'refreshOnChange',\n        input: true\n    },\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/html/editForm/HTML.edit.display.js?");
 
 /***/ }),
 
@@ -6733,7 +6733,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ (function(__unused_webpack_module, exports) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = [\n    {\n        key: 'spellcheck',\n        ignore: true\n    },\n    {\n        key: 'inputMask',\n        ignore: true\n    },\n    {\n        key: 'allowMultipleMasks',\n        ignore: true\n    },\n    {\n        key: 'showWordCount',\n        ignore: true,\n    },\n    {\n        key: 'showCharCount',\n        ignore: true,\n    }\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/number/editForm/Number.edit.display.js?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = [\n    {\n        key: 'spellcheck',\n        ignore: true\n    },\n    {\n        key: 'inputMask',\n        ignore: true\n    },\n    {\n        key: 'allowMultipleMasks',\n        ignore: true\n    },\n    {\n        key: 'inputMasks',\n        ignore: true\n    },\n    {\n        key: 'widget.type',\n        ignore: true\n    },\n    {\n        key: 'widget',\n        ignore: true\n    },\n    {\n        key: 'showWordCount',\n        ignore: true,\n    },\n    {\n        key: 'showCharCount',\n        ignore: true,\n    }\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/number/editForm/Number.edit.display.js?");
 
 /***/ }),
 
@@ -6832,7 +6832,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ (function(__unused_webpack_module, exports) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = [\n    {\n        ignore: true,\n        key: 'mask',\n    },\n    {\n        key: 'inputMask',\n        ignore: true\n    },\n    {\n        key: 'allowMultipleMasks',\n        ignore: true\n    }\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/password/editForm/Password.edit.display.js?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = [\n    {\n        ignore: true,\n        key: 'mask',\n    },\n    {\n        key: 'inputMask',\n        ignore: true\n    },\n    {\n        key: 'allowMultipleMasks',\n        ignore: true\n    },\n    {\n        key: 'inputMasks',\n        ignore: true\n    },\n    {\n        key: 'widget.type',\n        ignore: true\n    },\n    {\n        key: 'widget',\n        ignore: true\n    },\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/password/editForm/Password.edit.display.js?");
 
 /***/ }),
 
@@ -6854,7 +6854,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst TextField_form_1 = __importDefault(__webpack_require__(/*! ../textfield/TextField.form */ \"./lib/cjs/components/textfield/TextField.form.js\"));\nconst PhoneNumber_edit_validation_1 = __importDefault(__webpack_require__(/*! ./editForm/PhoneNumber.edit.validation */ \"./lib/cjs/components/phonenumber/editForm/PhoneNumber.edit.validation.js\"));\n/**\n * The Edit Form function.\n * @param {...any} extend - The components that extend the edit form.\n * @returns {import('@formio/core').Component[]} - The edit form components.\n */\nfunction default_1(...extend) {\n    return (0, TextField_form_1.default)([\n        {\n            key: 'display',\n            components: [\n                {\n                    key: 'showWordCount',\n                    ignore: true\n                },\n                {\n                    key: 'showCharCount',\n                    ignore: true\n                }\n            ]\n        },\n        {\n            key: 'data',\n            components: [\n                {\n                    key: 'case',\n                    ignore: true\n                }\n            ]\n        },\n        {\n            key: 'validation',\n            components: PhoneNumber_edit_validation_1.default\n        },\n    ], ...extend);\n}\nexports[\"default\"] = default_1;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/phonenumber/PhoneNumber.form.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst TextField_form_1 = __importDefault(__webpack_require__(/*! ../textfield/TextField.form */ \"./lib/cjs/components/textfield/TextField.form.js\"));\nconst PhoneNumber_edit_validation_1 = __importDefault(__webpack_require__(/*! ./editForm/PhoneNumber.edit.validation */ \"./lib/cjs/components/phonenumber/editForm/PhoneNumber.edit.validation.js\"));\n/**\n * The Edit Form function.\n * @param {...any} extend - The components that extend the edit form.\n * @returns {import('@formio/core').Component[]} - The edit form components.\n */\nfunction default_1(...extend) {\n    return (0, TextField_form_1.default)([\n        {\n            key: 'display',\n            components: [\n                {\n                    key: 'showWordCount',\n                    ignore: true\n                },\n                {\n                    key: 'showCharCount',\n                    ignore: true\n                },\n                {\n                    key: 'widget.type',\n                    ignore: true\n                },\n                {\n                    key: 'widget',\n                    ignore: true\n                },\n            ]\n        },\n        {\n            key: 'data',\n            components: [\n                {\n                    key: 'case',\n                    ignore: true\n                }\n            ]\n        },\n        {\n            key: 'validation',\n            components: PhoneNumber_edit_validation_1.default\n        },\n    ], ...extend);\n}\nexports[\"default\"] = default_1;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/phonenumber/PhoneNumber.form.js?");
 
 /***/ }),
 
@@ -7228,7 +7228,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    {\n        key: 'labelPosition',\n        ignore: true\n    },\n    {\n        key: 'placeholder',\n        ignore: true\n    },\n    {\n        key: 'description',\n        ignore: true\n    },\n    {\n        key: 'autofocus',\n        ignore: true\n    },\n    {\n        key: 'tooltip',\n        ignore: true\n    },\n    {\n        key: 'tabindex',\n        ignore: true\n    },\n    {\n        key: 'disabled',\n        ignore: true\n    },\n    {\n        key: 'tableView',\n        ignore: true\n    },\n    {\n        key: 'hideLabel',\n        ignore: true\n    },\n    {\n        weight: 0,\n        type: 'textfield',\n        input: true,\n        key: 'label',\n        label: 'Label',\n        placeholder: 'Field Label',\n        tooltip: 'The label for this field.',\n        validate: {\n            required: true\n        },\n        autofocus: true,\n        overrideEditForm: true\n    },\n    {\n        key: 'components',\n        type: 'datagrid',\n        input: true,\n        label: 'Tabs',\n        weight: 50,\n        reorder: true,\n        components: [\n            {\n                type: 'textfield',\n                input: true,\n                key: 'label',\n                label: 'Label'\n            },\n            {\n                type: 'textfield',\n                input: true,\n                key: 'key',\n                label: 'Key',\n                allowCalculateOverride: true,\n                calculateValue: { _camelCase: [{ var: 'row.label' }] }\n            }\n        ]\n    },\n    {\n        weight: 1100,\n        type: 'checkbox',\n        label: 'Vertical Layout',\n        tooltip: 'Make this field display in vertical orientation.',\n        key: 'verticalLayout',\n        input: true\n    },\n    {\n        key: 'hideLabel',\n        ignore: true\n    },\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/tabs/editForm/Tabs.edit.display.js?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = [\n    {\n        key: 'labelPosition',\n        ignore: true\n    },\n    {\n        key: 'labelWidth',\n        ignore: true\n    },\n    {\n        key: 'labelMargin',\n        ignore: true\n    },\n    {\n        key: 'placeholder',\n        ignore: true\n    },\n    {\n        key: 'description',\n        ignore: true\n    },\n    {\n        key: 'autofocus',\n        ignore: true\n    },\n    {\n        key: 'tooltip',\n        ignore: true\n    },\n    {\n        key: 'tabindex',\n        ignore: true\n    },\n    {\n        key: 'disabled',\n        ignore: true\n    },\n    {\n        key: 'tableView',\n        ignore: true\n    },\n    {\n        key: 'hideLabel',\n        ignore: true\n    },\n    {\n        weight: 0,\n        type: 'textfield',\n        input: true,\n        key: 'label',\n        label: 'Label',\n        placeholder: 'Field Label',\n        tooltip: 'The label for this field.',\n        validate: {\n            required: true\n        },\n        autofocus: true,\n        overrideEditForm: true\n    },\n    {\n        key: 'components',\n        type: 'datagrid',\n        input: true,\n        label: 'Tabs',\n        weight: 50,\n        reorder: true,\n        components: [\n            {\n                type: 'textfield',\n                input: true,\n                key: 'label',\n                label: 'Label'\n            },\n            {\n                type: 'textfield',\n                input: true,\n                key: 'key',\n                label: 'Key',\n                allowCalculateOverride: true,\n                calculateValue: { _camelCase: [{ var: 'row.label' }] }\n            }\n        ]\n    },\n    {\n        weight: 1100,\n        type: 'checkbox',\n        label: 'Vertical Layout',\n        tooltip: 'Make this field display in vertical orientation.',\n        key: 'verticalLayout',\n        input: true\n    },\n    {\n        key: 'hideLabel',\n        ignore: true\n    },\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/tabs/editForm/Tabs.edit.display.js?");
 
 /***/ }),
 
@@ -7294,7 +7294,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../../Formio */ \"./lib/cjs/Formio.js\");\nexports[\"default\"] = [\n    {\n        key: 'inputMask',\n        ignore: true\n    },\n    {\n        key: 'allowMultipleMasks',\n        ignore: true\n    },\n    {\n        key: 'mask',\n        ignore: true\n    },\n    {\n        type: 'number',\n        input: true,\n        key: 'rows',\n        label: 'Rows',\n        weight: 210,\n        tooltip: 'This allows control over how many rows are visible in the text area.',\n        placeholder: 'Enter the amount of rows'\n    },\n    {\n        weight: 1350,\n        type: 'checkbox',\n        input: true,\n        key: 'spellcheck',\n        defaultValue: true,\n        label: 'Allow Spellcheck'\n    },\n    {\n        type: 'select',\n        input: true,\n        key: 'editor',\n        label: 'Editor',\n        tooltip: 'Select the type of WYSIWYG editor to use for this text area.',\n        dataSrc: 'values',\n        data: {\n            values: [\n                { label: 'None', value: '' },\n                { label: 'ACE', value: 'ace' },\n                { label: 'CKEditor', value: 'ckeditor' },\n                { label: 'Quill', value: 'quill' },\n            ]\n        },\n        weight: 415\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        key: 'autoExpand',\n        label: 'Auto Expand',\n        tooltip: 'This will make the TextArea auto expand it\\'s height as the user is typing into the area.',\n        weight: 415,\n        conditional: {\n            json: {\n                '==': [\n                    { var: 'data.editor' },\n                    ''\n                ]\n            }\n        }\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        key: 'isUploadEnabled',\n        label: 'Enable Image Upload',\n        weight: 415.1,\n        conditional: {\n            json: {\n                or: [\n                    {\n                        '===': [\n                            { var: 'data.editor' },\n                            'quill'\n                        ],\n                    },\n                    {\n                        '===': [\n                            { var: 'data.editor' },\n                            'ckeditor'\n                        ],\n                    }\n                ]\n            }\n        }\n    },\n    {\n        type: 'select',\n        input: true,\n        key: 'uploadStorage',\n        label: 'Image Upload Storage',\n        placeholder: 'Select your file storage provider',\n        weight: 415.2,\n        tooltip: 'Which storage to save the files in.',\n        valueProperty: 'value',\n        dataSrc: 'custom',\n        data: {\n            custom() {\n                return lodash_1.default.map(Formio_1.Formio.Providers.getProviders('storage'), (storage, key) => ({\n                    label: storage.title,\n                    value: key\n                }));\n            }\n        },\n        conditional: {\n            json: {\n                '===': [\n                    { var: 'data.isUploadEnabled' },\n                    true\n                ]\n            }\n        }\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'uploadUrl',\n        label: 'Image Upload Url',\n        weight: 415.3,\n        placeholder: 'Enter the url to post the files to.',\n        tooltip: 'See <a href=\\'https://github.com/danialfarid/ng-file-upload#server-side\\' target=\\'_blank\\'>https://github.com/danialfarid/ng-file-upload#server-side</a> for how to set up the server.',\n        conditional: {\n            json: { '===': [{ var: 'data.uploadStorage' }, 'url'] }\n        }\n    },\n    {\n        type: 'textarea',\n        key: 'uploadOptions',\n        label: 'Image Upload Custom request options',\n        tooltip: 'Pass your custom xhr options(optional)',\n        rows: 5,\n        editor: 'ace',\n        input: true,\n        weight: 415.4,\n        placeholder: `{\n      \"withCredentials\": true\n    }`,\n        conditional: {\n            json: {\n                '===': [{\n                        var: 'data.uploadStorage'\n                    }, 'url']\n            }\n        }\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'uploadDir',\n        label: 'Image Upload Directory',\n        placeholder: '(optional) Enter a directory for the files',\n        tooltip: 'This will place all the files uploaded in this field in the directory',\n        weight: 415.5,\n        conditional: {\n            json: {\n                '===': [\n                    { var: 'data.isUploadEnabled' },\n                    true\n                ]\n            }\n        }\n    },\n    {\n        type: 'textfield',\n        key: 'fileKey',\n        input: true,\n        label: 'File form-data Key',\n        tooltip: 'Key name that you would like to modify for the file while calling API request.',\n        rows: 5,\n        weight: 415.6,\n        placeholder: 'Enter the key name of a file for form data.',\n        conditional: {\n            json: {\n                and: [\n                    { '===': [\n                            { var: 'data.editor' },\n                            'quill'\n                        ] },\n                    { '===': [\n                            { var: 'data.isUploadEnabled' },\n                            true\n                        ] },\n                    { '===': [\n                            { var: 'data.uploadStorage' },\n                            'url'\n                        ] },\n                ]\n            }\n        }\n    },\n    {\n        type: 'select',\n        input: true,\n        key: 'as',\n        label: 'Save As',\n        dataSrc: 'values',\n        tooltip: 'This setting determines how the value should be entered and stored in the database.',\n        clearOnHide: true,\n        data: {\n            values: [\n                { label: 'String', value: 'string' },\n                { label: 'JSON', value: 'json' },\n                { label: 'HTML', value: 'html' }\n            ]\n        },\n        conditional: {\n            json: {\n                or: [\n                    { '===': [\n                            { var: 'data.editor' },\n                            'quill'\n                        ] },\n                    { '===': [\n                            { var: 'data.editor' },\n                            'ace'\n                        ] }\n                ]\n            }\n        },\n        weight: 416\n    },\n    {\n        type: 'textarea',\n        input: true,\n        editor: 'ace',\n        rows: 10,\n        as: 'json',\n        label: 'Editor Settings',\n        tooltip: 'Enter the WYSIWYG editor JSON configuration.',\n        key: 'wysiwyg',\n        customDefaultValue(value, component, row, data, instance) {\n            return instance ? instance.wysiwygDefault : '';\n        },\n        conditional: {\n            json: {\n                or: [\n                    { '===': [\n                            { var: 'data.editor' },\n                            'ace'\n                        ] },\n                    { '===': [\n                            { var: 'data.editor' },\n                            'ckeditor'\n                        ] },\n                    { '===': [\n                            { var: 'data.editor' },\n                            'quill'\n                        ] },\n                ]\n            }\n        },\n        weight: 417\n    }\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/textarea/editForm/TextArea.edit.display.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../../Formio */ \"./lib/cjs/Formio.js\");\nexports[\"default\"] = [\n    {\n        key: 'inputMask',\n        ignore: true\n    },\n    {\n        key: 'allowMultipleMasks',\n        ignore: true\n    },\n    {\n        key: 'inputMasks',\n        ignore: true\n    },\n    {\n        key: 'mask',\n        ignore: true\n    },\n    {\n        key: 'widget.type',\n        ignore: true\n    },\n    {\n        key: 'widget',\n        ignore: true\n    },\n    {\n        type: 'number',\n        input: true,\n        key: 'rows',\n        label: 'Rows',\n        weight: 210,\n        tooltip: 'This allows control over how many rows are visible in the text area.',\n        placeholder: 'Enter the amount of rows'\n    },\n    {\n        weight: 1350,\n        type: 'checkbox',\n        input: true,\n        key: 'spellcheck',\n        defaultValue: true,\n        label: 'Allow Spellcheck'\n    },\n    {\n        type: 'select',\n        input: true,\n        key: 'editor',\n        label: 'Editor',\n        tooltip: 'Select the type of WYSIWYG editor to use for this text area.',\n        dataSrc: 'values',\n        data: {\n            values: [\n                { label: 'None', value: '' },\n                { label: 'ACE', value: 'ace' },\n                { label: 'CKEditor', value: 'ckeditor' },\n                { label: 'Quill', value: 'quill' },\n            ]\n        },\n        weight: 415\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        key: 'autoExpand',\n        label: 'Auto Expand',\n        tooltip: 'This will make the TextArea auto expand it\\'s height as the user is typing into the area.',\n        weight: 415,\n        conditional: {\n            json: {\n                '==': [\n                    { var: 'data.editor' },\n                    ''\n                ]\n            }\n        }\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        key: 'isUploadEnabled',\n        label: 'Enable Image Upload',\n        weight: 415.1,\n        conditional: {\n            json: {\n                or: [\n                    {\n                        '===': [\n                            { var: 'data.editor' },\n                            'quill'\n                        ],\n                    },\n                    {\n                        '===': [\n                            { var: 'data.editor' },\n                            'ckeditor'\n                        ],\n                    }\n                ]\n            }\n        }\n    },\n    {\n        type: 'select',\n        input: true,\n        key: 'uploadStorage',\n        label: 'Image Upload Storage',\n        placeholder: 'Select your file storage provider',\n        weight: 415.2,\n        tooltip: 'Which storage to save the files in.',\n        valueProperty: 'value',\n        dataSrc: 'custom',\n        data: {\n            custom() {\n                return lodash_1.default.map(Formio_1.Formio.Providers.getProviders('storage'), (storage, key) => ({\n                    label: storage.title,\n                    value: key\n                }));\n            }\n        },\n        conditional: {\n            json: {\n                '===': [\n                    { var: 'data.isUploadEnabled' },\n                    true\n                ]\n            }\n        }\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'uploadUrl',\n        label: 'Image Upload Url',\n        weight: 415.3,\n        placeholder: 'Enter the url to post the files to.',\n        tooltip: 'See <a href=\\'https://github.com/danialfarid/ng-file-upload#server-side\\' target=\\'_blank\\'>https://github.com/danialfarid/ng-file-upload#server-side</a> for how to set up the server.',\n        conditional: {\n            json: { '===': [{ var: 'data.uploadStorage' }, 'url'] }\n        }\n    },\n    {\n        type: 'textarea',\n        key: 'uploadOptions',\n        label: 'Image Upload Custom request options',\n        tooltip: 'Pass your custom xhr options(optional)',\n        rows: 5,\n        editor: 'ace',\n        input: true,\n        weight: 415.4,\n        placeholder: `{\n      \"withCredentials\": true\n    }`,\n        conditional: {\n            json: {\n                '===': [{\n                        var: 'data.uploadStorage'\n                    }, 'url']\n            }\n        }\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'uploadDir',\n        label: 'Image Upload Directory',\n        placeholder: '(optional) Enter a directory for the files',\n        tooltip: 'This will place all the files uploaded in this field in the directory',\n        weight: 415.5,\n        conditional: {\n            json: {\n                '===': [\n                    { var: 'data.isUploadEnabled' },\n                    true\n                ]\n            }\n        }\n    },\n    {\n        type: 'textfield',\n        key: 'fileKey',\n        input: true,\n        label: 'File form-data Key',\n        tooltip: 'Key name that you would like to modify for the file while calling API request.',\n        rows: 5,\n        weight: 415.6,\n        placeholder: 'Enter the key name of a file for form data.',\n        conditional: {\n            json: {\n                and: [\n                    { '===': [\n                            { var: 'data.editor' },\n                            'quill'\n                        ] },\n                    { '===': [\n                            { var: 'data.isUploadEnabled' },\n                            true\n                        ] },\n                    { '===': [\n                            { var: 'data.uploadStorage' },\n                            'url'\n                        ] },\n                ]\n            }\n        }\n    },\n    {\n        type: 'select',\n        input: true,\n        key: 'as',\n        label: 'Save As',\n        dataSrc: 'values',\n        tooltip: 'This setting determines how the value should be entered and stored in the database.',\n        clearOnHide: true,\n        data: {\n            values: [\n                { label: 'String', value: 'string' },\n                { label: 'JSON', value: 'json' },\n                { label: 'HTML', value: 'html' }\n            ]\n        },\n        conditional: {\n            json: {\n                or: [\n                    { '===': [\n                            { var: 'data.editor' },\n                            'quill'\n                        ] },\n                    { '===': [\n                            { var: 'data.editor' },\n                            'ace'\n                        ] }\n                ]\n            }\n        },\n        weight: 416\n    },\n    {\n        type: 'textarea',\n        input: true,\n        editor: 'ace',\n        rows: 10,\n        as: 'json',\n        label: 'Editor Settings',\n        tooltip: 'Enter the WYSIWYG editor JSON configuration.',\n        key: 'wysiwyg',\n        customDefaultValue(value, component, row, data, instance) {\n            return instance ? instance.wysiwygDefault : '';\n        },\n        conditional: {\n            json: {\n                or: [\n                    { '===': [\n                            { var: 'data.editor' },\n                            'ace'\n                        ] },\n                    { '===': [\n                            { var: 'data.editor' },\n                            'ckeditor'\n                        ] },\n                    { '===': [\n                            { var: 'data.editor' },\n                            'quill'\n                        ] },\n                ]\n            }\n        },\n        weight: 417\n    }\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/textarea/editForm/TextArea.edit.display.js?");
 
 /***/ }),
 
@@ -7481,7 +7481,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ (function(__unused_webpack_module, exports) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = [\n    {\n        key: 'inputMask',\n        ignore: true\n    },\n    {\n        key: 'allowMultipleMasks',\n        ignore: true\n    },\n    {\n        key: 'showWordCount',\n        ignore: true,\n    },\n    {\n        key: 'showCharCount',\n        ignore: true,\n    }\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/url/editForm/Url.edit.display.js?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = [\n    {\n        key: 'inputMask',\n        ignore: true\n    },\n    {\n        key: 'allowMultipleMasks',\n        ignore: true\n    },\n    {\n        key: 'inputMasks',\n        ignore: true\n    },\n    {\n        key: 'widget.type',\n        ignore: true\n    },\n    {\n        key: 'widget',\n        ignore: true\n    },\n    {\n        key: 'showWordCount',\n        ignore: true,\n    },\n    {\n        key: 'showCharCount',\n        ignore: true,\n    }\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/url/editForm/Url.edit.display.js?");
 
 /***/ }),
 
@@ -7525,7 +7525,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    {\n        key: 'labelPosition',\n        ignore: true\n    },\n    {\n        key: 'placeholder',\n        ignore: true\n    },\n    {\n        key: 'description',\n        ignore: true\n    },\n    {\n        key: 'autofocus',\n        ignore: true\n    },\n    {\n        key: 'tooltip',\n        ignore: true\n    },\n    {\n        key: 'tabindex',\n        ignore: true\n    },\n    {\n        key: 'tableView',\n        ignore: true\n    },\n    {\n        key: 'hideLabel',\n        ignore: true\n    },\n    {\n        weight: 0,\n        type: 'textfield',\n        input: true,\n        key: 'label',\n        label: 'Label',\n        placeholder: 'Field Label',\n        tooltip: 'The label for this field.',\n        validate: {\n            required: true\n        },\n        autofocus: true,\n        overrideEditForm: true\n    },\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/well/editForm/Well.edit.display.js?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = [\n    {\n        key: 'labelPosition',\n        ignore: true\n    },\n    {\n        key: 'labelWidth',\n        ignore: true\n    },\n    {\n        key: 'labelMargin',\n        ignore: true\n    },\n    {\n        key: 'placeholder',\n        ignore: true\n    },\n    {\n        key: 'description',\n        ignore: true\n    },\n    {\n        key: 'autofocus',\n        ignore: true\n    },\n    {\n        key: 'tooltip',\n        ignore: true\n    },\n    {\n        key: 'tabindex',\n        ignore: true\n    },\n    {\n        key: 'tableView',\n        ignore: true\n    },\n    {\n        key: 'hideLabel',\n        ignore: true\n    },\n    {\n        weight: 0,\n        type: 'textfield',\n        input: true,\n        key: 'label',\n        label: 'Label',\n        placeholder: 'Field Label',\n        tooltip: 'The label for this field.',\n        validate: {\n            required: true\n        },\n        autofocus: true,\n        overrideEditForm: true\n    },\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/well/editForm/Well.edit.display.js?");
 
 /***/ }),