@sankhyalabs/ezui 5.20.4 → 5.21.0-dev.10

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

@@ -1,15 +1,15 @@
-import { ElementIDUtils, JSUtils, StringUtils, } from '@sankhyalabs/core';
+import { ElementIDUtils, JSUtils, OverflowWatcher, OVERFLOWED_CLASS_NAME, StringUtils, } from '@sankhyalabs/core';
 import { SelectionMode } from '@sankhyalabs/core/dist/dataunit/DataUnit';
-import { h, Host } from '@stencil/core';
+import { Host, h } from '@stencil/core';
+import { ApplicationUtils } from '../../utils';
 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) => {
-  const normalizedText = StringUtils.replaceAccentuatedCharsLower(text.toLocaleLowerCase());
+  const normalizedText = StringUtils.replaceAccentuatedCharsLower(text === null || text === void 0 ? void 0 : text.toLocaleLowerCase());
   const normalizedFilter = StringUtils.replaceAccentuatedCharsLower(filter.toLocaleLowerCase());
-  return normalizedText.includes(normalizedFilter);
+  return normalizedText === null || normalizedText === void 0 ? void 0 : normalizedText.includes(normalizedFilter);
 };
 export class EzGrid {
   constructor() {
@@ -22,6 +22,7 @@ export class EzGrid {
     this._currentPageSelected = undefined;
     this._selectionCount = undefined;
     this._hasLeftButtons = false;
+    this._customFormatters = new Map();
     this.multipleSelection = undefined;
     this.config = undefined;
     this.selectionToastConfig = undefined;
@@ -93,8 +94,52 @@ export class EzGrid {
   async filterColumns(search) {
     return Promise.resolve(this._gridController.getColumnsState().filter(col => matches(col.label, search)));
   }
+  /**
+   * Registra um formatador de valores para uma coluna da grid.
+   */
+  async addCustomValueFormatter(columnName, customFormatter) {
+    if (!columnName || !customFormatter) {
+      return;
+    }
+    const newCustomFormatters = new Map(this._customFormatters);
+    newCustomFormatters.set(columnName, customFormatter);
+    this._customFormatters = newCustomFormatters;
+    this._gridController.setCustomFormatters(newCustomFormatters);
+  }
+  /**
+   * Remove o formatador de valores de uma coluna da grid.
+   */
+  async removeCustomValueFormatter(columnName) {
+    if (!columnName) {
+      return;
+    }
+    const newCustomFormatters = new Map(this._customFormatters);
+    newCustomFormatters.delete(columnName);
+    this._customFormatters = newCustomFormatters;
+    this._gridController.setCustomFormatters(newCustomFormatters);
+  }
+  /**
+   * Atualiza linhas da grade.
+   */
+  async refreshSelectedRows() {
+    this._gridController.refreshSelectedRows();
+  }
+  /**
+   * Retorna o formatador customizado da coluna caso exista.
+   */
+  async getCustomValueFormatter(columnName) {
+    return this._customFormatters.get(columnName);
+  }
   observeConfig(config) {
-    this._gridController.setColumnsState(config.columns);
+    this._gridController.setColumnsState(config === null || config === void 0 ? void 0 : config.columns);
+  }
+  updatePaginationTooltip() {
+    if (!this._refPaginationLabelTooltip)
+      return;
+    const alreadyDefined = this._refPaginationLabelTooltip.getAttribute('data-tooltip');
+    if (alreadyDefined) {
+      this._refPaginationLabelTooltip.setAttribute('data-tooltip', this._getPaginationTooltip());
+    }
   }
   onSelectionChange(evt) {
     this._currentPageSelected = evt.detail.selectionHeaderStatus === true;
@@ -144,21 +189,29 @@ export class EzGrid {
     return newConfig;
   }
   positionSelectionCounter() {
-    var _a;
-    if (this._gridSelectionCounter == undefined) {
+    var _a, _b;
+    if (!this._gridSelectionCounter)
       return;
-    }
-    if (this._showSelectionCounter) {
-      const boundingContainer = (_a = this._container) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-      if (boundingContainer == undefined) {
-        return;
-      }
-      const limitBottom = boundingContainer.bottom - 30;
-      this._gridSelectionCounter.style.bottom = document.body.clientHeight - limitBottom + 'px';
-    }
-    else {
+    if (!this._showSelectionCounter) {
       this._gridSelectionCounter.style.bottom = '';
+      return;
     }
+    const containerRect = (_a = this._container) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    const selectionRect = (_b = this._gridSelectionCounter) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+    if (!containerRect || !selectionRect)
+      return;
+    const positionBottom = containerRect.bottom - 30;
+    this._gridSelectionCounter.style.bottom = document.body.clientHeight - positionBottom + 'px';
+    this._gridSelectionCounter.style.left = this.calculatePositionLeft(containerRect, selectionRect);
+  }
+  calculatePositionLeft(containerRect, selectionRect) {
+    let selectionStart = containerRect.left + (containerRect.width / 2);
+    const containerRightEdge = containerRect.left + this._container.clientWidth;
+    const selectionEnd = (selectionStart - (selectionRect.width / 2)) + selectionRect.width;
+    if (selectionEnd > containerRightEdge) {
+      selectionStart = containerRightEdge - (selectionRect.width / 2);
+    }
+    return `${selectionStart}px`;
   }
   setEvents() {
     window.removeEventListener('scroll', this.positionSelectionCounter.bind(this));
@@ -251,11 +304,10 @@ export class EzGrid {
   }
   getPaginationControl() {
     if (this._paginationInfo) {
-      const { firstRecord, lastRecord, total, count, currentPage, hasMore } = this._paginationInfo;
+      const { currentPage, hasMore } = this._paginationInfo;
       return [
-        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" }),
+        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", { id: "grid-pagination-tooltip", 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" })),
       ];
     }
     return null;
@@ -264,16 +316,8 @@ export class EzGrid {
     this._gridController.initDatagrid(this._container, {
       onColumnStateChange: (type, state, info) => this.onColumnStateChange(type, state, info),
       onSelectionChange: (selection) => this.ezSelectionChange.emit(selection),
-      onPaginationChange: (paginationInfo) => {
-        var _a;
-        if (((_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.currentPage) > (paginationInfo === null || paginationInfo === void 0 ? void 0 : paginationInfo.currentPage) && this._paginationChangedByKeyboard) {
-          this._gridController.setFocusLastRow();
-        }
-        else {
-          this._gridController.setFocusFirstRow();
-          this._paginationChangedByKeyboard = true;
-        }
-        this._paginationInfo = paginationInfo;
+      onPaginationChange: (paginationInfo, selectFirstRecord) => {
+        this.handlePaginationChange(selectFirstRecord, paginationInfo);
       },
       onPaginationUpdate: (paginationInfo) => {
         this._paginationInfo = paginationInfo;
@@ -287,7 +331,8 @@ export class EzGrid {
       statusResolver: this.statusResolver,
       useEnterLikeTab: this.useEnterLikeTab,
       recordsValidator: this.recordsValidator,
-      editionIsDisabled: () => !this.canEdit
+      editionIsDisabled: () => !this.canEdit,
+      customFormatters: this._customFormatters
     });
     if (this.config) {
       this.observeConfig(this.config);
@@ -299,6 +344,66 @@ export class EzGrid {
     this.setEvents();
     this.componentReady.emit();
     this._gridController.configFilterColumn(this._filterColumn);
+    this._initHeaderOverflowWatcher();
+  }
+  handlePaginationChange(selectFirstRecord, paginationInfo) {
+    var _a;
+    if (selectFirstRecord !== false) {
+      if (((_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.currentPage) > (paginationInfo === null || paginationInfo === void 0 ? void 0 : paginationInfo.currentPage) && this._paginationChangedByKeyboard) {
+        this._gridController.setFocusLastRow();
+      }
+      else {
+        this._gridController.setFocusFirstRow();
+        this._paginationChangedByKeyboard = true;
+      }
+    }
+    this._paginationInfo = paginationInfo;
+  }
+  _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();
+  }
+  _initHeaderOverflowWatcher() {
+    this._headerOverflowWatcher = new OverflowWatcher(this.buildOverFlowWatcherParams());
+  }
+  buildOverFlowWatcherParams() {
+    return {
+      element: this._refPaginationControl,
+      callback: this.handleOverFlow.bind(this),
+      notOverFlow: ["grid-pagination-tooltip"]
+    };
+  }
+  handleOverFlow(elementsOverflow) {
+    if (!this._refPaginationLabel)
+      return;
+    if (elementsOverflow.length > 0) {
+      this._hidePaginationDescription();
+    }
+    else {
+      this._showPaginationDescription();
+    }
+  }
+  _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;
+    (_a = this._headerOverflowWatcher) === null || _a === void 0 ? void 0 : _a.destroy();
   }
   componentWillRender() {
     this.configSelectionCounter();
@@ -322,7 +427,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" }, 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 grid-header__left-container" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container grid-header__pagination", 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" }))));
   }
@@ -545,7 +650,8 @@ export class EzGrid {
       "_isAllSelection": {},
       "_currentPageSelected": {},
       "_selectionCount": {},
-      "_hasLeftButtons": {}
+      "_hasLeftButtons": {},
+      "_customFormatters": {}
     };
   }
   static get events() {
@@ -879,6 +985,90 @@ export class EzGrid {
           "text": "Usa um argumento para filtrar as colunas po label",
           "tags": []
         }
+      },
+      "addCustomValueFormatter": {
+        "complexType": {
+          "signature": "(columnName: string, customFormatter: ICustomFormatter) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ICustomFormatter": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Registra um formatador de valores para uma coluna da grid.",
+          "tags": []
+        }
+      },
+      "removeCustomValueFormatter": {
+        "complexType": {
+          "signature": "(columnName: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Remove o formatador de valores de uma coluna da grid.",
+          "tags": []
+        }
+      },
+      "refreshSelectedRows": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Atualiza linhas da grade.",
+          "tags": []
+        }
+      },
+      "getCustomValueFormatter": {
+        "complexType": {
+          "signature": "(columnName: string) => Promise<ICustomFormatter | undefined>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ICustomFormatter": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          },
+          "return": "Promise<ICustomFormatter>"
+        },
+        "docs": {
+          "text": "Retorna o formatador customizado da coluna caso exista.",
+          "tags": []
+        }
       }
     };
   }
