@formio/js 5.4.0 → 5.4.2

package/lib/mjs/components/tabs/Tabs.js

@@ -89,10 +89,7 @@ export default class TabsComponent extends NestedComponent {
             [this.tabKey]: 'multiple',
             [this.tabLikey]: 'multiple',
         });
-        [
-            'change',
-            'error',
-        ].forEach((event) => this.on(event, this.handleTabsValidation.bind(this)));
+        ['change', 'error'].forEach((event) => this.on(event, this.handleTabsValidation.bind(this)));
         const superAttach = super.attach(element);
         this.refs[this.tabLinkKey].forEach((tabLink, index) => {
             this.addEventListener(tabLink, 'click', (event) => {
@@ -182,12 +179,7 @@ export default class TabsComponent extends NestedComponent {
             const element = Array.isArray(elements) || elements instanceof NodeList ? this.element : elements;
             super.clearErrorClasses(element);
         }
-        elements =
-            Array.isArray(elements) || elements instanceof NodeList
-                ? elements
-                : [
-                    elements,
-                ];
+        elements = Array.isArray(elements) || elements instanceof NodeList ? elements : [elements];
         elements.forEach((element) => {
             this.removeClass(element, 'is-invalid');
             this.removeClass(element, 'tab-error');
@@ -201,19 +193,12 @@ export default class TabsComponent extends NestedComponent {
         this.clearErrorClasses(this.refs[this.tabLinkKey]);
         const invalidTabsIndexes = this.tabs.reduce((invalidTabs, tab, tabIndex) => {
             const hasComponentWithError = tab.some((comp) => !!comp.error);
-            return hasComponentWithError
-                ? [
-                    ...invalidTabs,
-                    tabIndex,
-                ]
-                : invalidTabs;
+            return hasComponentWithError ? [...invalidTabs, tabIndex] : invalidTabs;
         }, []);
         if (!invalidTabsIndexes.length) {
             return;
         }
-        const invalidTabs = [
-            ...this.refs[this.tabLinkKey],
-        ].filter((_, tabIndex) => invalidTabsIndexes.includes(tabIndex));
+        const invalidTabs = [...this.refs[this.tabLinkKey]].filter((_, tabIndex) => invalidTabsIndexes.includes(tabIndex));
         this.setErrorClasses(invalidTabs);
     }
 }

package/lib/mjs/components/tabs/editForm/Tabs.edit.display.js

@@ -70,9 +70,7 @@ export default [
                 label: 'Key',
                 allowCalculateOverride: true,
                 calculateValue: {
-                    _camelCase: [
-                        { var: 'row.label' },
-                    ],
+                    _camelCase: [{ var: 'row.label' }],
                 },
             },
         ],

package/lib/mjs/components/tags/Tags.js

@@ -28,11 +28,7 @@ export default class TagsComponent extends Input {
     static get conditionOperatorsSettings() {
         return {
             ...super.conditionOperatorsSettings,
-            operators: [
-                ...super.conditionOperatorsSettings.operators,
-                'includes',
-                'notIncludes',
-            ],
+            operators: [...super.conditionOperatorsSettings.operators, 'includes', 'notIncludes'],
         };
     }
     static savedValueTypes(schema) {
@@ -85,7 +81,7 @@ export default class TagsComponent extends Input {
             shadowRoot: this.root ? this.root.shadowRoot : null,
             placeholder: hasPlaceholder,
             placeholderValue: hasPlaceholder
-                ? this.t(this.component.placeholder, { _userInput: true })
+                ? this.sanitize(this.t(this.component.placeholder, { _userInput: true }), true)
                 : null,
         });
         this.choices.itemList.element.tabIndex = element.tabIndex;
@@ -107,9 +103,7 @@ export default class TagsComponent extends Input {
                     this.choices.clearInput();
                 }
                 else {
-                    this.choices.setValue([
-                        value,
-                    ]);
+                    this.choices.setValue([value]);
                     this.choices.clearInput();
                     this.choices.hideDropdown(true);
                     this.updateValue(null, {
@@ -144,11 +138,7 @@ export default class TagsComponent extends Input {
                 if (typeof dataValue === 'string') {
                     dataValue = dataValue.split(this.delimiter).filter((result) => result);
                 }
-                const value = Array.isArray(dataValue)
-                    ? dataValue
-                    : [
-                        dataValue,
-                    ];
+                const value = Array.isArray(dataValue) ? dataValue : [dataValue];
                 this.choices.setValue(value.map((val) => this.sanitize(val, this.shouldSanitizeValue)));
             }
         }

package/lib/mjs/components/textarea/TextArea.js

@@ -144,7 +144,7 @@ export default class TextAreaComponent extends TextFieldComponent {
                 case 'quill':
                     // Normalize the configurations for quill.
                     if (settings.hasOwnProperty('toolbarGroups') || settings.hasOwnProperty('toolbar')) {
-                        console.warn('The WYSIWYG settings are configured for CKEditor. For this renderer, you will need to use configurations for the Quill Editor. See https://quilljs.com/docs/configuration for more information.');
+                        console.warn(this.t('needConfigurationForQuill'));
                         settings = this.wysiwygDefault.quill;
                     }
                     // Add the quill editor.
@@ -219,7 +219,7 @@ export default class TextAreaComponent extends TextFieldComponent {
     imageHandler(moduleInstance, range, files) {
         const quillInstance = moduleInstance.quill;
         if (!files || !files.length) {
-            console.warn('No files selected');
+            console.warn(this.t('noFilesSelected'));
             return;
         }
         quillInstance.enable(false);
@@ -245,7 +245,7 @@ export default class TextAreaComponent extends TextFieldComponent {
             }), Quill.sources.USER);
         })
             .catch((error) => {
-            console.warn('Quill image upload failed');
+            console.warn(this.t('quillImageUploadFailed'));
             console.warn(error);
             quillInstance.enable(true);
         });
@@ -302,15 +302,8 @@ export default class TextAreaComponent extends TextFieldComponent {
     }
     setContent(element, content, forceSanitize) {
         super.setContent(element, content, forceSanitize, {
-            addAttr: [
-                'allow',
-                'allowfullscreen',
-                'frameborder',
-                'scrolling',
-            ],
-            addTags: [
-                'iframe',
-            ],
+            addAttr: ['allow', 'allowfullscreen', 'frameborder', 'scrolling'],
+            addTags: ['iframe'],
         });
     }
     setReadOnlyValue(value, index) {
@@ -551,7 +544,7 @@ export default class TextAreaComponent extends TextFieldComponent {
                     this.element.scrollIntoView();
                 })
                     .catch((err) => {
-                    console.warn('An editor did not initialize properly when trying to focus:', err);
+                    console.warn(this.t('editorFocusError'), err);
                 });
                 break;
             }
@@ -562,7 +555,7 @@ export default class TextAreaComponent extends TextFieldComponent {
                     this.element.scrollIntoView();
                 })
                     .catch((err) => {
-                    console.warn('An editor did not initialize properly when trying to focus:', err);
+                    console.warn(this.t('editorFocusError'), err);
                 });
                 break;
             }
@@ -572,7 +565,7 @@ export default class TextAreaComponent extends TextFieldComponent {
                     this.editors[0].focus();
                 })
                     .catch((err) => {
-                    console.warn('An editor did not initialize properly when trying to focus:', err);
+                    console.warn(this.t('editorFocusError'), err);
                 });
                 break;
             }

package/lib/mjs/components/textarea/editForm/TextArea.edit.display.js

@@ -56,10 +56,7 @@ export default [
         weight: 415,
         conditional: {
             json: {
-                '==': [
-                    { var: 'data.editor' },
-                    '',
-                ],
+                '==': [{ var: 'data.editor' }, ''],
             },
         },
     },
@@ -73,16 +70,10 @@ export default [
             json: {
                 or: [
                     {
-                        '===': [
-                            { var: 'data.editor' },
-                            'quill',
-                        ],
+                        '===': [{ var: 'data.editor' }, 'quill'],
                     },
                     {
-                        '===': [
-                            { var: 'data.editor' },
-                            'ckeditor',
-                        ],
+                        '===': [{ var: 'data.editor' }, 'ckeditor'],
                     },
                 ],
             },
@@ -108,10 +99,7 @@ export default [
         },
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.isUploadEnabled' },
-                    true,
-                ],
+                '===': [{ var: 'data.isUploadEnabled' }, true],
             },
         },
     },
