@formio/js 5.4.1 → 5.4.3

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

@@ -37,9 +37,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' }));
             });
         },
     });
@@ -58,6 +56,7 @@ class FileComponent extends Field_1.default {
             fileMinSize: '0KB',
             fileMaxSize: '1GB',
             uploadOnly: false,
+            options: {},
         }, ...extend);
     }
     static get builderInfo() {
@@ -74,16 +73,11 @@ class FileComponent extends Field_1.default {
         return FileComponent.conditionOperatorsSettings;
     }
     static get conditionOperatorsSettings() {
-        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: [
-                'isEmpty',
-                'isNotEmpty',
-            ] });
+        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEmpty', 'isNotEmpty'] });
     }
     static savedValueTypes(schema) {
         schema = schema || {};
-        return ((0, utils_1.getComponentSavedTypes)(schema) || [
-            utils_1.componentValueTypes.object,
-        ]);
+        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];
     }
     init() {
         super.init();
@@ -127,7 +121,7 @@ class FileComponent extends Field_1.default {
         return [];
     }
     getValueAsString(value, options) {
-        if ((options === null || options === void 0 ? void 0 : options.review) && !this.component.uploadOnly) {
+        if ((options === null || options === void 0 ? void 0 : options.review) && !this.component.uploadOnly && !(options === null || options === void 0 ? void 0 : options.pdf)) {
             return lodash_1.default.map(value, (val, index) => {
                 return `<a href="${val.url || '#'}" target="_blank" data-path='${this.path}' data-fileindex='${index}'>${val.originalName}</a>`;
             }).join(', ');
@@ -219,7 +213,7 @@ class FileComponent extends Field_1.default {
             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;
@@ -244,16 +238,14 @@ class FileComponent extends Field_1.default {
     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();
         });
@@ -428,13 +420,9 @@ class FileComponent extends Field_1.default {
                         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);
                         });
@@ -454,13 +442,9 @@ class FileComponent extends Field_1.default {
                         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);
                         });
@@ -631,7 +615,7 @@ class FileComponent extends Field_1.default {
         if (!target.id) {
             return;
         }
-        const [action, id,] = target.id.split('-');
+        const [action, id] = target.id.split('-');
         if (!action || !id || !this.actions[action]) {
             return;
         }
@@ -652,11 +636,13 @@ class FileComponent extends Field_1.default {
             originalName: escapedFileName,
             fileKey: this.component.fileKey || 'file',
             storage: this.component.storage,
-            options: this.component.options,
+            options: this.component.storage === 'url'
+                ? (this.component.urlRequestOptions || this.component.options)
+                : this.component.options,
             file,
             size: file.size,
             status: 'info',
-            message: this.t('Processing file. Please wait...'),
+            message: this.t('waitFileProcessing'),
             hash: '',
         };
     }
@@ -687,7 +673,7 @@ class FileComponent extends Field_1.default {
         return fileWithSameNameUploaded || fileWithSameNameUploading
             ? {
                 status: 'error',
-                message: this.t(`File with the same name is already ${fileWithSameNameUploading ? 'being ' : ''}uploaded`),
+                message: this.t(fileWithSameNameUploading ? 'fileWithDuplicatedNameInProgress' : 'fileWithDuplicatedNameLoaded'),
             }
             : {};
     }
@@ -696,7 +682,7 @@ class FileComponent extends Field_1.default {
         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,
                 }),
             };
