@sankhyalabs/ezui 0.0.0-feat-dev-KB-35645.2 → 0.0.0-feat-dev-KB-35654.0

package/dist/cjs/ez-form-view.cjs.entry.js

@@ -14,7 +14,7 @@ const buildCheckBox = (field) => {
   return buildField(field.name, field.label, field.readOnly, field.contextName, false);
 };
 function buildField(fieldName, fieldLabel, readOnly, contextName, switchMode) {
-  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" },
     index.h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? CheckMode.CheckMode.SWITCH : CheckMode.CheckMode.REGULAR, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName })));
 }
 
@@ -28,20 +28,20 @@ const buildComboBox = ({ name, label, readOnly, required, props, contextName, ca
   else {
     options = prop;
   }
-  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     index.h("ez-combo-box", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, options: options, canShowError: canShowError })));
 };
 
 const buildDate = ({ name, label, readOnly, canShowError }) => {
-  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     index.h("ez-date-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
 };
 const buildTime = ({ name, label, readOnly, canShowError }) => {
-  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     index.h("ez-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
 };
 const buildDateTime = ({ name, label, readOnly, contextName, canShowError }) => {
-  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     index.h("ez-date-time-input", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError })));
 };
 
@@ -67,12 +67,12 @@ const buildInteger = ({ name, label, readOnly, contextName, canShowError }) => {
   return buildNumeric(name, label, readOnly, 0, 0, contextName, canShowError);
 };
 function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision, contextName, canShowError) {
-  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     index.h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName, canShowError: canShowError })));
 }
 
 const buildSearch = ({ name, label, readOnly, required, contextName, canShowError, optionLoader }) => {
-  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     index.h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader })));
 };
 
@@ -82,7 +82,7 @@ const buildTextArea = ({ name, label, readOnly, contextName, rows, canShowError
 };
 
 const buildTextInput = ({ name, label, readOnly, contextName, canShowError }) => {
-  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     index.h("ez-text-input", { label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly, canShowError: canShowError })));
 };
 
@@ -142,7 +142,7 @@ class FormItems {
   }
 }
 
