fix(core): rename i18n to translater & fix few other issues (#174)

* fix(core): rename i18n to translater & fix few other issues
- fix couple of issues found for the lib to work with Aurelia-Slickgrid

examples/webpack-demo-vanilla-bundle/src/examples/example10.ts

@@ -126,7 +126,7 @@ export class Example10 {
 
     this.gridOptions = {
       enableTranslate: true,
-      i18n: this.translateService, // pass the TranslateService instance to the grid
+      translater: this.translateService, // pass the TranslateService instance to the grid
       enableAutoResize: false,
       gridHeight: 275,
       gridWidth: 900,

packages/common/src/editors/__tests__/dateEditor.spec.ts

@@ -19,7 +19,7 @@ const dataViewStub = {
 const gridOptionMock = {
   autoCommitEdit: false,
   editable: true,
-  i18n: null,
+  translater: null,
 } as unknown as GridOption;
 
 const getEditorLockMock = {
@@ -96,7 +96,7 @@ describe('DateEditor', () => {
     });
 
     it('should initialize the editor', () => {
-      gridOptionMock.i18n = translateService;
+      gridOptionMock.translater = translateService;
       editor = new DateEditor(editorArguments);
       const editorCount = divContainer.querySelectorAll('input.editor-text.editor-startDate').length;
       expect(editorCount).toBe(1);
@@ -435,7 +435,7 @@ describe('DateEditor', () => {
 
     describe('with different locale', () => {
       it('should display text in new locale', (done) => {
-        gridOptionMock.i18n = translateService;
+        gridOptionMock.translater = translateService;
 
         translateService.use('fr-CA'); // will be trimmed to "fr"
         editor = new DateEditor(editorArguments);

packages/common/src/editors/__tests__/longTextEditor.spec.ts

@@ -18,7 +18,7 @@ const dataViewStub = {
 const gridOptionMock = {
   autoCommitEdit: false,
   editable: true,
-  i18n: null,
+  translater: null,
   editorTypingDebounce: 0,
 } as unknown as GridOption;
 
@@ -101,7 +101,7 @@ describe('LongTextEditor', () => {
     });
 
     it('should initialize the editor', () => {
-      gridOptionMock.i18n = translateService;
+      gridOptionMock.translater = translateService;
       editor = new LongTextEditor(editorArguments);
       const editorCount = document.body.querySelectorAll('.slick-large-editor-text.editor-title textarea').length;
       const editorTextCounter = document.body.querySelectorAll<HTMLDivElement>('.slick-large-editor-text.editor-title .editor-footer .counter');
@@ -120,7 +120,7 @@ describe('LongTextEditor', () => {
     });
 
     it('should initialize the editor with default constant text when translate service is not provided', () => {
-      gridOptionMock.i18n = undefined as any;
+      gridOptionMock.translater = undefined as any;
       editor = new LongTextEditor(editorArguments);
       const editorCount = document.body.querySelectorAll('.slick-large-editor-text.editor-title textarea').length;
       const editorFooterElm = document.body.querySelector('.slick-large-editor-text.editor-title .editor-footer') as HTMLDivElement;

packages/common/src/editors/__tests__/multipleSelectEditor.spec.ts

@@ -20,7 +20,7 @@ const dataViewStub = {
 const gridOptionMock = {
   autoCommitEdit: false,
   editable: true,
-  i18n: null,
+  translater: null,
 } as unknown as GridOption;
 
 const getEditorLockMock = {
@@ -83,7 +83,7 @@ describe('MultipleSelectEditor', () => {
 
     it('should initialize the editor', () => {
       (mockColumn.internalColumnEditor as ColumnEditor).collection = [{ value: 'male', label: 'male' }, { value: 'female', label: 'female' }];
-      gridOptionMock.i18n = translateService;
+      gridOptionMock.translater = translateService;
       editor = new MultipleSelectEditor(editorArguments);
       const editorCount = document.body.querySelectorAll('select.ms-filter.editor-gender').length;
       const spy = jest.spyOn(editor, 'show');

packages/common/src/editors/__tests__/selectEditor.spec.ts

@@ -20,7 +20,7 @@ const dataViewStub = {
 const gridOptionMock = {
   autoCommitEdit: false,
   editable: true,
-  i18n: null as any,
+  translater: null as any,
 } as unknown as GridOption;
 
 const getEditorLockMock = {
@@ -141,7 +141,7 @@ describe('SelectEditor', () => {
 
     it('should initialize the editor', () => {
       (mockColumn.internalColumnEditor as ColumnEditor).collection = [{ value: 'male', label: 'male' }, { value: 'female', label: 'female' }];
-      gridOptionMock.i18n = translateService;
+      gridOptionMock.translater = translateService;
       editor = new SelectEditor(editorArguments, true);
       editor.focus();
       const editorCount = document.body.querySelectorAll('select.ms-filter.editor-gender').length;
@@ -154,7 +154,7 @@ describe('SelectEditor', () => {
       const promise = new Promise(resolve => resolve(mockCollection));
       (mockColumn.internalColumnEditor as ColumnEditor).collection = null as any;
       (mockColumn.internalColumnEditor as ColumnEditor).collectionAsync = promise;
-      gridOptionMock.i18n = translateService;
+      gridOptionMock.translater = translateService;
 
       editor = new SelectEditor(editorArguments, true);
       const disableSpy = jest.spyOn(editor, 'disable');

packages/common/src/editors/__tests__/singleSelectEditor.spec.ts

@@ -18,7 +18,7 @@ const dataViewStub = {
 const gridOptionMock = {
   autoCommitEdit: false,
   editable: true,
-  i18n: null,
+  translater: null,
 } as unknown as GridOption;
 
 const getEditorLockMock = {
@@ -81,7 +81,7 @@ describe('SingleSelectEditor', () => {
 
     it('should initialize the editor', () => {
       (mockColumn.internalColumnEditor as ColumnEditor).collection = [{ value: 'male', label: 'male' }, { value: 'female', label: 'female' }];
-      gridOptionMock.i18n = translateService;
+      gridOptionMock.translater = translateService;
       editor = new SingleSelectEditor(editorArguments);
       const editorCount = document.body.querySelectorAll('select.ms-filter.editor-gender').length;
 

packages/common/src/editors/dateEditor.ts

@@ -58,8 +58,8 @@ export class DateEditor implements Editor {
     }
     this.grid = args.grid;
     this.gridOptions = (this.grid.getOptions() || {}) as GridOption;
-    if (this.gridOptions && this.gridOptions.i18n) {
-      this._translaterService = this.gridOptions.i18n;
+    if (this.gridOptions?.translater) {
+      this._translaterService = this.gridOptions.translater;
     }
     this.init();
   }

packages/common/src/editors/longTextEditor.ts

@@ -54,8 +54,8 @@ export class LongTextEditor implements Editor {
     this.grid = args.grid;
     this.gridOptions = args.grid && args.grid.getOptions() as GridOption;
     const options = this.gridOptions || this.args.column.params || {};
-    if (options && options.i18n) {
-      this._translater = options.i18n;
+    if (options?.translater) {
+      this._translater = options.translater;
     }
 
     // get locales provided by user in forRoot or else use default English locales via the Constants

packages/common/src/editors/selectEditor.ts

@@ -88,8 +88,8 @@ export class SelectEditor implements Editor {
     }
     this.grid = args.grid;
     this.gridOptions = (this.grid.getOptions() || {}) as GridOption;
-    if (this.gridOptions && this.gridOptions.i18n) {
-      this._translaterService = this.gridOptions.i18n;
+    if (this.gridOptions?.translater) {
+      this._translaterService = this.gridOptions.translater;
     }
 
     // get locales provided by user in main file or else use default English locales via the Constants

packages/common/src/enums/index.ts

@@ -1,23 +1,23 @@
 export * from './caseType.enum';
+export * from './columnReorderFunction.type';
 export * from './compositeEditorModalType.type';
-export * from './fieldType.enum';
-export * from './extensionList.type';
-export * from './eventNamingStyle.enum';
-export * from './emitterType.enum';
-export * from './fileType.enum';
 export * from './delimiterType.enum';
-export * from './columnReorderFunction.type';
+export * from './emitterType.enum';
+export * from './eventNamingStyle.enum';
+export * from './extensionList.type';
 export * from './extensionName.enum';
+export * from './fieldType.enum';
+export * from './fileType.enum';
 export * from './filterMultiplePassType.enum';
+export * from './filterMultiplePassTypeString.type';
+export * from './gridAutosizeColsMode.enum';
+export * from './gridStateType.enum';
+export * from './keyCode.enum';
+export * from './operatorString.type';
+export * from './operatorType.enum';
+export * from './searchTerm.type';
+export * from './slickControlList.enum';
+export * from './slickPluginList.enum';
+export * from './sortDirection.enum';
 export * from './sortDirectionString.type';
 export * from './sortDirectionNumber.enum';
-export * from './sortDirection.enum';
-export * from './slickPluginList.enum';
-export * from './slickControlList.enum';
-export * from './searchTerm.type';
-export * from './operatorType.enum';
-export * from './operatorString.type';
-export * from './keyCode.enum';
-export * from './gridStateType.enum';
-export * from './gridAutosizeColsMode.enum';
-export * from './filterMultiplePassTypeString.type';

packages/common/src/formatters/__tests__/translateBooleanFormatter.spec.ts

@@ -16,48 +16,48 @@ describe('the Translate Boolean Formatter', () => {
 
   it('should return an empty string when null value is passed', async () => {
     await translateService.use('fr');
-    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({ i18n: translateService });
+    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({ translater: translateService });
     const output = translateBooleanFormatter(1, 1, null, {} as Column, {}, gridStub);
     expect(output).toBe('');
   });
 
   it('should return an empty string when empty string value is passed', async () => {
     await translateService.use('fr');
-    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({ i18n: translateService });
+    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({ translater: translateService });
     const output = translateBooleanFormatter(1, 1, '', {} as Column, {}, gridStub);
     expect(output).toBe('');
   });
 
   it('should return the translated value when value passed is boolean', async () => {
     await translateService.use('fr');
-    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({ i18n: translateService });
+    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({ translater: translateService });
     const output = translateBooleanFormatter(1, 1, 'TRUE', {} as Column, {}, gridStub);
     expect(output).toBe('Vrai');
   });
 
   it('should return the translated value when value passed is a string', async () => {
     await translateService.use('fr');
-    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({ i18n: translateService });
+    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({ translater: translateService });
     const output = translateBooleanFormatter(1, 1, 'TRUE', {} as Column, {}, gridStub);
     expect(output).toBe('Vrai');
   });
 
-  it('should return the translated value when value passed is a string and i18n service is passed as a ColumnDef Params', async () => {
+  it('should return the translated value when value passed is a string and translater service is passed as a ColumnDef Params', async () => {
     await translateService.use('fr');
     (gridStub.getOptions as jest.Mock).mockReturnValueOnce({});
-    const output = translateBooleanFormatter(1, 1, 'TRUE', { params: { i18n: translateService } } as Column, {}, gridStub);
+    const output = translateBooleanFormatter(1, 1, 'TRUE', { params: { translater: translateService } } as Column, {}, gridStub);
     expect(output).toBe('Vrai');
   });
 
-  it('should return the translated value when value passed is a string and i18n service is passed as a ColumnDef Params without any Grid object', async () => {
+  it('should return the translated value when value passed is a string and translater service is passed as a ColumnDef Params without any Grid object', async () => {
     await translateService.use('fr');
-    const output = translateBooleanFormatter(1, 1, 'TRUE', { params: { i18n: translateService } } as Column, {});
+    const output = translateBooleanFormatter(1, 1, 'TRUE', { params: { translater: translateService } } as Column, {}, {} as any);
     expect(output).toBe('Vrai');
   });
 
   it('should convert any type of value to string', async () => {
     await translateService.use('fr');
-    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({ i18n: translateService });
+    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({ translater: translateService });
     const output = translateBooleanFormatter(1, 1, 99, {} as Column, {}, gridStub);
     expect(output).toBe('99');
   });

packages/common/src/formatters/__tests__/translateFormatter.spec.ts

@@ -17,43 +17,43 @@ describe('the Translate Formatter', () => {
 
   it('should return an empty string when null value is passed', async () => {
     await translateService.use('fr');
-    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({ i18n: translateService });
+    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({ translater: translateService });
     const output = translateFormatter(1, 1, null, {} as Column, {}, gridStub);
     expect(translateService.getCurrentLanguage()).toBe('fr');
     expect(output).toBe('');
   });
 
   it('should return an empty string when no value is passed', async () => {
     await translateService.use('fr');
-    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({ i18n: translateService });
+    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({ translater: translateService });
     const output = translateFormatter(1, 1, '', {} as Column, {}, gridStub);
     expect(translateService.getCurrentLanguage()).toBe('fr');
     expect(output).toBe('');
   });
 
   it('should return the translated value as string', async () => {
     await translateService.use('fr');
-    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({ i18n: translateService });
+    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({ translater: translateService });
     const output = translateFormatter(1, 1, 'HELLO', {} as Column, {}, gridStub);
     expect(output).toBe('Bonjour');
   });
 
-  it('should return the translated value when value passed is a string and i18n service is passed as a ColumnDef Params', async () => {
+  it('should return the translated value when value passed is a string and translater service is passed as a ColumnDef Params', async () => {
     await translateService.use('fr');
     (gridStub.getOptions as jest.Mock).mockReturnValueOnce({});
-    const output = translateFormatter(1, 1, 'HELLO', { params: { i18n: translateService } } as Column, {}, gridStub);
+    const output = translateFormatter(1, 1, 'HELLO', { params: { translater: translateService } } as Column, {}, gridStub);
     expect(output).toBe('Bonjour');
   });
 
-  it('should return the translated value when value passed is a string and i18n service is passed as a ColumnDef Params without any Grid object', async () => {
+  it('should return the translated value when value passed is a string and translater service is passed as a ColumnDef Params without any Grid object', async () => {
     await translateService.use('fr');
-    const output = translateFormatter(1, 1, 'HELLO', { params: { i18n: translateService } } as Column, {});
+    const output = translateFormatter(1, 1, 'HELLO', { params: { translater: translateService } } as Column, {}, {} as any);
     expect(output).toBe('Bonjour');
   });
 
   it('should convert any type of value to string', async () => {
     await translateService.use('fr');
-    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({ i18n: translateService });
+    (gridStub.getOptions as jest.Mock).mockReturnValueOnce({ translater: translateService });
     const output = translateFormatter(1, 1, 99, {} as Column, {}, gridStub);
     expect(output).toBe('99');
   });

packages/common/src/formatters/formatters.index.ts

@@ -227,10 +227,10 @@ export const Formatters = {
   /** Takes a cell value number (between 0-100) and displays Bootstrap "progress-bar" a red (<30), silver (>30 & <70) or green (>=70) bar */
   progressBar: progressBarFormatter,
 
-  /** Takes a cell value and translates it (i18n). Requires an instance of the Translate Service:: `i18n: this.translate */
+  /** Takes a cell value and translates it. Requires an instance of the Translate Service:: `translater: this.translate */
   translate: translateFormatter,
 
-  /** Takes a boolean value, cast it to upperCase string and finally translates it (i18n). */
+  /** Takes a boolean value, cast it to upperCase string and finally translates it. Requires an instance of the Translate Service:: `translater: this.translate */
   translateBoolean: translateBooleanFormatter,
 
   /** Formatter that must be use with a Tree Data column */

packages/common/src/formatters/translateBooleanFormatter.ts

@@ -3,16 +3,16 @@ import { Formatter } from './../interfaces/index';
 /** Takes a boolean value, cast it to upperCase string and finally translates it (i18n). */
 export const translateBooleanFormatter: Formatter = (_row, _cell, value, columnDef, _dataContext, grid) => {
   const gridOptions = (grid && typeof grid.getOptions === 'function') ? grid.getOptions() : {};
-  const i18n = gridOptions.i18n || (columnDef && columnDef.params && columnDef.params.i18n);
+  const translater = gridOptions.translater || (columnDef && columnDef.params && columnDef.params.translater);
 
-  if (!i18n || typeof i18n.translate !== 'function') {
+  if (!translater || typeof translater.translate !== 'function') {
     throw new Error(`The translate formatter requires the Translate Service to be provided as a Grid Options or Column Definition "i18n".
-    For example: this.gridOptions = { enableTranslate: true, i18n: this.translateService }`);
+    For example: this.gridOptions = { enableTranslate: true, translater: this.translateService }`);
   }
 
   // make sure the value is a string (for example a boolean value would throw an error)
   if (value !== undefined && value !== null && typeof value !== 'string') {
     value = value + '';
   }
-  return value ? i18n.translate(value.toUpperCase() as string) : '';
+  return value ? translater.translate(value.toUpperCase() as string) : '';
 };

packages/common/src/formatters/translateFormatter.ts

@@ -1,19 +1,19 @@
 import { Formatter } from './../interfaces/index';
 
-/** Takes a cell value and translates it (i18n). Requires an instance of the Translate Service:: `i18n: this.translate */
+/** Takes a cell value and translates it (translater). Requires an instance of the Translate Service:: `translater: this.translate */
 export const translateFormatter: Formatter = (_row, _cell, value, columnDef, _dataContext, grid) => {
   const gridOptions = (grid && typeof grid.getOptions === 'function') ? grid.getOptions() : {};
-  const i18n = gridOptions.i18n || (columnDef && columnDef.params && columnDef.params.i18n);
+  const translater = gridOptions.translater || (columnDef && columnDef.params && columnDef.params.translater);
 
-  if (!i18n || typeof i18n.translate !== 'function') {
-    throw new Error(`The translate formatter requires the Translate Service to be provided as a Grid Options or Column Definition "i18n".
-    For example: this.gridOptions = { enableTranslate: true, i18n: this.translateService }`);
+  if (!translater || typeof translater.translate !== 'function') {
+    throw new Error(`The translate formatter requires the Translate Service to be provided as a Grid Options or Column Definition "translater".
+    For example: this.gridOptions = { enableTranslate: true, translater: this.translateService }`);
   }
 
   // make sure the value is a string (for example a boolean value would throw an error)
   if (value !== undefined && value !== null && typeof value !== 'string') {
     value = value + '';
   }
 
-  return value ? i18n.translate(value) : '';
+  return value ? translater.translate(value) : '';
 };

packages/common/src/global-grid-options.ts

@@ -9,6 +9,7 @@ export const GlobalGridOptions: GridOption = {
   asyncEditorLoading: false,
   autoFitColumnsOnFirstLoad: true,
   autoResize: {
+    applyResizeToContainer: true,
     calculateAvailableSizeBy: 'window',
     bottomPadding: 20,
     minHeight: 180,

packages/common/src/interfaces/columnEditor.interface.ts

@@ -1,4 +1,4 @@
-import { FieldType } from '../enums';
+import { FieldType } from '../enums/index';
 import {
   CollectionCustomStructure,
   CollectionFilterBy,