@sankhyalabs/ezui 7.2.0-dev.1 → 7.2.0-dev.3

package/dist/collection/components/ez-classic-search-plus/ez-classic-search-plus.css

@@ -86,6 +86,9 @@
   /*@doc Define a largura da barra de rolagem do componente.*/
   --ez-classic-search__scrollbar--width: var(--space--medium, 12px);
 
+  /*@doc Define a cor do texto de ajuda do input.*/
+  --ez-classic-input--helptext-color: var(--color--ocean-green-1000, #00281D);
+
   /***************
      host style  
   ***************/
@@ -96,6 +99,7 @@
 
   /*public*/
   width: var(--ez-classic-search--width);
+  font-family: var(--font--pattern, Arial, sans-serif);
 }
 
 ez-icon {
@@ -403,4 +407,22 @@ ez-classic-input:hover .btn__close, ez-c-input:focus .btn__close {
   color: var(--color--red-600, #BD0025);
   margin-left: var(--space--4, 4px);
   vertical-align: top;
+}
+
+.ez-classic-search-plus__error-container {
+  display: flex;
+  flex-grow: 1;
+  gap: 3px;
+  overflow: hidden;
+}
+
+.ez-classic-search-plus__error-container span {
+  font-size: var(--font-size--xsmall, 10px);
+  line-height: var(--line-height--16, 16px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  animation: ez-helptext-fadein 0.3s ease;
+
+  /* public */
+  color: var(--ez-classic-input--helptext-color);
 }

package/dist/collection/components/ez-classic-search-plus/ez-classic-search-plus.js

@@ -381,7 +381,7 @@ export class EzClassicSearchPlus {
         "ez-classic-search-plus__code-input": !this.hideDescriptionInput,
         "ez-classic-search-plus__code-input-no-border": !this.hideDescriptionInput,
         "ez-classic-search-plus__code-input-full": this.hideDescriptionInput
-      }, "data-element-id": ElementIDUtils.getInternalIDInfo("codeInput"), "data-slave-mode": "true", enabled: !this.disableCodeInput && this.enabled, size: this.size, label: null, errorMessage: this.hideDescriptionInput ? this.errorMessage : "", value: this.codeValue, onFocusout: () => this.handleCodeInputFocusOut(), onFocus: () => this.handleCodeInputFocus(), leftIconName: "search", leftIconClickable: this.enabled, onIconClick: () => this.handleSearchClick(), onEzChange: (event) => event.stopPropagation() }), !this.hideDescriptionInput && (h("div", { class: "description-input-container" }, h("ez-classic-input", { ref: (elem) => this._textInputDescriptionValue = elem, tabIndex: -1, class: { "ez-classic-search-plus__text-input": true }, "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), "data-slave-mode": "true", enabled: !this.disableDescriptionInput && this.enabled, label: null, errorMessage: this.errorMessage, size: this.size, value: this.descriptionValue, onInput: (event) => this.handleTextInputChangeHandler(event), onFocus: () => this.handleDescriptionInputFocus(), rightIconName: canShowClearButton ? "close" : null, rightIconClickable: this.enabled, onIconClick: () => this.clearSearch(), onEzChange: (event) => event.stopPropagation() }), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this.el, autoClose: true, boxWidth: 'fit-content', overlayType: 'none', useAnchorSize: true, onEzVisibilityChange: (event) => this.handleOnEzVisibilityChange(event), "data-element-id": this.el.getAttribute("data-element-id") }, h("ez-classic-search-result-list", { ref: (ref) => this._classicSearchList = ref, showLoading: this.showLoading, visibleOptions: this.visibleOptions, value: this.value, showOptionValue: this.showOptionValue, onChangeValue: (evt) => this.handleSelectItem(evt) }))))))));
+      }, "data-element-id": ElementIDUtils.getInternalIDInfo("codeInput"), "data-slave-mode": "true", enabled: !this.disableCodeInput && this.enabled, size: this.size, label: null, errorMessage: this.hideDescriptionInput ? this.errorMessage : "", value: this.codeValue, onFocusout: () => this.handleCodeInputFocusOut(), onFocus: () => this.handleCodeInputFocus(), leftIconName: "search", leftIconClickable: this.enabled, onIconClick: () => this.handleSearchClick(), onEzChange: (event) => event.stopPropagation(), state: this.errorMessage && this.canShowError ? "error" : "default" }), !this.hideDescriptionInput && (h("div", { class: "description-input-container" }, h("ez-classic-input", { ref: (elem) => this._textInputDescriptionValue = elem, tabIndex: -1, class: { "ez-classic-search-plus__text-input": true }, "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), "data-slave-mode": "true", enabled: !this.disableDescriptionInput && this.enabled, label: null, size: this.size, value: this.descriptionValue, onInput: (event) => this.handleTextInputChangeHandler(event), onFocus: () => this.handleDescriptionInputFocus(), rightIconName: canShowClearButton ? "close" : null, rightIconClickable: this.enabled, onIconClick: () => this.clearSearch(), onEzChange: (event) => event.stopPropagation(), state: this.errorMessage && this.canShowError ? "error" : "default" }), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this.el, autoClose: true, boxWidth: 'fit-content', overlayType: 'none', useAnchorSize: true, onEzVisibilityChange: (event) => this.handleOnEzVisibilityChange(event), "data-element-id": this.el.getAttribute("data-element-id") }, h("ez-classic-search-result-list", { ref: (ref) => this._classicSearchList = ref, showLoading: this.showLoading, visibleOptions: this.visibleOptions, value: this.value, showOptionValue: this.showOptionValue, onChangeValue: (evt) => this.handleSelectItem(evt) }))))), h("div", { class: "ez-classic-search-plus__error-container" }, h("span", null, this.errorMessage)))));
   }
   static get is() { return "ez-classic-search-plus"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/ez-classic-time-input/ez-classic-time-input.js

@@ -161,7 +161,7 @@ export class EzClassicTimeInput {
       value: this._viewValue,
       enabled: this.enabled,
       label: this.label,
-      restrict: "0123456789:",
+      mask: this.showSeconds ? "##:##:##" : "##:##",
       onBlur: () => this.handleBlur(),
       onInput: () => this.handleInput(),
       errorMessage: this.errorMessage,
@@ -169,7 +169,8 @@ export class EzClassicTimeInput {
       size: this.size,
       canShowError: this.canShowError,
       alternativePlaceholder: this.alternativePlaceholder,
-      required: this.required
+      required: this.required,
+      onEzChange: (event) => event.stopPropagation()
     };
     return (h(Host, null, h("ez-classic-input", Object.assign({}, inputProps, { leftIconName: "timer-outline" }))));
   }

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

@@ -3,7 +3,7 @@
   /*@doc Define a posição do componente.*/
   --ez-dropdown--z-index: var(--more-visible, 2);
   /*@doc Define o espaçamento interno do componente.*/
-  --ez-dropdown--padding: var(--space--small, 6px);
+  --ez-dropdown--padding: var(--space--16, 16px);
   /*@doc Define a sombra externa do componente.*/
   --ez-dropdown--box-shadow: var(--shadow--medium, 0px 8px 24px rgba(0, 38, 111, 0.1));
   /*@doc Define o raio da borda do componente.*/

package/dist/collection/components/ez-empty-card/ez-empty-card.js

@@ -16,7 +16,7 @@ export class EzEmptyCard {
     }
   }
   render() {
-    const customStyleVars = Object.assign(Object.assign({}, (this.height ? { '--ez-empty-card--custom-height': `${this.height}px` } : {})), (this.width ? { '--ez-empty-card--custom-width': `${this.width}px` } : {}));
+    const customStyleVars = Object.assign(Object.assign({}, (this.height ? { '--ez-empty-card--custom-height': `${this.height}${typeof this.height == "number" ? 'px' : ''}` } : {})), (this.width ? { '--ez-empty-card--custom-width': `${this.width}${typeof this.width == "number" ? 'px' : ''}` } : {}));
     return (h(Host, { style: customStyleVars }, h("div", { ref: element => this._container = element, class: `card_container ${this.color}` }, h("slot", null))));
   }
   static get is() { return "ez-empty-card"; }
@@ -52,11 +52,11 @@ export class EzEmptyCard {
         "defaultValue": "\"default\""
       },
       "height": {
-        "type": "number",
+        "type": "any",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "number | string",
+          "resolved": "number | string",
           "references": {}
         },
         "required": false,
@@ -69,11 +69,11 @@ export class EzEmptyCard {
         "reflect": true
       },
       "width": {
-        "type": "number",
+        "type": "any",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "number | string",
+          "resolved": "number | string",
           "references": {}
         },
         "required": false,

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

@@ -15,6 +15,7 @@ import DOMPurify from 'dompurify';
 import { buildLocaleText } from './utils/buildLocaleText';
 import { agGridLicense } from '../../../../utils/ag-grid-license';
 import { resolveAggFunc } from './utils/AggFunctionResolver';
+import { GRID_COLUMN_DEFAULT_WIDTHS } from './gridColumnDefaultWidths';
 export default class AgGridController {
   configFilterColumn(filterColumn) {
     this._filterColumn = filterColumn;
@@ -43,10 +44,10 @@ export default class AgGridController {
     this.COLUMN_FOOTER_OPER = 'gridFooterOper';
     this.RECORD_ARCHIVE_COL_ID = '__RECORD_ARCHIVE__';
     this.BLOCK_LOAD_DEBOUNCE = 100;
-    this.DEFAULT_FONT_SIZE = 14;
+    this.DEFAULT_FONT_SIZE = 8;
     this.DEFAULT_FONT_SIZE_HTML5 = 32;
-    this.DEFAULT_ICON_SIZE = 12;
-    this.DEFAULT_MAX_SIZE = 200;
+    this.DEFAULT_ICON_SIZE = 40;
+    this.DEFAULT_MAX_SIZE = 300;
     this._menuItems = [];
     this._idAttribName = '__record__id__';
     this._gridConfig = [];
@@ -1032,9 +1033,11 @@ export default class AgGridController {
       tooltip = this._i18n('ez-grid.columnCantBeOrder');
     }
     const presentationFrom = (_d = source === null || source === void 0 ? void 0 : source.props) === null || _d === void 0 ? void 0 : _d.get(PRESENTATION_FROM_COL_PROP_NAME);
+    const initialWidth = this.getInitialColumnWidth(source.userInterface, source.label);
     return this._editionManager.configureColumn({
       headerName: source.label,
       field: source.name,
+      width: initialWidth,
       aggFunc: this.getAggFunc(source),
       sortable: propSortable,
       resizable: true,
@@ -1380,10 +1383,21 @@ export default class AgGridController {
     }
     const field = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getField(cfgColumn.name);
     const label = (_b = field === null || field === void 0 ? void 0 : field.label) !== null && _b !== void 0 ? _b : (_f = (_e = (_d = (_c = this._gridOptions) === null || _c === void 0 ? void 0 : _c.columnApi) === null || _d === void 0 ? void 0 : _d.getColumn(cfgColumn.name)) === null || _e === void 0 ? void 0 : _e.getColDef()) === null || _f === void 0 ? void 0 : _f.headerName;
-    if ((field === null || field === void 0 ? void 0 : field.userInterface) === UserInterface.SEARCH) {
-      return this.DEFAULT_MAX_SIZE;
+    return this.getInitialColumnWidth(field === null || field === void 0 ? void 0 : field.userInterface, label);
+  }
+  getInitialColumnWidth(userInterface, label) {
+    const columnWidthByLabel = this.getColumnWidthByLabel(label);
+    const defaultWidth = this.getDefaultWidthByUserInterface(userInterface);
+    if (!defaultWidth) {
+      return columnWidthByLabel;
+    }
+    return Math.max(defaultWidth, columnWidthByLabel);
+  }
+  getDefaultWidthByUserInterface(userInterface) {
+    if (!userInterface) {
+      return undefined;
     }
-    return this.getColumnWidthByLabel(label);
+    return GRID_COLUMN_DEFAULT_WIDTHS[userInterface];
   }
   getColumnWidthByLabel(label) {
     const labelSize = ((label === null || label === void 0 ? void 0 : label.length) || 0) * this.DEFAULT_FONT_SIZE + this.DEFAULT_ICON_SIZE;

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { ElementIDUtils, JSUtils, OverflowWatcher, OVERFLOWED_CLASS_NAME, StringUtils, ApplicationContext, KeyboardManager, } from '@sankhyalabs/core';
+import { ElementIDUtils, JSUtils, StringUtils, ApplicationContext, KeyboardManager, } from '@sankhyalabs/core';
 import { SelectionMode } from '@sankhyalabs/core/dist/dataunit/DataUnit';
 import { Host, h } from '@stencil/core';
 import { ApplicationUtils, buildFieldSearch } from '../../utils';
@@ -50,6 +50,7 @@ export class EzGrid {
     this.useSearchColumn = true;
     this.suppressHorizontalScroll = false;
     this.mode = "complete";
+    this.hidePagination = false;
   }
   /**
    * Aplica a definição de colunas.
@@ -199,26 +200,17 @@ export class EzGrid {
       return;
     this._gridController.stopEdit();
   }
+  /**
+   * Manipula a mudança de página da grid.
+   */
+  async handlePageChange() {
+    this.resetPaginationState();
+    this._gridController.setFocusFirstRow();
+    this.ezPageChangedChanged.emit();
+  }
   observeConfig(config) {
     this._gridController.setColumnsState(config === null || config === void 0 ? void 0 : config.columns);
   }
-  updatePaginationTooltip() {
-    this.handleShowCancelPagination();
-    if (!this._refPaginationLabelTooltip)
-      return;
-    const alreadyDefined = this._refPaginationLabelTooltip.getAttribute('data-tooltip');
-    if (alreadyDefined) {
-      this._refPaginationLabelTooltip.setAttribute('data-tooltip', this._getPaginationTooltip());
-    }
-  }
-  observePaginationCounterMode(newValue) {
-    if (newValue === 'hidden') {
-      this._hidePaginationDescription();
-    }
-    if (newValue === 'show') {
-      this._showPaginationDescription();
-    }
-  }
   async observeModeChange(newMode = this.mode) {
     if (newMode === "simple") {
       this.canEdit = false;
@@ -381,23 +373,6 @@ export class EzGrid {
       ElementIDUtils.addIDInfo(this._refPaginationControl, 'pagination', dtInfo);
     }
   }
-  handlePageChange() {
-    this.resetPaginationState();
-    this._gridController.setFocusFirstRow();
-    this.ezPageChangedChanged.emit();
-  }
-  previousPage() {
-    if (this.dataUnit) {
-      this.dataUnit.previousPage()
-        .then(() => this.handlePageChange());
-    }
-  }
-  nextPage() {
-    if (this.dataUnit) {
-      this.dataUnit.nextPage()
-        .then(() => this.handlePageChange());
-    }
-  }
   nextRecord() {
     if (this.dataUnit) {
       if (this.dataUnit.getSelectionInfo().records.length === 0) {
@@ -417,38 +392,6 @@ export class EzGrid {
     this._paginationChangedByKeyboard = false;
     (_a = this._gridController) === null || _a === void 0 ? void 0 : _a.resetPaginationState();
   }
-  resolvePaginationClassMode() {
-    if (this.shouldPresentPaginationLabel())
-      return "pagination-expanded";
-    return "pagination-contracted";
-  }
-  async handleCancelPagination() {
-    var _a;
-    this.dataUnit.cancelPagination = true;
-    await ((_a = this._cancelPaginationPopoverElement) === null || _a === void 0 ? void 0 : _a.hide());
-  }
-  renderCancelPagination() {
-    return (h("ez-popover", { ref: (element) => (this._cancelPaginationPopoverElement = element), "overlay-type": 'none', autoClose: false }, h("div", { class: 'cancel-pagination' }, h("ez-icon", { iconName: "sync", size: "x-large", class: "spin" }), h("span", { onClick: () => this.handleCancelPagination(), class: 'cancel-pagination-btn' }, this.i18n("ez-grid.cancelPagination")))));
-  }
-  handleShowCancelPagination() {
-    var _a, _b, _c;
-    if (!this._hasToShowCancelPagination()) {
-      (_a = this._cancelPaginationPopoverElement) === null || _a === void 0 ? void 0 : _a.hide();
-      return;
-    }
-    if ((_b = this._cancelPaginationPopoverElement) === null || _b === void 0 ? void 0 : _b.opened)
-      return;
-    (_c = this._cancelPaginationPopoverElement) === null || _c === void 0 ? void 0 : _c.show("15px");
-  }
-  getPaginationControl() {
-    if (!this._paginationInfo)
-      return null;
-    const { currentPage, hasMore } = this._paginationInfo;
-    return (h("div", { class: `grid-header__container grid-header__pagination ${this.resolvePaginationClassMode()}`, ref: ref => (this._refPaginationControl = ref) }, this.renderCancelPagination(), h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium", ref: (element) => (this._refPaginationLabel = element) }, h("span", { class: "grid-header__pagination-label" }, this.shouldPresentPaginationLabel() && h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, this._getActualPageLabel()), this.shouldPresentPaginationLabel() && this._getRemainingPageLabel())), h("div", { id: "grid-pagination-tooltip", ref: (element) => (this._refPaginationLabelTooltip = element), class: "ez-flex ez-margin-right--medium", title: `${this._getActualPageLabel()} ${this._getRemainingPageLabel()}` }, h("ez-button", { size: "small", class: "ez-margin-right--medium", iconName: "chevron-left", mode: "icon", enabled: currentPage > 0, onClick: () => this.previousPage(), label: this.i18n("ez-grid.previousPage") }), h("ez-button", { size: "small", iconName: "chevron-right", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: this.i18n("ez-grid.nextPage") }))));
-  }
-  shouldPresentPaginationLabel() {
-    return this.paginationCounterMode === 'show' || this.paginationCounterMode === 'auto';
-  }
   componentDidLoad() {
     const _application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
     this.enableLockManagerLoadingComp = (!_application || (_application === null || _application === void 0 ? void 0 : _application.enableLockManagerLoadingApp)) ? this.enableLockManagerLoadingComp : false;
@@ -513,76 +456,9 @@ export class EzGrid {
     }
     this._paginationInfo = paginationInfo;
   }
-  _getActualPageLabel() {
-    const { firstRecord, lastRecord } = this._paginationInfo;
-    return `${firstRecord}-${lastRecord}`;
-  }
-  _getRemainingPageLabel() {
-    const { total, count } = this._paginationInfo;
-    return `${total == undefined ? this.i18n("ez-grid.remainingPageLabel", { count: count + 1 }) : this.i18n("ez-grid.remainingTotalLabel", { total })}`;
-  }
-  _hasToShowCancelPagination() {
-    var _a;
-    const { total, count } = (_a = this._paginationInfo) !== null && _a !== void 0 ? _a : {};
-    const hasMore = (total === undefined);
-    return !this.dataUnit.cancelPagination && hasMore && count > this.dataUnit.pageSize;
-  }
-  _getPaginationTooltip() {
-    return this._getActualPageLabel() + this._getRemainingPageLabel();
-  }
-  _initHeaderOverflowWatcher() {
-    var _a;
-    (_a = this._headerOverflowWatcher) === null || _a === void 0 ? void 0 : _a.destroy();
-    if (this._refPaginationControl)
-      this._headerOverflowWatcher = new OverflowWatcher(this.buildOverFlowWatcherParams());
-  }
-  buildOverFlowWatcherParams() {
-    return {
-      element: this._refPaginationControl,
-      callback: this.handleOverFlow.bind(this),
-      notOverFlow: ["grid-pagination-tooltip"]
-    };
-  }
-  handleOverFlow() {
-    if (!this._refPaginationLabel || !this._refPaginationControl)
-      return;
-    const controlWidth = this._refPaginationControl.clientWidth;
-    const labelWidth = this._refPaginationLabel.scrollWidth;
-    const buttonsElement = this._refPaginationControl.querySelector('#grid-pagination-tooltip');
-    const buttonsWidth = (buttonsElement === null || buttonsElement === void 0 ? void 0 : buttonsElement.clientWidth) || 0;
-    const totalMargins = this._getElementMargins(this._refPaginationLabel) + (buttonsElement ? this._getElementMargins(buttonsElement) : 0);
-    const paginationWidthWithoutDescription = labelWidth + buttonsWidth + totalMargins;
-    const paginationWidthWithDescription = paginationWidthWithoutDescription + this._getPaginationDescriptionWidth();
-    if (controlWidth > paginationWidthWithDescription) {
-      this._showPaginationDescription();
-    }
-    else if (controlWidth <= paginationWidthWithoutDescription) {
-      this._hidePaginationDescription();
-    }
-  }
-  _getPaginationDescriptionWidth() {
-    var _a;
-    return ((_a = this._refPaginationLabelTooltip) === null || _a === void 0 ? void 0 : _a.scrollWidth) || 0;
-  }
-  _getElementMargins(element) {
-    const style = getComputedStyle(element);
-    return parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-  }
-  _hidePaginationDescription() {
-    this._refPaginationLabel.classList.add(OVERFLOWED_CLASS_NAME);
-    this._refPaginationLabelTooltip.setAttribute('data-flow', 'bottom');
-    this._refPaginationLabelTooltip.setAttribute('data-tooltip', this._getPaginationTooltip());
-  }
-  ;
-  _showPaginationDescription() {
-    this._refPaginationLabel.classList.remove(OVERFLOWED_CLASS_NAME);
-    this._refPaginationLabelTooltip.removeAttribute('data-flow');
-    this._refPaginationLabelTooltip.removeAttribute('data-tooltip');
-  }
   disconnectedCallback() {
-    var _a, _b;
-    (_a = this._headerOverflowWatcher) === null || _a === void 0 ? void 0 : _a.destroy();
-    (_b = this._gridController) === null || _b === void 0 ? void 0 : _b.destroy();
+    var _a;
+    (_a = this._gridController) === null || _a === void 0 ? void 0 : _a.destroy();
     this.removeShortcuts();
   }
   connectedCallback() {
@@ -611,8 +487,6 @@ export class EzGrid {
     if (this.dataUnit && this._showSelectionCounter) {
       this.setSelection(this.dataUnit.getSelectionInfo());
     }
-    if (this.paginationCounterMode === 'auto')
-      this._initHeaderOverflowWatcher();
   }
   getDataSource() {
     if (!this.columnfilterDataSource) {
@@ -624,7 +498,7 @@ export class EzGrid {
     if (this.mode === "simple") {
       return true;
     }
-    return !this._hasLeftButtons && !this._paginationInfo;
+    return !this._hasLeftButtons;
   }
   resolveLeftHeaderClass() {
     if (this.paginationCounterMode == 'show')
@@ -649,7 +523,7 @@ export class EzGrid {
         return;
       const { currentPage } = this._paginationInfo;
       if (currentPage > 0) {
-        this.previousPage();
+        this._refGridPagination.previousPage();
       }
     }, { description: this.i18n("ez-grid.previousPage"), element: this._element })
       .bind("ctrl + alt + ArrowRight", () => {
@@ -657,7 +531,7 @@ export class EzGrid {
         return;
       const { hasMore } = this._paginationInfo;
       if (hasMore) {
-        this.nextPage();
+        this._refGridPagination.nextPage();
       }
     }, { description: this.i18n("ez-grid.nextPage"), element: this._element });
     if (this.useSearchColumn) {
@@ -710,9 +584,9 @@ export class EzGrid {
         'ez-box ez-padding--small grid-header': true,
         'outline-mode': this.outlineMode,
         'shadow-mode': !this.outlineMode && !this.hideHeader(),
-      }, tabindex: "0" }, h("filter-column", { class: "grid-header__popover", noHeaderTaskBar: !this._hasLeftButtons, dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: this.hideHeader(), ref: (element) => (this._filterColumn = element) }), h("div", { class: "grid-header__position" }, h("div", { class: `grid-header__container grid-header__left-container ${this.resolveLeftHeaderClass()}` }, h("slot", { name: "leftButtons" })), this.getPaginationControl())), h("ez-popover", { ref: elem => (this._ezPopoverSearchColumn = elem), overlayType: "none" }, this.renderFieldSearchColumn()), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter  ez-elevation--4
+      }, tabindex: "0" }, h("filter-column", { class: "grid-header__popover", noHeaderTaskBar: !this._hasLeftButtons, dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: this.hideHeader(), ref: (element) => (this._filterColumn = element) }), h("div", { class: "grid-header__position" }, h("div", { class: `grid-header__container grid-header__left-container ${this.resolveLeftHeaderClass()}` }, h("slot", { name: "leftButtons" })))), h("ez-popover", { ref: elem => (this._ezPopoverSearchColumn = elem), overlayType: "none" }, this.renderFieldSearchColumn()), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter  ez-elevation--4
           ${this._showSelectionCounter ? 'grid__selection-counter--opened' : ''}
-        ` }, h(SelectionCounter, { selectionCount: this._selectionCount, currentPageSelected: this._currentPageSelected, paginationInfo: this._paginationInfo, canSelectAll: (_a = this.selectionToastConfig) === null || _a === void 0 ? void 0 : _a.canSelectAll, allRecordSelected: this._isAllSelection, i18n: this.i18n, onSelectAll: () => this.onSelectAllRecords(), onSelectPage: () => this.onSelectPageRecords(), onClearAll: () => this.onClearSelectedRecords(), onClose: () => (this._showSelectionCounter = false) })), h("div", { class: "grid__footer" }, h("slot", { name: "footer" }))));
+        ` }, h(SelectionCounter, { selectionCount: this._selectionCount, currentPageSelected: this._currentPageSelected, paginationInfo: this._paginationInfo, canSelectAll: (_a = this.selectionToastConfig) === null || _a === void 0 ? void 0 : _a.canSelectAll, allRecordSelected: this._isAllSelection, i18n: this.i18n, onSelectAll: () => this.onSelectAllRecords(), onSelectPage: () => this.onSelectPageRecords(), onClearAll: () => this.onClearSelectedRecords(), onClose: () => (this._showSelectionCounter = false) })), h("div", { class: "grid__footer" }, (this.mode !== "simple" && !this.hidePagination) && (h("ez-grid-pagination", { class: `ez-flex ez-flex--content-end`, ref: ref => (this._refGridPagination = ref), dataUnit: this.dataUnit, paginationCounterMode: this.paginationCounterMode, onPageChange: () => this.handlePageChange() })), h("slot", { name: "footer" }))));
   }
   static get is() { return "ez-grid"; }
   static get encapsulation() { return "scoped"; }
@@ -989,7 +863,7 @@ export class EzGrid {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Define se a grid ser\u00E1 focada ao ser carregada."
+          "text": "Define a forma como a pagina\u00E7\u00E3o ir\u00E1 se comportar."
         },
         "attribute": "pagination-counter-mode",
         "reflect": false,
@@ -1179,6 +1053,24 @@ export class EzGrid {
         "attribute": "mode",
         "reflect": true,
         "defaultValue": "\"complete\""
+      },
+      "hidePagination": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Esconder pagina\u00E7\u00E3o."
+        },
+        "attribute": "hide-pagination",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -1801,6 +1693,22 @@ export class EzGrid {
           "text": "",
           "tags": []
         }
+      },
+      "handlePageChange": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Manipula a mudan\u00E7a de p\u00E1gina da grid.",
+          "tags": []
+        }
       }
     };
   }
@@ -1809,12 +1717,6 @@ export class EzGrid {
     return [{
         "propName": "config",
         "methodName": "observeConfig"
-      }, {
-        "propName": "_paginationInfo",
-        "methodName": "updatePaginationTooltip"
-      }, {
-        "propName": "paginationCounterMode",
-        "methodName": "observePaginationCounterMode"
       }, {
         "propName": "mode",
         "methodName": "observeModeChange"

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

@@ -1 +1,2 @@
 export * from './ColumnFilterManager';
+export * from '../controller/ag-grid/gridColumnDefaultWidths';