-const ezFormViewCss = ".sc-ez-form-view-h{display:flex;flex-wrap:wrap;width:100%;--ez-form-view__item--min-width:220px;--ez-form-view__item--sapce-width:5px}.form-view__content.sc-ez-form-view{display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--ez-form-view__item--min-width), 1fr));gap:var(--ez-form-view__item--sapce-width);width:100%}.input-full_width.sc-ez-form-view{grid-column:1 / -1;width:100%}";
+const ezFormViewCss = ".sc-ez-form-view-h{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}";
 
 const EzFormView = class {
   constructor(hostRef) {
@@ -177,36 +177,19 @@ const EzFormView = class {
     const formItems = new FormItems(Array.from(this._element.querySelectorAll("[data-form-item]")));
     this.formItemsReady.emit(formItems);
   }
-  isItemFullWidth(userInterface) {
-    return [
-      core.UserInterface.FILE,
-      core.UserInterface.LONGTEXT
-    ].includes(userInterface);
-  }
-  buildFormItemElement(item, classItem = "") {
-    if (this.isItemFullWidth(item.userInterface)) {
-      classItem += " input-full_width";
-    }
-    return index.h("div", { class: classItem }, fieldBuilder(item));
-  }
   render() {
     core.ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezFormView');
     if (this.fields == undefined) {
       return;
     }
-    let nonArrayGrup = [];
-    let formContent = Array.from(this.groupFields(this.fields).entries()).map(([label, value]) => {
+    return (index.h(index.Host, null, Array.from(this.groupFields(this.fields).entries()).map(([label, value]) => {
       if (Array.isArray(value)) {
-        return (index.h("ez-collapsible-box", { id: `group-${label}`, label: label, "header-size": "large", key: label }, index.h("div", { class: "form-view__content" }, value.map(fi => (this.buildFormItemElement(fi))))));
+        return (index.h("ez-collapsible-box", { id: `group-${label}`, label: label, "header-size": "large", key: label }, value.map(fi => fieldBuilder(fi))));
       }
       else {
-        nonArrayGrup.push(value);
+        return fieldBuilder(value);
       }
-    });
-    // Filtra os elementos que não são arrays e os coloca dentro de uma única div
-    let nonArrayElements = nonArrayGrup.map((value) => this.buildFormItemElement(value));
-    let groupedNonArrayElements = index.h("div", { class: "form-view__content" }, nonArrayElements);
-    return (index.h(index.Host, null, groupedNonArrayElements, formContent));
+    })));
   }
   get _element() { return index.getElement(this); }
 };

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

@@ -5,11 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 const DataUnit = require('@sankhyalabs/core/dist/dataunit/DataUnit');
+const constants = require('./constants-2714478b.js');
+const RecordValidationProcessor = require('./RecordValidationProcessor-4c893e04.js');
 const ApplicationUtils = require('./ApplicationUtils-c9d1205c.js');
 require('./DialogType-2114c337.js');
 require('./CheckMode-ecb90b87.js');
-const constants = require('./constants-2714478b.js');
-const RecordValidationProcessor = require('./RecordValidationProcessor-4c893e04.js');
 
 /**
           * @ag-grid-community/all-modules - Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue * @version v28.2.1
@@ -120637,7 +120637,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:0 0 16px 0 rgb(0 38 111 / 12%);--ez-grid--min-height:300px;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__container.sc-ez-grid{padding-top:15px;margin-top:-12px;box-shadow:var(--ez-grid__container--shadow);background-color:var(--ez-grid__header--background-color)}.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-label.sc-ez-grid{width:100%;white-space:nowrap}";
+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:0 0 16px 0 rgb(0 38 111 / 12%);--ez-grid--min-height:300px;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__container.sc-ez-grid{padding-top:15px;margin-top:-12px;box-shadow:var(--ez-grid__container--shadow);background-color:var(--ez-grid__header--background-color)}.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}";
 
 const windowInstace = window;
 const matches = (text, filter) => {
@@ -120891,10 +120891,11 @@ const EzGrid = class {
   }
   getPaginationControl() {
     if (this._paginationInfo) {
-      const { currentPage, hasMore } = this._paginationInfo;
+      const { firstRecord, lastRecord, total, count, currentPage, hasMore } = this._paginationInfo;
       return [
-        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" }, index.h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, this._getActualPageLabel()), this._getRemainingPageLabel())),
-        index.h("div", { ref: (element) => (this._refPaginationLabelTooltip = element), class: "ez-flex ez-margin-right--medium" }, 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" })),
+        index.h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium" }, index.h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, `${firstRecord}-${lastRecord}`), total == undefined ? ` de ${count + 1} ou mais` : ` de ${total}`),
+        index.h("ez-button", { size: "small", iconName: "chevron-left", class: "ez-margin-right--medium", mode: "icon", enabled: currentPage > 0, onClick: () => this.previousPage(), label: "P\u00E1gina anterior" }),
+        index.h("ez-button", { size: "small", iconName: "chevron-right", class: "ez-margin-right--medium", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" }),
       ];
     }
     return null;
@@ -120938,55 +120939,6 @@ const EzGrid = class {
     this.setEvents();
     this.componentReady.emit();
     this._gridController.configFilterColumn(this._filterColumn);
-    this._initHeaderOverflowWatcher();
-  }
-  _getActualPageLabel() {
-    const { firstRecord, lastRecord } = this._paginationInfo;
-    return `${firstRecord}-${lastRecord}`;
-  }
-  _getRemainingPageLabel() {
-    const { total, count } = this._paginationInfo;
-    return `${total == undefined ? ` de ${count + 1} ou mais` : ` de ${total}`}`;
-  }
-  _getPaginationTooltip() {
-    return this._getActualPageLabel() + this._getRemainingPageLabel();
-  }
-  _updatePaginationTooltip() {
-    if (!this._refPaginationLabelTooltip) {
-      return;
-    }
-    const alreadyDefined = this._refPaginationLabelTooltip.getAttribute('data-tooltip');
-    if (alreadyDefined) {
-      this._refPaginationLabelTooltip
-        .setAttribute('data-tooltip', this._getPaginationTooltip());
-    }
-  }
-  _initHeaderOverflowWatcher() {
-    this._headerOverflowWatcher = new core.OverflowWatcher(this._refHeader, (elementsOverflow) => {
-      if (!this._refPaginationLabel) {
-        return;
-      }
-      if (elementsOverflow.length > 0) {
-        this._hidePaginationDescription();
-      }
-      else {
-        this._showPaginationDescription();
-      }
-    }, core.OverflowDirection.HORIZONTAL, 20);
-  }
-  _hidePaginationDescription() {
-    this._refPaginationLabel.hidden = true;
-    this._refPaginationLabelTooltip.setAttribute('data-flow', 'bottom');
-    this._refPaginationLabelTooltip.setAttribute('data-tooltip', this._getPaginationTooltip());
-  }
-  ;
-  _showPaginationDescription() {
-    this._refPaginationLabel.hidden = false;
-    this._refPaginationLabelTooltip.removeAttribute('data-flow');
-    this._refPaginationLabelTooltip.removeAttribute('data-tooltip');
-  }
-  disconnectedCallback() {
-    this._headerOverflowWatcher.destroy();
   }
   componentWillRender() {
     this.configSelectionCounter();
@@ -121010,15 +120962,14 @@ const EzGrid = class {
   }
   render() {
     var _a;
-    return (index.h(index.Host, { "no-header": this.hideHeader() }, index.h("div", { class: "grid__container ez-grid", ref: elem => (this._container = elem) }), index.h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, index.h("filter-column", { class: "grid-header__popover", noHeaderTaskBar: !this._hasLeftButtons, dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: this.hideHeader(), ref: (element) => (this._filterColumn = element) }), index.h("div", { class: "grid-header__position", ref: ref => (this._refHeader = ref) }, index.h("div", { class: "grid-header__container" }, index.h("slot", { name: "leftButtons" })), index.h("div", { class: "grid-header__container", ref: ref => (this._refPaginationControl = ref) }, this.getPaginationControl()))), index.h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter  ez-elevation--4
+    return (index.h(index.Host, { "no-header": this.hideHeader() }, index.h("div", { class: "grid__container ez-grid", ref: elem => (this._container = elem) }), index.h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, index.h("filter-column", { class: "grid-header__popover", noHeaderTaskBar: !this._hasLeftButtons, dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: this.hideHeader(), ref: (element) => (this._filterColumn = element) }), index.h("div", { class: "grid-header__position" }, index.h("div", { class: "grid-header__container" }, index.h("slot", { name: "leftButtons" })), index.h("div", { class: "grid-header__container", ref: ref => (this._refPaginationControl = ref) }, this.getPaginationControl()))), index.h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter  ez-elevation--4
           ${this._showSelectionCounter ? 'grid__selection-counter--opened' : ''}
         ` }, index.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, onSelectAll: () => this.onSelectAllRecords(), onSelectPage: () => this.onSelectPageRecords(), onClearAll: () => this.onClearSelectedRecords(), onClose: () => (this._showSelectionCounter = false) })), index.h("div", { class: "grid__footer" }, index.h("slot", { name: "footer" }))));
   }
   static get assetsDirs() { return ["../assets"]; }
   get _element() { return index.getElement(this); }
   static get watchers() { return {
-    "config": ["observeConfig"],
-    "_paginationInfo": ["_updatePaginationTooltip"]
+    "config": ["observeConfig"]
   }; }
 };
 EzGrid.style = ezGridCss;

package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.css

@@ -207,7 +207,6 @@ ez-icon {
   /*private*/
   display: flex;
   flex-wrap: wrap;
-  
   width: 100%;
   height: 0px;
   max-height: 0px;

package/dist/collection/components/ez-form-view/ez-form-view.css

@@ -1,22 +1,6 @@
 :host {
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   width: 100%;
-
-  /*@doc Define o tamanho mínimo dos itens do formulário.*/
-  --ez-form-view__item--min-width: 220px;
-  /*@doc Define o espaçamento entre itens do formulário.*/
-  --ez-form-view__item--sapce-width: 5px;
-}
-
-.form-view__content{
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--ez-form-view__item--min-width), 1fr));
-  gap: var(--ez-form-view__item--sapce-width);
-  width: 100%;
-}
-
-.input-full_width {
-  grid-column: 1 / -1;
-  width: 100%;
 }

