@sankhyalabs/ezui 5.21.0-dev.4 → 5.21.0-dev.40

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

@@ -1,9 +1,10 @@
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-baa5e267.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-5a720e56.js';
 import { Action, ObjectUtils as ObjectUtils$1, HTMLBuilder, ApplicationContext, UserInterface, StringUtils as StringUtils$1, NumberUtils as NumberUtils$1, MaskFormatter, DataType, SortMode, ElementIDUtils, FieldComparator, DateUtils as DateUtils$1, ArrayUtils as ArrayUtils$1, JSUtils, OverflowWatcher, OVERFLOWED_CLASS_NAME } from '@sankhyalabs/core';
 import { SelectionMode } from '@sankhyalabs/core/dist/dataunit/DataUnit';
 import { A as ApplicationUtils } from './ApplicationUtils-eaf91331.js';
 import './DialogType-54a62731.js';
 import './CheckMode-bdb2ec19.js';
+import { C as CustomEditorSource, a as CustomRenderSource } from './ICustomRender-875b5a40.js';
 import { D as DISTINCT_FILTER_NAME_PREFIX, E as EZ_GRID_LOADING_SOURCE } from './constants-4e0d35b7.js';
 import { b as buildFieldMetadata, R as RecordValidationProcessor } from './RecordValidationProcessor-b00b8b77.js';
 
@@ -118856,6 +118857,11 @@ class DataSource {
       });
     }
   }
