@formio/js 5.1.0-dev.5969.9a6e3f5 → 5.1.0-dev.5972.67b2845

package/lib/cjs/WebformBuilder.js

@@ -231,7 +231,7 @@ class WebformBuilder extends Component_1.default {
                 }
             }
         }).catch((err) => {
-            console.warn(`Could not load project settings: ${err.message || err}`);
+            console.warn(`${this.t('loadingProjectSettingsError')}: ${err.message || err}`);
         });
         if (!formio.noProject && !isResourcesDisabled && formio.formsUrl) {
             const resourceOptions = this.options.builder && this.options.builder.resource;
@@ -334,18 +334,18 @@ class WebformBuilder extends Component_1.default {
             editJson: 'single'
         });
         if (component.refs.copyComponent) {
-            this.attachTooltip(component.refs.copyComponent, this.t('Copy'));
+            this.attachTooltip(component.refs.copyComponent, this.t('copy'));
             component.addEventListener(component.refs.copyComponent, 'click', () => this.copyComponent(component));
         }
         if (component.refs.pasteComponent) {
-            const pasteToolTip = this.attachTooltip(component.refs.pasteComponent, this.t('Paste below'));
+            const pasteToolTip = this.attachTooltip(component.refs.pasteComponent, this.t('pasteBelow'));
             component.addEventListener(component.refs.pasteComponent, 'click', () => {
                 pasteToolTip.hide();
                 this.pasteComponent(component);
             });
         }
         if (component.refs.moveComponent) {
-            this.attachTooltip(component.refs.moveComponent, this.t('Move'));
+            this.attachTooltip(component.refs.moveComponent, this.t('move'));
             if (this.keyboardActionsEnabled) {
                 component.addEventListener(component.refs.moveComponent, 'click', () => {
                     this.moveComponent(component);
@@ -354,15 +354,15 @@ class WebformBuilder extends Component_1.default {
         }
         const parent = this.getParentElement(element);
         if (component.refs.editComponent) {
-            this.attachTooltip(component.refs.editComponent, this.t('Edit'));
+            this.attachTooltip(component.refs.editComponent, this.t('edit'));
             component.addEventListener(component.refs.editComponent, 'click', () => this.editComponent(component.schema, parent, false, false, component.component, { inDataGrid: component.isInDataGrid }));
         }
         if (component.refs.editJson) {
-            this.attachTooltip(component.refs.editJson, this.t('Edit JSON'));
+            this.attachTooltip(component.refs.editJson, this.t('editJson'));
             component.addEventListener(component.refs.editJson, 'click', () => this.editComponent(component.schema, parent, false, true, component.component));
         }
         if (component.refs.removeComponent) {
-            this.attachTooltip(component.refs.removeComponent, this.t('Remove'));
+            this.attachTooltip(component.refs.removeComponent, this.t('remove'));
             component.addEventListener(component.refs.removeComponent, 'click', () => this.removeComponent(component.schema, parent, component.component, component));
         }
         return element;
@@ -819,7 +819,7 @@ class WebformBuilder extends Component_1.default {
             }, true);
             if (isCompAlreadyExists) {
                 this.webform.redraw();
-                this.webform.setAlert('danger', `You cannot add more than one ${lodash_1.default.get(draggableComponent, draggableComponent.uniqueComponent ? 'title' : 'key')} component to one page.`);
+                this.webform.setAlert('danger', this.t('builderUniqueError', { componentKeyOrTitle: lodash_1.default.get(draggableComponent, draggableComponent.uniqueComponent ? 'title' : 'key') }));
                 return;
             }
         }
@@ -1516,7 +1516,7 @@ class WebformBuilder extends Component_1.default {
      */
     copyComponent(component) {
         if (!window.sessionStorage) {
-            return console.warn('Session storage is not supported in this browser.');
+            return console.warn(this.t('sessionStorageSupportError'));
         }
         this.addClass(this.refs.form, 'builder-paste-mode');
         window.sessionStorage.setItem('formio.clipboard', JSON.stringify(component.schema));
@@ -1528,7 +1528,7 @@ class WebformBuilder extends Component_1.default {
      */
     pasteComponent(component) {
         if (!window.sessionStorage) {
-            return console.warn('Session storage is not supported in this browser.');
+            return console.warn(this.t('sessionStorageSupportError'));
         }
         this.removeClass(this.refs.form, 'builder-paste-mode');
         if (window.sessionStorage) {

package/lib/cjs/Wizard.js

@@ -613,7 +613,7 @@ class Wizard extends Webform_1.default {
             this.redraw();
             return Promise.resolve();
         }
-        return Promise.reject('Page not found');
+        return Promise.reject(this.t('pageNotFound'));
     }
     pageFieldLogic(page) {
         var _a;

package/lib/cjs/WizardBuilder.js

@@ -223,7 +223,7 @@ class WizardBuilder extends WebformBuilder_1.default {
         const isSiblingAnAddPageButton = sibling === null || sibling === void 0 ? void 0 : sibling.classList.contains('wizard-add-page');
         // We still can paste before Add Page button
         if (!element.dragInfo || (sibling && !sibling.dragInfo && !isSiblingAnAddPageButton)) {
-            console.warn('There is no Drag Info available for either dragged or sibling element');
+            console.warn(this.t('noDragInfoError'));
             return;
         }
         const oldPosition = element.dragInfo.index;

package/lib/cjs/components/_classes/component/Component.js

@@ -545,7 +545,10 @@ class Component extends Element_1.default {
                 this.addons.push(addon);
             }
             else {
-                console.warn(`Addon ${name.label} does not support component of type ${this.component.type}.`);
+                console.warn(this.t('addonSupportTypeError', {
+                    type: this.component.type,
+                    label: name.label
+                }));
             }
         }
         return addon;
@@ -597,7 +600,7 @@ class Component extends Element_1.default {
         return this.paths.dataPath;
     }
     set path(path) {
-        throw new Error('Should not be setting the path of a component.');
+        throw new Error(this.t('setPathError'));
     }
     set parentVisible(value) {
         this._parentVisible = value;
@@ -692,7 +695,7 @@ class Component extends Element_1.default {
         return this.options.attachMode === 'builder';
     }
     get calculatedPath() {
-        console.error('component.calculatedPath was deprecated, use component.path instead.');
+        console.error(this.t('calculatedPathDeprecation'));
         return this.path;
     }
     get labelPosition() {
@@ -858,7 +861,7 @@ class Component extends Element_1.default {
         const name = names[names.length - 1];
         const templatesByName = Templates_1.default.defaultTemplates[name];
         if (!templatesByName) {
-            return { template: `Unknown template: ${name}` };
+            return { template: this.t('unknownTemplate', { name }) };
         }
         const templateByMode = this.checkTemplateMode(templatesByName, modes);
         if (templateByMode) {
@@ -915,9 +918,7 @@ class Component extends Element_1.default {
         data.disabled = this.disabled;
         data.builder = this.builderMode;
         data.render = (...args) => {
-            console.warn(`Form.io 'render' template function is deprecated.
-      If you need to render template (template A) inside of another template (template B),
-      pass pre-compiled template A (use this.renderTemplate('template_A_name') as template context variable for template B`);
+            console.warn(this.t('renderTemplateFunctionDeprecation'));
             return this.renderTemplate(...args);
         };
         data.label = data.labelInfo || this.labelInfo;
@@ -1120,7 +1121,7 @@ class Component extends Element_1.default {
             modalLabel = { className: 'field-required' };
         }
         return this.renderModalPreview({
-            previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('Click to set value'),
+            previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('clickToSetValue'),
             messages: '',
             labelInfo: modalLabel,
         });
@@ -1145,7 +1146,7 @@ class Component extends Element_1.default {
      * @param {boolean} topLevel - If this is the topmost component that is being rendered.
      * @returns {string} - The rendered HTML string of a component.
      */
-    render(children = `Unknown component: ${this.component.type}`, topLevel = false) {
+    render(children = this.t('unknownComponent', { type: this.component.type }), topLevel = false) {
         const isVisible = this.visible;
         this.rendered = true;
         if (!this.builderMode && !this.previewMode && this.component.modalEdit) {
@@ -1295,7 +1296,7 @@ class Component extends Element_1.default {
     detach() {
         // First iterate through each ref and delete the component so there are no dangling component references.
         lodash_1.default.each(this.refs, (ref) => {
-            if (typeof ref === NodeList) {
+            if ((window === null || window === void 0 ? void 0 : window.NodeList) && ref instanceof NodeList) {
                 ref.forEach((elem) => {
                     delete elem.component;
                 });
@@ -3343,7 +3344,7 @@ class Component extends Element_1.default {
     }
     // Maintain reverse compatibility.
     whenReady() {
-        console.warn('The whenReady() method has been deprecated. Please use the dataReady property instead.');
+        console.warn(this.t('whenReadyDeprecation'));
         return this.dataReady;
     }
     get dataReady() {

package/lib/cjs/components/_classes/list/ListComponent.js

@@ -138,12 +138,12 @@ class ListComponent extends Field_1.default {
             component: this.component,
             message: err.toString(),
         });
-        console.warn(`Unable to load resources for ${this.key}`);
+        console.warn(this.t('loadResourcesError', { componentKey: this.key }));
     }
     /* eslint-disable max-statements */
     updateItems(searchInput, forceUpdate) {
         if (!this.component.data) {
-            console.warn(`Select component ${this.key} does not have data configuration.`);
+            console.warn(this.t('noSelectDataConfiguration', { componentKey: this.key }));
             this.itemsLoadedResolve();
             return;
         }
@@ -175,7 +175,7 @@ class ListComponent extends Field_1.default {
                         this.loadItems(resourceUrl, searchInput, this.requestHeaders);
                     }
                     catch (err) {
-                        console.warn(`Unable to load resources for ${this.key}`);
+                        console.warn(this.t('loadResourcesError', { componentKey: this.key }));
                     }
                 }
                 else {
@@ -219,7 +219,7 @@ class ListComponent extends Field_1.default {
                     return;
                 }
                 if (!window.indexedDB) {
-                    window.alert("Your browser doesn't support current version of indexedDB");
+                    window.alert(this.t('indexedDBSupportError'));
                 }
                 if (this.component.indexeddb && this.component.indexeddb.database && this.component.indexeddb.table) {
                     const request = window.indexedDB.open(this.component.indexeddb.database);

package/lib/cjs/components/_classes/multivalue/Multivalue.js

@@ -66,7 +66,7 @@ class Multivalue extends Field_1.default {
         return value;
     }
     get addAnother() {
-        return this.t(this.component.addAnother || 'Add Another');
+        return this.t(this.component.addAnother || 'addAnother');
     }
     /**
      * @returns {Field} - The created field.
@@ -185,7 +185,7 @@ class Multivalue extends Field_1.default {
                 this.saveCaretPosition(element, index);
             }
             catch (err) {
-                console.warn('An error occurred while trying to save caret position', err);
+                console.warn(this.t('caretPositionSavingError'), err);
             }
             // If a mask is present, delay the update to allow mask to update first.
             if (element.mask) {

package/lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js

@@ -22,7 +22,7 @@ class NestedArrayComponent extends NestedDataComponent_1.default {
         return this.iteratableRows[component.rowIndex].data;
     }
     get iteratableRows() {
-        throw new Error('Getter #iteratableRows() is not implemented');
+        throw new Error(this.t('iteratableRowsError'));
     }
     get rowIndex() {
         return this._rowIndex;
@@ -65,7 +65,7 @@ class NestedArrayComponent extends NestedDataComponent_1.default {
         return this.validateComponents([this.component], data, flags);
     }
     checkRow(...args) {
-        console.log('Deprecation Warning: checkRow method has been replaced with processRow');
+        console.log(this.t('checkRowDeprecation'));
         return this.processRow.call(this, ...args);
     }
     processRow(method, data, opts, row, components, silentCheck) {
@@ -119,7 +119,7 @@ class NestedArrayComponent extends NestedDataComponent_1.default {
                 return '';
             }
             const label = component.label || component.key;
-            return `<th style="padding: 5px 10px;">${label}</th>`;
+            return `<th style="padding: 5px 10px;">${this.t(label, { _userInput: true })}</th>`;
         };
         const components = this.getComponents(0);
         for (const component of components) {

package/lib/cjs/components/address/Address.js

@@ -312,7 +312,7 @@ class AddressComponent extends Container_1.default {
         return !this.isMultiple && (this.builderMode || this.manualModeEnabled);
     }
     get addAnother() {
-        return this.t(this.component.addAnother || 'Add Another');
+        return this.t(this.component.addAnother || 'addAnother');
     }
     renderElement(value) {
         return this.renderTemplate(this.templateName, {

package/lib/cjs/components/button/Button.js

@@ -342,17 +342,17 @@ class ButtonComponent extends Field_1.default {
                 break;
             case 'oauth':
                 if (this.root === this) {
-                    console.warn('You must add the OAuth button to a form for it to function properly');
+                    console.warn(this.t('noOAuthBtn'));
                     return;
                 }
                 // Display Alert if OAuth config is missing
                 if (!this.oauthConfig) {
-                    this.root.setAlert('danger', 'OAuth not configured. You must configure oauth for your project before it will work.');
+                    this.root.setAlert('danger', this.t('noOAuthConfiguration'));
                     break;
                 }
                 // Display Alert if oAuth has an error is missing
                 if (this.oauthConfig.error) {
-                    this.root.setAlert('danger', `The Following Error Has Occured ${this.oauthConfig.error}`);
+                    this.root.setAlert('danger', `${this.t('oAuthErrorsTitle')} ${this.t(this.oauthConfig.error)}`);
                     break;
                 }
                 this.openOauth(this.oauthConfig);
@@ -361,7 +361,7 @@ class ButtonComponent extends Field_1.default {
     }
     openOauth(settings) {
         if (!this.root.formio) {
-            console.warn('You must attach a Form API url to your form in order to use OAuth buttons.');
+            console.warn(this.t('noOAuthFormUrl'));
             return;
         }
         /*eslint-disable camelcase */
@@ -409,7 +409,7 @@ class ButtonComponent extends Field_1.default {
                     }
                     // TODO: check for error response here
                     if (settings.state !== params.state) {
-                        this.root.setAlert('danger', 'OAuth state does not match. Please try logging in again.');
+                        this.root.setAlert('danger', this.t('oAuthStateError'));
                         return;
                     }
                     // Depending on where the settings came from, submit to either the submission endpoint (old) or oauth endpoint (new).
@@ -442,7 +442,7 @@ class ButtonComponent extends Field_1.default {
             }
             catch (error) {
                 if (error.name !== 'SecurityError' && (error.name !== 'Error' || error.message !== 'Permission denied')) {
-                    this.root.setAlert('danger', error.message || error);
+                    this.root.setAlert('danger', this.t(`${error.message || error}`));
                 }
             }
             if (!popup || popup.closed || popup.closed === undefined) {

package/lib/cjs/components/checkbox/Checkbox.js

@@ -188,7 +188,7 @@ class CheckBoxComponent extends Field_1.default {
         if (lodash_1.default.isUndefined(value) && this.inDataTable) {
             return '';
         }
-        return this.t(hasValue ? 'Yes' : 'No');
+        return this.t(hasValue ? 'yes' : 'no');
     }
     updateValue(value, flags) {
         // If this is a radio and is alredy checked, uncheck it.

package/lib/cjs/components/datagrid/DataGrid.js

@@ -342,7 +342,7 @@ class DataGridComponent extends NestedArrayComponent_1.default {
     }
     onReorder(element, _target, _source, sibling) {
         if (!element.dragInfo || (sibling && !sibling.dragInfo)) {
-            console.warn('There is no Drag Info available for either dragged or sibling element');
+            console.warn(this.t('noDragInfoError'));
             return;
         }
         const oldPosition = element.dragInfo.index;
@@ -411,7 +411,7 @@ class DataGridComponent extends NestedArrayComponent_1.default {
             row
         });
         this.checkConditions();
-        this.triggerChange();
+        this.triggerChange({ modified: true });
         this.redraw().then(() => {
             this.focusOnNewRowElement(this.rows[index]);
         });
@@ -491,6 +491,9 @@ class DataGridComponent extends NestedArrayComponent_1.default {
             options.name += `[${rowIndex}]`;
             options.row = `${rowIndex}-${colIndex}`;
             options.rowIndex = rowIndex;
+            options.onChange = (flags, changed, modified) => {
+                this.triggerChange({ modified });
+            };
             let columnComponent;
             if (this.builderMode) {
                 col.id = col.id + rowIndex;

package/lib/cjs/components/datetime/DateTime.js

@@ -103,6 +103,10 @@ class DateTimeComponent extends Input_1.default {
         }
         /* eslint-disable camelcase */
         this.component.widget = Object.assign({ type: 'calendar', timezone, displayInTimezone: lodash_1.default.get(this.component, 'displayInTimezone', 'viewer'), locale: this.options.language, useLocaleSettings: lodash_1.default.get(this.component, 'useLocaleSettings', false), allowInput: lodash_1.default.get(this.component, 'allowInput', true), mode: 'single', enableTime: lodash_1.default.get(this.component, 'enableTime', true), noCalendar: !lodash_1.default.get(this.component, 'enableDate', true), format: this.component.format, hourIncrement: lodash_1.default.get(this.component, 'timePicker.hourStep', 1), minuteIncrement: lodash_1.default.get(this.component, 'timePicker.minuteStep', 5), time_24hr: time24hr, readOnly: this.options.readOnly, minDate: lodash_1.default.get(this.component, 'datePicker.minDate'), disabledDates: lodash_1.default.get(this.component, 'datePicker.disable'), disableWeekends: lodash_1.default.get(this.component, 'datePicker.disableWeekends'), disableWeekdays: lodash_1.default.get(this.component, 'datePicker.disableWeekdays'), disableFunction: lodash_1.default.get(this.component, 'datePicker.disableFunction'), maxDate: lodash_1.default.get(this.component, 'datePicker.maxDate') }, customOptions);
+        // update originalComponent to include widget and other updated settings
+        // it is done here since these settings depend on properties present after the component is initialized 
+        // originalComponent is used to restore the component (and widget) after evaluating field logic 
+        this.originalComponent = (0, utils_2.fastCloneDeep)(this.component);
         /* eslint-enable camelcase */
     }
     get defaultSchema() {

package/lib/cjs/components/day/Day.js

@@ -7,6 +7,7 @@ const lodash_1 = __importDefault(require("lodash"));
 const moment_1 = __importDefault(require("moment"));
 const Field_1 = __importDefault(require("../_classes/field/Field"));
 const utils_1 = require("../../utils/utils");
+const core_1 = require("@formio/core");
 class DayComponent extends Field_1.default {
     static schema(...extend) {
         return Field_1.default.schema({
@@ -173,7 +174,7 @@ class DayComponent extends Field_1.default {
         this._months = [
             {
                 value: '',
-                label: lodash_1.default.get(this.component, 'fields.month.placeholder') || (this.hideInputLabels ? this.t('Month') : '')
+                label: lodash_1.default.get(this.component, 'fields.month.placeholder') || (this.hideInputLabels ? this.t('month') : '')
             },
             { value: 1, label: 'January' },
             { value: 2, label: 'February' },
@@ -267,7 +268,7 @@ class DayComponent extends Field_1.default {
                 this.saveCaretPosition(element, name);
             }
             catch (err) {
-                console.warn('An error occurred while trying to save caret position', err);
+                console.warn(this.t('caretPositionSavingError'), err);
             }
             this.updateValue(null, {
                 modified: true,
@@ -474,24 +475,7 @@ class DayComponent extends Field_1.default {
      * @returns {string} - the format for the value string.
      */
     get format() {
-        let format = '';
-        if (this.component.dayFirst && this.showDay) {
-            format += 'D/';
-        }
-        if (this.showMonth) {
-            format += 'M/';
-        }
-        if (!this.component.dayFirst && this.showDay) {
-            format += 'D/';
-        }
-        if (this.showYear) {
-            format += 'YYYY';
-            return format;
-        }
-        else {
-            // Trim off the "/" from the end of the format string.
-            return format.length ? format.substring(0, format.length - 1) : format;
-        }
+        return (0, core_1.getDayFormat)(this.component);
     }
     /**
      * Return the date for this component.

package/lib/cjs/components/editgrid/EditGrid.js

@@ -120,10 +120,10 @@ class EditGridComponent extends NestedArrayComponent_1.default {
     }
     get defaultDialogTemplate() {
         return `
-    <h3 ${this._referenceAttributeName}="dialogHeader">${this.t('Do you want to clear data?')}</h3>
+    <h3 ${this._referenceAttributeName}="dialogHeader">${this.t('wantToClearData')}</h3>
     <div style="display:flex; justify-content: flex-end;">
-      <button ${this._referenceAttributeName}="dialogCancelButton" class="btn btn-secondary" aria-label="${this.t('Cancel')}">${this.t('Cancel')}</button>
-      <button ${this._referenceAttributeName}="dialogYesButton" class="btn btn-danger" aria-label="${this.t('Yes, delete it')}">${this.t('Yes, delete it')}</button>
+      <button ${this._referenceAttributeName}="dialogCancelButton" class="btn btn-secondary" aria-label="${this.t('cancel')}">${this.t('cancel')}</button>
+      <button ${this._referenceAttributeName}="dialogYesButton" class="btn btn-danger" aria-label="${this.t('yesDelete')}">${this.t('yesDelete')}</button>
     </div>
   `;
     }
@@ -1038,7 +1038,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             if (valid === null) {
                 editRow.errors.push({
                     type: 'error',
-                    message: `Invalid row validation for ${this.key}`
+                    message: this.t('componentInvalidRowValidation', { componentKey: this.key })
                 });
             }
         }

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

@@ -207,7 +207,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;
@@ -232,7 +232,7 @@ 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;
@@ -632,7 +632,7 @@ class FileComponent extends Field_1.default {
             file,
             size: file.size,
             status: 'info',
-            message: this.t('Processing file. Please wait...'),
+            message: this.t('waitFileProcessing'),
             hash: '',
         };
     }
@@ -663,7 +663,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'),
             }
             : {};
     }
@@ -672,7 +672,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,
                 }),
             };
@@ -681,7 +681,7 @@ class FileComponent extends Field_1.default {
         if (this.component.fileMinSize && !this.validateMinSize(file, this.component.fileMinSize)) {
             return {
                 status: 'error',
-                message: this.t('File is too small; it must be at least {{ size }}', {
+                message: this.t('fileTooSmall', {
                     size: this.component.fileMinSize,
                 }),
             };
@@ -690,7 +690,7 @@ class FileComponent extends Field_1.default {
         if (this.component.fileMaxSize && !this.validateMaxSize(file, this.component.fileMaxSize)) {
             return {
                 status: 'error',
-                message: this.t('File is too big; it must be at most {{ size }}', {
+                message: this.t('fileTooBig', {
                     size: this.component.fileMaxSize,
                 }),
             };
@@ -702,7 +702,7 @@ class FileComponent extends Field_1.default {
         return !fileService
             ? {
                 status: 'error',
-                message: this.t('File Service not provided.'),
+                message: this.t('noFileService'),
             }
             : {};
     }
@@ -752,7 +752,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 {
@@ -788,7 +788,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 }));
         });
@@ -821,8 +821,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();
@@ -862,7 +862,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';
@@ -930,7 +930,7 @@ class FileComponent extends Field_1.default {
                     }
                     fileInfo = yield this.uploadFile(fileToSync);
                     fileToSync.status = 'success';
-                    fileToSync.message = this.t('Succefully uploaded');
+                    fileToSync.message = this.t('succefullyUploaded');
                     fileInfo.originalName = fileToSync.originalName;
                     fileInfo.hash = fileToSync.hash;
                 }
@@ -1033,7 +1033,7 @@ class FileComponent extends Field_1.default {
                 }
                 yield this.syncFiles();
                 return this.shouldSyncFiles
-                    ? Promise.reject('Synchronization is failed')
+                    ? Promise.reject(this.t('synchronizationFailed'))
                     : Promise.resolve();
             }
             catch (error) {

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

@@ -32,6 +32,7 @@ export default class FormComponent extends Component {
     attach(element: any): Promise<void>;
     get hasLoadedForm(): any;
     get isRevisionChanged(): any;
+    get subFormData(): any;
     subFormReady: Promise<any> | null | undefined;
     /**
      * Pass everyComponent to subform.