@@ -125,10 +113,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.uploadStorage' },
-                    'url',
-                ],
+                '===': [{ var: 'data.uploadStorage' }, 'url'],
             },
         },
     },
@@ -165,10 +150,7 @@ export default [
         weight: 415.5,
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.isUploadEnabled' },
-                    true,
-                ],
+                '===': [{ var: 'data.isUploadEnabled' }, true],
             },
         },
     },
@@ -185,22 +167,13 @@ export default [
             json: {
                 and: [
                     {
-                        '===': [
-                            { var: 'data.editor' },
-                            'quill',
-                        ],
+                        '===': [{ var: 'data.editor' }, 'quill'],
                     },
                     {
-                        '===': [
-                            { var: 'data.isUploadEnabled' },
-                            true,
-                        ],
+                        '===': [{ var: 'data.isUploadEnabled' }, true],
                     },
                     {
-                        '===': [
-                            { var: 'data.uploadStorage' },
-                            'url',
-                        ],
+                        '===': [{ var: 'data.uploadStorage' }, 'url'],
                     },
                 ],
             },
@@ -225,16 +198,10 @@ export default [
             json: {
                 or: [
                     {
-                        '===': [
-                            { var: 'data.editor' },
-                            'quill',
-                        ],
+                        '===': [{ var: 'data.editor' }, 'quill'],
                     },
                     {
-                        '===': [
-                            { var: 'data.editor' },
-                            'ace',
-                        ],
+                        '===': [{ var: 'data.editor' }, 'ace'],
                     },
                 ],
             },
@@ -257,22 +224,13 @@ export default [
             json: {
                 or: [
                     {
-                        '===': [
-                            { var: 'data.editor' },
-                            'ace',
-                        ],
+                        '===': [{ var: 'data.editor' }, 'ace'],
                     },
                     {
-                        '===': [
-                            { var: 'data.editor' },
-                            'ckeditor',
-                        ],
+                        '===': [{ var: 'data.editor' }, 'ckeditor'],
                     },
                     {
-                        '===': [
-                            { var: 'data.editor' },
-                            'quill',
-                        ],
+                        '===': [{ var: 'data.editor' }, 'quill'],
                     },
                 ],
             },

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

@@ -56,9 +56,7 @@ export default class TextFieldComponent extends Input {
         };
     }
     static savedValueTypes(schema) {
-        return (FormioUtils.getComponentSavedTypes(schema) || [
-            FormioUtils.componentValueTypes.string,
-        ]);
+        return FormioUtils.getComponentSavedTypes(schema) || [FormioUtils.componentValueTypes.string];
     }
     get defaultSchema() {
         return TextFieldComponent.schema();
@@ -126,7 +124,9 @@ export default class TextFieldComponent extends Input {
                 defaultValue = defaultValue[0];
             }
             // Extract string if defaultValue is a mask object to prevent nesting
-            if (defaultValue && typeof defaultValue === 'object' && defaultValue.hasOwnProperty('value')) {
+            if (defaultValue &&
+                typeof defaultValue === 'object' &&
+                defaultValue.hasOwnProperty('value')) {
                 defaultValue = defaultValue.value;
             }
             value.value = defaultValue;

package/lib/mjs/components/textfield/editForm/TextField.edit.display.js

@@ -69,10 +69,7 @@ export default [
         },
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.type' },
-                    'textfield',
-                ],
+                '===': [{ var: 'data.type' }, 'textfield'],
             },
         },
     },
