@formio/js 5.0.0-dev.5956.0e71b6d → 5.0.0-dev.5957.bed9ce0

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) {
@@ -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/field/Field.d.ts

@@ -1,9 +1,9 @@
 export default class Field extends Component {
     /**
      * @param {object} element - The component to create.
-     * @returns {string} - The rendered HTML string of a component
+     * @returns {Field} - The created field.
      */
-    render(element: object): string;
+    render(element: object): Field;
     /**
     /* Saves current caret position to restore it after the component is redrawn
      * @param {HTMLElement} element - The element to save the caret position for.

package/lib/cjs/components/_classes/field/Field.js

@@ -11,7 +11,7 @@ const Component_1 = __importDefault(require("../component/Component"));
 class Field extends Component_1.default {
     /**
      * @param {object} element - The component to create.
-     * @returns {string} - The rendered HTML string of a component
+     * @returns {Field} - The created field.
      */
     render(element) {
         if (this.noField) {

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/nested/NestedComponent.d.ts

@@ -146,7 +146,7 @@ export default class NestedComponent extends Field {
      */
     addComponent(component: import('@formio/core').Component, data?: object, before?: HTMLElement, noAdd?: boolean | undefined): any;
     beforeFocus(): void;
-    render(children: any): string;
+    render(children: any): Field;
     renderComponents(components: any): any;
     attach(element: any): Promise<[void, void]>;
     /**

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.d.ts

@@ -60,7 +60,7 @@ export default class AddressComponent extends ContainerComponent {
     renderElement(value: any): any;
     renderRow(value: any, index: any): any;
     renderGrid(): any;
-    render(): string;
+    render(): Field;
     onSelectAddress(address: any, element: any, index: any): void;
     addRow(): void;
     attach(element: any): Promise<void>;
@@ -71,3 +71,4 @@ export default class AddressComponent extends ContainerComponent {
     getValueAsString(value: any, options: any): any;
 }
 import ContainerComponent from '../container/Container';
+import Field from '../_classes/field/Field';

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.d.ts

@@ -21,7 +21,7 @@ export default class ButtonComponent extends Field {
     get clicked(): any;
     get defaultValue(): boolean;
     get oauthConfig(): any;
-    render(): string;
+    render(): Field;
     attachButton(): void;
     hasError: boolean | undefined;
     isDisabledOnInvalid: any;

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.d.ts

@@ -39,7 +39,7 @@ export default class CheckBoxComponent extends Field {
     get labelInfo(): {
         hidden: boolean;
     };
-    render(): string;
+    render(): Field;
     attach(element: any): Promise<void>;
     input: any;
     detach(element: any): void;

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/columns/Columns.d.ts

@@ -14,7 +14,7 @@ export default class ColumnsComponent extends NestedComponent {
     get columnKey(): string;
     columns: any[] | undefined;
     labelIsHidden(): boolean;
-    render(): string;
+    render(): import("../_classes/field/Field").default;
     justifyColumn(items: any, index: any): boolean;
     justify(): any;
     get gridSize(): number;

package/lib/cjs/components/datagrid/DataGrid.d.ts

@@ -55,7 +55,7 @@ export default class DataGridComponent extends NestedArrayComponent {
     hasTopSubmit(): any;
     hasBottomSubmit(): any;
     get canAddColumn(): boolean;
-    render(): string;
+    render(): import("../_classes/field/Field").default;
     getRows(): {}[];
     getColumns(): any[];
     hasHeader(): any;

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;

package/lib/cjs/components/day/Day.d.ts

@@ -85,7 +85,7 @@ export default class DayComponent extends Field {
     }[] | undefined;
     setErrorClasses(elements: any, dirty: any, hasError: any): void;
     dayFirst: any;
-    render(): string;
+    render(): Field;
     renderField(name: any): any;
     attach(element: any): Promise<void>;
     set disabled(disabled: any);

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

@@ -173,7 +173,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 +267,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,

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.d.ts

@@ -45,7 +45,7 @@ export default class FileComponent extends Field {
         type: number;
         actions: number;
     };
-    render(): string;
+    render(): Field;
     getVideoStream(constraints: any): any;
     stopVideoStream(videoStream: any): void;
     getFrame(videoPlayer: any): Promise<any>;

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.js

@@ -213,7 +213,7 @@ class FormComponent extends Component_1.default {
     /* eslint-enable max-statements */
     render() {
         if (this.builderMode) {
-            return super.render(this.component.label || 'Nested form');
+            return super.render(this.t(this.component.label || 'nestedForm'));
         }
         const subform = this.subForm ? this.subForm.render() : this.renderTemplate('loading');
         return super.render(subform);
@@ -226,13 +226,13 @@ class FormComponent extends Component_1.default {
      */
     getValueAsString(value, options) {
         if (!value) {
-            return 'No data provided';
+            return this.t('noDataProvided');
         }
         if (!value.data && value._id) {
             return value._id;
         }
         if (!value.data || !Object.keys(value.data).length) {
-            return 'No data provided';
+            return this.t('noDataProvided');
         }
         if (options === null || options === void 0 ? void 0 : options.email) {
             let result = (`
@@ -639,7 +639,7 @@ class FormComponent extends Component_1.default {
                 : {};
             this.subForm.setUrl(submissionUrl, Object.assign(Object.assign({}, this.options), options));
             this.subForm.loadSubmission().catch((err) => {
-                console.error(`Unable to load subform submission ${submission._id}:`, err);
+                console.error(this.t('subformSubmissionLoadingError', { submissionId: submission._id }), err);
             });
         }
         else {