@formio/js 5.0.0-dev.5910.f7a730e → 5.0.0-dev.5912.590e895

package/dist/formio.full.js

@@ -6600,7 +6600,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 Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nclass HiddenComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            type: 'hidden',\n            tableView: false,\n            inputType: 'hidden'\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Hidden',\n            group: 'data',\n            icon: 'user-secret',\n            weight: 0,\n            documentation: '/userguide/form-building/data-components#hidden',\n            showPreview: false,\n            schema: HiddenComponent.schema()\n        };\n    }\n    get defaultSchema() {\n        return HiddenComponent.schema();\n    }\n    get inputInfo() {\n        const info = super.elementInfo();\n        info.type = 'input';\n        info.attr.type = 'hidden';\n        info.changeEvent = 'change';\n        return info;\n    }\n    get skipInEmail() {\n        return true;\n    }\n    /**\n     * Check if a component is eligible for multiple validation\n     * @returns {boolean} - If the component is eligible for multiple validation.\n     */\n    validateMultiple() {\n        // Since \"arrays\" are able to be stored in hidden components, we need to turn off multiple validation.\n        return false;\n    }\n    labelIsHidden() {\n        return true;\n    }\n    get emptyValue() {\n        return null;\n    }\n    setValue(value, flags = {}) {\n        return this.updateValue(value, flags);\n    }\n    getValue() {\n        return this.dataValue;\n    }\n}\nexports[\"default\"] = HiddenComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/hidden/Hidden.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 Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nclass HiddenComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            type: 'hidden',\n            tableView: false,\n            inputType: 'hidden'\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Hidden',\n            group: 'data',\n            icon: 'user-secret',\n            weight: 0,\n            documentation: '/userguide/form-building/data-components#hidden',\n            showPreview: false,\n            schema: HiddenComponent.schema()\n        };\n    }\n    get defaultSchema() {\n        return HiddenComponent.schema();\n    }\n    get inputInfo() {\n        const info = super.elementInfo();\n        info.type = 'input';\n        info.attr.type = 'hidden';\n        info.changeEvent = 'change';\n        return info;\n    }\n    get skipInEmail() {\n        return true;\n    }\n    /**\n     * Check if a component is eligible for multiple validation\n     * @returns {boolean} - If the component is eligible for multiple validation.\n     */\n    validateMultiple() {\n        // Since \"arrays\" are able to be stored in hidden components, we need to turn off multiple validation.\n        return false;\n    }\n    labelIsHidden() {\n        return true;\n    }\n    get emptyValue() {\n        return '';\n    }\n    setValue(value, flags = {}) {\n        return this.updateValue(value, flags);\n    }\n    getValue() {\n        return this.dataValue;\n    }\n}\nexports[\"default\"] = HiddenComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/hidden/Hidden.js?");
 
 /***/ }),
 
