@formio/js 5.0.0-rc.39 → 5.0.0-rc.41

package/lib/mjs/components/file/File.js

@@ -579,8 +579,8 @@ export default class FileComponent extends Field {
         }
         valid = pattern.excludes.reduce((result, excludePattern) => {
             const exclude = new RegExp(excludePattern, 'i');
-            return result && (_.isNil(file.type) || !exclude.test(file.type)) &&
-                (_.isNil(file.name) || !exclude.test(file.name));
+            return result && (_.isNil(file.type) || exclude.test(file.type)) &&
+                (_.isNil(file.name) || exclude.test(file.name));
         }, valid);
         return valid;
     }

package/lib/mjs/components/file/editForm/File.edit.file.js

@@ -184,7 +184,7 @@ export default [
         input: true,
         key: 'fileNameTemplate',
         label: 'File Name Template',
-        placeholder: '(optional) { {name} }-{ {guid} }"',
+        placeholder: '(optional) { {name} }-{ {guid} }',
         tooltip: 'Specify template for name of uploaded file(s). Regular template variables are available (`data`, `component`, `user`, `value`, `moment` etc.), also `fileName`, `guid` variables are available. `guid` part must be present, if not found in template, will be added at the end.',
         weight: 25
     },

package/lib/mjs/components/form/Form.js

