@formio/js 5.4.1 → 5.4.2

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

@@ -23,9 +23,7 @@ if (htmlCanvasElement && !htmlCanvasElement.prototype.toBlob) {
                 for (var i = 0; i < len; i++) {
                     arr[i] = binStr.charCodeAt(i);
                 }
-                callback(new Blob([
-                    arr,
-                ], { type: type || 'image/png' }));
+                callback(new Blob([arr], { type: type || 'image/png' }));
             });
         },
     });
@@ -62,17 +60,12 @@ export default class FileComponent extends Field {
     static get conditionOperatorsSettings() {
         return {
             ...super.conditionOperatorsSettings,
-            operators: [
-                'isEmpty',
-                'isNotEmpty',
-            ],
+            operators: ['isEmpty', 'isNotEmpty'],
         };
     }
     static savedValueTypes(schema) {
         schema = schema || {};
-        return (getComponentSavedTypes(schema) || [
-            componentValueTypes.object,
-        ]);
+        return getComponentSavedTypes(schema) || [componentValueTypes.object];
     }
     init() {
         super.init();
@@ -213,7 +206,7 @@ export default class FileComponent extends Field {
             this.videoStream = stream;
             const { videoPlayer } = this.refs;
             if (!videoPlayer) {
-                console.warn('Video player not found in template.');
+                console.warn(this.t('videoPlayerNotFound'));
                 this.cameraMode = false;
                 this.redraw();
                 return;
@@ -238,16 +231,14 @@ export default class FileComponent extends Field {
     takePicture() {
         const { videoPlayer } = this.refs;
         if (!videoPlayer) {
-            console.warn('Video player not found in template.');
+            console.warn(this.t('videoPlayerNotFound'));
             this.cameraMode = false;
             this.redraw();
             return;
         }
         this.getFrame(videoPlayer).then((frame) => {
             frame.name = `photo-${Date.now()}.png`;
-            this.handleFilesToUpload([
-                frame,
-            ]);
+            this.handleFilesToUpload([frame]);
             this.cameraMode = false;
             this.redraw();
         });
@@ -426,13 +417,9 @@ export default class FileComponent extends Field {
                         fileEntry.file((file) => {
                             const reader = new FileReader();
                             reader.onloadend = (evt) => {
-                                const blob = new Blob([
-                                    new Uint8Array(evt.target.result),
-                                ], { type: file.type });
+                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });
                                 blob.name = file.name;
-                                this.handleFilesToUpload([
-                                    blob,
-                                ]);
+                                this.handleFilesToUpload([blob]);
                             };
                             reader.readAsArrayBuffer(file);
                         });
@@ -452,13 +439,9 @@ export default class FileComponent extends Field {
                         fileEntry.file((file) => {
                             const reader = new FileReader();
                             reader.onloadend = (evt) => {
-                                const blob = new Blob([
-                                    new Uint8Array(evt.target.result),
-                                ], { type: file.type });
+                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });
                                 blob.name = file.name;
-                                this.handleFilesToUpload([
-                                    blob,
-                                ]);
+                                this.handleFilesToUpload([blob]);
                             };
                             reader.readAsArrayBuffer(file);
                         });
@@ -629,7 +612,7 @@ export default class FileComponent extends Field {
         if (!target.id) {
             return;
         }
-        const [action, id,] = target.id.split('-');
+        const [action, id] = target.id.split('-');
         if (!action || !id || !this.actions[action]) {
             return;
         }
@@ -654,7 +637,7 @@ export default class FileComponent extends Field {
             file,
             size: file.size,
             status: 'info',
-            message: this.t('Processing file. Please wait...'),
+            message: this.t('waitFileProcessing'),
             hash: '',
         };
     }
@@ -682,7 +665,7 @@ export default class FileComponent extends Field {
         return fileWithSameNameUploaded || fileWithSameNameUploading
             ? {
                 status: 'error',
-                message: this.t(`File with the same name is already ${fileWithSameNameUploading ? 'being ' : ''}uploaded`),
+                message: this.t(fileWithSameNameUploading ? 'fileWithDuplicatedNameInProgress' : 'fileWithDuplicatedNameLoaded'),
             }
             : {};
     }
@@ -691,7 +674,7 @@ export default class FileComponent extends Field {
         if (this.component.filePattern && !this.validatePattern(file, this.component.filePattern)) {
             return {
                 status: 'error',
-                message: this.t('File is the wrong type; it must be {{ pattern }}', {
+                message: this.t('wrongFileType', {
                     pattern: this.component.filePattern,
                 }),
             };
@@ -704,7 +687,7 @@ export default class FileComponent extends Field {
             if (!interpolatedMinSize) {
                 return {
                     status: 'error',
-                    message: 'Please, check the entered parameters',
+                    message: this.t('checkEnteredParameters'),
                 };
             }
             if (!this.validateMinSize(file, interpolatedMinSize)) {
@@ -722,7 +705,7 @@ export default class FileComponent extends Field {
             if (!interpolatedMaxSize) {
                 return {
                     status: 'error',
-                    message: 'Please, check the entered parameters',
+                    message: this.t('checkEnteredParameters'),
                 };
             }
             if (!this.validateMaxSize(file, interpolatedMaxSize)) {
@@ -741,7 +724,7 @@ export default class FileComponent extends Field {
         return !fileService
             ? {
                 status: 'error',
-                message: this.t('File Service not provided.'),
+                message: this.t('noFileService'),
             }
             : {};
     }
@@ -771,11 +754,7 @@ export default class FileComponent extends Field {
                     ]
                     : element.component.submissionAccess;
                 groupPermissions.forEach((permission) => {
-                    groupKey = [
-                        'admin',
-                        'write',
-                        'create',
-                    ].includes(permission.type)
+                    groupKey = ['admin', 'write', 'create'].includes(permission.type)
                         ? element.component.key
                         : null;
                 });
@@ -797,7 +776,7 @@ export default class FileComponent extends Field {
                 this.fileDropHidden = false;
                 return {
                     status: 'error',
-                    message: this.t('File processing has been failed.'),
+                    message: this.t('fileProcessingFailed'),
                 };
             }
             finally {
@@ -831,7 +810,7 @@ export default class FileComponent extends Field {
             return this.filesToSync.filesToUpload.push(fileToSync);
         }
         if (this.autoSync) {
-            fileToSync.message = this.t('Ready to be uploaded into storage');
+            fileToSync.message = this.t('readyForUpload');
         }
         this.filesToSync.filesToUpload.push({
             ...fileToSync,
@@ -849,9 +828,7 @@ export default class FileComponent extends Field {
         }
         if (this.component.storage && files && files.length) {
             this.fileDropHidden = true;
-            return Promise.all([
-                ...files,
-            ].map(async (file) => {
+            return Promise.all([...files].map(async (file) => {
                 await this.prepareFileToUpload(file);
                 this.redraw();
             }));
@@ -871,8 +848,8 @@ export default class FileComponent extends Field {
             ...fileInfo,
             status: 'info',
             message: this.autoSync
-                ? this.t('Ready to be removed from storage')
-                : this.t('Preparing file to remove'),
+                ? this.t('readyForRemovingFromStorage')
+                : this.t('preparingFileToRemove'),
         });
         const index = this.dataValue.findIndex((file) => file.name === fileInfo.name);
         this.splice(index);
@@ -887,13 +864,7 @@ export default class FileComponent extends Field {
     async deleteFile(fileInfo) {
         const { options = {} } = this.component;
         if (fileInfo &&
-            [
-                'url',
-                'indexeddb',
-                's3',
-                'azure',
-                'googledrive',
-            ].includes(this.component.storage)) {
+            ['url', 'indexeddb', 's3', 'azure', 'googledrive'].includes(this.component.storage)) {
             const { fileService } = this;
             if (fileService && typeof fileService.deleteFile === 'function') {
                 return await fileService.deleteFile(fileInfo, options);
@@ -917,7 +888,7 @@ export default class FileComponent extends Field {
                 }
                 await this.deleteFile(fileToSync);
                 fileToSync.status = 'success';
-                fileToSync.message = this.t('Succefully removed');
+                fileToSync.message = this.t('succefullyRemoved');
             }
             catch (response) {
                 fileToSync.status = 'error';
@@ -988,14 +959,14 @@ export default class FileComponent extends Field {
                         fileInfo,
                     };
                 }
-                if (fileToSync.status === "success") {
-                    const uploadedFile = this.resolvedFiles.find(x => x.fileToSync.originalName === fileToSync.originalName);
+                if (fileToSync.status === 'success') {
+                    const uploadedFile = this.resolvedFiles.find((x) => x.fileToSync.originalName === fileToSync.originalName);
                     return {
                         fileToSync: uploadedFile.fileToSync,
                         fileInfo: uploadedFile.fileInfo,
                     };
                 }
-                const pendingFile = this.pendingfiles.find(x => x.name === fileToSync.name);
+                const pendingFile = this.pendingfiles.find((x) => x.name === fileToSync.name);
                 if (pendingFile) {
                     fileInfo = await pendingFile.fileInfoProm;
                 }
@@ -1004,9 +975,9 @@ export default class FileComponent extends Field {
                     this.pendingfiles.push({ name: fileToSync.name, fileInfoProm: promInfo });
                     fileInfo = await promInfo;
                 }
-                this.pendingfiles = this.pendingfiles.filter(x => x.name !== fileToSync.name);
+                this.pendingfiles = this.pendingfiles.filter((x) => x.name !== fileToSync.name);
                 fileToSync.status = 'success';
-                fileToSync.message = this.t('Succefully uploaded');
+                fileToSync.message = this.t('succefullyUploaded');
                 fileInfo.originalName = fileToSync.originalName;
                 fileInfo.hash = fileToSync.hash;
                 this.emit('fileUploadingEnd', Promise.resolve(fileInfo));
@@ -1018,7 +989,7 @@ export default class FileComponent extends Field {
                     typeof response === 'string'
                         ? response
                         : response.type === 'abort'
-                            ? this.t('Request was aborted')
+                            ? this.t('requestAborted')
                             : response.toString();
                 this.emit('fileUploadingEnd', Promise.reject(response));
                 this.emit(_.get(response, 'type') === 'abort' ? 'fileUploadCanceled' : 'fileUploadError', {
@@ -1029,9 +1000,11 @@ export default class FileComponent extends Field {
             finally {
                 delete fileToSync.progress;
                 this.redraw();
-                const fileExists = this.resolvedFiles.find(x => x.fileInfo.originalName === fileToSync.originalName);
-                if (!fileExists && fileToSync.status !== 'error') {
-                    this.resolvedFiles.push({ fileToSync, fileInfo });
+                if (fileInfo) {
+                    const fileExists = this.resolvedFiles.find(x => x.fileInfo.originalName === fileToSync.originalName);
+                    if (!fileExists && fileToSync.status !== 'error') {
+                        this.resolvedFiles.push({ fileToSync, fileInfo });
+                    }
                 }
             }
             return {
@@ -1045,7 +1018,7 @@ export default class FileComponent extends Field {
         this.fileDropHidden = true;
         this.redraw();
         try {
-            const [filesToDelete = [], filesToUpload = [],] = await Promise.all([
+            const [filesToDelete = [], filesToUpload = []] = await Promise.all([
                 this.delete(),
                 this.upload(),
             ]);
@@ -1084,7 +1057,7 @@ export default class FileComponent extends Field {
         const { options = {} } = this.component;
         const { fileService } = this;
         if (!fileService) {
-            return alert('File Service not provided');
+            return alert(this.t('noFileService'));
         }
         if (this.component.privateDownload) {
             fileInfo.private = true;
@@ -1093,10 +1066,7 @@ export default class FileComponent extends Field {
             .downloadFile(fileInfo, options)
             .then((file) => {
             if (file) {
-                if ([
-                    'base64',
-                    'indexeddb',
-                ].includes(file.storage)) {
+                if (['base64', 'indexeddb'].includes(file.storage)) {
                     download(file.url, file.originalName || file.name, file.type);
                 }
                 else {
@@ -1124,7 +1094,7 @@ export default class FileComponent extends Field {
                 return Promise.resolve();
             }
             await this.syncFiles();
-            return this.shouldSyncFiles ? Promise.reject('Synchronization is failed') : Promise.resolve();
+            return this.shouldSyncFiles ? Promise.reject(this.t('synchronizationFailed')) : Promise.resolve();
         }
         catch (error) {
             return Promise.reject(error.message);

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

@@ -15,11 +15,7 @@ export default [
                     {
                         var: 'data.storage',
                     },
-                    [
-                        's3',
-                        'azure',
-                        'googledrive',
-                    ],
+                    ['s3', 'azure', 'googledrive'],
                 ],
             },
         },

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

@@ -28,10 +28,7 @@ export default [
         tooltip: "The <a href='https://docs.aws.amazon.com/AmazonS3/latest/userguide/mpuoverview.html'>S3 Multipart Upload API</a> is designed to improve the upload experience for larger objects (> 5GB).",
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.storage' },
-                    's3',
-                ],
+                '===': [{ var: 'data.storage' }, 's3'],
             },
         },
     },
@@ -63,10 +60,7 @@ export default [
         ],
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.useMultipartUpload' },
-                    true,
-                ],
+                '===': [{ var: 'data.useMultipartUpload' }, true],
             },
         },
     },
@@ -80,10 +74,7 @@ export default [
         tooltip: "See <a href='https://github.com/danialfarid/ng-file-upload#server-side' target='_blank'>https://github.com/danialfarid/ng-file-upload#server-side</a> for how to set up the server.",
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.storage' },
-                    'url',
-                ],
+                '===': [{ var: 'data.storage' }, 'url'],
             },
         },
     },
@@ -100,9 +91,7 @@ export default [
                     {
                         var: 'data.storage',
                     },
-                    [
-                        'indexeddb',
-                    ],
+                    ['indexeddb'],
                 ],
             },
         },
@@ -120,9 +109,7 @@ export default [
                     {
                         var: 'data.storage',
                     },
-                    [
-                        'indexeddb',
-                    ],
+                    ['indexeddb'],
                 ],
             },
         },
@@ -296,10 +283,7 @@ export default [
         weight: 31,
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.storage' },
-                    'url',
-                ],
+                '===': [{ var: 'data.storage' }, 'url'],
             },
         },
     },
@@ -313,10 +297,7 @@ export default [
         weight: 40,
         conditional: {
             json: {
-                '==': [
-                    { var: 'data.image' },
-                    true,
-                ],
+                '==': [{ var: 'data.image' }, true],
             },
         },
     },
@@ -338,10 +319,7 @@ export default [
         weight: 38,
         conditional: {
             json: {
-                '==': [
-                    { var: 'data.webcam' },
-                    true,
-                ],
+                '==': [{ var: 'data.webcam' }, true],
             },
         },
     },

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

@@ -29,9 +29,7 @@ export default class FormComponent extends Component {
         };
     }
     static savedValueTypes() {
-        return [
-            componentValueTypes.object,
-        ];
+        return [componentValueTypes.object];
     }
     init() {
         super.init();
@@ -215,7 +213,7 @@ export default class FormComponent extends Component {
     }
     render() {
         if (this.builderMode) {
-            return super.render(this.component.label || 'Nested form');
+            return super.render(this.t(this.component.label || 'nestedForm'));
         }
         const subform = this.subForm ? this.subForm.render() : this.renderTemplate('loading');
         return super.render(subform);
@@ -228,13 +226,13 @@ export default class FormComponent extends Component {
      */
     getValueAsString(value, options) {
         if (!value) {
-            return 'No data provided';
+            return this.t('noDataProvided');
         }
         if (!value.data && value._id) {
             return value._id;
         }
         if (!value.data || !Object.keys(value.data).length) {
-            return 'No data provided';
+            return this.t('noDataProvided');
         }
         if (options?.email) {
             let result = `
@@ -696,7 +694,7 @@ export default class FormComponent extends Component {
                 : {};
             this.subForm.setUrl(submissionUrl, { ...this.options, ...options });
             this.subForm.loadSubmission().catch((err) => {
-                console.error(`Unable to load subform submission ${submission._id}:`, err);
+                console.error(this.t('subformSubmissionLoadingError', { submissionId: submission._id }), err);
             });
         }
         else {

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

@@ -49,11 +49,7 @@ export default class HTMLComponent extends Component {
         return content;
     }
     get singleTags() {
-        return [
-            'br',
-            'img',
-            'hr',
-        ];
+        return ['br', 'img', 'hr'];
     }
     checkRefreshOn(changed) {
         super.checkRefreshOn(changed);

package/lib/mjs/components/number/Number.js

@@ -47,9 +47,7 @@ export default class NumberComponent extends Input {
     }
     static savedValueTypes(schema) {
         schema = schema || {};
-        return (getComponentSavedTypes(schema) || [
-            componentValueTypes.number,
-        ]);
+        return getComponentSavedTypes(schema) || [componentValueTypes.number];
     }
     constructor(...args) {
         super(...args);
@@ -70,7 +68,7 @@ export default class NumberComponent extends Input {
             if (this.component.thousandsSeparator ||
                 this.options.properties?.thousandsSeparator ||
                 this.options.thousandsSeparator) {
-                console.warn('In order for thousands separator to work properly, you must set the delimiter to true in the component json');
+                console.warn(this.t('noDelimiterSet'));
             }
             this.delimiter = '';
         }

package/lib/mjs/components/panel/editForm/Panel.edit.display.js

@@ -87,10 +87,7 @@ export default [
                 defaultValue: true,
                 customConditional({ data = {}, buildingForm = {} }) {
                     const formSettings = buildingForm.settings || {};
-                    return ![
-                        data.breadcrumb,
-                        formSettings.wizardBreadcrumbsType,
-                    ].includes('none');
+                    return ![data.breadcrumb, formSettings.wizardBreadcrumbsType].includes('none');
                 },
             },
             {
@@ -102,10 +99,7 @@ export default [
                 tooltip: 'Determines if the breadcrumb bar is clickable or not for visited tabs.',
                 conditional: {
                     json: {
-                        '===': [
-                            { var: 'data.breadcrumbClickable' },
-                            false,
-                        ],
+                        '===': [{ var: 'data.breadcrumbClickable' }, false],
                     },
                 },
             },
@@ -211,10 +205,7 @@ export default [
         input: true,
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.collapsible' },
-                    true,
-                ],
+                '===': [{ var: 'data.collapsible' }, true],
             },
         },
     },

package/lib/mjs/components/password/Password.js

@@ -21,10 +21,7 @@ export default class PasswordComponent extends TextFieldComponent {
         };
     }
     get defaultSchema() {
-        return _.omit(PasswordComponent.schema(), [
-            'protected',
-            'tableView',
-        ]);
+        return _.omit(PasswordComponent.schema(), ['protected', 'tableView']);
     }
     get inputInfo() {
         const info = super.inputInfo;

package/lib/mjs/components/radio/Radio.js

@@ -9,9 +9,7 @@ export default class RadioComponent extends ListComponent {
             inputType: 'radio',
             label: 'Radio',
             key: 'radio',
-            values: [
-                { label: '', value: '' },
-            ],
+            values: [{ label: '', value: '' }],
             data: {
                 url: '',
             },
@@ -61,23 +59,12 @@ export default class RadioComponent extends ListComponent {
             return types;
         }
         if (dataType === 'object') {
-            return [
-                object,
-                array,
-            ];
+            return [object, array];
         }
         if (componentValueTypes[dataType]) {
-            return [
-                componentValueTypes[dataType],
-            ];
+            return [componentValueTypes[dataType]];
         }
-        return [
-            boolean,
-            string,
-            number,
-            object,
-            array,
-        ];
+        return [boolean, string, number, object, array];
     }
     constructor(component, options, data) {
         super(component, options, data);
@@ -415,6 +402,9 @@ export default class RadioComponent extends ListComponent {
             if (changed) {
                 this.previousValue = this.dataValue;
             }
+            if (!this.visible) {
+                this.previousValue = this.emptyValue;
+            }
             return changed;
         }
         // If they clicked on the radio that is currently selected, it needs to reset the value.

package/lib/mjs/components/radio/editForm/Radio.edit.data.js

@@ -18,9 +18,7 @@ export default [
         },
         onChange(context) {
             if (context && context.flags && context.flags && context.flags.modified) {
-                context.data.values = [
-                    { label: '', value: '' },
-                ];
+                context.data.values = [{ label: '', value: '' }];
             }
         },
     },
@@ -32,9 +30,7 @@ export default [
         tooltip: 'The radio button values that can be picked for this field. Values are text submitted with the form data. Labels are text that appears next to the radio buttons on the form.',
         weight: 10,
         reorder: true,
-        defaultValue: [
-            { label: '', value: '' },
-        ],
+        defaultValue: [{ label: '', value: '' }],
         components: [
             {
                 label: 'Label',
@@ -73,10 +69,7 @@ export default [
         ],
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.dataSrc' },
-                    'values',
-                ],
+                '===': [{ var: 'data.dataSrc' }, 'values'],
             },
         },
     },
@@ -104,10 +97,7 @@ export default [
         key: 'template',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.dataSrc' },
-                    'url',
-                ],
+                '===': [{ var: 'data.dataSrc' }, 'url'],
             },
         },
     },

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

@@ -20,10 +20,7 @@ export default class ReCaptchaComponent extends Component {
     static get conditionOperatorsSettings() {
         return {
             ...super.conditionOperatorsSettings,
-            operators: [
-                'isEmpty',
-                'isNotEmpty',
-            ],
+            operators: ['isEmpty', 'isNotEmpty'],
         };
     }
     static get serverConditionSettings() {
@@ -50,7 +47,7 @@ export default class ReCaptchaComponent extends Component {
                 this.recaptchaApiReady = Formio.requireLibrary('googleRecaptcha', 'grecaptcha', recaptchaApiScriptUrl, true);
             }
             else {
-                console.warn('There is no Site Key specified in settings in form JSON');
+                console.warn(this.t('noSiteKey'));
             }
         }
     }
@@ -63,7 +60,7 @@ export default class ReCaptchaComponent extends Component {
     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');
+            console.warn(this.t('noSiteKey'));
             return;
         }
         if (!this.recaptchaApiReady) {