@@ -6985,7 +6985,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 utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst calculateSingleSelectData = (context, defaultValue) => {\n    const { instance, data } = context;\n    const rawDefaultValue = instance.downloadedResources.find(resource => lodash_1.default.get(resource, data.valueProperty) === defaultValue);\n    const options = { data: {}, noeval: true };\n    instance.interpolate(data.template, {\n        item: rawDefaultValue,\n    }, options);\n    return options.data.item;\n};\nconst calculateSelectData = (context) => {\n    const { instance } = context;\n    const defaultValue = instance.getValue();\n    if (instance.component.multiple) {\n        const multiSelectData = {};\n        (defaultValue !== null && defaultValue !== void 0 ? defaultValue : []).forEach((defaultValueItem) => {\n            multiSelectData[defaultValueItem] = calculateSingleSelectData(context, defaultValueItem);\n        });\n        return multiSelectData;\n    }\n    else {\n        return calculateSingleSelectData(context, defaultValue);\n    }\n};\nconst setSelectData = (context) => {\n    // Wait before downloadedResources will be set\n    setTimeout(() => {\n        var _a, _b;\n        const { instance, data } = context;\n        const selectDataComponent = (_a = instance === null || instance === void 0 ? void 0 : instance.root) === null || _a === void 0 ? void 0 : _a.getComponent('selectData');\n        // clear selectData if conditions are not met or clearing default value\n        if (selectDataComponent && (!selectDataComponent.visible || !data.defaultValue)) {\n            selectDataComponent.setValue(null, { resetValue: true });\n            return;\n        }\n        // nothing can set if don't have downloaded resources\n        if (!selectDataComponent || !instance.getValue() || !((_b = instance.downloadedResources) === null || _b === void 0 ? void 0 : _b.length)) {\n            return;\n        }\n        const shouldCalculateUrlData = data.dataSrc === 'url' && data.data.url && data.valueProperty;\n        const shouldCalculateResourceData = data.dataSrc === 'resource' && data.data.resource && data.valueProperty;\n        const newValue = shouldCalculateUrlData || shouldCalculateResourceData ? calculateSelectData(context) : null;\n        selectDataComponent.setValue(newValue, { resetValue: newValue === null });\n    }, 0);\n};\nexports[\"default\"] = [\n    {\n        key: 'dataSrc',\n        data: {\n            values: [\n                { label: 'Values', value: 'values' },\n                { label: 'URL', value: 'url' },\n                { label: 'Resource', value: 'resource' },\n                { label: 'Custom', value: 'custom' },\n                { label: 'Raw JSON', value: 'json' },\n            ],\n        },\n    },\n    {\n        type: 'textfield',\n        weight: 10,\n        input: true,\n        key: 'indexeddb.database',\n        label: 'Database name',\n        tooltip: 'The name of the indexeddb database.',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'indexeddb'] },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'indexeddb.table',\n        label: 'Table name',\n        weight: 16,\n        tooltip: 'The name of table in the indexeddb database.',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'indexeddb'] },\n        }\n    },\n    {\n        type: 'textarea',\n        as: 'json',\n        editor: 'ace',\n        weight: 18,\n        input: true,\n        key: 'indexeddb.filter',\n        label: 'Row Filter',\n        tooltip: 'Filter table items that match the object.',\n        defaultValue: {},\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'indexeddb'] },\n        },\n    },\n    {\n        type: 'textarea',\n        as: 'json',\n        editor: 'ace',\n        weight: 10,\n        input: true,\n        key: 'data.json',\n        label: 'Data Source Raw JSON',\n        tooltip: 'A valid JSON array to use as a data source.',\n        description: '<div>Example: <pre>[\"apple\", \"banana\", \"orange\"].</pre></div> <div>Example 2: <pre>[{\"name\": \"John\", \"email\": \"john.doe@test.com\"}, {\"name\": \"Jane\", \"email\": \"jane.doe@test.com\"}].</pre></div>',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'json'] },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        label: 'Lazy Load Data',\n        key: 'lazyLoad',\n        tooltip: 'When set, this will not fire off the request to the URL until this control is within focus. This can improve performance if you have many Select dropdowns on your form where the API\\'s will only fire when the control is activated.',\n        weight: 11,\n        conditional: {\n            json: {\n                and: [\n                    {\n                        in: [\n                            { var: 'data.dataSrc' },\n                            [\n                                'resource',\n                                'url',\n                            ],\n                        ],\n                    },\n                    {\n                        '!==': [\n                            { var: 'data.widget' },\n                            'html5'\n                        ]\n                    }\n                ]\n            },\n        },\n    },\n    {\n        type: 'datagrid',\n        input: true,\n        label: 'Data Source Values',\n        key: 'data.values',\n        tooltip: 'Values to use as the data source. Labels are shown in the select field. Values are the corresponding values saved with the submission.',\n        weight: 10,\n        reorder: true,\n        defaultValue: [{ label: '', value: '' }],\n        components: [\n            {\n                label: 'Label',\n                key: 'label',\n                input: true,\n                type: 'textfield',\n            },\n            {\n                label: 'Value',\n                key: 'value',\n                input: true,\n                type: 'textfield',\n                allowCalculateOverride: true,\n                calculateValue: 'value = _.camelCase(row.label);',\n            },\n        ],\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'values'] },\n        },\n    },\n    {\n        type: 'select',\n        input: true,\n        dataSrc: 'url',\n        data: {\n            url: '/form?type=resource&limit=1000000&select=_id,title',\n        },\n        authenticate: true,\n        template: '<span>{{ item.title }}</span>',\n        valueProperty: '_id',\n        clearOnHide: false,\n        label: 'Resource',\n        key: 'data.resource',\n        lazyLoad: false,\n        weight: 10,\n        tooltip: 'The resource to be used with this field.',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        label: 'Data Path',\n        key: 'selectValues',\n        weight: 12,\n        description: 'The object path to the iterable items.',\n        tooltip: 'The property within the source data, where iterable items reside. For example: results.items or results[0].items',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'url'] },\n        },\n    },\n    {\n        type: 'select',\n        input: true,\n        label: 'Value Property',\n        key: 'valueProperty',\n        skipMerge: true,\n        clearOnHide: true,\n        tooltip: 'The field to use as the value.',\n        weight: 11,\n        refreshOn: 'data.resource',\n        template: '<span>{{ item.label }}</span>',\n        valueProperty: 'key',\n        dataSrc: 'url',\n        lazyLoad: false,\n        onSetItems(component, form) {\n            const newItems = form.type === 'resource'\n                ? [{\n                        label: '{Entire Object}',\n                        key: 'data',\n                    }]\n                : [];\n            (0, utils_1.eachComponent)(form.components, (component, path) => {\n                if (component.input) {\n                    newItems.push({\n                        label: component.label || component.key,\n                        key: `data.${path}`\n                    });\n                }\n            });\n            return newItems;\n        },\n        onChange(context) {\n            if (context && context.flags && context.flags.modified) {\n                const valueProp = context.instance.data.valueProperty;\n                const templateProp = valueProp ? valueProp : 'data';\n                const template = `<span>{{ item.${templateProp} }}</span>`;\n                const searchField = valueProp ? `${valueProp}__regex` : '';\n                context.instance.root.getComponent('template').setValue(template);\n                context.instance.root.getComponent('searchField').setValue(searchField);\n            }\n        },\n        data: {\n            url: '/form/{{ data.data.resource }}',\n        },\n        conditional: {\n            json: {\n                and: [\n                    { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n                    { '!==': [{ var: 'data.reference' }, true] },\n                    { var: 'data.data.resource' },\n                ],\n            },\n        },\n    },\n    {\n        type: 'select',\n        input: true,\n        label: 'Storage Type',\n        key: 'dataType',\n        clearOnHide: true,\n        tooltip: 'The type to store the data. If you select something other than autotype, it will force it to that type.',\n        weight: 12,\n        template: '<span>{{ item.label }}</span>',\n        dataSrc: 'values',\n        data: {\n            values: [\n                { label: 'Autotype', value: 'auto' },\n                { label: 'String', value: 'string' },\n                { label: 'Number', value: 'number' },\n                { label: 'Boolean', value: 'boolean' },\n                { label: 'Object', value: 'object' },\n            ],\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'idPath',\n        weight: 12,\n        label: 'ID Path',\n        placeholder: 'id',\n        tooltip: 'Path to the select option id.'\n    },\n    {\n        type: 'textfield',\n        input: true,\n        label: 'Select Fields',\n        key: 'selectFields',\n        tooltip: 'The properties on the resource to return as part of the options. Separate property names by commas. If left blank, all properties will be returned.',\n        placeholder: 'Comma separated list of fields to select.',\n        weight: 14,\n        conditional: {\n            json: {\n                and: [\n                    { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n                    { '===': [{ var: 'data.valueProperty' }, ''] },\n                ],\n            },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        key: 'disableLimit',\n        label: 'Disable limiting response',\n        tooltip: 'When enabled the request will not include the limit and skip options in the query string',\n        weight: 15,\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'url'] },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'searchField',\n        label: 'Search Query Name',\n        weight: 16,\n        description: 'Name of URL query parameter',\n        tooltip: 'The name of the search querystring parameter used when sending a request to filter results with. The server at the URL must handle this query parameter.',\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'number',\n        input: true,\n        key: 'searchDebounce',\n        label: 'Search request delay',\n        weight: 16,\n        description: 'The delay (in seconds) before the search request is sent.',\n        tooltip: 'The delay in seconds before the search request is sent, measured from the last character input in the search field.',\n        validate: {\n            min: 0,\n            customMessage: '',\n            json: '',\n            max: 1,\n        },\n        delimiter: false,\n        requireDecimal: false,\n        encrypted: false,\n        defaultValue: 0.3,\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'number',\n        input: true,\n        key: 'minSearch',\n        weight: 17,\n        label: 'Minimum Search Length',\n        tooltip: 'The minimum amount of characters they must type before a search is made.',\n        defaultValue: 0,\n        conditional: {\n            json: {\n                and: [\n                    { '===': [{ var: 'data.dataSrc' }, 'url'] },\n                    { '!=': [{ var: 'data.searchField' }, ''] },\n                ],\n            },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'filter',\n        label: 'Filter Query',\n        weight: 18,\n        description: 'The filter query for results.',\n        tooltip: 'Use this to provide additional filtering using query parameters.',\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'sort',\n        label: 'Sort Query',\n        weight: 18,\n        description: 'The sort query for results',\n        tooltip: 'Use this to provide additional sorting using query parameters',\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'number',\n        input: true,\n        key: 'limit',\n        label: 'Limit',\n        weight: 18,\n        description: 'Maximum number of items to view per page of results.',\n        tooltip: 'Use this to limit the number of items to request or view.',\n        clearOnHide: false,\n        conditional: {\n            json: {\n                and: [\n                    { in: [\n                            { var: 'data.dataSrc' },\n                            [\n                                'url',\n                                'resource'\n                            ],\n                        ] },\n                    { '!==': [{ var: 'data.disableLimit' }, true] }\n                ]\n            },\n        },\n    },\n    {\n        type: 'textarea',\n        input: true,\n        key: 'data.custom',\n        label: 'Custom Values',\n        editor: 'ace',\n        rows: 10,\n        weight: 14,\n        placeholder: \"values = data['mykey'] or values = Promise.resolve(['myValue'])\",\n        tooltip: 'Write custom code to return the value options or a promise with value options. The form data object is available.',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'custom'] },\n        },\n    },\n    {\n        type: 'select',\n        input: true,\n        key: 'refreshOn',\n        label: 'Refresh Options On',\n        weight: 19,\n        tooltip: 'Refresh data when another field changes.',\n        dataSrc: 'custom',\n        valueProperty: 'value',\n        data: {\n            custom(context) {\n                var values = [];\n                values.push({ label: 'Any Change', value: 'data' });\n                context.utils.eachComponent(context.instance.options.editForm.components, function (component, path) {\n                    if (component.key !== context.data.key) {\n                        values.push({\n                            label: component.label || component.key,\n                            value: path\n                        });\n                    }\n                });\n                return values;\n            }\n        },\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                        'values',\n                        'custom'\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'select',\n        input: true,\n        key: 'refreshOnBlur',\n        label: 'Refresh Options On Blur',\n        weight: 19,\n        tooltip: 'Refresh data when another field is blured.',\n        dataSrc: 'custom',\n        valueProperty: 'value',\n        data: {\n            custom(context) {\n                var values = [];\n                values.push({ label: 'Any Change', value: 'data' });\n                context.utils.eachComponent(context.instance.options.editForm.components, function (component, path) {\n                    if (component.key !== context.data.key) {\n                        values.push({\n                            label: component.label || component.key,\n                            value: path\n                        });\n                    }\n                });\n                return values;\n            }\n        },\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                        'values'\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 20,\n        key: 'clearOnRefresh',\n        label: 'Clear Value On Refresh Options',\n        defaultValue: false,\n        tooltip: 'When the Refresh On field is changed, clear this components value.',\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                        'values',\n                        'custom'\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 21,\n        key: 'searchEnabled',\n        label: 'Enable Static Search',\n        defaultValue: true,\n        tooltip: 'When checked, the select dropdown will allow for searching within the static list of items provided.',\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 21,\n        key: 'noRefreshOnScroll',\n        label: 'Disable Options Refresh When Scrolling',\n        defaultValue: false,\n        tooltip: 'When checked, the select with search input won\\'t perform new api requests when scrolling through the list of options.',\n        conditional: {\n            json: {\n                and: [\n                    { in: [\n                            { var: 'data.dataSrc' },\n                            [\n                                'url',\n                                'resource'\n                            ],\n                        ] },\n                    { '===': [{ var: 'data.searchEnabled' }, true] }\n                ]\n            },\n        },\n    },\n    {\n        label: 'Search Threshold',\n        mask: false,\n        tableView: true,\n        alwaysEnabled: false,\n        type: 'number',\n        input: true,\n        key: 'selectThreshold',\n        validate: {\n            min: 0,\n            customMessage: '',\n            json: '',\n            max: 1,\n        },\n        delimiter: false,\n        requireDecimal: false,\n        encrypted: false,\n        defaultValue: 0.3,\n        weight: 22,\n        tooltip: 'At what point does the match algorithm give up. A threshold of 0.0 requires a perfect match, a threshold of 1.0 would match anything.',\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 23,\n        key: 'addResource',\n        label: 'Add Resource',\n        tooltip: 'Allows to create a new resource while entering a submission.',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n        },\n    },\n    {\n        type: 'textfield',\n        label: 'Add Resource Label',\n        key: 'addResourceLabel',\n        tooltip: 'Set the text of the Add Resource button.',\n        placeholder: 'Add Resource',\n        weight: 24,\n        input: true,\n        conditional: {\n            json: {\n                and: [\n                    { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n                    { '!!': { var: 'data.addResource' } },\n                ],\n            },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 25,\n        key: 'reference',\n        label: 'Save as reference',\n        tooltip: 'Using this option will save this field as a reference and link its value to the value of the origin record.',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 27,\n        key: 'readOnlyValue',\n        label: 'Read Only Value',\n        tooltip: 'Check this if you would like to show just the value when in Read Only mode.',\n    },\n    {\n        type: 'textarea',\n        as: 'json',\n        editor: 'ace',\n        weight: 28,\n        input: true,\n        key: 'customOptions',\n        label: 'Choices.js options',\n        tooltip: 'A raw JSON object to use as options for the Select component (Choices JS).',\n        defaultValue: {},\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 29,\n        key: 'useExactSearch',\n        label: 'Use exact search',\n        tooltip: 'Disables search algorithm threshold.',\n    },\n    {\n        key: 'defaultValue',\n        onSetItems(component) {\n            setSelectData(component.evalContext());\n        },\n        onChange(context) {\n            if (context && context.flags && context.flags.modified) {\n                setSelectData(context);\n            }\n        },\n    },\n    {\n        key: 'selectData',\n        type: 'hidden',\n        conditional: {\n            json: {\n                and: [\n                    { var: 'data.valueProperty' },\n                    { '===': [{ var: 'data.lazyLoad' }, true] },\n                    { '!==': [{ var: 'data.widget' }, 'html5'] },\n                    {\n                        or: [\n                            { '===': [{ var: 'data.dataSrc' }, 'url'] },\n                            {\n                                and: [\n                                    { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n                                    // 'data' means entire object from resource will be used\n                                    { '!==': [{ var: 'data.valueProperty' }, 'data'] },\n                                ],\n                            }\n                        ]\n                    }\n                ]\n            },\n        },\n    },\n    {\n        key: 'template',\n        onChange(context) {\n            if (context && context.flags && context.flags.modified) {\n                const defaultValueComponent = context.instance.root.getComponent('defaultValue');\n                if (!defaultValueComponent) {\n                    return;\n                }\n                setSelectData(defaultValueComponent.evalContext());\n            }\n        },\n    },\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/select/editForm/Select.edit.data.js?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst calculateSingleSelectData = (context, defaultValue) => {\n    const { instance, data } = context;\n    const rawDefaultValue = instance.downloadedResources.find(resource => lodash_1.default.get(resource, data.valueProperty) === defaultValue);\n    const options = { data: {}, noeval: true };\n    instance.interpolate(data.template, {\n        item: rawDefaultValue,\n    }, options);\n    return options.data.item;\n};\nconst calculateSelectData = (context) => {\n    const { instance } = context;\n    const defaultValue = instance.getValue();\n    if (instance.component.multiple) {\n        const multiSelectData = {};\n        (defaultValue !== null && defaultValue !== void 0 ? defaultValue : []).forEach((defaultValueItem) => {\n            multiSelectData[defaultValueItem] = calculateSingleSelectData(context, defaultValueItem);\n        });\n        return multiSelectData;\n    }\n    else {\n        return calculateSingleSelectData(context, defaultValue);\n    }\n};\nconst setSelectData = (context) => {\n    // Wait before downloadedResources will be set\n    setTimeout(() => {\n        var _a, _b;\n        const { instance, data } = context;\n        const selectDataComponent = (_a = instance === null || instance === void 0 ? void 0 : instance.root) === null || _a === void 0 ? void 0 : _a.getComponent('selectData');\n        // clear selectData if conditions are not met or clearing default value\n        if (selectDataComponent && (!selectDataComponent.visible || !data.defaultValue)) {\n            selectDataComponent.setValue(null, { resetValue: true });\n            return;\n        }\n        // nothing can set if don't have downloaded resources\n        if (!selectDataComponent || !instance.getValue() || !((_b = instance.downloadedResources) === null || _b === void 0 ? void 0 : _b.length)) {\n            return;\n        }\n        const shouldCalculateUrlData = data.dataSrc === 'url' && data.data.url && data.valueProperty;\n        const shouldCalculateResourceData = data.dataSrc === 'resource' && data.data.resource && data.valueProperty;\n        const newValue = shouldCalculateUrlData || shouldCalculateResourceData ? calculateSelectData(context) : null;\n        selectDataComponent.setValue(newValue, { resetValue: newValue === null });\n    }, 0);\n};\nexports[\"default\"] = [\n    {\n        key: 'dataSrc',\n        data: {\n            values: [\n                { label: 'Values', value: 'values' },\n                { label: 'URL', value: 'url' },\n                { label: 'Resource', value: 'resource' },\n                { label: 'Custom', value: 'custom' },\n                { label: 'Raw JSON', value: 'json' },\n            ],\n        },\n    },\n    {\n        type: 'textfield',\n        weight: 10,\n        input: true,\n        key: 'indexeddb.database',\n        label: 'Database name',\n        tooltip: 'The name of the indexeddb database.',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'indexeddb'] },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'indexeddb.table',\n        label: 'Table name',\n        weight: 16,\n        tooltip: 'The name of table in the indexeddb database.',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'indexeddb'] },\n        }\n    },\n    {\n        type: 'textarea',\n        as: 'json',\n        editor: 'ace',\n        weight: 18,\n        input: true,\n        key: 'indexeddb.filter',\n        label: 'Row Filter',\n        tooltip: 'Filter table items that match the object.',\n        defaultValue: {},\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'indexeddb'] },\n        },\n    },\n    {\n        type: 'textarea',\n        as: 'json',\n        editor: 'ace',\n        weight: 10,\n        input: true,\n        key: 'data.json',\n        label: 'Data Source Raw JSON',\n        tooltip: 'A valid JSON array to use as a data source.',\n        description: '<div>Example: <pre>[\"apple\", \"banana\", \"orange\"].</pre></div> <div>Example 2: <pre>[{\"name\": \"John\", \"email\": \"john.doe@test.com\"}, {\"name\": \"Jane\", \"email\": \"jane.doe@test.com\"}].</pre></div>',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'json'] },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        label: 'Lazy Load Data',\n        key: 'lazyLoad',\n        tooltip: 'When set, this will not fire off the request to the URL until this control is within focus. This can improve performance if you have many Select dropdowns on your form where the API\\'s will only fire when the control is activated.',\n        weight: 11,\n        conditional: {\n            json: {\n                and: [\n                    {\n                        in: [\n                            { var: 'data.dataSrc' },\n                            [\n                                'resource',\n                                'url',\n                            ],\n                        ],\n                    },\n                    {\n                        '!==': [\n                            { var: 'data.widget' },\n                            'html5'\n                        ]\n                    }\n                ]\n            },\n        },\n    },\n    {\n        type: 'datagrid',\n        input: true,\n        label: 'Data Source Values',\n        key: 'data.values',\n        tooltip: 'Values to use as the data source. Labels are shown in the select field. Values are the corresponding values saved with the submission.',\n        weight: 10,\n        reorder: true,\n        defaultValue: [{ label: '', value: '' }],\n        components: [\n            {\n                label: 'Label',\n                key: 'label',\n                input: true,\n                type: 'textfield',\n            },\n            {\n                label: 'Value',\n                key: 'value',\n                input: true,\n                type: 'textfield',\n                allowCalculateOverride: true,\n                calculateValue: 'value = _.camelCase(row.label);',\n            },\n        ],\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'values'] },\n        },\n    },\n    {\n        type: 'select',\n        input: true,\n        dataSrc: 'url',\n        data: {\n            url: '/form?type=resource&limit=1000000&select=_id,title',\n        },\n        authenticate: true,\n        template: '<span>{{ item.title }}</span>',\n        valueProperty: '_id',\n        clearOnHide: false,\n        label: 'Resource',\n        key: 'data.resource',\n        lazyLoad: false,\n        weight: 10,\n        tooltip: 'The resource to be used with this field.',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        label: 'Data Path',\n        key: 'selectValues',\n        weight: 12,\n        description: 'The object path to the iterable items.',\n        tooltip: 'The property within the source data, where iterable items reside. For example: results.items or results[0].items',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'url'] },\n        },\n    },\n    {\n        type: 'select',\n        input: true,\n        label: 'Value Property',\n        key: 'valueProperty',\n        skipMerge: true,\n        clearOnHide: true,\n        tooltip: 'The field to use as the value.',\n        weight: 11,\n        refreshOn: 'data.resource',\n        template: '<span>{{ item.label }}</span>',\n        valueProperty: 'key',\n        dataSrc: 'url',\n        lazyLoad: false,\n        onSetItems(component, form) {\n            const newItems = form.type === 'resource'\n                ? [{\n                        label: '{Entire Object}',\n                        key: 'data',\n                    }]\n                : [];\n            (0, utils_1.eachComponent)(form.components, (component, path) => {\n                if (component.input) {\n                    newItems.push({\n                        label: component.label || component.key,\n                        key: `data.${path}`\n                    });\n                }\n            });\n            return newItems;\n        },\n        onChange(context) {\n            if (context && context.flags && context.flags.modified) {\n                const valueProp = context.instance.data.valueProperty;\n                const templateProp = valueProp ? valueProp : 'data';\n                const template = `<span>{{ item.${templateProp} }}</span>`;\n                const searchField = valueProp ? `${valueProp}__regex` : '';\n                context.instance.root.getComponent('template').setValue(template);\n                context.instance.root.getComponent('searchField').setValue(searchField);\n            }\n        },\n        data: {\n            url: '/form/{{ data.data.resource }}',\n        },\n        conditional: {\n            json: {\n                and: [\n                    { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n                    { '!==': [{ var: 'data.reference' }, true] },\n                    { var: 'data.data.resource' },\n                ],\n            },\n        },\n    },\n    {\n        type: 'select',\n        input: true,\n        label: 'Storage Type',\n        key: 'dataType',\n        clearOnHide: true,\n        tooltip: 'The type to store the data. If you select something other than autotype, it will force it to that type.',\n        weight: 12,\n        template: '<span>{{ item.label }}</span>',\n        dataSrc: 'values',\n        data: {\n            values: [\n                { label: 'Autotype', value: 'auto' },\n                { label: 'String', value: 'string' },\n                { label: 'Number', value: 'number' },\n                { label: 'Boolean', value: 'boolean' },\n                { label: 'Object', value: 'object' },\n            ],\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'idPath',\n        weight: 12,\n        label: 'ID Path',\n        placeholder: 'id',\n        tooltip: 'Path to the select option id.'\n    },\n    {\n        type: 'textfield',\n        input: true,\n        label: 'Select Fields',\n        key: 'selectFields',\n        tooltip: 'The properties on the resource to return as part of the options. Separate property names by commas. If left blank, all properties will be returned.',\n        placeholder: 'Comma separated list of fields to select.',\n        weight: 14,\n        conditional: {\n            json: {\n                and: [\n                    { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n                    { '===': [{ var: 'data.valueProperty' }, ''] },\n                ],\n            },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        key: 'disableLimit',\n        label: 'Disable limiting response',\n        tooltip: 'When enabled the request will not include the limit and skip options in the query string',\n        weight: 15,\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'url'] },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'searchField',\n        label: 'Search Query Name',\n        weight: 16,\n        description: 'Name of URL query parameter',\n        tooltip: 'The name of the search querystring parameter used when sending a request to filter results with. The server at the URL must handle this query parameter.',\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'number',\n        input: true,\n        key: 'searchDebounce',\n        label: 'Search request delay',\n        weight: 16,\n        description: 'The delay (in seconds) before the search request is sent.',\n        tooltip: 'The delay in seconds before the search request is sent, measured from the last character input in the search field.',\n        validate: {\n            min: 0,\n            customMessage: '',\n            json: '',\n            max: 1,\n        },\n        delimiter: false,\n        requireDecimal: false,\n        encrypted: false,\n        defaultValue: 0.3,\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'number',\n        input: true,\n        key: 'minSearch',\n        weight: 17,\n        label: 'Minimum Search Length',\n        tooltip: 'The minimum amount of characters they must type before a search is made.',\n        defaultValue: 0,\n        conditional: {\n            json: {\n                and: [\n                    { '===': [{ var: 'data.dataSrc' }, 'url'] },\n                    { '!=': [{ var: 'data.searchField' }, ''] },\n                ],\n            },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'filter',\n        label: 'Filter Query',\n        weight: 18,\n        description: 'The filter query for results.',\n        tooltip: 'Use this to provide additional filtering using query parameters.',\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'sort',\n        label: 'Sort Query',\n        weight: 18,\n        description: 'The sort query for results',\n        tooltip: 'Use this to provide additional sorting using query parameters',\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'number',\n        input: true,\n        key: 'limit',\n        label: 'Limit',\n        weight: 18,\n        description: 'Maximum number of items to view per page of results.',\n        tooltip: 'Use this to limit the number of items to request or view.',\n        clearOnHide: false,\n        conditional: {\n            json: {\n                and: [\n                    { in: [\n                            { var: 'data.dataSrc' },\n                            [\n                                'url',\n                                'resource'\n                            ],\n                        ] },\n                    { '!==': [{ var: 'data.disableLimit' }, true] }\n                ]\n            },\n        },\n    },\n    {\n        type: 'textarea',\n        input: true,\n        key: 'data.custom',\n        label: 'Custom Values',\n        editor: 'ace',\n        rows: 10,\n        weight: 14,\n        placeholder: \"values = data['mykey'] or values = Promise.resolve(['myValue'])\",\n        tooltip: 'Write custom code to return the value options or a promise with value options. The form data object is available.',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'custom'] },\n        },\n    },\n    {\n        type: 'select',\n        input: true,\n        key: 'refreshOn',\n        label: 'Refresh Options On',\n        weight: 19,\n        tooltip: 'Refresh data when another field changes.',\n        dataSrc: 'custom',\n        valueProperty: 'value',\n        data: {\n            custom(context) {\n                var values = [];\n                values.push({ label: 'Any Change', value: 'data' });\n                context.utils.eachComponent(context.instance.options.editForm.components, function (component, path) {\n                    if (component.key !== context.data.key) {\n                        values.push({\n                            label: component.label || component.key,\n                            value: path\n                        });\n                    }\n                });\n                return values;\n            }\n        },\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                        'values',\n                        'custom'\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'select',\n        input: true,\n        key: 'refreshOnBlur',\n        label: 'Refresh Options On Blur',\n        weight: 19,\n        tooltip: 'Refresh data when another field is blured.',\n        dataSrc: 'custom',\n        valueProperty: 'value',\n        data: {\n            custom(context) {\n                var values = [];\n                values.push({ label: 'Any Change', value: 'data' });\n                context.utils.eachComponent(context.instance.options.editForm.components, function (component, path) {\n                    if (component.key !== context.data.key) {\n                        values.push({\n                            label: component.label || component.key,\n                            value: path\n                        });\n                    }\n                });\n                return values;\n            }\n        },\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                        'values'\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 20,\n        key: 'clearOnRefresh',\n        label: 'Clear Value On Refresh Options',\n        defaultValue: false,\n        tooltip: 'When the Refresh On field is changed, clear this components value.',\n        conditional: {\n            json: {\n                in: [\n                    { var: 'data.dataSrc' },\n                    [\n                        'url',\n                        'resource',\n                        'values',\n                        'custom'\n                    ],\n                ],\n            },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 21,\n        key: 'searchEnabled',\n        label: 'Enable Static Search',\n        defaultValue: true,\n        tooltip: 'When checked, the select dropdown will allow for searching within the static list of items provided.',\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 21,\n        key: 'noRefreshOnScroll',\n        label: 'Disable Options Refresh When Scrolling',\n        defaultValue: false,\n        tooltip: 'When checked, the select with search input won\\'t perform new api requests when scrolling through the list of options.',\n        conditional: {\n            json: {\n                and: [\n                    { in: [\n                            { var: 'data.dataSrc' },\n                            [\n                                'url',\n                                'resource'\n                            ],\n                        ] },\n                    { '===': [{ var: 'data.searchEnabled' }, true] }\n                ]\n            },\n        },\n    },\n    {\n        label: 'Search Threshold',\n        mask: false,\n        tableView: true,\n        alwaysEnabled: false,\n        type: 'number',\n        input: true,\n        key: 'selectThreshold',\n        validate: {\n            min: 0,\n            customMessage: '',\n            json: '',\n            max: 1,\n        },\n        delimiter: false,\n        requireDecimal: false,\n        encrypted: false,\n        defaultValue: 0.3,\n        weight: 22,\n        tooltip: 'At what point does the match algorithm give up. A threshold of 0.0 requires a perfect match, a threshold of 1.0 would match anything.',\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 23,\n        key: 'addResource',\n        label: 'Add Resource',\n        tooltip: 'Allows to create a new resource while entering a submission.',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n        },\n    },\n    {\n        type: 'textfield',\n        label: 'Add Resource Label',\n        key: 'addResourceLabel',\n        tooltip: 'Set the text of the Add Resource button.',\n        placeholder: 'Add Resource',\n        weight: 24,\n        input: true,\n        conditional: {\n            json: {\n                and: [\n                    { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n                    { '!!': { var: 'data.addResource' } },\n                ],\n            },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 25,\n        key: 'reference',\n        label: 'Save as reference',\n        tooltip: 'Using this option will save this field as a reference and link its value to the value of the origin record.',\n        conditional: {\n            json: { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 27,\n        key: 'readOnlyValue',\n        label: 'Read Only Value',\n        tooltip: 'Check this if you would like to show just the value when in Read Only mode.',\n    },\n    {\n        type: 'textarea',\n        as: 'json',\n        editor: 'ace',\n        weight: 28,\n        input: true,\n        key: 'customOptions',\n        label: 'Choices.js options',\n        tooltip: 'A raw JSON object to use as options for the Select component (Choices JS).',\n        defaultValue: {},\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        weight: 29,\n        key: 'useExactSearch',\n        label: 'Use exact search',\n        tooltip: 'Disables search algorithm threshold.',\n    },\n    {\n        key: 'defaultValue',\n        onSetItems(component) {\n            setSelectData(component.evalContext());\n        },\n        onChange(context) {\n            if (context && context.flags && context.flags.modified) {\n                setSelectData(context);\n            }\n        },\n    },\n    {\n        key: 'selectData',\n        conditional: {\n            json: {\n                and: [\n                    { var: 'data.valueProperty' },\n                    { '===': [{ var: 'data.lazyLoad' }, true] },\n                    { '!==': [{ var: 'data.widget' }, 'html5'] },\n                    {\n                        or: [\n                            { '===': [{ var: 'data.dataSrc' }, 'url'] },\n                            {\n                                and: [\n                                    { '===': [{ var: 'data.dataSrc' }, 'resource'] },\n                                    // 'data' means entire object from resource will be used\n                                    { '!==': [{ var: 'data.valueProperty' }, 'data'] },\n                                ],\n                            }\n                        ]\n                    }\n                ]\n            },\n        },\n    },\n    {\n        key: 'template',\n        onChange(context) {\n            if (context && context.flags && context.flags.modified) {\n                const defaultValueComponent = context.instance.root.getComponent('defaultValue');\n                if (!defaultValueComponent) {\n                    return;\n                }\n                setSelectData(defaultValueComponent.evalContext());\n            }\n        },\n    },\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/select/editForm/Select.edit.data.js?");
 
 /***/ }),
 