@@ -887,6 +1077,9 @@ export class EzGrid {
     return [{
         "propName": "config",
         "methodName": "observeConfig"
+      }, {
+        "propName": "_paginationInfo",
+        "methodName": "updatePaginationTooltip"
       }];
   }
   static get listeners() {

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,3 +1,4 @@
 export * from './ISelection';
 export * from './ISelectionToastConfig';
 export * from './IColumnFilter';
+export * from './ICustomFormatter';

package/dist/collection/components/ez-grid/subcomponents/filter-column.js

@@ -13,6 +13,8 @@ export class FilterColumn {
     this.TOP_POSITION_NO_TASKBAR = '32';
     this.TOP_POSITION_NO_TASKBAR_HEADER_HIDDEN = '20';
     this.DEFAULT_HEIGHT = 430;
+    this.FIX_MARGIN = 60;
+    this.FILTER_COLUMN_WIDTH = 330;
     this.opened = true;
     this.columnName = undefined;
     this.columnLabel = undefined;
@@ -45,15 +47,24 @@ export class FilterColumn {
       await this.ezPopoverElement.show(this.calcTopPosition(), this.calculateLeftPosition(configs));
     }
   }
-  calculateLeftPosition(configs) {
-    if (!configs.fromIcon) {
-      return configs.leftPosition;
+  calculateLeftPosition({ leftPosition, fromIcon }) {
+    const leftPositionCalculated = this.calcFilterColumnLeftPosition(leftPosition);
+    if (!fromIcon) {
+      return `${leftPositionCalculated}px`;
     }
     const difference = this.ezPopoverElement.getBoundingClientRect().left;
-    const leftReference = parseInt(configs.leftPosition.replace('px', ''));
-    const leftResolved = (leftReference + 16) - difference;
+    const leftResolved = (leftPositionCalculated + 16) - difference;
     return `${(leftResolved > 0 ? leftResolved : 0)}px`;
   }
+  calcFilterColumnLeftPosition(leftReference) {
+    var _a, _b;
+    const gridReference = this.ezPopoverElement.closest("ez-grid");
+    const gridLimit = (_a = gridReference.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.right;
+    const popoverDiff = (_b = this.ezPopoverElement.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.left;
+    const maxLeft = gridLimit - (this.FILTER_COLUMN_WIDTH + popoverDiff);
+    const leftInt = leftReference - (this.FIX_MARGIN + popoverDiff);
+    return leftInt > maxLeft ? maxLeft : leftInt;
+  }
   buildIsTextSearch() {
     var _a, _b;
     const userInterface = (_b = (_a = this.fieldDescriptor) === null || _a === void 0 ? void 0 : _a.userInterface) !== null && _b !== void 0 ? _b : UserInterface.SHORTTEXT;

package/dist/collection/components/ez-grid/subcomponents/selection-counter.js

@@ -1,8 +1,9 @@
 import { ElementIDUtils } from "@sankhyalabs/core";
 import { h } from "@stencil/core";
+import { buildSelectAllLabel, buildSelectAllTitle, enableSelectAll, getText } from './utils/selectionCounterUtils';
 export const SelectionCounter = (props) => {
   const { selectionCount, currentPageSelected, allRecordSelected, paginationInfo, canSelectAll, onSelectAll, onSelectPage, onClearAll, onClose } = props;
-  const { total, hasMore } = paginationInfo || {};
+  const { total, hasMore, count } = paginationInfo || {};
   const shouldRenderSelectionButton = () => {
     if ((!allRecordSelected && selectionCount === total) || (allRecordSelected && !hasMore))
       return false;
@@ -11,17 +12,8 @@ export const SelectionCounter = (props) => {
     return !!paginationInfo && (currentPageSelected || allRecordSelected);
   };
   return (h("div", Object.assign({ class: "ez-box ez-box--shadow-small" }, getElementID("ezGridSelectionCounter")), h("div", { class: "ez-flex ez-flex--align-items-center ez-size-width--full ez-padding-horizontal--medium" }, h("div", { class: "ez-flex ez-flex--wrap ez-flex--align-items-baseline ez-flex--justify-center" }, h("label", Object.assign({ innerHTML: getText(selectionCount, allRecordSelected), class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium ez-margin-top--medium" }, getElementID("ezGridSelectionCounter_label"))), h("div", { class: "ez-flex ez-margin-right--medium" }, shouldRenderSelectionButton() &&
-    h("ez-button", Object.assign({ class: "ez-margin-right--medium", label: `Selecionar ${allRecordSelected ? "apenas a página atual" : `todos os ${total} registros`}`, mode: "link", onClick: allRecordSelected ? onSelectPage : onSelectAll }, getElementID(`ezGridSelectionCounter_select${allRecordSelected ? "Page" : "All"}`))), h("ez-button", Object.assign({ class: "grid__btn-clear", label: "Limpar", mode: "link", onClick: onClearAll }, getElementID("ezGridSelectionCounter_clearAll"))))), h("button", Object.assign({ class: "grid__btn-close", title: "Fechar", onClick: onClose }, getElementID("ezGridSelectionCounter_close")), h("ez-icon", { iconName: "close" })))));
+    h("ez-button", Object.assign({ title: buildSelectAllTitle(total), enabled: enableSelectAll(total), class: "ez-margin-right--medium", label: buildSelectAllLabel(allRecordSelected, count, total), mode: "link", onClick: allRecordSelected ? onSelectPage : onSelectAll }, getElementID(`ezGridSelectionCounter_select${allRecordSelected ? "Page" : "All"}`))), h("ez-button", Object.assign({ class: "grid__btn-clear", label: "Limpar Sele\u00E7\u00E3o", mode: "link", onClick: onClearAll }, getElementID("ezGridSelectionCounter_clearAll"))))), h("button", Object.assign({ class: "grid__btn-close", title: "Fechar", onClick: onClose }, getElementID("ezGridSelectionCounter_close")), h("ez-icon", { iconName: "close" })))));
 };
-function getText(selectionCount, allSelectedRecords) {
-  if (allSelectedRecords) {
-    return `Todos os <strong>${selectionCount} registros</strong> da grade estão selecionados.`;
-  }
-  else {
-    const pluralChar = selectionCount > 1 ? "s" : "";
-    return `Há <strong>${selectionCount} registro${pluralChar}</strong> selecionado${pluralChar}.`;
-  }
-}
 function getElementID(sufix) {
   return {
     [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(sufix)

package/dist/collection/components/ez-grid/subcomponents/utils/selectionCounterUtils.js

@@ -0,0 +1,24 @@
+export function enableSelectAll(total) {
+  return total !== undefined;
+}
+export function buildSelectAllLabel(allRecordSelected, count, total) {
+  if (allRecordSelected)
+    return 'Selecionar apenas a página atual';
+  if (total === undefined)
+    return `Carregando todos os ${count} registros`;
+  return `Selecionar todos os ${total} registros`;
+}
+export function buildSelectAllTitle(total) {
+  if (enableSelectAll(total))
+    return '';
+  return 'Aguarde o carregamento para selecionar o registro de todas as páginas';
+}
+export function getText(selectionCount, allSelectedRecords) {
+  if (allSelectedRecords) {
+    return `Todos os <strong>${selectionCount} registros</strong> da grade estão selecionados.`;
+  }
+  if (selectionCount > 1) {
+    return `Os <strong>${selectionCount} registros</strong> dessa página estão selecionados.`;
+  }
+  return "O único registro dessa página está selecionado";
+}

package/dist/collection/components/ez-grid/test/resources/gridDataUnit.js

@@ -0,0 +1,19 @@
+import { DataType, DataUnit, StringUtils } from "@sankhyalabs/core";
+export function getDataUnit() {
+  const dataUnit = new DataUnit('EzGridDU');
+  dataUnit.pageSize = 3;
+  dataUnit.metadata = {
+    name: "exemplo.datagrid",
+    label: "Exemplo data grid",
+    fields: [
+      { name: "PRODUTO", label: "Produto", dataType: DataType.TEXT },
+      { name: "QUANTIDADE", label: "Quantidade", dataType: DataType.NUMBER }
+    ]
+  };
+  dataUnit.records = [
+    { __record__id__: StringUtils.generateUUID(), "PRODUTO": "Mamão", "QUANTIDADE": 1 },
+    { __record__id__: StringUtils.generateUUID(), "PRODUTO": "Mexerica", "QUANTIDADE": 2 }
+  ];
+  dataUnit.selectFirst();
+  return dataUnit;
+}