@sankhyalabs/ezui 4.0.4 → 4.2.0

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

@@ -1,5 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-de655f48.js';
-import { Action, ObjectUtils as ObjectUtils$1, ApplicationContext, StringUtils as StringUtils$1, UserInterface, NumberUtils as NumberUtils$1, DataType, SortMode, ElementIDUtils } from '@sankhyalabs/core';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-de655f48.js';
+import { Action, ObjectUtils as ObjectUtils$1, ApplicationContext, StringUtils as StringUtils$1, UserInterface, NumberUtils as NumberUtils$1, DataType, SortMode, ElementIDUtils, JSUtils } from '@sankhyalabs/core';
+import { A as ALL_RECORD } from './constants-76d2e931.js';
 
 /**
           * @ag-grid-community/all-modules - Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue * @version v28.2.1
@@ -118937,6 +118938,7 @@ class DataSource {
           this._controller.refresh();
           break;
         case Action.SELECTION_CHANGED:
+        case Action.SELECTION_REMOVED:
         case Action.NEXT_SELECTED:
         case Action.PREVIOUS_SELECTED:
           this.updateSelection();
@@ -118950,7 +118952,14 @@ class DataSource {
     this._dataUnit.subscribe(this.duObserver);
   }
   updateSelection() {
-    this._controller.selectRows(this._dataUnit.getSelection());
+    var _a;
+    const selection = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getAllSelection();
+    if ((selection === null || selection === void 0 ? void 0 : selection.length) > 0) {
+      this._controller.selectRows(selection);
+    }
+    else {
+      this._controller.deselectAll();
+    }
   }
   getRows(params) {
     if (this.needReload(params)) {
@@ -119152,7 +119161,7 @@ class AgGridController {
       else {
         this._grid = new Grid(container, this._gridOptions);
       }
-      const selection = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getSelection();
+      const selection = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getAllSelection();
       if (selection) {
         this.selectRows(selection);
       }
@@ -119226,30 +119235,72 @@ class AgGridController {
     opt.suppressDragLeaveHidesColumns = true;
     opt.suppressMenuHide = true;
   }
+  isAllRecordSetted(allSelection) {
+    return allSelection === null || allSelection === void 0 ? void 0 : allSelection.some((selectedRecord) => {
+      return selectedRecord.__record__id__ === ALL_RECORD;
+    });
+  }
   getSelectionHeaderStatus() {
     const records = this._dataUnit.records;
     if (records && records.length === 0) {
       return false;
     }
-    const selection = this._dataUnit.getSelection();
-    if (selection == undefined || selection.length === 0) {
+    const allSelection = this._dataUnit.getAllSelection();
+    if (allSelection == undefined || allSelection.length === 0) {
       return false;
     }
-    if (selection.length != records.length) {
+    if (this.isAllRecordSetted(allSelection)) {
+      return true;
+    }
+    if (allSelection.length != records.length) {
+      return undefined;
+    }
+    const selectedRecords = this._dataUnit.getSelectedRecords();
+    if (selectedRecords.length < allSelection.length) {
       return undefined;
     }
     let status = undefined;
     for (let i = 0; i < records.length; i++) {
-      const current = selection.includes(records[i].__record__id__);
+      const current = allSelection.some((selectedRecord) => {
+        return selectedRecord.__record__id__ === records[i].__record__id__;
+      });
       if (status != undefined && current !== status) {
-        return undefined;
+        return;
       }
       status = current;
     }
     return status;
   }
-  updateSelectionForAll(selectAll) {
-    this._dataUnit.setSelection(selectAll ? this._dataUnit.records.map(r => r.__record__id__) : []);
+  async updateSelectionForAll(selectAll) {
+    if (this._dataUnit == undefined) {
+      return;
+    }
+    let allSelection = this._dataUnit.getAllSelection();
+    if (allSelection === null || allSelection === void 0 ? void 0 : allSelection.some((sel) => sel.__record__id__ === ALL_RECORD)) {
+      await this._dataUnit.clearSelection();
+    }
+    let updateSelection = [];
+    const records = this._dataUnit.records;
+    const selectedRecords = this._dataUnit.getSelectedRecords();
+    allSelection = this._dataUnit.getAllSelection();
+    if (selectAll && selectedRecords.length < records.length) {
+      updateSelection = records;
+      allSelection.forEach((selectedRecord) => {
+        const recordIds = updateSelection.map((record) => record.__record__id__);
+        if (!recordIds.includes(selectedRecord.__record__id__)) {
+          updateSelection.push(selectedRecord);
+        }
+      });
+    }
+    else {
+      updateSelection = allSelection.filter((selectedRecord) => {
+        return !(records || [])
+          .some((record) => {
+          return record.__record__id__ === selectedRecord.__record__id__;
+        });
+      });
+    }
+    this._dataUnit.setSelection(updateSelection);
   }
   setData(data) {
     if (this._grid === undefined) {
@@ -119273,7 +119324,7 @@ class AgGridController {
     }
     this._gridOptions.api.forEachNode(node => {
       var _a;
-      if (rowIds && rowIds.includes(node.id)) {
+      if (rowIds && rowIds.find(row => row.__record__id__ === node.id)) {
         node.setSelected(true);
         (_a = this._gridOptions.api) === null || _a === void 0 ? void 0 : _a.ensureNodeVisible(node);
       }
@@ -119281,10 +119332,7 @@ class AgGridController {
         node.setSelected(false);
       }
     });
-    const selectionHeader = this._gridOptions.context.selectionHeader;
-    if (selectionHeader) {
-      selectionHeader.updateCheckbox();
-    }
+    this.updateCheckbox();
   }
   removeRows() {
     if (this._grid === undefined) {
@@ -119379,7 +119427,7 @@ class AgGridController {
     if (this._grid === undefined) {
       throw new Error("Erro interno: Grid ainda não inicializado.");
     }
-    const colDef = this._gridOptions.columnApi.getAllColumns();
+    const colDef = this._gridOptions.columnApi.getColumns();
     return colDef.filter(c => ![this.CHECK_BOX_COL_ID, this.STATUS_COL_ID].includes(c.getColId())).map(c => {
       const def = c.getColDef();
       const colDef = { name: def.field, label: def.headerName };
@@ -119397,12 +119445,16 @@ class AgGridController {
     if (this._grid === undefined) {
       throw new Error("Erro interno: Grid ainda não inicializado.");
     }
+    const colDef = this._gridOptions.columnApi.getColumns();
     let columns = this.getColumnsDef();
     let visibleColumns = [];
+    //Existem colunas implícitas que não tem estado, essas colunas são sempre as primeiras.
+    //Como vamos reordenar, precisamos considerar o deslocamento provocado por elas.
+    const columnsOffset = colDef.length - columns.length;
     let sort = [];
     state.forEach((cfgColumn, index) => {
       const colWidth = this.getColumnWidth(cfgColumn);
-      this._gridOptions.columnApi.moveColumn(cfgColumn.name, index + 2);
+      this._gridOptions.columnApi.moveColumn(cfgColumn.name, index + columnsOffset);
       this._gridOptions.columnApi.setColumnWidth(cfgColumn.name, colWidth);
       visibleColumns.push(cfgColumn.name);
       if (cfgColumn.ascending !== undefined) {
@@ -119463,6 +119515,19 @@ class AgGridController {
     var _a;
     (_a = this._gridOptions.api.getDisplayedRowAtIndex(index)) === null || _a === void 0 ? void 0 : _a.setSelected(true);
   }
+  deselectAll() {
+    var _a, _b;
+    (_b = (_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.deselectAll();
+    this.updateCheckbox();
+  }
+  updateCheckbox() {
+    var _a, _b;
+    const selectionHeader = (_b = (_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.context) === null || _b === void 0 ? void 0 : _b.selectionHeader;
+    if (selectionHeader == undefined) {
+      return;
+    }
+    selectionHeader.updateCheckbox();
+  }
   buildColDef(source) {
     var _a, _b, _c;
     let tooltip = undefined;
@@ -119620,7 +119685,37 @@ class AgGridController {
   }
 }
 
-const ezGridCss = ".sc-ez-grid-h{display:grid;grid-template-rows:auto 1fr auto;height:100%;width:100%;--ezgrid__header--background-color:var(--background--xlight, #FFF);--ezgrid__container--shadow:0 0 16px 0 rgb(0 38 111 / 12%)}.grid-header.sc-ez-grid{display:flex;justify-content:space-between;align-items:center;background-color:var(--ezgrid__header--background-color, #FFF);z-index:var(--visible)}.grid__container.sc-ez-grid{box-shadow:var(--ezgrid__container--shadow);padding-top:15px;margin-top:-12px;background-color:var(--ezgrid__header--background-color)}.grid-header__container.sc-ez-grid{display:flex;align-items:center}";
+const SelectionCounter = (props) => {
+  const { selectionCount, selectionPageCount, total, recordsLength, onSelectAll, onSelectPage, onClearAll, onClose } = props;
+  const pageSelectedRecords = selectionPageCount === recordsLength;
+  const allSelectedRecords = selectionCount === total;
+  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, allSelectedRecords), 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" },
+          (pageSelectedRecords || allSelectedRecords) &&
+            h("ez-button", Object.assign({ class: "ez-margin-right--medium", label: `Selecionar ${allSelectedRecords ? "apenas a página atual" : `todos os ${total} registros`}`, mode: "link", onClick: allSelectedRecords ? onSelectPage : onSelectAll }, getElementID(`ezGridSelectionCounter_select${allSelectedRecords ? "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" })))));
+};
+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)
+  };
+}
+
+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(--more-visible, 2);--ez-grid__container--shadow:0 0 16px 0 rgb(0 38 111 / 12%)}.grid-header.sc-ez-grid{display:flex;justify-content:space-between;align-items:center;background-color:var(--ez-grid__header--background-color, #FFF);z-index:var(--visible)}.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__container.sc-ez-grid{display:flex;align-items:center}.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;z-index:var(--ez-grid__selection-counter--z-index)}.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)}";
 
 const EzGrid = class {
   constructor(hostRef) {
@@ -119630,8 +119725,13 @@ const EzGrid = class {
     this.ezDoubleClick = createEvent(this, "ezDoubleClick", 7);
     this.configChange = createEvent(this, "configChange", 7);
     this._gridController = new AgGridController(false);
+    this._debounceTimer = 500;
+    this._selectionAll = false;
     this._paginationInfo = undefined;
     this._paginationChangedByKeyboard = true;
+    this._showSelectionCounter = false;
+    this._selectionCount = 0;
+    this._selectionPageCount = 0;
     this.multipleSelection = undefined;
     this.config = undefined;
     this.serverUrl = undefined;
@@ -119686,10 +119786,185 @@ const EzGrid = class {
   async quickFilter(term) {
     this._gridController.quickFilter(term);
   }
+  observeConfig(config) {
+    this._gridController.setColumnsState(config.columns);
+  }
   onSelectionChange(evt) {
-    if (this.dataUnit) {
-      this.dataUnit.setSelection(evt.detail.selection.map((r) => r.__record__id__));
+    const { selection } = evt === null || evt === void 0 ? void 0 : evt.detail;
+    if (selection == undefined || this.dataUnit == undefined) {
+      return;
+    }
+    if (this.isAllRecordSetted()) {
+      this.updateSelectionPage(selection);
+      return;
+    }
+    this.setSelection(selection);
+  }
+  updateSelectionPage(selection) {
+    if (this._selectionAll) {
+      this._selectionAll = false;
+    }
+    else {
+      this.dataUnit.clearSelection()
+        .then(() => {
+        const records = this.dataUnit.records;
+        const selectionPage = selection.filter((selectedRecord) => {
+          return records.some((record) => {
+            return record.__record__id__ === selectedRecord.__record__id__;
+          });
+        });
+        this._gridController.selectRows(selectionPage);
+      });
+    }
+  }
+  isAllRecordSetted() {
+    var _a;
+    const allSelection = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getAllSelection();
+    return allSelection === null || allSelection === void 0 ? void 0 : allSelection.some((selectedRecord) => {
+      return selectedRecord.__record__id__ === ALL_RECORD;
+    });
+  }
+  setSelection(selection) {
+    if ((selection === null || selection === void 0 ? void 0 : selection.length) > 0) {
+      this.dataUnit.setSelection(selection)
+        .then(this.controlSelectionCounter.bind(this));
+    }
+    else {
+      this.dataUnit.clearSelection()
+        .then(this.controlSelectionCounter.bind(this));
+    }
+  }
+  setAutoSelectAll() {
+    var _a, _b, _c, _d;
+    const { total } = (_a = this._paginationInfo) !== null && _a !== void 0 ? _a : {};
+    if (total == undefined) {
+      return;
+    }
+    this._selectionCount = total;
+    this._selectionAll = true;
+    this._showSelectionCounter = true;
+    (_b = this._gridController) === null || _b === void 0 ? void 0 : _b.selectRows((_d = (_c = this.dataUnit) === null || _c === void 0 ? void 0 : _c.records) !== null && _d !== void 0 ? _d : []);
+  }
+  controlSelectionCounter() {
+    var _a, _b;
+    const allSelection = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getAllSelection();
+    const counter = (_b = allSelection === null || allSelection === void 0 ? void 0 : allSelection.length) !== null && _b !== void 0 ? _b : 0;
+    if (this.isAllRecordSetted()) {
+      this.setAutoSelectAll();
+      return;
+    }
+    if (!this.multipleSelection || !this.isPaginationActived()) {
+      this._showSelectionCounter = false;
+      setTimeout(this.setSelectionCount.bind(this), this._debounceTimer);
+      return;
+    }
+    if (counter > 1) {
+      setTimeout(() => {
+        this.setSelectionCount(counter);
+        this._showSelectionCounter = true;
+      }, this._debounceTimer);
+    }
+    else {
+      this._showSelectionCounter = false;
+      setTimeout(this.setSelectionCount.bind(this, counter), this._debounceTimer);
+    }
+  }
+  setSelectionCount(value = 0) {
+    var _a, _b;
+    this._selectionCount = value;
+    const selectPageRecords = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getSelectedRecords();
+    this._selectionPageCount = (_b = selectPageRecords === null || selectPageRecords === void 0 ? void 0 : selectPageRecords.length) !== null && _b !== void 0 ? _b : 0;
+  }
+  isPaginationActived() {
+    var _a;
+    const { total, lastRecord, firstRecord } = (_a = this._paginationInfo) !== null && _a !== void 0 ? _a : {};
+    if (total == undefined || lastRecord == undefined || firstRecord == undefined) {
+      return false;
     }
+    return Math.ceil(total / (lastRecord - firstRecord + 1)) > 1;
+  }
+  onSelectAllRecords() {
+    const allRecord = {
+      __record__id__: ALL_RECORD,
+      filter: this.dataUnit.getFilters(),
+      sort: this.dataUnit.getSort()
+    };
+    this.setSelection([allRecord]);
+  }
+  onSelectPageRecords() {
+    var _a;
+    (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.clearSelection().then(() => {
+      var _a, _b, _c;
+      (_a = this._gridController) === null || _a === void 0 ? void 0 : _a.selectRows((_c = (_b = this.dataUnit) === null || _b === void 0 ? void 0 : _b.records) !== null && _c !== void 0 ? _c : []);
+    });
+  }
+  onClearSelectedRecords() {
+    var _a;
+    (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.clearSelection();
+  }
+  createConfigFromState(state) {
+    let newConfig = { columns: [] };
+    state.forEach(columnState => {
+      if (!columnState.hidden) {
+        let newConfigColumn = { name: columnState.name };
+        if (columnState.width) {
+          newConfigColumn['width'] = columnState.width;
+        }
+        if (columnState.sort) {
+          newConfigColumn['ascending'] = (columnState.sort.toUpperCase() === 'ASC');
+          newConfigColumn['orderIndex'] = columnState.sortIndex;
+        }
+        else {
+          newConfigColumn['orderIndex'] = 0;
+        }
+        if (newConfigColumn) {
+          newConfig.columns.push(newConfigColumn);
+        }
+      }
+    });
+    return newConfig;
+  }
+  positionSelectionCounter() {
+    var _a;
+    if (this._gridSelectionCounter == undefined) {
+      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 {
+      this._gridSelectionCounter.style.bottom = "";
+    }
+  }
+  setEvents() {
+    window.removeEventListener("scroll", this.positionSelectionCounter.bind(this));
+    window.addEventListener("scroll", this.positionSelectionCounter.bind(this));
+  }
+  resizeSelectionCounter() {
+    if (this._gridSelectionCounter == undefined) {
+      return;
+    }
+    this._gridSelectionCounter.style.width = "";
+    if (this._gridSelectionCounter.clientHeight > 42) {
+      this._gridSelectionCounter.style.width = "min-content";
+    }
+    this.positionSelectionCounter();
+  }
+  configSelectionCounter() {
+    if (this._element == undefined) {
+      return;
+    }
+    if (this._resizeObserver != undefined) {
+      this._resizeObserver.unobserve(this._element);
+    }
+    this._resizeObserver = new ResizeObserver(JSUtils.debounce(this.resizeSelectionCounter.bind(this), 200));
+    this._resizeObserver.observe(this._element);
+    this.resizeSelectionCounter();
   }
   onColumnStateChange(type, state, info) {
     var _a;
@@ -119732,56 +120007,6 @@ const EzGrid = class {
       }
     }
   }
-  createConfigFromState(state) {
-    let newConfig = { columns: [] };
-    state.forEach(columnState => {
-      if (!columnState.hidden) {
-        let newConfigColumn = { name: columnState.name };
-        if (columnState.width) {
-          newConfigColumn['width'] = columnState.width;
-        }
-        if (columnState.sort) {
-          newConfigColumn['ascending'] = (columnState.sort.toUpperCase() === 'ASC');
-          newConfigColumn['orderIndex'] = columnState.sortIndex;
-        }
-        else {
-          newConfigColumn['orderIndex'] = 0;
-        }
-        if (newConfigColumn) {
-          newConfig.columns.push(newConfigColumn);
-        }
-      }
-    });
-    return newConfig;
-  }
-  componentDidLoad() {
-    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;
-      },
-      onDoubleClick: (row) => {
-        this.ezDoubleClick.emit(row);
-      },
-      allowMultipleSelection: this.multipleSelection,
-      serverURL: this.serverUrl,
-      dataUnit: this.dataUnit,
-      statusResolver: this.statusResolver
-    });
-    if (this.config) {
-      this.observeConfig(this.config);
-    }
-    this.buildDataElementId();
-  }
   buildDataElementId() {
     const dataInfo = { dataUnit: this.dataUnit };
     ElementIDUtils.addIDInfo(this._element, null, dataInfo);
@@ -119811,11 +120036,45 @@ const EzGrid = class {
     }
     return null;
   }
-  observeConfig(config) {
-    this._gridController.setColumnsState(config.columns);
+  componentDidLoad() {
+    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;
+        this._gridController.updateCheckbox();
+        this.controlSelectionCounter();
+      },
+      onDoubleClick: (row) => {
+        this.ezDoubleClick.emit(row);
+      },
+      allowMultipleSelection: this.multipleSelection,
+      serverURL: this.serverUrl,
+      dataUnit: this.dataUnit,
+      statusResolver: this.statusResolver
+    });
+    if (this.config) {
+      this.observeConfig(this.config);
+    }
+    this.buildDataElementId();
+    this.setEvents();
+  }
+  componentWillRender() {
+    this.configSelectionCounter();
   }
   render() {
-    return (h(Host, null, h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, 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", { class: "grid__container ez-grid", ref: elem => this._container = elem }), h("div", { class: "grid__footer" })));
+    var _a, _b, _c;
+    return (h(Host, null, h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, 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
+          ${this._showSelectionCounter ? "grid__selection-counter--opened" : ""}
+        ` }, h(SelectionCounter, { selectionCount: this._selectionCount, selectionPageCount: this._selectionPageCount, total: (_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.total, recordsLength: (_c = (_b = this.dataUnit) === null || _b === void 0 ? void 0 : _b.records) === null || _c === void 0 ? void 0 : _c.length, onSelectAll: this.onSelectAllRecords.bind(this), onSelectPage: this.onSelectPageRecords.bind(this), onClearAll: this.onClearSelectedRecords.bind(this), onClose: () => this._showSelectionCounter = false })), h("div", { class: "grid__container ez-grid", ref: elem => this._container = elem }), h("div", { class: "grid__footer" })));
   }
   static get assetsDirs() { return ["../assets"]; }
   get _element() { return getElement(this); }

package/dist/esm/ezui.js

@@ -14,5 +14,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["ez-actions-button",[[1,"ez-actions-button",{"enabled":[516],"actions":[1040],"size":[513],"showLabel":[516,"show-label"],"displayIcon":[513,"display-icon"],"checkOption":[516,"check-option"],"value":[513],"isTransparent":[516,"is-transparent"],"arrowActive":[516,"arrow-active"],"_selectedAction":[32],"hideActions":[64],"isOpened":[64]}]]],["ez-breadcrumb",[[1,"ez-breadcrumb",{"items":[1040],"fillMode":[1025,"fill-mode"],"maxItems":[1026,"max-items"],"positionEllipsis":[1026,"position-ellipsis"],"visibleItems":[32],"hiddenItems":[32],"showDropdown":[32],"collapseConfigPosition":[32]}]]],["ez-dialog",[[1,"ez-dialog",{"confirm":[1028],"dialogType":[1025,"dialog-type"],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"show":[64]}]]],["ez-grid",[[6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"setColumnsDef":[64],"addColumnMenuItem":[64],"setColumnsState":[64],"setData":[64],"getSelection":[64],"getColumnsState":[64],"getColumns":[64],"quickFilter":[64]},[[0,"ezSelectionChange","onSelectionChange"]]]]],["ez-modal-container",[[6,"ez-modal-container",{"modalTitle":[1,"modal-title"],"modalSubTitle":[1,"modal-sub-title"],"showTitleBar":[4,"show-title-bar"],"cancelButtonLabel":[1,"cancel-button-label"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonStatus":[1,"cancel-button-status"],"okButtonStatus":[1,"ok-button-status"]}]]],["ez-alert",[[1,"ez-alert",{"alertType":[513,"alert-type"]}]]],["ez-chip",[[1,"ez-chip",{"label":[513],"enabled":[516],"removePosition":[513,"remove-position"],"mode":[513],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-file-item",[[1,"ez-file-item",{"canRemove":[4,"can-remove"],"fileName":[1,"file-name"],"iconName":[1,"icon-name"],"fileSize":[2,"file-size"],"progress":[2]}]]],["ez-application",[[0,"ez-application"]]],["ez-card-item",[[1,"ez-card-item",{"item":[16]}]]],["ez-list",[[1,"ez-list",{"dataSource":[1040],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"hoverFeedback":[1028,"hover-feedback"],"_listItems":[32],"_listGroupItems":[32],"clearHistory":[64],"scrollToTop":[64],"setSelection":[64],"getSelection":[64],"getList":[64]}]]],["ez-loading-bar",[[1,"ez-loading-bar",{"_showLoading":[32],"hide":[64],"show":[64]}]]],["ez-modal",[[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]]],["ez-popover",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"innerElement":[1537,"inner-element"],"overlayType":[513,"overlay-type"],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"]}]]],["ez-radio-button",[[1,"ez-radio-button",{"value":[1544],"options":[1040],"enabled":[516],"label":[513],"direction":[1537]}]]],["ez-toast",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"canClose":[1028,"can-close"],"show":[64]}]]],["ez-view-stack",[[0,"ez-view-stack",{"show":[64],"getSelectedIndex":[64]}]]],["ez-form-view",[[2,"ez-form-view",{"fields":[16],"showUp":[64]}]]],["ez-tabselector",[[1,"ez-tabselector",{"selectedIndex":[1538,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1],"_processedTabs":[32]}]]],["ez-text-input",[[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"mask":[1],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513],"noBorder":[516,"no-border"],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-guide-navigator",[[1,"ez-guide-navigator",{"open":[1540],"selectedId":[1537,"selected-id"],"items":[16],"tooltipResolver":[16],"filterText":[32],"disableItem":[64],"enableItem":[64],"updateItem":[64],"getItem":[64],"getCurrentPath":[64],"selectGuide":[64],"getParent":[64]}]]],["ez-dropdown",[[1,"ez-dropdown",{"items":[1040],"value":[1040],"itemBuilder":[16]}]]],["ez-collapsible-box",[[1,"ez-collapsible-box",{"value":[1540],"label":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"],"headerAlign":[513,"header-align"],"removable":[516],"editable":[516],"conditionalSave":[16],"_activeEditText":[32],"showHide":[64],"applyFocusTextEdit":[64],"cancelEdition":[64]}]]],["ez-search",[[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-input",[[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-time-input",[[1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-time-input",[[1,"ez-time-input",{"label":[513],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-number-input",[[1,"ez-number-input",{"label":[1],"value":[1538],"enabled":[4],"errorMessage":[1537,"error-message"],"precision":[2],"prettyPrecision":[2,"pretty-precision"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-check",[[1,"ez-check",{"label":[513],"value":[1540],"enabled":[1540],"indeterminate":[516],"mode":[513],"getMode":[64],"setFocus":[64]}]]],["ez-text-area",[[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"canShowError":[516,"can-show-error"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-upload",[[1,"ez-upload",{"label":[1],"enabled":[4],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"requestHeaders":[8,"request-headers"],"urlUpload":[1,"url-upload"],"urlDelete":[1,"url-delete"],"value":[1040],"addFiles":[64],"setFocus":[64],"setBlur":[64]}]]],["ez-text-edit",[[1,"ez-text-edit",{"value":[1],"styled":[16],"_newValue":[32],"applyFocusSelect":[64]}]]],["ez-combo-box",[[1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressSearch":[4,"suppress-search"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"canShowError":[516,"can-show-error"],"mode":[513],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_criteria":[32],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-filter-input_4",[[1,"ez-filter-input",{"label":[1],"value":[1537],"enabled":[4],"errorMessage":[1537,"error-message"],"restrict":[1],"mode":[513],"asyncSearch":[516,"async-search"],"setFocus":[64],"setBlur":[64],"isInvalid":[64],"setValue":[64],"endSearch":[64]}],[1,"ez-tree",{"items":[1040],"value":[1040],"selectedId":[1537,"selected-id"],"iconResolver":[16],"tooltipResolver":[16],"_tree":[32],"_waintingForLoad":[32],"selectItem":[64],"openItem":[64],"disableItem":[64],"enableItem":[64],"addChild":[64],"applyFilter":[64],"updateItem":[64],"getItem":[64],"getCurrentPath":[64],"getParent":[64]},[[2,"keydown","onKeyDownListener"]]],[1,"ez-scroller",{"direction":[1],"locked":[4],"activeShadow":[4,"active-shadow"],"isActive":[32]},[[2,"click","clickListener"],[1,"mousedown","mouseDownHandler"],[1,"mouseup","mouseUpHandler"],[1,"mousemove","mouseMoveHandler"]]],[1,"ez-sidebar-button"]]],["ez-calendar",[[1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"],"show":[64],"fitVertical":[64],"hide":[64]}]]],["ez-icon",[[1,"ez-icon",{"size":[513],"href":[513],"iconName":[513,"icon-name"]}]]],["ez-button",[[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"iconName":[513,"icon-name"],"size":[513],"setFocus":[64],"setBlur":[64]},[[2,"click","clickListener"]]]]],["ez-form",[[2,"ez-form",{"dataUnit":[1040],"config":[16],"recordsValidator":[16],"validate":[64]}]]]], options);
+  return bootstrapLazy([["ez-actions-button",[[1,"ez-actions-button",{"enabled":[516],"actions":[1040],"size":[513],"showLabel":[516,"show-label"],"displayIcon":[513,"display-icon"],"checkOption":[516,"check-option"],"value":[513],"isTransparent":[516,"is-transparent"],"arrowActive":[516,"arrow-active"],"_selectedAction":[32],"hideActions":[64],"isOpened":[64]}]]],["ez-breadcrumb",[[1,"ez-breadcrumb",{"items":[1040],"fillMode":[1025,"fill-mode"],"maxItems":[1026,"max-items"],"positionEllipsis":[1026,"position-ellipsis"],"visibleItems":[32],"hiddenItems":[32],"showDropdown":[32],"collapseConfigPosition":[32]}]]],["ez-dialog",[[1,"ez-dialog",{"confirm":[1028],"dialogType":[1025,"dialog-type"],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"show":[64]}]]],["ez-grid",[[6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"_showSelectionCounter":[32],"_selectionCount":[32],"_selectionPageCount":[32],"setColumnsDef":[64],"addColumnMenuItem":[64],"setColumnsState":[64],"setData":[64],"getSelection":[64],"getColumnsState":[64],"getColumns":[64],"quickFilter":[64]},[[0,"ezSelectionChange","onSelectionChange"]]]]],["ez-modal-container",[[6,"ez-modal-container",{"modalTitle":[1,"modal-title"],"modalSubTitle":[1,"modal-sub-title"],"showTitleBar":[4,"show-title-bar"],"cancelButtonLabel":[1,"cancel-button-label"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonStatus":[1,"cancel-button-status"],"okButtonStatus":[1,"ok-button-status"]}]]],["ez-alert",[[1,"ez-alert",{"alertType":[513,"alert-type"]}]]],["ez-chip",[[1,"ez-chip",{"label":[513],"enabled":[516],"removePosition":[513,"remove-position"],"mode":[513],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-file-item",[[1,"ez-file-item",{"canRemove":[4,"can-remove"],"fileName":[1,"file-name"],"iconName":[1,"icon-name"],"fileSize":[2,"file-size"],"progress":[2]}]]],["ez-application",[[0,"ez-application"]]],["ez-card-item",[[1,"ez-card-item",{"item":[16]}]]],["ez-list",[[1,"ez-list",{"dataSource":[1040],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"hoverFeedback":[1028,"hover-feedback"],"_listItems":[32],"_listGroupItems":[32],"clearHistory":[64],"scrollToTop":[64],"setSelection":[64],"getSelection":[64],"getList":[64]}]]],["ez-loading-bar",[[1,"ez-loading-bar",{"_showLoading":[32],"hide":[64],"show":[64]}]]],["ez-modal",[[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]]],["ez-popover",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"innerElement":[1537,"inner-element"],"overlayType":[513,"overlay-type"],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"]}]]],["ez-radio-button",[[1,"ez-radio-button",{"value":[1544],"options":[1040],"enabled":[516],"label":[513],"direction":[1537]}]]],["ez-toast",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"canClose":[1028,"can-close"],"show":[64]}]]],["ez-view-stack",[[0,"ez-view-stack",{"show":[64],"getSelectedIndex":[64]}]]],["ez-form-view",[[2,"ez-form-view",{"fields":[16],"showUp":[64]}]]],["ez-tabselector",[[1,"ez-tabselector",{"selectedIndex":[1538,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1],"_processedTabs":[32]}]]],["ez-text-input",[[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"mask":[1],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513],"noBorder":[516,"no-border"],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-guide-navigator",[[1,"ez-guide-navigator",{"open":[1540],"selectedId":[1537,"selected-id"],"items":[16],"tooltipResolver":[16],"filterText":[32],"disableItem":[64],"enableItem":[64],"updateItem":[64],"getItem":[64],"getCurrentPath":[64],"selectGuide":[64],"getParent":[64]}]]],["ez-dropdown",[[1,"ez-dropdown",{"items":[1040],"value":[1040],"itemBuilder":[16]}]]],["ez-collapsible-box",[[1,"ez-collapsible-box",{"value":[1540],"label":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"],"headerAlign":[513,"header-align"],"removable":[516],"editable":[516],"conditionalSave":[16],"_activeEditText":[32],"showHide":[64],"applyFocusTextEdit":[64],"cancelEdition":[64]}]]],["ez-search",[[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-input",[[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-time-input",[[1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-time-input",[[1,"ez-time-input",{"label":[513],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-number-input",[[1,"ez-number-input",{"label":[1],"value":[1538],"enabled":[4],"errorMessage":[1537,"error-message"],"precision":[2],"prettyPrecision":[2,"pretty-precision"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-check",[[1,"ez-check",{"label":[513],"value":[1540],"enabled":[1540],"indeterminate":[1540],"mode":[513],"getMode":[64],"setFocus":[64]}]]],["ez-text-area",[[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"canShowError":[516,"can-show-error"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-upload",[[1,"ez-upload",{"label":[1],"enabled":[4],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"requestHeaders":[8,"request-headers"],"urlUpload":[1,"url-upload"],"urlDelete":[1,"url-delete"],"value":[1040],"addFiles":[64],"setFocus":[64],"setBlur":[64]}]]],["ez-text-edit",[[1,"ez-text-edit",{"value":[1],"styled":[16],"_newValue":[32],"applyFocusSelect":[64]}]]],["ez-combo-box",[[1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressSearch":[4,"suppress-search"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"canShowError":[516,"can-show-error"],"mode":[513],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_criteria":[32],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-filter-input_4",[[1,"ez-filter-input",{"label":[1],"value":[1537],"enabled":[4],"errorMessage":[1537,"error-message"],"restrict":[1],"mode":[513],"asyncSearch":[516,"async-search"],"setFocus":[64],"setBlur":[64],"isInvalid":[64],"setValue":[64],"endSearch":[64]}],[1,"ez-tree",{"items":[1040],"value":[1040],"selectedId":[1537,"selected-id"],"iconResolver":[16],"tooltipResolver":[16],"_tree":[32],"_waintingForLoad":[32],"selectItem":[64],"openItem":[64],"disableItem":[64],"enableItem":[64],"addChild":[64],"applyFilter":[64],"updateItem":[64],"getItem":[64],"getCurrentPath":[64],"getParent":[64]},[[2,"keydown","onKeyDownListener"]]],[1,"ez-scroller",{"direction":[1],"locked":[4],"activeShadow":[4,"active-shadow"],"isActive":[32]},[[2,"click","clickListener"],[1,"mousedown","mouseDownHandler"],[1,"mouseup","mouseUpHandler"],[1,"mousemove","mouseMoveHandler"]]],[1,"ez-sidebar-button"]]],["ez-calendar",[[1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"],"show":[64],"fitVertical":[64],"hide":[64]}]]],["ez-icon",[[1,"ez-icon",{"size":[513],"href":[513],"iconName":[513,"icon-name"]}]]],["ez-button",[[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"iconName":[513,"icon-name"],"size":[513],"setFocus":[64],"setBlur":[64]},[[2,"click","clickListener"]]]]],["ez-form",[[2,"ez-form",{"dataUnit":[1040],"config":[16],"recordsValidator":[16],"validate":[64]}]]]], options);
 });