package/dist/collection/components/ez-form-view/ez-form-view.js

@@ -1,6 +1,6 @@
 import { Host, h } from '@stencil/core';
 import { fieldBuilder } from './fieldbuilder/FieldBuilder';
-import { ElementIDUtils, UserInterface } from '@sankhyalabs/core';
+import { ElementIDUtils } from '@sankhyalabs/core';
 import { FormItems } from './structure';
 export class EzFormView {
   constructor() {
@@ -32,36 +32,19 @@ export class EzFormView {
     const formItems = new FormItems(Array.from(this._element.querySelectorAll("[data-form-item]")));
     this.formItemsReady.emit(formItems);
   }
-  isItemFullWidth(userInterface) {
-    return [
-      UserInterface.FILE,
-      UserInterface.LONGTEXT
-    ].includes(userInterface);
-  }
-  buildFormItemElement(item, classItem = "") {
-    if (this.isItemFullWidth(item.userInterface)) {
-      classItem += " input-full_width";
-    }
-    return h("div", { class: classItem }, fieldBuilder(item));
-  }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezFormView');
     if (this.fields == undefined) {
       return;
     }
-    let nonArrayGrup = [];
-    let formContent = Array.from(this.groupFields(this.fields).entries()).map(([label, value]) => {
+    return (h(Host, null, Array.from(this.groupFields(this.fields).entries()).map(([label, value]) => {
       if (Array.isArray(value)) {
-        return (h("ez-collapsible-box", { id: `group-${label}`, label: label, "header-size": "large", key: label }, h("div", { class: "form-view__content" }, value.map(fi => (this.buildFormItemElement(fi))))));
+        return (h("ez-collapsible-box", { id: `group-${label}`, label: label, "header-size": "large", key: label }, value.map(fi => fieldBuilder(fi))));
       }
       else {
-        nonArrayGrup.push(value);
+        return fieldBuilder(value);
       }
-    });
-    // Filtra os elementos que não são arrays e os coloca dentro de uma única div
-    let nonArrayElements = nonArrayGrup.map((value) => this.buildFormItemElement(value));
-    let groupedNonArrayElements = h("div", { class: "form-view__content" }, nonArrayElements);
-    return (h(Host, null, groupedNonArrayElements, formContent));
+    })));
   }
   static get is() { return "ez-form-view"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/ez-form-view/fieldbuilder/templates/CheckBox.tpl.js

@@ -7,5 +7,5 @@ export const buildCheckBox = (field) => {
   return buildField(field.name, field.label, field.readOnly, field.contextName, false);
 };
 function buildField(fieldName, fieldLabel, readOnly, contextName, switchMode) {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" }, h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? CheckMode.SWITCH : CheckMode.REGULAR, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName })));
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" }, h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? CheckMode.SWITCH : CheckMode.REGULAR, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName })));
 }

package/dist/collection/components/ez-form-view/fieldbuilder/templates/ComboBox.tpl.js

@@ -9,5 +9,5 @@ export const buildComboBox = ({ name, label, readOnly, required, props, contextN
   else {
     options = prop;
   }
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-combo-box", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, options: options, canShowError: canShowError })));
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" }, h("ez-combo-box", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, options: options, canShowError: canShowError })));
 };

package/dist/collection/components/ez-form-view/fieldbuilder/templates/DateInput.tpl.js

@@ -1,10 +1,10 @@
 import { h } from "@stencil/core";
 export const buildDate = ({ name, label, readOnly, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-date-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" }, h("ez-date-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
 };
 export const buildTime = ({ name, label, readOnly, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" }, h("ez-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
 };
 export const buildDateTime = ({ name, label, readOnly, contextName, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-date-time-input", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError })));
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" }, h("ez-date-time-input", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError })));
 };

package/dist/collection/components/ez-form-view/fieldbuilder/templates/NumberInput.tpl.js

@@ -8,5 +8,5 @@ export const buildInteger = ({ name, label, readOnly, contextName, canShowError
   return buildNumeric(name, label, readOnly, 0, 0, contextName, canShowError);
 };
 function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision, contextName, canShowError) {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName, canShowError: canShowError })));
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" }, h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName, canShowError: canShowError })));
 }

package/dist/collection/components/ez-form-view/fieldbuilder/templates/SearchInput.tpl.js

@@ -1,4 +1,4 @@
 import { h } from "@stencil/core";
 export const buildSearch = ({ name, label, readOnly, required, contextName, canShowError, optionLoader }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader })));
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" }, h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader })));
 };

