@sankhyalabs/ezui 7.3.3 → 7.3.4-dev.1

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

@@ -1,14 +1,12 @@
-import { DataType, LockManager, LockManagerOperation, MaskFormatter, NumberUtils, SortMode, StringUtils, UserInterface, } from '@sankhyalabs/core';
-import { Grid, } from "@ag-grid-community/core";
-import { LicenseManager } from '@ag-grid-enterprise/core';
+import { Action, DataType, LockManager, LockManagerOperation, MaskFormatter, NumberUtils, SortMode, StringUtils, UserInterface, } from '@sankhyalabs/core';
+import { Grid, ModuleRegistry, } from '@ag-grid-community/core';
+import { EnterpriseCoreModule, 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 { DISTINCT_FILTER_NAME_PREFIX, EZ_GRID_LOADING_SOURCE, PRESENTATION_COL_ID_PROP_NAME, PRESENTATION_FROM_COL_PROP_NAME } 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';
 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';
@@ -16,6 +14,8 @@ import { MenuModule } from '@ag-grid-enterprise/menu';
 import DOMPurify from 'dompurify';
 import { buildLocaleText } from './utils/buildLocaleText';
 import { agGridLicense } from '../../../../utils/ag-grid-license';
+import { resolveAggFunc } from './utils/AggFunctionResolver';
+import { GRID_COLUMN_DEFAULT_WIDTHS } from './gridColumnDefaultWidths';
 export default class AgGridController {
   configFilterColumn(filterColumn) {
     this._filterColumn = filterColumn;
@@ -41,13 +41,16 @@ export default class AgGridController {
     this.DEFAULT_HEADER_ROW_HEIGHT = 32;
     this.CHECK_BOX_COL_ID = 'checkBoxColumn';
     this.STATUS_COL_ID = 'statusColumn';
+    this.COLUMN_FOOTER_OPER = 'gridFooterOper';
     this.RECORD_ARCHIVE_COL_ID = '__RECORD_ARCHIVE__';
     this.BLOCK_LOAD_DEBOUNCE = 100;
-    this.DEFAULT_FONT_SIZE = 14;
+    this.DEFAULT_FONT_SIZE = 8;
     this.DEFAULT_FONT_SIZE_HTML5 = 32;
-    this.DEFAULT_ICON_SIZE = 12;
-    this.DEFAULT_MAX_SIZE = 200;
+    this.DEFAULT_ICON_SIZE = 40;
+    this.DEFAULT_MAX_SIZE = 300;
     this.MULTI_VALUES_PROP = '__multiValues';
+    this.WHEEL_LINE_HEIGHT = 40;
+    this.HORIZONTAL_SCROLL_VIEWPORT_SELECTOR = '.ag-body-horizontal-scroll-viewport';
     this._menuItems = [];
     this._idAttribName = '__record__id__';
     this._gridConfig = [];
@@ -57,6 +60,9 @@ export default class AgGridController {
     this._gridShowDom = false;
     this.peddingExecutionsOnGridShow = [];
     this._lastColsConfig = undefined;
+    this._pinnedBottomDebounceTimer = null;
+    this._pinnedBottomDebounceDelay = 150;
+    this._pinnedBottomPendingArgs = null;
     ModuleRegistry.registerModules([
       EnterpriseCoreModule,
       RangeSelectionModule,
@@ -239,6 +245,7 @@ export default class AgGridController {
       this.setOptionsSupress(this._gridOptions);
       this._gridOptions = this._editionManager.configureGrid(this._gridOptions);
       this._grid = new Grid(container, this._gridOptions);
+      this.enableHorizontalWheelScroll(container);
       const selection = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getSelectionInfo();
       if (selection === null || selection === void 0 ? void 0 : selection.isAllRecords()) {
         this.selectAll(true);
@@ -267,6 +274,140 @@ export default class AgGridController {
       this.observer.observe(container);
     }
   }
+  onGridReady(evt) {
+    var _a;
+    this._bottomPinnedRowSubscriber = async (action) => {
+      if (action.type === Action.DATA_LOADED || action.type === Action.PAGINATION_UPDATED) {
+        this.scheduleSetPinnedBottomRow(evt.api, evt.columnApi);
+      }
+    };
+    (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.subscribe(this._bottomPinnedRowSubscriber);
+  }
+  scheduleSetPinnedBottomRow(api, columnApi) {
+    if (!api || !columnApi)
+      return;
+    // atualiza args pendentes
+    this._pinnedBottomPendingArgs = { api, columnApi };
+    // limpa timer anterior
+    if (this._pinnedBottomDebounceTimer != null) {
+      window.clearTimeout(this._pinnedBottomDebounceTimer);
+    }
+    // agenda execução
+    this._pinnedBottomDebounceTimer = window.setTimeout(async () => {
+      this._pinnedBottomDebounceTimer = null;
+      const args = this._pinnedBottomPendingArgs;
+      this._pinnedBottomPendingArgs = null;
+      if (!args)
+        return;
+      try {
+        await this.setPinnedBottomRow(args.api, args.columnApi);
+      }
+      catch (err) {
+        console.error('Erro em setPinnedBottomRow debounced:', err);
+      }
+    }, this._pinnedBottomDebounceDelay);
+  }
+  async setPinnedBottomRow(api, columnApi) {
+    const paginationInfo = this._dataUnit.getPaginationInfo();
+    const loadingInProgress = paginationInfo === null || paginationInfo === void 0 ? void 0 : paginationInfo.loadingInProgress;
+    if (!api || !columnApi || loadingInProgress)
+      return;
+    const columns = columnApi.getAllGridColumns();
+    const columnsWithAgg = columns.filter(col => col.getColDef().aggFunc);
+    if (columnsWithAgg.length === 0)
+      return;
+    const accumulators = new Map();
+    columnsWithAgg.forEach(col => {
+      const colId = col.getColId();
+      accumulators.set(colId, { values: [], aggFunc: col.getColDef().aggFunc });
+    });
+    const recordsToAggregate = await this.getAllRecordsToAggregate();
+    recordsToAggregate.forEach(record => {
+      columnsWithAgg.forEach(col => {
+        const colId = col.getColId();
+        const value = record[colId];
+        if (value != null) {
+          accumulators.get(colId).values.push(value);
+        }
+      });
+    });
+    const totalRow = {};
+    accumulators.forEach((acc, colId) => {
+      try {
+        const aggFn = resolveAggFunc(acc.aggFunc);
+        totalRow[colId] = aggFn({ values: acc.values });
+      }
+      catch (error) {
+        console.error(`Erro ao calcular agregação para coluna ${colId}:`, error);
+        totalRow[colId] = null;
+      }
+    });
+    const hasData = Object.values(totalRow).some(value => value !== null && value !== undefined && value !== 0 && !Number.isNaN(value));
+    if (hasData) {
+      api.setPinnedBottomRowData([totalRow]);
+    }
+  }
+  async getAllRecordsToAggregate() {
+    var _a, _b;
+    if ((_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.allRecordsLoader) {
+      return this._dataUnit.allRecordsLoader(this._dataUnit);
+    }
+    const paginationInfo = this._dataUnit.getPaginationInfo();
+    if (!paginationInfo || !paginationInfo.total)
+      return [];
+    const response = await this._dataUnit.dataLoader(this._dataUnit, { limit: paginationInfo.total });
+    return (_b = response.records) !== null && _b !== void 0 ? _b : [];
+  }
+  /**
+   * Habilita o scroll horizontal com a roda do mouse enquanto o ponteiro está sobre a grade.
+   * O AG Grid usa uma barra horizontal "fake" e mantém o corpo sem overflow rolável no eixo X,
+   * por isso, por padrão, só é possível rolar horizontalmente com o ponteiro sobre a barra.
+   * Aqui traduzimos o gesto horizontal (trackpad/`deltaX`) ou `Shift + roda` em rolagem
+   * horizontal do viewport interno do AG Grid.
+   */
+  enableHorizontalWheelScroll(container) {
+    var _a;
+    if (((_a = this._options) === null || _a === void 0 ? void 0 : _a.suppressHorizontalScroll) || !container)
+      return;
+    this._horizontalWheelHandler = (event) => {
+      var _a;
+      const target = event.target;
+      // Evita rolagem dupla quando o ponteiro já está sobre a barra horizontal nativa.
+      if ((_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, this.HORIZONTAL_SCROLL_VIEWPORT_SELECTOR))
+        return;
+      const horizontalDelta = this.resolveHorizontalWheelDelta(event);
+      if (horizontalDelta === 0)
+        return;
+      const scrollViewport = container.querySelector(this.HORIZONTAL_SCROLL_VIEWPORT_SELECTOR);
+      if (!scrollViewport)
+        return;
+      const maxScrollLeft = scrollViewport.scrollWidth - scrollViewport.clientWidth;
+      if (maxScrollLeft <= 0)
+        return;
+      const nextScrollLeft = Math.max(0, Math.min(maxScrollLeft, scrollViewport.scrollLeft + horizontalDelta));
+      if (nextScrollLeft === scrollViewport.scrollLeft)
+        return;
+      scrollViewport.scrollLeft = nextScrollLeft;
+      event.preventDefault();
+    };
+    container.addEventListener('wheel', this._horizontalWheelHandler, { passive: false });
+  }
+  /**
+   * Resolve o deslocamento horizontal desejado a partir do evento de roda.
+   * Retorna 0 quando o gesto é predominantemente vertical (sem Shift), preservando o
+   * comportamento nativo de scroll vertical do AG Grid.
+   */
+  resolveHorizontalWheelDelta(event) {
+    const lineFactor = event.deltaMode === WheelEvent.DOM_DELTA_LINE ? this.WHEEL_LINE_HEIGHT : 1;
+    if (event.shiftKey) {
+      const delta = event.deltaX !== 0 ? event.deltaX : event.deltaY;
+      return delta * lineFactor;
+    }
+    if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
+      return event.deltaX * lineFactor;
+    }
+    return 0;
+  }
   processFormatterCellCallback(params) {
     const column = params.column.getColDef();
     if (typeof column.valueFormatter === 'function') {
@@ -432,6 +573,8 @@ export default class AgGridController {
     opt.onRowDoubleClicked = evt => this.onRowDoubleClick(evt);
     opt.onDragStopped = evt => this.onCallStateChange('columnMovedEnd', evt);
     opt.onCellClicked = evt => this.onCellClicked(evt);
+    opt.onGridReady = evt => this.onGridReady(evt);
+    opt.onModelUpdated = async (evt) => this.scheduleSetPinnedBottomRow(evt.api, evt.columnApi);
   }
   setOptionsSupress(opt) {
     opt.suppressDragLeaveHidesColumns = true;
@@ -954,9 +1097,12 @@ export default class AgGridController {
       tooltip = this._i18n('ez-grid.columnCantBeOrder');
     }
     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);
+    const initialWidth = this.getInitialColumnWidth(source.userInterface, source.label);
     return this._editionManager.configureColumn({
       headerName: source.label,
       field: source.name,
+      width: initialWidth,
+      aggFunc: this.getAggFunc(source),
       sortable: propSortable,
       resizable: true,
       headerComponent: 'ezGridCustomHeader',
@@ -998,6 +1144,10 @@ export default class AgGridController {
       editable: !((_e = source.props) === null || _e === void 0 ? void 0 : _e.has(PRESENTATION_FROM_COL_PROP_NAME))
     });
   }
+  getAggFunc(column) {
+    var _a, _b;
+    return (_b = (_a = column.props) === null || _a === void 0 ? void 0 : _a.get(this.COLUMN_FOOTER_OPER)) !== null && _b !== void 0 ? _b : column.aggFunc;
+  }
   setHTMLRender(params, source) {
     const htmlSanitized = DOMPurify.sanitize(params.value);
     params.colDef.cellRenderer = (cellParams) => {
@@ -1120,12 +1270,13 @@ export default class AgGridController {
     }
   }
   onCallStateChange(type, e) {
+    var _a, _b;
     const finished = !('finished' in e) || e['finished'];
     if (finished && this._columnStateChangeCallback) {
       let info = {};
       let isUserChange = this.isUIEvent(e['source'], e['type']);
       if (type === 'columnResize') {
-        info['column'] = { colId: e['column'].colId, actualWidth: e['column'].actualWidth };
+        info['column'] = { colId: (_a = e['column']) === null || _a === void 0 ? void 0 : _a.colId, actualWidth: (_b = e['column']) === null || _b === void 0 ? void 0 : _b.actualWidth };
       }
       info['isUserChange'] = isUserChange;
       info['isElementResize'] = this.isElementResize(e);
@@ -1274,7 +1425,26 @@ export default class AgGridController {
   destroy() {
     var _a;
     this.observer.disconnect();
+    if (this._horizontalWheelHandler && this._container) {
+      this._container.removeEventListener('wheel', this._horizontalWheelHandler);
+    }
     (_a = this._dataSource) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.handleDestroyBottomPinnedRowSubscriber();
+    this.handleDestroySetBottomPinnedRowDebounce();
+  }
+  handleDestroyBottomPinnedRowSubscriber() {
+    var _a;
+    if (this._bottomPinnedRowSubscriber) {
+      (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._bottomPinnedRowSubscriber);
+      this._bottomPinnedRowSubscriber = null;
+    }
+  }
+  handleDestroySetBottomPinnedRowDebounce() {
+    if (this._pinnedBottomDebounceTimer != null) {
+      clearTimeout(this._pinnedBottomDebounceTimer);
+      this._pinnedBottomDebounceTimer = null;
+      this._pinnedBottomPendingArgs = null;
+    }
   }
   registryListeners() {
     var _a;
@@ -1303,10 +1473,21 @@ export default class AgGridController {
     }
     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;
+    return this.getInitialColumnWidth(field === null || field === void 0 ? void 0 : field.userInterface, label);
+  }
+  getInitialColumnWidth(userInterface, label) {
+    const columnWidthByLabel = this.getColumnWidthByLabel(label);
+    const defaultWidth = this.getDefaultWidthByUserInterface(userInterface);
+    if (!defaultWidth) {
+      return columnWidthByLabel;
+    }
+    return Math.max(defaultWidth, columnWidthByLabel);
+  }
+  getDefaultWidthByUserInterface(userInterface) {
+    if (!userInterface) {
+      return undefined;
     }
-    return this.getColumnWidthByLabel(label);
+    return GRID_COLUMN_DEFAULT_WIDTHS[userInterface];
   }
   getColumnWidthByLabel(label) {
     const labelSize = ((label === null || label === void 0 ? void 0 : label.length) || 0) * this.DEFAULT_FONT_SIZE + this.DEFAULT_ICON_SIZE;

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

@@ -250,13 +250,23 @@ export default class DataSource {
         });
         this._dataUnit.metadata.fields.forEach(f => {
           var _a, _b, _c, _d, _e, _f;
+          if (f.userInterface === UserInterface.IMAGE) {
+            return;
+          }
           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]);
             }
-            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 };
+            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,
+              aggFunc: f['aggFunc']
+            };
             columnDefs.push(col);
             if (f.userInterface === UserInterface.SEARCHPLUS && ((_b = f.properties) === null || _b === void 0 ? void 0 : _b.DESCRIPTIONFIELD)) {
               const descriptionField = this.getDescriptionField((_c = f.properties) === null || _c === void 0 ? void 0 : _c.DESCRIPTIONFIELD, (_d = f.properties) === null || _d === void 0 ? void 0 : _d.ENTITYNAME);

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

@@ -0,0 +1,23 @@
+import { UserInterface } from '@sankhyalabs/core';
+/**
+ * Larguras padrão das colunas do grid por tipo de UserInterface
+ */
+export const GRID_COLUMN_DEFAULT_WIDTHS = {
+  [UserInterface.SEARCH]: 200,
+  [UserInterface.SEARCHPLUS]: 100,
+  [UserInterface.DATE]: 120,
+  [UserInterface.DATETIME]: 160,
+  [UserInterface.TIME]: 100,
+  [UserInterface.ELAPSEDTIME]: 100,
+  [UserInterface.DECIMALNUMBER]: 130,
+  [UserInterface.INTEGERNUMBER]: 120,
+  [UserInterface.SWITCH]: 80,
+  [UserInterface.FILE]: 100,
+  [UserInterface.HTML]: 200,
+  [UserInterface.LONGTEXT]: 200,
+  [UserInterface.CHECKBOX]: 80,
+  [UserInterface.OPTIONSELECTOR]: 100,
+  [UserInterface.SHORTTEXT]: 200,
+  [UserInterface.PASSWORD]: 100,
+  [UserInterface.MASKEDTEXT]: 100,
+};

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

@@ -0,0 +1,24 @@
+const BUILTIN_AGG_FUNCS = {
+  "sum": (params) => params.values.reduce((a, b) => Number(a !== null && a !== void 0 ? a : 0) + Number(b !== null && b !== void 0 ? b : 0), 0),
+  avg: (params) => {
+    const valid = params.values.filter(v => v != null && !Number.isNaN(v));
+    return valid.length
+      ? valid.reduce((a, b) => a + b, 0) / valid.length
+      : null;
+  },
+  min: (params) => {
+    const valid = params.values.filter(v => v != null && !Number.isNaN(v));
+    return valid.length ? Math.min(...valid) : null;
+  },
+  max: (params) => Math.max(...params.values.filter(v => v != null && !Number.isNaN(v))),
+  count: (params) => params.values.filter(v => v != null).length
+};
+export function resolveAggFunc(aggFunc) {
+  if (typeof aggFunc === 'function')
+    return aggFunc;
+  const fn = BUILTIN_AGG_FUNCS[aggFunc];
+  if (!fn) {
+    throw new Error(`aggFunc "${aggFunc}" não suportada`);
+  }
+  return fn;
+}

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

@@ -59,10 +59,8 @@
   outline: none;
 
   /*public*/
-  box-shadow: var(--ez-grid__container--shadow);
   background-color: var(--ez-grid__header--background-color);
-  border: var(--border--small) var(--color--strokes);
-  border-radius: var(--border--radius-small);
+  border-radius: var(--border--radius-12, 12px) var(--border--radius-12, 12px) 0 0;
 }
 
 .grid__container.no-scroll{
@@ -140,32 +138,15 @@
 :host[no-header] .grid-header {
   height: 0;
   padding: 0;
-}
-
-.grid-header__pagination{
-  justify-content: flex-end;
-  flex-wrap: nowrap;
-  flex-shrink: 1;
-  flex-grow: 1;
-}
-
-.grid-header__pagination-label {
-  width: 100%;
-  white-space: nowrap
+  border: none;
+  box-shadow: none;
+  outline: none;
 }
 
 .overflowed {
   display: none;
 }
 
-.pagination-contracted {
-  width: 100px;
-}
-
-.pagination-expanded{
-  min-width: 150px;
-}
-
 .left__header-contracted {
   width: auto;
 }
@@ -176,41 +157,5 @@
 
 .grid__footer{
   background-color: var(--background--xlight, #FFF);
-  border-radius: 0 0 var(--border--radius-medium) var(--border--radius-medium);
-  box-shadow: var(--shadow--small);
-}
-
-.cancel-pagination{
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  gap: 4px;
-  padding: 8px;
-  width: 180px;
-}
-
-.cancel-pagination-btn{
-  color: var(--color--error);
-  font-size: var(--text--medium);
-  font-weight: var(--text-weight--large);
-  font-family: var(--font-pattern, Roboto);
-  text-wrap: nowrap;
-  cursor: pointer;
-}
-
-.spin {
-  animation-name: spin;
-  animation-duration: 5000ms;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
-}
-
-@keyframes spin {
-  from {
-    transform:rotate(0deg);
-  }
-  to {
-    transform:rotate(360deg);
-  }
+  border-radius: 0px 0px var(--border--radius-medium) var(--border--radius-medium);
 }