FIO-7954: refactored translations

src/bootstrap3.ts

@@ -1,7 +1,9 @@
 import bootstrap3 from './templates/bootstrap3';
+import translations from './translations';
 export default {
   framework: 'bootstrap3',
   templates: {
     bootstrap3
   },
+  translations
 };

src/bootstrap4.ts

@@ -1,7 +1,9 @@
 import bootstrap4 from './templates/bootstrap4';
+import translations from './translations';
 export default {
   framework: 'bootstrap4',
   templates: {
     bootstrap4
   },
+  translations
 };

src/bootstrap5.ts

@@ -1,7 +1,9 @@
 import bootstrap5 from './templates/bootstrap5';
+import translations from './translations';
 export default {
   framework: 'bootstrap5',
   templates: {
     bootstrap5
   },
+  translations
 };

src/templates/bootstrap3/builderEditForm/form.ejs

@@ -1,12 +1,12 @@
 <div class="row">
   <div class="col col-sm-6">
-    <p class="lead">{{ctx.t(ctx.componentInfo.title, { _userInput: true })}} {{ctx.t('Component')}}</p>
+    <p class="lead">{{ctx.t(ctx.componentInfo.title, { _userInput: true })}} {{ctx.t('component')}}</p>
   </div>
   {% if (ctx.helplinks) { %}
   <div class="col col-sm-6">
     <div class="pull-right" style="margin-right: 20px; margin-top: 10px">
       <a href="{{ctx.t(ctx.helplinks + ctx.componentInfo.documentation)}}" target="_blank">
-        <i class="{{ctx.iconClass('new-window')}}"> {{ctx.t('Help')}}</i>
+        <i class="{{ctx.iconClass('new-window')}}"> {{ctx.t('help')}}</i>
       </a>
     </div>
   </div>
@@ -19,17 +19,17 @@
     </div>
     {% if (!ctx.preview) { %}
     <div style="margin-top: 10px;">
-      <button class="btn btn-success" style="margin-right: 10px;" ref="saveButton">{{ctx.t('Save')}}</button>
-      <button class="btn btn-default" style="margin-right: 10px;" ref="cancelButton">{{ctx.t('Cancel')}}</button>
-      <button class="btn btn-danger" ref="removeButton">{{ctx.t('Remove')}}</button>
+      <button class="btn btn-success" style="margin-right: 10px;" ref="saveButton">{{ctx.t('save')}}</button>
+      <button class="btn btn-default" style="margin-right: 10px;" ref="cancelButton">{{ctx.t('cancel')}}</button>
+      <button class="btn btn-danger" ref="removeButton">{{ctx.t('remove')}}</button>
     </div>
     {% } %}
   </div>
   {% if (ctx.preview) { %}
   <div class="col col-sm-6">
     <div class="panel panel-default preview-panel">
       <div class="panel-heading">
-        <h3 class="panel-title">{{ctx.t('Preview')}}</h3>
+        <h3 class="panel-title">{{ctx.t('preview')}}</h3>
       </div>
       <div class="panel-body">
         <div class="component-preview" ref="preview">
@@ -43,9 +43,9 @@
     </div>
     {% } %}
     <div style="margin-top: 10px;">
-      <button class="btn btn-success" style="margin-right: 10px;" ref="saveButton">{{ctx.t('Save')}}</button>
-      <button class="btn btn-default" style="margin-right: 10px;" ref="cancelButton">{{ctx.t('Cancel')}}</button>
-      <button class="btn btn-danger" ref="removeButton">{{ctx.t('Remove')}}</button>
+      <button class="btn btn-success" style="margin-right: 10px;" ref="saveButton">{{ctx.t('save')}}</button>
+      <button class="btn btn-default" style="margin-right: 10px;" ref="cancelButton">{{ctx.t('cancel')}}</button>
+      <button class="btn btn-danger" ref="removeButton">{{ctx.t('remove')}}</button>
     </div>
   </div>
   {% } %}

src/templates/bootstrap3/builderPlaceholder/form.ejs

@@ -5,5 +5,5 @@
   data-noattach="true"
   data-position="{{ctx.position}}"
 >
-  {{ctx.t('Drag and Drop a form component')}}
+  {{ctx.t('dragAndDropComponent')}}
 </div>

src/templates/bootstrap3/builderSidebar/form.ejs

@@ -1,5 +1,5 @@
 <div class="builder-sidebar{{ctx.scrollEnabled ? ' builder-sidebar_scroll' : ''}}" ref="sidebar">
