Table: language translation based on RFC 5646 (#3056)

* 3045 - setting the default lang selection and following RFC 5646 pattern for lang

* 3045 - fixes

* 3045 -  translation code optimizations

* 3045 - test cases fixes

stencil-workspace/src/components/modus-table/modus-table.e2e.ts

@@ -1350,10 +1350,23 @@ describe('modus-table', () => {
     expect(paginationText).toEqualText('Showing result');
 
     await page.evaluate(() => {
-      Object.defineProperty(navigator, 'language', { value: 'fr-FR', configurable: true });
+      document.documentElement.lang = 'fr-FR';
     });
+
     await page.click('modus-table >>> .pagination-container');
     await page.waitForChanges();
     expect(paginationText).toEqualText('Afficher le résultat');
+
+    await page.evaluate(() => {
+      document.documentElement.lang = '';
+    });
+
+    await page.evaluate(() => {
+      Object.defineProperty(navigator, 'language', { value: 'de-DE', configurable: true });
+    });
+
+    await page.click('modus-table >>> .pagination-container');
+    await page.waitForChanges();
+    expect(paginationText).toEqualText('Ergebnis anzeigen');
   });
 });

stencil-workspace/src/components/modus-table/modus-table.tsx

@@ -74,6 +74,7 @@ import { ModusTableBody } from './parts/modus-table-body';
 import { TableContext, TableCellEdited } from './models/table-context.models';
 import { TableRowActionWithOverflow } from './models/table-row-actions.models';
 import { createGuid } from '../../utils/utils';
