@sankhyalabs/ezui 7.2.0 → 7.3.0

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

@@ -1,16 +1,15 @@
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-baa5e267.js';
-import { Action, DataUnit, ObjectUtils as ObjectUtils$1, UserInterface, HTMLBuilder, ApplicationContext, StringUtils as StringUtils$1, LockManager, LockManagerOperation, DataType, NumberUtils as NumberUtils$1, MaskFormatter, SortMode, ElementIDUtils, ColumnFilterManager as ColumnFilterManager$1, DateUtils as DateUtils$1, ArrayUtils as ArrayUtils$1, FieldComparator, JSUtils, KeyboardManager } from '@sankhyalabs/core';
+import { Action, DataUnit, ObjectUtils as ObjectUtils$1, UserInterface, HTMLBuilder, ApplicationContext, StringUtils as StringUtils$1, LockManager, LockManagerOperation, DataType, NumberUtils as NumberUtils$1, MaskFormatter, SortMode, ElementIDUtils, ColumnFilterManager as ColumnFilterManager$1, DateUtils as DateUtils$1, ArrayUtils as ArrayUtils$1, FieldComparator, JSUtils, OverflowWatcher, OVERFLOWED_CLASS_NAME, KeyboardManager } from '@sankhyalabs/core';
 import { SelectionMode } from '@sankhyalabs/core/dist/dataunit/DataUnit';
-import { A as ApplicationUtils } from './ApplicationUtils-29d2709c.js';
+import { A as ApplicationUtils } from './ApplicationUtils-1569f757.js';
 import './DialogType-54a62731.js';
 import './CheckMode-bdb2ec19.js';
-import { g as getI18n, i as initI18n } from './index-b5a15d4b.js';
-import { C as CustomEditorSource, a as CustomRenderSource } from './types-6f6b2650.js';
-import './FormLayout-bda67973.js';
-import { b as buildFieldMetadata, R as RecordValidationProcessor, D as DataBinder, S as SHORTCUT_SEARCH_FIELD, f as focusOnFieldSerch, c as SEARCH_FIELD_FULL_WIDTH, a as buildFieldSearch } from './search-column-9414ad22.js';
+import { g as getI18n, i as initI18n } from './index-41363fa6.js';
+import { C as CustomEditorSource, a as CustomRenderSource } from './FormLayout-071d324c.js';
+import { b as buildFieldMetadata, R as RecordValidationProcessor, D as DataBinder, S as SHORTCUT_SEARCH_FIELD, f as focusOnFieldSerch, c as SEARCH_FIELD_FULL_WIDTH, a as buildFieldSearch } from './search-column-c20d2b01.js';
 import { D as DISTINCT_FILTER_NAME_PREFIX, E as EZ_GRID_LOADING_SOURCE, P as PRESENTATION_COL_ID_PROP_NAME, a as PRESENTATION_FROM_COL_PROP_NAME } from './constants-3fabe81e.js';
 import { F as FocusResolver } from './FocusResolver-1ccbf850.js';