-  <input class="form-control builder-sidebar_search" type="search" ref="sidebar-search" placeholder="{{ctx.t('Search field(s)')}}" />
+  <input class="form-control builder-sidebar_search" type="search" ref="sidebar-search" placeholder="{{ctx.t('searchFields')}}" />
   <div id="{{ctx.groupId}}" class="panel-group" ref="sidebar-groups">
     {% ctx.groups.forEach(function(group) { %}
       {{ group }}

src/templates/bootstrap3/builderSidebarGroup/form.ejs

@@ -38,7 +38,7 @@
         {% }) %}
         {{ctx.subgroups.join('')}}
       {% } else { %}
-        <div>{{ctx.t('No Matches Found')}}</div>
+        <div>{{ctx.t('noMatchesFound')}}</div>
       {% } %}
     </div>
   </div>

src/templates/bootstrap3/column-menu/html.ejs

@@ -1,12 +1,12 @@
 <div ref="menu">
   <ul class="dropdown-menu checkbox-menu allow-focus" ref="dropdown">
     {% if (ctx.options.sortable && ctx.component && ctx.component.sortable) { %}
-    <li class="dropdown-item" ref="sortAscending">↑ Sort Ascending</li>
-    <li class="dropdown-item" ref="sortDescending">↓ Sort Descending</li>
+    <li class="dropdown-item" ref="sortAscending">↑ {{ctx.t('sortAscending')}}</li>
+    <li class="dropdown-item" ref="sortDescending">↓ {{ctx.t('sortDescending')}}</li>
     <li ref="rootItem" role="separator" class="divider"></li>
     {% } %}
     <li ref="rootItem" class="dropdown-item">
-      Columns <span class="arrow-right">›</span>
+      {{ctx.t('columns')}} <span class="arrow-right">›</span>
       <ul ref="nestedDropdown" class="dropdown-menu checkbox-menu allow-focus">
         {% ctx.components.forEach(function(comp) { %}
         <li class="dropdown-item">
@@ -18,7 +18,7 @@
                 type="checkbox"
                 class="form-check-input">
             <span class="form-check-label">
-              {{ comp.label }}
+              {{ ctx.t(comp.label, { _userInput: true }) }}
             </span>
           </label>
         </li>
@@ -28,15 +28,15 @@
     {% if (ctx.options.filterable && ctx.component && ctx.component.filterable) { %}
     <li ref="rootItem" role="separator" class="divider"></li>
     <li ref="rootItem" class="dropdown-item">
-      Filter <span class="arrow-right">›</span>
+      {{ctx.t('filter')}} <span class="arrow-right">›</span>
       <ul ref="nestedDropdown" class="dropdown-menu">
         <form ref="filterForm" class="px-3 py-2">
-          Show items with value that:
+          {{ctx.t('showItemsWithValue')}}
           <div class="form-group">
             <select ref="filterType" class="form-control">
               {% ctx.filterTypes.forEach(function(filterType) { %}
                 {% if (!(ctx.hideFilters.includes(ctx.component.key) && (['startsWith', 'contain', 'notContain', 'endsWith', 'matches' ].includes(filterType.type)))) { %}
-                  <option value="{{ filterType.type }}">{{ filterType.label }}</option>
+                  <option value="{{ filterType.type }}">{{ ctx.t(filterType.label) }}</option>
                 {% } %}
               {% }); %}
             </select>
@@ -45,8 +45,8 @@
             <input type="text" ref="filterInput" name="{{ ctx.component && ctx.component.key }}" class="form-control" placeholder="Filter">
           </div>
           <div class="form-row btn-toolbar">
-            <button ref="filterButton" type="button" class="btn btn-primary">Filter</button>
-            <button ref="clearBtn" type="button" class="btn btn-secondary">Clear</button>
+            <button ref="filterButton" type="button" class="btn btn-primary">{{ctx.t('filter')}}</button>
+            <button ref="clearBtn" type="button" class="btn btn-secondary">{{ctx.t('clear')}}</button>
           </div>
         </form>
       </ul>

src/templates/bootstrap3/datagrid/form.ejs

@@ -17,7 +17,7 @@
       <th>
         {% if (!ctx.builder && ctx.hasAddButton && ctx.hasTopSubmit) { %}
         <button class="btn btn-primary formio-button-add-row" ref="{{ctx.datagridKey}}-addRow">
-          <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true })}}
+          <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t(ctx.component.addAnother || 'addAnother', { _userInput: !!ctx.component.addAnother })}}
         </button>
         {% } %}
       </th>