@@ -609,7 +609,7 @@ export default class FormComponent extends Component {
         }
     }
     isEmpty(value = this.dataValue) {
-        return value === null || _.isEqual(value, this.emptyValue) || (this.areAllComponentsEmpty(value.data) && !value._id);
+        return value === null || _.isEqual(value, this.emptyValue) || (this.areAllComponentsEmpty(value?.data) && !value?._id);
     }
     areAllComponentsEmpty(data) {
         let res = true;

package/lib/mjs/components/html/HTML.js

@@ -38,13 +38,13 @@ export default class HTMLComponent extends Component {
             return ` ${this.component.content} `;
         }
         const submission = _.get(this.root, 'submission', {});
-        const content = this.component.content ? this.interpolate(this.sanitize(this.component.content, this.shouldSanitizeValue), {
+        const content = this.component.content ? this.interpolate(this.component.content, {
             metadata: submission.metadata || {},
             submission: submission,
             data: this.rootValue,
             row: this.data
         }) : '';
-        return content;
+        return this.sanitize(content, this.shouldSanitizeValue);
     }
     get singleTags() {
         return ['br', 'img', 'hr'];
@@ -80,8 +80,16 @@ export default class HTMLComponent extends Component {
     render() {
         return super.render(this.renderContent());
     }
+    get dataReady() {
+        return this.root?.submissionReady || Promise.resolve();
+    }
     attach(element) {
         this.loadRefs(element, { html: 'single' });
+        this.dataReady.then(() => {
+            if (this.element) {
+                this.setContent(this.elemet, this.content);
+            }
+        });
         return super.attach(element);
     }
 }

package/lib/mjs/components/html/fixtures/index.js

@@ -1,4 +1,3 @@
 import comp1 from './comp1';
 import comp2 from './comp2';
-import comp3 from './comp3';
-export { comp1, comp2, comp3 };
+export { comp1, comp2 };

package/lib/mjs/components/index.js

@@ -31,7 +31,6 @@ import PasswordComponent from './password/Password';
 import PhoneNumberComponent from './phonenumber/PhoneNumber';
 import RadioComponent from './radio/Radio';
 import ReCaptchaComponent from './recaptcha/ReCaptcha';
-import ResourceComponent from './resource/Resource';
 import SelectBoxesComponent from './selectboxes/SelectBoxes';
 import SelectComponent from './select/Select';
 import SignatureComponent from './signature/Signature';
@@ -80,7 +79,6 @@ export default {
     phoneNumber: PhoneNumberComponent,
     radio: RadioComponent,
     recaptcha: ReCaptchaComponent,
-    resource: ResourceComponent,
     select: SelectComponent,
     selectboxes: SelectBoxesComponent,
     signature: SignatureComponent,

package/lib/mjs/components/recaptcha/ReCaptcha.js

@@ -55,7 +55,7 @@ export default class ReCaptchaComponent extends Component {
     get skipInEmail() {
         return true;
     }
-    verify(actionName) {
+    async verify(actionName) {
         const siteKey = _get(this.root.form, 'settings.recaptcha.siteKey');
         if (!siteKey) {
             console.warn('There is no Site Key specified in settings in form JSON');
@@ -65,40 +65,34 @@ export default class ReCaptchaComponent extends Component {
             const recaptchaApiScriptUrl = `https://www.google.com/recaptcha/api.js?render=${_get(this.root.form, 'settings.recaptcha.siteKey')}`;
             this.recaptchaApiReady = Formio.requireLibrary('googleRecaptcha', 'grecaptcha', recaptchaApiScriptUrl, true);
         }
-        if (this.recaptchaApiReady) {
+        try {
+            await this.recaptchaApiReady;
             this.recaptchaVerifiedPromise = new Promise((resolve, reject) => {
-                this.recaptchaApiReady
-                    .then(() => {
-                    if (!this.isLoading) {
-                        this.isLoading = true;
-                        grecaptcha.ready(_debounce(() => {
-                            grecaptcha
-                                .execute(siteKey, {
-                                action: actionName
-                            })
-                                .then((token) => {
-                                return this.sendVerificationRequest(token).then(({ verificationResult, token }) => {
-                                    this.recaptchaResult = {
-                                        ...verificationResult,
-                                        token,
-                                    };
-                                    this.updateValue(this.recaptchaResult);
-                                    return resolve(verificationResult);
-                                });
-                            })
-                                .catch(() => {
-                                this.isLoading = false;
-                            });
-                        }, 1000));
-                    }
-                })
-                    .catch(() => {
-                    return reject();
-                });
-            }).then(() => {
-                this.isLoading = false;
+                if (!this.isLoading) {
+                    this.isLoading = true;
+                    grecaptcha.ready(_debounce(async () => {
+                        try {
+                            const token = await grecaptcha.execute(siteKey, { action: actionName });
+                            const verificationResult = await this.sendVerificationRequest(token);
+                            this.recaptchaResult = {
+                                ...verificationResult,
+                                token,
+                            };
+                            this.updateValue(this.recaptchaResult);
+                            this.isLoading = false;
+                            return resolve(verificationResult);
+                        }
+                        catch (err) {
+                            this.isLoading = false;
+                            reject(err);
+                        }
+                    }, 1000));
+                }
             });
         }
+        catch (err) {
+            this.loading = false;
+        }
     }
     beforeSubmit() {
         if (this.recaptchaVerifiedPromise) {
@@ -108,32 +102,27 @@ export default class ReCaptchaComponent extends Component {
         return super.beforeSubmit();
     }
     sendVerificationRequest(token) {
-        return Formio.makeStaticRequest(`${Formio.projectUrl}/recaptcha?recaptchaToken=${token}`)
-            .then((verificationResult) => ({ verificationResult, token }));
+        return Formio.makeStaticRequest(`${Formio.projectUrl}/recaptcha?recaptchaToken=${token}`);
     }
     checkComponentValidity(data, dirty, row, options = {}, errors = []) {
         data = data || this.rootValue;
         row = row || this.data;
         const { async = false } = options;
-        // Verification could be async only
+        // Verification could be async only (which for now is only the case for server-side validation)
         if (!async) {
             return super.checkComponentValidity(data, dirty, row, options, errors);
         }
         const componentData = row[this.component.key];
         if (!componentData || !componentData.token) {
-            this.setCustomValidity('ReCAPTCHA: Token is not specified in submission');
+            this.setCustomValidity(this.t('reCaptchaTokenNotSpecifiedError'));
             return Promise.resolve(false);
         }
         if (!componentData.success) {
-            this.setCustomValidity('ReCAPTCHA: Token validation error');
+            this.setCustomValidity(this.t('reCaptchaTokenValidationError'));
             return Promise.resolve(false);
         }
-        return this.hook('validateReCaptcha', componentData.token, () => Promise.resolve(true))
-            .then((success) => success)
-            .catch((err) => {
-            this.setCustomValidity(err.message || err);
-            return false;
-        });
+        // Any further validation will 100% not run on the client
+        return Promise.resolve(true);
     }
     normalizeValue(newValue) {
         // If a recaptcha result has already been established, then do not allow it to be reset.

package/lib/mjs/components/select/Select.js

@@ -349,6 +349,7 @@ export default class SelectComponent extends ListComponent {
     }
     /* eslint-disable max-statements */
     setItems(items, fromSearch) {
+        this.selectItems = items;
         // If the items is a string, then parse as JSON.
         if (typeof items == 'string') {
             try {
@@ -817,7 +818,7 @@ export default class SelectComponent extends ListComponent {
             this.addFocusBlurEvents(input);
             this.triggerUpdate(null, true);
             if (this.visible) {
-                this.setItems(this.selectOptions || []);
+                this.setItems(this.selectItems || []);
             }
             this.focusableElement = input;
             if (this.component.dataSrc === 'custom') {
@@ -1190,6 +1191,7 @@ export default class SelectComponent extends ListComponent {
                             templateData[dataValueItemValue] = this.templateData[dataValueItemValue];
                         });
                     }
+                    templateData[value] = this.templateData[value];
                 }
                 _.set(submission.metadata.selectData, this.path, templateData);
             }

package/lib/mjs/components/select/fixtures/comp20.js

@@ -0,0 +1,44 @@
+export default {
+    _id: '659fa81f4a40147c0ffb949b',
+    title: '7724',
+    name: '7724',
+    path: '7724',
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Select',
+            widget: 'choicesjs',
+            tableView: true,
+            multiple: true,
+            data: {
+                values: [
+                    {
+                        label: 'Apple',
+                        value: 'apple'
+                    },
+                    {
+                        label: 'Orange',
+                        value: 'orange'
+                    },
+                    {
+                        label: 'Pear',
+                        value: 'pear'
+                    }
+                ]
+            },
+            key: 'select',
+            type: 'select',
+            input: true
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false
+        }
+    ],
+    project: '63cead09be0090345b109e22'
+};

package/lib/mjs/components/select/fixtures/comp21.js

@@ -0,0 +1,104 @@
+export default {
+    title: 'FIO-7632',
+    name: 'fio7632',
+    path: 'fio7632',
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            collapsible: false,
+            key: 'panel',
+            type: 'panel',
+            label: 'Panel',
+            input: false,
+            tableView: false,
+            components: [
+                {
+                    label: 'Animals',
+                    widget: 'html5',
+                    tableView: true,
+                    data: {
+                        values: [
+                            {
+                                label: 'Dog',
+                                value: 'dog',
+                            },
+                            {
+                                label: 'Cat',
+                                value: 'cat',
+                            },
+                            {
+                                label: 'Horse',
+                                value: 'horse',
+                            },
+                        ],
+                    },
+                    key: 'animals',
+                    type: 'select',
+                    input: true,
+                },
+                {
+                    label: 'Checkbox',
+                    tableView: false,
+                    key: 'checkbox',
+                    type: 'checkbox',
+                    input: true,
+                },
+                {
+                    label: 'Animals2',
+                    widget: 'html5',
+                    tableView: true,
+                    data: {
+                        values: [
+                            {
+                                label: 'Dog',
+                                value: 'dog',
+                            },
+                            {
+                                label: 'Cat',
+                                value: 'cat',
+                            },
+                            {
+                                label: 'Horse',
+                                value: 'horse',
+                            },
+                        ],
+                    },
+                    calculateValue: 'if (data.checkbox === true) {\n  value = data.animals;\n}',
+                    key: 'animals2',
+                    logic: [
+                        {
+                            name: 'disable',
+                            trigger: {
+                                type: 'javascript',
+                                javascript: 'result = row.checkbox === true;',
+                            },
+                            actions: [
+                                {
+                                    name: 'disable',
+                                    type: 'property',
+                                    property: {
+                                        label: 'Disabled',
+                                        value: 'disabled',
+                                        type: 'boolean',
+                                    },
+                                    state: true,
+                                },
+                            ],
+                        },
+                    ],
+                    type: 'select',
+                    input: true,
+                },
+                {
+                    type: 'button',
+                    label: 'Submit',
+                    key: 'submit',
+                    disableOnInvalid: true,
+                    input: true,
+                    tableView: false,
+                },
+            ],
+        },
+    ],
+};

package/lib/mjs/components/select/fixtures/index.js

@@ -17,4 +17,6 @@ import comp16 from './comp16';
 import comp17 from './comp17';
 import comp18 from './comp18';
 import comp19 from './comp19';
-export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19 };
+import comp20 from './comp20';
+import comp21 from './comp21';
+export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21 };

package/lib/mjs/components/selectboxes/SelectBoxes.js

@@ -31,7 +31,7 @@ export default class SelectBoxesComponent extends RadioComponent {
                     type: 'select',
                     dataSrc: 'custom',
                     valueProperty: 'value',
-                    valueType: 'string',
+                    dataType: 'string',
                     data: {
                         custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`
                     },

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

@@ -1,5 +1,6 @@
 import Input from '../_classes/input/Input';
 import { conformToMask } from '@formio/vanilla-text-mask';
+import Inputmask from 'inputmask';
 import * as FormioUtils from '../../utils/utils';
 import _ from 'lodash';
 export default class TextFieldComponent extends Input {
@@ -148,8 +149,14 @@ export default class TextFieldComponent extends Input {
         const maskInput = this.refs.select ? this.refs.select[index] : null;
         const mask = this.getMaskPattern(value.maskName);
         if (textInput && maskInput && mask) {
-            const placeholderChar = this.placeholderChar;
-            textInput.value = conformToMask(textValue, FormioUtils.getInputMask(mask), { placeholderChar }).conformedValue;
+            if (textInput.inputmask) {
+                this.setInputMask(textInput, mask);
+                textInput.inputmask.setValue(textValue);
+            }
+            else {
+                const placeholderChar = this.placeholderChar;
+                textInput.value = conformToMask(textValue, FormioUtils.getInputMask(mask), { placeholderChar }).conformedValue;
+            }
             maskInput.value = value.maskName;
         }
         else {
@@ -180,7 +187,10 @@ export default class TextFieldComponent extends Input {
             if (displayMask && !valueMask) {
                 return this.unmaskValue(value, displayMask);
             }
-            if (this.refs.valueMaskInput?.mask) {
+            if (displayMask && displayMask !== valueMask) {
+                return Inputmask.format(Inputmask.unmask(value, displayMask), valueMask);
+            }
+            if (this.refs.valueMaskInput?.mask && this.refs.valueMaskInput.mask.textMaskInputElement) {
                 this.refs.valueMaskInput.mask.textMaskInputElement.update(value);
                 return this.refs.valueMaskInput?.value;
             }
@@ -193,6 +203,55 @@ export default class TextFieldComponent extends Input {
             maskName: maskInput ? maskInput.value : undefined
         };
     }
+    checkInputMaskValue(inputMask) {
+        let valid = true;
+        const maskValues = _.values(inputMask.split('').reduce((acc, el, i, mask) => {
+            if (el === '{' || el === '}') {
+                if (mask[i + 1] === '{' || mask[i + 1] === '}') {
+                    valid = false;
+                }
+                acc[el] = (acc[el] ?? 0) + 1;
+            }
+            return acc;
+        }, {}));
+        if (maskValues[0] !== maskValues[1]) {
+            valid = false;
+        }
+        return valid;
+    }
+    setInputMask(input, inputMask, usePlaceholder) {
+        if (this.type !== 'textfield') {
+            super.setInputMask(input, inputMask, usePlaceholder);
+            return;
+        }
+        inputMask = inputMask || this.component.displayMask || this.component.inputMask;
+        const mask = FormioUtils.getInputMask(inputMask, this.placeholderChar);
+        this.defaultMask = mask;
+        if (input && inputMask) {
+            try {
+                //remove previous mask
+                if (input.mask) {
+                    input.mask.remove();
+                }
+                if (this.checkInputMaskValue(inputMask)) {
+                    input.mask = new Inputmask(inputMask, {
+                        clearMaskOnLostFocus: !!this.component.placeholder,
+                        showMaskOnHover: !this.component.placeholder,
+                        placeholder: this.placeholderChar || '',
+                    }).mask(input);
+                }
+            }
+            catch (e) {
+                console.warn(e);
+            }
+            if (mask.numeric) {
+                input.setAttribute('pattern', '\\d*');
+            }
+            if (this.component.placeholder) {
+                input.setAttribute('placeholder', this.component.placeholder);
+            }
+        }
+    }
     isHtmlRenderMode() {
         return super.isHtmlRenderMode() ||
             ((this.options.readOnly || this.disabled) &&

package/lib/mjs/displays/Displays.js

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import pdf from '../PDF';
 import webform from '../Webform';
 import wizard from '../Wizard';
-class Displays {
+export default class Displays {
     static displays = {
         pdf,
         webform,
@@ -21,4 +21,3 @@ class Displays {
         return Displays.displays;
     }
 }
-export default Displays;

package/lib/mjs/licenses/Licenses.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-class Licenses {
+export default class Licenses {
     static licenses = {};
     static addLicense(name, license) {
         Licenses.licenses[name] = license;
@@ -14,4 +14,3 @@ class Licenses {
         return Licenses.licenses;
     }
 }
-export default Licenses;

package/lib/mjs/providers/Providers.js

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import address from './address';
 import auth from './auth';
 import storage from './storage';
-class Providers {
+export default class Providers {
     static providers = {
         address,
         auth,
@@ -26,4 +26,3 @@ class Providers {
         }
     }
 }
-export default Providers;

package/lib/mjs/providers/storage/s3.js

@@ -31,9 +31,11 @@ function s3(formio) {
                     else {
                         xhr.openAndSetHeaders('PUT', response.signed);
                         xhr.setRequestHeader('Content-Type', file.type);
-                        Object.keys(response.data.headers).forEach((key) => {
-                            xhr.setRequestHeader(key, response.data.headers[key]);
-                        });
+                        if (response.data.headers) {
+                            Object.keys(response.data.headers).forEach((key) => {
+                                xhr.setRequestHeader(key, response.data.headers[key]);
+                            });
+                        }
                         return file;
                     }
                 }

package/lib/mjs/providers/storage/uploadAdapter.js

@@ -16,7 +16,7 @@ class FormioUploadAdapter {
                 uploadStorage,
                 file,
                 uniqueName(file.name),
-                uploadDir || '',
+                uploadDir || '', //should pass empty string if undefined
                 (evt) => this.onUploadProgress(evt),
                 uploadUrl,
                 uploadOptions,

package/lib/mjs/providers/storage/url.js

@@ -1,4 +1,18 @@
 function url(formio) {
+    function setOptions(options, xhr) {
+        const parsedOptions = typeof options === 'string' ? JSON.parse(options) : options;
+        for (const prop in parsedOptions) {
+            if (prop === 'headers') {
+                const headers = parsedOptions['headers'];
+                for (const header in headers) {
+                    xhr.setRequestHeader(header, headers[header]);
+                }
+            }
+            else {
+                xhr[prop] = parsedOptions[prop];
+            }
+        }
+    }
     const xhrRequest = (url, name, query, data, options, progressCallback, abortCallback) => {
         return new Promise((resolve, reject) => {
             const xhr = new XMLHttpRequest();
@@ -57,18 +71,7 @@ function url(formio) {
             }
             //Overrides previous request props
             if (options) {
-                const parsedOptions = typeof options === 'string' ? JSON.parse(options) : options;
-                for (const prop in parsedOptions) {
-                    if (prop === 'headers') {
-                        const headers = parsedOptions['headers'];
-                        for (const header in headers) {
-                            xhr.setRequestHeader(header, headers[header]);
-                        }
-                    }
-                    else {
-                        xhr[prop] = parsedOptions[prop];
-                    }
-                }
+                setOptions(options, xhr);
             }
             xhr.send(json ? data : fd);
         });
@@ -109,7 +112,7 @@ function url(formio) {
                 return uploadRequest();
             }
         },
-        deleteFile(fileInfo) {
+        deleteFile(fileInfo, options) {
             return new Promise((resolve, reject) => {
                 const xhr = new XMLHttpRequest();
                 xhr.open('DELETE', fileInfo.url, true);
@@ -121,6 +124,9 @@ function url(formio) {
                         reject(xhr.response || 'Unable to delete file');
                     }
                 };
+                if (options) {
+                    setOptions(options, xhr);
+                }
                 xhr.send(null);
             });
         },

package/lib/mjs/templates/Templates.js

@@ -1,5 +1,5 @@
 import templates from './index';
-import { Template } from '@formio/core/template';
+import { Template } from '@formio/core/experimental';
 Template.addTemplates(templates);
 Template.defaultTemplates = templates.bootstrap;
 export default Template;