@sankhyalabs/ezui 5.10.8 → 5.11.0-dev.10

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

@@ -1,7 +1,8 @@
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-296b8458.js';
-import { Action, ObjectUtils as ObjectUtils$1, ApplicationContext, StringUtils as StringUtils$1, UserInterface, NumberUtils as NumberUtils$1, DataType, SortMode, ElementIDUtils, JSUtils, DateUtils as DateUtils$1 } from '@sankhyalabs/core';
+import { Action, ObjectUtils as ObjectUtils$1, HTMLBuilder, ApplicationContext, UserInterface, StringUtils as StringUtils$1, NumberUtils as NumberUtils$1, MaskFormatter, DataType, SortMode, ElementIDUtils, DateUtils as DateUtils$1, JSUtils } from '@sankhyalabs/core';
 import { SelectionMode } from '@sankhyalabs/core/dist/dataunit/DataUnit';
 import { D as DISTINCT_FILTER_NAME_PREFIX } from './constants-6dab64f7.js';
+import { b as buildFieldMetadata, R as RecordValidationProcessor } from './RecordValidationProcessor-abc814af.js';
 import { A as ApplicationUtils } from './ApplicationUtils-d9a34a16.js';
 import './DialogType-54a62731.js';
 import './CheckMode-bdb2ec19.js';