@@ -7062,7 +7062,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 signature_pad_1 = __importDefault(__webpack_require__(/*! signature_pad */ \"./node_modules/signature_pad/dist/signature_pad.js\"));\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass SignatureComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            type: 'signature',\n            label: 'Signature',\n            key: 'signature',\n            footer: 'Sign above',\n            width: '100%',\n            height: '150px',\n            penColor: 'black',\n            backgroundColor: 'rgb(245,245,235)',\n            minWidth: '0.5',\n            maxWidth: '2.5',\n            keepOverlayRatio: true,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Signature',\n            group: 'advanced',\n            icon: 'pencil',\n            weight: 120,\n            documentation: '/developers/integrations/esign/esign-integrations#signature-component',\n            schema: SignatureComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return SignatureComponent.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.string];\n    }\n    init() {\n        var _a, _b, _c, _d, _e;\n        super.init();\n        this.currentWidth = 0;\n        this.scale = 1;\n        if (!this.component.width) {\n            this.component.width = '100%';\n        }\n        if (!this.component.height) {\n            this.component.height = '200px';\n        }\n        if (this.component.keepOverlayRatio\n            && ((_a = this.options) === null || _a === void 0 ? void 0 : _a.display) === 'pdf'\n            && ((_b = this.component.overlay) === null || _b === void 0 ? void 0 : _b.width)\n            && ((_c = this.component.overlay) === null || _c === void 0 ? void 0 : _c.height)) {\n            this.ratio = ((_d = this.component.overlay) === null || _d === void 0 ? void 0 : _d.width) / ((_e = this.component.overlay) === null || _e === void 0 ? void 0 : _e.height);\n            this.component.width = '100%';\n            this.component.height = 'auto';\n        }\n    }\n    get emptyValue() {\n        return '';\n    }\n    get defaultSchema() {\n        return SignatureComponent.schema();\n    }\n    get inputInfo() {\n        const info = super.inputInfo;\n        info.type = 'input';\n        info.attr.type = 'hidden';\n        return info;\n    }\n    get className() {\n        return `${super.className} signature-pad`;\n    }\n    labelIsHidden() {\n        return this.component.hideLabel;\n    }\n    setValue(value, flags = {}) {\n        const changed = super.setValue(value, flags);\n        if (this.refs.signatureImage && (this.options.readOnly || this.disabled)) {\n            this.refs.signatureImage.setAttribute('src', value);\n            this.showCanvas(false);\n        }\n        if (this.signaturePad) {\n            if (!value) {\n                this.signaturePad.clear();\n            }\n            else if (changed) {\n                this.triggerChange();\n            }\n        }\n        if (this.signaturePad && this.dataValue && this.signaturePad.isEmpty()) {\n            this.setDataToSigaturePad();\n        }\n        return changed;\n    }\n    showCanvas(show) {\n        if (show) {\n            if (this.refs.canvas) {\n                this.refs.canvas.style.display = 'inherit';\n            }\n            if (this.refs.signatureImage) {\n                this.refs.signatureImage.style.display = 'none';\n            }\n        }\n        else {\n            if (this.refs.canvas) {\n                this.refs.canvas.style.display = 'none';\n            }\n            if (this.refs.signatureImage) {\n                this.refs.signatureImage.style.display = 'inherit';\n                this.refs.signatureImage.style.maxHeight = '100%';\n            }\n        }\n    }\n    onDisabled() {\n        this.showCanvas(!super.disabled);\n        if (this.signaturePad) {\n            if (super.disabled) {\n                this.signaturePad.off();\n                if (this.refs.refresh) {\n                    this.refs.refresh.classList.add('disabled');\n                }\n                if (this.refs.signatureImage && this.dataValue) {\n                    this.refs.signatureImage.setAttribute('src', this.dataValue);\n                }\n            }\n            else {\n                this.signaturePad.on();\n                if (this.refs.refresh) {\n                    this.refs.refresh.classList.remove('disabled');\n                }\n            }\n        }\n    }\n    checkSize(force, scale) {\n        if (this.refs.padBody && (force || this.refs.padBody && this.refs.padBody.offsetWidth !== this.currentWidth)) {\n            this.scale = force ? scale : this.scale;\n            this.currentWidth = this.refs.padBody.offsetWidth;\n            const width = this.currentWidth * this.scale;\n            const height = this.ratio ? width / this.ratio : this.refs.padBody.offsetHeight * this.scale;\n            const maxHeight = this.ratio ? height : this.refs.padBody.offsetHeight * this.scale;\n            this.refs.canvas.width = width;\n            this.refs.canvas.height = height > maxHeight ? maxHeight : height;\n            this.refs.canvas.style.maxWidth = `${this.currentWidth * this.scale}px`;\n            this.refs.canvas.style.maxHeight = `${maxHeight}px`;\n            const ctx = this.refs.canvas.getContext('2d');\n            ctx.setTransform(1, 0, 0, 1, 0, 0);\n            ctx.scale((1 / this.scale), (1 / this.scale));\n            ctx.fillStyle = this.signaturePad.backgroundColor;\n            ctx.fillRect(0, 0, this.refs.canvas.width, this.refs.canvas.height);\n            this.signaturePad.clear();\n            if (this.dataValue) {\n                this.setDataToSigaturePad();\n            }\n            this.showCanvas(true);\n        }\n    }\n    renderElement(value, index) {\n        return this.renderTemplate('signature', {\n            element: super.renderElement(value, index),\n            required: lodash_1.default.get(this.component, 'validate.required', false),\n        });\n    }\n    get hasModalSaveButton() {\n        return false;\n    }\n    getModalPreviewTemplate() {\n        return this.renderModalPreview({\n            previewText: this.dataValue ?\n                `<img src=${this.dataValue} ${this._referenceAttributeName}='openModal' style=\"width: 100%;height: 100%;\" />` :\n                this.t('Click to Sign')\n        });\n    }\n    attach(element) {\n        this.loadRefs(element, { canvas: 'single', refresh: 'single', padBody: 'single', signatureImage: 'single' });\n        const superAttach = super.attach(element);\n        if (this.refs.refresh && this.options.readOnly) {\n            this.refs.refresh.classList.add('disabled');\n        }\n        // Create the signature pad.\n        if (this.refs.canvas) {\n            this.signaturePad = new signature_pad_1.default(this.refs.canvas, {\n                minWidth: this.component.minWidth,\n                maxWidth: this.component.maxWidth,\n                penColor: this.component.penColor,\n                backgroundColor: this.component.backgroundColor\n            });\n            this.signaturePad.addEventListener('endStroke', () => this.setValue(this.signaturePad.toDataURL()));\n            this.refs.signatureImage.setAttribute('src', this.signaturePad.toDataURL());\n            this.onDisabled();\n            // Ensure the signature is always the size of its container.\n            if (this.refs.padBody) {\n                if (!this.refs.padBody.style.maxWidth) {\n                    this.refs.padBody.style.maxWidth = '100%';\n                }\n                if (!this.builderMode && !this.options.preview) {\n                    this.observer = new ResizeObserver(() => {\n                        this.checkSize();\n                    });\n                    this.observer.observe(this.refs.padBody);\n                }\n                this.addEventListener(window, 'resize', lodash_1.default.debounce(() => this.checkSize(), 10));\n                setTimeout(function checkWidth() {\n                    if (this.refs.padBody && this.refs.padBody.offsetWidth) {\n                        this.checkSize();\n                    }\n                    else {\n                        setTimeout(checkWidth.bind(this), 20);\n                    }\n                }.bind(this), 20);\n            }\n        }\n        this.addEventListener(this.refs.refresh, 'click', (event) => {\n            event.preventDefault();\n            this.showCanvas(true);\n            this.signaturePad.clear();\n            this.setValue(this.defaultValue);\n        });\n        this.setValue(this.dataValue);\n        return superAttach;\n    }\n    /* eslint-enable max-statements */\n    detach() {\n        if (this.observer) {\n            this.observer.disconnect();\n            this.observer = null;\n        }\n        if (this.signaturePad) {\n            this.signaturePad.off();\n        }\n        this.signaturePad = null;\n        this.currentWidth = 0;\n        super.detach();\n    }\n    getValueAsString(value) {\n        if (lodash_1.default.isUndefined(value) && this.inDataTable) {\n            return '';\n        }\n        return value ? 'Yes' : 'No';\n    }\n    focus() {\n        this.refs.padBody.focus();\n    }\n    setDataToSigaturePad() {\n        this.signaturePad.fromDataURL(this.dataValue, {\n            ratio: 1,\n            width: this.refs.canvas.width,\n            height: this.refs.canvas.height,\n        });\n    }\n}\nexports[\"default\"] = SignatureComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/signature/Signature.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 signature_pad_1 = __importDefault(__webpack_require__(/*! signature_pad */ \"./node_modules/signature_pad/dist/signature_pad.js\"));\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass SignatureComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            type: 'signature',\n            label: 'Signature',\n            key: 'signature',\n            footer: 'Sign above',\n            width: '100%',\n            height: '150px',\n            penColor: 'black',\n            backgroundColor: 'rgb(245,245,235)',\n            minWidth: '0.5',\n            maxWidth: '2.5',\n            keepOverlayRatio: true,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Signature',\n            group: 'advanced',\n            icon: 'pencil',\n            weight: 120,\n            documentation: '/developers/integrations/esign/esign-integrations#signature-component',\n            schema: SignatureComponent.schema()\n        };\n    }\n    static get serverConditionSettings() {\n        return SignatureComponent.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.string];\n    }\n    init() {\n        var _a, _b, _c, _d, _e;\n        super.init();\n        this.currentWidth = 0;\n        this.scale = 1;\n        if (!this.component.width) {\n            this.component.width = '100%';\n        }\n        if (!this.component.height) {\n            this.component.height = '200px';\n        }\n        if (this.component.keepOverlayRatio\n            && ((_a = this.options) === null || _a === void 0 ? void 0 : _a.display) === 'pdf'\n            && ((_b = this.component.overlay) === null || _b === void 0 ? void 0 : _b.width)\n            && ((_c = this.component.overlay) === null || _c === void 0 ? void 0 : _c.height)) {\n            this.ratio = ((_d = this.component.overlay) === null || _d === void 0 ? void 0 : _d.width) / ((_e = this.component.overlay) === null || _e === void 0 ? void 0 : _e.height);\n            this.component.width = '100%';\n            this.component.height = 'auto';\n        }\n    }\n    get emptyValue() {\n        return '';\n    }\n    get defaultSchema() {\n        return SignatureComponent.schema();\n    }\n    get inputInfo() {\n        const info = super.inputInfo;\n        info.type = 'input';\n        info.attr.type = 'hidden';\n        return info;\n    }\n    get className() {\n        return `${super.className} signature-pad`;\n    }\n    labelIsHidden() {\n        return this.component.hideLabel;\n    }\n    setValue(value, flags = {}) {\n        const changed = super.setValue(value, flags);\n        if (this.refs.signatureImage && (this.options.readOnly || this.disabled)) {\n            this.refs.signatureImage.setAttribute('src', value);\n            this.showCanvas(false);\n        }\n        if (this.signaturePad) {\n            if (!value) {\n                this.signaturePad.clear();\n            }\n            else if (changed) {\n                this.triggerChange();\n            }\n        }\n        if (this.signaturePad && this.dataValue && this.signaturePad.isEmpty()) {\n            this.setDataToSigaturePad();\n        }\n        return changed;\n    }\n    showCanvas(show) {\n        if (show) {\n            if (this.refs.canvas) {\n                this.refs.canvas.style.display = 'inherit';\n            }\n            if (this.refs.signatureImage) {\n                this.refs.signatureImage.style.display = 'none';\n            }\n        }\n        else {\n            if (this.refs.canvas) {\n                this.refs.canvas.style.display = 'none';\n            }\n            if (this.refs.signatureImage) {\n                this.refs.signatureImage.style.display = 'inherit';\n                this.refs.signatureImage.style.maxHeight = '100%';\n            }\n        }\n    }\n    onDisabled() {\n        this.showCanvas(!super.disabled);\n        if (this.signaturePad) {\n            if (super.disabled) {\n                this.signaturePad.off();\n                if (this.refs.refresh) {\n                    this.refs.refresh.classList.add('disabled');\n                }\n                if (this.refs.signatureImage && this.dataValue) {\n                    this.refs.signatureImage.setAttribute('src', this.dataValue);\n                }\n            }\n            else {\n                this.signaturePad.on();\n                if (this.refs.refresh) {\n                    this.refs.refresh.classList.remove('disabled');\n                }\n            }\n        }\n    }\n    checkSize(force, scale) {\n        if (this.refs.padBody && (force || this.refs.padBody && this.refs.padBody.offsetWidth !== this.currentWidth)) {\n            this.scale = force ? scale : this.scale;\n            this.currentWidth = this.refs.padBody.offsetWidth;\n            const width = this.currentWidth * this.scale;\n            const height = this.ratio ? width / this.ratio : this.refs.padBody.offsetHeight * this.scale;\n            const maxHeight = this.ratio ? height : this.refs.padBody.offsetHeight * this.scale;\n            this.refs.canvas.width = width;\n            this.refs.canvas.height = height > maxHeight ? maxHeight : height;\n            this.refs.canvas.style.maxWidth = `${this.currentWidth * this.scale}px`;\n            this.refs.canvas.style.maxHeight = `${maxHeight}px`;\n            const ctx = this.refs.canvas.getContext('2d');\n            ctx.setTransform(1, 0, 0, 1, 0, 0);\n            ctx.scale((1 / this.scale), (1 / this.scale));\n            ctx.fillStyle = this.signaturePad.backgroundColor;\n            ctx.fillRect(0, 0, this.refs.canvas.width, this.refs.canvas.height);\n            this.signaturePad.clear();\n            if (this.dataValue) {\n                this.setDataToSigaturePad();\n            }\n            if (!this.disabled) {\n                this.showCanvas(true);\n            }\n        }\n    }\n    renderElement(value, index) {\n        return this.renderTemplate('signature', {\n            element: super.renderElement(value, index),\n            required: lodash_1.default.get(this.component, 'validate.required', false),\n        });\n    }\n    get hasModalSaveButton() {\n        return false;\n    }\n    getModalPreviewTemplate() {\n        return this.renderModalPreview({\n            previewText: this.dataValue ?\n                `<img src=${this.dataValue} ${this._referenceAttributeName}='openModal' style=\"width: 100%;height: 100%;\" />` :\n                this.t('Click to Sign')\n        });\n    }\n    attach(element) {\n        this.loadRefs(element, { canvas: 'single', refresh: 'single', padBody: 'single', signatureImage: 'single' });\n        const superAttach = super.attach(element);\n        if (this.refs.refresh && this.options.readOnly) {\n            this.refs.refresh.classList.add('disabled');\n        }\n        // Create the signature pad.\n        if (this.refs.canvas) {\n            this.signaturePad = new signature_pad_1.default(this.refs.canvas, {\n                minWidth: this.component.minWidth,\n                maxWidth: this.component.maxWidth,\n                penColor: this.component.penColor,\n                backgroundColor: this.component.backgroundColor\n            });\n            this.signaturePad.addEventListener('endStroke', () => this.setValue(this.signaturePad.toDataURL()));\n            this.refs.signatureImage.setAttribute('src', this.signaturePad.toDataURL());\n            this.onDisabled();\n            // Ensure the signature is always the size of its container.\n            if (this.refs.padBody) {\n                if (!this.refs.padBody.style.maxWidth) {\n                    this.refs.padBody.style.maxWidth = '100%';\n                }\n                if (!this.builderMode && !this.options.preview) {\n                    this.observer = new ResizeObserver(() => {\n                        this.checkSize();\n                    });\n                    this.observer.observe(this.refs.padBody);\n                }\n                this.addEventListener(window, 'resize', lodash_1.default.debounce(() => this.checkSize(), 10));\n                setTimeout(function checkWidth() {\n                    if (this.refs.padBody && this.refs.padBody.offsetWidth) {\n                        this.checkSize();\n                    }\n                    else {\n                        setTimeout(checkWidth.bind(this), 20);\n                    }\n                }.bind(this), 20);\n            }\n        }\n        this.addEventListener(this.refs.refresh, 'click', (event) => {\n            event.preventDefault();\n            this.showCanvas(true);\n            this.signaturePad.clear();\n            this.setValue(this.defaultValue);\n        });\n        this.setValue(this.dataValue);\n        return superAttach;\n    }\n    /* eslint-enable max-statements */\n    detach() {\n        if (this.observer) {\n            this.observer.disconnect();\n            this.observer = null;\n        }\n        if (this.signaturePad) {\n            this.signaturePad.off();\n        }\n        this.signaturePad = null;\n        this.currentWidth = 0;\n        super.detach();\n    }\n    getValueAsString(value) {\n        if (lodash_1.default.isUndefined(value) && this.inDataTable) {\n            return '';\n        }\n        return value ? 'Yes' : 'No';\n    }\n    focus() {\n        this.refs.padBody.focus();\n    }\n    setDataToSigaturePad() {\n        this.signaturePad.fromDataURL(this.dataValue, {\n            ratio: 1,\n            width: this.refs.canvas.width,\n            height: this.refs.canvas.height,\n        });\n    }\n}\nexports[\"default\"] = SignatureComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/signature/Signature.js?");
 
 /***/ }),
 
