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

package/lib/mjs/WebformBuilder.js

@@ -210,7 +210,7 @@ export default class WebformBuilder extends Component {
                 }
             }
         }).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;
@@ -320,18 +320,18 @@ export default class WebformBuilder extends Component {
             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);
@@ -340,15 +340,15 @@ export default class WebformBuilder extends Component {
         }
         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;
@@ -804,7 +804,7 @@ export default class WebformBuilder extends Component {
             }, true);
             if (isCompAlreadyExists) {
                 this.webform.redraw();
-                this.webform.setAlert('danger', `You cannot add more than one ${_.get(draggableComponent, draggableComponent.uniqueComponent ? 'title' : 'key')} component to one page.`);
+                this.webform.setAlert('danger', this.t('builderUniqueError', { componentKeyOrTitle: _.get(draggableComponent, draggableComponent.uniqueComponent ? 'title' : 'key') }));
                 return;
             }
         }
@@ -1519,7 +1519,7 @@ export default class WebformBuilder extends Component {
      */
     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));
@@ -1531,7 +1531,7 @@ export default class WebformBuilder extends Component {
      */
     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/mjs/Wizard.js

@@ -605,7 +605,7 @@ export default class Wizard extends Webform {
             this.redraw();
             return Promise.resolve();
         }
-        return Promise.reject('Page not found');
+        return Promise.reject(this.t('pageNotFound'));
     }
     pageFieldLogic(page) {
         if (this.pages?.[page]) {

package/lib/mjs/WizardBuilder.js

@@ -217,7 +217,7 @@ export default class WizardBuilder extends WebformBuilder {
         const isSiblingAnAddPageButton = 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/mjs/components/_classes/component/Component.js

@@ -509,7 +509,10 @@ export default class Component extends Element {
                 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;
@@ -561,7 +564,7 @@ export default class Component extends Element {
         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;
@@ -656,7 +659,7 @@ export default class Component extends Element {
         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() {
@@ -822,7 +825,7 @@ export default class Component extends Element {
         const name = names[names.length - 1];
         const templatesByName = Templates.defaultTemplates[name];
         if (!templatesByName) {
-            return { template: `Unknown template: ${name}` };
+            return { template: this.t('unknownTemplate', { name }) };
         }
         const templateByMode = this.checkTemplateMode(templatesByName, modes);
         if (templateByMode) {
@@ -879,9 +882,7 @@ export default class Component extends Element {
         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;
@@ -1081,7 +1082,7 @@ export default class Component extends Element {
             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,
         });
@@ -1106,7 +1107,7 @@ export default class Component extends Element {
      * @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) {
@@ -1263,7 +1264,7 @@ export default class Component extends Element {
     detach() {
         // First iterate through each ref and delete the component so there are no dangling component references.
         _.each(this.refs, (ref) => {
-            if (typeof ref === NodeList) {
+            if (window?.NodeList && ref instanceof NodeList) {
                 ref.forEach((elem) => {
                     delete elem.component;
                 });
@@ -3306,7 +3307,7 @@ export default class Component extends Element {
     }
     // 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/mjs/components/_classes/list/ListComponent.js

@@ -133,12 +133,12 @@ export default class ListComponent extends Field {
             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;
         }
@@ -170,7 +170,7 @@ export default class ListComponent extends Field {
                         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 {
@@ -214,7 +214,7 @@ export default class ListComponent extends Field {
                     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/mjs/components/_classes/multivalue/Multivalue.js

@@ -61,7 +61,7 @@ export default class Multivalue extends Field {
         return value;
     }
     get addAnother() {
-        return this.t(this.component.addAnother || 'Add Another');
+        return this.t(this.component.addAnother || 'addAnother');
     }
     /**
      * @returns {Field} - The created field.
@@ -180,7 +180,7 @@ export default class Multivalue extends Field {
                 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/mjs/components/_classes/nestedarray/NestedArrayComponent.js

@@ -18,7 +18,7 @@ export default class NestedArrayComponent extends NestedDataComponent {
         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;
@@ -63,7 +63,7 @@ export default class NestedArrayComponent extends NestedDataComponent {
         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) {
@@ -117,7 +117,7 @@ export default class NestedArrayComponent extends NestedDataComponent {
                 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/mjs/components/address/Address.js

@@ -308,7 +308,7 @@ export default class AddressComponent extends ContainerComponent {
         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/mjs/components/button/Button.js

@@ -336,17 +336,17 @@ export default class ButtonComponent extends Field {
                 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);
@@ -355,7 +355,7 @@ export default class ButtonComponent extends Field {
     }
     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 */
@@ -403,7 +403,7 @@ export default class ButtonComponent extends Field {
                     }
                     // 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).
@@ -436,7 +436,7 @@ export default class ButtonComponent extends Field {
             }
             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/mjs/components/checkbox/Checkbox.js

@@ -187,7 +187,7 @@ export default class CheckBoxComponent extends Field {
         if (_.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/mjs/components/datagrid/DataGrid.js

@@ -339,7 +339,7 @@ export default class DataGridComponent extends NestedArrayComponent {
     }
     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;
@@ -408,7 +408,7 @@ export default class DataGridComponent extends NestedArrayComponent {
             row
         });
         this.checkConditions();
-        this.triggerChange();
+        this.triggerChange({ modified: true });
         this.redraw().then(() => {
             this.focusOnNewRowElement(this.rows[index]);
         });
@@ -487,6 +487,9 @@ export default class DataGridComponent extends NestedArrayComponent {
             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/mjs/components/datetime/DateTime.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import moment from 'moment';
 import FormioUtils from '../../utils';
-import { componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
+import { componentValueTypes, fastCloneDeep, getComponentSavedTypes } from '../../utils/utils';
 import Input from '../_classes/input/Input';
 export default class DateTimeComponent extends Input {
     static schema(...extend) {
@@ -127,6 +127,10 @@ export default class DateTimeComponent extends Input {
             maxDate: _.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 = fastCloneDeep(this.component);
         /* eslint-enable camelcase */
     }
     get defaultSchema() {

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

@@ -2,6 +2,7 @@ import _ from 'lodash';
 import moment from 'moment';
 import Field from '../_classes/field/Field';
 import { boolValue, componentValueTypes, getComponentSavedTypes, getLocaleDateFormatInfo } from '../../utils/utils';
+import { getDayFormat } from '@formio/core';
 export default class DayComponent extends Field {
     static schema(...extend) {
         return Field.schema({
@@ -173,7 +174,7 @@ export default class DayComponent extends Field {
         this._months = [
             {
                 value: '',
-                label: _.get(this.component, 'fields.month.placeholder') || (this.hideInputLabels ? this.t('Month') : '')
+                label: _.get(this.component, 'fields.month.placeholder') || (this.hideInputLabels ? this.t('month') : '')
             },
             { value: 1, label: 'January' },
             { value: 2, label: 'February' },
@@ -267,7 +268,7 @@ export default class DayComponent extends Field {
                 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 @@ export default class DayComponent extends Field {
      * @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 getDayFormat(this.component);
     }
     /**
      * Return the date for this component.

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

@@ -115,10 +115,10 @@ export default class EditGridComponent extends NestedArrayComponent {
     }
     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>
   `;
     }
@@ -1030,7 +1030,7 @@ export default class EditGridComponent extends NestedArrayComponent {
             if (valid === null) {
                 editRow.errors.push({
                     type: 'error',
-                    message: `Invalid row validation for ${this.key}`
+                    message: this.t('componentInvalidRowValidation', { componentKey: this.key })
                 });
             }
         }

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

@@ -201,7 +201,7 @@ export default class FileComponent extends Field {
             this.videoStream = stream;
             const { videoPlayer } = this.refs;
             if (!videoPlayer) {
-                console.warn('Video player not found in template.');
+                console.warn(this.t('videoPlayerNotFound'));
                 this.cameraMode = false;
                 this.redraw();
                 return;
@@ -226,7 +226,7 @@ export default class FileComponent extends Field {
     takePicture() {
         const { videoPlayer } = this.refs;
         if (!videoPlayer) {
-            console.warn('Video player not found in template.');
+            console.warn(this.t('videoPlayerNotFound'));
             this.cameraMode = false;
             this.redraw();
             return;
@@ -631,7 +631,7 @@ export default class FileComponent extends Field {
             file,
             size: file.size,
             status: 'info',
-            message: this.t('Processing file. Please wait...'),
+            message: this.t('waitFileProcessing'),
             hash: '',
         };
     }
@@ -660,7 +660,7 @@ export default class FileComponent extends Field {
         return fileWithSameNameUploaded || fileWithSameNameUploading
             ? {
                 status: 'error',
-                message: this.t(`File with the same name is already ${fileWithSameNameUploading ? 'being ' : ''}uploaded`),
+                message: this.t(fileWithSameNameUploading ? 'fileWithDuplicatedNameInProgress' : 'fileWithDuplicatedNameLoaded'),
             }
             : {};
     }
@@ -669,7 +669,7 @@ export default class FileComponent extends Field {
         if (this.component.filePattern && !this.validatePattern(file, this.component.filePattern)) {
             return {
                 status: 'error',
-                message: this.t('File is the wrong type; it must be {{ pattern }}', {
+                message: this.t('wrongFileType', {
                     pattern: this.component.filePattern,
                 }),
             };
@@ -678,7 +678,7 @@ export default class FileComponent extends Field {
         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,
                 }),
             };
@@ -687,7 +687,7 @@ export default class FileComponent extends Field {
         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,
                 }),
             };
@@ -699,7 +699,7 @@ export default class FileComponent extends Field {
         return !fileService
             ? {
                 status: 'error',
-                message: this.t('File Service not provided.'),
+                message: this.t('noFileService'),
             }
             : {};
     }
@@ -747,7 +747,7 @@ export default class FileComponent extends Field {
                 this.fileDropHidden = false;
                 return {
                     status: 'error',
-                    message: this.t('File processing has been failed.'),
+                    message: this.t('fileProcessingFailed'),
                 };
             }
             finally {
@@ -781,7 +781,7 @@ export default class FileComponent extends Field {
             return this.filesToSync.filesToUpload.push(fileToSync);
         }
         if (this.autoSync) {
-            fileToSync.message = this.t('Ready to be uploaded into storage');
+            fileToSync.message = this.t('readyForUpload');
         }
         this.filesToSync.filesToUpload.push({
             ...fileToSync,
@@ -819,8 +819,8 @@ export default class FileComponent extends Field {
             ...fileInfo,
             status: 'info',
             message: this.autoSync
-                ? this.t('Ready to be removed from storage')
-                : this.t('Preparing file to remove'),
+                ? this.t('readyForRemovingFromStorage')
+                : this.t('preparingFileToRemove'),
         });
         const index = this.dataValue.findIndex(file => file.name === fileInfo.name);
         this.splice(index);
@@ -858,7 +858,7 @@ export default class FileComponent extends Field {
                 }
                 await this.deleteFile(fileToSync);
                 fileToSync.status = 'success';
-                fileToSync.message = this.t('Succefully removed');
+                fileToSync.message = this.t('succefullyRemoved');
             }
             catch (response) {
                 fileToSync.status = 'error';
@@ -926,7 +926,7 @@ export default class FileComponent extends Field {
                 }
                 fileInfo = await 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;
             }
@@ -1025,7 +1025,7 @@ export default class FileComponent extends Field {
             }
             await this.syncFiles();
             return this.shouldSyncFiles
-                ? Promise.reject('Synchronization is failed')
+                ? Promise.reject(this.t('synchronizationFailed'))
                 : Promise.resolve();
         }
         catch (error) {

package/lib/mjs/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.