@zeedhi/teknisa-components-common 3.0.0 → 3.0.2

package/src/components/tek-grid/tek-grid.ts

@@ -0,0 +1,1118 @@
+import {
+	Accessor,
+	Config,
+	Datasource,
+	DatasourceFactory,
+	I18n,
+	IDictionary,
+	IEventParam,
+	Loader,
+	Messages,
+} from '@zeedhi/core';
+import clonedeep from 'lodash.clonedeep';
+import {
+	DataNavigator,
+	Direction,
+	IDataNavigator,
+	IDataSelector,
+	IGrid,
+	IIterableTable,
+	IKeyMapMerger,
+	ITableActionBuilder,
+	IViewNavigator,
+	IterableTable,
+	KeyMapMerger,
+	KeyMapNavigation,
+	TableActionBuilder,
+	VerticalDirection, IComponent, IComponentRender, DataEditorWithAdd, IDataEditorWithAdd, IGridColumnEditable, IGridEditable, 
+	KeyMapEditing, Iterable, IIterableProps,
+} from '@zeedhi/common';
+import {
+	IColumnsSearcher,
+	IGroupedDataManager,
+	IModalFilterProps,
+	ITekGrid,
+	ITekGridAtoms,
+	ITekGridColumn,
+	ITekGridEvents,
+	ITekGridExportConfig,
+	ITekGridProps,
+	ITekGridSummary,
+	ITekGridToolbarProvider,
+} from './interfaces';
+import { KeyMapGrouped } from './keymap-grouped';
+import { TekMemoryDatasource } from '../tek-datasource/tek-memory-datasource';
+import { TekRestDatasource } from '../tek-datasource/tek-rest-datasource';
+import { TekGridColumn } from './tek-grid-column';
+import { TekGridController } from './tek-grid-controller';
+import { TekGridEvents } from './tek-grid-events';
+import { ColumnsSearcher } from './columns-searcher';
+import { DynamicFilterDatasourceFactory } from './dynamic-filter-datasource-factory';
+import { GroupedDataManager } from './grouped-data-manager';
+import { GroupedDataSelector } from './grouped-data-selector';
+import { GroupedViewNavigator } from './grouped-view-navigator';
+import { ITekConfig } from '../../utils';
+import { TekGridToolbarProvider } from './tek-grid-toolbar-provider/tek-grid-toolbar-provider';
+
+/* TekGrid Class */
+export class TekGrid extends Iterable<TekGridColumn> implements ITekGrid {
+	private tableActionBuilder: ITableActionBuilder;
+
+	private iterableTable: IIterableTable;
+
+	private dataSelector: IDataSelector;
+
+	private tekGridEvents: ITekGridEvents;
+
+	private dataNavigator: IDataNavigator;
+
+	private groupedViewNavigator: IViewNavigator;
+
+	private keyMapMerger!: IKeyMapMerger;
+
+	private dataEditor: IDataEditorWithAdd;
+
+	private columnsSearcher: IColumnsSearcher;
+
+	private groupedDataManager: IGroupedDataManager;
+
+	private tekGridToolbarProvider: ITekGridToolbarProvider;
+
+	/* Grid Title */
+	public title = '';
+
+	/* Show Add button */
+	public addButton = false;
+
+	/* Show Delete button */
+	public deleteButton: 'none' | 'currentRow' | 'selection' = 'none';
+
+	/* Show Delete button */
+	public actions: IComponentRender[] = [];
+
+	/* Show edit button */
+	public showEditButtons = true;
+
+	/* Show Filter button */
+	public filterButton = false;
+
+	/* Show SearchInput */
+	public showSearch = true;
+
+	/* Show Column Filter button */
+	public columnFilterButton = false;
+
+	/* Show Columns button */
+	public columnsButton = false;
+
+	/* Defines if the grid is the unique grid on screen */
+	public mainGrid = true;
+
+	/* Columns to be ignored on columns button */
+	public columnsButtonIgnore: string[] = [];
+
+	/**
+	 * Enables column dragging
+	 * @public
+	 */
+	public dragColumns = true;
+
+	/**
+	 * Enables column resizing
+	 * @public
+	 */
+	public resizeColumns = true;
+
+	/**
+	 * Enables layout saving
+	 * @public
+	 */
+	public showLayoutOptions = true;
+
+	public xlsDefaultType?: string;
+
+	public modalFilterProps: IModalFilterProps = {
+		name: this.name,
+		height: 'auto',
+		persistent: true,
+		cssClass: '',
+		cssStyle: '',
+		dark: false,
+		draggable: false,
+		fullscreen: false,
+		dragHandle: '',
+		title: 'FILTER',
+	};
+
+	/**
+	 * Show export button
+	 */
+	public showExport = false;
+
+	/**
+	 * Show refresh button
+	 */
+	public showReload = true;
+
+	/**
+	 * Export config
+	 */
+	public exportConfig: ITekGridExportConfig[] = [
+		{
+			type: 'pdf',
+			label: I18n.translate('TEKGRID_EXPORT_AS', { type: 'PDF' }),
+			multiOption: [
+				{ label: I18n.translate('TEKGRID_PORTRAIT'), iconName: 'mdi-file-outline' },
+				{
+					label: I18n.translate('TEKGRID_LANDSCAPE'),
+					iconName: 'mdi-file-outline',
+					cssClass: 'tek-grid-export-landscape',
+					reportParams: { portrait: false },
+				},
+			],
+		},
+		{
+			type: 'xls',
+			label: I18n.translate('TEKGRID_EXPORT_AS', {
+				type: 'XLS',
+			}),
+		},
+		{
+			type: 'xls2',
+			label: I18n.translate('TEKGRID_EXPORT_AS', {
+				type: `XLS ${I18n.translate('TEKGRID_WITH_GROUPS')}`,
+			}),
+		},
+		{
+			type: 'xls3',
+			label: I18n.translate('TEKGRID_EXPORT_AS', {
+				type: `XLS ${I18n.translate('TEKGRID_GRID_MIRROR')}`,
+			}),
+		},
+		{
+			type: 'csv',
+			label: I18n.translate('TEKGRID_EXPORT_AS', { type: 'CSV' }),
+		},
+	];
+
+	/**
+	 * Actions to overwrite the default export config
+	 */
+	public exportActions?: IComponentRender[];
+
+	/**
+	 * Groups should be opened by default after building
+	 */
+	public groupsOpened = false;
+
+	/**
+	 * Show Total summary
+	 */
+	public showSummaryTotal = true;
+
+	public editNewRowsOnly = false;
+
+	protected keyShortcutKeyMapping: any;
+
+	public showCheckboxAllFilter: boolean = (Config as ITekConfig).gridShowCheckboxAllFilter || false;
+
+	public defaultFilter: IDictionary = {};
+
+	public toolbarOpened = true;
+
+	public reportTitle = '';
+
+	editing = false;
+
+	currentColumn: TekGridColumn | null = null;
+
+	selectedRows: IDictionary<any>[] = [];
+
+	selectionState: { allSelected: boolean; except: IDictionary<any>[] } = {
+		allSelected: false,
+		except: [],
+	};
+
+	rowStyleConditions?: (row: IDictionary) => IDictionary;
+
+	selectAllPages: boolean = Config.gridSelectAllPages;
+
+	selectable = false;
+
+	disableSelection?: (args: { row: IDictionary<any>; component: IGrid }) => boolean;
+
+	cellSelection = false;
+
+	toolbarSlot: IComponentRender[] = [{ name: '<<NAME>>_gridSearch', component: 'ZdSearch' }];
+
+	footerSlot: IComponentRender[] = [
+		{ name: '<<NAME>>_iterablePagination', component: 'ZdIterablePagination' },
+		{
+			name: '<<NAME>>_iterableInfoDiv',
+			component: 'ZdTag',
+			cssClass: 'zd-grid-div-footer',
+			tag: 'div',
+			children: [
+				{
+					name: '<<NAME>>_iterablePageSize',
+					component: 'ZdIterablePageSize',
+					iterableComponentName: '<<NAME>>',
+				},
+				{
+					name: '<<NAME>>_iterablePageInfo',
+					component: 'ZdIterablePageInfo',
+					iterableComponentName: '<<NAME>>',
+				},
+			],
+		},
+	];
+
+	noResultsText = 'NO_RESULT';
+
+	noResultSlot: IComponentRender[] = [
+		{
+			name: '<<NAME>>_no-result',
+			component: 'ZdText',
+			cssClass: 'no-result',
+			text: this.noResultsText,
+		},
+	];
+
+	errorSlot: IComponentRender[] = [];
+
+	dense = true;
+
+	headerBackground = '';
+
+	headerCellTextColor = '';
+
+	height: string | number = 'auto';
+
+	loadingText = 'LOADING';
+
+	maxHeight: string | number = 'none';
+
+	maxWidth: string | number = 'none';
+
+	minHeight: string | number = 'auto';
+
+	minWidth: string | number = 'auto';
+
+	noDataText = 'NO_DATA';
+
+	noDataSlot: IComponentRender[] = [
+		{
+			name: '<<NAME>>_no-data',
+			component: 'ZdText',
+			cssClass: 'no-data',
+			text: this.noDataText,
+		},
+	];
+
+	showFooter = true;
+
+	showHeader = true;
+
+	showSelectAll = true;
+
+	width: string | number = '100%';
+
+	backgroundColor = 'transparent';
+
+	canEditRow?: ((args: { row: IDictionary<any>; component: IGridEditable }) => boolean) | undefined;
+
+	showCancelColumn = false;
+
+	doubleClickEdit = false;
+
+	singleEdit = false;
+
+	editingNewRows = false;
+
+	private defaultLazy = false;
+
+	private toolbarSlotProps = false;
+
+	public filterRelationsDatasource?: Datasource;
+
+	public filterOperationsDatasource?: Datasource;
+
+	/**
+	 * TekGrid class constructor
+	 * @param props TekGrid properties
+	 */
+	constructor(props: ITekGridProps) {
+		super(props);
+		this.title = this.getInitValue('title', props.title, this.title);
+		this.addButton = this.getInitValue('addButton', props.addButton, this.addButton);
+		this.deleteButton = this.getInitValue('deleteButton', props.deleteButton, this.deleteButton);
+		this.filterButton = this.getInitValue('filterButton', props.filterButton, this.filterButton);
+		this.showSearch = this.getInitValue('showSearch', props.showSearch, this.showSearch);
+		this.columnFilterButton = this.getInitValue(
+			'columnFilterButton',
+			props.columnFilterButton,
+			this.columnFilterButton,
+		);
+		this.columnsButton = this.getInitValue('columnsButton', props.columnsButton, this.columnsButton);
+		this.columnsButtonIgnore = this.getInitValue(
+			'columnsButtonIgnore',
+			props.columnsButtonIgnore,
+			this.columnsButtonIgnore,
+		);
+		this.showEditButtons = this.getInitValue('showEditButtons', props.showEditButtons, this.showEditButtons);
+		this.dragColumns = this.getInitValue('dragColumns', props.dragColumns, this.dragColumns);
+		this.resizeColumns = this.getInitValue('resizeColumns', props.resizeColumns, this.resizeColumns);
+		this.showLayoutOptions = this.getInitValue('showLayoutOptions', props.showLayoutOptions, this.showLayoutOptions);
+		this.xlsDefaultType = this.getInitValue('xlsDefaultType', props.xlsDefaultType, this.xlsDefaultType);
+		this.showExport = this.getInitValue('showExport', props.showExport, this.showExport);
+		this.showReload = this.getInitValue('showReload', props.showReload, this.showReload);
+		this.exportConfig = this.getInitValue('exportConfig', props.exportConfig, this.exportConfig);
+		this.modalFilterProps = this.getInitValue('modalFilterProps', props.modalFilterProps, this.modalFilterProps);
+		this.exportActions = props.exportActions || this.exportActions;
+		this.groupsOpened = this.getInitValue('groupsOpened', props.groupsOpened, this.groupsOpened);
+		this.showSummaryTotal = this.getInitValue('showSummaryTotal', props.showSummaryTotal, this.showSummaryTotal);
+		this.showCheckboxAllFilter = this.getInitValue(
+			'showCheckboxAllFilter',
+			props.showCheckboxAllFilter,
+			this.showCheckboxAllFilter,
+		);
+		this.defaultFilter = this.getInitValue('defaultFilter', props.defaultFilter, this.defaultFilter);
+		this.toolbarOpened = this.getInitValue('toolbarOpened', props.toolbarOpened, this.toolbarOpened);
+		this.editNewRowsOnly = this.getInitValue('editNewRowsOnly', props.editNewRowsOnly, this.editNewRowsOnly);
+		this.mainGrid = this.getInitValue('mainGrid', props.mainGrid, this.mainGrid);
+		this.reportTitle = this.getInitValue('reportTitle', props.reportTitle, this.reportTitle);
+		this.actions = props.actions || this.actions;
+		this.toolbarSlotProps = props.toolbarSlot !== undefined;
+
+		this.cellSelection = this.getInitValue('cellSelection', props.cellSelection, this.cellSelection);
+		this.dense = this.getInitValue('dense', props.dense, this.dense);
+		this.disableSelection = this.getInitValue('disableSelection', props.disableSelection, this.disableSelection);
+		this.dragColumns = this.getInitValue('dragColumns', props.dragColumns, this.dragColumns);
+		this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
+		this.headerCellTextColor = this.getInitValue(
+			'headerCellTextColor',
+			props.headerCellTextColor,
+			this.headerCellTextColor,
+		);
+		this.height = this.getInitValue('height', props.height, this.height);
+		this.loadingText = this.getInitValue('loadingText', props.loadingText, this.loadingText);
+		this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
+		this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
+		this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
+		this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
+		this.noDataText = this.getInitValue('noDataText', props.noDataText, this.noDataText);
+		this.noResultsText = this.getInitValue('noResultsText', props.noResultsText, this.noResultsText);
+		this.resizeColumns = this.getInitValue('resizeColumns', props.resizeColumns, this.resizeColumns);
+		this.rowStyleConditions = this.getInitValue(
+			'rowStyleConditions',
+			props.rowStyleConditions,
+			this.rowStyleConditions,
+		);
+		this.selectable = this.getInitValue('selectable', props.selectable, this.selectable);
+		this.selectAllPages = this.getInitValue('selectAllPages', props.selectAllPages, this.selectAllPages);
+		this.showFooter = this.getInitValue('showFooter', props.showFooter, this.showFooter);
+		this.showHeader = this.getInitValue('showHeader', props.showHeader, this.showHeader);
+		this.showSelectAll = this.getInitValue('showSelectAll', props.showSelectAll, this.showSelectAll);
+		this.width = this.getInitValue('width', props.width, this.width);
+		this.backgroundColor = this.getInitValue('backgroundColor', props.backgroundColor, this.backgroundColor);
+		// headerBackground defaults to the backgroundColor, unless backgroundColor is transparent
+		const defaultHeaderBackground = this.backgroundColor === 'transparent' ? '' : this.backgroundColor;
+		this.headerBackground = this.getInitValue('headerBackground', props.headerBackground, defaultHeaderBackground);
+		this.doubleClickEdit = this.getInitValue('doubleClickEdit', props.doubleClickEdit, this.doubleClickEdit);
+		this.singleEdit = this.getInitValue('singleEdit', props.singleEdit, this.singleEdit);
+		this.showCancelColumn = this.getInitValue('showCancelColumn', props.showCancelColumn, this.showCancelColumn);
+		this.canEditRow = this.getInitValue('canEditRow', props.canEditRow, this.canEditRow);
+		this.editingNewRows = this.getInitValue('editingNewRows', props.editingNewRows, this.editingNewRows);
+
+		this.toolbarSlot = props.toolbarSlot || this.toolbarSlot;
+		this.footerSlot = props.footerSlot || this.footerSlot;
+		this.noDataSlot = props.noDataSlot || this.noDataSlot;
+		this.noResultSlot = props.noResultSlot || this.noResultSlot;
+		this.errorSlot = props.errorSlot || this.errorSlot;
+		this.noDataSlot = this.changeDefaultSlotNames(this.noDataSlot);
+		this.footerSlot = this.changeDefaultSlotNames(this.footerSlot);
+		this.toolbarSlot = this.changeDefaultSlotNames(this.toolbarSlot);
+		this.noResultSlot = this.changeDefaultSlotNames(this.noResultSlot);
+		this.errorSlot = this.changeDefaultSlotNames(this.errorSlot);
+
+		this.defaultLazy = this.getDefaultLazy(props);
+
+		if (this.deleteButton === 'selection') {
+			this.selectable = true;
+		}
+
+		this.tableActionBuilder = new TableActionBuilder(this);
+		this.iterableTable = new IterableTable(this);
+		this.dataSelector = new GroupedDataSelector(this);
+		this.tekGridEvents = new TekGridEvents(this);
+		this.dataNavigator = new DataNavigator(this);
+		this.groupedViewNavigator = new GroupedViewNavigator(this);
+		this.dataEditor = new DataEditorWithAdd(this);
+		this.columnsSearcher = new ColumnsSearcher();
+		this.groupedDataManager = new GroupedDataManager(this);
+		this.tekGridToolbarProvider = new TekGridToolbarProvider(this, 'show');
+	}
+
+	protected initializeDatasource(props: IIterableProps) {
+		let datasourceProps = clonedeep(props.datasource);
+		// if using accessor, get props from the controller
+		if (typeof props.datasource === 'string' && Accessor.isAccessorDefinition(props.datasource)) {
+			const [controller, accessor] = Accessor.getAccessor(props.datasource);
+			const instance = Loader.getInstance(controller);
+			datasourceProps = instance[accessor];
+		}
+		this.datasource = DatasourceFactory.factory({
+			...datasourceProps,
+			searchIn: props.datasource?.searchIn || (`{{IterableController_${this.name}.searchIn}}` as any),
+			lazyLoad: true,
+		});
+	}
+
+	public columnHasFilter(columnName: string): boolean {
+		return this.datasource.hasFilter(columnName);
+	}
+
+	public registerTask(task: Promise<any>) {
+		this.groupedDataManager.registerTask(task);
+	}
+
+	public async loadAfterTasks() {
+		return this.groupedDataManager.loadAfterTasks();
+	}
+
+	calcSummary(column: TekGridColumn, columnNamesummary: ITekGridSummary, row: IDictionary): void {
+		this.tekGridEvents.calcSummary(column, columnNamesummary, row);
+	}
+
+	private getDefaultLazy(props: ITekGridProps) {
+		if (typeof props.datasource === 'object') {
+			return props.datasource.lazyLoad;
+		}
+
+		if (typeof props.datasource === 'string' && Accessor.isAccessorDefinition(props.datasource)) {
+			const [controller, accessor] = Accessor.getAccessor(props.datasource);
+			const instance = Loader.getInstance(controller);
+			return instance[accessor].lazyLoad || false;
+		}
+
+		return false;
+	}
+
+	initializeGrouping(lazyLoad: boolean): void {
+		this.groupedDataManager.initializeGrouping(lazyLoad);
+	}
+
+	updateGrouping() {
+		return this.groupedDataManager.updateGrouping();
+	}
+
+	updateGroupedData(lazyLoad: boolean): Promise<void> {
+		return this.groupedDataManager.updateGroupedData(lazyLoad);
+	}
+
+	buildGroupedData(): void {
+		this.groupedDataManager.buildGroupedData();
+	}
+
+	openGroup(group: IDictionary<any>): void {
+		this.groupedDataManager.openGroup(group);
+	}
+
+	isItemVisible(row: IDictionary<any>) {
+		return this.groupedDataManager.isItemVisible(row);
+	}
+
+	isGrouped(): boolean {
+		return this.groupedDataManager.isGrouped();
+	}
+
+	isColumnSearchable(column: TekGridColumn): boolean {
+		return this.groupedDataManager.isColumnSearchable(column);
+	}
+
+	getGroupedData(): IDictionary<any>[] {
+		return this.groupedDataManager.getGroupedData();
+	}
+
+	directionalLeft(param: IEventParam<any>): void {
+		this.groupedDataManager.directionalLeft(param);
+		this.groupedViewNavigator.navigateLeft(param);
+	}
+
+	directionalRight(param: IEventParam<any>): void {
+		this.groupedDataManager.directionalRight(param);
+		this.groupedViewNavigator.navigateRight(param);
+	}
+
+	getReport(): Promise<Window | null> {
+		throw new Error('Method not implemented.');
+	}
+
+	setViewUpdateFixedColumns(fn: () => void) {
+		this.groupedDataManager.setViewUpdateFixedColumns(fn);
+	}
+
+	setViewUpdateScrollData(fn: () => void): void {
+		this.groupedDataManager.setViewUpdateScrollData(fn);
+	}
+
+	public onCreated(): void {
+		super.onCreated();
+
+		Loader.addController(`GridController_${this.name}`, TekGridController, [this]);
+		if (!this.toolbarSlotProps) this.toolbarSlot = this.tekGridToolbarProvider.getProperties();
+
+		this.createDynamicFilterDatasources();
+	}
+
+	private createDynamicFilterDatasources() {
+		if (!(this.datasource instanceof TekRestDatasource || this.datasource instanceof TekMemoryDatasource)) return;
+
+		const datasourceFactory = new DynamicFilterDatasourceFactory();
+		this.filterRelationsDatasource = datasourceFactory.factory(this.datasource.dynamicFilterRelations);
+		this.filterOperationsDatasource = datasourceFactory.factory(this.datasource.dynamicFilterOperations);
+	}
+
+	public onMounted(element: HTMLElement): void {
+		super.onMounted(element);
+		this.keyMapMerger = new KeyMapMerger(this, [KeyMapNavigation, KeyMapEditing, KeyMapGrouped]);
+		this.keyMapMerger.bind(element);
+
+		this.initializeGrouping(this.defaultLazy);
+	}
+
+	public onBeforeDestroy(): void {
+		super.onBeforeDestroy();
+		this.keyMapMerger.unbind();
+	}
+
+	public createColumn(column: ITekGridColumn): TekGridColumn {
+		return new TekGridColumn(column, this);
+	}
+
+	getConditionalProps({ row, column }: { row: IDictionary; column: TekGridColumn }): Partial<IComponentRender> {
+		const rowStyle = this.getRowStyleConditions(row);
+		const cellsApplied = this.getAppliedConditions({ row, column });
+
+		return { ...rowStyle, ...cellsApplied };
+	}
+
+	changeOrder(sortBy: { key: string; order: 'asc' | 'desc' }[]): Promise<void> {
+		return this.iterableTable.changeOrder(sortBy);
+	}
+
+	selectCell(row: IDictionary, column: TekGridColumn): void {
+		this.iterableTable.selectCell(row, column);
+	}
+
+	reapplyRowStyleConditions(row: IDictionary): IDictionary {
+		return this.iterableTable.reapplyRowStyleConditions(row);
+	}
+
+	getRowStyleConditions(row: IDictionary): IDictionary {
+		return this.iterableTable.getRowStyleConditions(row);
+	}
+
+	deleteRows(): Promise<any[]> {
+		return this.iterableTable.deleteRows();
+	}
+
+	selectAll(isSelected: boolean): void {
+		this.dataSelector.selectAll(isSelected);
+	}
+
+	toggleRow(row: IDictionary): void {
+		this.dataSelector.toggleRow(row);
+	}
+
+	selectRow(row: IDictionary, select: boolean): void {
+		this.dataSelector.selectRow(row, select);
+	}
+
+	callDisableSelection(row: IDictionary): boolean {
+		return this.dataSelector.callDisableSelection(row);
+	}
+
+	selectClick(row: IDictionary<any>, isSelected: boolean, event: Event, element?: HTMLElement): void {
+		this.dataSelector.selectClick(row, isSelected, event, element);
+	}
+
+	selectAllClick(isSelected: boolean, event: Event, element?: HTMLElement): void {
+		this.dataSelector.selectAllClick(isSelected, event, element);
+	}
+
+	navigatePageUp(): void {
+		this.dataNavigator.navigatePageUp();
+	}
+
+	navigatePageDown(): void {
+		this.dataNavigator.navigatePageDown();
+	}
+
+	setViewNavigate(viewNavigate: (direction: Direction, event?: Event) => void): void {
+		this.groupedViewNavigator.setViewNavigate(viewNavigate);
+	}
+
+	navigateLeft(params: IEventParam<any>): void {
+		if (!this.cellSelection) return;
+		this.groupedViewNavigator.navigateLeft(params);
+	}
+
+	navigateRight(params: IEventParam<any>): void {
+		if (!this.cellSelection) return;
+		this.groupedViewNavigator.navigateRight(params);
+	}
+
+	navigateUp(): void {
+		this.groupedViewNavigator.navigateUp();
+	}
+
+	navigateDown(): void {
+		this.groupedViewNavigator.navigateDown();
+	}
+
+	navigateDatasource(direction: VerticalDirection): void {
+		this.dataNavigator.navigateDatasource(direction);
+	}
+
+	getActionComponent(
+		actionComponent: IComponent,
+		column: TekGridColumn,
+		row: IDictionary,
+		parentPath?: string,
+	): IComponent {
+		return this.tableActionBuilder.getActionComponent(actionComponent, column, row, parentPath);
+	}
+
+	addCancelColumn(): void {
+		this.dataEditor.addCancelColumn();
+	}
+
+	getCancelColumnProps(): IGridColumnEditable {
+		return this.dataEditor.getCancelColumnProps();
+	}
+
+	isAdded(row: IDictionary): boolean {
+		return this.dataEditor.isAdded(row);
+	}
+
+	cancelAddedRow(key: string | number): Promise<any> {
+		return this.dataEditor.cancelAddedRow(key);
+	}
+
+	cancelAddedRows(): Promise<void> {
+		return this.dataEditor.cancelAddedRows();
+	}
+
+	getAddedRows(): IDictionary<any>[] {
+		return this.dataEditor.getAddedRows();
+	}
+
+	addNewRow(row: IDictionary, position?: 'end' | 'start'): Promise<void> {
+		return this.dataEditor.addNewRow(row, position);
+	}
+
+	getVisibleValue(row: IDictionary, column: ITekGridColumn) {
+		return this.dataEditor.getVisibleValue(row, column);
+	}
+
+	getEditableComponent(column: ITekGridColumn, row: IDictionary<any>): IComponentRender {
+		return this.dataEditor.getEditableComponent(column, row);
+	}
+
+	isEdited(column: ITekGridColumn, row: IDictionary): boolean {
+		return this.dataEditor.isEdited(column, row);
+	}
+
+	isValid(column: ITekGridColumn, row: IDictionary, revalidate?: boolean): Promise<boolean> {
+		return this.dataEditor.isValid(column, row, revalidate);
+	}
+
+	checkValid(column: ITekGridColumn, row: IDictionary): boolean {
+		return this.dataEditor.checkValid(column, row);
+	}
+
+	isGridValid(revalidate?: boolean): boolean {
+		return this.dataEditor.isGridValid(revalidate);
+	}
+
+	getComponent<T>(key: string, columnName: string): T {
+		return this.dataEditor.getComponent(key, columnName);
+	}
+
+	updateRow(newRow: IDictionary): void {
+		this.dataEditor.updateRow(newRow);
+	}
+
+	updateCell(rowKey: string, columnName: string, value: any): void {
+		this.dataEditor.updateCell(rowKey, columnName, value);
+	}
+
+	setViewEnterEdit(fn: ((rowKey: string, columnName: string) => void) | null): void {
+		this.dataEditor.setViewEnterEdit(fn);
+	}
+
+	enterEdit(rowKey: string, columnName: string): void {
+		this.dataEditor.enterEdit(rowKey, columnName);
+	}
+
+	cancelEditedRows(): Promise<void> {
+		return this.dataEditor.cancelEditedRows();
+	}
+
+	saveEditedRows(revalidate?: boolean): Promise<void[]> {
+		return this.dataEditor.saveEditedRows(revalidate);
+	}
+
+	reapplyCanEditRow(row: IDictionary<any>) {
+		return this.dataEditor.reapplyCanEditRow(row);
+	}
+
+	getCanEditRow(row: IDictionary<any>): boolean | undefined {
+		return this.dataEditor.getCanEditRow(row);
+	}
+
+	getEditedRows(revalidate?: boolean, silent?: boolean): IDictionary<any>[] {
+		return this.dataEditor.getEditedRows(revalidate, silent);
+	}
+
+	getEditedRow(row: IDictionary): IDictionary | undefined {
+		return this.dataEditor.getEditedRow(row);
+	}
+
+	rowClick(row: IDictionary<any>, event: Event, element?: HTMLElement): void {
+		this.tekGridEvents.rowClick(row, event, element);
+	}
+
+	rowDoubleClick(row: IDictionary<any>, event: Event, element?: HTMLElement): void {
+		this.tekGridEvents.rowDoubleClick(row, event, element);
+	}
+
+	cellDoubleClick(row: IDictionary<any>, column: TekGridColumn, event: Event, element?: HTMLElement): void {
+		this.tekGridEvents.cellDoubleClick(row, column, event, element);
+	}
+
+	inlineEdit(row: IDictionary, column: TekGridColumn, event?: Event, element?: HTMLElement): void {
+		this.tekGridEvents.inlineEdit(row, column, event, element);
+	}
+
+	cellClick(row: IDictionary<any>, column: TekGridColumn, event: Event, element?: HTMLElement): void {
+		this.tekGridEvents.cellClick(row, column, event, element);
+	}
+
+	cellClickEvent(row: IDictionary<any>, column: TekGridColumn, event: Event, element?: HTMLElement): void {
+		this.tekGridEvents.cellClickEvent(row, column, event, element);
+	}
+
+	groupRowClick(row: IDictionary<any>, event: Event, element?: HTMLElement): void {
+		this.tekGridEvents.groupRowClick(row, event, element);
+	}
+
+	groupRowDoubleClick(row: IDictionary<any>, event: Event, element?: HTMLElement): void {
+		this.tekGridEvents.groupRowDoubleClick(row, event, element);
+	}
+
+	selectGroupClick(row: IDictionary<any>, isSelected: boolean, event: Event, element?: HTMLElement): void {
+		this.tekGridEvents.selectGroupClick(row, isSelected, event, element);
+	}
+
+	public async setSearch(search: string): Promise<any> {
+		const { datasource } = this;
+		if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
+			datasource.searchJoin = await this.columnsSearcher.searchColumn(this.columns, search);
+		}
+
+		datasource.page = 1;
+		return datasource.setSearch(search);
+	}
+
+	getAtomInstance<T>(key: keyof ITekGridAtoms) {
+		return this.tekGridToolbarProvider.getAtomInstance<T>(key);
+	}
+
+	getAtomName(key: keyof ITekGridAtoms) {
+		return this.tekGridToolbarProvider.getAtomName(key);
+	}
+}
+
+Messages.add({
+	'pt-BR': {
+		translation: {
+			TEKGRID_CONTAINS: 'contém',
+			TEKGRID_NOT_CONTAINS: 'não contém',
+			TEKGRID_EQUALS: 'é igual a',
+			TEKGRID_NOT_EQUALS: 'é diferente de',
+			TEKGRID_GREATER_THAN: 'é maior que',
+			TEKGRID_LESS_THAN: 'é menor que',
+			TEKGRID_GREATER_THAN_EQUALS: 'é maior ou igual a',
+			TEKGRID_LESS_THAN_EQUALS: 'é menor ou igual a',
+			TEKGRID_IN: 'um dos valores',
+			TEKGRID_NOT_IN: 'nenhum dos valores',
+			TEKGRID_BETWEEN: 'está entre',
+			TEKGRID_AND: 'e',
+			TEKGRID_OR: 'ou',
+			TEKGRID_HIDE: 'Esconder Ações',
+			TEKGRID_SHOW: 'Mostrar Ações',
+			TEKGRID_ADD: 'Adicionar',
+			TEKGRID_DELETE: 'Excluir',
+			TEKGRID_REFRESH: 'Atualizar',
+			TEKGRID_COLUMNS: 'Colunas',
+			TEKGRID_SAVE: 'Salvar',
+			TEKGRID_CANCEL: 'Cancelar',
+			TEKGRID_APPLY: 'Aplicar',
+			TEKGRID_FILTER: 'Filtro',
+			TEKGRID_MULTIPLE_VALUE_HINT: 'Separe valores usando ";"',
+			TEKGRID_EXPORT: 'Exportar',
+			TEKGRID_EXPORT_AS: 'Exportar como {{ type }}',
+			TEKGRID_PORTRAIT: 'Retrato',
+			TEKGRID_LANDSCAPE: 'Paisagem',
+			TEKGRID_COLUMN_VISIBLE: 'Visível',
+			TEKGRID_COLUMN_GROUPED: 'Grupo',
+			TEKGRID_COLUMN_AGGREGATION: 'Totalização',
+			TEKGRID_COLUMN_LABEL: 'Rótulo',
+			TEKGRID_COLUMN_ALIGNMENT: 'Alinhamento',
+			TEKGRID_COLUMN_GROUP_OPENED: 'Aberto (grupo)',
+			TEKGRID_COLUMN_ORDER: 'Ordem',
+			TEKGRID_COLUMN_ORDER_DIRECTION: 'Direção (ordem)',
+			TEKGRID_AGGREGATION_SUM: 'Soma',
+			TEKGRID_AGGREGATION_AVG: 'Média',
+			TEKGRID_AGGREGATION_MAX: 'Máximo',
+			TEKGRID_AGGREGATION_MIN: 'Mínimo',
+			TEKGRID_AGGREGATION_COUNT: 'Contador',
+			TEKGRID_MORE_OPTIONS: 'Mais opções',
+			TEKGRID_COLUMNS_OPTIONS: 'Configuração de colunas',
+			TEKGRID_CLOSE: 'Fechar',
+			TEKGRID_FIXED_COLUMNS: 'Colunas fixadas',
+			TEKGRID_VISIBLE_COLUMNS: 'Colunas visíveis',
+			TEKGRID_GROUPED_COLUMNS: 'Colunas agrupadas',
+			TEKGRID_ORDER: 'Ordem',
+			TEKGRID_OTHER_COLUMNS: 'Outras colunas',
+			TEKGRID_DROP_COLUMNS: 'Arraste colunas aqui',
+			TEKGRID_DETAILS_FOR: 'Detalhes para:',
+			TEKGRID_LEFT: 'Esquerda',
+			TEKGRID_CENTER: 'Centro',
+			TEKGRID_RIGHT: 'Direita',
+			TEKGRID_ASC: 'Crescente',
+			TEKGRID_DESC: 'Decrescente',
+			TEKGRID_SELECT_COLUMN: '(selecione uma ou mais colunas)',
+			TEKGRID_SELECT_ALL: 'Selecionar todas',
+			TEKGRID_HELPERVALUE_TODAY: 'Hoje',
+			TEKGRID_HELPERVALUE_TOMORROW: 'Amanhã',
+			TEKGRID_HELPERVALUE_YESTERDAY: 'Ontem',
+			TEKGRID_HELPERVALUE_LAST_7_DAYS: 'Últimos 7 Dias',
+			TEKGRID_HELPERVALUE_NEXT_7_DAYS: 'Próximos 7 Dias',
+			TEKGRID_HELPERVALUE_CURRENT_WEEK: 'Semana Atual',
+			TEKGRID_HELPERVALUE_CURRENT_MONTH: 'Mês Atual',
+			TEKGRID_HELPERVALUE_CURRENT_YEAR: 'Ano Atual',
+			TEKGRID_WITH_GROUPS: '(Com grupos)',
+			TEKGRID_GRID_MIRROR: '(Espelho do grid)',
+			TEKGRID_NO_DATA: 'Não há dados para gerar o relatório',
+		},
+	},
+	'en-US': {
+		translation: {
+			TEKGRID_CONTAINS: 'contains',
+			TEKGRID_NOT_CONTAINS: 'does not contain',
+			TEKGRID_EQUALS: 'is equal to',
+			TEKGRID_NOT_EQUALS: 'is different from',
+			TEKGRID_GREATER_THAN: 'is greater than',
+			TEKGRID_LESS_THAN: 'is less than',
+			TEKGRID_GREATER_THAN_EQUALS: 'is greater or equals to',
+			TEKGRID_LESS_THAN_EQUALS: 'is less or equals to',
+			TEKGRID_IN: 'is in',
+			TEKGRID_NOT_IN: 'is not in',
+			TEKGRID_BETWEEN: 'is between',
+			TEKGRID_AND: 'and',
+			TEKGRID_OR: 'or',
+			TEKGRID_HIDE: 'Hide Actions',
+			TEKGRID_SHOW: 'Show Actions',
+			TEKGRID_ADD: 'Add',
+			TEKGRID_DELETE: 'Delete',
+			TEKGRID_REFRESH: 'Refresh',
+			TEKGRID_COLUMNS: 'Columns',
+			TEKGRID_SAVE: 'Save',
+			TEKGRID_CANCEL: 'Cancel',
+			TEKGRID_APPLY: 'Apply',
+			TEKGRID_FILTER: 'Filter',
+			TEKGRID_MULTIPLE_VALUE_HINT: 'Separate values using ";"',
+			TEKGRID_EXPORT: 'Export',
+			TEKGRID_EXPORT_AS: 'Export as {{ type }}',
+			TEKGRID_PORTRAIT: 'Portrait',
+			TEKGRID_LANDSCAPE: 'Landscape',
+			TEKGRID_COLUMN_VISIBLE: 'Visible',
+			TEKGRID_COLUMN_GROUPED: 'Grouped',
+			TEKGRID_COLUMN_AGGREGATION: 'Aggregation',
+			TEKGRID_COLUMN_LABEL: 'Label',
+			TEKGRID_COLUMN_ALIGNMENT: 'Alignment',
+			TEKGRID_COLUMN_GROUP_OPENED: 'Opened (group)',
+			TEKGRID_COLUMN_ORDER: 'Order',
+			TEKGRID_COLUMN_ORDER_DIRECTION: 'Direction (order)',
+			TEKGRID_AGGREGATION_SUM: 'Sum',
+			TEKGRID_AGGREGATION_AVG: 'Average',
+			TEKGRID_AGGREGATION_MAX: 'Maximum',
+			TEKGRID_AGGREGATION_MIN: 'Minimum',
+			TEKGRID_AGGREGATION_COUNT: 'Count',
+			TEKGRID_MORE_OPTIONS: 'More options',
+			TEKGRID_COLUMNS_OPTIONS: 'Columns configuration',
+			TEKGRID_CLOSE: 'Close',
+			TEKGRID_FIXED_COLUMNS: 'Fixed columns',
+			TEKGRID_VISIBLE_COLUMNS: 'Visible columns',
+			TEKGRID_GROUPED_COLUMNS: 'Grouped columns',
+			TEKGRID_ORDER: 'Order',
+			TEKGRID_OTHER_COLUMNS: 'Other columns',
+			TEKGRID_DROP_COLUMNS: 'Drop columns here',
+			TEKGRID_DETAILS_FOR: 'Details for:',
+			TEKGRID_LEFT: 'Left',
+			TEKGRID_CENTER: 'Center',
+			TEKGRID_RIGHT: 'Right',
+			TEKGRID_ASC: 'Ascending',
+			TEKGRID_DESC: 'Descending',
+			TEKGRID_SELECT_COLUMN: '(select one or more columns)',
+			TEKGRID_SELECT_ALL: 'Select all',
+			TEKGRID_HELPERVALUE_TODAY: 'Today',
+			TEKGRID_HELPERVALUE_TOMORROW: 'Tomorrow',
+			TEKGRID_HELPERVALUE_YESTERDAY: 'Yesterday',
+			TEKGRID_HELPERVALUE_LAST_7_DAYS: 'Last 7 Days',
+			TEKGRID_HELPERVALUE_NEXT_7_DAYS: 'Next 7 Days',
+			TEKGRID_HELPERVALUE_CURRENT_WEEK: 'Current Week',
+			TEKGRID_HELPERVALUE_CURRENT_MONTH: 'Current Month',
+			TEKGRID_HELPERVALUE_CURRENT_YEAR: 'Current Year',
+			TEKGRID_WITH_GROUPS: '(With groups)',
+			TEKGRID_GRID_MIRROR: '(Grid mirror)',
+			TEKGRID_NO_DATA: 'There is no data to generate the report',
+		},
+	},
+	'es-CL': {
+		translation: {
+			TEKGRID_CONTAINS: 'contiene',
+			TEKGRID_NOT_CONTAINS: 'no contiene',
+			TEKGRID_EQUALS: 'igual',
+			TEKGRID_NOT_EQUALS: 'es diferente de',
+			TEKGRID_GREATER_THAN: 'es mayor que',
+			TEKGRID_LESS_THAN: 'es menor que',
+			TEKGRID_GREATER_THAN_EQUALS: 'es mayor o igual que',
+			TEKGRID_LESS_THAN_EQUALS: 'es menor o igual que',
+			TEKGRID_IN: 'uno de los valores',
+			TEKGRID_NOT_IN: 'ninguno de los valores',
+			TEKGRID_BETWEEN: 'está entre',
+			TEKGRID_AND: 'e',
+			TEKGRID_OR: 'o',
+			TEKGRID_HIDE: 'Ocultar Acciones',
+			TEKGRID_SHOW: 'Mostrar Acciones',
+			TEKGRID_ADD: 'Añadir',
+			TEKGRID_DELETE: 'Eliminar',
+			TEKGRID_REFRESH: 'Actualizar',
+			TEKGRID_COLUMNS: 'Colunas',
+			TEKGRID_SAVE: 'Guardar',
+			TEKGRID_CANCEL: 'Cancelar',
+			TEKGRID_APPLY: 'Aplicar',
+			TEKGRID_FILTER: 'Filtro',
+			TEKGRID_MULTIPLE_VALUE_HINT: 'Separe los valores usando ";"',
+			TEKGRID_EXPORT: 'Exportar',
+			TEKGRID_EXPORT_AS: 'Exportar como {{ type }}',
+			TEKGRID_PORTRAIT: 'Vertical',
+			TEKGRID_LANDSCAPE: 'Horizontal',
+			TEKGRID_COLUMN_VISIBLE: 'Visible',
+			TEKGRID_COLUMN_GROUPED: 'Grupo',
+			TEKGRID_COLUMN_AGGREGATION: 'Totalización',
+			TEKGRID_COLUMN_LABEL: 'Etiqueta',
+			TEKGRID_COLUMN_ALIGNMENT: 'alineación',
+			TEKGRID_COLUMN_GROUP_OPENED: 'Abierto (grupo)',
+			TEKGRID_COLUMN_ORDER: 'Orden',
+			TEKGRID_COLUMN_ORDER_DIRECTION: 'Dirección (orden)',
+			TEKGRID_AGGREGATION_SUM: 'Suma',
+			TEKGRID_AGGREGATION_AVG: 'Media',
+			TEKGRID_AGGREGATION_MAX: 'Máximo',
+			TEKGRID_AGGREGATION_MIN: 'Mínimo',
+			TEKGRID_AGGREGATION_COUNT: 'Contar',
+			TEKGRID_MORE_OPTIONS: 'Mas opciones',
+			TEKGRID_COLUMNS_OPTIONS: 'Configuración de columna',
+			TEKGRID_CLOSE: 'Cerrar',
+			TEKGRID_FIXED_COLUMNS: 'Columnas fijas',
+			TEKGRID_VISIBLE_COLUMNS: 'Columnas visibles',
+			TEKGRID_GROUPED_COLUMNS: 'Columnas agrupadas',
+			TEKGRID_ORDER: 'Orden',
+			TEKGRID_OTHER_COLUMNS: 'Otras columnas',
+			TEKGRID_DROP_COLUMNS: 'Arrastra columnas aquí',
+			TEKGRID_DETAILS_FOR: 'Detalles para',
+			TEKGRID_LEFT: 'Izquierda',
+			TEKGRID_CENTER: 'Centro',
+			TEKGRID_RIGHT: 'Derecha',
+			TEKGRID_ASC: 'Creciente',
+			TEKGRID_DESC: 'Decreciente',
+			TEKGRID_SELECT_COLUMN: '(seleccione una o más columnas)',
+			TEKGRID_SELECT_ALL: 'Seleccionar todas',
+			TEKGRID_HELPERVALUE_TODAY: 'Hoy',
+			TEKGRID_HELPERVALUE_TOMORROW: 'Mañana',
+			TEKGRID_HELPERVALUE_YESTERDAY: 'Ayer',
+			TEKGRID_HELPERVALUE_LAST_7_DAYS: 'Últimos 7 días',
+			TEKGRID_HELPERVALUE_NEXT_7_DAYS: 'Próximos 7 días',
+			TEKGRID_HELPERVALUE_CURRENT_WEEK: 'Semana actual',
+			TEKGRID_HELPERVALUE_CURRENT_MONTH: 'Mes actual',
+			TEKGRID_HELPERVALUE_CURRENT_YEAR: 'Año actual',
+			TEKGRID_WITH_GROUPS: '(Con grupos)',
+			TEKGRID_GRID_MIRROR: '(Espejo de grid)',
+			TEKGRID_NO_DATA: 'No hay datos para generar el reporte',
+		},
+	},
+});
+
+Messages.add({
+	'pt-BR': {
+		translation: {
+			NO_NOTIFICATIONS: 'Nenhuma Notificação',
+			MARK_ALL_AS_READ: 'Marcar todas como lidas',
+			NOTIFICATIONS: 'Notificações',
+			SEE_ALL_NOTIFICATIONS: 'Ver todas notificações',
+			UNAVAILABLE_IMAGE: 'Imagem indisponível',
+			REFRESH: 'Atualizar',
+			ACTIONS: 'Ações',
+			FILTER: 'Filtro',
+			LAYOUT: 'Layout: ',
+			NEW_LAYOUT: 'Novo layout',
+			DEFAULT_LAYOUT: 'Padrão',
+			LAYOUT_MODIFIED:
+				'O layout atual foi modificado. Crie um novo layout, sobrescreva um existente ou descarte as alterações', // eslint-disable-line
+			LAYOUT_NOT_MODIFIED: 'Crie um novo layout ou aplique um dos layouts já existentes',
+			LAYOUT_DISCART_CHANGES: 'Descartar alterações',
+		},
+	},
+	'en-US': {
+		translation: {
+			NO_NOTIFICATIONS: 'No Notifications',
+			MARK_ALL_AS_READ: 'Mark all as read',
+			NOTIFICATIONS: 'Notifications',
+			SEE_ALL_NOTIFICATIONS: 'See all notifications',
+			UNAVAILABLE_IMAGE: 'Unavailable image',
+			REFRESH: 'Refresh',
+			ACTIONS: 'Actions',
+			FILTER: 'Filter',
+			LAYOUT: 'Layout: ',
+			NEW_LAYOUT: 'New layout',
+			DEFAULT_LAYOUT: 'Default',
+			LAYOUT_MODIFIED:
+				'The current layout has been modified. Create a new layout, overwrite an existing one or discard changes', // eslint-disable-line
+			LAYOUT_NOT_MODIFIED: 'Create a new layout or apply one of the existing layouts',
+			LAYOUT_DISCART_CHANGES: 'Discard changes',
+		},
+	},
+	'es-CL': {
+		translation: {
+			NO_NOTIFICATIONS: 'Sin Notificación',
+			MARK_ALL_AS_READ: 'Marcar todo como leído',
+			NOTIFICATIONS: 'Notificaciones',
+			SEE_ALL_NOTIFICATIONS: 'Ver todas las notificaciones',
+			UNAVAILABLE_IMAGE: 'Imagen no disponible',
+			REFRESH: 'Actualizar',
+			ACTIONS: 'Acciones',
+			FILTER: 'Filtro',
+			LAYOUT: 'Disposición: ',
+			NEW_LAYOUT: 'Nueva disposición',
+			DEFAULT_LAYOUT: 'Default',
+			LAYOUT_MODIFIED:
+				'La disposición actual ha sido modificada. Cree una nueva disposición, sobrescriba una existente o descarte los cambios', // eslint-disable-line
+			LAYOUT_NOT_MODIFIED: 'Cree una nueva disposición o aplique una de las disposiciones existentes',
+			LAYOUT_DISCART_CHANGES: 'Descartar los cambios',
+		},
+	},
+});