@@ -68,7 +68,7 @@
     <tr>
       <td colspan="{{ctx.component.layoutFixed ? ctx.numColumns :  ctx.numColumns + 1}}">
         <button class="btn btn-primary formio-button-add-row" ref="{{ctx.datagridKey}}-addRow">
-          <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true })}}
+          <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t(ctx.component.addAnother || 'addAnother', { _userInput: !!ctx.component.addAnother })}}
         </button>
       </td>
     </tr>

src/templates/bootstrap3/day/form.ejs

@@ -2,31 +2,31 @@
   {% if (ctx.dayFirst && ctx.showDay) { %}
   <div class="form-group col col-xs-3">
     {% if (!ctx.component.hideInputLabels) { %}
-    <label for="{{ctx.component.key}}-day" class="{% if(ctx.component.fields.day.required) { %}field-required{% } %}">{{ctx.t('Day')}}</label>
+    <label for="{{ctx.component.key}}-day" class="{% if(ctx.component.fields.day.required) { %}field-required{% } %}">{{ctx.t('day')}}</label>
     {% } %}
     <div>{{ctx.day}}</div>
   </div>
   {% } %}
   {% if (ctx.showMonth) { %}
   <div class="form-group col col-xs-4">
     {% if (!ctx.component.hideInputLabels) { %}
-    <label for="{{ctx.component.key}}-month" class="{% if(ctx.component.fields.month.required) { %}field-required{% } %}">{{ctx.t('Month')}}</label>
+    <label for="{{ctx.component.key}}-month" class="{% if(ctx.component.fields.month.required) { %}field-required{% } %}">{{ctx.t('month')}}</label>
     {% } %}
     <div>{{ctx.month}}</div>
   </div>
   {% } %}
   {% if (!ctx.dayFirst && ctx.showDay) { %}
   <div class="form-group col col-xs-3">
     {% if (!ctx.component.hideInputLabels) { %}
-    <label for="{{ctx.component.key}}-day" class="{% if(ctx.component.fields.day.required) { %}field-required{% } %}">{{ctx.t('Day')}}</label>
+    <label for="{{ctx.component.key}}-day" class="{% if(ctx.component.fields.day.required) { %}field-required{% } %}">{{ctx.t('day')}}</label>
     {% } %}
     <div>{{ctx.day}}</div>
   </div>
   {% } %}
   {% if (ctx.showYear) { %}
   <div class="form-group col col-xs-5">
     {% if (!ctx.component.hideInputLabels) { %}
-    <label for="{{ctx.component.key}}-year" class="{% if(ctx.component.fields.year.required) { %}field-required{% } %}">{{ctx.t('Year')}}</label>
+    <label for="{{ctx.component.key}}-year" class="{% if(ctx.component.fields.year.required) { %}field-required{% } %}">{{ctx.t('year')}}</label>
     {% } %}
     <div>{{ctx.year}}</div>
   </div>

src/templates/bootstrap3/editgrid/form.ejs

@@ -14,9 +14,9 @@
     {{row}}
     {% if (ctx.openRows[rowIndex] && !ctx.readOnly) { %}
     <div class="editgrid-actions">
-      <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'Save', { _userInput: true })}}</button>
+      <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'save', { _userInput: !!ctx.component.saveRow })}}</button>
       {% if (ctx.component.removeRow) { %}
-      <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true })}}</button>
+      <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'cancel', { _userInput: !!ctx.component.removeRow })}}</button>
       {% } %}
     </div>
     {% } %}
@@ -35,6 +35,6 @@
 </ul>
 {% if (!ctx.readOnly && ctx.hasAddButton) { %}
 <button class="btn btn-primary formio-button-add-another" ref="{{ctx.ref.addRow}}">
-  <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true })}}
+  <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t(ctx.component.addAnother || 'addAnother', { _userInput: !!ctx.component.addAnother })}}
 </button>
 {% } %}

src/templates/bootstrap3/editgrid/html.ejs

@@ -14,9 +14,9 @@
     {{row}}
     {% if (ctx.openRows[rowIndex] && !ctx.readOnly) { %}
     <div class="editgrid-actions">
-      <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'Save', { _userInput: true })}}</button>
+      <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'save', { _userInput: !!ctx.component.saveRow })}}</button>
       {% if (ctx.component.removeRow) { %}
-      <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true })}}</button>
+      <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'cancel', { _userInput: !!ctx.component.removeRow })}}</button>
       {% } %}
     </div>
     {% } %}

src/templates/bootstrap3/file/form.ejs

@@ -5,10 +5,10 @@
         {% if (!ctx.disabled) { %}
           <div class="col-md-1"></div>
         {% } %}