@@ -118850,6 +118851,7 @@ class DataSource {
         case Action.DATA_SAVED:
         case Action.EDITION_CANCELED:
         case Action.DATA_CHANGED:
+        case Action.DATA_RESOLVED:
           this._controller.refresh();
           break;
         case Action.SELECTION_CHANGED:
@@ -118972,7 +118974,7 @@ class EzGridCustomHeader {
   onClickFilter() {
     var _a;
     const iconLeft = (_a = this.filterButton) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left;
-    this.params.showColumnFilter(`${calcFilterColumnLeftPosition(iconLeft)}px`);
+    this.params.showColumnFilter(`${calcFilterColumnLeftPosition(iconLeft)}px`, true);
   }
   configSortIcon() {
     this.sortDownIcon.style.display = this.params.column.isSortDescending() ? 'flex' : 'none';
@@ -119183,6 +119185,443 @@ const gridTerms = {
   ctrlV: "Ctrl+V"
 };
 
+const buildEditorMetadata = (descriptor, eGridCell, dataUnit, editionManager) => {
+  return Object.assign(Object.assign({}, buildFieldMetadata(descriptor)), { eGridCell, dataUnit, editionManager });
+};
+
+const MINIMIUM_WIDTH_TEXTAREA = 210;
+const PADDING_VALUE_TEXTAREA = 12;
+const buildTextInput = ({ name, contextName }) => {
+  return HTMLBuilder.parseElement(`<ez-text-input
+        class="ez-grid grid_editor"
+        data-field-name=${name}
+        data-context-name=${contextName}
+        mode="slim"
+    />`);
+};
+const buildTextAreaInput = ({ eGridCell, editionManager }) => {
+  const element = HTMLBuilder.parseElement(`<ez-text-area
+            can-show-error="false"
+            enable-resize="true"
+        />`);
+  element.addEventListener('keydown', event => handlePressEnterEvent(event, element, editionManager));
+  setElementInitialWidth(eGridCell, element);
+  element.isPopUp = true;
+  return element;
+};
+function setElementInitialWidth(eGridCell, element) {
+  const { width } = eGridCell.getBoundingClientRect();
+  const newValue = width > MINIMIUM_WIDTH_TEXTAREA ? width : MINIMIUM_WIDTH_TEXTAREA;
+  element.style.minWidth = `${newValue - PADDING_VALUE_TEXTAREA}px`;
+  element.style.resize = "both";
+}
+function handlePressEnterEvent(event, element, editionManager) {
+  if (isEnter(event)) {
+    const shouldBreakLine = event.ctrlKey;
+    if (shouldBreakLine) {
+      element.appendTextToSelection('\n');
+      event.preventDefault();
+      return;
+    }
+    editionManager.navigateByEnterKey(event);
+  }
+}
+function isEnter(event) {
+  return [event.key, event.code].includes('Enter');
+}
+
+const LIMIT_TIME_VALUE = 2359;
+const buildDate = () => {
+  const dateInput = HTMLBuilder.parseElement(`<ez-date-input
+            class="ez-grid grid_editor"
+            mode="slim"
+            data-is-fixed="true"
+        />`);
+  dateInput.valueGetter = () => dateInput.getValueAsync();
+  return dateInput;
+};
+const buildTime = ({ readOnly }) => {
+  const timeInputElement = HTMLBuilder.parseElement(`<ez-time-input
+        class="ez-grid grid_editor"
+        enabled=${!readOnly}
+        mode="slim"
+    />`);
+  timeInputElement.valueGetter = () => {
+    const value = timeInputElement.value;
+    const isAllowedTime = parseInt(value) <= LIMIT_TIME_VALUE;
+    return isAllowedTime ? value : null;
+  };
+  timeInputElement.valueSetter = (value) => {
+    const isAllowedTime = parseInt(value) <= LIMIT_TIME_VALUE;
+    if (!isAllowedTime)
+      return timeInputElement.value = null;
+    return timeInputElement.value = value;
+  };
+  return timeInputElement;
+};
+const buildDateTime = ({ readOnly }) => {
+  const dateTimeInput = HTMLBuilder.parseElement(`<ez-date-time-input
+        class="ez-grid grid_editor"
+        mode="slim"
+        enabled=${!readOnly}
+        data-is-fixed="true"
+    />`);
+  dateTimeInput.valueGetter = () => dateTimeInput.getValueAsync();
+  return dateTimeInput;
+};
+
+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);
+  return buildNumeric(readOnly, precision, prettyPrecision);
+};
+const buildInteger = ({ readOnly }) => {
+  return buildNumeric(readOnly, 0, 0);
+};
+function buildNumeric(readOnly, precision, prettyPrecision) {
+  const input = HTMLBuilder.parseElement(`<ez-number-input
+        class="ez-grid grid_editor"
+        enabled=${!readOnly}
+        precision=${precision}
+        pretty-precision=${prettyPrecision}
+        mode="slim"
+    />`);
+  input.valueGetter = () => input.getValueAsync();
+  return input;
+}
+
+function getViewPortHeight(cell) {
+  let currentElem = cell;
+  while (currentElem) {
+    const viewPort = currentElem.querySelector("[ref=eBodyViewport]");
+    if (viewPort) {
+      return viewPort.getBoundingClientRect().bottom;
+    }
+    currentElem = currentElem.parentElement;
+  }
+}
+
+const BOOLEAN_OPTIONS = new Map([[true, { value: "S", label: "Sim" }], [false, { value: "N", label: "Não" }]]);
+const buildComboBox = ({ required, props, eGridCell }) => {
+  const prop = props === null || props === void 0 ? void 0 : props.options;
+  let options;
+  if (typeof prop === "string") {
+    const parsed = JSON.parse(prop);
+    options = Object.keys(parsed).map(key => { return { value: key, label: parsed[key] }; });
+  }
+  else {
+    options = prop;
+  }
+  const combo = HTMLBuilder.parseElement(`<ez-combo-box
+        class="grid_editor"
+        suppress-empty-option=${required}
+        mode="slim"
+    />`);
+  combo.options = options;
+  combo.listOptionsPosition = { verticalPosition: 29, bottomLimit: getViewPortHeight(eGridCell), hardPosition: true };
+  return combo;
+};
+const buildSwitch = (fieldMetadata) => {
+  const combo = buildComboBox(Object.assign(Object.assign({}, fieldMetadata), { props: Object.assign(Object.assign({}, fieldMetadata.props), { options: Array.from(BOOLEAN_OPTIONS.values()) }) }));
+  combo.valueGetter = () => {
+    const value = combo.value;
+    if (value == undefined) {
+      return;
+    }
+    return value.value == "S";
+  };
+  combo.valueSetter = (value) => {
+    if (value != undefined) {
+      combo.value = BOOLEAN_OPTIONS.get(value);
+    }
+  };
+  return combo;
+};
+
+const buildSearch = ({ name, required, readOnly, eGridCell, dataUnit }) => {
+  const ezSearch = HTMLBuilder.parseElement(`<ez-search
+          class="ez-grid grid_editor"
+          mode="slim"
+          suppress-empty-option=${required}
+          enabled=${!readOnly}
+    />`);
+  const loader = ApplicationContext.getContextValue("__EZUI__SEARCH__OPTION__LOADER__");
+  ezSearch.optionLoader = (argument) => loader(argument, name, dataUnit);
+  ezSearch.listOptionsPosition = { verticalPosition: 29, bottomLimit: getViewPortHeight(eGridCell), hardPosition: true };
+  ezSearch.valueGetter = () => ezSearch.getValueAsync();
+  return ezSearch;
+};
+
+const uiBuilders = new Map();
+uiBuilders.set(UserInterface.DATE, buildDate);
+uiBuilders.set(UserInterface.TIME, buildTime);
+uiBuilders.set(UserInterface.DATETIME, buildDateTime);
+uiBuilders.set(UserInterface.DECIMALNUMBER, buildDecimal);
+uiBuilders.set(UserInterface.INTEGERNUMBER, buildInteger);
+uiBuilders.set(UserInterface.SWITCH, buildSwitch);
+uiBuilders.set(UserInterface.CHECKBOX, buildSwitch);
+uiBuilders.set(UserInterface.OPTIONSELECTOR, buildComboBox);
+uiBuilders.set(UserInterface.LONGTEXT, buildTextAreaInput);
+uiBuilders.set(UserInterface.SEARCH, buildSearch);
+class EzCellEditor {
+  init(params) {
+    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);
+    if (this._gui.valueSetter != undefined) {
+      this._gui.valueSetter(params.value);
+    }
+    else {
+      this._gui.value = params.value;
+    }
+  }
+  getGui() {
+    return this._gui;
+  }
+  afterGuiAttached() {
+    this.focusIn();
+  }
+  focusIn() {
+    this._gui.focus();
+    this._gui.setFocus({ selectText: true });
+  }
+  getValue() {
+    return this._gui.valueGetter != undefined ? this._gui.valueGetter() : this._gui.value;
+  }
+  isPopup() {
+    return this._gui.isPopUp;
+  }
+}
+
+class GridEditionManager {
+  constructor(dataUnit, useEnterLikeTab, recordsValidator, editionIsDisabled) {
+    this._dataUnit = dataUnit;
+    this._recordValidationProcessor = new RecordValidationProcessor(this._dataUnit, {
+      getRequiredFields: () => this.getRequiredFields(),
+      markAsInvalid: () => { },
+      getMessageForField: () => null
+    }, recordsValidator);
+    this._useEnterLikeTab = useEnterLikeTab;
+    this._editionIsDisabled = editionIsDisabled;
+  }
+  configureGrid(options) {
+    this._gridOptions = options;
+    options.readOnlyEdit = true;
+    options.onCellEditRequest = evt => this.onCellEditRequest(evt);
+    options.onCellKeyDown = evt => {
+      if (evt.event && evt["column"]) {
+        this.onCellKeyDown(evt);
+      }
+    };
+    return options;
+  }
+  proceedAutoSave() {
+    if (!this._dataUnit.isDirty()) {
+      this.saveSuccess();
+      return;
+    }
+    if (!this._isGridEdition) {
+      return;
+    }
+    const currentRercord = this._dataUnit.getSelectedRecord();
+    if (currentRercord == undefined) {
+      return;
+    }
+    this._recordValidationProcessor
+      .validate()
+      .then(() => {
+      this._dataUnit.saveData()
+        .then(() => this.saveSuccess())
+        .catch(reason => this.saveFail(reason));
+    })
+      .catch(reason => this.saveFail(reason));
+  }
+  navigateByEnterKey(keyboardEvent) {
+    const backwards = keyboardEvent.shiftKey;
+    if (this._useEnterLikeTab) {
+      if (backwards) {
+        this._gridOptions.api.tabToPreviousCell(keyboardEvent);
+      }
+      else {
+        this._gridOptions.api.tabToNextCell(keyboardEvent);
+      }
+    }
+    else {
+      const editionCell = this._gridOptions.api.getEditingCells()[0];
+      if (editionCell) {
+        let { rowIndex } = editionCell;
+        this.nextEditionRow(rowIndex, editionCell.column, backwards);
+      }
+    }
+  }
+  getComponents() {
+    return { ezCellEditor: EzCellEditor };
+  }
+  verifyClickToEdition(api, cellClicked) {
+    if (this.isSecondClick(cellClicked)) {
+      api.startEditingCell({ rowIndex: cellClicked.rowIndex, colKey: cellClicked.column.getColId() });
+    }
+    this._lastCellClicked = cellClicked;
+  }
+  configureColumn(col) {
+    col.cellEditor = 'ezCellEditor';
+    col.editable = params => this.canEdit(params);
+    col.suppressKeyboardEvent = (params) => {
+      return params.event.key === KeyCode.ENTER;
+    };
+    return col;
+  }
+  getRequiredFields() {
+    return this._gridOptions.columnApi.getAllDisplayedColumns().filter(c => {
+      const fieldDefinition = this._dataUnit.getField(c.getColId());
+      return fieldDefinition && fieldDefinition.required;
+    }).map(c => c.getColId());
+  }
+  saveSuccess() {
+    this.focusOnCell(this._targetEditionCell);
+    this._lastCellEdited = undefined;
+    this._targetEditionCell = undefined;
+    this._isGridEdition = false;
+  }
+  saveFail(reason) {
+    this.focusOnCell(this._lastCellEdited);
+    this._isGridEdition = false;
+    if (reason) {
+      Promise.reject(reason);
+    }
+  }
+  focusOnCell(cell) {
+    if (cell == undefined) {
+      return;
+    }
+    const { rowIndex, column } = cell;
+    this._gridOptions.api.getDisplayedRowAtIndex(rowIndex).setSelected(true, true);
+    this._gridOptions.api.clearRangeSelection();
+    this._gridOptions.api.addCellRange({ rowStartIndex: rowIndex, rowEndIndex: rowIndex, columns: [column] });
+    this._gridOptions.api.startEditingCell({ colKey: column.getColId(), rowIndex });
+    this._gridOptions.api.setFocusedCell(rowIndex, column.getColId());
+    const cellEditor = this._gridOptions.api.getCellEditorInstances()[0];
+    if (cellEditor) {
+      cellEditor.focusIn();
+    }
+  }
+  onCellKeyDown(event) {
+    const keyboardEvent = event.event;
+    switch (keyboardEvent.key) {
+      case KeyCode.ENTER:
+        this.processEnterKey(keyboardEvent, event);
+        break;
+      case KeyCode.UP:
+        this.editPreviousRow(event.api);
+        break;
+      case KeyCode.DOWN:
+        this.editNextRow(event.api);
+        break;
+    }
+  }
+  processEnterKey(keyboardEvent, event) {
+    const editionCell = event.api.getEditingCells()[0];
+    if (!editionCell) {
+      event.api.startEditingCell({ colKey: event.column.getColId(), rowIndex: event.rowIndex });
+      return;
+    }
+    this.navigateByEnterKey(keyboardEvent);
+  }
+  nextEditionRow(rowIndex, column, backwards) {
+    if (backwards) {
+      rowIndex = rowIndex - 1;
+      if (rowIndex < 0) {
+        rowIndex = this._dataUnit.records.length - 1;
+      }
+    }
+    else {
+      rowIndex = rowIndex + 1;
+      if (rowIndex >= this._dataUnit.records.length) {
+        rowIndex = 0;
+      }
+    }
+    this._targetEditionCell = new TargetEdition(rowIndex, column, true);
+    this.finishEdition();
+  }
+  editPreviousRow(api) {
+    this.moveEditionVertically(api, -1);
+  }
+  editNextRow(api) {
+    this.moveEditionVertically(api, 1);
+  }
+  moveEditionVertically(api, offset) {
+    const editionCell = api.getEditingCells()[0];
+    if (!editionCell) {
+      return;
+    }
+    const rowIndex = editionCell.rowIndex + offset;
+    if (api.getDisplayedRowAtIndex(rowIndex)) {
+      this._targetEditionCell = new TargetEdition(rowIndex, editionCell.column, offset < 0);
+      this.finishEdition();
+    }
+  }
+  finishEdition() {
+    this._gridOptions.api.stopEditing();
+    setTimeout(() => {
+      //O Timeout foi inserido para permitir que o ciclo de finalização prossiga
+      //pois precisamos aguardar o fim da edição para executar o autosave.
+      this.proceedAutoSave();
+    }, 0);
+  }
+  canEdit(params) {
+    if (this._editionIsDisabled()) {
+      return false;
+    }
+    return this.isColEditable(params.colDef.field);
+  }
+  isColEditable(fieldName) {
+    const fieldDefinition = this._dataUnit.getField(fieldName);
+    if (fieldDefinition) {
+      return !fieldDefinition.readOnly;
+    }
+    return false;
+  }
+  isSecondClick(cellClicked) {
+    if (!this._lastCellClicked) {
+      return false;
+    }
+    if (this._lastCellClicked.column != cellClicked.column) {
+      return false;
+    }
+    if (this._lastCellClicked.rowIndex != cellClicked.rowIndex) {
+      return false;
+    }
+    return true;
+  }
+  onCellEditRequest(event) {
+    const fieldName = event.colDef.field;
+    const value = event.newValue;
+    if (event.oldValue != value) {
+      if (value instanceof Promise) {
+        const fieldDescriptor = this._dataUnit.getField(event.colDef.colId);
+        event.node.setData(Object.assign(Object.assign({}, event.data), { [fieldName]: (fieldDescriptor === null || fieldDescriptor === void 0 ? void 0 : fieldDescriptor.userInterface) === UserInterface.SEARCH ? value : event.oldValue }));
+        value.then(resolved => event.node.setData(Object.assign(Object.assign({}, event.data), { [fieldName]: resolved })));
+      }
+      else {
+        event.node.setData(Object.assign(Object.assign({}, event.data), { [fieldName]: value }));
+      }
+      this._isGridEdition = true;
+      this._dataUnit.setFieldValue(fieldName, value, [event.data.__record__id__]);
+      this._lastCellEdited = { rowIndex: event.rowIndex, column: event.column, rowPinned: undefined };
+    }
+  }
+}
+class TargetEdition {
+  constructor(rowIndex, column, backwards) {
+    this.rowPinned = null;
+    this.rowIndex = rowIndex;
+    this.column = column;
+    this.backwards = backwards;
+  }
+}
+
 class AgGridController {
   configFilterColumn(filterColumn) {
     this._filterColumn = filterColumn;
@@ -119218,6 +119657,9 @@ class AgGridController {
   getGridConfig() {
     return this._gridConfig;
   }
+  getGridApi() {
+    return this._gridOptions.api;
+  }
   getSort() {
     const sortedColumns = [];
     this._gridOptions.columnApi
@@ -119278,6 +119720,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._statusResolver = options.statusResolver;
       if (this._dataUnit) {
         this._dataUnit.sortingProvider = this;
@@ -119297,12 +119740,14 @@ class AgGridController {
         defaultColDef: {
           headerClass: 'ez-grid__cell-header',
           cellClass: 'ez-grid__cell-body',
+          cellStyle: {
+            height: '100%'
+          }
         },
-        components: {
-          ezGridHeaderComponent: SelectionHeader,
-          ezGridCustomHeader: EzGridCustomHeader,
-        },
+        components: Object.assign({ ezGridHeaderComponent: SelectionHeader, ezGridCustomHeader: EzGridCustomHeader }, this._editionManager.getComponents()),
         context: {
+          editionManager: this._editionManager,
+          dataUnit: this._dataUnit,
           headerCheckStatusGetter: () => this.getSelectionHeaderStatus(),
           headerCheckStatusSetter: (selectAll) => this.updateSelectionForAll(selectAll),
         },
@@ -119310,6 +119755,7 @@ class AgGridController {
       this.defineRowModelType(this._gridOptions, options);
       this.setOptionsEvents(this._gridOptions);
       this.setOptionsSupress(this._gridOptions);
+      this._gridOptions = this._editionManager.configureGrid(this._gridOptions);
       if (this._enterprise) {
         this._grid = new Grid(container, this._gridOptions);
       }
@@ -119456,6 +119902,7 @@ class AgGridController {
     opt.onSelectionChanged = e => this.onSelectionChange(e);
     opt.onRowDoubleClicked = evt => this.onRowDoubleClick(evt);
     opt.onDragStopped = evt => this.onCallStateChange('columnMovedEnd', evt);
+    opt.onCellClicked = evt => this.onCellClicked(evt);
   }
   setOptionsSupress(opt) {
     opt.suppressDragLeaveHidesColumns = true;
@@ -119759,7 +120206,7 @@ class AgGridController {
     else if (propSortable === false) {
       tooltip = 'Coluna não pode ser ordenada';
     }
-    return {
+    return this._editionManager.configureColumn({
       headerName: source.label,
       field: source.name,
       sortable: propSortable,
@@ -119769,13 +120216,22 @@ class AgGridController {
         tooltip: tooltip,
         isSortable: propSortable,
         hasFilter: () => this.hasFilterColumn(source.name),
-        showColumnFilter: (leftPosition) => this.showFilterColumn({ columnName: source.name, columnLabel: source.label, leftPosition, filteredOptions: this._filteredColumns.get(source.name) }),
+        showColumnFilter: (leftPosition, fromIcon) => this.showFilterColumn({ columnName: source.name, columnLabel: source.label, leftPosition, filteredOptions: this._filteredColumns.get(source.name), fromIcon }),
       },
       valueFormatter: params => {
+        if (params.value == undefined) {
+          return "";
+        }
+        if (params.value instanceof Promise) {
+          return "Carregando...";
+        }
+        if (this._dataUnit) {
+          return this._dataUnit.getFormattedValue(source.name, params.value);
+        }
         return this.getFormatterByColumn(params, source);
       },
       cellStyle: this.getStyleByColumn(source),
-    };
+    });
   }
   getInitCellStyle() {
     return {
@@ -119848,6 +120304,13 @@ class AgGridController {
         return params.value.toLocaleDateString();
       }
     }
+    if ((source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface.ELAPSEDTIME || (source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface.TIME) {
+      if (!!params.value) {
+        const maskFormatter = new MaskFormatter("##:##");
+        const formattedValue = String(params.value).padStart(4, '0');
+        return maskFormatter.format(formattedValue);
+      }
+    }
   }
   onCallStateChange(type, e) {
     const finished = !('finished' in e) || e['finished'];
@@ -119862,6 +120325,13 @@ class AgGridController {
       this._columnStateChangeCallback(type, this.getColumnsState(), info);
     }
   }
+  onCellClicked(event) {
+    this._editionManager.verifyClickToEdition(event.api, {
+      rowIndex: event.rowIndex,
+      column: event.column,
+      rowPinned: undefined
+    });
+  }
   isElementResize(e) {
     return e['target'] && e['target'].getAttribute('ref') === 'eResize';
   }
@@ -119879,6 +120349,7 @@ class AgGridController {
     if (this._selectionChangeCallback) {
       clearTimeout(this._selectionChangeDeboucing);
       this._selectionChangeDeboucing = window.setTimeout(() => {
+        this._editionManager.proceedAutoSave();
         if (this._dataUnit) {
           if (event.context.selectionChangeQuietly) {
             const selectionInfo = this._dataUnit;
@@ -119968,6 +120439,84 @@ function getElementID(sufix) {
   };
 }
 
+class InMemoryFilterColumnDataSource {
+  constructor(dataUnit) {
+    var _a;
+    this.onDataUnitAction = (action) => {
+      if (action.type === Action.DATA_SAVED || action.type === Action.RECORDS_REMOVED) {
+        this.originalRecords = this.dataUnit.records;
+      }
+    };
+    this.dataUnit = dataUnit;
+    this.originalRecords = (_a = this.dataUnit.records) !== null && _a !== void 0 ? _a : [];
+    this.dataUnit.subscribe(this.onDataUnitAction);
+  }
+  fetchData(filterTerm, fieldName) {
+    return new Promise(resolve => {
+      const filteredRecords = this.originalRecords.filter(record => this.includesSearchTerm(record, fieldName, filterTerm));
+      const options = filteredRecords.map(item => this.buildFieldOption(item, fieldName));
+      resolve(this.removeDuplicatedOptions(options));
+    });
+  }
+  buildFieldOption(item, fieldName) {
+    return {
+      value: this.buildValue(item, fieldName),
+      label: this.formatLabel(fieldName, item[fieldName]),
+      check: true,
+    };
+  }
+  buildValue(item, fieldName) {
+    var _a;
+    let value = item[fieldName];
+    if (((_a = this.dataUnit.getField(fieldName)) === null || _a === void 0 ? void 0 : _a.dataType) === DataType.OBJECT) {
+      value = value.value;
+    }
+    return value === null || value === void 0 ? void 0 : value.toString();
+  }
+  removeDuplicatedOptions(options) {
+    const noDuplicatedOptions = [];
+    options.forEach(option => {
+      if (!noDuplicatedOptions.find(({ label }) => label === option.label)) {
+        noDuplicatedOptions.push(option);
+      }
+    });
+    return noDuplicatedOptions;
+  }
+  includesSearchTerm(record, fieldName, filterTerm) {
+    let label = this.buildLabel(fieldName, record[fieldName]);
+    return label.toLowerCase().includes(filterTerm.toLowerCase());
+  }
+  buildLabel(fieldName, value) {
+    var _a;
+    const { dataType } = this.dataUnit.getField(fieldName);
+    if (dataType === DataType.NUMBER) {
+      return value === null || value === void 0 ? void 0 : value.toString().replace('.', ',');
+    }
+    if (dataType === DataType.DATE) {
+      return (typeof value === 'object')
+        ? (_a = DateUtils$1.formatDate(this.dataUnit.valueFromString(fieldName, value))) === null || _a === void 0 ? void 0 : _a.toString()
+        : value === null || value === void 0 ? void 0 : value.toString();
+    }
+    if (dataType === DataType.OBJECT) {
+      return `${value === null || value === void 0 ? void 0 : value.value} - ${value === null || value === void 0 ? void 0 : value.label}`;
+    }
+    return value === null || value === void 0 ? void 0 : value.toString();
+  }
+  formatLabel(fieldName, value) {
+    var _a, _b;
+    const { userInterface, dataType } = this.dataUnit.getField(fieldName);
+    if (dataType === DataType.DATE) {
+      return (typeof value === 'object')
+        ? DateUtils$1.formatDate(this.dataUnit.valueFromString(fieldName, value))
+        : value === null || value === void 0 ? void 0 : value.toString();
+    }
+    if (dataType === DataType.NUMBER && userInterface !== UserInterface.DECIMALNUMBER) {
+      return (_a = parseInt(this.dataUnit.getFormattedValue(fieldName, value))) === null || _a === void 0 ? void 0 : _a.toString();
+    }
+    return (_b = this.dataUnit.getFormattedValue(fieldName, value)) === null || _b === void 0 ? void 0 : _b.toString();
+  }
+}
+
 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%)}.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(--more-visible, 2)}.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{height:0;padding:0}";
 
 const windowInstace = window;
@@ -119981,18 +120530,13 @@ const EzGrid = class {
     this.componentReady = createEvent(this, "componentReady", 7);
     this._gridController = new AgGridController(false);
     this._messageFilterAppliedSuccess = 'Filtro de coluna aplicado com sucesso!';
-    this.onDataUnitAction = (action) => {
-      if (action.type === Action.DATA_SAVED || action.type === Action.RECORDS_REMOVED) {
-        this._originalRecords = this.dataUnit.records;
-      }
-    };
     this._paginationInfo = undefined;
     this._paginationChangedByKeyboard = true;
     this._showSelectionCounter = false;
     this._isAllSelection = false;
     this._currentPageSelected = undefined;
     this._selectionCount = undefined;
-    this._originalRecords = [];
+    this._hasLeftButtons = false;
     this.multipleSelection = undefined;
     this.config = undefined;
     this.selectionToastConfig = undefined;
@@ -120000,6 +120544,9 @@ const EzGrid = class {
     this.dataUnit = undefined;
     this.statusResolver = undefined;
     this.columnfilterDataSource = undefined;
+    this.useEnterLikeTab = false;
+    this.recordsValidator = undefined;
+    this.canEdit = true;
   }
   /**
    * Aplica a definição de colunas.
@@ -120233,6 +120780,9 @@ const EzGrid = class {
       serverURL: this.serverUrl,
       dataUnit: this.dataUnit,
       statusResolver: this.statusResolver,
+      useEnterLikeTab: this.useEnterLikeTab,
+      recordsValidator: this.recordsValidator,
+      editionIsDisabled: () => !this.canEdit
     });
     if (this.config) {
       this.observeConfig(this.config);
@@ -120241,6 +120791,11 @@ const EzGrid = class {
     this.setEvents();
     this.componentReady.emit();
     this._gridController.configFilterColumn(this._filterColumn);
+    this._container.addEventListener('focusout', (event) => {
+      const api = this._gridController.getGridApi();
+      if (api && !this._container.contains(event.relatedTarget))
+        api.clearFocusedCell();
+    });
   }
   componentWillRender() {
     this.configSelectionCounter();
@@ -120251,44 +120806,20 @@ const EzGrid = class {
     });
   }
   componentWillLoad() {
+    this._hasLeftButtons = !!this._element.querySelector('[slot="leftButtons"]');
     if (!this.dataUnit.name.includes("InMemoryDataUnit"))
       return;
-    this.dataUnit.subscribe(this.onDataUnitAction);
   }
   getDataSource() {
-    return this.columnfilterDataSource ? this.columnfilterDataSource : this.buildDefaultDataSource();
-  }
-  buildDefaultDataSource() {
-    var _a, _b;
-    if (this._originalRecords.length === 0) {
-      this._originalRecords = (_b = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.records) !== null && _b !== void 0 ? _b : [];
-    }
-    return {
-      fetchData: (filterTerm, fieldName) => {
-        return new Promise(resolve => {
-          const filteredRecords = this._originalRecords.filter(record => {
-            var _a, _b;
-            const label = typeof record[fieldName] === "object" ? `${(_a = record[fieldName]) === null || _a === void 0 ? void 0 : _a.value} - ${(_b = record[fieldName]) === null || _b === void 0 ? void 0 : _b.label}` : record[fieldName];
-            return label === null || label === void 0 ? void 0 : label.toString().toLowerCase().includes(filterTerm.toLowerCase());
-          });
-          const options = filteredRecords.map(item => {
-            return { value: item[fieldName].toString(), label: this.formatLabel(fieldName, item[fieldName]), check: true };
-          });
-          resolve(options);
-        });
-      }
-    };
+    var _a;
+    return (_a = this.columnfilterDataSource) !== null && _a !== void 0 ? _a : new InMemoryFilterColumnDataSource(this.dataUnit);
   }
-  formatLabel(fieldName, value) {
-    const { userInterface } = this.dataUnit.getField(fieldName);
-    if (userInterface === UserInterface.DATETIME) {
-      return DateUtils$1.formatDate(this.dataUnit.valueFromString(fieldName, value));
-    }
-    return String(this.dataUnit.getFormattedValue(fieldName, value));
+  hideHeader() {
+    return (!!this._element.getAttribute("no-header") && !this._paginationInfo);
   }
   render() {
     var _a;
-    return (h(Host, null, h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, h("filter-column", { class: "grid-header__popover", dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: !!this._element.getAttribute("no-header"), ref: (element) => (this._filterColumn = element) }), h("div", { class: "grid-header__position" }, h("div", { class: "grid-header__container" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container", ref: ref => (this._refPaginationControl = ref) }, this.getPaginationControl()))), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter
+    return (h(Host, { "no-header": this.hideHeader() }, 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" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container", ref: ref => (this._refPaginationControl = ref) }, this.getPaginationControl()))), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter
           ${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__container ez-grid", ref: elem => (this._container = elem) }), h("div", { class: "grid__footer" }, h("slot", { name: "footer" }))));
   }