@sankhyalabs/ezui 5.21.2 → 5.22.0-dev.1

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

@@ -1,5 +1,5 @@
 import { ApplicationContext, DataType, MaskFormatter, NumberUtils, SortMode, StringUtils, UserInterface, } from '@sankhyalabs/core';
-import { Grid, } from 'ag-grid-community';
+import { Grid } from 'ag-grid-community';
 import { Grid as EnterpriseGrid, LicenseManager } from 'ag-grid-enterprise';
 import DataSource from './DataSource';
 import { EzGridCustomHeader } from './components/EzGridCustomHeader';
@@ -34,14 +34,13 @@ export default 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() {
@@ -127,7 +126,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._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;
@@ -189,6 +188,7 @@ export default 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) {
@@ -487,6 +487,10 @@ export default class AgGridController {
       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) {
@@ -572,9 +576,11 @@ export default class AgGridController {
     //Existem colunas implícitas que não tem estado, essas colunas são sempre as primeiras.
     //Como vamos reordenar, precisamos considerar o deslocamento provocado por elas.
     const columnsOffset = colDef.length - columns.length;
+    this._gridConfig = state;
     let sort = [];
-    state.forEach((cfgColumn, index) => {
-      const colWidth = this.getColumnWidth(cfgColumn);
+    state === null || state === void 0 ? void 0 : state.forEach((cfgColumn, index) => {
+      var _a;
+      const colWidth = (_a = this._gridOptions.columnApi.getColumn(cfgColumn.name)) === null || _a === void 0 ? void 0 : _a.getActualWidth();
       this._gridOptions.columnApi.moveColumn(cfgColumn.name, index + columnsOffset);
       this._gridOptions.columnApi.setColumnWidth(cfgColumn.name, colWidth);
       visibleColumns.push(cfgColumn.name);
@@ -589,7 +595,11 @@ export default class AgGridController {
       state: sort,
       defaultState: { sort: null },
     });
-    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) {
@@ -598,13 +608,15 @@ export default 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();
@@ -670,12 +682,19 @@ export default 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);
         }
@@ -684,6 +703,13 @@ export default 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',
@@ -844,19 +870,22 @@ export default 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();
   }
 }

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

@@ -11,7 +11,9 @@ export default class DataSource {
     }
   }
   handleFocusFirstRow() {
-    this._controller.setFocusFirstRow();
+    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
@@ -87,6 +89,9 @@ export default class DataSource {
       this._controller.selectRows(selectionInfo.recordIds, true);
     }
   }
+  setAutoFocus(autoFocus) {
+    this._options.autoFocus = autoFocus;
+  }
   getRows(params) {
     if (this.needReload(params)) {
       this._lastLoadingParams = params;

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

@@ -2,8 +2,10 @@ import { UserInterface } from "@sankhyalabs/core";
 import { KeyCode } from "ag-grid-community";
 import { RecordValidationProcessor } from "../../../../utils/validators/recordvalidator/RecordValidationProcessor";
 import EzCellEditor from "./editor/EzCellEditor";
+import EzGridCustomCellEditor from "./components/EzGridCustomCellEditor";
+import EzGridCustomCellRender from "./components/EzGridCustomCellRender";
 export default 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(),
@@ -12,6 +14,8 @@ export default class GridEditionManager {
     }, recordsValidator);
     this._useEnterLikeTab = useEnterLikeTab;
     this._editionIsDisabled = editionIsDisabled;
+    this._customEditors = customEditors;
+    this._customRenders = customRenders;
   }
   configureGrid(options) {
     this._gridOptions = options;
@@ -78,6 +82,30 @@ export default 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() {
@@ -223,6 +251,12 @@ export default 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) {

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

@@ -0,0 +1,59 @@
+import { HTMLBuilder } from "@sankhyalabs/core";
+import { CustomEditorSource } from "../../../../../utils/customEditor/interfaces/ICustomEditor";
+import EzCellEditor from "../editor/EzCellEditor";
+export default 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;
+  }
+}

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

@@ -0,0 +1,40 @@
+import EzCellRender from "../editor/EzCellRender";
+import { HTMLBuilder } from "@sankhyalabs/core";
+import { CustomRenderSource } from "../../../../../utils/customRender/interfaces/ICustomRender";
+export default 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;
+  }
+}

package/dist/collection/components/ez-grid/controller/ag-grid/components/test/constants/EzGridCustomCellEditorConstants.js

@@ -0,0 +1,11 @@
+import { DataType, UserInterface } from "@sankhyalabs/core";
+export const metadata = {
+  name: 'metadatada',
+  label: 'metadatada',
+  fields: [{
+      name: 'FIELDNAME',
+      label: 'Test',
+      dataType: DataType.TEXT,
+      userInterface: UserInterface.SHORTTEXT,
+    }],
+};

package/dist/collection/components/ez-grid/controller/ag-grid/components/test/constants/EzGridCustomCellRenderConstants.js

@@ -0,0 +1,11 @@
+import { DataType, UserInterface } from "@sankhyalabs/core";
+export const metadata = {
+  name: 'metadatada',
+  label: 'metadatada',
+  fields: [{
+      name: 'FIELDNAME',
+      label: 'Test',
+      dataType: DataType.TEXT,
+      userInterface: UserInterface.SHORTTEXT,
+    }],
+};

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

@@ -18,11 +18,12 @@ uiBuilders.set(UserInterface.LONGTEXT, buildTextAreaInput);
 uiBuilders.set(UserInterface.SEARCH, buildSearch);
 export default 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);
     }
@@ -46,4 +47,10 @@ export default class EzCellEditor {
   isPopup() {
     return this._gui.isPopUp;
   }
+  getFieldMetadata() {
+    return this._fieldMetadata;
+  }
+  getRecord() {
+    return this._rowData;
+  }
 }

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

@@ -0,0 +1,40 @@
+import { buildEditorMetadata } from "./IEditorMetadata";
+export default 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;
+  }
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,7 +1,8 @@
 import { HTMLBuilder } from "@sankhyalabs/core";
 export 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);
 };
 export const buildInteger = ({ readOnly }) => {

package/dist/collection/components/ez-grid/controller/ag-grid/test/constants/GridEditionMock.js

@@ -0,0 +1,40 @@
+import { StringUtils } from "@sankhyalabs/core";
+const columnsState = [{
+    colId: StringUtils.generateUUID(),
+  }];
+const colDef = {
+  headerName: 'name',
+  checkboxSelection: false,
+};
+export const gridEditionImplementation = {
+  getComponents: () => ({}),
+  configureGrid: (option) => (Object.assign(Object.assign({}, option), { api: {
+      setHeaderHeight: () => { },
+      forEachNode: () => { },
+    }, context: {}, columnApi: {
+      moveColumn: () => { },
+      setColumnWidth: () => { },
+      setColumnsVisible: () => { },
+      applyColumnState: () => { },
+      getColumns: () => ([]),
+      getColumn: () => ({
+        getActualWidth: () => 30,
+        getColDef: () => colDef,
+      }),
+      getColumnState: () => columnsState,
+    } }))
+};
+export function buildOptions(dataUnit) {
+  return ({
+    allowMultipleSelection: true,
+    dataUnit,
+    onColumnStateChange: () => { },
+    onDoubleClick: () => { },
+    onPaginationChange: () => { },
+    onPaginationUpdate: () => { },
+    onSelectionChange: () => { },
+    serverURL: '',
+    statusResolver: {},
+    useEnterLikeTab: true,
+  });
+}