@formio/js 5.1.0-dev.6056.ba6432d → 5.1.0-dev.6059.845a6e3

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

@@ -98,18 +98,12 @@ export default class FileComponent extends Field {
         if (this.component.privateDownload) {
             fileInfo.private = true;
         }
-        // pass the component to the downloadFile method
-        return this.fileService.downloadFile(fileInfo, this.component).then((result) => result.url);
+        return this.fileService.downloadFile(fileInfo).then((result) => result.url);
     }
     get emptyValue() {
         return [];
     }
-    getValueAsString(value, options) {
-        if (options?.review && !this.component.uploadOnly) {
-            return _.map(value, (val, index) => {
-                return `<a href="${val.url || '#'}" target="_blank" data-path='${this.path}' data-fileindex='${index}'>${val.originalName}</a>`;
-            }).join(', ');
-        }
+    getValueAsString(value) {
         if (_.isArray(value)) {
             return _.map(value, 'originalName').join(', ');
         }
@@ -202,7 +196,7 @@ export default class FileComponent extends Field {
             this.videoStream = stream;
             const { videoPlayer } = this.refs;
             if (!videoPlayer) {
-                console.warn(this.t('videoPlayerNotFound'));
+                console.warn('Video player not found in template.');
                 this.cameraMode = false;
                 this.redraw();
                 return;
@@ -227,7 +221,7 @@ export default class FileComponent extends Field {
     takePicture() {
         const { videoPlayer } = this.refs;
         if (!videoPlayer) {
-            console.warn(this.t('videoPlayerNotFound'));
+            console.warn('Video player not found in template.');
             this.cameraMode = false;
             this.redraw();
             return;
@@ -632,7 +626,7 @@ export default class FileComponent extends Field {
             file,
             size: file.size,
             status: 'info',
-            message: this.t('waitFileProcessing'),
+            message: this.t('Processing file. Please wait...'),
             hash: '',
         };
     }
@@ -661,7 +655,7 @@ export default class FileComponent extends Field {
         return fileWithSameNameUploaded || fileWithSameNameUploading
             ? {
                 status: 'error',
-                message: this.t(fileWithSameNameUploading ? 'fileWithDuplicatedNameInProgress' : 'fileWithDuplicatedNameLoaded'),
+                message: this.t(`File with the same name is already ${fileWithSameNameUploading ? 'being ' : ''}uploaded`),
             }
             : {};
     }
@@ -670,7 +664,7 @@ export default class FileComponent extends Field {
         if (this.component.filePattern && !this.validatePattern(file, this.component.filePattern)) {
             return {
                 status: 'error',
-                message: this.t('wrongFileType', {
+                message: this.t('File is the wrong type; it must be {{ pattern }}', {
                     pattern: this.component.filePattern,
                 }),
             };
@@ -679,7 +673,7 @@ export default class FileComponent extends Field {
         if (this.component.fileMinSize && !this.validateMinSize(file, this.component.fileMinSize)) {
             return {
                 status: 'error',
-                message: this.t('fileTooSmall', {
+                message: this.t('File is too small; it must be at least {{ size }}', {
                     size: this.component.fileMinSize,
                 }),
             };
@@ -688,7 +682,7 @@ export default class FileComponent extends Field {
         if (this.component.fileMaxSize && !this.validateMaxSize(file, this.component.fileMaxSize)) {
             return {
                 status: 'error',
-                message: this.t('fileTooBig', {
+                message: this.t('File is too big; it must be at most {{ size }}', {
                     size: this.component.fileMaxSize,
                 }),
             };
@@ -700,7 +694,7 @@ export default class FileComponent extends Field {
         return !fileService
             ? {
                 status: 'error',
-                message: this.t('noFileService'),
+                message: this.t('File Service not provided.'),
             }
             : {};
     }
@@ -748,7 +742,7 @@ export default class FileComponent extends Field {
                 this.fileDropHidden = false;
                 return {
                     status: 'error',
-                    message: this.t('fileProcessingFailed'),
+                    message: this.t('File processing has been failed.'),
                 };
             }
             finally {
@@ -782,7 +776,7 @@ export default class FileComponent extends Field {
             return this.filesToSync.filesToUpload.push(fileToSync);
         }
         if (this.autoSync) {
-            fileToSync.message = this.t('readyForUpload');
+            fileToSync.message = this.t('Ready to be uploaded into storage');
         }
         this.filesToSync.filesToUpload.push({
             ...fileToSync,
@@ -820,8 +814,8 @@ export default class FileComponent extends Field {
             ...fileInfo,
             status: 'info',
             message: this.autoSync
-                ? this.t('readyForRemovingFromStorage')
-                : this.t('preparingFileToRemove'),
+                ? this.t('Ready to be removed from storage')
+                : this.t('Preparing file to remove'),
         });
         const index = this.dataValue.findIndex(file => file.name === fileInfo.name);
         this.splice(index);
@@ -859,7 +853,7 @@ export default class FileComponent extends Field {
                 }
                 await this.deleteFile(fileToSync);
                 fileToSync.status = 'success';
-                fileToSync.message = this.t('succefullyRemoved');
+                fileToSync.message = this.t('Succefully removed');
             }
             catch (response) {
                 fileToSync.status = 'error';
@@ -927,7 +921,7 @@ export default class FileComponent extends Field {
                 }
                 fileInfo = await this.uploadFile(fileToSync);
                 fileToSync.status = 'success';
-                fileToSync.message = this.t('succefullyUploaded');
+                fileToSync.message = this.t('Succefully uploaded');
                 fileInfo.originalName = fileToSync.originalName;
                 fileInfo.hash = fileToSync.hash;
             }
@@ -1026,7 +1020,7 @@ export default class FileComponent extends Field {
             }
             await this.syncFiles();
             return this.shouldSyncFiles
-                ? Promise.reject(this.t('synchronizationFailed'))
+                ? Promise.reject('Synchronization is failed')
                 : Promise.resolve();
         }
         catch (error) {

package/lib/mjs/components/form/Form.d.ts

@@ -13,7 +13,7 @@ export default class FormComponent extends Component {
     valueChanged: boolean | undefined;
     subForm: any;
     formSrc: any;
-    get dataReady(): any;
+    get dataReady(): Promise<any>;
     get emptyValue(): {
         data: {};
     };

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

@@ -97,7 +97,7 @@ export default class FormComponent extends Component {
         return this.createSubForm();
     }
     get dataReady() {
-        return this.subForm?.dataReady || this.subFormReady || Promise.resolve();
+        return this.subFormReady || Promise.resolve();
     }
     get defaultValue() {
         // Not not provide a default value unless the subform is ready so that it will initialize correctly.
@@ -211,7 +211,7 @@ export default class FormComponent extends Component {
     /* eslint-enable max-statements */
     render() {
         if (this.builderMode) {
-            return super.render(this.t(this.component.label || 'nestedForm'));
+            return super.render(this.component.label || 'Nested form');
         }
         const subform = this.subForm ? this.subForm.render() : this.renderTemplate('loading');
         return super.render(subform);
@@ -224,13 +224,13 @@ export default class FormComponent extends Component {
      */
     getValueAsString(value, options) {
         if (!value) {
-            return this.t('noDataProvided');
+            return 'No data provided';
         }
         if (!value.data && value._id) {
             return value._id;
         }
         if (!value.data || !Object.keys(value.data).length) {
-            return this.t('noDataProvided');
+            return 'No data provided';
         }
         if (options?.email) {
             let result = (`
@@ -648,7 +648,7 @@ export default class FormComponent extends Component {
                 : {};
             this.subForm.setUrl(submissionUrl, { ...this.options, ...options });
             this.subForm.loadSubmission().catch((err) => {
-                console.error(this.t('subformSubmissionLoadingError', { submissionId: submission._id }), err);
+                console.error(`Unable to load subform submission ${submission._id}:`, err);
             });
         }
         else {
@@ -663,9 +663,6 @@ export default class FormComponent extends Component {
      */
     onSetSubFormValue(submission, flags) {
         this.subForm.setValue(submission, flags);
-        if (flags?.fromSubmission) {
-            this.subForm.submissionReadyResolve(submission);
-        }
     }
     isEmpty(value = this.dataValue) {
         return value === null || _.isEqual(value, this.emptyValue) || (this.areAllComponentsEmpty(value?.data) && !value?._id);

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

@@ -44,7 +44,7 @@ export default [
         },
         searchField: 'title__regex',
         template: '<span>{{ item._vid }}</span>',
-        valueProperty: 'revisionId',
+        valueProperty: '_id',
         authenticate: true,
         label: 'Form Revision',
         key: 'revision',
@@ -66,7 +66,7 @@ export default [
         input: true,
         weight: 20,
         key: 'reference',
-        label: 'Submit as reference',
-        tooltip: 'When "Submit as reference" is enabled, the form submission will be recorded against the Parent Form as well as the Child Form. When a submission recorded with "Submit as reference" is edited, the update is applied to each submission made against the Parent Form and Child Form.'
+        label: 'Save as reference',
+        tooltip: 'Using this option will save this field as a reference and link its value to the value of the origin record.'
     }
 ];

package/lib/mjs/components/hidden/Hidden.d.ts

@@ -10,6 +10,7 @@ export default class HiddenComponent extends Input {
     };
     get inputInfo(): any;
     labelIsHidden(): boolean;
+    get emptyValue(): string;
     setValue(value: any, flags?: {}): boolean;
 }
 import Input from '../_classes/input/Input';

package/lib/mjs/components/hidden/Hidden.js

@@ -43,7 +43,7 @@ export default class HiddenComponent extends Input {
         return true;
     }
     get emptyValue() {
-        return null;
+        return '';
     }
     setValue(value, flags = {}) {
         return this.updateValue(value, flags);

package/lib/mjs/components/hidden/editForm/Hidden.edit.display.js

@@ -3,14 +3,6 @@ export default [
         key: 'labelPosition',
         ignore: true
     },
-    {
-        key: 'labelWidth',
-        ignore: true
-    },
-    {
-        key: 'labelMargin',
-        ignore: true
-    },
     {
         key: 'placeholder',
         ignore: true

package/lib/mjs/components/html/editForm/HTML.edit.display.js

@@ -3,14 +3,6 @@ export default [
         key: 'labelPosition',
         ignore: true
     },
-    {
-        key: 'labelWidth',
-        ignore: true
-    },
-    {
-        key: 'labelMargin',
-        ignore: true
-    },
     {
         key: 'placeholder',
         ignore: true

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

@@ -54,7 +54,7 @@ export default class NumberComponent extends Input {
         }
         else {
             if (this.component.thousandsSeparator || this.options.properties?.thousandsSeparator || this.options.thousandsSeparator) {
-                console.warn(this.t('noDelimiterSet'));
+                console.warn('In order for thousands separator to work properly, you must set the delimiter to true in the component json');
             }
             this.delimiter = '';
         }
@@ -168,21 +168,14 @@ export default class NumberComponent extends Input {
         if (typeof input === 'string') {
             input = input.split(this.delimiter).join('').replace(this.decimalSeparator, '.');
         }
-        let value;
-        if (!_.isNaN(input)) {
+        let value = parseFloat(input);
+        if (!_.isNaN(value)) {
             // Format scientific notation
-            if (/[0-9]+[eE]/.test(String(input))) {
-                // Convert to exponential notation will depend on the decimal limit set in the component
-                // Example: 1.23e-5 will be converted to 1.23e-5 if decimal limit is set to 2
-                // Example: 1.23e5 will be converted to 1.23e+5 if decimal limit is set to 2
-                // if decimal limit is 3, 1.23e5 will be converted to 1.230e+5
-                // if decimal limit is not set, 1.23e5 will be converted to 1.23000000000000000000e+5
-                value = parseFloat(input);
+            if (/e/i.test(String(value))) {
                 value = value.toExponential(this.decimalLimit);
             }
             else {
-                value = parseFloat(input);
-                value = !_.isNaN(value) ? String(value).replace('.', this.decimalSeparator) : null;
+                value = String(value).replace('.', this.decimalSeparator);
             }
         }
         else {

package/lib/mjs/components/number/editForm/Number.edit.display.js

@@ -11,18 +11,6 @@ export default [
         key: 'allowMultipleMasks',
         ignore: true
     },
-    {
-        key: 'inputMasks',
-        ignore: true
-    },
-    {
-        key: 'widget.type',
-        ignore: true
-    },
-    {
-        key: 'widget',
-        ignore: true
-    },
     {
         key: 'showWordCount',
         ignore: true,

package/lib/mjs/components/password/editForm/Password.edit.display.js

@@ -10,17 +10,5 @@ export default [
     {
         key: 'allowMultipleMasks',
         ignore: true
-    },
-    {
-        key: 'inputMasks',
-        ignore: true
-    },
-    {
-        key: 'widget.type',
-        ignore: true
-    },
-    {
-        key: 'widget',
-        ignore: true
-    },
+    }
 ];

package/lib/mjs/components/phonenumber/PhoneNumber.form.js

@@ -17,15 +17,7 @@ export default function (...extend) {
                 {
                     key: 'showCharCount',
                     ignore: true
-                },
-                {
-                    key: 'widget.type',
-                    ignore: true
-                },
-                {
-                    key: 'widget',
-                    ignore: true
-                },
+                }
             ]
         },
         {

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

@@ -293,16 +293,6 @@ export default class RadioComponent extends ListComponent {
         if (method.toUpperCase() === 'GET') {
             body = null;
         }
-        const limit = this.component.limit || 100;
-        const skip = this.isScrollLoading ? this.selectOptions.length : 0;
-        // Allow for url interpolation.
-        url = this.sanitize(this.interpolate(url, {
-            formioBase: Formio.getBaseUrl(),
-            search,
-            limit,
-            skip,
-            page: Math.abs(Math.floor(skip / limit))
-        }), this.shouldSanitizeValue);
         // Set ignoreCache if it is
         options.ignoreCache = this.component.ignoreCache;
         // Make the request.

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

@@ -47,7 +47,7 @@ export default class ReCaptchaComponent extends Component {
                 this.recaptchaApiReady = Formio.requireLibrary('googleRecaptcha', 'grecaptcha', recaptchaApiScriptUrl, true);
             }
             else {
-                console.warn(this.t('noSiteKey'));
+                console.warn('There is no Site Key specified in settings in form JSON');
             }
         }
     }
@@ -60,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(this.t('noSiteKey'));
+            console.warn('There is no Site Key specified in settings in form JSON');
             return;
         }
         if (!this.recaptchaApiReady) {

package/lib/mjs/components/select/Select.d.ts

@@ -126,6 +126,7 @@ export default class SelectComponent extends ListComponent {
     get isLoadingAvailable(): any;
     onScroll(): void;
     attachRefreshOnBlur(): void;
+    addPlaceholderItem(placeholderValue: any): void;
     update(): void;
     addCurrentChoices(values: any, items: any, keyValue: any): any;
     getValueAsString(data: any, options: any): any;

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

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import { Formio } from '../../Formio';
 import ListComponent from '../_classes/list/ListComponent';
+import Input from '../_classes/input/Input';
 import Form from '../../Form';
 import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes, isSelectResourceWithObjectValue, removeHTML } from '../../utils/utils';
 import Choices from '../../utils/ChoicesWrapper';
@@ -531,13 +532,13 @@ export default class SelectComponent extends ListComponent {
             skip,
         };
         // Allow for url interpolation.
-        url = this.sanitize(this.interpolate(url, {
+        url = this.interpolate(url, {
             formioBase: Formio.getBaseUrl(),
             search,
             limit,
             skip,
             page: Math.abs(Math.floor(skip / limit))
-        }), this.shouldSanitizeValue);
+        });
         // Add search capability.
         if (this.component.searchField && search) {
             const searchValue = Array.isArray(search)
@@ -594,7 +595,7 @@ export default class SelectComponent extends ListComponent {
             component: this.component,
             message: err.toString(),
         });
-        console.warn(this.t('loadResourcesError', { componentKey: this.key }));
+        console.warn(`Unable to load resources for ${this.key}`);
     }
     /**
      * Get the request headers for this select dropdown.
@@ -728,7 +729,7 @@ export default class SelectComponent extends ListComponent {
             }
         }
         else if (this.component.dataSrc === 'url' || this.component.dataSrc === 'resource') {
-            this.addOption('', `${this.t('loading')}...`);
+            this.addOption('', this.t('loading...'));
         }
     }
     get active() {
@@ -772,16 +773,16 @@ export default class SelectComponent extends ListComponent {
             removeItemButton: this.component.disabled ? false : _.get(this.component, 'removeItemButton', true),
             itemSelectText: '',
             classNames: {
-                containerOuter: ['choices', 'form-group', 'formio-choices'],
-                containerInner: this.transform('class', 'form-control ui fluid selection dropdown').split(' '),
+                containerOuter: 'choices form-group formio-choices',
+                containerInner: this.transform('class', 'form-control ui fluid selection dropdown')
             },
             addItemText: false,
             allowHTML: true,
             placeholder: !!this.component.placeholder,
             placeholderValue: placeholderValue,
-            noResultsText: this.t('noResultsFound'),
-            noChoicesText: this.t('noChoices'),
-            searchPlaceholderValue: this.t('typeToSearch'),
+            noResultsText: this.t('No results found'),
+            noChoicesText: this.t('No choices to choose from'),
+            searchPlaceholderValue: this.t('Type to search'),
             shouldSort: false,
             position: (this.component.dropdown || 'auto'),
             searchEnabled: useSearch,
@@ -801,7 +802,6 @@ export default class SelectComponent extends ListComponent {
                 }),
             valueComparer: _.isEqual,
             resetScrollPosition: false,
-            duplicateItemsAllowed: false,
             ...customOptions,
         };
     }
@@ -868,7 +868,7 @@ export default class SelectComponent extends ListComponent {
                 this.choices.containerOuter.element.setAttribute('tabIndex', '-1');
                 this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());
             }
-            this.addFocusBlurEvents(this.choices.input.element);
+            Input.prototype.addFocusBlurEvents.call(this, this.focusableElement);
             if (this.itemsFromUrl && !this.component.noRefreshOnScroll) {
                 this.scrollList = this.choices.choiceList.element;
                 this.addEventListener(this.scrollList, 'scroll', () => this.onScroll());
@@ -934,6 +934,12 @@ export default class SelectComponent extends ListComponent {
                 this.positionDropdown();
             });
         }
+        if (this.choices && choicesOptions.placeholderValue && this.choices._isSelectOneElement) {
+            this.addPlaceholderItem(choicesOptions.placeholderValue);
+            this.addEventListener(input, 'removeItem', () => {
+                this.addPlaceholderItem(choicesOptions.placeholderValue);
+            });
+        }
         // Add value options.
         this.addValueOptions();
         this.setChoicesValue(this.dataValue);
@@ -1019,6 +1025,20 @@ export default class SelectComponent extends ListComponent {
             });
         }
     }
+    addPlaceholderItem(placeholderValue) {
+        const items = this.choices._store.activeItems;
+        if (!items.length) {
+            this.choices._addItem({
+                value: '',
+                label: placeholderValue,
+                choiceId: 0,
+                groupId: -1,
+                customProperties: null,
+                placeholder: true,
+                keyCode: null
+            });
+        }
+    }
     /* eslint-enable max-statements */
     update() {
         if (this.component.dataSrc === 'custom') {
@@ -1199,7 +1219,7 @@ export default class SelectComponent extends ListComponent {
             return normalize[dataType]().value;
         }
         catch (err) {
-            console.warn(this.t('failedToNormalize'), err);
+            console.warn('Failed to normalize value', err);
             return value;
         }
     }
@@ -1395,7 +1415,7 @@ export default class SelectComponent extends ListComponent {
                         return (JSON.stringify(normalizedOptionValue) === JSON.stringify(value));
                     }
                     catch (err) {
-                        console.warn.error(this.t('failedToCompareItems'), err);
+                        console.warn.error('Error while comparing items', err);
                         return false;
                     }
                 };
@@ -1487,7 +1507,7 @@ export default class SelectComponent extends ListComponent {
     }
     asString(value, options = {}) {
         value = value ?? this.getValue();
-        if (options.modalPreview || this.inDataTable || options.email) {
+        if (options.modalPreview || this.inDataTable) {
             if (this.inDataTable) {
                 value = this.undoValueTyping(value);
             }

package/lib/mjs/components/select/editForm/Select.edit.data.d.ts

@@ -1099,7 +1099,6 @@ declare const _default: ({
     alwaysEnabled?: undefined;
 } | {
     key: string;
-    type: string;
     conditional: {
         json: {
             and: ({
@@ -1150,6 +1149,7 @@ declare const _default: ({
         };
     };
     data?: undefined;
+    type?: undefined;
     weight?: undefined;
     input?: undefined;
     label?: undefined;

package/lib/mjs/components/select/editForm/Select.edit.data.js

@@ -635,8 +635,8 @@ export default [
         input: true,
         weight: 25,
         key: 'reference',
-        label: 'Submit as reference',
-        tooltip: 'Using this option will submit this field as a reference id and link its value to the value of the origin record.',
+        label: 'Save as reference',
+        tooltip: 'Using this option will save this field as a reference and link its value to the value of the origin record.',
         conditional: {
             json: { '===': [{ var: 'data.dataSrc' }, 'resource'] },
         },
@@ -681,7 +681,6 @@ export default [
     },
     {
         key: 'selectData',
-        type: 'hidden',
         conditional: {
             json: {
                 and: [

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

@@ -253,14 +253,14 @@ export default class SelectBoxesComponent extends RadioComponent {
                     this.setInputsDisabled(false);
                 }
                 if (!isValid && maxCount && count > maxCount) {
-                    const message = this.t(this.component.maxSelectedCountMessage || 'maxSelectItems', { maxCount });
+                    const message = this.t(this.component.maxSelectedCountMessage || 'You may only select up to {{maxCount}} items', { maxCount });
                     this.errors.push({ message });
                     this.setCustomValidity(message, dirty);
                     return false;
                 }
                 else if (!isValid && minCount && count < minCount) {
                     this.setInputsDisabled(false);
-                    const message = this.t(this.component.minSelectedCountMessage || 'minSelectItems', { minCount });
+                    const message = this.t(this.component.minSelectedCountMessage || 'You must select at least {{minCount}} items', { minCount });
                     this.errors.push({ message });
                     this.setCustomValidity(message, dirty);
                     return false;

package/lib/mjs/components/signature/Signature.d.ts

@@ -24,7 +24,7 @@ export default class SignatureComponent extends Input {
     checkSize(force: any, scale: any): void;
     signaturePad: SignaturePad | null | undefined;
     observer: any;
-    getValueAsString(value: any): string;
+    getValueAsString(value: any): "" | "Yes" | "No";
     focus(): void;
     setDataToSigaturePad(): void;
 }

package/lib/mjs/components/signature/Signature.js

@@ -156,9 +156,7 @@ export default class SignatureComponent extends Input {
             if (this.dataValue) {
                 this.setDataToSigaturePad();
             }
-            if (!this.disabled) {
-                this.showCanvas(true);
-            }
+            this.showCanvas(true);
         }
     }
     renderElement(value, index) {
@@ -174,7 +172,7 @@ export default class SignatureComponent extends Input {
         return this.renderModalPreview({
             previewText: this.dataValue ?
                 `<img src=${this.dataValue} ${this._referenceAttributeName}='openModal' style="width: 100%;height: 100%;" />` :
-                this.t('clickToSign')
+                this.t('Click to Sign')
         });
     }
     attach(element) {
@@ -242,7 +240,7 @@ export default class SignatureComponent extends Input {
         if (_.isUndefined(value) && this.inDataTable) {
             return '';
         }
-        return this.t(value ? 'yes' : 'no');
+        return value ? 'Yes' : 'No';
     }
     focus() {
         this.refs.padBody.focus();