@@ -101,10 +98,7 @@ export default [
         as: 'json',
         conditional: {
             json: {
-                '!==': [
-                    { var: 'data.widget.type' },
-                    'input',
-                ],
+                '!==': [{ var: 'data.widget.type' }, 'input'],
             },
         },
     },

package/lib/mjs/components/time/Time.js

@@ -65,10 +65,7 @@ export default class TimeComponent extends TextFieldComponent {
     }
     removeValue(index) {
         this.rawData = Array.isArray(this.rawData)
-            ? [
-                ...this.rawData.slice(0, index),
-                ...this.rawData.slice(index + 1),
-            ]
+            ? [...this.rawData.slice(0, index), ...this.rawData.slice(index + 1)]
             : this.emptyValue;
         super.removeValue(index);
     }

package/lib/mjs/components/time/editForm/Time.edit.display.js

@@ -26,10 +26,7 @@ export default [
         defaultValue: 'HH:mm',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.inputType' },
-                    'text',
-                ],
+                '===': [{ var: 'data.inputType' }, 'text'],
             },
         },
     },

package/lib/mjs/formio.form.js

@@ -11,6 +11,7 @@ import Utils, { DefaultEvaluator, Evaluator, registerEvaluator } from './utils';
 import Licenses from './licenses';
 import EventEmitter from './EventEmitter';
 import Webform from './Webform';
