@sankhyalabs/ezui 5.22.0-dev.136 → 5.22.0-dev.138

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

@@ -66216,7 +66216,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}.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}.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:calc(100% - 100px)}.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;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) => {
@@ -66257,7 +66257,7 @@ const EzGrid = class {
     this.recordsValidator = undefined;
     this.canEdit = true;
     this.autoFocus = true;
-    this.paginationCounterMode = 'show';
+    this.paginationCounterMode = 'auto';
     this.enableGridInsert = false;
     this.enableContinuousInsert = true;
     this.suppressCheckboxColumn = false;
@@ -66572,16 +66572,20 @@ const EzGrid = class {
       core.ElementIDUtils.addIDInfo(this._refPaginationControl, 'pagination', dtInfo);
     }
   }
+  handlePageChange() {
+    this.resetPaginationState();
+    this._gridController.setFocusFirstRow();
+  }
   previousPage() {
     if (this.dataUnit) {
       this.dataUnit.previousPage()
-        .then(() => this.resetPaginationState());
+        .then(() => this.handlePageChange());
     }
   }
   nextPage() {
     if (this.dataUnit) {
       this.dataUnit.nextPage()
-        .then(() => this.resetPaginationState());
+        .then(() => this.handlePageChange());
     }
   }
   nextRecord() {
@@ -66604,7 +66608,7 @@ const EzGrid = class {
     (_a = this._gridController) === null || _a === void 0 ? void 0 : _a.resetPaginationState();
   }
   resolvePaginationClassMode() {
-    if (this.paginationCounterMode == 'show')
+    if (this.shouldPresentPaginationLabel())
       return "pagination-expanded";
     return "pagination-contracted";
   }
@@ -66630,7 +66634,10 @@ const EzGrid = class {
     if (!this._paginationInfo)
       return null;
     const { currentPage, hasMore } = this._paginationInfo;
-    return (index.h("div", { class: `grid-header__container grid-header__pagination ${this.resolvePaginationClassMode()}`, ref: ref => (this._refPaginationControl = ref) }, this.renderCancelPagination(), index.h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium", ref: (element) => (this._refPaginationLabel = element) }, index.h("span", { class: "grid-header__pagination-label" }, this.paginationCounterMode == 'show' && index.h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, this._getActualPageLabel()), this.paginationCounterMode == 'show' && this._getRemainingPageLabel())), index.h("div", { id: "grid-pagination-tooltip", ref: (element) => (this._refPaginationLabelTooltip = element), class: "ez-flex ez-margin-right--medium", title: `${this._getActualPageLabel()} ${this._getRemainingPageLabel()}` }, index.h("ez-button", { size: "small", class: "ez-margin-right--medium", iconName: "chevron-left", mode: "icon", enabled: currentPage > 0, onClick: () => this.previousPage(), label: "P\u00E1gina anterior" }), index.h("ez-button", { size: "small", iconName: "chevron-right", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" }))));
+    return (index.h("div", { class: `grid-header__container grid-header__pagination ${this.resolvePaginationClassMode()}`, ref: ref => (this._refPaginationControl = ref) }, this.renderCancelPagination(), index.h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium", ref: (element) => (this._refPaginationLabel = element) }, index.h("span", { class: "grid-header__pagination-label" }, this.shouldPresentPaginationLabel() && index.h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, this._getActualPageLabel()), this.shouldPresentPaginationLabel() && this._getRemainingPageLabel())), index.h("div", { id: "grid-pagination-tooltip", ref: (element) => (this._refPaginationLabelTooltip = element), class: "ez-flex ez-margin-right--medium", title: `${this._getActualPageLabel()} ${this._getRemainingPageLabel()}` }, index.h("ez-button", { size: "small", class: "ez-margin-right--medium", iconName: "chevron-left", mode: "icon", enabled: currentPage > 0, onClick: () => this.previousPage(), label: "P\u00E1gina anterior" }), index.h("ez-button", { size: "small", iconName: "chevron-right", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" }))));
+  }
+  shouldPresentPaginationLabel() {
+    return this.paginationCounterMode === 'show' || this.paginationCounterMode === 'auto';
   }
   componentDidLoad() {
     const _application = core.ApplicationContext.getContextValue("__SNK__APPLICATION__");
@@ -66679,8 +66686,6 @@ const EzGrid = class {
     this.setEvents();
     this.componentReady.emit();
     this._gridController.configFilterColumn(this._filterColumn);
-    if (this.paginationCounterMode === 'auto')
-      this._initHeaderOverflowWatcher();
     this.initKeyboardManager();
   }
   handlePaginationChange(selectFirstRecord, paginationInfo) {
@@ -66714,6 +66719,8 @@ const EzGrid = class {
     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());
   }
@@ -66724,15 +66731,30 @@ const EzGrid = class {
       notOverFlow: ["grid-pagination-tooltip"]
     };
   }