package/dist/collection/components/ez-form-view/fieldbuilder/templates/TextInput.tpl.js

@@ -1,4 +1,4 @@
 import { h } from "@stencil/core";
 export const buildTextInput = ({ name, label, readOnly, contextName, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-text-input", { label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly, canShowError: canShowError })));
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" }, h("ez-text-input", { label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly, canShowError: canShowError })));
 };

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

@@ -4,7 +4,7 @@
   grid-template-rows: auto 1fr auto;
   height: 100%;
   width: 100%;
-
+  
   /*public*/
   /*@doc Define a cor de fundo do header do componente.*/
   --ez-grid__header--background-color: var(--background--xlight, #FFF);
@@ -14,8 +14,8 @@
   --ez-grid__container--shadow: 0 0 16px 0 rgb(0 38 111 / 12%);
   /*@doc Define altura mínima da grid */
   --ez-grid--min-height: 300px;
-
-  min-height: var(--ez-grid--min-height);
+  
+  min-height: var(--ez-grid--min-height); 
 }
 
 .grid-header {
@@ -96,8 +96,3 @@
   height: 0;
   padding: 0;
 }
-
-.grid-header__pagination-label {
-  width: 100%;
-  white-space: nowrap
-}

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

@@ -1,9 +1,9 @@
-import { ElementIDUtils, JSUtils, OverflowDirection, OverflowWatcher, StringUtils } from '@sankhyalabs/core';
+import { ElementIDUtils, JSUtils, StringUtils, } from '@sankhyalabs/core';
 import { SelectionMode } from '@sankhyalabs/core/dist/dataunit/DataUnit';
-import { Host, h } from '@stencil/core';
-import { ApplicationUtils } from '../../utils';
+import { h, Host } from '@stencil/core';
 import AgGridController from './controller/ag-grid/AgGridController';
 import { SelectionCounter } from './subcomponents/selection-counter';
+import { ApplicationUtils } from '../../utils';
 import InMemoryFilterColumnDataSource from './utils/InMemoryFilterColumnDataSource';
 const windowInstace = window;
 const matches = (text, filter) => {
@@ -251,10 +251,11 @@ export class EzGrid {
   }
   getPaginationControl() {
     if (this._paginationInfo) {
-      const { currentPage, hasMore } = this._paginationInfo;
+      const { firstRecord, lastRecord, total, count, currentPage, hasMore } = this._paginationInfo;
       return [
-        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" }, h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, this._getActualPageLabel()), this._getRemainingPageLabel())),
-        h("div", { ref: (element) => (this._refPaginationLabelTooltip = element), class: "ez-flex ez-margin-right--medium" }, 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" })),
+        h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium" }, h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, `${firstRecord}-${lastRecord}`), total == undefined ? ` de ${count + 1} ou mais` : ` de ${total}`),
+        h("ez-button", { size: "small", iconName: "chevron-left", class: "ez-margin-right--medium", mode: "icon", enabled: currentPage > 0, onClick: () => this.previousPage(), label: "P\u00E1gina anterior" }),
+        h("ez-button", { size: "small", iconName: "chevron-right", class: "ez-margin-right--medium", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" }),
       ];
     }
     return null;
@@ -298,55 +299,6 @@ export class EzGrid {
     this.setEvents();
     this.componentReady.emit();
     this._gridController.configFilterColumn(this._filterColumn);
-    this._initHeaderOverflowWatcher();
-  }
-  _getActualPageLabel() {
-    const { firstRecord, lastRecord } = this._paginationInfo;
-    return `${firstRecord}-${lastRecord}`;
-  }
-  _getRemainingPageLabel() {
-    const { total, count } = this._paginationInfo;
-    return `${total == undefined ? ` de ${count + 1} ou mais` : ` de ${total}`}`;
-  }
-  _getPaginationTooltip() {
-    return this._getActualPageLabel() + this._getRemainingPageLabel();
-  }
-  _updatePaginationTooltip() {
-    if (!this._refPaginationLabelTooltip) {
-      return;
-    }
-    const alreadyDefined = this._refPaginationLabelTooltip.getAttribute('data-tooltip');
-    if (alreadyDefined) {
-      this._refPaginationLabelTooltip
-        .setAttribute('data-tooltip', this._getPaginationTooltip());
-    }
-  }
-  _initHeaderOverflowWatcher() {
-    this._headerOverflowWatcher = new OverflowWatcher(this._refHeader, (elementsOverflow) => {
-      if (!this._refPaginationLabel) {
-        return;
-      }
-      if (elementsOverflow.length > 0) {
-        this._hidePaginationDescription();
-      }
-      else {
-        this._showPaginationDescription();
-      }
-    }, OverflowDirection.HORIZONTAL, 20);
-  }
-  _hidePaginationDescription() {
-    this._refPaginationLabel.hidden = true;
-    this._refPaginationLabelTooltip.setAttribute('data-flow', 'bottom');
-    this._refPaginationLabelTooltip.setAttribute('data-tooltip', this._getPaginationTooltip());
-  }
-  ;
-  _showPaginationDescription() {
-    this._refPaginationLabel.hidden = false;
-    this._refPaginationLabelTooltip.removeAttribute('data-flow');
-    this._refPaginationLabelTooltip.removeAttribute('data-tooltip');
-  }
-  disconnectedCallback() {
-    this._headerOverflowWatcher.destroy();
   }
   componentWillRender() {
     this.configSelectionCounter();
@@ -370,7 +322,7 @@ export class EzGrid {
   }
   render() {
     var _a;
-    return (h(Host, { "no-header": this.hideHeader() }, h("div", { class: "grid__container ez-grid", ref: elem => (this._container = elem) }), h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, 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", ref: ref => (this._refHeader = ref) }, h("div", { class: "grid-header__container" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container", ref: ref => (this._refPaginationControl = ref) }, this.getPaginationControl()))), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter  ez-elevation--4
+    return (h(Host, { "no-header": this.hideHeader() }, h("div", { class: "grid__container ez-grid", ref: elem => (this._container = elem) }), h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, 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" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container", ref: ref => (this._refPaginationControl = ref) }, this.getPaginationControl()))), 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, onSelectAll: () => this.onSelectAllRecords(), onSelectPage: () => this.onSelectPageRecords(), onClearAll: () => this.onClearSelectedRecords(), onClose: () => (this._showSelectionCounter = false) })), h("div", { class: "grid__footer" }, h("slot", { name: "footer" }))));
   }
@@ -935,9 +887,6 @@ export class EzGrid {
     return [{
         "propName": "config",
         "methodName": "observeConfig"
-      }, {
-        "propName": "_paginationInfo",
-        "methodName": "_updatePaginationTooltip"
       }];
   }
   static get listeners() {