@sankhyalabs/ezui 6.0.2 → 6.1.0-dev.10

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

@@ -1,12 +1,12 @@
 import { ApplicationContext, DataType, LockManager, LockManagerOperation, MaskFormatter, NumberUtils, SortMode, StringUtils, UserInterface, } from '@sankhyalabs/core';
-import { Grid } from "@ag-grid-community/core";
+import { Grid, } from "@ag-grid-community/core";
 import { LicenseManager } from '@ag-grid-enterprise/core';
 import DataSource from './DataSource';
 import { EzGridCustomHeader } from './components/EzGridCustomHeader';
 import { CellRendererStatus } from './components/cellRendererStatus';
 import SelectionHeader from './components/selectionHeader';
 import gridTerms from './i18n/pt-BR';
-import { DISTINCT_FILTER_NAME_PREFIX, EZ_GRID_LOADING_SOURCE } from '../../../../utils/constants';
+import { DISTINCT_FILTER_NAME_PREFIX, EZ_GRID_LOADING_SOURCE, PRESENTATION_COL_ID_PROP_NAME, PRESENTATION_FROM_COL_PROP_NAME } from '../../../../utils/constants';
 import GridEditionManager from './GridEditionManager';
 import { ModuleRegistry } from '@ag-grid-community/core';
 import { EnterpriseCoreModule } from '@ag-grid-enterprise/core';
@@ -14,6 +14,7 @@ import { RangeSelectionModule } from '@ag-grid-enterprise/range-selection';
 import { ServerSideRowModelModule } from '@ag-grid-enterprise/server-side-row-model';
 import { ClipboardModule } from '@ag-grid-enterprise/clipboard';
 import { MenuModule } from '@ag-grid-enterprise/menu';
