@sankhyalabs/ezui 0.0.0-feat-dev-KB-89808.2 → 0.0.0-feat-dev-KB-90064.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/cjs/ez-grid.cjs.entry.js +32 -12
  2. package/dist/collection/components/ez-grid/ez-grid.css +5 -1
  3. package/dist/collection/components/ez-grid/ez-grid.js +32 -12
  4. package/dist/custom-elements/index.js +32 -12
  5. package/dist/esm/ez-grid.entry.js +32 -12
  6. package/dist/ezui/ezui.esm.js +1 -1
  7. package/dist/ezui/{p-c2b73a3f.entry.js → p-e09514b6.entry.js} +1 -1
  8. package/dist/types/components/ez-grid/ez-grid.d.ts +3 -0
  9. package/package.json +4 -4
package/dist/cjs/ez-grid.cjs.entry.js CHANGED
@@ -66216,7 +66216,7 @@ class InMemoryFilterColumnDataSource {
66216
66216
  }
66217
66217
  }
66218
66218
 
66219
- 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)}}";
66219
+ 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)}}";
66220
66220
 
66221
66221
  const windowInstace = window;
66222
66222
  const matches = (text, filter) => {
@@ -66257,7 +66257,7 @@ const EzGrid = class {
66257
66257
  this.recordsValidator = undefined;
66258
66258
  this.canEdit = true;
66259
66259
  this.autoFocus = true;
66260
- this.paginationCounterMode = 'show';
66260
+ this.paginationCounterMode = 'auto';
66261
66261
  this.enableGridInsert = false;
66262
66262
  this.enableContinuousInsert = true;
66263
66263
  this.suppressCheckboxColumn = false;
@@ -66608,7 +66608,7 @@ const EzGrid = class {
66608
66608
  (_a = this._gridController) === null || _a === void 0 ? void 0 : _a.resetPaginationState();
66609
66609
  }
66610
66610
  resolvePaginationClassMode() {
66611
- if (this.paginationCounterMode == 'show')
66611
+ if (this.shouldPresentPaginationLabel())
66612
66612
  return "pagination-expanded";
66613
66613
  return "pagination-contracted";
66614
66614
  }
@@ -66634,7 +66634,10 @@ const EzGrid = class {
66634
66634
  if (!this._paginationInfo)
66635
66635
  return null;
66636
66636
  const { currentPage, hasMore } = this._paginationInfo;
66637
- 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" }))));
66637
+ 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" }))));
66638
+ }
66639
+ shouldPresentPaginationLabel() {
66640
+ return this.paginationCounterMode === 'show' || this.paginationCounterMode === 'auto';
66638
66641
  }
66639
66642
  componentDidLoad() {
66640
66643
  const _application = core.ApplicationContext.getContextValue("__SNK__APPLICATION__");
@@ -66683,8 +66686,6 @@ const EzGrid = class {
66683
66686
  this.setEvents();
66684
66687
  this.componentReady.emit();
66685
66688
  this._gridController.configFilterColumn(this._filterColumn);
66686
- if (this.paginationCounterMode === 'auto')
66687
- this._initHeaderOverflowWatcher();
66688
66689
  this.initKeyboardManager();
66689
66690
  }
66690
66691
  handlePaginationChange(selectFirstRecord, paginationInfo) {
@@ -66718,6 +66719,8 @@ const EzGrid = class {
66718
66719
  return this._getActualPageLabel() + this._getRemainingPageLabel();
66719
66720
  }
66720
66721
  _initHeaderOverflowWatcher() {
66722
+ var _a;
66723
+ (_a = this._headerOverflowWatcher) === null || _a === void 0 ? void 0 : _a.destroy();
66721
66724
  if (this._refPaginationControl)
66722
66725
  this._headerOverflowWatcher = new core.OverflowWatcher(this.buildOverFlowWatcherParams());
66723
66726
  }
@@ -66728,15 +66731,30 @@ const EzGrid = class {
66728
66731
  notOverFlow: ["grid-pagination-tooltip"]
66729
66732
  };
66730
66733
  }
66731
- handleOverFlow(elementsOverflow) {
66732
- if (!this._refPaginationLabel)
66734
+ handleOverFlow() {
66735
+ if (!this._refPaginationLabel || !this._refPaginationControl)
66733
66736
  return;
66734
- if (elementsOverflow.length > 0) {
66735
- this._hidePaginationDescription();
66736
- }
66737
- else {
66737
+ const controlWidth = this._refPaginationControl.clientWidth;
66738
+ const labelWidth = this._refPaginationLabel.scrollWidth;
66739
+ const buttonsElement = this._refPaginationControl.querySelector('#grid-pagination-tooltip');
66740
+ const buttonsWidth = (buttonsElement === null || buttonsElement === void 0 ? void 0 : buttonsElement.clientWidth) || 0;
66741
+ const totalMargins = this._getElementMargins(this._refPaginationLabel) + (buttonsElement ? this._getElementMargins(buttonsElement) : 0);
66742
+ const paginationWidthWithoutDescription = labelWidth + buttonsWidth + totalMargins;
66743
+ const paginationWidthWithDescription = paginationWidthWithoutDescription + this._getPaginationDescriptionWidth();
66744
+ if (controlWidth > paginationWidthWithDescription) {
66738
66745
  this._showPaginationDescription();
66739
66746
  }
66747
+ else if (controlWidth <= paginationWidthWithoutDescription) {
66748
+ this._hidePaginationDescription();
66749
+ }
66750
+ }
66751
+ _getPaginationDescriptionWidth() {
66752
+ var _a;
66753
+ return ((_a = this._refPaginationLabelTooltip) === null || _a === void 0 ? void 0 : _a.scrollWidth) || 0;
66754
+ }
66755
+ _getElementMargins(element) {
66756
+ const style = getComputedStyle(element);
66757
+ return parseFloat(style.marginLeft) + parseFloat(style.marginRight);
66740
66758
  }
66741
66759
  _hidePaginationDescription() {
66742
66760
  this._refPaginationLabel.classList.add(core.OVERFLOWED_CLASS_NAME);
@@ -66779,6 +66797,8 @@ const EzGrid = class {
66779
66797
  if (this.dataUnit && this._showSelectionCounter) {
66780
66798
  this.setSelection(this.dataUnit.getSelectionInfo());
66781
66799
  }
66800
+ if (this.paginationCounterMode === 'auto')
66801
+ this._initHeaderOverflowWatcher();
66782
66802
  }
66783
66803
  getDataSource() {
66784
66804
  if (!this.columnfilterDataSource) {
package/dist/collection/components/ez-grid/ez-grid.css CHANGED
@@ -89,6 +89,8 @@
89
89
  /*private*/
90
90
  display: flex;
91
91
  align-items: center;
92
+ flex-grow: 1;
93
+ flex-shrink: 1;
92
94
  }
93
95
 
94
96
  .grid-header__position {
@@ -143,6 +145,8 @@
143
145
  .grid-header__pagination{
144
146
  justify-content: flex-end;
145
147
  flex-wrap: nowrap;
148
+ flex-shrink: 1;
149
+ flex-grow: 1;
146
150
  }
147
151
 
148
152
  .grid-header__pagination-label {
@@ -163,7 +167,7 @@
163
167
  }
164
168
 
165
169
  .left__header-contracted {
166
- width: calc(100% - 100px);
170
+ width: auto;
167
171
  }
168
172
 
169
173
  .left__header-expanded{
package/dist/collection/components/ez-grid/ez-grid.js CHANGED
@@ -39,7 +39,7 @@ export class EzGrid {
39
39
  this.recordsValidator = undefined;
40
40
  this.canEdit = true;
41
41
  this.autoFocus = true;
42
- this.paginationCounterMode = 'show';
42
+ this.paginationCounterMode = 'auto';
43
43
  this.enableGridInsert = false;
44
44
  this.enableContinuousInsert = true;
45
45
  this.suppressCheckboxColumn = false;
@@ -390,7 +390,7 @@ export class EzGrid {
390
390
  (_a = this._gridController) === null || _a === void 0 ? void 0 : _a.resetPaginationState();
391
391
  }
392
392
  resolvePaginationClassMode() {
393
- if (this.paginationCounterMode == 'show')
393
+ if (this.shouldPresentPaginationLabel())
394
394
  return "pagination-expanded";
395
395
  return "pagination-contracted";
396
396
  }
@@ -416,7 +416,10 @@ export class EzGrid {
416
416
  if (!this._paginationInfo)
417
417
  return null;
418
418
  const { currentPage, hasMore } = this._paginationInfo;
419
- 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" }))));
419
+ 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" }))));
420
+ }
421
+ shouldPresentPaginationLabel() {
422
+ return this.paginationCounterMode === 'show' || this.paginationCounterMode === 'auto';
420
423
  }
421
424
  componentDidLoad() {
422
425
  const _application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
@@ -465,8 +468,6 @@ export class EzGrid {
465
468
  this.setEvents();
466
469
  this.componentReady.emit();
467
470
  this._gridController.configFilterColumn(this._filterColumn);
468
- if (this.paginationCounterMode === 'auto')
469
- this._initHeaderOverflowWatcher();
470
471
  this.initKeyboardManager();
471
472
  }
472
473
  handlePaginationChange(selectFirstRecord, paginationInfo) {
@@ -500,6 +501,8 @@ export class EzGrid {
500
501
  return this._getActualPageLabel() + this._getRemainingPageLabel();
501
502
  }
502
503
  _initHeaderOverflowWatcher() {
504
+ var _a;
505
+ (_a = this._headerOverflowWatcher) === null || _a === void 0 ? void 0 : _a.destroy();
503
506
  if (this._refPaginationControl)
504
507
  this._headerOverflowWatcher = new OverflowWatcher(this.buildOverFlowWatcherParams());
505
508
  }
@@ -510,15 +513,30 @@ export class EzGrid {
510
513
  notOverFlow: ["grid-pagination-tooltip"]
511
514
  };
512
515
  }
513
- handleOverFlow(elementsOverflow) {
514
- if (!this._refPaginationLabel)
516
+ handleOverFlow() {
517
+ if (!this._refPaginationLabel || !this._refPaginationControl)
515
518
  return;
516
- if (elementsOverflow.length > 0) {
517
- this._hidePaginationDescription();
518
- }
519
- else {
519
+ const controlWidth = this._refPaginationControl.clientWidth;
520
+ const labelWidth = this._refPaginationLabel.scrollWidth;
521
+ const buttonsElement = this._refPaginationControl.querySelector('#grid-pagination-tooltip');
522
+ const buttonsWidth = (buttonsElement === null || buttonsElement === void 0 ? void 0 : buttonsElement.clientWidth) || 0;
523
+ const totalMargins = this._getElementMargins(this._refPaginationLabel) + (buttonsElement ? this._getElementMargins(buttonsElement) : 0);
524
+ const paginationWidthWithoutDescription = labelWidth + buttonsWidth + totalMargins;
525
+ const paginationWidthWithDescription = paginationWidthWithoutDescription + this._getPaginationDescriptionWidth();
526
+ if (controlWidth > paginationWidthWithDescription) {
520
527
  this._showPaginationDescription();
521
528
  }
529
+ else if (controlWidth <= paginationWidthWithoutDescription) {
530
+ this._hidePaginationDescription();
531
+ }
532
+ }
533
+ _getPaginationDescriptionWidth() {
534
+ var _a;
535
+ return ((_a = this._refPaginationLabelTooltip) === null || _a === void 0 ? void 0 : _a.scrollWidth) || 0;
536
+ }
537
+ _getElementMargins(element) {
538
+ const style = getComputedStyle(element);
539
+ return parseFloat(style.marginLeft) + parseFloat(style.marginRight);
522
540
  }
523
541
  _hidePaginationDescription() {
524
542
  this._refPaginationLabel.classList.add(OVERFLOWED_CLASS_NAME);
@@ -561,6 +579,8 @@ export class EzGrid {
561
579
  if (this.dataUnit && this._showSelectionCounter) {
562
580
  this.setSelection(this.dataUnit.getSelectionInfo());
563
581
  }
582
+ if (this.paginationCounterMode === 'auto')
583
+ this._initHeaderOverflowWatcher();
564
584
  }
565
585
  getDataSource() {
566
586
  if (!this.columnfilterDataSource) {
@@ -938,7 +958,7 @@ export class EzGrid {
938
958
  },
939
959
  "attribute": "pagination-counter-mode",
940
960
  "reflect": false,
941
- "defaultValue": "'show'"
961
+ "defaultValue": "'auto'"
942
962
  },
943
963
  "enableGridInsert": {
944
964
  "type": "boolean",
package/dist/custom-elements/index.js CHANGED
@@ -72578,7 +72578,7 @@ class InMemoryFilterColumnDataSource {
72578
72578
  }
72579
72579
  }
72580
72580
 
72581
- 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)}}";
72581
+ 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)}}";
72582
72582
 
72583
72583
  const windowInstace$1 = window;
72584
72584
  const matches = (text, filter) => {
@@ -72620,7 +72620,7 @@ const EzGrid$1 = class extends HTMLElement$1 {
72620
72620
  this.recordsValidator = undefined;
72621
72621
  this.canEdit = true;
72622
72622
  this.autoFocus = true;
72623
- this.paginationCounterMode = 'show';
72623
+ this.paginationCounterMode = 'auto';
72624
72624
  this.enableGridInsert = false;
72625
72625
  this.enableContinuousInsert = true;
72626
72626
  this.suppressCheckboxColumn = false;
@@ -72971,7 +72971,7 @@ const EzGrid$1 = class extends HTMLElement$1 {
72971
72971
  (_a = this._gridController) === null || _a === void 0 ? void 0 : _a.resetPaginationState();
72972
72972
  }
72973
72973
  resolvePaginationClassMode() {
72974
- if (this.paginationCounterMode == 'show')
72974
+ if (this.shouldPresentPaginationLabel())
72975
72975
  return "pagination-expanded";
72976
72976
  return "pagination-contracted";
72977
72977
  }
@@ -72997,7 +72997,10 @@ const EzGrid$1 = class extends HTMLElement$1 {
72997
72997
  if (!this._paginationInfo)
72998
72998
  return null;
72999
72999
  const { currentPage, hasMore } = this._paginationInfo;
73000
- 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" }))));
73000
+ 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" }))));
73001
+ }
73002
+ shouldPresentPaginationLabel() {
73003
+ return this.paginationCounterMode === 'show' || this.paginationCounterMode === 'auto';
73001
73004
  }
73002
73005
  componentDidLoad() {
73003
73006
  const _application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
@@ -73046,8 +73049,6 @@ const EzGrid$1 = class extends HTMLElement$1 {
73046
73049
  this.setEvents();
73047
73050
  this.componentReady.emit();
73048
73051
  this._gridController.configFilterColumn(this._filterColumn);
73049
- if (this.paginationCounterMode === 'auto')
73050
- this._initHeaderOverflowWatcher();
73051
73052
  this.initKeyboardManager();
73052
73053
  }
73053
73054
  handlePaginationChange(selectFirstRecord, paginationInfo) {
@@ -73081,6 +73082,8 @@ const EzGrid$1 = class extends HTMLElement$1 {
73081
73082
  return this._getActualPageLabel() + this._getRemainingPageLabel();
73082
73083
  }
73083
73084
  _initHeaderOverflowWatcher() {
73085
+ var _a;
73086
+ (_a = this._headerOverflowWatcher) === null || _a === void 0 ? void 0 : _a.destroy();
73084
73087
  if (this._refPaginationControl)
73085
73088
  this._headerOverflowWatcher = new OverflowWatcher(this.buildOverFlowWatcherParams());
73086
73089
  }
@@ -73091,15 +73094,30 @@ const EzGrid$1 = class extends HTMLElement$1 {
73091
73094
  notOverFlow: ["grid-pagination-tooltip"]
73092
73095
  };
73093
73096
  }
73094
- handleOverFlow(elementsOverflow) {
73095
- if (!this._refPaginationLabel)
73097
+ handleOverFlow() {
73098
+ if (!this._refPaginationLabel || !this._refPaginationControl)
73096
73099
  return;
73097
- if (elementsOverflow.length > 0) {
73098
- this._hidePaginationDescription();
73099
- }
73100
- else {
73100
+ const controlWidth = this._refPaginationControl.clientWidth;
73101
+ const labelWidth = this._refPaginationLabel.scrollWidth;
73102
+ const buttonsElement = this._refPaginationControl.querySelector('#grid-pagination-tooltip');
73103
+ const buttonsWidth = (buttonsElement === null || buttonsElement === void 0 ? void 0 : buttonsElement.clientWidth) || 0;
73104
+ const totalMargins = this._getElementMargins(this._refPaginationLabel) + (buttonsElement ? this._getElementMargins(buttonsElement) : 0);
73105
+ const paginationWidthWithoutDescription = labelWidth + buttonsWidth + totalMargins;
73106
+ const paginationWidthWithDescription = paginationWidthWithoutDescription + this._getPaginationDescriptionWidth();
73107
+ if (controlWidth > paginationWidthWithDescription) {
73101
73108
  this._showPaginationDescription();
73102
73109
  }
73110
+ else if (controlWidth <= paginationWidthWithoutDescription) {
73111
+ this._hidePaginationDescription();
73112
+ }
73113
+ }
73114
+ _getPaginationDescriptionWidth() {
73115
+ var _a;
73116
+ return ((_a = this._refPaginationLabelTooltip) === null || _a === void 0 ? void 0 : _a.scrollWidth) || 0;
73117
+ }
73118
+ _getElementMargins(element) {
73119
+ const style = getComputedStyle(element);
73120
+ return parseFloat(style.marginLeft) + parseFloat(style.marginRight);
73103
73121
  }
73104
73122
  _hidePaginationDescription() {
73105
73123
  this._refPaginationLabel.classList.add(OVERFLOWED_CLASS_NAME);
@@ -73142,6 +73160,8 @@ const EzGrid$1 = class extends HTMLElement$1 {
73142
73160
  if (this.dataUnit && this._showSelectionCounter) {
73143
73161
  this.setSelection(this.dataUnit.getSelectionInfo());
73144
73162
  }
73163
+ if (this.paginationCounterMode === 'auto')
73164
+ this._initHeaderOverflowWatcher();
73145
73165
  }
73146
73166
  getDataSource() {
73147
73167
  if (!this.columnfilterDataSource) {
package/dist/esm/ez-grid.entry.js CHANGED
@@ -66212,7 +66212,7 @@ class InMemoryFilterColumnDataSource {
66212
66212
  }
66213
66213
  }
66214
66214
 
66215
- 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)}}";
66215
+ 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)}}";
66216
66216
 
66217
66217
  const windowInstace = window;
66218
66218
  const matches = (text, filter) => {
@@ -66253,7 +66253,7 @@ const EzGrid = class {
66253
66253
  this.recordsValidator = undefined;
66254
66254
  this.canEdit = true;
66255
66255
  this.autoFocus = true;
66256
- this.paginationCounterMode = 'show';
66256
+ this.paginationCounterMode = 'auto';
66257
66257
  this.enableGridInsert = false;
66258
66258
  this.enableContinuousInsert = true;
66259
66259
  this.suppressCheckboxColumn = false;
@@ -66604,7 +66604,7 @@ const EzGrid = class {
66604
66604
  (_a = this._gridController) === null || _a === void 0 ? void 0 : _a.resetPaginationState();
66605
66605
  }
66606
66606
  resolvePaginationClassMode() {
66607
- if (this.paginationCounterMode == 'show')
66607
+ if (this.shouldPresentPaginationLabel())
66608
66608
  return "pagination-expanded";
66609
66609
  return "pagination-contracted";
66610
66610
  }
@@ -66630,7 +66630,10 @@ const EzGrid = class {
66630
66630
  if (!this._paginationInfo)
66631
66631
  return null;
66632
66632
  const { currentPage, hasMore } = this._paginationInfo;
66633
- 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" }))));
66633
+ 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" }))));
66634
+ }
66635
+ shouldPresentPaginationLabel() {
66636
+ return this.paginationCounterMode === 'show' || this.paginationCounterMode === 'auto';
66634
66637
  }
66635
66638
  componentDidLoad() {
66636
66639
  const _application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
@@ -66679,8 +66682,6 @@ const EzGrid = class {
66679
66682
  this.setEvents();
66680
66683
  this.componentReady.emit();
66681
66684
  this._gridController.configFilterColumn(this._filterColumn);
66682
- if (this.paginationCounterMode === 'auto')
66683
- this._initHeaderOverflowWatcher();
66684
66685
  this.initKeyboardManager();
66685
66686
  }
66686
66687
  handlePaginationChange(selectFirstRecord, paginationInfo) {
@@ -66714,6 +66715,8 @@ const EzGrid = class {
66714
66715
  return this._getActualPageLabel() + this._getRemainingPageLabel();
66715
66716
  }
66716
66717
  _initHeaderOverflowWatcher() {
66718
+ var _a;
66719
+ (_a = this._headerOverflowWatcher) === null || _a === void 0 ? void 0 : _a.destroy();
66717
66720
  if (this._refPaginationControl)
66718
66721
  this._headerOverflowWatcher = new OverflowWatcher(this.buildOverFlowWatcherParams());
66719
66722
  }
@@ -66724,15 +66727,30 @@ const EzGrid = class {
66724
66727
  notOverFlow: ["grid-pagination-tooltip"]
66725
66728
  };
66726
66729
  }
66727
- handleOverFlow(elementsOverflow) {
66728
- if (!this._refPaginationLabel)
66730
+ handleOverFlow() {
66731
+ if (!this._refPaginationLabel || !this._refPaginationControl)
66729
66732
  return;
66730
- if (elementsOverflow.length > 0) {
66731
- this._hidePaginationDescription();
66732
- }
66733
- else {
66733
+ const controlWidth = this._refPaginationControl.clientWidth;
66734
+ const labelWidth = this._refPaginationLabel.scrollWidth;
66735
+ const buttonsElement = this._refPaginationControl.querySelector('#grid-pagination-tooltip');
66736
+ const buttonsWidth = (buttonsElement === null || buttonsElement === void 0 ? void 0 : buttonsElement.clientWidth) || 0;
66737
+ const totalMargins = this._getElementMargins(this._refPaginationLabel) + (buttonsElement ? this._getElementMargins(buttonsElement) : 0);
66738
+ const paginationWidthWithoutDescription = labelWidth + buttonsWidth + totalMargins;
66739
+ const paginationWidthWithDescription = paginationWidthWithoutDescription + this._getPaginationDescriptionWidth();
66740
+ if (controlWidth > paginationWidthWithDescription) {
66734
66741
  this._showPaginationDescription();
66735
66742
  }
66743
+ else if (controlWidth <= paginationWidthWithoutDescription) {
66744
+ this._hidePaginationDescription();
66745
+ }
66746
+ }
66747
+ _getPaginationDescriptionWidth() {
66748
+ var _a;
66749
+ return ((_a = this._refPaginationLabelTooltip) === null || _a === void 0 ? void 0 : _a.scrollWidth) || 0;
66750
+ }
66751
+ _getElementMargins(element) {
66752
+ const style = getComputedStyle(element);
66753
+ return parseFloat(style.marginLeft) + parseFloat(style.marginRight);
66736
66754
  }
66737
66755
  _hidePaginationDescription() {
66738
66756
  this._refPaginationLabel.classList.add(OVERFLOWED_CLASS_NAME);
@@ -66775,6 +66793,8 @@ const EzGrid = class {
66775
66793
  if (this.dataUnit && this._showSelectionCounter) {
66776
66794
  this.setSelection(this.dataUnit.getSelectionInfo());
66777
66795
  }
66796
+ if (this.paginationCounterMode === 'auto')
66797
+ this._initHeaderOverflowWatcher();
66778
66798
  }
66779
66799
  getDataSource() {
66780
66800
  if (!this.columnfilterDataSource) {