-import { p as purify } from './purify-ff423562.js';
+import { p as purify } from './purify-055bfb9f.js';
 import './_commonjsHelpers-9943807e.js';
 
 /**
@@ -49664,23 +49663,13 @@ 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,
-              aggFunc: f['aggFunc']
-            };
+            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 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);
@@ -64178,54 +64167,6 @@ 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 = {
-  [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,
-};
-
 class AgGridController {
   configFilterColumn(filterColumn) {
     this._filterColumn = filterColumn;
@@ -64251,13 +64192,12 @@ 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 = 8;
+    this.DEFAULT_FONT_SIZE = 14;
     this.DEFAULT_FONT_SIZE_HTML5 = 32;
-    this.DEFAULT_ICON_SIZE = 40;
-    this.DEFAULT_MAX_SIZE = 300;
+    this.DEFAULT_ICON_SIZE = 12;
+    this.DEFAULT_MAX_SIZE = 200;
     this.MULTI_VALUES_PROP = '__multiValues';
     this._menuItems = [];
     this._idAttribName = '__record__id__';
@@ -64268,9 +64208,6 @@ class AgGridController {
     this._gridShowDom = false;
     this.peddingExecutionsOnGridShow = [];
     this._lastColsConfig = undefined;
-    this._pinnedBottomDebounceTimer = null;
-    this._pinnedBottomDebounceDelay = 150;
-    this._pinnedBottomPendingArgs = null;
     ModuleRegistry.registerModules([
       EnterpriseCoreModule,
       RangeSelectionModule,
@@ -64481,90 +64418,6 @@ 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 : [];
-  }
   processFormatterCellCallback(params) {
     const column = params.column.getColDef();
     if (typeof column.valueFormatter === 'function') {
@@ -64730,8 +64583,6 @@ 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;
@@ -65254,12 +65105,9 @@ 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',
@@ -65301,10 +65149,6 @@ 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 = purify.sanitize(params.value);
     params.colDef.cellRenderer = (cellParams) => {
@@ -65427,13 +65271,12 @@ 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: (_a = e['column']) === null || _a === void 0 ? void 0 : _a.colId, actualWidth: (_b = e['column']) === null || _b === void 0 ? void 0 : _b.actualWidth };
+        info['column'] = { colId: e['column'].colId, actualWidth: e['column'].actualWidth };
       }
       info['isUserChange'] = isUserChange;
       info['isElementResize'] = this.isElementResize(e);
@@ -65561,22 +65404,6 @@ 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;
@@ -65605,21 +65432,10 @@ 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;
-    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;
+    if ((field === null || field === void 0 ? void 0 : field.userInterface) === UserInterface.SEARCH) {
+      return this.DEFAULT_MAX_SIZE;
     }
-    return GRID_COLUMN_DEFAULT_WIDTHS[userInterface];
+    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;
@@ -65813,7 +65629,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;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 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 windowInstace = window;
 const matches = (text, filter) => {
@@ -65866,7 +65682,6 @@ const EzGrid = class {
     this.useSearchColumn = true;
     this.suppressHorizontalScroll = false;
     this.mode = "complete";
-    this.hidePagination = false;
   }
   /**
    * Aplica a definição de colunas.
@@ -66016,17 +65831,26 @@ 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;
@@ -66189,6 +66013,23 @@ const EzGrid = class {
       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) {
@@ -66208,6 +66049,38 @@ 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 (h("ez-popover", { ref: (element) => (this._cancelPaginationPopoverElement = element), "overlay-type": 'none', autoClose: false }, h("div", { class: 'cancel-pagination' }, h("ez-icon", { iconName: "sync", size: "x-large", class: "spin" }), 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 (h("div", { class: `grid-header__container grid-header__pagination ${this.resolvePaginationClassMode()}`, ref: ref => (this._refPaginationControl = ref) }, this.renderCancelPagination(), h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium", ref: (element) => (this._refPaginationLabel = element) }, h("span", { class: "grid-header__pagination-label" }, this.shouldPresentPaginationLabel() && h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, this._getActualPageLabel()), this.shouldPresentPaginationLabel() && this._getRemainingPageLabel())), h("div", { id: "grid-pagination-tooltip", ref: (element) => (this._refPaginationLabelTooltip = element), class: "ez-flex ez-margin-right--medium", title: `${this._getActualPageLabel()} ${this._getRemainingPageLabel()}` }, 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") }), 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 = ApplicationContext.getContextValue("__SNK__APPLICATION__");
     this.enableLockManagerLoadingComp = (!_application || (_application === null || _application === void 0 ? void 0 : _application.enableLockManagerLoadingApp)) ? this.enableLockManagerLoadingComp : false;
@@ -66272,9 +66145,76 @@ const EzGrid = class {
     }
     this._paginationInfo = paginationInfo;
   }
-  disconnectedCallback() {
+  _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 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;
-    (_a = this._gridController) === null || _a === void 0 ? void 0 : _a.destroy();
+    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(OVERFLOWED_CLASS_NAME);
+    this._refPaginationLabelTooltip.setAttribute('data-flow', 'bottom');
+    this._refPaginationLabelTooltip.setAttribute('data-tooltip', this._getPaginationTooltip());
+  }
+  ;
+  _showPaginationDescription() {
+    this._refPaginationLabel.classList.remove(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();
     this.removeShortcuts();
   }
   connectedCallback() {
@@ -66303,6 +66243,8 @@ const EzGrid = class {
     if (this.dataUnit && this._showSelectionCounter) {
       this.setSelection(this.dataUnit.getSelectionInfo());
     }
+    if (this.paginationCounterMode === 'auto')
+      this._initHeaderOverflowWatcher();
   }
   getDataSource() {
     if (!this.columnfilterDataSource) {
@@ -66314,7 +66256,7 @@ const EzGrid = class {
     if (this.mode === "simple") {
       return true;
     }
-    return !this._hasLeftButtons;
+    return !this._hasLeftButtons && !this._paginationInfo;
   }
   resolveLeftHeaderClass() {
     if (this.paginationCounterMode == 'show')
@@ -66339,7 +66281,7 @@ const EzGrid = class {
         return;
       const { currentPage } = this._paginationInfo;
       if (currentPage > 0) {
-        this._refGridPagination.previousPage();
+        this.previousPage();
       }
     }, { description: this.i18n("ez-grid.previousPage"), element: this._element })
       .bind("ctrl + alt + ArrowRight", () => {
@@ -66347,7 +66289,7 @@ const EzGrid = class {
         return;
       const { hasMore } = this._paginationInfo;
       if (hasMore) {
-        this._refGridPagination.nextPage();
+        this.nextPage();
       }
     }, { description: this.i18n("ez-grid.nextPage"), element: this._element });
     if (this.useSearchColumn) {
@@ -66400,14 +66342,16 @@ const EzGrid = class {
         'ez-box ez-padding--small grid-header': true,
         'outline-mode': this.outlineMode,
         'shadow-mode': !this.outlineMode && !this.hideHeader(),
-      }, tabindex: "0" }, h("filter-column", { class: "grid-header__popover", noHeaderTaskBar: !this._hasLeftButtons, dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: this.hideHeader(), ref: (element) => (this._filterColumn = element) }), h("div", { class: "grid-header__position" }, h("div", { class: `grid-header__container grid-header__left-container ${this.resolveLeftHeaderClass()}` }, h("slot", { name: "leftButtons" })))), h("ez-popover", { ref: elem => (this._ezPopoverSearchColumn = elem), overlayType: "none" }, this.renderFieldSearchColumn()), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter  ez-elevation--4
+      }, tabindex: "0" }, h("filter-column", { class: "grid-header__popover", noHeaderTaskBar: !this._hasLeftButtons, dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: this.hideHeader(), ref: (element) => (this._filterColumn = element) }), h("div", { class: "grid-header__position" }, h("div", { class: `grid-header__container grid-header__left-container ${this.resolveLeftHeaderClass()}` }, h("slot", { name: "leftButtons" })), this.getPaginationControl())), h("ez-popover", { ref: elem => (this._ezPopoverSearchColumn = elem), overlayType: "none" }, this.renderFieldSearchColumn()), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter  ez-elevation--4
           ${this._showSelectionCounter ? 'grid__selection-counter--opened' : ''}
-        ` }, 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) })), h("div", { class: "grid__footer" }, (this.mode !== "simple" && !this.hidePagination) && (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() })), h("slot", { name: "footer" }))));
+        ` }, 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) })), h("div", { class: "grid__footer" }, h("slot", { name: "footer" }))));
   }
   static get assetsDirs() { return ["../assets"]; }
   get _element() { return getElement(this); }
   static get watchers() { return {
     "config": ["observeConfig"],
+    "_paginationInfo": ["updatePaginationTooltip"],
+    "paginationCounterMode": ["observePaginationCounterMode"],
     "mode": ["observeModeChange"]
   }; }
 };

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
 import { ElementIDUtils } from '@sankhyalabs/core';
 import { E as EzScrollDirection } from './EzScrollDirection-2df26c93.js';
-import { i as initI18n } from './index-b5a15d4b.js';
+import { i as initI18n } from './index-41363fa6.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}";