+import DOMPurify from 'dompurify';
 export default class AgGridController {
   configFilterColumn(filterColumn) {
     this._filterColumn = filterColumn;
@@ -31,7 +32,8 @@ export default class AgGridController {
   }
   showFilterColumn(configs) {
     var _a;
-    (_a = this._filterColumn) === null || _a === void 0 ? void 0 : _a.show(configs);
+    const presentationMetadata = this.resolveDescriptionColMetadata(configs.columnName);
+    (_a = this._filterColumn) === null || _a === void 0 ? void 0 : _a.show(Object.assign(Object.assign({}, configs), { fieldDescriptor: presentationMetadata }));
   }
   constructor(_enterprise) {
     this.DEFAULT_ROW_HEIGHT = 30;
@@ -52,6 +54,7 @@ export default class AgGridController {
     this._customFormatters = new Map();
     this._gridShowDom = false;
     this.peddingExecutionsOnGridShow = [];
+    this._lastColsConfig = undefined;
     ModuleRegistry.registerModules([
       EnterpriseCoreModule,
       RangeSelectionModule,
@@ -63,8 +66,25 @@ export default class AgGridController {
   getGridConfig() {
     return this._gridConfig;
   }
-  locateColumn(columnName) {
+  locateColumn(columnName, gridElement) {
     this._gridOptions.api.ensureColumnVisible(columnName);
+    requestAnimationFrame(() => {
+      this.highlightColumnHeader(columnName, gridElement);
+    });
+  }
+  highlightColumnHeader(columnName, gridElement) {
+    const headerElement = gridElement.querySelector(`.ag-header-cell[col-id="${columnName}"]`);
+    if (!headerElement)
+      return;
+    headerElement.classList.add("ez-grid__column-highlight-header");
+    headerElement.setAttribute("tabindex", "0");
+    const removeHighlight = (event) => {
+      if (!headerElement.contains(event.target)) {
+        headerElement.classList.remove("ez-grid__column-highlight-header");
+        document.removeEventListener("click", removeHighlight);
+      }
+    };
+    document.addEventListener("click", removeHighlight);
   }
   getSort(_dataUnitName, defaultSorting) {
     const sortedColumns = [];
@@ -86,10 +106,15 @@ export default class AgGridController {
       return;
     }
     return Array.from(this._filteredColumns.entries())
-      .map(([column, items]) => {
+      .map(([col, items]) => {
       var _a;
       const checkedOptions = items.filter(option => option.check);
       if (checkedOptions.length > 0) {
+        let column = col;
+        const presentationFrom = this.getCodeColFromDescriptionCol(col);
+        if (!StringUtils.isEmpty(presentationFrom)) {
+          column = presentationFrom;
+        }
         const fieldDescriptor = this._dataUnit.getField(column);
         const dataType = (_a = fieldDescriptor === null || fieldDescriptor === void 0 ? void 0 : fieldDescriptor.dataType) !== null && _a !== void 0 ? _a : DataType.TEXT;
         let placeholders = '';
@@ -156,6 +181,7 @@ export default class AgGridController {
         this._dataUnit.addFilterProvider(this);
       }
       this._gridOptions = {
+        suppressHorizontalScroll: options.suppressHorizontalScroll,
         localeText: gridTerms,
         enableRangeSelection: this._multipleSelection,
         rowSelection: this._multipleSelection ? 'multiple' : 'single',
@@ -283,6 +309,23 @@ export default class AgGridController {
       action: () => this.showFilterColumn({ columnName, columnLabel, leftPosition: this._filterColumnleftPosition, filteredOptions: this._filteredColumns.get(columnName) }),
     };
   }
+  resolveDescriptionColMetadata(columnName) {
+    var _a;
+    const colDef = (_a = this._gridOptions.columnApi.getColumn(columnName)) === null || _a === void 0 ? void 0 : _a.getColDef();
+    const presentationFrom = this.getCodeColFromDescriptionCol(columnName);
+    if (!StringUtils.isEmpty(presentationFrom)) {
+      return {
+        label: colDef.headerName,
+        name: columnName,
+        userInterface: UserInterface.SHORTTEXT,
+        dataType: DataType.TEXT,
+        properties: {
+          [PRESENTATION_FROM_COL_PROP_NAME]: presentationFrom
+        }
+      };
+    }
+    return undefined;
+  }
   buildMenuItemOptionPin(params) {
     const { column, columnApi } = params;
     const isPinned = params.column.isPinned();
@@ -609,7 +652,7 @@ export default class AgGridController {
   }
   syncSelectWithDataUnit() {
     const rowNode = this._gridOptions.api.getRowNode(this._dataUnit.getSelectedRecord().__record__id__);
-    if ((rowNode === null || rowNode === void 0 ? void 0 : rowNode.rowIndex) < 0)
+    if (!rowNode || (rowNode === null || rowNode === void 0 ? void 0 : rowNode.rowIndex) < 0)
       return;
     const rowRange = this._gridOptions.api.getCellRanges().find(row => row.startRow.rowIndex === rowNode.rowIndex);
     if ((rowRange === null || rowRange === void 0 ? void 0 : rowRange.columns.length) > 0) {
@@ -646,7 +689,9 @@ export default class AgGridController {
     }
   }
   isColumnEditable(rowIndex, column) {
-    if (column.getColDef().headerName === '' || rowIndex === -1)
+    if (column.getColDef().headerName === ''
+      || column.getColDef().headerName === this.CHECK_BOX_COL_ID
+      || rowIndex === -1)
       return false;
     const rowId = this._dataUnit.records[rowIndex][this._idAttribName];
     const rowNode = this._gridOptions.api.getRowNode(rowId);
@@ -664,7 +709,7 @@ export default class AgGridController {
     this._gridOptions.api.setFocusedCell(rowIndex, firstCell);
   }
   setColumnsDef(cols) {
-    const checkBoxColumn = Object.assign({ colId: this.CHECK_BOX_COL_ID, headerName: '', checkboxSelection: true, width: 29, suppressMovable: true, suppressAutoSize: true, suppressMenu: true, lockPosition: true, pinned: true }, (this._multipleSelection && { headerComponent: 'ezGridHeaderComponent', headerClass: 'ag-column-select-header' }));
+    const checkBoxColumn = Object.assign({ colId: this.CHECK_BOX_COL_ID, headerName: this.CHECK_BOX_COL_ID, checkboxSelection: true, width: 29, suppressMovable: true, suppressAutoSize: true, suppressMenu: true, lockPosition: true, pinned: true }, (this._multipleSelection && { headerComponent: 'ezGridHeaderComponent', headerClass: 'ag-column-select-header' }));
     const newColDefs = this._options.suppressCheckBoxCol ? [] : [checkBoxColumn];
     if (this._statusResolver != undefined) {
       newColDefs.push({
@@ -685,6 +730,7 @@ export default class AgGridController {
         cellStyle: {
           'text-align': 'center',
         },
+        suppressNavigable: true,
       });
     }
     cols.forEach(c => {
@@ -692,8 +738,39 @@ export default class AgGridController {
     });
     this._colDefs = newColDefs;
     if (this._gridOptions && this._gridOptions.api) {
+      this.setColsDefsWithStateIfNeeded(this._colDefs);
+    }
+  }
+  setColsDefsWithStateIfNeeded(colDefs) {
+    if (!this._lastColsConfig) {
       this._gridOptions.api.setColumnDefs(this._colDefs);
     }
+    /*
+      Caso a definição de colunas esteja sendo atualizada,
+      e existe uma config aplicada, temos que considerar essa
+      config ao adicionar nova definição de colunas.
+      PS: Poderia apenas chamar o setColumnsState, porém,
+      isso impactaria em performance, e o usuário ia perceber
+      a mudança das colunas visualmente na grade, o que traria
+      uma experiencia ruim.
+    */
+    const colDefsWithConfigs = this.getColsDefWithConfigApplied(colDefs, this._lastColsConfig);
+    this._gridOptions.api.setColumnDefs(colDefsWithConfigs);
+  }
+  getColsDefWithConfigApplied(colDefs, colsConfig) {
+    //Cria map de colunas existentes na config e seu índice
+    const orderMap = colsConfig.reduce((map, col, index) => {
+      map[col.name] = index;
+      return map;
+    }, {});
+    //Remove colunas que não existem na config
+    const filteredColsDefs = colDefs.filter((col) => !orderMap.hasOwnProperty(col.colId));
+    //Ordena colunas baseada na config aplicada
+    const sortedColumnDefs = filteredColsDefs.sort((a, b) => {
+      var _a, _b;
+      return ((_a = orderMap[a.field]) !== null && _a !== void 0 ? _a : Number.MAX_VALUE) - ((_b = orderMap[b.field]) !== null && _b !== void 0 ? _b : Number.MAX_VALUE);
+    });
+    return sortedColumnDefs;
   }
   clearRangeSelection() {
     this._gridOptions.api.clearRangeSelection();
@@ -730,6 +807,7 @@ export default class AgGridController {
     if (this._grid === undefined) {
       throw new Error('Erro interno: Grid ainda não inicializado.');
     }
+    this._lastColsConfig = state;
     const colDef = this._gridOptions.columnApi.getColumns();
     let columns = this.getColumnsDef();
     let visibleColumns = [];
@@ -738,14 +816,39 @@ export default class AgGridController {
     const columnsOffset = colDef.length - columns.length;
     this._gridConfig = state;
     let sort = [];
-    state.forEach((cfgColumn, index) => {
+    let currentIndex = 0;
+    state.forEach((cfgColumn) => {
+      var _a, _b;
       const colWidth = this.getColumnWidth(cfgColumn);
-      this._gridOptions.columnApi.moveColumn(cfgColumn.name, index + columnsOffset);
+      this._gridOptions.columnApi.moveColumn(cfgColumn.name, currentIndex + columnsOffset);
       this._gridOptions.columnApi.setColumnWidth(cfgColumn.name, colWidth);
       visibleColumns.push(cfgColumn.name);
       if (cfgColumn.ascending !== undefined) {
         sort.push({ colId: cfgColumn.name, sort: cfgColumn.ascending !== true ? 'desc' : 'asc', sortIndex: cfgColumn.orderIndex });
       }
+      currentIndex++;
+      const fieldMD = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getField(cfgColumn.name);
+      /*
+        Migração para o SEARCHPLUS, caso de uso:
+          - Agora existe uma coluna para o campo de descrição do relaciona
+          - Essa col, não existe na config da grade que já foi salva pelo DS
+          - Nesse caso, precisamos inserir a coluna de descrição automaticamente para que
+            os usuários não percam a apresentação do campo de descrição.
+          PS: Caso esteja herdando do HTML5, devemos manter a config como está la
+      */
+      if (this.needToAddDescriptionColumn(cfgColumn, fieldMD, state)) {
+        const descriptionColID = (_b = fieldMD === null || fieldMD === void 0 ? void 0 : fieldMD.properties) === null || _b === void 0 ? void 0 : _b[PRESENTATION_COL_ID_PROP_NAME];
+        if (!descriptionColID)
+          return;
+        const descriptionCol = this._gridOptions.columnApi.getColumn(descriptionColID);
+        const descriptionColDef = descriptionCol === null || descriptionCol === void 0 ? void 0 : descriptionCol.getColDef();
+        const descriptionHeaderName = descriptionColDef === null || descriptionColDef === void 0 ? void 0 : descriptionColDef.headerName;
+        const descriptionColSize = this.getColumnWidthByLabel(descriptionHeaderName);
+        this._gridOptions.columnApi.moveColumn(descriptionColID, currentIndex + columnsOffset);
+        this._gridOptions.columnApi.setColumnWidth(descriptionColID, descriptionColSize);
+        visibleColumns.push(descriptionColID);
+        currentIndex++;
+      }
     });
     let invisibleColumns = columns.filter(column => !visibleColumns.includes(column.name)).map(column => column.name);
     this._gridOptions.columnApi.setColumnsVisible(visibleColumns, true);
@@ -755,6 +858,16 @@ export default class AgGridController {
       defaultState: { sort: null },
     });
   }
+  needToAddDescriptionColumn(cfgColumn, fieldMD, stateConfig) {
+    var _a, _b;
+    if (!fieldMD) {
+      return false;
+    }
+    const configVersion = ((_a = cfgColumn.configVersion) !== null && _a !== void 0 ? _a : 0);
+    const isSearchPlus = (fieldMD === null || fieldMD === void 0 ? void 0 : fieldMD.userInterface) == UserInterface.SEARCHPLUS;
+    const descriptionColID = (_b = fieldMD === null || fieldMD === void 0 ? void 0 : fieldMD.properties) === null || _b === void 0 ? void 0 : _b[PRESENTATION_COL_ID_PROP_NAME];
+    return isSearchPlus && configVersion < 1 && stateConfig.find(col => col.name === descriptionColID) != undefined;
+  }
   getColumnsState() {
     if (this._grid === undefined) {
       throw new Error('Erro interno: Grid ainda não inicializado.');
@@ -814,7 +927,7 @@ export default class AgGridController {
     return filterOptions.map(item => item.check).includes(true);
   }
   buildColDef(source) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     let tooltip = undefined;
     const propSortable = StringUtils.getBooleanValue((_a = source.props) === null || _a === void 0 ? void 0 : _a.get('gridSortable'), true);
     if ((_b = source.props) === null || _b === void 0 ? void 0 : _b.get('gridHeaderTooltip')) {
@@ -823,6 +936,7 @@ export default class AgGridController {
     else if (propSortable === false) {
       tooltip = 'Coluna não pode ser ordenada';
     }
+    const presentationFrom = (_d = source === null || source === void 0 ? void 0 : source.props) === null || _d === void 0 ? void 0 : _d.get(PRESENTATION_FROM_COL_PROP_NAME);
     return this._editionManager.configureColumn({
       headerName: source.label,
       field: source.name,
@@ -830,18 +944,27 @@ export default class AgGridController {
       resizable: true,
       headerComponent: 'ezGridCustomHeader',
       headerComponentParams: {
+        presentationFrom,
         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), fromIcon: true }),
       },
       valueFormatter: params => {
+        var _a, _b, _c;
+        if (presentationFrom) {
+          return (_c = (_b = (_a = params === null || params === void 0 ? void 0 : params.data) === null || _a === void 0 ? void 0 : _a[presentationFrom]) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : "";
+        }
         if (params.value === undefined || params.value === null) {
           return "";
         }
         if (params.value instanceof Promise) {
           return "Carregando...";
         }
+        if (source.userInterface === UserInterface.HTML) {
+          this.setHTMLRender(params, source);
+          return "";
+        }
         const customFormatter = this._customFormatters.get(source.name);
         if (customFormatter) {
           const formattedValue = customFormatter.format(params.value, source, params.data.__record__id__);
@@ -855,8 +978,27 @@ export default class AgGridController {
         return this.getFormatterByColumn(params, source);
       },
       cellStyle: this.getStyleByColumn(source),
+      editable: !((_e = source.props) === null || _e === void 0 ? void 0 : _e.has(PRESENTATION_FROM_COL_PROP_NAME))
     });
   }
+  setHTMLRender(params, source) {
+    const htmlSanitized = DOMPurify.sanitize(params.value);
+    params.colDef.cellRenderer = (cellParams) => {
+      if (cellParams.node.rowIndex === params.node.rowIndex) {
+        const element = document.createElement('span');
+        element.innerHTML = htmlSanitized;
+        return element;
+      }
+      return cellParams.value;
+    };
+    params.colDef.cellStyle = (cellParams) => {
+      const defaultStyle = this.getStyleByColumn(source);
+      if (cellParams.node.rowIndex === params.node.rowIndex) {
+        return Object.assign(defaultStyle, { padding: 0 });
+      }
+      return defaultStyle;
+    };
+  }
   setCustomFormatters(customFormatters) {
     this._customFormatters = customFormatters;
   }
@@ -870,8 +1012,11 @@ export default class AgGridController {
     };
   }
   getStyleByColumn(source) {
+    var _a;
     let cellStyle = this.getInitCellStyle();
-    switch (source === null || source === void 0 ? void 0 : source.userInterface) {
+    const primitiveUIType = (_a = source === null || source === void 0 ? void 0 : source.props) === null || _a === void 0 ? void 0 : _a.get("PRIMITIVETUIYPE");
+    const uitype = source === null || source === void 0 ? void 0 : source.userInterface;
+    switch (primitiveUIType !== null && primitiveUIType !== void 0 ? primitiveUIType : uitype) {
       case UserInterface.DECIMALNUMBER:
       case UserInterface.INTEGERNUMBER:
         cellStyle['text-align'] = 'right';
@@ -887,7 +1032,7 @@ export default class AgGridController {
     return cellStyle;
   }
   getFormatterByColumn(params, source) {
-    var _a;
+    var _a, _b, _c, _d;
     if ((source === null || source === void 0 ? void 0 : source.userInterface) === 'OPTIONSELECTOR' && source.options) {
       const prop = source === null || source === void 0 ? void 0 : source.options;
       let options;
@@ -924,6 +1069,9 @@ export default class AgGridController {
         return params === null || params === void 0 ? void 0 : params.value;
       }
     }
+    if ((source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface.SEARCHPLUS) {
+      return (_d = (_c = (_b = params === null || params === void 0 ? void 0 : params.value) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : params === null || params === void 0 ? void 0 : params.value) !== null && _d !== void 0 ? _d : "";
+    }
     if ((source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface.DECIMALNUMBER) {
       if (params.value != undefined) {
         const precision = Number(source.props.get('precision')) || 2;
@@ -1097,7 +1245,7 @@ export default class AgGridController {
     this._gridOptions.api.stopEditing();
   }
   getColumnWidth(cfgColumn) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     if (cfgColumn == undefined) {
       return;
     }
@@ -1111,10 +1259,20 @@ export default class AgGridController {
         return parseWidth + this.DEFAULT_FONT_SIZE_HTML5;
     }
     const field = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getField(cfgColumn.name);
+    const label = (_b = field === null || field === void 0 ? void 0 : field.label) !== null && _b !== void 0 ? _b : (_f = (_e = (_d = (_c = this._gridOptions) === null || _c === void 0 ? void 0 : _c.columnApi) === null || _d === void 0 ? void 0 : _d.getColumn(cfgColumn.name)) === null || _e === void 0 ? void 0 : _e.getColDef()) === null || _f === void 0 ? void 0 : _f.headerName;
     if ((field === null || field === void 0 ? void 0 : field.userInterface) === UserInterface.SEARCH) {
       return this.DEFAULT_MAX_SIZE;
     }
-    const labelSize = (((_b = field === null || field === void 0 ? void 0 : field.label) === null || _b === void 0 ? void 0 : _b.length) || 0) * this.DEFAULT_FONT_SIZE + this.DEFAULT_ICON_SIZE;
+    return this.getColumnWidthByLabel(label);
+  }
+  getColumnWidthByLabel(label) {
+    const labelSize = ((label === null || label === void 0 ? void 0 : label.length) || 0) * this.DEFAULT_FONT_SIZE + this.DEFAULT_ICON_SIZE;
     return labelSize > this.DEFAULT_MAX_SIZE ? this.DEFAULT_MAX_SIZE : labelSize;
   }
+  getCodeColFromDescriptionCol(descriptionColName) {
+    var _a;
+    const colGrid = this._gridOptions.columnApi.getColumn(descriptionColName);
+    const colDef = colGrid === null || colGrid === void 0 ? void 0 : colGrid.getColDef();
+    return (_a = colDef === null || colDef === void 0 ? void 0 : colDef.headerComponentParams) === null || _a === void 0 ? void 0 : _a.presentationFrom;
+  }
 }

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

@@ -1,5 +1,5 @@
-import { Action, ObjectUtils } from '@sankhyalabs/core';
-import { EZ_GRID_LOADING_SOURCE } from "../../../../utils/constants";
+import { Action, ObjectUtils, UserInterface } from '@sankhyalabs/core';
+import { EZ_GRID_LOADING_SOURCE, PRESENTATION_COL_ID_PROP_NAME, PRESENTATION_FROM_COL_PROP_NAME } from "../../../../utils/constants";
 import { DataSourceInterceptor } from "./DataSourceInterceptor";
 export default class DataSource {
   handleDataSaved(action) {
@@ -245,14 +245,20 @@ export default class DataSource {
           return indexA - indexB;
         });
         this._dataUnit.metadata.fields.forEach(f => {
-          var _a;
+          var _a, _b;
           if (f.visible !== false && f.name !== this.RECORD_ARCHIVE) {
             const props = new Map();
             const properties = this._dataUnit.getField(f.name).properties;
             for (const value in properties) {
               props.set(value, properties[value]);
             }
-            columnDefs.push({ label: f.label, name: f.name, userInterface: f.userInterface, options: (_a = this._dataUnit.getField(f.name).properties) === null || _a === void 0 ? void 0 : _a.options, props });
+            const col = { label: f.label, name: f.name, userInterface: f.userInterface, options: (_a = this._dataUnit.getField(f.name).properties) === null || _a === void 0 ? void 0 : _a.options, props };
+            columnDefs.push(col);
+            if (f.userInterface === UserInterface.SEARCHPLUS && ((_b = f.properties) === null || _b === void 0 ? void 0 : _b.DESCRIPTIONFIELD)) {
+              const descriptionCol = this.buildDescriptionColumn(f);
+              columnDefs.push(descriptionCol);
+              f.properties[PRESENTATION_COL_ID_PROP_NAME] = descriptionCol.name;
+            }
           }
         });
       }
@@ -262,4 +268,17 @@ export default class DataSource {
       console.warn(error);
     }
   }
+  buildDescriptionColumn(field) {
+    var _a, _b, _c, _d;
+    const props = new Map();
+    props.set(PRESENTATION_FROM_COL_PROP_NAME, field.name);
+    const descriptionFieldName = `${(_a = field.properties) === null || _a === void 0 ? void 0 : _a.ENTITYNAME}.${(_b = field.properties) === null || _b === void 0 ? void 0 : _b.DESCRIPTIONFIELD}`;
+    this._dataUnit.addSourceFieldValue(descriptionFieldName, field.name);
+    return {
+      label: `${(_c = field.properties) === null || _c === void 0 ? void 0 : _c.DESCRIPTIONFIELDLABEL} (${(_d = field.properties) === null || _d === void 0 ? void 0 : _d.DESCRIPTIONENTITY})`,
+      name: descriptionFieldName,
+      userInterface: UserInterface.SHORTTEXT,
+      props
+    };
+  }
 }

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

@@ -1,12 +1,14 @@
-import { LockManager, LockManagerOperation, UserInterface } from '@sankhyalabs/core';
+import { LockManager, LockManagerOperation, StringUtils, UserInterface } from '@sankhyalabs/core';
 import { KeyCode, } from "@ag-grid-community/core";
 import { RecordValidationProcessor } from '../../../../utils/validators/recordvalidator/RecordValidationProcessor';
 import EzCellEditor from './editor/EzCellEditor';
 import EzGridCustomCellEditor from './components/EzGridCustomCellEditor';
 import EzGridCustomCellRender from './components/EzGridCustomCellRender';
 import { DataBinder } from '../../../../utils';
+import { PRESENTATION_COL_ID_PROP_NAME } from '../../../../utils/constants';
 export default class GridEditionManager {
   constructor(dataUnit, useEnterLikeTab, recordsValidator, editionIsDisabled, customEditors, customRenders, enableContinuousInsert, enableGridInsert, lockerId) {
+    this._inProgressChanges = [];
     this._dataUnit = dataUnit;
     this._recordValidationProcessor = new RecordValidationProcessor(this._dataUnit, {
       getRequiredFields: () => this.getRequiredFields(),
@@ -106,6 +108,12 @@ export default class GridEditionManager {
     return this._enableContinuousInsert && (this._dataUnit.records.length - 1) === ((_a = this._lastCellEdited) === null || _a === void 0 ? void 0 : _a.rowIndex);
   }
   async proceedAutoSave() {
+    var _a;
+    //Aguarda outras promises entrarem na fila
+    await new Promise(resolve => setTimeout(resolve, 100));
+    if (this._inProgressChanges.length) {
+      await Promise.all((_a = this._inProgressChanges) === null || _a === void 0 ? void 0 : _a.map(({ promise }) => promise));
+    }
     if (!this._dataUnit.isDirty()) {
       this.saveSuccess();
       return true;
@@ -176,7 +184,9 @@ export default class GridEditionManager {
   }
   configureColumn(col) {
     col.cellEditor = 'ezCellEditor';
-    col.editable = params => this.canEdit(params);
+    if (col.editable != false) {
+      col.editable = params => this.canEdit(params);
+    }
     col.suppressKeyboardEvent = (params) => {
       if (params.event.key === KeyCode.ESCAPE && params.editing) {
         return this._dataUnit.isDirty();
@@ -335,11 +345,14 @@ export default class GridEditionManager {
   }
   isColEditable(fieldName) {
     const fieldDefinition = this._dataUnit.getField(fieldName);
-    if (fieldDefinition) {
+    if (fieldDefinition && !this.isTypeFile(fieldDefinition)) {
       return !fieldDefinition.readOnly;
     }
     return false;
   }
+  isTypeFile(file) {
+    return file.userInterface === UserInterface.FILE;
+  }
   isSecondClick(cellClicked) {
     if (!this._lastCellClicked) {
       return false;
@@ -360,6 +373,14 @@ export default class GridEditionManager {
       return;
     }
     if (value instanceof Promise) {
+      const progressChange = {
+        promise: undefined,
+        resolve: () => { }
+      };
+      progressChange.promise = new Promise((resolve) => {
+        progressChange.resolve = resolve;
+      });
+      this._inProgressChanges.push(progressChange);
       this.handlePromiseValue(event, value);
       return;
     }
@@ -373,20 +394,26 @@ export default class GridEditionManager {
     const resolved = await value;
     return this.updateCellValue(event, resolved);
   }
-  updateCellValue(event, newValue) {
-    var _a;
+  async updateCellValue(event, newValue) {
+    var _a, _b, _c;
     const fieldName = event.colDef.field;
     const fieldDescriptor = this._dataUnit.getField(fieldName);
     if (newValue == '' && newValue != this._dataUnit.getFieldValue(fieldName) && (fieldDescriptor === null || fieldDescriptor === void 0 ? void 0 : fieldDescriptor.userInterface) === UserInterface.SEARCH) {
       newValue = this._dataUnit.getFieldValue(fieldName);
     }
+    const newData = { [fieldName]: newValue };
+    const descriptionColName = (_a = fieldDescriptor === null || fieldDescriptor === void 0 ? void 0 : fieldDescriptor.properties) === null || _a === void 0 ? void 0 : _a[PRESENTATION_COL_ID_PROP_NAME];
+    if (!StringUtils.isEmpty(descriptionColName)) {
+      newData[descriptionColName] = newValue === null || newValue === void 0 ? void 0 : newValue.label;
+    }
     event.node.setData(Object.assign(Object.assign({}, event.data), { [fieldName]: newValue }));
-    (_a = this._currentEditLock) === null || _a === void 0 ? void 0 : _a.call(this);
+    (_b = this._currentEditLock) === null || _b === void 0 ? void 0 : _b.call(this);
     if (event.oldValue !== newValue) {
       this._isGridEdition = true;
-      this._dataUnit.setFieldValue(fieldName, newValue, [event.data.__record__id__], { suppressCreateNewRecord: true });
+      await this._dataUnit.setFieldValue(fieldName, newValue, [event.data.__record__id__], { suppressCreateNewRecord: true });
       this._lastCellEdited = { rowIndex: event.rowIndex, column: event.column, rowPinned: undefined };
     }
+    (_c = this._inProgressChanges) === null || _c === void 0 ? void 0 : _c.forEach(({ resolve }) => resolve(newValue));
   }
   setCellEditors(customEditors) {
     var _a;

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

@@ -4,6 +4,7 @@ import { buildTextAreaInput, buildTextInput } from "./templates/TextInput.tpl";
 import { buildDate, buildDateTime, buildTime } from "./templates/DateInput.tpl";
 import { buildDecimal, buildInteger } from "./templates/NumberInput.tpl";
 import { buildComboBox, buildSwitch } from "./templates/ComboBox.tpl";
+import { buildSearchPlus } from "./templates/SearchPlus.tpl";
 import { buildSearch } from "./templates/Search.tpl";
 const uiBuilders = new Map();
 uiBuilders.set(UserInterface.DATE, buildDate);
@@ -16,6 +17,7 @@ uiBuilders.set(UserInterface.CHECKBOX, buildSwitch);
 uiBuilders.set(UserInterface.OPTIONSELECTOR, buildComboBox);
 uiBuilders.set(UserInterface.LONGTEXT, buildTextAreaInput);
 uiBuilders.set(UserInterface.SEARCH, buildSearch);
+uiBuilders.set(UserInterface.SEARCHPLUS, buildSearchPlus);
 export default class EzCellEditor {
   init(params) {
     this._rowData = params.data;

package/dist/collection/components/ez-grid/controller/ag-grid/editor/templates/SearchPlus.tpl.js

@@ -0,0 +1,15 @@
+import { ApplicationContext, HTMLBuilder } from '@sankhyalabs/core';
+export const buildSearchPlus = ({ name, required, readOnly, dataUnit }) => {
+  const ezSearch = HTMLBuilder.parseElement(`<ez-search-plus
+          class="ez-grid grid_editor"
+          mode="slim"
+          suppress-empty-option=${required}
+          enabled=${!readOnly}
+          hide-description-input=${true}
+    />`);
+  const loader = ApplicationContext.getContextValue("__EZUI__SEARCH__PLUS__OPTION__LOADER__");
+  ezSearch.optionLoader = (argument) => loader(argument, name, dataUnit);
+  ezSearch.autoFocus = true;
+  ezSearch.valueGetter = () => ezSearch.getValueAsync();
+  return ezSearch;
+};

package/dist/collection/components/ez-grid/ez-grid.css

@@ -65,6 +65,10 @@
   border-radius: var(--border--radius-small);
 }
 
+.grid__container.no-scroll{
+  width: 100vw;
+}
+
 :host(:not([no-header])) .grid__container {
   border: none;
 }