@sankhyalabs/ezui 5.10.8 → 5.11.0-dev.10

package/dist/collection/components/ez-date-time-input/ez-date-time-input.js

@@ -3,7 +3,9 @@ import { DateUtils, ElementIDUtils, TimeFormatter } from '@sankhyalabs/core';
 import CSSVarsUtils from '../../utils/CSSVarsUtils';
 export class EzDateTimeInput {
   constructor() {
+    this._changePending = false;
     this._focused = false;
+    this._valuePromiseCallbacks = [];
     this.label = undefined;
     this.value = undefined;
     this.enabled = true;
@@ -42,6 +44,7 @@ export class EzDateTimeInput {
         this.ezChange.emit(valueEmitted);
       }
     }
+    this._changePending = false;
   }
   /**
    * Aplica o foco no campo.
@@ -61,6 +64,18 @@ export class EzDateTimeInput {
   async isInvalid() {
     return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
   }
+  /*
+   * Retorna uma promise com o valor da opção selecionada,
+   * que será resolvida quando o backend devolver este dado.
+   */
+  async getValueAsync() {
+    if (this._changePending) {
+      return new Promise(accept => {
+        this._valuePromiseCallbacks.push(accept);
+      });
+    }
+    return Promise.resolve(this.value);
+  }
   handleKeyDown(event) {
     const input = this._textInput.shadowRoot.querySelector('input');
     if (event.shiftKey && event.key === "Tab") {
@@ -105,7 +120,14 @@ export class EzDateTimeInput {
     }
   }
   showCalendar() {
-    const top = this.errorMessage || this.mode === "slim" ? 6 : -13;
+    let top;
+    if (this.isFixed()) {
+      top = 29;
+      this._calendar.fitHorizontal(0);
+    }
+    else {
+      top = this.errorMessage || this.mode === "slim" ? 6 : -13;
+    }
     this._calendar.fitVertical(top, this._elem.clientHeight);
     this._calendar.style.visibility = 'inherit';
   }
@@ -130,27 +152,35 @@ export class EzDateTimeInput {
   }
   handleBlur() {
     var _a, _b;
-    const strValue = ((_b = (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim()) || "";
-    const newValue = this.getParsedDateTime();
-    if (newValue || !strValue) {
-      this.errorMessage = "";
-      const currentValue = DateUtils.validateDate(this.value, true);
-      const newValueValidated = DateUtils.validateDate(newValue, true);
-      if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) === (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
-        if (newValueValidated) {
-          this._textInput.value = this.getTextValue(newValueValidated) || '';
-          this._focused = false;
+    try {
+      const strValue = ((_b = (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim()) || "";
+      const newValue = this.getParsedDateTime();
+      if (newValue || !strValue) {
+        this.errorMessage = "";
+        const currentValue = DateUtils.validateDate(this.value, true);
+        const newValueValidated = DateUtils.validateDate(newValue, true);
+        if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) === (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
+          if (newValueValidated) {
+            this._textInput.value = this.getTextValue(newValueValidated) || '';
+            this._focused = false;
+          }
+          this.ezCancelWaitingChange.emit();
+        }
+        else {
+          this.changeValue(newValueValidated);
         }
-        this.ezCancelWaitingChange.emit();
       }
       else {
-        this.changeValue(newValueValidated);
+        this.changeValue(undefined);
+        this.ezCancelWaitingChange.emit();
+        this.errorMessage = "O valor digitado não é uma data válida";
       }
     }
-    else {
-      this.changeValue(undefined);
-      this.ezCancelWaitingChange.emit();
-      this.errorMessage = "O valor digitado não é uma data válida";
+    finally {
+      for (const callback of this._valuePromiseCallbacks) {
+        callback(this.value);
+      }
+      this._valuePromiseCallbacks = [];
     }
   }
   getTextValue(date) {
@@ -164,6 +194,7 @@ export class EzDateTimeInput {
     const currentValue = DateUtils.validateDate(this.value, true);
     const newValueValidated = DateUtils.validateDate(newValue, true);
     if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) !== (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
+      this._changePending = true;
       this._focused = true;
       this.ezStartChange.emit({ waitmessage: "", blocking: false });
     }
@@ -177,13 +208,16 @@ export class EzDateTimeInput {
       this._textInput.value = textValue;
     }
   }
+  isFixed() {
+    return this._elem.dataset.isFixed === "true";
+  }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, onKeyDown: event => { this.handleKeyDown(event); }, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), onFocus: () => this.handleFocus(), onClick: () => this.handleClick(), canShowError: this.canShowError }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem, time: true, showSeconds: this.showSeconds })));
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, onKeyDown: event => { this.handleKeyDown(event); }, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), onFocus: () => this.handleFocus(), onClick: () => this.handleClick(), canShowError: this.canShowError }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { ref: elem => this._calendar = elem, "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, time: true, showSeconds: this.showSeconds, "data-is-fixed": this._elem.dataset.isFixed })));
   }
   static get is() { return "ez-date-time-input"; }
   static get encapsulation() { return "shadow"; }
@@ -432,6 +466,25 @@ export class EzDateTimeInput {
           "text": "Retorna se o conte\u00FAdo \u00E9 inv\u00E1lido.",
           "tags": []
         }