@@ -709,7 +695,7 @@ class FileComponent extends Field_1.default {
             if (!interpolatedMinSize) {
                 return {
                     status: 'error',
-                    message: 'Please, check the entered parameters',
+                    message: this.t('checkEnteredParameters'),
                 };
             }
             if (!this.validateMinSize(file, interpolatedMinSize)) {
@@ -727,7 +713,7 @@ class FileComponent extends Field_1.default {
             if (!interpolatedMaxSize) {
                 return {
                     status: 'error',
-                    message: 'Please, check the entered parameters',
+                    message: this.t('checkEnteredParameters'),
                 };
             }
             if (!this.validateMaxSize(file, interpolatedMaxSize)) {
@@ -746,7 +732,7 @@ class FileComponent extends Field_1.default {
         return !fileService
             ? {
                 status: 'error',
-                message: this.t('File Service not provided.'),
+                message: this.t('noFileService'),
             }
             : {};
     }
@@ -778,11 +764,7 @@ class FileComponent extends Field_1.default {
                     ]
                     : element.component.submissionAccess;
                 groupPermissions.forEach((permission) => {
-                    groupKey = [
-                        'admin',
-                        'write',
-                        'create',
-                    ].includes(permission.type)
+                    groupKey = ['admin', 'write', 'create'].includes(permission.type)
                         ? element.component.key
                         : null;
                 });
@@ -806,7 +788,7 @@ class FileComponent extends Field_1.default {
                     this.fileDropHidden = false;
                     return {
                         status: 'error',
-                        message: this.t('File processing has been failed.'),
+                        message: this.t('fileProcessingFailed'),
                     };
                 }
                 finally {
@@ -842,7 +824,7 @@ class FileComponent extends Field_1.default {
                 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(Object.assign(Object.assign({}, fileToSync), { message: fileToSync.message, file: processedFile.file || file, url: this.interpolate(this.component.url, { file: fileToSync }), groupPermissions, groupResourceId: groupKey ? this.currentForm.submission.data[groupKey]._id : null }));
         });
@@ -855,9 +837,7 @@ class FileComponent extends Field_1.default {
             }
             if (this.component.storage && files && files.length) {
                 this.fileDropHidden = true;
-                return Promise.all([
-                    ...files,
-                ].map((file) => __awaiter(this, void 0, void 0, function* () {
+                return Promise.all([...files].map((file) => __awaiter(this, void 0, void 0, function* () {
                     yield this.prepareFileToUpload(file);
                     this.redraw();
                 })));
@@ -877,8 +857,8 @@ class FileComponent extends Field_1.default {
     }
     prepareFileToDelete(fileInfo) {
         this.filesToSync.filesToDelete.push(Object.assign(Object.assign({}, 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);
         this.redraw();
@@ -891,15 +871,11 @@ class FileComponent extends Field_1.default {
     }
     deleteFile(fileInfo) {
         return __awaiter(this, void 0, void 0, function* () {
-            const { options = {} } = this.component;
+            const options = this.component.storage === 'url'
+                ? (this.component.urlRequestOptions || this.component.options || {})
+                : (this.component.options || {});
             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 yield fileService.deleteFile(fileInfo, options);
@@ -925,7 +901,7 @@ class FileComponent extends Field_1.default {
                     }
                     yield this.deleteFile(fileToSync);
                     fileToSync.status = 'success';
-                    fileToSync.message = this.t('Succefully removed');
+                    fileToSync.message = this.t('succefullyRemoved');
                 }
                 catch (response) {
                     fileToSync.status = 'error';
@@ -995,14 +971,14 @@ class FileComponent extends Field_1.default {
                             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 = yield pendingFile.fileInfoProm;
                     }
@@ -1011,9 +987,9 @@ class FileComponent extends Field_1.default {
                         this.pendingfiles.push({ name: fileToSync.name, fileInfoProm: promInfo });
                         fileInfo = yield 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));
@@ -1025,8 +1001,8 @@ class FileComponent extends Field_1.default {
                         typeof response === 'string'
                             ? response
                             : response.type === 'abort'
-                                ? this.t('Request was aborted')
-                                : response.toString();
+                                ? this.t('requestAborted')
+                                : response.message || response.toString();
                     this.emit('fileUploadingEnd', Promise.reject(response));
                     this.emit(lodash_1.default.get(response, 'type') === 'abort' ? 'fileUploadCanceled' : 'fileUploadError', {
                         fileToSync,
@@ -1036,9 +1012,11 @@ class FileComponent extends Field_1.default {
                 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 {
@@ -1055,7 +1033,7 @@ class FileComponent extends Field_1.default {
             this.fileDropHidden = true;
             this.redraw();
             try {
-                const [filesToDelete = [], filesToUpload = [],] = yield Promise.all([
+                const [filesToDelete = [], filesToUpload = []] = yield Promise.all([
                     this.delete(),
                     this.upload(),
                 ]);
@@ -1092,10 +1070,12 @@ class FileComponent extends Field_1.default {
         });
     }
     getFile(fileInfo) {
-        const { options = {} } = this.component;
+        const options = this.component.storage === 'url'
+            ? (this.component.urlRequestOptions || this.component.options || {})
+            : (this.component.options || {});
         const { fileService } = this;
         if (!fileService) {
-            return alert('File Service not provided');
+            return alert(this.t('noFileService'));
         }
         if (this.component.privateDownload) {
             fileInfo.private = true;
@@ -1104,10 +1084,7 @@ class FileComponent extends Field_1.default {
             .downloadFile(fileInfo, options)
             .then((file) => {
             if (file) {
-                if ([
-                    'base64',
-                    'indexeddb',
-                ].includes(file.storage)) {
+                if (['base64', 'indexeddb'].includes(file.storage)) {
                     (0, downloadjs_1.default)(file.url, file.originalName || file.name, file.type);
                 }
                 else {
@@ -1136,7 +1113,7 @@ class FileComponent extends Field_1.default {
                     return Promise.resolve();
                 }
                 yield 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/cjs/components/file/editForm/File.edit.display.js

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

package/lib/cjs/components/file/editForm/File.edit.file.d.ts

@@ -131,11 +131,10 @@ declare const _default: ({
     values?: undefined;
 } | {
     type: string;
-    input: boolean;
     key: string;
     label: string;
     weight: number;
-    placeholder: string;
+    input: boolean;
     conditional: {
         json: {
             in: (string[] | {
@@ -145,12 +144,19 @@ declare const _default: ({
             '=='?: undefined;
         };
     };
+    components: {
+        type: string;
+        input: boolean;
+        key: string;
+        label: string;
+        placeholder: string;
+    }[];
+    placeholder?: undefined;
     tooltip?: undefined;
     valueProperty?: undefined;
     dataSrc?: undefined;
     data?: undefined;
     tableView?: undefined;
-    components?: undefined;
     rows?: undefined;
     editor?: undefined;
     as?: undefined;

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

@@ -33,10 +33,7 @@ exports.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'],
             },
         },
     },
@@ -68,10 +65,7 @@ exports.default = [
         ],
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.useMultipartUpload' },
-                    true,
-                ],
+                '===': [{ var: 'data.useMultipartUpload' }, true],
             },
         },
     },
@@ -85,56 +79,46 @@ exports.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'],
             },
         },
     },
     {
-        type: 'textfield',
-        input: true,
-        key: 'options.indexeddb',
-        label: 'Database',
+        type: 'container',
+        key: 'options',
+        label: 'IndexedDB options',
         weight: 10,
-        placeholder: 'Enter the indexeddb database name',
-        conditional: {
-            json: {
-                in: [
-                    {
-                        var: 'data.storage',
-                    },
-                    [
-                        'indexeddb',
-                    ],
-                ],
-            },
-        },
-    },
-    {
-        type: 'textfield',
         input: true,
-        label: 'Table',
-        key: 'options.indexeddbTable',
-        weight: 10,
-        placeholder: 'Enter the name for indexeddb table',
         conditional: {
             json: {
                 in: [
                     {
                         var: 'data.storage',
                     },
-                    [
-                        'indexeddb',
-                    ],
+                    ['indexeddb'],
                 ],
             },
         },
+        components: [
+            {
+                type: 'textfield',
+                input: true,
+                key: 'indexeddb',
+                label: 'Database',
+                placeholder: 'Enter the indexeddb database name',
+            },
+            {
+                type: 'textfield',
+                input: true,
+                key: 'indexeddbTable',
+                label: 'Table',
+                placeholder: 'Enter the name for indexeddb table',
+            },
+        ],
     },
     {
         type: 'textarea',
-        key: 'options',
+        key: 'urlRequestOptions',
         label: 'Custom request options',
         tooltip: 'Pass your custom xhr options(optional)',
         rows: 5,
@@ -301,10 +285,7 @@ exports.default = [
         weight: 31,
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.storage' },
-                    'url',
-                ],
+                '===': [{ var: 'data.storage' }, 'url'],
             },
         },
     },
@@ -318,10 +299,7 @@ exports.default = [
         weight: 40,
         conditional: {
             json: {
-                '==': [
-                    { var: 'data.image' },
-                    true,
-                ],
+                '==': [{ var: 'data.image' }, true],
             },
         },
     },
@@ -343,10 +321,7 @@ exports.default = [
         weight: 38,
         conditional: {
             json: {
-                '==': [
-                    { var: 'data.webcam' },
-                    true,
-                ],
+                '==': [{ var: 'data.webcam' }, true],
             },
         },
     },

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

@@ -34,9 +34,7 @@ class FormComponent extends Component_1.default {
         };
     }
     static savedValueTypes() {
-        return [
-            utils_1.componentValueTypes.object,
-        ];
+        return [utils_1.componentValueTypes.object];
     }
     init() {
         super.init();
@@ -222,7 +220,7 @@ class FormComponent extends Component_1.default {
     }
     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);
@@ -235,13 +233,13 @@ class FormComponent extends Component_1.default {
      */
     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 === null || options === void 0 ? void 0 : options.email) {
             let result = `
@@ -710,7 +708,7 @@ class FormComponent extends Component_1.default {
                 : {};
             this.subForm.setUrl(submissionUrl, Object.assign(Object.assign({}, 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/cjs/components/html/HTML.d.ts

@@ -12,7 +12,7 @@ export default class HTMLComponent extends Component {
     get content(): any;
     get singleTags(): string[];
     checkRefreshOn(changed: any): void;
-    renderContent(): any;
+    renderContent(content?: any): any;
     render(): string;
     get dataReady(): any;
     attach(element: any): Promise<void>;

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

@@ -54,11 +54,7 @@ class HTMLComponent extends Component_1.default {
         return content;
     }
     get singleTags() {
-        return [
-            'br',
-            'img',
-            'hr',
-        ];
+        return ['br', 'img', 'hr'];
     }
     checkRefreshOn(changed) {
         super.checkRefreshOn(changed);
@@ -75,7 +71,7 @@ class HTMLComponent extends Component_1.default {
             this.setContent(this.element, this.renderContent());
         }
     }
-    renderContent() {
+    renderContent(content = this.content) {
         const submission = lodash_1.default.get(this.root, 'submission', {});
         return this.renderTemplate('html', {
             component: this.component,
@@ -91,12 +87,12 @@ class HTMLComponent extends Component_1.default {
                     }),
                 };
             }),
-            content: this.content,
+            content,
             singleTags: this.singleTags,
         });
     }
     render() {
-        return super.render(this.renderContent());
+        return super.render(this.renderContent(''));
     }
     get dataReady() {
         var _a;
@@ -104,11 +100,13 @@ class HTMLComponent extends Component_1.default {
     }
     attach(element) {
         this.loadRefs(element, { html: 'single' });
-        this.dataReady.then(() => {
+        const setHtmlContent = () => {
             if (this.refs.html) {
                 this.setContent(this.refs.html, this.content);
             }
-        });
+        };
+        setHtmlContent();
+        this.dataReady.then(setHtmlContent);
         return super.attach(element);
     }
 }

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

@@ -48,9 +48,7 @@ class NumberComponent extends Input_1.default {
     }
     static savedValueTypes(schema) {
         schema = schema || {};
-        return ((0, utils_1.getComponentSavedTypes)(schema) || [
-            utils_1.componentValueTypes.number,
-        ]);
+        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.number];
     }
     constructor(...args) {
         var _a, _b, _c;
@@ -72,7 +70,7 @@ class NumberComponent extends Input_1.default {
             if (this.component.thousandsSeparator ||
                 ((_c = this.options.properties) === null || _c === void 0 ? void 0 : _c.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 = '';
         }
@@ -190,7 +188,11 @@ class NumberComponent extends Input_1.default {
             return null;
         }
         const val = this.refs.input[index].value;
-        return val && val !== '-_' ? this.parseNumber(val) : null;
+        const result = val && val !== '-_' ? this.parseNumber(val) : null;
+        if (lodash_1.default.isNaN(result)) {
+            return null;
+        }
+        return result;
     }
     setValueAt(index, value, flags = {}) {
         return super.setValueAt(index, this.formatValue(this.parseValue(value)), flags);