@@ -8118,7 +8118,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 }));\nexports.I18n = void 0;\nconst utils_1 = __webpack_require__(/*! @formio/core/utils */ \"./node_modules/@formio/core/lib/utils/index.js\");\nconst i18n_1 = __importDefault(__webpack_require__(/*! ../i18n */ \"./lib/cjs/i18n.js\"));\nconst i18Defaults = {};\nfor (const lang in i18n_1.default.resources) {\n    if (i18n_1.default.resources.hasOwnProperty(lang)) {\n        i18Defaults[lang] = i18n_1.default.resources[lang].translation;\n    }\n}\n/**\n * This file is used to mimic the i18n library interface.\n */\nclass I18n {\n    constructor(languages = {}) {\n        this.languages = i18Defaults;\n        this.language = 'en';\n        this.currentLanguage = i18Defaults.en;\n        this.setLanguages(languages);\n        this.changeLanguage(this.language);\n    }\n    setLanguages(languages) {\n        if (languages.resources) {\n            for (const lang in languages.resources) {\n                if (languages.resources.hasOwnProperty(lang)) {\n                    languages[lang] = languages.resources[lang].translation;\n                }\n            }\n            delete languages.resources;\n        }\n        if (languages.lng) {\n            languages.language = languages.lng;\n            delete languages.lng;\n        }\n        // Do not use these configurations.\n        delete languages.nsSeparator;\n        delete languages.keySeparator;\n        delete languages.pluralSeparator;\n        delete languages.contextSeparator;\n        // Now establish the languages default.\n        if (languages.language) {\n            this.language = languages.language;\n        }\n        for (const lang in languages) {\n            if (lang !== 'language' && languages.hasOwnProperty(lang)) {\n                if (!this.languages[lang]) {\n                    this.languages[lang] = {};\n                }\n                this.languages[lang] = Object.assign(Object.assign({}, this.languages[lang]), languages[lang]);\n            }\n        }\n    }\n    static init(languages = {}) {\n        return new I18n(languages);\n    }\n    dir(lang = '') {\n        lang = lang || this.language;\n        const rtls = ['ar', 'he', 'fa', 'ps', 'ur'];\n        return rtls.includes(lang) ? 'rtl' : 'ltr';\n    }\n    static createInstance() {\n        return new I18n();\n    }\n    changeLanguage(language, ready = null) {\n        if (!this.languages[language]) {\n            language = 'en';\n        }\n        this.language = language;\n        this.currentLanguage = this.languages[language] ? this.languages[language] : {};\n        if (ready) {\n            ready();\n        }\n    }\n    addResourceBundle(language, type, strings) {\n        this.languages[language] = strings;\n    }\n    t(text, ...args) {\n        if (this.currentLanguage[text]) {\n            return utils_1.Evaluator.interpolateString(this.currentLanguage[text], ...args);\n        }\n        return utils_1.Evaluator.interpolateString(text, ...args);\n    }\n}\nexports.I18n = I18n;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/utils/i18n.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.I18n = void 0;\nconst utils_1 = __webpack_require__(/*! @formio/core/utils */ \"./node_modules/@formio/core/lib/utils/index.js\");\nconst i18n_1 = __importDefault(__webpack_require__(/*! ../i18n */ \"./lib/cjs/i18n.js\"));\nconst i18Defaults = {};\nfor (const lang in i18n_1.default.resources) {\n    if (i18n_1.default.resources.hasOwnProperty(lang)) {\n        i18Defaults[lang] = i18n_1.default.resources[lang].translation;\n    }\n}\n/**\n * This file is used to mimic the i18n library interface.\n */\nclass I18n {\n    constructor(languages = {}) {\n        this.languages = i18Defaults;\n        this.language = 'en';\n        this.currentLanguage = i18Defaults.en;\n        this.setLanguages(languages);\n        this.changeLanguage(this.language);\n    }\n    setLanguages(languages) {\n        if (languages.resources) {\n            for (const lang in languages.resources) {\n                if (languages.resources.hasOwnProperty(lang)) {\n                    languages[lang] = languages.resources[lang].translation;\n                }\n            }\n            delete languages.resources;\n        }\n        if (languages.lng) {\n            languages.language = languages.lng;\n            delete languages.lng;\n        }\n        // Do not use these configurations.\n        delete languages.nsSeparator;\n        delete languages.keySeparator;\n        delete languages.pluralSeparator;\n        delete languages.contextSeparator;\n        // Now establish the languages default.\n        if (languages.language) {\n            this.language = languages.language;\n        }\n        for (const lang in languages) {\n            if (lang !== 'language' && languages.hasOwnProperty(lang)) {\n                if (!this.languages[lang]) {\n                    this.languages[lang] = {};\n                }\n                this.languages[lang] = Object.assign(Object.assign({}, this.languages[lang]), languages[lang]);\n            }\n        }\n    }\n    static init(languages = {}) {\n        return new I18n(languages);\n    }\n    dir(lang = '') {\n        lang = lang || this.language;\n        const rtls = ['ar', 'he', 'fa', 'ps', 'ur'];\n        return rtls.includes(lang) ? 'rtl' : 'ltr';\n    }\n    static createInstance() {\n        return new I18n();\n    }\n    changeLanguage(language, ready = null) {\n        if (!this.languages[language]) {\n            language = 'en';\n        }\n        this.language = language;\n        this.currentLanguage = this.languages[language] ? this.languages[language] : {};\n        if (ready) {\n            ready();\n        }\n    }\n    addResourceBundle(language, type, strings) {\n        this.languages[language] = strings;\n    }\n    t(text, ...args) {\n        var _a;\n        if (this.currentLanguage[text]) {\n            const customTranslationFieldName = (_a = args[0]) === null || _a === void 0 ? void 0 : _a.field;\n            if (customTranslationFieldName && this.currentLanguage[customTranslationFieldName]) {\n                args[0].field = this.currentLanguage[customTranslationFieldName];\n            }\n            return utils_1.Evaluator.interpolateString(this.currentLanguage[text], ...args);\n        }\n        return utils_1.Evaluator.interpolateString(text, ...args);\n    }\n}\nexports.I18n = I18n;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/utils/i18n.js?");
 
 /***/ }),