+      },
+      "getValueAsync": {
+        "complexType": {
+          "signature": "() => Promise<Date>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "Date": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<Date>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }

package/dist/collection/components/ez-form/ez-form.js

@@ -185,6 +185,26 @@ export class EzForm {
           "resolved": "void",
           "references": {}
         }
+      }, {
+        "method": "formItemsReady",
+        "name": "formItemsReady",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Respons\u00E1vel por notificar quando ocorrer a renderiza\u00E7\u00E3o de itens do formul\u00E1rio."
+        },
+        "complexType": {
+          "original": "FormItems",
+          "resolved": "FormItems",
+          "references": {
+            "FormItems": {
+              "location": "import",
+              "path": "../ez-form-view/structure"
+            }
+          }
+        }
       }];
   }
   static get methods() {

package/dist/collection/components/ez-form-view/ez-form-view.js

@@ -1,6 +1,7 @@
 import { Host, h } from '@stencil/core';
 import { fieldBuilder } from './fieldbuilder/FieldBuilder';
 import { ElementIDUtils } from '@sankhyalabs/core';
+import { FormItems } from './structure';
 export class EzFormView {
   constructor() {
     this.fields = undefined;
@@ -28,6 +29,8 @@ export class EzFormView {
   }
   componentDidRender() {
     this.ezContentReady.emit(Array.from(this._element.querySelectorAll("[data-field-name]")));
+    const formItems = new FormItems(Array.from(this._element.querySelectorAll("[data-form-item]")));
+    this.formItemsReady.emit(formItems);
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezFormView');
@@ -105,6 +108,26 @@ export class EzFormView {
             }
           }
         }
+      }, {
+        "method": "formItemsReady",
+        "name": "formItemsReady",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Respons\u00E1vel por notificar quando ocorrer a renderiza\u00E7\u00E3o de itens do formul\u00E1rio."
+        },
+        "complexType": {
+          "original": "FormItems",
+          "resolved": "FormItems",
+          "references": {
+            "FormItems": {
+              "location": "import",
+              "path": "./structure"
+            }
+          }
+        }
       }];
   }
   static get methods() {

package/dist/collection/components/ez-form-view/fieldbuilder/FieldBuilder.js

@@ -23,5 +23,8 @@ uiBuilders.set(UserInterface.LONGTEXT, buildTextArea);
 export const fieldBuilder = (field) => {
   const builder = uiBuilders.get(field.userInterface) || buildTextInput;
   const label = field.required ? `${field.label}${REQUIRED_INFO}` : field.label;
-  return builder(Object.assign(Object.assign({}, field), { label }));
+  const builtElement = builder(Object.assign(Object.assign({}, field), { label }));
+  //@ts-ignore
+  builtElement.$attrs$['data-form-item'] = field.name;
+  return builtElement;
 };

package/dist/collection/components/ez-form-view/structure/index.js

@@ -0,0 +1,34 @@
+class FormItem {
+  constructor(elem) {
+    this.elem = elem;
+  }
+  addRightElement(el) {
+    this.removeRightElement();
+    el.classList.add('ez-padding-left--small');
+    el.setAttribute('data-custom-item', 'true');
+    this.elem.classList.add('ez-col--nowrap');
+    this.elem.appendChild(el);
+  }
+  removeRightElement() {
+    Array.from(this.elem.querySelectorAll('[data-custom-item="true"]')).forEach(item => item.remove());
+  }
+  get fieldName() {
+    return this.elem.getAttribute('data-form-item');
+  }
+}
+export class FormItems {
+  constructor(items, formId) {
+    this.items = new Map();
+    this.formId = formId;
+    items.forEach(item => {
+      const formItem = new FormItem(item);
+      this.items.set(formItem.fieldName, formItem);
+    });
+  }
+  getItem(name) {
+    return this.items.get(name);
+  }
+  get formName() {
+    return this.formId;
+  }
+}

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

@@ -1,4 +1,4 @@
-import { ApplicationContext, DataType, NumberUtils, SortMode, StringUtils, UserInterface } from '@sankhyalabs/core';
+import { ApplicationContext, DataType, MaskFormatter, NumberUtils, SortMode, StringUtils, UserInterface } from '@sankhyalabs/core';
 import { Grid, } from 'ag-grid-community';
 import { Grid as EnterpriseGrid, LicenseManager } from 'ag-grid-enterprise';
 import DataSource from './DataSource';
@@ -8,6 +8,7 @@ import SelectionHeader from './components/selectionHeader';
 import gridTerms from './i18n/pt-BR.js';
 import { DISTINCT_FILTER_NAME_PREFIX } from '../../../../utils/constants';
 import { calcFilterColumnLeftPosition } from './AgGridUtils';
+import GridEditionManager from './GridEditionManager';
 export default class AgGridController {
   configFilterColumn(filterColumn) {
     this._filterColumn = filterColumn;
@@ -43,6 +44,9 @@ export default class AgGridController {
   getGridConfig() {
     return this._gridConfig;
   }
+  getGridApi() {
+    return this._gridOptions.api;
+  }
   getSort() {
     const sortedColumns = [];
     this._gridOptions.columnApi
@@ -103,6 +107,7 @@ export default 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;
@@ -122,12 +127,14 @@ export default 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),
         },
@@ -135,6 +142,7 @@ export default 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 EnterpriseGrid(container, this._gridOptions);
       }
@@ -281,6 +289,7 @@ export default 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;
@@ -584,7 +593,7 @@ export default 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,
@@ -594,13 +603,22 @@ export default 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 {
@@ -673,6 +691,13 @@ export default 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'];
@@ -687,6 +712,13 @@ export default 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';
   }
@@ -704,6 +736,7 @@ export default 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;

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

@@ -23,6 +23,7 @@ export default 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:

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

@@ -0,0 +1,230 @@
+import { UserInterface } from "@sankhyalabs/core";
+import { KeyCode } from "ag-grid-community";
+import { RecordValidationProcessor } from "../../../../utils/validators/recordvalidator/RecordValidationProcessor";
+import EzCellEditor from "./editor/EzCellEditor";
+export default 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;
+  }
+}

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

@@ -36,7 +36,7 @@ export 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';