-  handleOverFlow(elementsOverflow) {
-    if (!this._refPaginationLabel)
+  handleOverFlow() {
+    if (!this._refPaginationLabel || !this._refPaginationControl)
       return;
-    if (elementsOverflow.length > 0) {
-      this._hidePaginationDescription();
-    }
-    else {
+    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);
@@ -66775,6 +66797,8 @@ const EzGrid = class {
     if (this.dataUnit && this._showSelectionCounter) {
       this.setSelection(this.dataUnit.getSelectionInfo());
     }
+    if (this.paginationCounterMode === 'auto')
+      this._initHeaderOverflowWatcher();
   }
   getDataSource() {
     if (!this.columnfilterDataSource) {

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

@@ -89,6 +89,8 @@
   /*private*/
   display: flex;
   align-items: center;
+  flex-grow: 1;
+  flex-shrink: 1;
 }
 
 .grid-header__position {
@@ -143,6 +145,8 @@
 .grid-header__pagination{
   justify-content: flex-end;
   flex-wrap: nowrap;
+  flex-shrink: 1;
+  flex-grow: 1;
 }
 
 .grid-header__pagination-label {
@@ -163,7 +167,7 @@
 }
 
 .left__header-contracted {
-  width: calc(100% - 100px);
+  width: auto;
 }
 
 .left__header-expanded{

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

@@ -39,7 +39,7 @@ export class EzGrid {
     this.recordsValidator = undefined;
     this.canEdit = true;
     this.autoFocus = true;
-    this.paginationCounterMode = 'show';
+    this.paginationCounterMode = 'auto';
     this.enableGridInsert = false;
     this.enableContinuousInsert = true;
     this.suppressCheckboxColumn = false;
@@ -354,16 +354,20 @@ export class EzGrid {
       ElementIDUtils.addIDInfo(this._refPaginationControl, 'pagination', dtInfo);
     }
   }
+  handlePageChange() {
+    this.resetPaginationState();
+    this._gridController.setFocusFirstRow();
+  }
   previousPage() {
     if (this.dataUnit) {
       this.dataUnit.previousPage()
-        .then(() => this.resetPaginationState());
+        .then(() => this.handlePageChange());
     }
   }
   nextPage() {
     if (this.dataUnit) {
       this.dataUnit.nextPage()
-        .then(() => this.resetPaginationState());
+        .then(() => this.handlePageChange());
     }
   }
   nextRecord() {
@@ -386,7 +390,7 @@ export class EzGrid {
     (_a = this._gridController) === null || _a === void 0 ? void 0 : _a.resetPaginationState();
   }
   resolvePaginationClassMode() {
-    if (this.paginationCounterMode == 'show')
+    if (this.shouldPresentPaginationLabel())
       return "pagination-expanded";
     return "pagination-contracted";
   }
@@ -412,7 +416,10 @@ export class EzGrid {
     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.paginationCounterMode == 'show' && h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, this._getActualPageLabel()), this.paginationCounterMode == 'show' && 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: "P\u00E1gina anterior" }), h("ez-button", { size: "small", iconName: "chevron-right", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" }))));
+    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: "P\u00E1gina anterior" }), h("ez-button", { size: "small", iconName: "chevron-right", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" }))));
+  }
+  shouldPresentPaginationLabel() {
+    return this.paginationCounterMode === 'show' || this.paginationCounterMode === 'auto';
   }
   componentDidLoad() {
     const _application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
@@ -461,8 +468,6 @@ export class EzGrid {
     this.setEvents();
     this.componentReady.emit();
     this._gridController.configFilterColumn(this._filterColumn);
-    if (this.paginationCounterMode === 'auto')
-      this._initHeaderOverflowWatcher();
     this.initKeyboardManager();
   }
   handlePaginationChange(selectFirstRecord, paginationInfo) {
@@ -496,6 +501,8 @@ export class EzGrid {
     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());
   }
@@ -506,15 +513,30 @@ export class EzGrid {
       notOverFlow: ["grid-pagination-tooltip"]
     };
   }
-  handleOverFlow(elementsOverflow) {
-    if (!this._refPaginationLabel)
+  handleOverFlow() {
+    if (!this._refPaginationLabel || !this._refPaginationControl)
       return;
-    if (elementsOverflow.length > 0) {
-      this._hidePaginationDescription();
-    }
-    else {
+    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(OVERFLOWED_CLASS_NAME);
@@ -557,6 +579,8 @@ export class EzGrid {
     if (this.dataUnit && this._showSelectionCounter) {
       this.setSelection(this.dataUnit.getSelectionInfo());
     }
+    if (this.paginationCounterMode === 'auto')
+      this._initHeaderOverflowWatcher();
   }
   getDataSource() {
     if (!this.columnfilterDataSource) {
@@ -934,7 +958,7 @@ export class EzGrid {
         },
         "attribute": "pagination-counter-mode",
         "reflect": false,
-        "defaultValue": "'show'"
+        "defaultValue": "'auto'"
       },
       "enableGridInsert": {
         "type": "boolean",

package/dist/custom-elements/index.js

@@ -72533,7 +72533,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}.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}.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:calc(100% - 100px)}.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;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$1 = window;
 const matches = (text, filter) => {
@@ -72575,7 +72575,7 @@ const EzGrid$1 = class extends HTMLElement$1 {
     this.recordsValidator = undefined;
     this.canEdit = true;
     this.autoFocus = true;
-    this.paginationCounterMode = 'show';
+    this.paginationCounterMode = 'auto';
     this.enableGridInsert = false;
     this.enableContinuousInsert = true;
     this.suppressCheckboxColumn = false;
@@ -72890,16 +72890,20 @@ const EzGrid$1 = class extends HTMLElement$1 {
       ElementIDUtils.addIDInfo(this._refPaginationControl, 'pagination', dtInfo);
     }
   }
+  handlePageChange() {
+    this.resetPaginationState();
+    this._gridController.setFocusFirstRow();
+  }
   previousPage() {
     if (this.dataUnit) {
       this.dataUnit.previousPage()
-        .then(() => this.resetPaginationState());
+        .then(() => this.handlePageChange());
     }
   }
   nextPage() {
     if (this.dataUnit) {
       this.dataUnit.nextPage()
-        .then(() => this.resetPaginationState());
+        .then(() => this.handlePageChange());
     }
   }
   nextRecord() {
@@ -72922,7 +72926,7 @@ const EzGrid$1 = class extends HTMLElement$1 {
     (_a = this._gridController) === null || _a === void 0 ? void 0 : _a.resetPaginationState();
   }
   resolvePaginationClassMode() {
-    if (this.paginationCounterMode == 'show')
+    if (this.shouldPresentPaginationLabel())
       return "pagination-expanded";
     return "pagination-contracted";
   }
@@ -72948,7 +72952,10 @@ const EzGrid$1 = class extends HTMLElement$1 {
     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.paginationCounterMode == 'show' && h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, this._getActualPageLabel()), this.paginationCounterMode == 'show' && 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: "P\u00E1gina anterior" }), h("ez-button", { size: "small", iconName: "chevron-right", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" }))));
+    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: "P\u00E1gina anterior" }), h("ez-button", { size: "small", iconName: "chevron-right", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" }))));
+  }
+  shouldPresentPaginationLabel() {
+    return this.paginationCounterMode === 'show' || this.paginationCounterMode === 'auto';
   }
   componentDidLoad() {
     const _application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
@@ -72997,8 +73004,6 @@ const EzGrid$1 = class extends HTMLElement$1 {
     this.setEvents();
     this.componentReady.emit();
     this._gridController.configFilterColumn(this._filterColumn);
-    if (this.paginationCounterMode === 'auto')
-      this._initHeaderOverflowWatcher();
     this.initKeyboardManager();
   }
   handlePaginationChange(selectFirstRecord, paginationInfo) {
@@ -73032,6 +73037,8 @@ const EzGrid$1 = class extends HTMLElement$1 {
     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());
   }
@@ -73042,15 +73049,30 @@ const EzGrid$1 = class extends HTMLElement$1 {
       notOverFlow: ["grid-pagination-tooltip"]
     };
   }
-  handleOverFlow(elementsOverflow) {
-    if (!this._refPaginationLabel)
+  handleOverFlow() {
+    if (!this._refPaginationLabel || !this._refPaginationControl)
       return;
-    if (elementsOverflow.length > 0) {
-      this._hidePaginationDescription();
-    }
-    else {
+    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(OVERFLOWED_CLASS_NAME);
@@ -73093,6 +73115,8 @@ const EzGrid$1 = class extends HTMLElement$1 {
     if (this.dataUnit && this._showSelectionCounter) {
       this.setSelection(this.dataUnit.getSelectionInfo());
     }
+    if (this.paginationCounterMode === 'auto')
+      this._initHeaderOverflowWatcher();
   }
   getDataSource() {
     if (!this.columnfilterDataSource) {

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

@@ -66212,7 +66212,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}.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}.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:calc(100% - 100px)}.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;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) => {
@@ -66253,7 +66253,7 @@ const EzGrid = class {
     this.recordsValidator = undefined;
     this.canEdit = true;
     this.autoFocus = true;
-    this.paginationCounterMode = 'show';
+    this.paginationCounterMode = 'auto';
     this.enableGridInsert = false;
     this.enableContinuousInsert = true;
     this.suppressCheckboxColumn = false;
@@ -66568,16 +66568,20 @@ const EzGrid = class {
       ElementIDUtils.addIDInfo(this._refPaginationControl, 'pagination', dtInfo);
     }
   }
+  handlePageChange() {
+    this.resetPaginationState();
+    this._gridController.setFocusFirstRow();
+  }
   previousPage() {
     if (this.dataUnit) {
       this.dataUnit.previousPage()
-        .then(() => this.resetPaginationState());
+        .then(() => this.handlePageChange());
     }
   }
   nextPage() {
     if (this.dataUnit) {
       this.dataUnit.nextPage()
-        .then(() => this.resetPaginationState());
+        .then(() => this.handlePageChange());
     }
   }
   nextRecord() {
@@ -66600,7 +66604,7 @@ const EzGrid = class {
     (_a = this._gridController) === null || _a === void 0 ? void 0 : _a.resetPaginationState();
   }
   resolvePaginationClassMode() {
-    if (this.paginationCounterMode == 'show')
+    if (this.shouldPresentPaginationLabel())
       return "pagination-expanded";
     return "pagination-contracted";
   }
@@ -66626,7 +66630,10 @@ const EzGrid = class {
     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.paginationCounterMode == 'show' && h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, this._getActualPageLabel()), this.paginationCounterMode == 'show' && 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: "P\u00E1gina anterior" }), h("ez-button", { size: "small", iconName: "chevron-right", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" }))));
+    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: "P\u00E1gina anterior" }), h("ez-button", { size: "small", iconName: "chevron-right", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" }))));
+  }
+  shouldPresentPaginationLabel() {
+    return this.paginationCounterMode === 'show' || this.paginationCounterMode === 'auto';
   }
   componentDidLoad() {
     const _application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
@@ -66675,8 +66682,6 @@ const EzGrid = class {
     this.setEvents();
     this.componentReady.emit();
     this._gridController.configFilterColumn(this._filterColumn);
-    if (this.paginationCounterMode === 'auto')
-      this._initHeaderOverflowWatcher();
     this.initKeyboardManager();
   }
   handlePaginationChange(selectFirstRecord, paginationInfo) {
@@ -66710,6 +66715,8 @@ const EzGrid = class {
     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());
   }
@@ -66720,15 +66727,30 @@ const EzGrid = class {
       notOverFlow: ["grid-pagination-tooltip"]
     };
   }
-  handleOverFlow(elementsOverflow) {
-    if (!this._refPaginationLabel)
+  handleOverFlow() {
+    if (!this._refPaginationLabel || !this._refPaginationControl)
       return;
-    if (elementsOverflow.length > 0) {
-      this._hidePaginationDescription();
-    }
-    else {
+    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(OVERFLOWED_CLASS_NAME);
@@ -66771,6 +66793,8 @@ const EzGrid = class {
     if (this.dataUnit && this._showSelectionCounter) {
       this.setSelection(this.dataUnit.getSelectionInfo());
     }
+    if (this.paginationCounterMode === 'auto')
+      this._initHeaderOverflowWatcher();
   }
   getDataSource() {
     if (!this.columnfilterDataSource) {