@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-132280.3 → 0.0.0-bugfix-dev-KB-157120.0

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

@@ -2,16 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-9e5554cb.js');
+const index$1 = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 const DataUnit = require('@sankhyalabs/core/dist/dataunit/DataUnit');
-const ApplicationUtils = require('./ApplicationUtils-006ca96f.js');
+const ApplicationUtils = require('./ApplicationUtils-88dfe345.js');
 require('./DialogType-2114c337.js');
 require('./CheckMode-ecb90b87.js');
-const index = require('./index-350d0fa0.js');
+const index = require('./index-9739c242.js');
 const types = require('./types-6a5df0c7.js');
 require('./FormLayout-fe8da83c.js');
-const searchColumn = require('./search-column-46d02656.js');
+const searchColumn = require('./search-column-6e90fb19.js');
 const constants = require('./constants-72b7e05e.js');
 const FocusResolver = require('./FocusResolver-885f2173.js');
 const purify = require('./purify-b30a5718.js');
@@ -50268,7 +50268,14 @@ class DataSource {
             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 === core.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);
@@ -64835,6 +64842,54 @@ function _0x15c2(_0x353a9c, _0x3e4a5a) { const _0x53e110 = _0x53e1(); return _0x
 } }(_0x53e1, 0xe8676));
 const agGridLicense = _0xc7632f(0x18c);
 
