@sankhyalabs/ezui 4.18.2 → 4.19.0

package/dist/cjs/ez-grid.cjs.entry.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-7854a33d.js');
 const core = require('@sankhyalabs/core');
 const DataUnit = require('@sankhyalabs/core/dist/dataunit/DataUnit');
+const constants = require('./constants-3a1d64fb.js');
 
 /**
           * @ag-grid-community/all-modules - Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue * @version v28.2.1
@@ -118826,81 +118827,6 @@ var AllEnterpriseModules = [
 
 ModuleRegistry.registerModules(AllEnterpriseModules);
 
-const gridTerms = {
-  // for filter panel
-  page: "Página",
-  more: "mais",
-  to: "para",
-  of: "de",
-  next: "Próximo",
-  last: "Último",
-  first: "Primeiro",
-  previous: "Anterior",
-  loadingOoo: "Carregar",
-  // for set filter
-  selectAll: "Selecionar tudo",
-  searchOoo: "Procurar",
-  blanks: "Vazio",
-  // for number filter and text filter
-  filterOoo: "Filtrar",
-  applyFilter: "Aplicar filtro",
-  // for number filter
-  equals: "Igual",
-  lessThan: "Menor que",
-  greaterThan: "Maior que",
-  // for text filter
-  contains: "Contém",
-  startsWith: "Começa com",
-  endsWith: "Termina com",
-  // the header of the default group column
-  group: "Grupo",
-  // tool panel
-  columns: "Colunas",
-  rowGroupColumns: "Colunas do grupo de linhas",
-  rowGroupColumnsEmptyMessage: "Colunas do grupo de linhas vazias",
-  valueColumns: "Valores das colunas",
-  pivotMode: "Modo pivô",
-  groups: "Grupos",
-  values: "Valores",
-  pivots: "Pivôs",
-  valueColumnsEmptyMessage: "Valores de colunas vazias",
-  pivotColumnsEmptyMessage: "Pivôs de colunas vazias",
-  toolPanelButton: "Botão de painel de ferramentas",
-  // other
-  noRowsToShow: "Não há registros para mostrar.",
-  // enterprise menu
-  pinColumn: "Fixar coluna",
-  valueAggregation: "Agregar valor",
-  autosizeThiscolumn: "Redimensionar esta coluna",
-  autosizeAllColumns: "Redimensionar todas colunas",
-  groupBy: "Agrupar por",
-  ungroupBy: "Desagrupar por",
-  resetColumns: "Resetar colunas",
-  expandAll: "Expandir tudo",
-  collapseAll: "Contrair tudo",
-  toolPanel: "Painel de ferramentas",
-  export: "Exportar",
-  csvExport: "Exportar para CSV",
-  excelExport: "Exportar para Excel",
-  // enterprise menu pinning
-  pinLeft: "Fixar coluna",
-  pinRight: "Fixar a direita",
-  noPin: "Desfixar coluna",
-  // enterprise menu aggregation and status panel
-  sum: "Soma",
-  min: "Mínimo",
-  max: "Máximo",
-  none: "Nenhum",
-  count: "Contagem",
-  average: "Média",
-  // standard menu
-  copy: "Copiar",
-  copyWithHeaders: "Copiar com cabeçalho",
-  ctrlC: "Ctrl+C",
-  paste: "Colar",
-  ctrlV: "Ctrl+V"
-};
-
 class DataSource {
   constructor(dataUnit, controller, options) {
     this.RECORD_ARCHIVE = "__RECORD_ARCHIVE__";
@@ -119001,6 +118927,103 @@ class DataSource {
   }
 }
 
+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;
+}
+
+class EzGridCustomHeader {
+  init(agParams) {
+    var _a;
+    this.params = agParams;
+    this.element = document.createElement('div');
+    this.element.classList.add('ag-cell-label-container');
+    this.element.setAttribute('title', (_a = this.params.tooltip) !== null && _a !== void 0 ? _a : '');
+    this.element.innerHTML = `
+          <div class='ez-flex ez-flex--justify-between'>
+            <i id='ez-grid-filter-icon' class='ez-icon-filter' style='color:#008561'></i>        
+            <i id='ez-grid-menu-icon' class='ez-icon-dots-vertical'></i>        
+          </div>
+          <div id='ez-header-container' class='ez-flex ez-flex--justify-between ag-header-cell-text'>
+            <span class='ag-header-cell-text'>${this.params.displayName}</span>
+            <i id='ez-grid-sort-icon-down' class='ez-icon-arrow_downward' style='display: none;margin-left: 4px;font-size: var(--text--medium, 14px);align-self: center;'></i>
+            <i id='ez-grid-sort-icon-up' class='ez-icon-arrow_downward' style='display: none; transform: rotate(180deg);margin-left: 4px;font-size: var(--text--medium, 14px);align-self: center;'></i>
+          </div>
+    `;
+    this.configMenuClick();
+    this.configSortClick();
+    this.configSortListener();
+    this.configFilterButton();
+  }
+  refresh(agParams) {
+    this.params = agParams;
+    this.configFilterButton();
+    this.configSortIcon();
+  }
+  configFilterButton() {
+    this.filterButton = this.element.querySelector('#ez-grid-filter-icon');
+    this.filterButton.style.display = this.params.hasFilter() ? 'flex' : 'none';
+    this.onFilterButtonClickListener = this.onClickFilter.bind(this);
+    this.filterButton.addEventListener('click', this.onFilterButtonClickListener);
+  }
+  onClickFilter() {
+    var _a;
+    const iconLeft = (_a = this.filterButton) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left;
+    this.params.showColumnFilter(`${calcFilterColumnLeftPosition(iconLeft)}px`);
+  }
+  configSortIcon() {
+    this.sortDownIcon.style.display = this.params.column.isSortDescending() ? 'flex' : 'none';
+    this.sortUpIcon.style.display = this.params.column.isSortAscending() ? 'flex' : 'none';
+  }
+  configSortListener() {
+    if (this.params.enableSorting) {
+      this.sortUpIcon = this.element.querySelector('#ez-grid-sort-icon-up');
+      this.sortDownIcon = this.element.querySelector('#ez-grid-sort-icon-down');
+      this.onSortChangedListener = this.configSortIcon.bind(this);
+      this.params.column.addEventListener('sortChanged', this.onSortChangedListener);
+      this.configSortIcon();
+    }
+  }
+  onSortClick(event) {
+    this.params.progressSort(event.shiftKey);
+  }
+  configSortClick() {
+    if (this.params.column.getColDef().sortable) {
+      this.headerContainer = this.element.querySelector('#ez-header-container');
+      this.onSortClickListener = this.onSortClick.bind(this);
+      this.headerContainer.addEventListener('click', this.onSortClickListener);
+    }
+  }
+  onMenuClick() {
+    this.params.showColumnMenu(this.menuButton);
+  }
+  configMenuClick() {
+    this.menuButton = this.element.querySelector('#ez-grid-menu-icon');
+    this.onMenuClickListener = this.onMenuClick.bind(this);
+    this.menuButton.addEventListener('click', this.onMenuClickListener);
+  }
+  getGui() {
+    return this.element;
+  }
+  destroy() {
+    if (this.onMenuClickListener) {
+      this.menuButton.removeEventListener('click', this.onMenuClickListener);
+    }
+    if (this.onSortClickListener) {
+      this.headerContainer.removeEventListener('click', this.onSortClickListener);
+    }
+    if (this.onFilterButtonClickListener) {
+      this.filterButton.removeEventListener('click', this.onFilterButtonClickListener);
+    }
+    this.params.column.removeEventListener('sortChanged', this.onSortChangedListener);
+    this.params.column.removeEventListener('applyFilterColumnOptions', this.onFilterAppliedListener);
+  }
+}
+
 class CellRendererStatus {
   constructor() {
     this.DEFAULT_COLOR = 'transparent';
@@ -119086,102 +119109,111 @@ class SelectionHeader {
   }
 }
 
-class EzGridCustomHeader {
-  init(agParams) {
-    var _a;
-    this.params = agParams;
-    this.element = document.createElement('div');
-    this.element.classList.add('ag-cell-label-container');
-    this.element.setAttribute('title', (_a = this.params.tooltip) !== null && _a !== void 0 ? _a : '');
-    this.element.innerHTML = `
-          <div class='ez-flex ez-flex--justify-between'>
-            <i id='ez-grid-filter-icon' class='ez-icon-filter' style='color:#008561'></i>        
-            <i id='ez-grid-menu-icon' class='ez-icon-dots-vertical'></i>        
-          </div>
-          <div id='ez-header-container' class='ez-flex ez-flex--justify-between ag-header-cell-text'>
-            <span class='ag-header-cell-text'>${this.params.displayName}</span>
-            <i id='ez-grid-sort-icon-down' class='ez-icon-arrow_downward' style='display: none;margin-left: 4px;font-size: var(--text--medium, 14px);align-self: center;'></i>
-            <i id='ez-grid-sort-icon-up' class='ez-icon-arrow_downward' style='display: none; transform: rotate(180deg);margin-left: 4px;font-size: var(--text--medium, 14px);align-self: center;'></i>
-          </div>
-    `;
-    this.configMenuClick();
-    this.configSortClick();
-    this.configSortListener();
-    this.configFilterButton();
-  }
-  refresh(agParams) {
-    this.params = agParams;
-    this.configFilterButton();
-    this.configSortIcon();
-  }
-  configFilterButton() {
-    this.filterButton = this.element.querySelector('#ez-grid-filter-icon');
-    this.filterButton.style.display = this.params.hasFilter() ? 'flex' : 'none';
-    this.onFilterButtonClickListener = this.params.showColumnFilter.bind(this);
-    this.filterButton.addEventListener('click', this.onFilterButtonClickListener);
-  }
-  configSortIcon() {
-    this.sortDownIcon.style.display = this.params.column.isSortDescending() ? 'flex' : 'none';
-    this.sortUpIcon.style.display = this.params.column.isSortAscending() ? 'flex' : 'none';
-  }
-  configSortListener() {
-    if (this.params.enableSorting) {
-      this.sortUpIcon = this.element.querySelector('#ez-grid-sort-icon-up');
-      this.sortDownIcon = this.element.querySelector('#ez-grid-sort-icon-down');
-      this.onSortChangedListener = this.configSortIcon.bind(this);
-      this.params.column.addEventListener('sortChanged', this.onSortChangedListener);
-      this.configSortIcon();
-    }
-  }
-  onSortClick(event) {
-    this.params.progressSort(event.shiftKey);
-  }
-  configSortClick() {
-    if (this.params.column.getColDef().sortable) {
-      this.headerContainer = this.element.querySelector('#ez-header-container');
-      this.onSortClickListener = this.onSortClick.bind(this);
-      this.headerContainer.addEventListener('click', this.onSortClickListener);
-    }
-  }
-  onMenuClick() {
-    this.params.showColumnMenu(this.menuButton);
-  }
-  configMenuClick() {
-    this.menuButton = this.element.querySelector('#ez-grid-menu-icon');
-    this.onMenuClickListener = this.onMenuClick.bind(this);
-    this.menuButton.addEventListener('click', this.onMenuClickListener);
+const gridTerms = {
+  // for filter panel
+  page: "Página",
+  more: "mais",
+  to: "para",
+  of: "de",
+  next: "Próximo",
+  last: "Último",
+  first: "Primeiro",
+  previous: "Anterior",
+  loadingOoo: "Carregar",
+  // for set filter
+  selectAll: "Selecionar tudo",
+  searchOoo: "Procurar",
+  blanks: "Vazio",
+  // for number filter and text filter
+  filterOoo: "Filtrar",
+  applyFilter: "Aplicar filtro",
+  // for number filter
+  equals: "Igual",
+  lessThan: "Menor que",
+  greaterThan: "Maior que",
+  // for text filter
+  contains: "Contém",
+  startsWith: "Começa com",
+  endsWith: "Termina com",
+  // the header of the default group column
+  group: "Grupo",
+  // tool panel
+  columns: "Colunas",
+  rowGroupColumns: "Colunas do grupo de linhas",
+  rowGroupColumnsEmptyMessage: "Colunas do grupo de linhas vazias",
+  valueColumns: "Valores das colunas",
+  pivotMode: "Modo pivô",
+  groups: "Grupos",
+  values: "Valores",
+  pivots: "Pivôs",
+  valueColumnsEmptyMessage: "Valores de colunas vazias",
+  pivotColumnsEmptyMessage: "Pivôs de colunas vazias",
+  toolPanelButton: "Botão de painel de ferramentas",
+  // other
+  noRowsToShow: "Não há registros para mostrar.",
+  // enterprise menu
+  pinColumn: "Fixar coluna",
+  valueAggregation: "Agregar valor",
+  autosizeThiscolumn: "Redimensionar esta coluna",
+  autosizeAllColumns: "Redimensionar todas colunas",
+  groupBy: "Agrupar por",
+  ungroupBy: "Desagrupar por",
+  resetColumns: "Resetar colunas",
+  expandAll: "Expandir tudo",
+  collapseAll: "Contrair tudo",
+  toolPanel: "Painel de ferramentas",
+  export: "Exportar",
+  csvExport: "Exportar para CSV",
+  excelExport: "Exportar para Excel",
+  // enterprise menu pinning
+  pinLeft: "Fixar coluna",
+  pinRight: "Fixar a direita",
+  noPin: "Desfixar coluna",
+  // enterprise menu aggregation and status panel
+  sum: "Soma",
+  min: "Mínimo",
+  max: "Máximo",
+  none: "Nenhum",
+  count: "Contagem",
+  average: "Média",
+  // standard menu
+  copy: "Copiar",
+  copyWithHeaders: "Copiar com cabeçalho",
+  ctrlC: "Ctrl+C",
+  paste: "Colar",
+  ctrlV: "Ctrl+V"
+};
+
+class AgGridController {
+  configFilterColumn(filterColumn) {
+    this._filterColumn = filterColumn;
+    this._filterColumn.addEventListener('applyFilterColumnOptions', this.handleFilteredColumnsChanged.bind(this));
   }
-  getGui() {
-    return this.element;
+  handleFilteredColumnsChanged(event) {
+    const applied = event.detail;
+    this._filteredColumns.set(applied.field, applied.values);
+    this._gridOptions.api.refreshHeader();
+    this._dataUnit.loadData();
   }
-  destroy() {
-    if (this.onMenuClickListener) {
-      this.menuButton.removeEventListener('click', this.onMenuClickListener);
-    }
-    if (this.onSortClickListener) {
-      this.headerContainer.removeEventListener('click', this.onSortClickListener);
-    }
-    if (this.onFilterButtonClickListener) {
-      this.filterButton.removeEventListener('click', this.onFilterButtonClickListener);
-    }
-    this.params.column.removeEventListener('sortChanged', this.onSortChangedListener);
+  showFilterColumn(configs) {
+    var _a;
+    (_a = this._filterColumn) === null || _a === void 0 ? void 0 : _a.show(configs);
   }
-}
-
-class AgGridController {
   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() {
@@ -119189,23 +119221,59 @@ 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" ? core.SortMode.ASC : core.SortMode.DESC;
+        const mode = sort === 'asc' ? core.SortMode.ASC : core.SortMode.DESC;
         const sortField = field ? { field: field.name, dataType: field.dataType, mode } : { field: colId, dataType: core.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 : core.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 === core.DataType.OBJECT ? core.DataType.TEXT : dataType,
+            name: paramName,
+            value: option.value,
+          });
+        });
+        const columnExpression = dataType === core.DataType.DATE ? `onlydate(this.${column})` : `this.${column}`;
+        return {
+          name: `${constants.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(core.ApplicationContext.getContextValue("__EZUI__GRID_LICENSE__"));
+      LicenseManager.setLicenseKey(core.ApplicationContext.getContextValue('__EZUI__GRID_LICENSE__'));
       this._columnStateChangeCallback = options.onColumnStateChange;
       this._selectionChangeCallback = options.onSelectionChange;
       this._doubleClickCallBack = options.onDoubleClick;
@@ -119214,28 +119282,30 @@ 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);
@@ -119256,17 +119326,22 @@ 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,
@@ -119277,31 +119352,31 @@ 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) {
@@ -119353,9 +119428,9 @@ 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 {
@@ -119366,21 +119441,21 @@ 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;
@@ -119414,18 +119489,18 @@ 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) {
@@ -119448,7 +119523,7 @@ 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 => {
@@ -119480,13 +119555,13 @@ 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;
@@ -119513,7 +119588,7 @@ 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 });
   }
@@ -119531,17 +119606,19 @@ 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,
@@ -119552,11 +119629,11 @@ class AgGridController {
         pinned: true,
         cellRenderer: CellRendererStatus,
         cellRendererParams: {
-          statusResolver: this._statusResolver
+          statusResolver: this._statusResolver,
         },
         cellStyle: {
-          "text-align": "center"
-        }
+          'text-align': 'center',
+        },
       });
     }
     cols.forEach(c => {
@@ -119569,25 +119646,27 @@ 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();
@@ -119616,24 +119695,26 @@ 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();
@@ -119651,7 +119732,7 @@ 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;
     }
@@ -119663,23 +119744,20 @@ 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 = core.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 = core.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,
@@ -119689,18 +119767,19 @@ 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) {
@@ -119708,32 +119787,34 @@ class AgGridController {
     switch (source === null || source === void 0 ? void 0 : source.userInterface) {
       case core.UserInterface.DECIMALNUMBER:
       case core.UserInterface.INTEGERNUMBER:
-        cellStyle["text-align"] = "right";
+        cellStyle['text-align'] = 'right';
         break;
       case core.UserInterface.DATE:
       case core.UserInterface.DATETIME:
       case core.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;
         }
@@ -119741,16 +119822,16 @@ class AgGridController {
       return optionSelected === null || optionSelected === void 0 ? void 0 : optionSelected.label;
     }
     if ((source === null || source === void 0 ? void 0 : source.userInterface) === core.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) === core.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;
@@ -119758,7 +119839,7 @@ class AgGridController {
     }
     if ((source === null || source === void 0 ? void 0 : source.userInterface) === core.UserInterface.DECIMALNUMBER) {
       if (params.value != undefined) {
-        const precision = Number(source.props.get("precision")) || 2;
+        const precision = Number(source.props.get('precision')) || 2;
         return core.NumberUtils.format(params.value.toString(), precision, precision);
       }
     }
@@ -119769,7 +119850,7 @@ 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']);
@@ -119782,10 +119863,10 @@ 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;
     }
@@ -119803,14 +119884,14 @@ 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(),
               });
             });
           }
@@ -119818,7 +119899,7 @@ class AgGridController {
         else {
           this._selectionChangeCallback({
             selection: this._gridOptions.api.getSelectedRows(),
-            selectionHeaderStatus: this.getSelectionHeaderStatus()
+            selectionHeaderStatus: this.getSelectionHeaderStatus(),
           });
         }
       }, 0);
@@ -119846,7 +119927,7 @@ class AgGridController {
     if ((field === null || field === void 0 ? void 0 : field.userInterface) === core.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;
   }
 }
@@ -119879,8 +119960,9 @@ function getElementID(sufix) {
   };
 }
 
-const ezGridCss = ".sc-ez-grid-h{display:grid;grid-template-rows:auto 1fr auto;height:100%;width:100%;--ez-grid__header--background-color:var(--background--xlight, #FFF);--ez-grid__selection-counter--z-index:var(--more-visible, 2);--ez-grid__container--shadow:0 0 16px 0 rgb(0 38 111 / 12%)}[no-header].sc-ez-grid-h{grid-template-rows:1fr auto}.grid-header.sc-ez-grid{display:flex;justify-content:space-between;align-items:center;background-color:var(--ez-grid__header--background-color, #FFF);z-index:var(--visible)}.grid__container.sc-ez-grid{padding-top:15px;margin-top:-12px;box-shadow:var(--ez-grid__container--shadow);background-color:var(--ez-grid__header--background-color)}.grid-header__container.sc-ez-grid{display:flex;align-items:center}.grid__selection-counter.sc-ez-grid{position:fixed;white-space:nowrap;transform:translate(-50%, 0px);left:50%;opacity:0;bottom:-100%;transition:opacity 0.1s, bottom 0.5s;z-index:var(--ez-grid__selection-counter--z-index)}.grid__selection-counter--opened.sc-ez-grid{opacity:1;bottom:0px}.grid__btn-close.sc-ez-grid{display:flex;align-items:center;justify-content:center;padding:0;outline:none;width:20px;height:20px;border:none;background-color:unset;cursor:pointer}.grid__btn-clear.sc-ez-grid{--ez-button--link-color:var(--color--alert-warning-900, #8C6B00);--ez-button--link--hover-color:var(--color--alert-warning-900, #8C6B00)}[no-header].sc-ez-grid-h .grid-header.sc-ez-grid{display:none}";
+const ezGridCss = ".sc-ez-grid-h{display:grid;grid-template-rows:auto 1fr auto;height:100%;width:100%;--ez-grid__header--background-color:var(--background--xlight, #FFF);--ez-grid__selection-counter--z-index:var(--more-visible, 2);--ez-grid__container--shadow:0 0 16px 0 rgb(0 38 111 / 12%)}[no-header].sc-ez-grid-h{grid-template-rows:1fr auto}.grid-header.sc-ez-grid{display:grid;justify-content:space-between;align-items:center;grid-template-columns:1fr;background-color:var(--ez-grid__header--background-color, #FFF);z-index:var(--visible)}.grid__container.sc-ez-grid{padding-top:15px;margin-top:-12px;box-shadow:var(--ez-grid__container--shadow);background-color:var(--ez-grid__header--background-color)}.grid-header__popover.sc-ez-grid{position:relative;top:var(--space--sm, 16px)}.grid-header__container.sc-ez-grid{display:flex;align-items:center}.grid-header__position.sc-ez-grid{display:flex;align-items:center;justify-content:space-between}.grid__selection-counter.sc-ez-grid{position:fixed;white-space:nowrap;transform:translate(-50%, 0px);left:50%;opacity:0;bottom:-100%;transition:opacity 0.1s, bottom 0.5s;z-index:var(--ez-grid__selection-counter--z-index)}.grid__selection-counter--opened.sc-ez-grid{opacity:1;bottom:0px}.grid__btn-close.sc-ez-grid{display:flex;align-items:center;justify-content:center;padding:0;outline:none;width:20px;height:20px;border:none;background-color:unset;cursor:pointer}.grid__btn-clear.sc-ez-grid{--ez-button--link-color:var(--color--alert-warning-900, #8C6B00);--ez-button--link--hover-color:var(--color--alert-warning-900, #8C6B00)}[no-header].sc-ez-grid-h .grid-header.sc-ez-grid{display:none}";
 
+const windowInstace = window;
 const EzGrid = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -119890,6 +119972,8 @@ const EzGrid = class {
     this.configChange = index.createEvent(this, "configChange", 7);
     this.componentReady = index.createEvent(this, "componentReady", 7);
     this._gridController = new AgGridController(false);
+    this.timeFadeOutInMs = 3000;
+    this.toastMessageToUpdateFilterColumn = 'Filtro de coluna aplicado com sucesso!';
     this._paginationInfo = undefined;
     this._paginationChangedByKeyboard = true;
     this._showSelectionCounter = false;
@@ -119901,6 +119985,7 @@ const EzGrid = class {
     this.serverUrl = undefined;
     this.dataUnit = undefined;
     this.statusResolver = undefined;
+    this.columnfilterDataSource = undefined;
   }
   /**
    * Aplica a definição de colunas.
@@ -119987,7 +120072,7 @@ const EzGrid = class {
           newConfigColumn['width'] = columnState.width;
         }
         if (columnState.sort) {
-          newConfigColumn['ascending'] = (columnState.sort.toUpperCase() === 'ASC');
+          newConfigColumn['ascending'] = columnState.sort.toUpperCase() === 'ASC';
           newConfigColumn['orderIndex'] = columnState.sortIndex;
         }
         else {
@@ -120011,23 +120096,23 @@ const EzGrid = class {
         return;
       }
       const limitBottom = boundingContainer.bottom - 30;
-      this._gridSelectionCounter.style.bottom = (document.body.clientHeight - limitBottom) + 'px';
+      this._gridSelectionCounter.style.bottom = document.body.clientHeight - limitBottom + 'px';
     }
     else {
-      this._gridSelectionCounter.style.bottom = "";
+      this._gridSelectionCounter.style.bottom = '';
     }
   }
   setEvents() {
-    window.removeEventListener("scroll", this.positionSelectionCounter.bind(this));
-    window.addEventListener("scroll", this.positionSelectionCounter.bind(this));
+    window.removeEventListener('scroll', this.positionSelectionCounter.bind(this));
+    window.addEventListener('scroll', this.positionSelectionCounter.bind(this));
   }
   resizeSelectionCounter() {
     if (this._gridSelectionCounter == undefined) {
       return;
     }
-    this._gridSelectionCounter.style.width = "";
+    this._gridSelectionCounter.style.width = '';
     if (this._gridSelectionCounter.clientHeight > 42) {
-      this._gridSelectionCounter.style.width = "min-content";
+      this._gridSelectionCounter.style.width = 'min-content';
     }
     this.positionSelectionCounter();
   }
@@ -120086,8 +120171,8 @@ const EzGrid = class {
   buildDataElementId() {
     const dataInfo = { dataUnit: this.dataUnit };
     core.ElementIDUtils.addIDInfo(this._element, null, dataInfo);
-    const dtInfo = { id: "ezGrid" };
-    core.ElementIDUtils.addIDInfo(this._refPaginationControl, "pagination", dtInfo);
+    const dtInfo = { id: 'ezGrid' };
+    core.ElementIDUtils.addIDInfo(this._refPaginationControl, 'pagination', dtInfo);
   }
   previousPage() {
     if (this.dataUnit) {
@@ -120107,7 +120192,7 @@ const EzGrid = class {
       return [
         index.h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium" }, index.h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, `${firstRecord}-${lastRecord}`), ` de ${total}`),
         index.h("ez-button", { size: "small", iconName: "chevron-left", class: "ez-margin-right--medium", mode: "icon", enabled: currentPage > 0, onClick: () => this.previousPage(), label: "P\u00E1gina anterior" }),
-        index.h("ez-button", { size: "small", iconName: "chevron-right", class: "ez-margin-right--medium", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
+        index.h("ez-button", { size: "small", iconName: "chevron-right", class: "ez-margin-right--medium", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" }),
       ];
     }
     return null;
@@ -120133,7 +120218,7 @@ const EzGrid = class {
       allowMultipleSelection: this.multipleSelection,
       serverURL: this.serverUrl,
       dataUnit: this.dataUnit,
-      statusResolver: this.statusResolver
+      statusResolver: this.statusResolver,
     });
     if (this.config) {
       this.observeConfig(this.config);
@@ -120141,15 +120226,21 @@ const EzGrid = class {
     this.buildDataElementId();
     this.setEvents();
     this.componentReady.emit();
+    this._gridController.configFilterColumn(this._filterColumn);
   }
   componentWillRender() {
     this.configSelectionCounter();
   }
+  componentDidRender() {
+    windowInstace.addEventListener('onSubmitFilter', () => {
+      this.toastElementRef.show(this.toastMessageToUpdateFilterColumn, this.timeFadeOutInMs, true, true);
+    });
+  }
   render() {
     var _a;
-    return (index.h(index.Host, null, index.h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, index.h("div", { class: "grid-header__container" }, index.h("slot", { name: "leftButtons" })), index.h("div", { class: "grid-header__container", ref: ref => this._refPaginationControl = ref }, this.getPaginationControl())), index.h("div", { ref: (ref) => this._gridSelectionCounter = ref, class: `grid__selection-counter
-          ${this._showSelectionCounter ? "grid__selection-counter--opened" : ""}
-        ` }, index.h(SelectionCounter, { selectionCount: this._selectionCount, currentPageSelected: this._currentPageSelected, hasPagination: !!this._paginationInfo, total: (_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.total, allRecordSelected: this._isAllSelection, onSelectAll: () => this.onSelectAllRecords(), onSelectPage: () => this.onSelectPageRecords(), onClearAll: () => this.onClearSelectedRecords(), onClose: () => this._showSelectionCounter = false })), index.h("div", { class: "grid__container ez-grid", ref: elem => this._container = elem }), index.h("div", { class: "grid__footer" }, index.h("slot", { name: "footer" }))));
+    return (index.h(index.Host, null, index.h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, index.h("filter-column", { class: "grid-header__popover", dataSource: this.columnfilterDataSource, dataUnit: this.dataUnit, ref: (element) => (this._filterColumn = element) }), index.h("div", { class: "grid-header__position" }, index.h("div", { class: "grid-header__container" }, index.h("slot", { name: "leftButtons" })), index.h("div", { class: "grid-header__container", ref: ref => (this._refPaginationControl = ref) }, this.getPaginationControl()))), index.h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter
+          ${this._showSelectionCounter ? 'grid__selection-counter--opened' : ''}
+        ` }, index.h(SelectionCounter, { selectionCount: this._selectionCount, currentPageSelected: this._currentPageSelected, hasPagination: !!this._paginationInfo, total: (_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.total, allRecordSelected: this._isAllSelection, onSelectAll: () => this.onSelectAllRecords(), onSelectPage: () => this.onSelectPageRecords(), onClearAll: () => this.onClearSelectedRecords(), onClose: () => (this._showSelectionCounter = false) })), index.h("div", { class: "grid__container ez-grid", ref: elem => (this._container = elem) }), index.h("div", { class: "grid__footer" }, index.h("slot", { name: "footer" })), index.h("ez-toast", { ref: (element) => (this.toastElementRef = element) }, index.h("ez-icon", { slot: "icon", iconName: "check" }))));
   }
   static get assetsDirs() { return ["../assets"]; }
   get _element() { return index.getElement(this); }