-        <div class="col-md-{% if (ctx.self.hasTypes) { %}7{% } else { %}9{% } %}"><strong>{{ctx.t('File Name')}}</strong></div>
-        <div class="col-md-2"><strong>{{ctx.t('Size')}}</strong></div>
+        <div class="col-md-{% if (ctx.self.hasTypes) { %}7{% } else { %}9{% } %}"><strong>{{ctx.t('fileName')}}</strong></div>
+        <div class="col-md-2"><strong>{{ctx.t('size')}}</strong></div>
         {% if (ctx.self.hasTypes) { %}
-          <div class="col-md-2"><strong>{{ctx.t('Type')}}</strong></div>
+          <div class="col-md-2"><strong>{{ctx.t('type')}}</strong></div>
         {% } %}
       </div>
     </li>
@@ -59,23 +59,23 @@
 {% if (!ctx.disabled && (ctx.component.multiple || !ctx.files.length)) { %}
   {% if (ctx.self.useWebViewCamera) { %}
     <div class="fileSelector">
-      <button class="btn btn-primary" ref="galleryButton"><i class="fa fa-book"></i> {{ctx.t('Gallery')}}</button>
-      <button class="btn btn-primary" ref="cameraButton"><i class="fa fa-camera"></i> {{ctx.t('Camera')}}</button>
+      <button class="btn btn-primary" ref="galleryButton"><i class="fa fa-book"></i> {{ctx.t('gallery')}}</button>
+      <button class="btn btn-primary" ref="cameraButton"><i class="fa fa-camera"></i> {{ctx.t('camera')}}</button>
     </div>
   {% } else if (!ctx.self.cameraMode) { %}
     <div class="fileSelector" ref="fileDrop" {{ctx.fileDropHidden ? 'hidden' : ''}}>
-      <i class="{{ctx.iconClass('cloud-upload')}}"></i> {{ctx.t('Drop files to attach,')}}
+      <i class="{{ctx.iconClass('cloud-upload')}}"></i> {{ctx.t('dropFilesToAttach')}}
         {% if (ctx.self.imageUpload && ctx.component.webcam) { %}
-          <a href="#" ref="toggleCameraMode"><i class="fa fa-camera"></i> {{ctx.t('Use Camera,')}}</a>
+          <a href="#" ref="toggleCameraMode"><i class="fa fa-camera"></i> {{ctx.t('useCamera') + ','}}</a>
         {% } %}
         {{ctx.t('or')}} <a href="#" ref="fileBrowse" class="browse">{{ctx.t('browse')}}</a>
     </div>
   {% } else { %}
     <div class="video-container">
       <video class="video" autoplay="true" ref="videoPlayer"></video>
     </div>
-    <button class="btn btn-primary" ref="takePictureButton"><i class="fa fa-camera"></i> {{ctx.t('Take Picture')}}</button>
-    <button class="btn btn-primary" ref="toggleCameraMode">{{ctx.t('Switch to file upload')}}</button>
+    <button class="btn btn-primary" ref="takePictureButton"><i class="fa fa-camera"></i> {{ctx.t('takePicture')}}</button>
+    <button class="btn btn-primary" ref="toggleCameraMode">{{ctx.t('switchToFileUpload')}}</button>
   {% } %}
 {% } %}
 {% ctx.statuses.forEach(function(status) { %}
@@ -89,7 +89,7 @@
         {% if (status.status === 'progress') { %}
           <div class="progress">
             <div class="progress-bar" role="progressbar" aria-valuenow="{{status.progress}}" aria-valuemin="0" aria-valuemax="100" style="width: {{status.progress}}%">
-              <span class="sr-only">{{status.progress}}% {{ctx.t('Complete')}}</span>
+              <span class="sr-only">{{status.progress}}% {{ctx.t('completeStatus')}}</span>
             </div>
           </div>
         {% } else if (status.status === 'error'){ %}
@@ -104,16 +104,16 @@
 {% if (!ctx.component.storage || ctx.support.hasWarning) { %}
   <div class="alert alert-warning">
     {% if (!ctx.component.storage) { %}
-      <p>{{ctx.t('No storage has been set for this field. File uploads are disabled until storage is set up.')}}</p>
+      <p>{{ctx.t('noStorageSet')}}</p>
     {% } %}
     {% if (!ctx.support.filereader) { %}
-      <p>{{ctx.t('File API & FileReader API not supported.')}}</p>
+      <p>{{ctx.t('noFileApiSupport')}}</p>
     {% } %}
     {% if (!ctx.support.formdata) { %}
-      <p>{{ctx.t("XHR2's FormData is not supported.")}}</p>
+      <p>{{ctx.t('noFormDataSupport')}}</p>
     {% } %}
     {% if (!ctx.support.progress) { %}
-      <p>{{ctx.t("XHR2's upload progress isn't supported.")}}</p>
+      <p>{{ctx.t('noProgressSupport')}}</p>
     {% } %}
   </div>
 {% } %}

src/templates/bootstrap3/grid/html.ejs

@@ -7,7 +7,7 @@
         {% if (ctx.component.enableRowSelect) { %}
         <div style="min-height: 20px" >
             {% if (ctx.selectedRows) { %}
-            <span style=" font-size: 13px">{{ctx.selectedRows}} selected</span>
+            <span style=" font-size: 13px">{{ctx.selectedRows}} {{ctx.t('selected')}}</span>
             {% } %}
         </div>
         {% } %}
@@ -24,7 +24,7 @@
         <thead>
           <tr>
             {% if (!ctx.component.components.length) { %}
-              <th>No components have been set up to display in the Data Table. "Table View" must be checked for components to render.</th>
+              <th>{{ctx.t('noComponentsSetInGrid')}}</th>
             {% } %}
             {% if (ctx.component.enableRowSelect) { %}
             <th style="width: 2rem">
@@ -35,7 +35,7 @@
             {% ctx.component.components.forEach(function(comp, i) { %}
               {% if (comp.show) { %}
               <th>
-                <span>{{ comp.label || comp.key }}</span>
+                <span>{{ ctx.t(comp.label || comp.key, { _userInput: true }) }}</span>
                 {% if (ctx.options.sortable && comp.sortable) { %}
                 <span class="sort-btn {{ ctx.component.sort.key === comp.key ? 'sorted' : '' }}" ref="sort">
                   {{ ctx.component.sort.isAsc ? '↑' : '↓' }}
@@ -56,7 +56,7 @@
               && !ctx.options.pdf) { %}
             <th class="formio-grid-ops border-left-0" style="background-color: white; position: sticky; padding: 0;">
               <div class="formio-actions-header">
-                <span>Actions</span>
+                <span>{{ctx.t('actions')}}</span>
                 {% if (ctx.component.showDeleteAllBtn && ctx.data.length) { %}
                 <button class="btn btn p-0 delete-all-btn delete-all-btn formio-grid-ops-button {{ ctx.options.readOnly ? 'disabled' : '' }}" ref="deleteAll" style="padding: 0;"><i class="fa fa-trash" aria-hidden="true"></i></button>
                 {% } %}

src/templates/bootstrap3/modaldialog/form.ejs

@@ -6,7 +6,7 @@
       type="button"
       role="button"
       class="btn btn-primary btn-xs formio-modaledit-close">
-      {{ctx.t('Close')}}
+      {{ctx.t('close')}}
     </button>
     <div ref="inner" class="reset-margins"></div>
   </div>

src/templates/bootstrap3/pagination/html.ejs

@@ -1,7 +1,7 @@
 <div class="common-pagination" role="toolbar" style="font-size: small; display: flex; align-items: center; margin-left: auto" {{ctx.component.showAddBtn ? 'style="width: 95%;"' : 'style="width: 100%;"'}}>
     <div class="items-per-page input-group" style="display: flex; align-items: center;">
         <div class="input-group-append">
-            <span class="">Items per page:</span>
+            <span class="">{{ctx.t('gridItemsPerPage')}}</span>
         </div>
         <select ref="itemsPerPage" class="mr-1" style="border: none;
         border-bottom: 1px solid black; outline: none; cursor: pointer; margin-right: 10px">
@@ -10,7 +10,7 @@
             <option value="25">25</option>
             <option value="50">50</option>
             <option value="100">100</option>
-            <option value="-1">All</option>
+            <option value="-1">{{ctx.t('gridAllItems')}}</option>
         </select>
     </div>
     <span ref="itemsCount" class="items-count p-1">

src/templates/bootstrap3/resourceAdd/form.ejs

@@ -9,7 +9,7 @@
       <td colspan="2">
         <button class="btn btn-primary formio-button-add-resource" ref="addResource">
           <i class="{{ctx.iconClass('plus')}}"></i>
-          {{ctx.t(ctx.component.addResourceLabel || 'Add Resource', { _userInput: true })}}
+          {{ctx.t(ctx.component.addResourceLabel || 'addResource', { _userInput: !!ctx.component.addResourceLabel })}}
         </button>
       </td>
     </tr>