+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
+};
+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;
+}
+
+/**
+ * Larguras padrão das colunas do grid por tipo de UserInterface
+ */
+const GRID_COLUMN_DEFAULT_WIDTHS = {
+  [core.UserInterface.SEARCH]: 200,
+  [core.UserInterface.SEARCHPLUS]: 100,
+  [core.UserInterface.DATE]: 120,
+  [core.UserInterface.DATETIME]: 160,
+  [core.UserInterface.TIME]: 100,
+  [core.UserInterface.ELAPSEDTIME]: 100,
+  [core.UserInterface.DECIMALNUMBER]: 130,
+  [core.UserInterface.INTEGERNUMBER]: 120,
+  [core.UserInterface.SWITCH]: 80,
+  [core.UserInterface.FILE]: 100,
+  [core.UserInterface.HTML]: 200,
+  [core.UserInterface.LONGTEXT]: 200,
+  [core.UserInterface.CHECKBOX]: 80,
+  [core.UserInterface.OPTIONSELECTOR]: 100,
+  [core.UserInterface.SHORTTEXT]: 200,
+  [core.UserInterface.PASSWORD]: 100,
+  [core.UserInterface.MASKEDTEXT]: 100,
+};
+
 class AgGridController {
   configFilterColumn(filterColumn) {
     this._filterColumn = filterColumn;
@@ -64860,12 +64915,14 @@ 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._menuItems = [];
     this._idAttribName = '__record__id__';
     this._gridConfig = [];
@@ -64875,6 +64932,9 @@ class AgGridController {
     this._gridShowDom = false;
     this.peddingExecutionsOnGridShow = [];
     this._lastColsConfig = undefined;
+    this._pinnedBottomDebounceTimer = null;
+    this._pinnedBottomDebounceDelay = 150;
+    this._pinnedBottomPendingArgs = null;
     ModuleRegistry.registerModules([
       EnterpriseCoreModule,
       RangeSelectionModule,
@@ -64941,21 +65001,24 @@ class AgGridController {
         const params = [];
         let isNullIncluded;
         checkedOptions.forEach(option => {
-          const paramName = `PARAM_${column}_${params.length + 1}`;
-          params.push({
-            dataType: dataType === core.DataType.OBJECT ? core.DataType.TEXT : dataType,
-            name: paramName,
-            value: option.value,
-          });
-          if (option.value == undefined) {
-            isNullIncluded = true;
-          }
-          else {
-            if (placeholders.length > 0) {
-              placeholders = placeholders + ',';
+          const optionValues = this.resolveColumnFilterValues(option);
+          optionValues.forEach(value => {
+            const paramName = `PARAM_${column}_${params.length + 1}`;
+            params.push({
+              dataType: dataType === core.DataType.OBJECT ? core.DataType.TEXT : dataType,
+              name: paramName,
+              value,
+            });
+            if (value == undefined) {
+              isNullIncluded = true;
             }
-            placeholders = `${placeholders}:${paramName}`;
-          }
+            else {
+              if (placeholders.length > 0) {
+                placeholders = placeholders + ',';
+              }
+              placeholders = `${placeholders}:${paramName}`;
+            }
+          });
         });
         return {
           name: `${constants.DISTINCT_FILTER_NAME_PREFIX}${column}`,
@@ -64977,6 +65040,13 @@ class AgGridController {
     }
     return `${columnExpression} in (${placeholders})`;
   }
+  resolveColumnFilterValues(option) {
+    const multiValues = option === null || option === void 0 ? void 0 : option[this.MULTI_VALUES_PROP];
+    if (Array.isArray(multiValues) && multiValues.length > 0) {
+      return multiValues;
+    }
+    return [option.value];
+  }
   initDatagrid(container, options) {
     var _a;
     this._options = options;
@@ -65075,6 +65145,90 @@ class AgGridController {
       this.observer.observe(container);
     }
   }
+  onGridReady(evt) {
+    var _a;
+    this._bottomPinnedRowSubscriber = async (action) => {
+      if (action.type === core.Action.DATA_LOADED || action.type === core.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 : [];
+  }
   processFormatterCellCallback(params) {
     const column = params.column.getColDef();
     if (typeof column.valueFormatter === 'function') {
@@ -65240,6 +65394,8 @@ 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;
@@ -65762,9 +65918,12 @@ 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(constants.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',
@@ -65806,6 +65965,10 @@ class AgGridController {
       editable: !((_e = source.props) === null || _e === void 0 ? void 0 : _e.has(constants.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 = purify.purify.sanitize(params.value);
     params.colDef.cellRenderer = (cellParams) => {
@@ -65928,12 +66091,13 @@ 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);
@@ -66061,6 +66225,22 @@ class AgGridController {
     var _a;
     this.observer.disconnect();
     (_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;
@@ -66089,10 +66269,21 @@ 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) === core.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;
@@ -66148,8 +66339,8 @@ const SelectionCounter = (props) => {
         index$1.h("label", Object.assign({ innerHTML: getText(selectionCount, allRecordSelected), class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium ez-margin-top--medium" }, getElementID("ezGridSelectionCounter_label"))),
         index$1.h("div", { class: "ez-flex ez-margin-right--medium" },
           shouldRenderSelectionButton() &&
-            index$1.h("ez-button", Object.assign({ key: "selectAllRecordsEzButton", title: buildSelectAllTitle(total), enabled: enableSelectAll(total), class: "ez-margin-right--medium", label: buildSelectAllLabel(allRecordSelected, count, total), mode: "link", onClick: allRecordSelected ? onSelectPage : onSelectAll }, getElementID(`ezGridSelectionCounter_select${allRecordSelected ? "Page" : "All"}`))),
-          index$1.h("ez-button", Object.assign({ key: "clearAllSelectionEzButton", class: "grid__btn-clear", label: i18n("ez-grid.clearSelection"), mode: "link", onClick: onClearAll }, getElementID("ezGridSelectionCounter_clearAll"))))),
+            index$1.h("ez-button", Object.assign({ key: "selectAllRecordsEzButton", title: buildSelectAllTitle(total), enabled: enableSelectAll(total), class: "ez-margin-right--medium ez-padding-vertical--medium", label: buildSelectAllLabel(allRecordSelected, count, total), mode: "link", onClick: allRecordSelected ? onSelectPage : onSelectAll }, getElementID(`ezGridSelectionCounter_select${allRecordSelected ? "Page" : "All"}`))),
+          index$1.h("ez-button", Object.assign({ key: "clearAllSelectionEzButton", class: "grid__btn-clear ez-padding-vertical--medium", label: i18n("ez-grid.clearSelection"), mode: "link", onClick: onClearAll }, getElementID("ezGridSelectionCounter_clearAll"))))),
       index$1.h("button", Object.assign({ class: "grid__btn-close", title: i18n("app.close"), onClick: onClose }, getElementID("ezGridSelectionCounter_close")),
         index$1.h("ez-icon", { iconName: "close" })))));
 };
@@ -66286,7 +66477,7 @@ class InMemoryFilterColumnDataSource {
   }
 }
 
-const ezGridCss = ".sc-ez-grid-h{display:grid;grid-template-rows:auto 1fr auto;height:100%;width:100%;--ez-grid__header--background-color:var(--background--xlight, #FFF);--ez-grid__selection-counter--z-index:var(--visible, 1);--ez-grid__container--shadow:var(--shadow);--ez-grid--min-height:300px;--ez-grid__container--shadow--outline:var(--shadow--outline) var(--color--strokes);--ez-grid__header--shadow:var(--shadow--xsmall);--ez-grid__header--shadow--outline:var(--shadow--outline) var(--color--strokes);--ez-grid__header--outline:none;--ez-grid__header--border:none;min-height:var(--ez-grid--min-height)}.grid-header.sc-ez-grid{display:grid;justify-content:space-between;align-items:center;grid-row-start:1;grid-template-columns:1fr;background-color:var(--ez-grid__header--background-color, #FFF)}.grid-header.shadow-mode.sc-ez-grid{box-shadow:var(--ez-grid__header--shadow);border:var(--ez-grid__header--border);outline:var(--ez-grid__header--outline)}.grid-header.outline-mode.sc-ez-grid{box-shadow:var(--ez-grid__header--shadow--outline);border:var(--ez-grid__header--border);outline:var(--ez-grid__header--outline)}.header-overlay.sc-ez-grid{padding-top:15px;margin-top:-12px}.grid__container.sc-ez-grid{outline:none;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)}.grid__container.no-scroll.sc-ez-grid{width:100vw}.sc-ez-grid-h:not([no-header]) .grid__container.sc-ez-grid{border:none}.grid__container.outline-mode.sc-ez-grid{box-shadow:var(--ez-grid__container--shadow--outline);border:none;outline:none}.grid-header__popover.sc-ez-grid{position:relative;top:var(--space--sm, 16px)}.grid-header__container.sc-ez-grid{display:flex;align-items:center;flex-grow:1;flex-shrink:1}.grid-header__position.sc-ez-grid{display:flex;align-items:center;justify-content:space-between}.grid__selection-counter.sc-ez-grid{position:fixed;white-space:nowrap;transform:translate(-50%, 0px);left:50%;opacity:0;bottom:-100%;transition:opacity 0.1s, bottom 0.5s}.grid__selection-counter--opened.sc-ez-grid{opacity:1;bottom:0px}.grid__btn-close.sc-ez-grid{display:flex;align-items:center;justify-content:center;padding:0;outline:none;width:20px;height:20px;border:none;background-color:unset;cursor:pointer}.grid__btn-clear.sc-ez-grid{--ez-button--link-color:var(--color--alert-warning-900, #8C6B00);--ez-button--link--hover-color:var(--color--alert-warning-900, #8C6B00)}[no-header].sc-ez-grid-h .grid-header.sc-ez-grid{height:0;padding:0}.grid-header__pagination.sc-ez-grid{justify-content:flex-end;flex-wrap:nowrap;flex-shrink:1;flex-grow:1}.grid-header__pagination-label.sc-ez-grid{width:100%;white-space:nowrap}.overflowed.sc-ez-grid{display:none}.pagination-contracted.sc-ez-grid{width:100px}.pagination-expanded.sc-ez-grid{min-width:150px}.left__header-contracted.sc-ez-grid{width:auto}.left__header-expanded.sc-ez-grid{flex-grow:1}.grid__footer.sc-ez-grid{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.sc-ez-grid{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:4px;padding:8px;width:180px}.cancel-pagination-btn.sc-ez-grid{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.sc-ez-grid{animation-name:spin;animation-duration:5000ms;animation-iteration-count:infinite;animation-timing-function:linear}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}";
+const ezGridCss = ".sc-ez-grid-h{display:grid;grid-template-rows:auto 1fr auto;height:100%;width:100%;--ez-grid__header--background-color:var(--background--xlight, #FFF);--ez-grid__selection-counter--z-index:var(--visible, 1);--ez-grid__container--shadow:var(--shadow);--ez-grid--min-height:300px;--ez-grid__container--shadow--outline:var(--shadow--outline) var(--color--strokes);--ez-grid__header--shadow:var(--shadow--xsmall);--ez-grid__header--shadow--outline:var(--shadow--outline) var(--color--strokes);--ez-grid__header--outline:none;--ez-grid__header--border:none;min-height:var(--ez-grid--min-height)}.grid-header.sc-ez-grid{display:grid;justify-content:space-between;align-items:center;grid-row-start:1;grid-template-columns:1fr;background-color:var(--ez-grid__header--background-color, #FFF)}.grid-header.shadow-mode.sc-ez-grid{box-shadow:var(--ez-grid__header--shadow);border:var(--ez-grid__header--border);outline:var(--ez-grid__header--outline)}.grid-header.outline-mode.sc-ez-grid{box-shadow:var(--ez-grid__header--shadow--outline);border:var(--ez-grid__header--border);outline:var(--ez-grid__header--outline)}.header-overlay.sc-ez-grid{padding-top:15px;margin-top:-12px}.grid__container.sc-ez-grid{outline:none;background-color:var(--ez-grid__header--background-color);border-radius:var(--border--radius-12, 12px) var(--border--radius-12, 12px) 0 0}.grid__container.no-scroll.sc-ez-grid{width:100vw}.sc-ez-grid-h:not([no-header]) .grid__container.sc-ez-grid{border:none}.grid__container.outline-mode.sc-ez-grid{box-shadow:var(--ez-grid__container--shadow--outline);border:none;outline:none}.grid-header__popover.sc-ez-grid{position:relative;top:var(--space--sm, 16px)}.grid-header__container.sc-ez-grid{display:flex;align-items:center;flex-grow:1;flex-shrink:1}.grid-header__position.sc-ez-grid{display:flex;align-items:center;justify-content:space-between}.grid__selection-counter.sc-ez-grid{position:fixed;white-space:nowrap;transform:translate(-50%, 0px);left:50%;opacity:0;bottom:-100%;transition:opacity 0.1s, bottom 0.5s}.grid__selection-counter--opened.sc-ez-grid{opacity:1;bottom:0px}.grid__btn-close.sc-ez-grid{display:flex;align-items:center;justify-content:center;padding:0;outline:none;width:20px;height:20px;border:none;background-color:unset;cursor:pointer}.grid__btn-clear.sc-ez-grid{--ez-button--link-color:var(--color--alert-warning-900, #8C6B00);--ez-button--link--hover-color:var(--color--alert-warning-900, #8C6B00)}[no-header].sc-ez-grid-h .grid-header.sc-ez-grid{height:0;padding:0;border:none;box-shadow:none;outline:none}.overflowed.sc-ez-grid{display:none}.left__header-contracted.sc-ez-grid{width:auto}.left__header-expanded.sc-ez-grid{flex-grow:1}.grid__footer.sc-ez-grid{background-color:var(--background--xlight, #FFF);border-radius:0px 0px var(--border--radius-medium) var(--border--radius-medium)}";
 
 const windowInstace = window;
 const matches = (text, filter) => {
@@ -66339,6 +66530,7 @@ const EzGrid = class {
     this.useSearchColumn = true;
     this.suppressHorizontalScroll = false;
     this.mode = "complete";
+    this.hidePagination = false;
   }
   /**
    * Aplica a definição de colunas.
@@ -66488,26 +66680,17 @@ const EzGrid = class {
       return;
     this._gridController.stopEdit();
   }
+  /**
+   * Manipula a mudança de página da grid.
+   */
+  async handlePageChange() {
+    this.resetPaginationState();
+    this._gridController.setFocusFirstRow();
+    this.ezPageChangedChanged.emit();
+  }
   observeConfig(config) {
     this._gridController.setColumnsState(config === null || config === void 0 ? void 0 : config.columns);
   }
-  updatePaginationTooltip() {
-    this.handleShowCancelPagination();
-    if (!this._refPaginationLabelTooltip)
-      return;
-    const alreadyDefined = this._refPaginationLabelTooltip.getAttribute('data-tooltip');
-    if (alreadyDefined) {
-      this._refPaginationLabelTooltip.setAttribute('data-tooltip', this._getPaginationTooltip());
-    }
-  }
-  observePaginationCounterMode(newValue) {
-    if (newValue === 'hidden') {
-      this._hidePaginationDescription();
-    }
-    if (newValue === 'show') {
-      this._showPaginationDescription();
-    }
-  }
   async observeModeChange(newMode = this.mode) {
     if (newMode === "simple") {
       this.canEdit = false;
@@ -66670,23 +66853,6 @@ const EzGrid = class {
       core.ElementIDUtils.addIDInfo(this._refPaginationControl, 'pagination', dtInfo);
     }
   }
-  handlePageChange() {
-    this.resetPaginationState();
-    this._gridController.setFocusFirstRow();
-    this.ezPageChangedChanged.emit();
-  }
-  previousPage() {
-    if (this.dataUnit) {
-      this.dataUnit.previousPage()
-        .then(() => this.handlePageChange());
-    }
-  }
-  nextPage() {
-    if (this.dataUnit) {
-      this.dataUnit.nextPage()
-        .then(() => this.handlePageChange());
-    }
-  }
   nextRecord() {
     if (this.dataUnit) {
       if (this.dataUnit.getSelectionInfo().records.length === 0) {
@@ -66706,38 +66872,6 @@ const EzGrid = class {
     this._paginationChangedByKeyboard = false;
     (_a = this._gridController) === null || _a === void 0 ? void 0 : _a.resetPaginationState();
   }
-  resolvePaginationClassMode() {
-    if (this.shouldPresentPaginationLabel())
-      return "pagination-expanded";
-    return "pagination-contracted";
-  }
-  async handleCancelPagination() {
-    var _a;
-    this.dataUnit.cancelPagination = true;
-    await ((_a = this._cancelPaginationPopoverElement) === null || _a === void 0 ? void 0 : _a.hide());
-  }
-  renderCancelPagination() {
-    return (index$1.h("ez-popover", { ref: (element) => (this._cancelPaginationPopoverElement = element), "overlay-type": 'none', autoClose: false }, index$1.h("div", { class: 'cancel-pagination' }, index$1.h("ez-icon", { iconName: "sync", size: "x-large", class: "spin" }), index$1.h("span", { onClick: () => this.handleCancelPagination(), class: 'cancel-pagination-btn' }, this.i18n("ez-grid.cancelPagination")))));
-  }
-  handleShowCancelPagination() {
-    var _a, _b, _c;
-    if (!this._hasToShowCancelPagination()) {
-      (_a = this._cancelPaginationPopoverElement) === null || _a === void 0 ? void 0 : _a.hide();
-      return;
-    }
-    if ((_b = this._cancelPaginationPopoverElement) === null || _b === void 0 ? void 0 : _b.opened)
-      return;
-    (_c = this._cancelPaginationPopoverElement) === null || _c === void 0 ? void 0 : _c.show("15px");
-  }
-  getPaginationControl() {
-    if (!this._paginationInfo)
-      return null;
-    const { currentPage, hasMore } = this._paginationInfo;
-    return (index$1.h("div", { class: `grid-header__container grid-header__pagination ${this.resolvePaginationClassMode()}`, ref: ref => (this._refPaginationControl = ref) }, this.renderCancelPagination(), index$1.h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium", ref: (element) => (this._refPaginationLabel = element) }, index$1.h("span", { class: "grid-header__pagination-label" }, this.shouldPresentPaginationLabel() && index$1.h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, this._getActualPageLabel()), this.shouldPresentPaginationLabel() && this._getRemainingPageLabel())), index$1.h("div", { id: "grid-pagination-tooltip", ref: (element) => (this._refPaginationLabelTooltip = element), class: "ez-flex ez-margin-right--medium", title: `${this._getActualPageLabel()} ${this._getRemainingPageLabel()}` }, index$1.h("ez-button", { size: "small", class: "ez-margin-right--medium", iconName: "chevron-left", mode: "icon", enabled: currentPage > 0, onClick: () => this.previousPage(), label: this.i18n("ez-grid.previousPage") }), index$1.h("ez-button", { size: "small", iconName: "chevron-right", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: this.i18n("ez-grid.nextPage") }))));
-  }
-  shouldPresentPaginationLabel() {
-    return this.paginationCounterMode === 'show' || this.paginationCounterMode === 'auto';
-  }
   componentDidLoad() {
     const _application = core.ApplicationContext.getContextValue("__SNK__APPLICATION__");
     this.enableLockManagerLoadingComp = (!_application || (_application === null || _application === void 0 ? void 0 : _application.enableLockManagerLoadingApp)) ? this.enableLockManagerLoadingComp : false;
@@ -66802,76 +66936,9 @@ const EzGrid = class {
     }
     this._paginationInfo = paginationInfo;
   }
-  _getActualPageLabel() {
-    const { firstRecord, lastRecord } = this._paginationInfo;
-    return `${firstRecord}-${lastRecord}`;
-  }
-  _getRemainingPageLabel() {
-    const { total, count } = this._paginationInfo;
-    return `${total == undefined ? this.i18n("ez-grid.remainingPageLabel", { count: count + 1 }) : this.i18n("ez-grid.remainingTotalLabel", { total })}`;
-  }
-  _hasToShowCancelPagination() {
-    var _a;
-    const { total, count } = (_a = this._paginationInfo) !== null && _a !== void 0 ? _a : {};
-    const hasMore = (total === undefined);
-    return !this.dataUnit.cancelPagination && hasMore && count > this.dataUnit.pageSize;
-  }
-  _getPaginationTooltip() {
-    return this._getActualPageLabel() + this._getRemainingPageLabel();
-  }
-  _initHeaderOverflowWatcher() {
-    var _a;
-    (_a = this._headerOverflowWatcher) === null || _a === void 0 ? void 0 : _a.destroy();
-    if (this._refPaginationControl)
-      this._headerOverflowWatcher = new core.OverflowWatcher(this.buildOverFlowWatcherParams());
-  }
-  buildOverFlowWatcherParams() {
-    return {
-      element: this._refPaginationControl,
-      callback: this.handleOverFlow.bind(this),
-      notOverFlow: ["grid-pagination-tooltip"]
-    };
-  }
-  handleOverFlow() {
-    if (!this._refPaginationLabel || !this._refPaginationControl)
-      return;
-    const controlWidth = this._refPaginationControl.clientWidth;
-    const labelWidth = this._refPaginationLabel.scrollWidth;
-    const buttonsElement = this._refPaginationControl.querySelector('#grid-pagination-tooltip');
-    const buttonsWidth = (buttonsElement === null || buttonsElement === void 0 ? void 0 : buttonsElement.clientWidth) || 0;
-    const totalMargins = this._getElementMargins(this._refPaginationLabel) + (buttonsElement ? this._getElementMargins(buttonsElement) : 0);
-    const paginationWidthWithoutDescription = labelWidth + buttonsWidth + totalMargins;
-    const paginationWidthWithDescription = paginationWidthWithoutDescription + this._getPaginationDescriptionWidth();
-    if (controlWidth > paginationWidthWithDescription) {
-      this._showPaginationDescription();
-    }
-    else if (controlWidth <= paginationWidthWithoutDescription) {
-      this._hidePaginationDescription();
-    }
-  }
-  _getPaginationDescriptionWidth() {
-    var _a;
-    return ((_a = this._refPaginationLabelTooltip) === null || _a === void 0 ? void 0 : _a.scrollWidth) || 0;
-  }
-  _getElementMargins(element) {
-    const style = getComputedStyle(element);
-    return parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-  }
-  _hidePaginationDescription() {
-    this._refPaginationLabel.classList.add(core.OVERFLOWED_CLASS_NAME);
-    this._refPaginationLabelTooltip.setAttribute('data-flow', 'bottom');
-    this._refPaginationLabelTooltip.setAttribute('data-tooltip', this._getPaginationTooltip());
-  }
-  ;
-  _showPaginationDescription() {
-    this._refPaginationLabel.classList.remove(core.OVERFLOWED_CLASS_NAME);
-    this._refPaginationLabelTooltip.removeAttribute('data-flow');
-    this._refPaginationLabelTooltip.removeAttribute('data-tooltip');
-  }
   disconnectedCallback() {
-    var _a, _b;
-    (_a = this._headerOverflowWatcher) === null || _a === void 0 ? void 0 : _a.destroy();
-    (_b = this._gridController) === null || _b === void 0 ? void 0 : _b.destroy();
+    var _a;
+    (_a = this._gridController) === null || _a === void 0 ? void 0 : _a.destroy();
     this.removeShortcuts();
   }
   connectedCallback() {
@@ -66900,8 +66967,6 @@ const EzGrid = class {
     if (this.dataUnit && this._showSelectionCounter) {
       this.setSelection(this.dataUnit.getSelectionInfo());
     }
-    if (this.paginationCounterMode === 'auto')
-      this._initHeaderOverflowWatcher();
   }
   getDataSource() {
     if (!this.columnfilterDataSource) {
@@ -66913,7 +66978,7 @@ const EzGrid = class {
     if (this.mode === "simple") {
       return true;
     }
-    return !this._hasLeftButtons && !this._paginationInfo;
+    return !this._hasLeftButtons;
   }
   resolveLeftHeaderClass() {
     if (this.paginationCounterMode == 'show')
@@ -66938,7 +67003,7 @@ const EzGrid = class {
         return;
       const { currentPage } = this._paginationInfo;
       if (currentPage > 0) {
-        this.previousPage();
+        this._refGridPagination.previousPage();
       }
     }, { description: this.i18n("ez-grid.previousPage"), element: this._element })
       .bind("ctrl + alt + ArrowRight", () => {
@@ -66946,7 +67011,7 @@ const EzGrid = class {
         return;
       const { hasMore } = this._paginationInfo;
       if (hasMore) {
-        this.nextPage();
+        this._refGridPagination.nextPage();
       }
     }, { description: this.i18n("ez-grid.nextPage"), element: this._element });
     if (this.useSearchColumn) {
@@ -66999,16 +67064,14 @@ const EzGrid = class {
         'ez-box ez-padding--small grid-header': true,
         'outline-mode': this.outlineMode,
         'shadow-mode': !this.outlineMode && !this.hideHeader(),
-      }, tabindex: "0" }, index$1.h("filter-column", { class: "grid-header__popover", noHeaderTaskBar: !this._hasLeftButtons, dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: this.hideHeader(), ref: (element) => (this._filterColumn = element) }), index$1.h("div", { class: "grid-header__position" }, index$1.h("div", { class: `grid-header__container grid-header__left-container ${this.resolveLeftHeaderClass()}` }, index$1.h("slot", { name: "leftButtons" })), this.getPaginationControl())), index$1.h("ez-popover", { ref: elem => (this._ezPopoverSearchColumn = elem), overlayType: "none" }, this.renderFieldSearchColumn()), index$1.h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter  ez-elevation--4
+      }, tabindex: "0" }, index$1.h("filter-column", { class: "grid-header__popover", noHeaderTaskBar: !this._hasLeftButtons, dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: this.hideHeader(), ref: (element) => (this._filterColumn = element) }), index$1.h("div", { class: "grid-header__position" }, index$1.h("div", { class: `grid-header__container grid-header__left-container ${this.resolveLeftHeaderClass()}` }, index$1.h("slot", { name: "leftButtons" })))), index$1.h("ez-popover", { ref: elem => (this._ezPopoverSearchColumn = elem), overlayType: "none" }, this.renderFieldSearchColumn()), index$1.h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter  ez-elevation--4
           ${this._showSelectionCounter ? 'grid__selection-counter--opened' : ''}
-        ` }, index$1.h(SelectionCounter, { selectionCount: this._selectionCount, currentPageSelected: this._currentPageSelected, paginationInfo: this._paginationInfo, canSelectAll: (_a = this.selectionToastConfig) === null || _a === void 0 ? void 0 : _a.canSelectAll, allRecordSelected: this._isAllSelection, i18n: this.i18n, onSelectAll: () => this.onSelectAllRecords(), onSelectPage: () => this.onSelectPageRecords(), onClearAll: () => this.onClearSelectedRecords(), onClose: () => (this._showSelectionCounter = false) })), index$1.h("div", { class: "grid__footer" }, index$1.h("slot", { name: "footer" }))));
+        ` }, index$1.h(SelectionCounter, { selectionCount: this._selectionCount, currentPageSelected: this._currentPageSelected, paginationInfo: this._paginationInfo, canSelectAll: (_a = this.selectionToastConfig) === null || _a === void 0 ? void 0 : _a.canSelectAll, allRecordSelected: this._isAllSelection, i18n: this.i18n, onSelectAll: () => this.onSelectAllRecords(), onSelectPage: () => this.onSelectPageRecords(), onClearAll: () => this.onClearSelectedRecords(), onClose: () => (this._showSelectionCounter = false) })), index$1.h("div", { class: "grid__footer" }, (this.mode !== "simple" && !this.hidePagination) && (index$1.h("ez-grid-pagination", { class: `ez-flex ez-flex--content-end`, ref: ref => (this._refGridPagination = ref), dataUnit: this.dataUnit, paginationCounterMode: this.paginationCounterMode, onPageChange: () => this.handlePageChange() })), index$1.h("slot", { name: "footer" }))));
   }
   static get assetsDirs() { return ["../assets"]; }
   get _element() { return index$1.getElement(this); }
   static get watchers() { return {
     "config": ["observeConfig"],
-    "_paginationInfo": ["updatePaginationTooltip"],
-    "paginationCounterMode": ["observePaginationCounterMode"],
     "mode": ["observeModeChange"]
   }; }
 };

package/dist/cjs/ez-guide-navigator.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9e5554cb.js');
+const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 const EzScrollDirection = require('./EzScrollDirection-b2c99895.js');
-const index$1 = require('./index-350d0fa0.js');
+const index$1 = require('./index-9739c242.js');
 
 const ezGuideNavigatorCss = ":host{--ez-guide-navigator--padding-left:var(--space--large);--ez-guide-navigator--padding-right:var(--space--small);--ez-guide-navigator--box-shadow:var(--shadow, 0px 0px 24px 0px #000);--ez-guide-navigator--background-color:var(--color--inverted);--ez-guide-navigator--border-radius:0px var(--border--radius-medium) var(--border--radius-medium) 0px;--ez-guide-navigator--actions-gap:var(--space--medium);--ez-guide-navigator--actions-margin:var(--space--large) 0 var(--space--medium);--ez-guide-navigator--actions-padding-right:calc(var(--space--medium, 12px) + var(--space--small, 6px))}.inverted{transform:rotate(180deg)}.ez-guide-navigator{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%;padding-left:var(--ez-guide-navigator--padding-left);padding-right:var(--ez-guide-navigator--padding-right);background-color:var(--ez-guide-navigator--background-color);-webkit-box-shadow:var(--ez-guide-navigator--box-shadow);box-shadow:var(--ez-guide-navigator--box-shadow);border-radius:var(--ez-guide-navigator--border-radius)}.ez-guide-navigator__actions{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--ez-guide-navigator--actions-gap);margin:var(--ez-guide-navigator--actions-margin);padding-right:var(--ez-guide-navigator--actions-padding-right)}.hidden{display:none}";