+import { I18n } from './utils/i18n';
 Formio.loadModules = (path = `${Formio.getApiUrl()}/externalModules.js`, name = 'externalModules') => {
     Formio.requireLibrary(name, name, path, true).then((modules) => {
         Formio.use(modules);
@@ -88,6 +89,9 @@ export function registerModule(mod, defaultFn = null, options = {}) {
                     ? Formio.Licenses.addLicense(mod.library, options.license)
                     : Formio.Licenses.removeLicense(mod.library);
                 break;
+            case 'translations':
+                I18n.setDefaultTranslations(mod.translations);
+                break;
             default:
                 if (defaultFn) {
                     defaultFn(key, mod);
@@ -102,11 +106,7 @@ export function registerModule(mod, defaultFn = null, options = {}) {
  */
 export function useModule(defaultFn = null) {
     return (plugins, options = {}) => {
-        plugins = _.isArray(plugins)
-            ? plugins
-            : [
-                plugins
-            ];
+        plugins = _.isArray(plugins) ? plugins : [plugins];
         plugins.forEach((plugin) => {
             if (Array.isArray(plugin)) {
                 plugin.forEach((p) => registerModule(p, defaultFn, options));
@@ -126,4 +126,4 @@ export function useModule(defaultFn = null) {
 Formio.use = useModule();
 export { Formio as FormioCore } from './Formio';
 // Export the components.
-export { Components, Displays, Providers, Widgets, Templates, Utils, Form, Formio, Licenses, EventEmitter, Webform, DefaultEvaluator, FormOptions };
+export { Components, Displays, Providers, Widgets, Templates, Utils, Form, Formio, Licenses, EventEmitter, Webform, DefaultEvaluator, FormOptions, };

package/lib/mjs/package.json

@@ -1,5 +1,5 @@
 {
     "type": "module",
-    "version": "5.4.0"
+    "version": "5.4.2"
     
 }

package/lib/mjs/providers/address/AddressProvider.js

@@ -88,7 +88,7 @@ export class AddressProvider {
      */
     serialize(params) {
         return _.toPairs(params)
-            .map(([key, value,]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
+            .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
             .join('&');
     }
     /**

package/lib/mjs/providers/address/GoogleAddressProvider.js

@@ -88,7 +88,7 @@ export class GoogleAddressProvider extends AddressProvider {
   
      */
     setAutocompleteOptions() {
-        let options = _.get(this.options, 'params.autocompleteOptions', {});
+        let options = _.get(this.options, 'autocompleteOptions', {});
         if (!_.isObject(options)) {
             options = {};
         }
@@ -124,9 +124,7 @@ export class GoogleAddressProvider extends AddressProvider {
             if (countryCodes[region]) {
                 region = countryCodes[region];
             }
-            _.set(providerOptions, 'params.autocompleteOptions.componentRestrictions.country', [
-                region,
-            ]);
+            _.set(providerOptions, 'params.autocompleteOptions.componentRestrictions.country', [region]);
         }
     }
     /**

package/lib/mjs/providers/processor/fileProcessor.js

@@ -20,9 +20,7 @@ const fileProcessor = (formio, config) => (file, options) => new Promise((resolv
     xhr.onload = () => {
         if (xhr.status >= 200 && xhr.status < 300) {
             const mimetype = xhr.getResponseHeader('Content-Type') || file.type;
-            resolve(new File([
-                xhr.response,
-            ], file.name, { type: mimetype }));
+            resolve(new File([xhr.response], file.name, { type: mimetype }));
         }
         else {
             reject(xhr.response || 'Unable to process file');

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

@@ -15,10 +15,7 @@ function azure(formio) {
             }, file, fileName, dir, progressCallback, groupPermissions, groupId, abortCallback).then((response) => {
                 return {
                     storage: 'azure',
-                    name: XHR.path([
-                        dir,
-                        fileName,
-                    ]),
+                    name: XHR.path([dir, fileName]),
                     size: file.size,
                     type: file.type,
                     groupPermissions,
@@ -30,10 +27,12 @@ function azure(formio) {
         downloadFile(file) {
             return formio.makeRequest('file', `${formio.formUrl}/storage/azure?name=${XHR.trim(file.name)}`, 'GET');
         },
-        deleteFile(fileInfo, options) {
+        deleteFile(fileInfo, _options) {
             const name = XHR.trim(fileInfo.name);
             const key = XHR.trim(fileInfo.key);
-            return formio.makeRequest('', `${formio.formUrl}/storage/azure?name=${encodeURIComponent(name)}&key=${encodeURIComponent(key)}`, 'delete').then((response) => {
+            return formio
+                .makeRequest('', `${formio.formUrl}/storage/azure?name=${encodeURIComponent(name)}&key=${encodeURIComponent(key)}`, 'delete')
+                .then((response) => {
                 return {
                     success: true,
                     key: response?.key || key,

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

@@ -26,9 +26,7 @@ function indexeddb() {
                 const reader = new FileReader();
                 return new Promise((resolve, reject) => {
                     reader.onload = () => {
-                        const blobObject = new Blob([
-                            file,
-                        ], { type: file.type });
+                        const blobObject = new Blob([file], { type: file.type });
                         const id = uuidv4(blobObject);
                         const data = {
                             id,
@@ -38,9 +36,7 @@ function indexeddb() {
                             type: file.type,
                             url,
                         };
-                        const trans = db.transaction([
-                            options.indexeddbTable,
-                        ], 'readwrite');
+                        const trans = db.transaction([options.indexeddbTable], 'readwrite');
                         const addReq = trans.objectStore(options.indexeddbTable).put(data, id);
                         addReq.onerror = function (e) {
                             console.log('error storing data');
@@ -73,16 +69,12 @@ function indexeddb() {
                 };
             }).then((db) => {
                 return new Promise((resolve, reject) => {
-                    const trans = db.transaction([
-                        options.indexeddbTable,
-                    ], 'readonly');
+                    const trans = db.transaction([options.indexeddbTable], 'readonly');
                     const store = trans.objectStore(options.indexeddbTable).get(file.id);
                     store.onsuccess = () => {
                         trans.oncomplete = () => {
                             const result = store.result;
-                            const dbFile = new File([
-                                store.result.data,
-                            ], file.name, {
+                            const dbFile = new File([store.result.data], file.name, {
                                 type: store.result.type,
                             });
                             const reader = new FileReader();
@@ -112,9 +104,7 @@ function indexeddb() {
                 };
             }).then((db) => {
                 return new Promise((resolve, reject) => {
-                    const trans = db.transaction([
-                        options.indexeddbTable,
-                    ], 'readwrite');
+                    const trans = db.transaction([options.indexeddbTable], 'readwrite');
                     const store = trans.objectStore(options.indexeddbTable).delete(file.id);
                     store.onsuccess = () => {
                         trans.oncomplete = () => {

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

@@ -15,11 +15,7 @@ function s3(formio) {
         async uploadFile(file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback, multipartOptions) {
             const xhrCallback = async (xhr, response, abortCallback) => {
                 response.data.fileName = fileName;
-                response.data.key = XHR.path([
-                    response.data.key,
-                    dir,
-                    fileName,
-                ]);
+                response.data.key = XHR.path([response.data.key, dir, fileName]);
                 if (response.signed) {
                     if (multipartOptions && Array.isArray(response.signed)) {
                         // patch abort callback
@@ -31,11 +27,7 @@ function s3(formio) {
                         }
                         try {
                             const parts = await this.uploadParts(file, response.signed, response.data.headers, response.partSizeActual, multipartOptions, abortSignal);
-                            await withRetries(this.completeMultipartUpload, [
-                                response,
-                                parts,
-                                multipartOptions,
-                            ], 3);
+                            await withRetries(this.completeMultipartUpload, [response, parts, multipartOptions], 3);
                             return;
                         }
                         catch (err) {
@@ -73,10 +65,7 @@ function s3(formio) {
                 name: fileName,
                 bucket: response.bucket,
                 key: response.data.key,
-                url: XHR.path([
-                    response.url,
-                    response.data.key,
-                ]),
+                url: XHR.path([response.url, response.data.key]),
                 acl: response.data.acl,
                 size: file.size,
                 type: file.type,

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

@@ -24,45 +24,32 @@ const XHR = {
             .join('/');
     },
     async upload(formio, type, xhrCallback, file, fileName, dir, progressCallback, groupPermissions, groupId, abortCallback, multipartOptions) {
-        // make request to Form.io server
-        const token = formio.getToken();
-        let response;
+        // Use makeRequest so portal plugins (e.g. x-remote-token) are applied.
+        let serverResponse;
         try {
-            response = await fetch(`${formio.formUrl}/storage/${type}`, {
-                method: 'POST',
-                headers: {
-                    Accept: 'application/json',
-                    'Content-Type': 'application/json; charset=UTF-8',
-                    ...(token ? { 'x-jwt-token': token } : {}),
-                },
-                body: JSON.stringify({
-                    name: XHR.path([
-                        dir,
-                        fileName,
-                    ]),
-                    size: file.size,
-                    type: file.type,
-                    groupPermissions,
-                    groupId,
-                    multipart: multipartOptions,
-                }),
+            serverResponse = await formio.makeRequest('file', `${formio.formUrl}/storage/${type}`, 'POST', {
+                name: XHR.path([dir, fileName]),
+                size: file.size,
+                type: file.type,
+                groupPermissions,
+                groupId,
+                multipart: multipartOptions,
             });
         }
         catch (err) {
-            // only throws on network errors
-            err.networkError = true;
-            throw err;
-        }
-        if (!response.ok) {
-            if (response.status === 504) {
-                const error = new Error('Network request failed');
+            if (err?.networkError) {
+                throw err;
+            }
+            if (err instanceof Error) {
+                throw err;
+            }
+            const message = typeof err === 'string' ? err : err?.message || err?.error;
+            const error = new Error(message || 'Unable to sign file.');
+            if (err?.status === 504) {
                 error.networkError = true;
-                throw error;
             }
-            const message = await response.text();
-            throw new Error(message || 'Unable to sign file.');
+            throw error;
         }
-        const serverResponse = await response.json();
         return await XHR.makeXhrRequest(formio, xhrCallback, serverResponse, progressCallback, abortCallback);
     },
     makeXhrRequest(formio, xhrCallback, serverResponse, progressCallback, abortCallback) {