+  handleFocusFirstRow() {
+    if (this._options.autoFocus) {
+      this._controller.setFocusFirstRow();
+    }
+  }
   isSilentChange(action) {
     //TODO: Provisorio p/ não atualizar a grade quando a alteração for apenas de campos transisntes
     var _a, _b;
@@ -118863,7 +118869,7 @@ class DataSource {
       return false;
     }
     if (action.type === Action.DATA_CHANGED) {
-      return ((_a = Object.keys(action === null || action === void 0 ? void 0 : action.payload)) === null || _a === void 0 ? void 0 : _a.filter(changeName => changeName.startsWith("transient.") || changeName === "records").length) > 0;
+      return (_a = Object.keys(action === null || action === void 0 ? void 0 : action.payload)) === null || _a === void 0 ? void 0 : _a.some(key => { var _a; return (key.startsWith("transient.") && action.payload[key]) || ((_a = action.payload.records) === null || _a === void 0 ? void 0 : _a.length) > 0; });
     }
     if (action.type === Action.EDITION_CANCELED) {
       return ((_b = action === null || action === void 0 ? void 0 : action.payload) === null || _b === void 0 ? void 0 : _b.silent) === true;
@@ -118887,6 +118893,7 @@ class DataSource {
             this._options.onPaginationChange(this._dataUnit.getPaginationInfo(), action.payload.selectFirstRecord);
           }
           this.updateSelection();
+          this.handleFocusFirstRow();
           break;
         case Action.PAGINATION_UPDATED:
           if (this._options) {
@@ -118929,6 +118936,9 @@ class DataSource {
       this._controller.selectRows(selectionInfo.recordIds, true);
     }
   }
+  setAutoFocus(autoFocus) {
+    this._options.autoFocus = autoFocus;
+  }
   getRows(params) {
     if (this.needReload(params)) {
       this._lastLoadingParams = params;
@@ -119314,8 +119324,9 @@ const buildDateTime = ({ readOnly }) => {
 };
 
 const buildDecimal = ({ readOnly, props }) => {
-  const precision = Number((props === null || props === void 0 ? void 0 : props.precision) || 2);
-  const prettyPrecision = Number((props === null || props === void 0 ? void 0 : props.prettyPrecision) || precision);
+  var _a, _b;
+  const precision = Number((_a = props === null || props === void 0 ? void 0 : props.precision) !== null && _a !== void 0 ? _a : 2);
+  const prettyPrecision = Number((_b = props === null || props === void 0 ? void 0 : props.prettyPrecision) !== null && _b !== void 0 ? _b : precision);
   return buildNumeric(readOnly, precision, prettyPrecision);
 };
 const buildInteger = ({ readOnly }) => {
@@ -119408,11 +119419,12 @@ uiBuilders.set(UserInterface.LONGTEXT, buildTextAreaInput);
 uiBuilders.set(UserInterface.SEARCH, buildSearch);
 class EzCellEditor {
   init(params) {
+    this._rowData = params.data;
     const fieldName = params.column.getColId();
     const dataUnit = params.context.dataUnit;
-    const fieldMetadata = buildEditorMetadata(dataUnit.getField(fieldName), params.eGridCell, dataUnit, params.context.editionManager);
-    const builder = uiBuilders.get(fieldMetadata.userInterface) || buildTextInput;
-    this._gui = builder(fieldMetadata);
+    this._fieldMetadata = buildEditorMetadata(dataUnit.getField(fieldName), params.eGridCell, dataUnit, params.context.editionManager);
+    const builder = uiBuilders.get(this._fieldMetadata.userInterface) || buildTextInput;
+    this._gui = builder(this._fieldMetadata);
     if (this._gui.valueSetter != undefined) {
       this._gui.valueSetter(params.value);
     }
@@ -119436,10 +119448,151 @@ class EzCellEditor {
   isPopup() {
     return this._gui.isPopUp;
   }
+  getFieldMetadata() {
+    return this._fieldMetadata;
+  }
+  getRecord() {
+    return this._rowData;
+  }
+}
+
+class EzGridCustomCellEditor extends EzCellEditor {
+  init(params) {
+    var _a, _b;
+    this._value = params.value;
+    this._fieldName = params.column.getColId();
+    this._customEditorInstance = params.customEditorsInfo.customEditor;
+    super.init(params);
+    this._defaultGui = this.getDefaultGui();
+    const fieldMetadata = super.getFieldMetadata();
+    this._params = {
+      value: params.value,
+      charPress: params.charPress,
+      currentEditor: this._defaultGui,
+      name: this._fieldName,
+      source: CustomEditorSource.GRID,
+      detailContext: params.customEditorsInfo.detailContext,
+      setValue: (value) => this.setValue(value),
+      getValue: () => this.getValue(),
+      record: super.getRecord(),
+      editorMetadata: {
+        hidden: ((_a = fieldMetadata.props) === null || _a === void 0 ? void 0 : _a.visible) === false,
+        label: fieldMetadata.label,
+        userInterface: fieldMetadata.userInterface,
+        props: fieldMetadata.props,
+        optionLoader: fieldMetadata.optionLoader,
+        options: ((_b = fieldMetadata.props) === null || _b === void 0 ? void 0 : _b.options) || {},
+      },
+    };
+  }
+  getDefaultGui() {
+    const gui = super.getGui();
+    gui.value = this._value;
+    gui.onkeyup = (event) => {
+      const value = event.target.value;
+      this.setValue(value);
+    };
+    return gui;
+  }
+  getGui() {
+    const editorElement = this._customEditorInstance.getEditorElement(this._params);
+    if (!editorElement) {
+      return this._defaultGui;
+    }
+    if (typeof editorElement === 'string') {
+      const element = HTMLBuilder.parseElement(editorElement);
+      return element;
+    }
+    return editorElement;
+  }
+  setValue(value) {
+    this._value = value;
+  }
+  getValue() {
+    return this._value;
+  }
+}
+
+class EzCellRender {
+  init(params) {
+    const span = document.createElement('span');
+    this._currentParams = params;
+    span.textContent = params.value;
+    const fieldName = params.column.getColId();
+    const dataUnit = params.context.dataUnit;
+    this._fieldMetadata = buildEditorMetadata(dataUnit.getField(fieldName), params.eGridCell, dataUnit, params.context.editionManager);
+    this._gui = span;
+  }
+  refresh() {
+    try {
+      this._currentParams.refreshCell();
+      return true;
+    }
+    catch (_a) {
+      return false;
+    }
+  }
+  getGui() {
+    return this._gui;
+  }
+  afterGuiAttached() {
+    this.focusIn();
+  }
+  focusIn() {
+    this._gui.focus();
+    this._gui.setFocus({ selectText: true });
+  }
+  getValue() {
+    return this._currentParams.getValue();
+  }
+  isPopup() {
+    return this._gui.isPopUp;
+  }
+  getFieldMetadata() {
+    return this._fieldMetadata;
+  }
+}
+
+class EzGridCustomCellRender extends EzCellRender {
+  init(params) {
+    var _a, _b;
+    this._fieldName = params.column.getColId();
+    this._customRenderInstance = params.customRendersInfo.customRender;
+    super.init(params);
+    const fieldMetadata = super.getFieldMetadata();
+    this._params = {
+      value: params.value,
+      charPress: '',
+      currentRender: super.getGui(),
+      name: this._fieldName,
+      source: CustomRenderSource.GRID,
+      getValue: () => params.getValue(),
+      detailContext: params.customRendersInfo.detailContext,
+      renderMetadata: {
+        hidden: ((_a = fieldMetadata.props) === null || _a === void 0 ? void 0 : _a.visible) === false,
+        label: fieldMetadata.label,
+        userInterface: fieldMetadata.userInterface,
+        props: fieldMetadata.props,
+        optionLoader: fieldMetadata.optionLoader,
+        options: ((_b = fieldMetadata.props) === null || _b === void 0 ? void 0 : _b.options) || {},
+      }
+    };
+  }
+  getGui() {
+    const editorElement = this._customRenderInstance.getRenderElement(this._params);
+    if (!editorElement) {
+      return super.getGui();
+    }
+    if (typeof editorElement === 'string') {
+      const element = HTMLBuilder.parseElement(editorElement);
+      return element;
+    }
+    return editorElement;
+  }
 }
 
 class GridEditionManager {
-  constructor(dataUnit, useEnterLikeTab, recordsValidator, editionIsDisabled) {
+  constructor(dataUnit, useEnterLikeTab, recordsValidator, editionIsDisabled, customEditors, customRenders) {
     this._dataUnit = dataUnit;
     this._recordValidationProcessor = new RecordValidationProcessor(this._dataUnit, {
       getRequiredFields: () => this.getRequiredFields(),
@@ -119448,6 +119601,8 @@ class GridEditionManager {
     }, recordsValidator);
     this._useEnterLikeTab = useEnterLikeTab;
     this._editionIsDisabled = editionIsDisabled;
+    this._customEditors = customEditors;
+    this._customRenders = customRenders;
   }
   configureGrid(options) {
     this._gridOptions = options;
@@ -119514,6 +119669,30 @@ class GridEditionManager {
     col.suppressKeyboardEvent = (params) => {
       return params.event.key === KeyCode.ENTER;
     };
+    col.cellEditorSelector = (params) => {
+      var _a;
+      if ((_a = this._customEditors) === null || _a === void 0 ? void 0 : _a.has(params.colDef.field)) {
+        const customEditor = this._customEditors.get(params.colDef.field);
+        return {
+          component: EzGridCustomCellEditor,
+          params: {
+            customEditorsInfo: customEditor,
+          }
+        };
+      }
+    };
+    col.cellRendererSelector = (params) => {
+      var _a;
+      if ((_a = this._customRenders) === null || _a === void 0 ? void 0 : _a.has(params.colDef.field)) {
+        const customRender = this._customRenders.get(params.colDef.field);
+        return {
+          component: EzGridCustomCellRender,
+          params: {
+            customRendersInfo: customRender,
+          }
+        };
+      }
+    };
     return col;
   }
   getRequiredFields() {
@@ -119655,6 +119834,12 @@ class GridEditionManager {
       this._lastCellEdited = { rowIndex: event.rowIndex, column: event.column, rowPinned: undefined };
     }
   }
+  setCellEditors(customEditors) {
+    this._customEditors = customEditors;
+  }
+  setCellRenders(customRenders) {
+    this._customRenders = customRenders;
+  }
 }
 class TargetEdition {
   constructor(rowIndex, column, backwards) {
@@ -119691,14 +119876,13 @@ class AgGridController {
     this.STATUS_COL_ID = 'statusColumn';
     this.RECORD_ARCHIVE_COL_ID = '__RECORD_ARCHIVE__';
     this.BLOCK_LOAD_DEBOUNCE = 100;
-    this.DEFAULT_FONT_SIZE = 14;
-    this.DEFAULT_ICON_SIZE = 12;
-    this.DEFAULT_MAX_SIZE = 200;
+    this.DOC_WIDTH = 1150;
     this._menuItems = [];
     this._idAttribName = '__record__id__';
     this._gridConfig = [];
     this._filteredColumns = new Map();
     this._filterColumnleftPosition = 0;
+    this._customFormatters = new Map();
     this._enterprise = enterprise;
   }
   getGridConfig() {
@@ -119775,6 +119959,8 @@ class AgGridController {
   }
   initDatagrid(container, options) {
     var _a;
+    this._options = options;
+    this._container = container;
     if (this._grid === undefined) {
       LicenseManager.setLicenseKey(ApplicationContext.getContextValue('__EZUI__GRID_LICENSE__'));
       this._columnStateChangeCallback = options.onColumnStateChange;
@@ -119782,7 +119968,7 @@ class AgGridController {
       this._doubleClickCallBack = options.onDoubleClick;
       this._multipleSelection = options.allowMultipleSelection;
       this._dataUnit = options.dataUnit;
-      this._editionManager = new GridEditionManager(this._dataUnit, options.useEnterLikeTab, options.recordsValidator, options.editionIsDisabled);
+      this._editionManager = new GridEditionManager(this._dataUnit, options.useEnterLikeTab, options.recordsValidator, options.editionIsDisabled, options.customEditors || this._customEditors, options.customRenders || this._customRenders);
       this._statusResolver = options.statusResolver;
       if (this._dataUnit) {
         this._dataUnit.sortingProvider = this;
@@ -119844,6 +120030,7 @@ class AgGridController {
         this.selectRows((selection === null || selection === void 0 ? void 0 : selection.recordIds) || [], true);
       }
       this._gridOptions.api.setHeaderHeight(this.getHeaderRowHeight());
+      this._customFormatters = options.customFormatters;
     }
   }
   processFormatterCellCallback(params) {
@@ -120127,12 +120314,33 @@ class AgGridController {
       throw new Error('Erro interno: Grid ainda não inicializado.');
     }
     this._gridOptions.api.refreshServerSide({ purge: true });
+    this._options.onRefresh();
+  }
+  focusOnGridContainer() {
+    this._container.setAttribute('tabindex', '-1');
+    this._container.focus();
+  }
+  setFocus() {
+    var _a, _b;
+    if ((_b = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.records) === null || _b === void 0 ? void 0 : _b.length) {
+      this.setFocusFirstRow();
+    }
+    else {
+      this.focusOnGridContainer();
+    }
+  }
+  setAutoFocus(autoFocus) {
+    var _a;
+    (_a = this._dataSource) === null || _a === void 0 ? void 0 : _a.setAutoFocus(autoFocus);
   }
   setFocusFirstRow() {
     const firstRow = this._gridOptions.api.getDisplayedRowAtIndex(0);
     if (firstRow) {
       this.setFocusOnRow(firstRow.rowIndex);
     }
+    else {
+      this.focusOnGridContainer();
+    }
   }
   setFocusLastRow() {
     const lastRow = this._gridOptions.api.getDisplayedRowAtIndex(this._gridOptions.api.getLastDisplayedRow());
@@ -120211,8 +120419,8 @@ class AgGridController {
     //Como vamos reordenar, precisamos considerar o deslocamento provocado por elas.
     const columnsOffset = colDef.length - columns.length;
     let sort = [];
-    state.forEach((cfgColumn, index) => {
-      const colWidth = this.getColumnWidth(cfgColumn);
+    state === null || state === void 0 ? void 0 : state.forEach((cfgColumn, index) => {
+      const colWidth = this._gridOptions.columnApi.getColumn(cfgColumn.name).getActualWidth();
       this._gridOptions.columnApi.moveColumn(cfgColumn.name, index + columnsOffset);
       this._gridOptions.columnApi.setColumnWidth(cfgColumn.name, colWidth);
       visibleColumns.push(cfgColumn.name);
@@ -120229,6 +120437,11 @@ class AgGridController {
     });
     this._gridConfig = state;
   }
+  getAdaptiveWidth(width) {
+    const widthGrid = this._container.clientWidth;
+    const adaptiveWidth = (this.DOC_WIDTH * width) / widthGrid;
+    return Math.round(adaptiveWidth);
+  }
   getColumnsState() {
     if (this._grid === undefined) {
       throw new Error('Erro interno: Grid ainda não inicializado.');
@@ -120236,13 +120449,15 @@ class AgGridController {
     const colState = this._gridOptions.columnApi.getColumnState();
     return colState
       .map(s => {
-      const def = this._gridOptions.columnApi.getColumn(s.colId).getColDef();
+      const column = this._gridOptions.columnApi.getColumn(s.colId);
+      const def = column.getColDef();
+      const width = this.getAdaptiveWidth(column.getActualWidth());
       const label = def.headerName;
       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, 'width', width);
       this.conditionalSet(colState, 'pinned', s.pinned !== null);
       this.conditionalSet(colState, 'hidden', s.hide);
       const props = new Map();
@@ -120308,12 +120523,19 @@ class AgGridController {
         showColumnFilter: (leftPosition) => this.showFilterColumn({ columnName: source.name, columnLabel: source.label, leftPosition, filteredOptions: this._filteredColumns.get(source.name), fromIcon: true }),
       },
       valueFormatter: params => {
-        if (params.value === undefined) {
+        if (params.value === undefined || params.value === null) {
           return "";
         }
         if (params.value instanceof Promise) {
           return "Carregando...";
         }
+        const customFormatter = this._customFormatters.get(source.name);
+        if (customFormatter) {
+          const formattedValue = customFormatter.format(params.value, source, params.data.__record__id__);
+          if (formattedValue) {
+            return formattedValue;
+          }
+        }
         if (this._dataUnit) {
           return this._dataUnit.getFormattedValue(source.name, params.value);
         }
@@ -120322,6 +120544,13 @@ class AgGridController {
       cellStyle: this.getStyleByColumn(source),
     });
   }
+  setCustomFormatters(customFormatters) {
+    this._customFormatters = customFormatters;
+  }
+  refreshSelectedRows() {
+    const selectedNodes = this._gridOptions.api.getSelectedNodes();
+    this._gridOptions.api.redrawRows({ rowNodes: selectedNodes });
+  }
   getInitCellStyle() {
     return {
       'line-height': this.getRowHeight() - 1 + 'px',
@@ -120482,26 +120711,52 @@ class AgGridController {
       host[attribute] = value;
     }
   }
-  getColumnWidth(cfgColumn) {
-    var _a, _b;
-    if (cfgColumn == undefined) {
+  setCellEditors(customEditors) {
+    var _a;
+    if (!this._editionManager) {
+      this._customEditors = customEditors;
       return;
     }
-    if (cfgColumn.customWidth != undefined) {
-      return cfgColumn.customWidth;
-    }
-    const field = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getField(cfgColumn.name);
-    if ((field === null || field === void 0 ? void 0 : field.userInterface) === UserInterface.SEARCH) {
-      return this.DEFAULT_MAX_SIZE;
+    this._editionManager.setCellEditors(customEditors);
+    (_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.api.redrawRows();
+  }
+  setCellRenders(customRenders) {
+    var _a;
+    if (!this._editionManager) {
+      this._customRenders = customRenders;
+      return;
     }
-    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;
+    this._editionManager.setCellRenders(customRenders);
+    (_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.api.redrawRows();
+  }
+}
+
+function enableSelectAll(total) {
+  return total !== undefined;
+}
+function buildSelectAllLabel(allRecordSelected, count, total) {
+  if (allRecordSelected)
+    return 'Selecionar apenas a página atual';
+  if (total === undefined)
+    return `Carregando todos os ${count} registros`;
+  return `Selecionar todos os ${total} registros`;
+}
+function buildSelectAllTitle(total) {
+  if (enableSelectAll(total))
+    return '';
+  return 'Aguarde o carregamento para selecionar o registro de todas as páginas';
+}
+function getText(selectionCount, allSelectedRecords) {
+  if (allSelectedRecords) {
+    return `Todos os <strong>${selectionCount} registros</strong> da grade estão selecionados.`;
   }
+  const pluralCharacter = selectionCount > 1 ? "s" : "";
+  return `Há <strong>${selectionCount} registro${pluralCharacter}</strong> selecionado${pluralCharacter} na grade.`;
 }
 
 const SelectionCounter = (props) => {
   const { selectionCount, currentPageSelected, allRecordSelected, paginationInfo, canSelectAll, onSelectAll, onSelectPage, onClearAll, onClose } = props;
-  const { total, hasMore } = paginationInfo || {};
+  const { total, hasMore, count } = paginationInfo || {};
   const shouldRenderSelectionButton = () => {
     if ((!allRecordSelected && selectionCount === total) || (allRecordSelected && !hasMore))
       return false;
@@ -120515,20 +120770,11 @@ const SelectionCounter = (props) => {
         h("label", Object.assign({ innerHTML: getText(selectionCount, allRecordSelected), class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium ez-margin-top--medium" }, getElementID("ezGridSelectionCounter_label"))),
         h("div", { class: "ez-flex ez-margin-right--medium" },
           shouldRenderSelectionButton() &&
-            h("ez-button", Object.assign({ class: "ez-margin-right--medium", label: `Selecionar ${allRecordSelected ? "apenas a página atual" : `todos os ${total} registros`}`, mode: "link", onClick: allRecordSelected ? onSelectPage : onSelectAll }, getElementID(`ezGridSelectionCounter_select${allRecordSelected ? "Page" : "All"}`))),
-          h("ez-button", Object.assign({ class: "grid__btn-clear", label: "Limpar", mode: "link", onClick: onClearAll }, getElementID("ezGridSelectionCounter_clearAll"))))),
+            h("ez-button", Object.assign({ key: "selectAllRecordsEzButton", title: buildSelectAllTitle(total), enabled: enableSelectAll(total), class: "ez-margin-right--medium", label: buildSelectAllLabel(allRecordSelected, count, total), mode: "link", onClick: allRecordSelected ? onSelectPage : onSelectAll }, getElementID(`ezGridSelectionCounter_select${allRecordSelected ? "Page" : "All"}`))),
+          h("ez-button", Object.assign({ key: "clearAllSelectionEzButton", class: "grid__btn-clear", label: "Limpar Sele\u00E7\u00E3o", mode: "link", onClick: onClearAll }, getElementID("ezGridSelectionCounter_clearAll"))))),
       h("button", Object.assign({ class: "grid__btn-close", title: "Fechar", onClick: onClose }, getElementID("ezGridSelectionCounter_close")),
         h("ez-icon", { iconName: "close" })))));
 };
-function getText(selectionCount, allSelectedRecords) {
-  if (allSelectedRecords) {
-    return `Todos os <strong>${selectionCount} registros</strong> da grade estão selecionados.`;
-  }
-  else {
-    const pluralChar = selectionCount > 1 ? "s" : "";
-    return `Há <strong>${selectionCount} registro${pluralChar}</strong> selecionado${pluralChar}.`;
-  }
-}
 function getElementID(sufix) {
   return {
     [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(sufix)
@@ -120690,7 +120936,7 @@ class InMemoryFilterColumnDataSource {
   }
 }
 
-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(--visible, 1);--ez-grid__container--shadow:0 0 16px 0 rgb(0 38 111 / 12%);--ez-grid--min-height:300px;min-height:var(--ez-grid--min-height)}.grid-header.sc-ez-grid{display:grid;justify-content:space-between;align-items:center;grid-row-start:1;grid-template-columns:1fr;background-color:var(--ez-grid__header--background-color, #FFF)}.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}.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{height:0;padding:0}.grid-header__pagination.sc-ez-grid{width:30%;min-width:100px;justify-content:flex-end;flex-wrap:wrap}.grid-header__left-container.sc-ez-grid{width:70%}.grid-header__pagination-label.sc-ez-grid{width:100%;white-space:nowrap}.overflowed.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(--visible, 1);--ez-grid__container--shadow:0 0 16px 0 rgb(0 38 111 / 12%);--ez-grid--min-height:300px;min-height:var(--ez-grid--min-height)}.grid-header.sc-ez-grid{display:grid;justify-content:space-between;align-items:center;grid-row-start:1;grid-template-columns:1fr;background-color:var(--ez-grid__header--background-color, #FFF)}.grid__container.sc-ez-grid{padding-top:15px;margin-top:-12px;outline:none;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}.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{height:0;padding:0}.grid-header__pagination.sc-ez-grid{width:30%;min-width:100px;justify-content:flex-end;flex-wrap:wrap}.grid-header__left-container.sc-ez-grid{width:70%}.grid-header__pagination-label.sc-ez-grid{width:100%;white-space:nowrap}.overflowed.sc-ez-grid{display:none}";
 
 const windowInstace = window;
 const matches = (text, filter) => {
@@ -120708,6 +120954,8 @@ const EzGrid = class {
     this.componentReady = createEvent(this, "componentReady", 7);
     this._gridController = new AgGridController(false);
     this._messageFilterAppliedSuccess = 'Filtro de coluna aplicado com sucesso!';
+    this._customEditor = new Map();
+    this._customRenders = new Map();
     this._paginationInfo = undefined;
     this._paginationChangedByKeyboard = true;
     this._showSelectionCounter = false;
@@ -120715,6 +120963,7 @@ const EzGrid = class {
     this._currentPageSelected = undefined;
     this._selectionCount = undefined;
     this._hasLeftButtons = false;
+    this._customFormatters = new Map();
     this.multipleSelection = undefined;
     this.config = undefined;
     this.selectionToastConfig = undefined;
@@ -120725,6 +120974,7 @@ const EzGrid = class {
     this.useEnterLikeTab = false;
     this.recordsValidator = undefined;
     this.canEdit = true;
+    this.autoFocus = true;
   }
   /**
    * Aplica a definição de colunas.
@@ -120786,6 +121036,69 @@ const EzGrid = class {
   async filterColumns(search) {
     return Promise.resolve(this._gridController.getColumnsState().filter(col => matches(col.label, search)));
   }
+  /**
+   * Registra um editor customizado para campos da grade e formulário.
+   */
+  async addCustomEditor(fieldName, customEditor, detailContext) {
+    const newCustomEditor = new Map(this._customEditor);
+    newCustomEditor.set(fieldName, {
+      customEditor,
+      detailContext,
+    });
+    this._customEditor = newCustomEditor;
+    this._gridController.setCellEditors(newCustomEditor);
+  }
+  /**
+   * Registra um render customizado para colunas da grid.
+   */
+  async addGridCustomRender(fieldName, customRender, detailContext) {
+    const newCustomRenders = new Map(this._customRenders);
+    newCustomRenders.set(fieldName, { customRender, detailContext });
+    this._customRenders = newCustomRenders;
+    this._gridController.setCellRenders(newCustomRenders);
+  }
+  /**
+   * Registra um formatador de valores para uma coluna da grid.
+   */
+  async addCustomValueFormatter(columnName, customFormatter) {
+    if (!columnName || !customFormatter) {
+      return;
+    }
+    const newCustomFormatters = new Map(this._customFormatters);
+    newCustomFormatters.set(columnName, customFormatter);
+    this._customFormatters = newCustomFormatters;
+    this._gridController.setCustomFormatters(newCustomFormatters);
+  }
+  /**
+   * Remove o formatador de valores de uma coluna da grid.
+   */
+  async removeCustomValueFormatter(columnName) {
+    if (!columnName) {
+      return;
+    }
+    const newCustomFormatters = new Map(this._customFormatters);
+    newCustomFormatters.delete(columnName);
+    this._customFormatters = newCustomFormatters;
+    this._gridController.setCustomFormatters(newCustomFormatters);
+  }
+  /**
+   * Atualiza linhas da grade.
+   */
+  async refreshSelectedRows() {
+    this._gridController.refreshSelectedRows();
+  }
+  /**
+   * Retorna o formatador customizado da coluna caso exista.
+   */
+  async getCustomValueFormatter(columnName) {
+    return this._customFormatters.get(columnName);
+  }
+  /**
+   * Atribui o foco para a grade.
+   */
+  async setFocus() {
+    this._gridController.setFocus();
+  }
   observeConfig(config) {
     this._gridController.setColumnsState(config === null || config === void 0 ? void 0 : config.columns);
   }
@@ -120939,7 +121252,9 @@ const EzGrid = class {
     const dataInfo = { dataUnit: this.dataUnit };
     ElementIDUtils.addIDInfo(this._element, null, dataInfo);
     const dtInfo = { id: 'ezGrid' };
-    ElementIDUtils.addIDInfo(this._refPaginationControl, 'pagination', dtInfo);
+    if (this._refPaginationControl) {
+      ElementIDUtils.addIDInfo(this._refPaginationControl, 'pagination', dtInfo);
+    }
   }
   previousPage() {
     if (this.dataUnit) {
@@ -120959,14 +121274,10 @@ const EzGrid = class {
     (_a = this._gridApi) === null || _a === void 0 ? void 0 : _a.clearRangeSelection();
   }
   getPaginationControl() {
-    if (this._paginationInfo) {
-      const { currentPage, hasMore } = this._paginationInfo;
-      return [
-        h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium", ref: (element) => (this._refPaginationLabel = element) }, h("span", { class: "grid-header__pagination-label" }, h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, this._getActualPageLabel()), this._getRemainingPageLabel())),
-        h("div", { id: "grid-pagination-tooltip", ref: (element) => (this._refPaginationLabelTooltip = element), class: "ez-flex ez-margin-right--medium" }, h("ez-button", { size: "small", class: "ez-margin-right--medium", iconName: "chevron-left", mode: "icon", enabled: currentPage > 0, onClick: () => this.previousPage(), label: "P\u00E1gina anterior" }), h("ez-button", { size: "small", iconName: "chevron-right", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })),
-      ];
-    }
-    return null;
+    if (!this._paginationInfo)
+      return null;
+    const { currentPage, hasMore } = this._paginationInfo;
+    return (h("div", { class: "grid-header__container grid-header__pagination", ref: ref => (this._refPaginationControl = ref) }, h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium", ref: (element) => (this._refPaginationLabel = element) }, h("span", { class: "grid-header__pagination-label" }, h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, this._getActualPageLabel()), this._getRemainingPageLabel())), h("div", { id: "grid-pagination-tooltip", ref: (element) => (this._refPaginationLabelTooltip = element), class: "ez-flex ez-margin-right--medium" }, h("ez-button", { size: "small", class: "ez-margin-right--medium", iconName: "chevron-left", mode: "icon", enabled: currentPage > 0, onClick: () => this.previousPage(), label: "P\u00E1gina anterior" }), h("ez-button", { size: "small", iconName: "chevron-right", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" }))));
   }
   componentDidLoad() {
     this._gridController.initDatagrid(this._container, {
@@ -120987,7 +121298,14 @@ const EzGrid = class {
       statusResolver: this.statusResolver,
       useEnterLikeTab: this.useEnterLikeTab,
       recordsValidator: this.recordsValidator,
-      editionIsDisabled: () => !this.canEdit
+      editionIsDisabled: () => !this.canEdit,
+      customFormatters: this._customFormatters,
+      autoFocus: this.autoFocus,
+      onRefresh: () => {
+        if (this.dataUnit) {
+          this.setSelection(this.dataUnit.getSelectionInfo());
+        }
+      }
     });
     if (this.config) {
       this.observeConfig(this.config);
@@ -121003,7 +121321,7 @@ const EzGrid = class {
   }
   handlePaginationChange(selectFirstRecord, paginationInfo) {
     var _a;
-    if (selectFirstRecord !== false) {
+    if (selectFirstRecord !== false && this.autoFocus) {
       if (((_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.currentPage) > (paginationInfo === null || paginationInfo === void 0 ? void 0 : paginationInfo.currentPage) && this._paginationChangedByKeyboard) {
         this._gridController.setFocusLastRow();
       }
@@ -121073,6 +121391,9 @@ const EzGrid = class {
     if (!this.dataUnit.name.includes("InMemoryDataUnit"))
       return;
   }
+  componentDidUpdate() {
+    this._gridController.setAutoFocus(this.autoFocus);
+  }
   getDataSource() {
     var _a;
     return (_a = this.columnfilterDataSource) !== null && _a !== void 0 ? _a : new InMemoryFilterColumnDataSource(this.dataUnit);
@@ -121082,7 +121403,7 @@ const EzGrid = class {
   }
   render() {
     var _a;
-    return (h(Host, { "no-header": this.hideHeader() }, h("div", { class: "grid__container ez-grid", ref: elem => (this._container = elem) }), h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, h("filter-column", { class: "grid-header__popover", noHeaderTaskBar: !this._hasLeftButtons, dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: this.hideHeader(), ref: (element) => (this._filterColumn = element) }), h("div", { class: "grid-header__position" }, h("div", { class: "grid-header__container grid-header__left-container" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container grid-header__pagination", ref: ref => (this._refPaginationControl = ref) }, this.getPaginationControl()))), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter  ez-elevation--4
+    return (h(Host, { "no-header": this.hideHeader() }, h("div", { class: "grid__container ez-grid", ref: elem => (this._container = elem) }), h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, h("filter-column", { class: "grid-header__popover", noHeaderTaskBar: !this._hasLeftButtons, dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: this.hideHeader(), ref: (element) => (this._filterColumn = element) }), h("div", { class: "grid-header__position" }, h("div", { class: "grid-header__container grid-header__left-container" }, h("slot", { name: "leftButtons" })), this.getPaginationControl())), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter  ez-elevation--4
           ${this._showSelectionCounter ? 'grid__selection-counter--opened' : ''}
         ` }, h(SelectionCounter, { selectionCount: this._selectionCount, currentPageSelected: this._currentPageSelected, paginationInfo: this._paginationInfo, canSelectAll: (_a = this.selectionToastConfig) === null || _a === void 0 ? void 0 : _a.canSelectAll, allRecordSelected: this._isAllSelection, onSelectAll: () => this.onSelectAllRecords(), onSelectPage: () => this.onSelectPageRecords(), onClearAll: () => this.onClearSelectedRecords(), onClose: () => (this._showSelectionCounter = false) })), h("div", { class: "grid__footer" }, h("slot", { name: "footer" }))));
   }