@sankhyalabs/ezui 4.18.2 → 4.19.0

package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js

@@ -1,25 +1,43 @@
-import { Grid as EnterpriseGrid, LicenseManager } from "ag-grid-enterprise";
-import { Grid } from "ag-grid-community";
-import { ApplicationContext, DataType, SortMode, UserInterface, NumberUtils, StringUtils } from "@sankhyalabs/core";
-import gridTerms from "./i18n/pt-BR.js";
-import DataSource from "./DataSource";
-import { CellRendererStatus } from "./components/cellRendererStatus";
-import SelectionHeader from "./components/selectionHeader";
+import { ApplicationContext, DataType, NumberUtils, SortMode, StringUtils, UserInterface } from '@sankhyalabs/core';
+import { Grid, } from 'ag-grid-community';
+import { Grid as EnterpriseGrid, LicenseManager } from 'ag-grid-enterprise';
+import DataSource from './DataSource';
 import { EzGridCustomHeader } from './components/EzGridCustomHeader';
+import { CellRendererStatus } from './components/cellRendererStatus';
+import SelectionHeader from './components/selectionHeader';
+import gridTerms from './i18n/pt-BR.js';
+import { DISTINCT_FILTER_NAME_PREFIX } from '../../../../utils/constants';
+import { calcFilterColumnLeftPosition } from './AgGridUtils';
 export default class AgGridController {
+  configFilterColumn(filterColumn) {
+    this._filterColumn = filterColumn;
+    this._filterColumn.addEventListener('applyFilterColumnOptions', this.handleFilteredColumnsChanged.bind(this));
+  }
+  handleFilteredColumnsChanged(event) {
+    const applied = event.detail;
+    this._filteredColumns.set(applied.field, applied.values);
+    this._gridOptions.api.refreshHeader();
+    this._dataUnit.loadData();
+  }
+  showFilterColumn(configs) {
+    var _a;
+    (_a = this._filterColumn) === null || _a === void 0 ? void 0 : _a.show(configs);
+  }
   constructor(enterprise) {
     this.DEFAULT_ROW_HEIGHT = 30;
     this.DEFAULT_HEADER_ROW_HEIGHT = 32;
-    this.CHECK_BOX_COL_ID = "checkBoxColumn";
-    this.STATUS_COL_ID = "statusColumn";
-    this.RECORD_ARCHIVE_COL_ID = "__RECORD_ARCHIVE__";
+    this.CHECK_BOX_COL_ID = 'checkBoxColumn';
+    this.STATUS_COL_ID = 'statusColumn';
+    this.RECORD_ARCHIVE_COL_ID = '__RECORD_ARCHIVE__';
     this.BLOCK_LOAD_DEBOUNCE = 400;
     this.DEFAULT_FONT_SIZE = 14;
     this.DEFAULT_ICON_SIZE = 12;
     this.DEFAULT_MAX_SIZE = 200;
     this._menuItems = [];
-    this._idAttribName = "__record__id__";
+    this._idAttribName = '__record__id__';
     this._gridConfig = [];
+    this._filteredColumns = new Map();
+    this._filterColumnleftPosition = '0px';
     this._enterprise = enterprise;
   }
   getGridConfig() {
@@ -27,23 +45,59 @@ export default class AgGridController {
   }
   getSort() {
     const sortedColumns = [];
-    this._gridOptions.columnApi.getColumnState()
+    this._gridOptions.columnApi
+      .getColumnState()
       .sort((colA, colB) => colA.sortIndex - colB.sortIndex)
       .forEach(({ colId, sort }) => {
       if (sort) {
         const field = this._dataUnit.getField(colId);
-        const mode = sort === "asc" ? SortMode.ASC : SortMode.DESC;
+        const mode = sort === 'asc' ? SortMode.ASC : SortMode.DESC;
         const sortField = field ? { field: field.name, dataType: field.dataType, mode } : { field: colId, dataType: DataType.TEXT, mode };
         sortedColumns.push(sortField);
       }
     });
     return sortedColumns;
   }
-  ;
+  getFilter() {
+    if (!this._filteredColumns || this._filteredColumns.size === 0) {
+      return;
+    }
+    return Array.from(this._filteredColumns.entries())
+      .map(([column, items]) => {
+      var _a;
+      const checkedOptions = items.filter(option => option.check);
+      if (checkedOptions.length > 0) {
+        const fieldDescriptor = this._dataUnit.getField(column);
+        const dataType = (_a = fieldDescriptor === null || fieldDescriptor === void 0 ? void 0 : fieldDescriptor.dataType) !== null && _a !== void 0 ? _a : DataType.TEXT;
+        let placeholders = '';
+        const params = [];
+        checkedOptions.forEach(option => {
+          if (placeholders.length > 0) {
+            placeholders = placeholders + ',';
+          }
+          const paramName = `PARAM_${column}_${params.length + 1}`;
+          placeholders = `${placeholders}:${paramName}`; //FIXME: trocar por ? quando o backend estiver funcionando
+          params.push({
+            dataType: dataType === DataType.OBJECT ? DataType.TEXT : dataType,
+            name: paramName,
+            value: option.value,
+          });
+        });
+        const columnExpression = dataType === DataType.DATE ? `onlydate(this.${column})` : `this.${column}`;
+        return {
+          name: `${DISTINCT_FILTER_NAME_PREFIX}${column}`,
+          expression: `${columnExpression} in (${placeholders})`,
+          params,
+        };
+      }
+      return undefined;
+    })
+      .filter(item => item != undefined);
+  }
   initDatagrid(container, options) {
     var _a;
     if (this._grid === undefined) {
-      LicenseManager.setLicenseKey(ApplicationContext.getContextValue("__EZUI__GRID_LICENSE__"));
+      LicenseManager.setLicenseKey(ApplicationContext.getContextValue('__EZUI__GRID_LICENSE__'));
       this._columnStateChangeCallback = options.onColumnStateChange;
       this._selectionChangeCallback = options.onSelectionChange;
       this._doubleClickCallBack = options.onDoubleClick;
@@ -52,28 +106,30 @@ export default class AgGridController {
       this._statusResolver = options.statusResolver;
       if (this._dataUnit) {
         this._dataUnit.sortingProvider = this;
+        this._dataUnit.addFilterProvider(this);
       }
       this._gridOptions = {
         localeText: gridTerms,
-        rowSelection: this._multipleSelection ? "multiple" : "single",
+        rowSelection: this._multipleSelection ? 'multiple' : 'single',
         sortingOrder: ['desc', 'asc', null],
         blockLoadDebounceMillis: this.BLOCK_LOAD_DEBOUNCE,
         navigateToNextCell: this.navigateToNextCell.bind(this),
-        getRowNodeId: this._dataUnit ? (params) => typeof params === "string" ? params : params[this._idAttribName] : undefined,
+        getRowNodeId: this._dataUnit ? params => (typeof params === 'string' ? params : params[this._idAttribName]) : undefined,
         getMainMenuItems: (params) => this.buildMenuItemOptions(params),
+        postProcessPopup: (params) => this.setFilterColumnLeftPosition(params),
         getRowHeight: this.getRowHeight.bind(this),
         defaultColDef: {
-          headerClass: "ez-grid__cell-header",
-          cellClass: "ez-grid__cell-body"
+          headerClass: 'ez-grid__cell-header',
+          cellClass: 'ez-grid__cell-body',
         },
         components: {
-          'ezGridHeaderComponent': SelectionHeader,
-          'ezGridCustomHeader': EzGridCustomHeader,
+          ezGridHeaderComponent: SelectionHeader,
+          ezGridCustomHeader: EzGridCustomHeader,
         },
         context: {
           headerCheckStatusGetter: () => this.getSelectionHeaderStatus(),
-          headerCheckStatusSetter: (selectAll) => this.updateSelectionForAll(selectAll)
-        }
+          headerCheckStatusSetter: (selectAll) => this.updateSelectionForAll(selectAll),
+        },
       };
       this.defineRowModelType(this._gridOptions, options);
       this.setOptionsEvents(this._gridOptions);
@@ -94,17 +150,22 @@ export default class AgGridController {
       this._gridOptions.api.setHeaderHeight(this.getHeaderRowHeight());
     }
   }
+  setFilterColumnLeftPosition(params) {
+    if (params.type === 'columnMenu') {
+      const ePopup = params.ePopup;
+      const leftString = ePopup.style.left.replace('px', '');
+      this._filterColumnleftPosition = `${calcFilterColumnLeftPosition(parseInt(leftString))}px`;
+      return;
+    }
+  }
   buildMenuItemOptions(params) {
     const col = params.column;
     const items = [];
     if (col.getColDef().sortable) {
       items.push(this.buildMenuItemOptionSort(params, 'asc'));
       items.push(this.buildMenuItemOptionSort(params, 'desc'));
+      items.push(this.buildMenuItemFilterColumn(params));
     }
-    /*
-        TODO: Adicionar quando filtro de colunar estiver finalizado.
-        items.push(this.buildMenuItemFilterColumn(params));
-    */
     this._menuItems.forEach(m => items.push({
       icon: m.icon,
       name: m.label,
@@ -115,31 +176,31 @@ export default class AgGridController {
   }
   buildMenuItemOptionSort(params, sortOrder) {
     return {
-      icon: `<div style="${sortOrder === "asc" ? 'transform: rotate(180deg); position: relative; top: -4px;' : ''}"><i class='ez-icon-arrow_downward'></i></div>`,
-      name: sortOrder === "asc" ? "Ordenar Ascendente" : "Ordenar Descendente",
-      action: () => this.sortDataByColumn(params, sortOrder)
+      icon: `<i class='ez-icon-arrow_downward'></i>`,
+      name: sortOrder === 'asc' ? 'Ordenar Ascendente' : 'Ordenar Descendente',
+      action: () => this.sortDataByColumn(params, sortOrder),
+    };
+  }
+  buildMenuItemFilterColumn(params) {
+    const columnName = params.column.getId();
+    const columnLabel = params.column.getColDef().headerName;
+    return {
+      icon: `<i class='ez-icon-filter'></i>`,
+      name: 'Filtrar',
+      action: () => this.showFilterColumn({ columnName, columnLabel, leftPosition: this._filterColumnleftPosition, filteredOptions: this._filteredColumns.get(columnName) }),
     };
   }
-  /*
-  TODO: Voltar função quando for implementado o filtro de coluna
-  private buildMenuItemFilterColumn( _params: GetMainMenuItemsParams): MenuItemDef{
-      return {
-          icon: `<i class='ez-icon-filter'></i>`,
-          name: "Filtrar",
-          action: () => window.alert("Abrir popover de filtro")
-      }
-  }*/
   buildMenuItemOptionPin(params) {
     const { column, columnApi } = params;
     const isPinned = params.column.isPinned();
     return {
       icon: `<i class='ez-icon-${isPinned ? 'un-pin' : 'push-pin'}'></i>`,
-      name: isPinned ? "Desafixar coluna" : "Fixar coluna",
+      name: isPinned ? 'Desafixar coluna' : 'Fixar coluna',
       action: () => {
         columnApi.applyColumnState({
           state: [{ colId: column.getColId(), pinned: column.isPinned() ? null : 'left' }],
         });
-      }
+      },
     };
   }
   sortDataByColumn(params, order) {
@@ -191,9 +252,9 @@ export default class AgGridController {
           (_h = this._dataUnit) === null || _h === void 0 ? void 0 : _h.nextRecord();
         }
         return params.nextCellPosition;
-      case "ArrowLeft":
-      case "ArrowRight":
-        if (((_j = params.nextCellPosition) === null || _j === void 0 ? void 0 : _j.column.colDef.headerName) !== "") {
+      case 'ArrowLeft':
+      case 'ArrowRight':
+        if (((_j = params.nextCellPosition) === null || _j === void 0 ? void 0 : _j.column.colDef.headerName) !== '') {
           return params.nextCellPosition;
         }
         else {
@@ -204,21 +265,21 @@ export default class AgGridController {
   }
   defineRowModelType(opt, sourceOptions) {
     if (this._dataUnit != undefined) {
-      opt.rowModelType = "serverSide";
+      opt.rowModelType = 'serverSide';
       opt.serverSideDatasource = new DataSource(this._dataUnit, this, sourceOptions);
       opt.serverSideSortOnServer = true;
       opt.columnDefs = this._colDefs;
     }
   }
   setOptionsEvents(opt) {
-    opt.onSortChanged = e => this.onCallStateChange("sort", e);
-    opt.onColumnResized = e => this.onCallStateChange("columnResize", e);
-    opt.onColumnPinned = e => this.onCallStateChange("columnPinned", e);
-    opt.onColumnMoved = e => this.onCallStateChange("columnMoved", e);
-    opt.onColumnVisible = e => this.onCallStateChange("visibleChange", e);
+    opt.onSortChanged = e => this.onCallStateChange('sort', e);
+    opt.onColumnResized = e => this.onCallStateChange('columnResize', e);
+    opt.onColumnPinned = e => this.onCallStateChange('columnPinned', e);
+    opt.onColumnMoved = e => this.onCallStateChange('columnMoved', e);
+    opt.onColumnVisible = e => this.onCallStateChange('visibleChange', e);
     opt.onSelectionChanged = e => this.onSelectionChange(e);
     opt.onRowDoubleClicked = evt => this.onRowDoubleClick(evt);
-    opt.onDragStopped = evt => this.onCallStateChange("columnMovedEnd", evt);
+    opt.onDragStopped = evt => this.onCallStateChange('columnMovedEnd', evt);
   }
   setOptionsSupress(opt) {
     opt.suppressDragLeaveHidesColumns = true;
@@ -252,18 +313,18 @@ export default class AgGridController {
   }
   setData(data) {
     if (this._grid === undefined) {
-      throw new Error("Erro interno: Grid ainda não inicializado.");
+      throw new Error('Erro interno: Grid ainda não inicializado.');
     }
     this._gridOptions.api.setRowData(data);
   }
   addRows() {
     if (this._grid === undefined) {
-      throw new Error("Erro interno: Grid ainda não inicializado.");
+      throw new Error('Erro interno: Grid ainda não inicializado.');
     }
   }
   updateRows() {
     if (this._grid === undefined) {
-      throw new Error("Erro interno: Grid ainda não inicializado.");
+      throw new Error('Erro interno: Grid ainda não inicializado.');
     }
   }
   selectAll(quietly = false) {
@@ -286,7 +347,7 @@ export default class AgGridController {
     try {
       this._gridOptions.context.selectionChangeQuietly = quietly;
       if (this._grid === undefined) {
-        throw new Error("Erro interno: Grid ainda não inicializado.");
+        throw new Error('Erro interno: Grid ainda não inicializado.');
       }
       let lastSelected;
       this._gridOptions.api.forEachNode(node => {
@@ -318,13 +379,13 @@ export default class AgGridController {
   }
   removeRows() {
     if (this._grid === undefined) {
-      throw new Error("Erro interno: Grid ainda não inicializado.");
+      throw new Error('Erro interno: Grid ainda não inicializado.');
     }
     this._gridOptions.api.refreshServerSide({ purge: true });
   }
   changeValues(changes, rowIds) {
     if (this._grid === undefined) {
-      throw new Error("Erro interno: Grid ainda não inicializado.");
+      throw new Error('Erro interno: Grid ainda não inicializado.');
     }
     if (changes) {
       let rowNodes;
@@ -351,7 +412,7 @@ export default class AgGridController {
   }
   refresh() {
     if (this._grid === undefined) {
-      throw new Error("Erro interno: Grid ainda não inicializado.");
+      throw new Error('Erro interno: Grid ainda não inicializado.');
     }
     this._gridOptions.api.refreshServerSide({ purge: false });
   }
@@ -369,17 +430,19 @@ export default class AgGridController {
   }
   setFocusOnRow(rowIndex) {
     let displayedColumns = this._gridOptions.columnApi.getAllDisplayedColumns();
-    let firstCell = displayedColumns.find((column) => column.getColDef().headerName !== "");
+    let firstCell = displayedColumns.find(column => column.getColDef().headerName !== '');
     this._gridOptions.api.ensureColumnVisible(firstCell);
     this._gridOptions.api.ensureIndexVisible(rowIndex);
     this._gridOptions.api.setFocusedCell(rowIndex, firstCell);
   }
   setColumnsDef(cols) {
-    const newColDefs = [Object.assign({ colId: this.CHECK_BOX_COL_ID, headerName: "", checkboxSelection: true, width: 29, suppressMovable: true, suppressAutoSize: true, suppressMenu: true, lockPosition: true, pinned: true }, this._multipleSelection && { headerComponent: "ezGridHeaderComponent", headerClass: "ag-column-select-header" })];
+    const newColDefs = [
+      Object.assign({ colId: this.CHECK_BOX_COL_ID, headerName: '', checkboxSelection: true, width: 29, suppressMovable: true, suppressAutoSize: true, suppressMenu: true, lockPosition: true, pinned: true }, (this._multipleSelection && { headerComponent: 'ezGridHeaderComponent', headerClass: 'ag-column-select-header' })),
+    ];
     if (this._statusResolver != undefined) {
       newColDefs.push({
         colId: this.STATUS_COL_ID,
-        headerName: "",
+        headerName: '',
         checkboxSelection: false,
         headerCheckboxSelection: false,
         width: 29,
@@ -390,11 +453,11 @@ export default class AgGridController {
         pinned: true,
         cellRenderer: CellRendererStatus,
         cellRendererParams: {
-          statusResolver: this._statusResolver
+          statusResolver: this._statusResolver,
         },
         cellStyle: {
-          "text-align": "center"
-        }
+          'text-align': 'center',
+        },
       });
     }
     cols.forEach(c => {
@@ -407,25 +470,27 @@ export default class AgGridController {
   }
   getColumnsDef() {
     if (this._grid === undefined) {
-      throw new Error("Erro interno: Grid ainda não inicializado.");
+      throw new Error('Erro interno: Grid ainda não inicializado.');
     }
     const colDef = this._gridOptions.columnApi.getColumns();
-    return colDef.filter(c => ![this.CHECK_BOX_COL_ID, this.STATUS_COL_ID].includes(c.getColId())).map(c => {
+    return colDef
+      .filter(c => ![this.CHECK_BOX_COL_ID, this.STATUS_COL_ID].includes(c.getColId()))
+      .map(c => {
       const def = c.getColDef();
       const colDef = { name: def.field, label: def.headerName };
-      this.conditionalSet(colDef, "sortable", def.sortable);
-      this.conditionalSet(colDef, "resizable", def.resizable);
-      this.conditionalSet(colDef, "sort", def.sort);
-      this.conditionalSet(colDef, "sortIndex", def.sortIndex);
-      this.conditionalSet(colDef, "width", def.width);
-      this.conditionalSet(colDef, "pinned", def.pinned !== null);
-      this.conditionalSet(colDef, "hidden", def.hide);
+      this.conditionalSet(colDef, 'sortable', def.sortable);
+      this.conditionalSet(colDef, 'resizable', def.resizable);
+      this.conditionalSet(colDef, 'sort', def.sort);
+      this.conditionalSet(colDef, 'sortIndex', def.sortIndex);
+      this.conditionalSet(colDef, 'width', def.width);
+      this.conditionalSet(colDef, 'pinned', def.pinned !== null);
+      this.conditionalSet(colDef, 'hidden', def.hide);
       return colDef;
     });
   }
   setColumnsState(state) {
     if (this._grid === undefined) {
-      throw new Error("Erro interno: Grid ainda não inicializado.");
+      throw new Error('Erro interno: Grid ainda não inicializado.');
     }
     const colDef = this._gridOptions.columnApi.getColumns();
     let columns = this.getColumnsDef();
@@ -454,24 +519,26 @@ export default class AgGridController {
   }
   getColumnsState() {
     if (this._grid === undefined) {
-      throw new Error("Erro interno: Grid ainda não inicializado.");
+      throw new Error('Erro interno: Grid ainda não inicializado.');
     }
     const colState = this._gridOptions.columnApi.getColumnState();
-    return colState.map(s => {
+    return colState
+      .map(s => {
       const def = this._gridOptions.columnApi.getColumn(s.colId).getColDef();
       const label = def.headerName;
-      const name = def.checkboxSelection ? "__SELECTION__" : s.colId;
+      const name = def.checkboxSelection ? '__SELECTION__' : s.colId;
       const colState = { label, name };
-      this.conditionalSet(colState, "sort", s.sort);
-      this.conditionalSet(colState, "sortIndex", s.sortIndex);
-      this.conditionalSet(colState, "width", s.width);
-      this.conditionalSet(colState, "pinned", s.pinned !== null);
-      this.conditionalSet(colState, "hidden", s.hide);
+      this.conditionalSet(colState, 'sort', s.sort);
+      this.conditionalSet(colState, 'sortIndex', s.sortIndex);
+      this.conditionalSet(colState, 'width', s.width);
+      this.conditionalSet(colState, 'pinned', s.pinned !== null);
+      this.conditionalSet(colState, 'hidden', s.hide);
       const props = new Map();
       props.set('sortable', def.sortable);
-      this.conditionalSet(colState, "props", props);
+      this.conditionalSet(colState, 'props', props);
       return colState;
-    }).filter(c => c.name !== "__SELECTION__" && c.name !== this.STATUS_COL_ID);
+    })
+      .filter(c => c.name !== '__SELECTION__' && c.name !== this.STATUS_COL_ID);
   }
   getSelection() {
     return this._gridOptions.api.getSelectedRows();
@@ -489,7 +556,7 @@ export default class AgGridController {
         fields: this._gridOptions.columnApi
           .getColumns()
           .filter(col => col.isVisible() && ![this.CHECK_BOX_COL_ID, this.STATUS_COL_ID, this.RECORD_ARCHIVE_COL_ID].includes(col.getColId()))
-          .map(col => col.getColId())
+          .map(col => col.getColId()),
       };
       this._dataSource.quickFilter = quickFilter;
     }
@@ -501,23 +568,20 @@ export default class AgGridController {
     var _a;
     (_a = this._gridOptions.api.getDisplayedRowAtIndex(index)) === null || _a === void 0 ? void 0 : _a.setSelected(true);
   }
-  hasFilterColumn(_columnName) {
-    return false; //TODO: substituir pelo state dos filtros de colunas
-  }
-  showColumnFilter() {
-    /*
-    TODO: Implementar chamada para apresentar filtro de coluna na grid
-    */
+  hasFilterColumn(columnName) {
+    var _a;
+    const filterOptions = (_a = this._filteredColumns.get(columnName)) !== null && _a !== void 0 ? _a : [];
+    return filterOptions.map(item => item.check).includes(true);
   }
   buildColDef(source) {
     var _a, _b, _c;
     let tooltip = undefined;
-    const propSortable = StringUtils.getBooleanValue((_a = source.props) === null || _a === void 0 ? void 0 : _a.get("gridSortable"), true);
-    if ((_b = source.props) === null || _b === void 0 ? void 0 : _b.get("gridHeaderTooltip")) {
-      tooltip = (_c = source.props) === null || _c === void 0 ? void 0 : _c.get("gridHeaderTooltip");
+    const propSortable = StringUtils.getBooleanValue((_a = source.props) === null || _a === void 0 ? void 0 : _a.get('gridSortable'), true);
+    if ((_b = source.props) === null || _b === void 0 ? void 0 : _b.get('gridHeaderTooltip')) {
+      tooltip = (_c = source.props) === null || _c === void 0 ? void 0 : _c.get('gridHeaderTooltip');
     }
     else if (propSortable === false) {
-      tooltip = "Coluna não pode ser ordenada";
+      tooltip = 'Coluna não pode ser ordenada';
     }
     return {
       headerName: source.label,
@@ -527,18 +591,19 @@ export default class AgGridController {
       headerComponent: 'ezGridCustomHeader',
       headerComponentParams: {
         tooltip: tooltip,
+        isSortable: propSortable,
         hasFilter: () => this.hasFilterColumn(source.name),
-        showColumnFilter: () => this.showColumnFilter()
+        showColumnFilter: (leftPosition) => this.showFilterColumn({ columnName: source.name, columnLabel: source.label, leftPosition, filteredOptions: this._filteredColumns.get(source.name) }),
       },
       valueFormatter: params => {
         return this.getFormatterByColumn(params, source);
       },
-      cellStyle: this.getStyleByColumn(source)
+      cellStyle: this.getStyleByColumn(source),
     };
   }
   getInitCellStyle() {
     return {
-      "line-height": (this.getRowHeight() - 1) + "px"
+      'line-height': this.getRowHeight() - 1 + 'px',
     };
   }
   getStyleByColumn(source) {
@@ -546,32 +611,34 @@ export default class AgGridController {
     switch (source === null || source === void 0 ? void 0 : source.userInterface) {
       case UserInterface.DECIMALNUMBER:
       case UserInterface.INTEGERNUMBER:
-        cellStyle["text-align"] = "right";
+        cellStyle['text-align'] = 'right';
         break;
       case UserInterface.DATE:
       case UserInterface.DATETIME:
       case UserInterface.TIME:
-        cellStyle["text-align"] = "center";
+        cellStyle['text-align'] = 'center';
         break;
       default:
-        cellStyle["text-align"] = "left";
+        cellStyle['text-align'] = 'left';
     }
     return cellStyle;
   }
   getFormatterByColumn(params, source) {
     var _a;
-    if ((source === null || source === void 0 ? void 0 : source.userInterface) === "OPTIONSELECTOR" && source.options) {
+    if ((source === null || source === void 0 ? void 0 : source.userInterface) === 'OPTIONSELECTOR' && source.options) {
       const prop = source === null || source === void 0 ? void 0 : source.options;
       let options;
-      if (typeof prop === "string") {
+      if (typeof prop === 'string') {
         const parsed = JSON.parse(prop);
-        options = Object.keys(parsed).map(key => { return { value: key, label: parsed[key] }; });
+        options = Object.keys(parsed).map(key => {
+          return { value: key, label: parsed[key] };
+        });
       }
       else {
         options = prop;
       }
       let optionSelected;
-      options.forEach((option) => {
+      options.forEach(option => {
         if (option.value == params.value) {
           optionSelected = option;
         }
@@ -579,16 +646,16 @@ export default class AgGridController {
       return optionSelected === null || optionSelected === void 0 ? void 0 : optionSelected.label;
     }
     if ((source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface.SWITCH) {
-      if ((params === null || params === void 0 ? void 0 : params.value) === "S" || (params === null || params === void 0 ? void 0 : params.value) === true || (params === null || params === void 0 ? void 0 : params.value) === "true") {
-        return "Sim";
+      if ((params === null || params === void 0 ? void 0 : params.value) === 'S' || (params === null || params === void 0 ? void 0 : params.value) === true || (params === null || params === void 0 ? void 0 : params.value) === 'true') {
+        return 'Sim';
       }
-      else if ((params === null || params === void 0 ? void 0 : params.value) === "N" || (params === null || params === void 0 ? void 0 : params.value) === false || (params === null || params === void 0 ? void 0 : params.value) === "false") {
-        return "Não";
+      else if ((params === null || params === void 0 ? void 0 : params.value) === 'N' || (params === null || params === void 0 ? void 0 : params.value) === false || (params === null || params === void 0 ? void 0 : params.value) === 'false') {
+        return 'Não';
       }
     }
     if ((source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface.SEARCH) {
       if (((_a = params === null || params === void 0 ? void 0 : params.value) === null || _a === void 0 ? void 0 : _a.value) != undefined) {
-        return params.value.value + " - " + params.value.label;
+        return params.value.value + ' - ' + params.value.label;
       }
       else {
         return params === null || params === void 0 ? void 0 : params.value;
@@ -596,7 +663,7 @@ export default class AgGridController {
     }
     if ((source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface.DECIMALNUMBER) {
       if (params.value != undefined) {
-        const precision = Number(source.props.get("precision")) || 2;
+        const precision = Number(source.props.get('precision')) || 2;
         return NumberUtils.format(params.value.toString(), precision, precision);
       }
     }
@@ -607,7 +674,7 @@ export default class AgGridController {
     }
   }
   onCallStateChange(type, e) {
-    const finished = !("finished" in e) || e["finished"];
+    const finished = !('finished' in e) || e['finished'];
     if (finished && this._columnStateChangeCallback) {
       let info = {};
       let isUserChange = this.isUIEvent(e['source'], e['type']);
@@ -620,10 +687,10 @@ export default class AgGridController {
     }
   }
   isElementResize(e) {
-    return e["target"] && e["target"].getAttribute("ref") === "eResize";
+    return e['target'] && e['target'].getAttribute('ref') === 'eResize';
   }
   isUIEvent(source, type) {
-    let optionsArr = ["uiColumnMoved", "uiColumnResized", "uiColumnDragged", "uiColumnExpanded", "uiColumnSorted"];
+    let optionsArr = ['uiColumnMoved', 'uiColumnResized', 'uiColumnDragged', 'uiColumnExpanded', 'uiColumnSorted'];
     if (type === 'dragStopped') {
       return true;
     }
@@ -641,14 +708,14 @@ export default class AgGridController {
             const selectionInfo = this._dataUnit;
             this._selectionChangeCallback({
               selection: selectionInfo.records,
-              selectionHeaderStatus: this.getSelectionHeaderStatus()
+              selectionHeaderStatus: this.getSelectionHeaderStatus(),
             });
           }
           else {
             this._dataUnit.updatePageSelection(this._gridOptions.api.getSelectedRows().map((r) => r.__record__id__)).then(selectionInfo => {
               this._selectionChangeCallback({
                 selection: selectionInfo.records,
-                selectionHeaderStatus: this.getSelectionHeaderStatus()
+                selectionHeaderStatus: this.getSelectionHeaderStatus(),
               });
             });
           }
@@ -656,7 +723,7 @@ export default class AgGridController {
         else {
           this._selectionChangeCallback({
             selection: this._gridOptions.api.getSelectedRows(),
-            selectionHeaderStatus: this.getSelectionHeaderStatus()
+            selectionHeaderStatus: this.getSelectionHeaderStatus(),
           });
         }
       }, 0);
@@ -684,7 +751,7 @@ export default class AgGridController {
     if ((field === null || field === void 0 ? void 0 : field.userInterface) === UserInterface.SEARCH) {
       return this.DEFAULT_MAX_SIZE;
     }
-    const labelSize = ((((_b = field === null || field === void 0 ? void 0 : field.label) === null || _b === void 0 ? void 0 : _b.length) || 0) * this.DEFAULT_FONT_SIZE) + this.DEFAULT_ICON_SIZE;
+    const labelSize = (((_b = field === null || field === void 0 ? void 0 : field.label) === null || _b === void 0 ? void 0 : _b.length) || 0) * this.DEFAULT_FONT_SIZE + this.DEFAULT_ICON_SIZE;
     return labelSize > this.DEFAULT_MAX_SIZE ? this.DEFAULT_MAX_SIZE : labelSize;
   }
 }

package/dist/collection/components/ez-grid/controller/ag-grid/AgGridUtils.js

@@ -0,0 +1,8 @@
+export function calcFilterColumnLeftPosition(leftReference) {
+  const FIX_MARGIN = 60;
+  const FILTER_COLUMN_WIDTH = 330;
+  const screenWidth = window.innerWidth;
+  const maxLeft = screenWidth - (FILTER_COLUMN_WIDTH + FIX_MARGIN);
+  const leftInt = leftReference - FIX_MARGIN;
+  return leftInt > maxLeft ? maxLeft : leftInt;
+}