+import { getTranslations } from '../../lang/translations';
 
 /**
  * @slot customFooter - Slot for custom footer.
@@ -401,6 +402,7 @@ export class ModusTable {
   }
 
   componentWillRender(): void {
+    getTranslations();
     this._context = this.getTableContext();
   }
 

stencil-workspace/src/components/modus-table/parts/columnHeader/modus-table-column-header-label.tsx

@@ -6,7 +6,7 @@ import {
 import { Column, RowData, SortDirection } from '@tanstack/table-core';
 import { ModusIconMap } from '../../../../icons/ModusIconMap';
 import { KEYBOARD_ENTER } from '../../modus-table.constants';
-import { getTranslations } from '../../../../lang/translations';
+import { translate } from '../../../../lang/translations';
 
 interface ModusTableColumnHeaderLabelProps {
   column: Column<RowData, unknown>;
@@ -63,12 +63,12 @@ function getSortingStatus(column: Column<unknown, unknown>, isColumnResizing: bo
   return isColumnResizing
     ? '' // When column resize is enabled, we don't show the tooltip.
     : column.getIsSorted() === 'asc'
-      ? getTranslations().sortedAscending
+      ? translate('sortedAscending')
       : column.getIsSorted() === 'desc'
-        ? getTranslations().sortedDescending
+        ? translate('sortedDescending')
         : column.getNextSortingOrder() === 'asc'
-          ? getTranslations().sortAscending
-          : getTranslations().sortDescending;
+          ? translate('sortAscending')
+          : translate('sortDescending');
 }
 
 /**

stencil-workspace/src/components/modus-table/parts/modus-table-pagination.tsx

@@ -3,7 +3,7 @@ import {
   h, // eslint-disable-line @typescript-eslint/no-unused-vars
 } from '@stencil/core';
 import { TableContext } from '../models/table-context.models';
-import { getTranslations } from '../../../lang/translations';
+import { translate } from '../../../lang/translations';
 
 interface ModusTablePaginationProps {
   context: TableContext;
@@ -26,18 +26,18 @@ export const ModusTablePagination: FunctionalComponent<ModusTablePaginationProps
   return (
     <div class="pagination-container">
       <div class="items-per-page">
-        <span>{getTranslations().pageView}</span>
+        <span>{translate('pageView')}</span>
         <modus-select
           ariaLabel="Select page size"
           options-display-prop="display"
           options={optionsList}
-          placeholder={getTranslations().pleaseSelect}
+          placeholder={translate('pleaseSelect')}
           onValueChange={handleChange}
           value={selectedPageSize}></modus-select>
       </div>
       <div class="pagination-and-count">
         <div class="total-count">
-          <span>{getTranslations().showingResult}</span>
+          <span>{translate('showingResult')}</span>
           <span>{pageIndex * pageSize + 1}</span>
           <span>-</span>
           <span>
@@ -47,7 +47,7 @@ export const ModusTablePagination: FunctionalComponent<ModusTablePaginationProps
                 : totalCount
               : (pageIndex + 1) * pageSize}
           </span>
-          <span>{getTranslations().of}</span>
+          <span>{translate('of')}</span>
           <span>
             {!options.manualPagination && options.paginateExpandedRows ? getExpandedRowModel().rows.length : totalCount}
           </span>{' '}

stencil-workspace/src/lang/translations.ts

@@ -2,8 +2,8 @@ interface Translation {
   [key: string]: string;
 }
 
-const translations: Record<string, Translation> = {
-  en: {
+const translationStore: Record<string, Translation> = {
+  'en-US': {
     showingResult: 'Showing result',
     of: 'of',
     pageView: 'Page View',
@@ -13,7 +13,7 @@ const translations: Record<string, Translation> = {
     sortedAscending: 'Sorted Ascending',
     sortedDescending: 'Sorted Descending',
   },
-  es: {
+  'es-ES': {
     showingResult: 'Mostrando resultado',
     of: 'de',
     pageView: 'Vista de página',
@@ -23,7 +23,7 @@ const translations: Record<string, Translation> = {
     sortedAscending: 'Ordenado de forma ascendente',
     sortedDescending: 'Ordenado de forma descendente',
   },
-  fr: {
+  'fr-FR': {
     showingResult: 'Afficher le résultat',
     of: 'de',
     pageView: 'Prévisualisation',
@@ -33,7 +33,7 @@ const translations: Record<string, Translation> = {
     sortedAscending: 'Trié par ordre croissant',
     sortedDescending: 'Trié par ordre décroissant',
   },
-  de: {
+  'de-DE': {
     showingResult: 'Ergebnis anzeigen',
     of: 'von',
     pageView: 'Seitenansicht',
@@ -43,7 +43,7 @@ const translations: Record<string, Translation> = {
     sortedAscending: 'Aufsteigend sortiert',
     sortedDescending: 'Absteigend sortiert',
   },
-  it: {
+  'it-IT': {
     showingResult: 'Visualizzazione del risultato',
     of: 'di',
     pageView: 'Vista della pagina',
@@ -53,7 +53,7 @@ const translations: Record<string, Translation> = {
     sortedAscending: 'Ordinato in ordine crescente',
     sortedDescending: 'Ordinato in ordine decrescente',
   },
-  fi: {
+  'fi-FI': {
     showingResult: 'Näytetään tulos',
     of: '/',
     pageView: 'Sivunäkymä',
@@ -65,12 +65,30 @@ const translations: Record<string, Translation> = {
   },
 };
 
-function getTranslations(): Translation {
-  let lang = navigator?.language?.slice(0, 2);
-  if (!lang) {
-    lang = document.documentElement.lang?.slice(0, 2);
+const langMap: Record<string, string> = {
+  en: 'en-US',
+  es: 'es-ES',
+  fr: 'fr-FR',
+  de: 'de-DE',
+  it: 'it-IT',
+  fi: 'fi-FI',
+};
+
+let translations = translationStore['en-US'];
+
+function getTranslations(): void {
+  const lang = document.documentElement.lang || navigator?.language;
+  if (translationStore[lang]) {
+    translations = translationStore[lang];
+  } else {
+    const baseLang = lang?.split('-')[0];
+    const mappedLang = langMap[baseLang] || 'en-US';
+    translations = translationStore[mappedLang];
   }
-  return translations[lang] || translations['en'];
 }
 
-export { translations, getTranslations };
+function translate(key: string): string {
+  return translations[key];
+}
+
+export { translations, getTranslations, translate };