@sankhyalabs/ezui 4.1.0 → 4.2.0

package/dist/custom-elements/index.js

@@ -261,12 +261,23 @@ const buildFormMetadata = (config, dataUnit, includeDetails = false) => {
         }
         let defaultValue = field.defaultValue == undefined ? (_c = descriptor.properties) === null || _c === void 0 ? void 0 : _c.defaultValue : field.defaultValue;
         if (defaultValue) {
-          if ((typeof defaultValue === "object") && defaultValue["type"] === "V") {
-            // Atualmente a configuração do formulário eventualmente deposita um objeto
-            // prototipado como {type: "V", value: "${nome.de.variavel}"} para campos com
-            // valor padrão do tipo variável. Dessa forma precisamos "desenvelopar" o valor
-            // para que a variável chegue corretamente a seu destino.
-            defaultValue = defaultValue["value"];
+          const { type, value } = defaultValue;
+          if (type) {
+            if (type === "V") {
+              defaultValue = value;
+            }
+            else {
+              try {
+                const parsed = JSON.parse(value);
+                if (parsed && "value" in parsed) {
+                  defaultValue = parsed;
+                }
+                else {
+                  defaultValue = value;
+                }
+              }
+              catch (_d) { }
+            }
           }
           defaultValues[field.name] = defaultValue;
         }
@@ -335,9 +346,8 @@ const buildDetailSheet = (child) => {
 
 class DataBinder {
   constructor(dataUnit) {
-    this._invalidFields = new Map();
     this.onDataUnitEvent = (action) => {
-      var _a;
+      var _a, _b;
       switch (action.type) {
         case Action.DATA_LOADED:
         case Action.DATA_SAVED:
@@ -346,6 +356,7 @@ class DataBinder {
         case Action.RECORDS_COPIED:
         case Action.EDITION_CANCELED:
         case Action.SELECTION_CHANGED:
+        case Action.SELECTION_REMOVED:
         case Action.NEXT_SELECTED:
         case Action.PREVIOUS_SELECTED:
           this.clearInvalid();
@@ -357,13 +368,30 @@ class DataBinder {
             this.updateValue(field.fieldName, field.field);
           });
           break;
+        case Action.FIELD_INVALIDATED:
+          (_b = this._fields) === null || _b === void 0 ? void 0 : _b.forEach(field => {
+            this.updateErrorMessage(field.fieldName, field.field);
+          });
+          break;
       }
     };
     this._fields = new Map();
     this._dataUnit = dataUnit;
+    this.applyDefaultValues();
     this._dataUnit.subscribe(this.onDataUnitEvent);
     this._dataUnit.addInterceptor(this);
   }
+  applyDefaultValues() {
+    const recordIds = (this._dataUnit.getAddedRecords() || []).map(r => r.__record__id__);
+    if (recordIds.length > 0) {
+      const defaultValues = this.getDefaultValues();
+      if (defaultValues) {
+        Object.keys(defaultValues).forEach(field => {
+          this._dataUnit.setFieldValue(field, defaultValues[field], recordIds);
+        });
+      }
+    }
+  }
   bind(fields, currentContextName, formMetadata, recordsValidator) {
     fields.forEach(fieldElement => {
       const { fieldName, contextName } = fieldElement.dataset;
@@ -378,17 +406,19 @@ class DataBinder {
     this._dataUnit.unsubscribe(this.onDataUnitEvent);
     this._dataUnit.removeInterceptor(this);
   }
+  getCurrentRecordId() {
+    const record = this._dataUnit.getSelectedRecord();
+    return record === null || record === void 0 ? void 0 : record.__record__id__;
+  }
   markInvalid(field) {
-    this._invalidFields.set(field.name, field);
+    this._dataUnit.setInvalidField(field.name, field.message, this.getCurrentRecordId());
     if (this._fields.has(field.name)) {
       const fieldElement = this._fields.get(field.name).field;
-      if (!fieldElement["errorMessage"]) {
-        this.updateErrorMessage(field.name, fieldElement);
-      }
+      this.updateErrorMessage(field.name, fieldElement, field.message);
     }
   }
-  clearInvalid() {
-    this._invalidFields.clear();
+  clearInvalid(recordId) {
+    this._dataUnit.clearInvalid(recordId);
     this._fields.forEach(fieldBinder => {
       const fieldElement = fieldBinder.field;
       fieldElement["errorMessage"] = "";
@@ -470,16 +500,18 @@ class DataBinder {
       }
     });
   }
-  updateErrorMessage(fieldName, field) {
-    const invalidField = this._invalidFields.get(fieldName);
-    if (invalidField) {
-      field["errorMessage"] = invalidField.message;
+  updateErrorMessage(fieldName, field, message) {
+    if (message == undefined) {
+      message = this._dataUnit.getInvalidMessage(this.getCurrentRecordId(), fieldName);
+    }
+    if (!field["errorMessage"]) {
+      field["errorMessage"] = message;
     }
   }
   getErrorMessage(fieldName) {
     if (this._fields.has(fieldName)) {
       const fieldElement = this._fields.get(fieldName).field;
-      return fieldElement["errorMessage"] || null;
+      return fieldElement["errorMessage"];
     }
     return undefined;
   }
@@ -530,7 +562,7 @@ class DataBinder {
     if (this._dataUnit.records.length === 0) {
       this._dataUnit.addRecord();
     }
-    this._invalidFields.delete(fieldName);
+    this._dataUnit.clearInvalid(this.getCurrentRecordId(), fieldName);
     this._dataUnit.setFieldValue(fieldName, newValue);
     if (this._dataUnit.waitingForChange(fieldName)) {
       const bind = this._fields.get(fieldName);
@@ -563,7 +595,6 @@ class DataBinder {
     }
   }
   interceptAction(action) {
-    var _a;
     if (action.type === Action.RECORDS_COPIED) {
       const cleanFields = this._formMetadata.getCleanOnCopyFields();
       if (cleanFields) {
@@ -583,30 +614,27 @@ class DataBinder {
       });
     }
     if (action.type === Action.RECORDS_ADDED) {
-      const defaultValues = (_a = this._formMetadata) === null || _a === void 0 ? void 0 : _a.getDefaultValues();
+      const defaultValues = this.getDefaultValues();
       if (defaultValues) {
         const records = action.payload;
         return new DataUnitAction(Action.RECORDS_ADDED, records.map(record => {
-          const newRecord = Object.assign({}, record);
-          for (const field in defaultValues) {
-            const defaultValue = this.getFormattedValue(defaultValues[field]);
-            const recordValue = typeof defaultValue === "function" ? defaultValue() : defaultValue;
-            newRecord[field] = this._dataUnit.valueFromString(field, recordValue);
-          }
-          return newRecord;
+          return Object.assign(Object.assign({}, record), defaultValues);
         }));
       }
     }
     return action;
   }
-  getFormattedValue(defaultValue) {
-    if (defaultValue == undefined || typeof defaultValue !== "object") {
-      return defaultValue;
-    }
-    if ("formattedValue" in defaultValue) {
-      return defaultValue.formattedValue;
+  getDefaultValues() {
+    var _a;
+    const rawDefaultValues = (_a = this._formMetadata) === null || _a === void 0 ? void 0 : _a.getDefaultValues();
+    if (rawDefaultValues) {
+      const defaultValues = {};
+      for (const field in rawDefaultValues) {
+        defaultValues[field] = this._dataUnit.valueFromString(field, rawDefaultValues[field]);
+      }
+      return defaultValues;
     }
-    return defaultValue.value;
+    return undefined;
   }
 }
 class Bind {
@@ -1538,6 +1566,16 @@ const EzCheck$1 = class extends HTMLElement$1 {
     if (newValue != oldValue) {
       this._inputElem.checked = newValue;
     }
+    if (this._inputElem.indeterminate != this.indeterminate) {
+      this._inputElem.indeterminate = this.indeterminate;
+    }
+  }
+  observeIndeterminate(newValue, oldValue) {
+    if (!this._inputElem)
+      return;
+    if (newValue != oldValue) {
+      this._inputElem.indeterminate = newValue;
+    }
   }
   //---------------------------------------------
   // Public methods
@@ -1582,7 +1620,8 @@ const EzCheck$1 = class extends HTMLElement$1 {
   }
   get _element() { return this; }
   static get watchers() { return {
-    "value": ["observeValue"]
+    "value": ["observeValue"],
+    "indeterminate": ["observeIndeterminate"]
   }; }
   static get style() { return ezCheckCss; }
 };
@@ -1817,6 +1856,7 @@ const EzCollapsibleBox$1 = class extends HTMLElement$1 {
 };
 
 const REQUIRED_INFO = " (obrigatório) *";
+const ALL_RECORD = "ALL_RECORD";
 
 const ezComboBoxCss = ":host{--ez-combo-box--height:42px;--ez-combo-box--width:100%;--ez-combo-box__icon--width:48px;--ez-combo-box--border-radius:var(--border--radius-medium, 12px);--ez-combo-box--border-radius-small:var(--border--radius-small, 6px);--ez-combo-box--font-size:var(--text--medium, 14px);--ez-combo-box--font-family:var(--font-pattern, Arial);--ez-combo-box--font-weight--large:var(--text-weight--large, 500);--ez-combo-box--font-weight--medium:var(--text-weight--medium, 400);--ez-combo-box--background-color--xlight:var(--background--xlight, #fff);--ez-combo-box--background-medium:var(--background--medium, #f0f3f7);--ez-combo-box--line-height:calc(var(--text--medium, 14px) + 4px);--ez-combo-box__input--background-color:var(--background--medium, #e0e0e0);--ez-combo-box__input--border:var(--border--medium, 2px solid);--ez-combo-box__input--border-color:var(--ez-combo-box__input--background-color);--ez-combo-box__input--focus--border-color:var(--color--primary, #008561);--ez-combo-box__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-combo-box__input--disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__input--error--border-color:#CC2936;--ez-combo-box__btn--color:var(--title--primary, #2B3A54);--ez-combo-box__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__btn-hover--color:var(--color--primary, #4e4e4e);--ez-combo-box__label--color:var(--title--primary, #2B3A54);--ez-combo-box__list-title--primary:var(--title--primary, #2B3A54);--ez-combo-box__list-text--primary:var(--text--primary, #626e82);--ez-combo-box__list-height:calc(var(--ez-combo-box--font-size) + var(--ez-combo-box--space--medium) + 4px);--ez-combo-box--space--medium:var(--space--medium, 12px);--ez-combo-box--space--small:var(--space--small, 6px);--ez-combo-box__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-combo-box__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-combo-box__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-combo-box__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-combo-box__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-combo-box__scrollbar--width:var(--space--medium, 12px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-combo-box--width)}ez-icon{--ez-icon--color:inherit;font-weight:var(--text-weight--large, 600)}.suppressed-search-input{--ez-text-input__input--border-color:var(--color--strokes, #dce0e8);--ez-text-input__input--disabled--background-color:var(--background--xlight, #fff);--ez-text-input__input--disabled--color:var(--title--primary, #2B3A54)}.list-container{position:relative;width:100%}.list-wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:100%;z-index:var(--more-visible, 2);max-height:calc(4*var(--ez-combo-box__list-height) + 2*var(--ez-combo-box--space--small) + 9px);background-color:var(--ez-combo-box--background-color--xlight);border-radius:var(--ez-combo-box--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000);padding:var(--ez-combo-box--space--small)}.list-options{box-sizing:border-box;width:100%;height:100%;display:flex;flex-direction:column;scroll-behavior:smooth;overflow:auto;scrollbar-width:thin;gap:3px;scrollbar-color:var(--ez-combo-box__scrollbar--color-clicked) var(--ez-combo-box__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--ez-combo-box__scrollbar--color-background);width:var(--ez-combo-box__scrollbar--width);max-width:var(--ez-combo-box__scrollbar--width);min-width:var(--ez-combo-box__scrollbar--width)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-combo-box__scrollbar--color-background);border-radius:var(--ez-combo-box__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-combo-box__scrollbar--color-default);border-radius:var(--ez-combo-box__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-combo-box__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-combo-box__scrollbar--color-clicked)}.item{display:flex;align-items:center;width:100%;box-sizing:border-box;list-style-type:none;cursor:pointer;border-radius:var(--ez-combo-box--border-radius-small);padding:var(--ez-combo-box--space--small);min-height:var(--ez-combo-box__list-height);gap:var(--space--small, 6px)}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-combo-box__list-title--primary);font-family:var(--ez-combo-box--font-family);font-size:var(--ez-combo-box--font-size);line-height:var(--ez-combo-box--line-height)}.item__label{font-weight:var(--ez-combo-box--font-weight--medium)}.item__label--bold{font-weight:var(--ez-combo-box--font-weight--large)}.item__value{text-align:center;color:var(--ez-combo-box__list-text--primary);font-weight:var(--ez-combo-box--font-weight--large)}.item__value--hidden{visibility:hidden;position:absolute;white-space:nowrap;z-index:-1;top:0;left:0}.item__label{text-align:left}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;min-height:var(--ez-combo-box__list-height)}.message__no-result{color:var(--ez-combo-box__list-title--primary);font-family:var(--ez-combo-box--font-family);font-size:var(--ez-combo-box--font-size)}.message__loading{border-radius:50%;width:14px;height:14px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border:3px solid var(--ez-combo-box__list-title--primary);border-top:3px solid transparent}li:hover{background-color:var(--ez-combo-box--background-medium)}.preselected{background-color:var(--background--medium)}.btn{outline:none;border:none;background:none;cursor:pointer;color:var(--ez-combo-box__btn--color)}.btn:disabled{cursor:unset;color:var(--ez-combo-box__btn-disabled--color)}.btn:disabled:hover{cursor:unset;color:var(--ez-combo-box__btn-disabled--color)}.btn:hover{color:var(--ez-combo-box__btn-hover--color)}.btn__close{visibility:hidden}ez-text-input:hover .btn__close,ez-text-input:focus .btn__close{visibility:visible}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
 
@@ -123110,6 +123150,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();
@@ -123123,7 +123164,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)) {
@@ -123325,7 +123373,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);
       }
@@ -123399,30 +123447,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) {
@@ -123446,7 +123536,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);
       }
@@ -123454,10 +123544,7 @@ class AgGridController {
         node.setSelected(false);
       }
     });
-    const selectionHeader = this._gridOptions.context.selectionHeader;
-    if (selectionHeader) {
-      selectionHeader.updateCheckbox();
-    }
+    this.updateCheckbox();
   }
   removeRows() {
     if (this._grid === undefined) {
@@ -123552,7 +123639,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 };
@@ -123570,12 +123657,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) {
@@ -123636,6 +123727,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;
@@ -123794,8 +123898,8 @@ class AgGridController {
 }
 
 const SelectionCounter = (props) => {
-  const { selectionCount, total, pageSize, onSelectAll, onSelectPage, onClearAll, onClose } = props;
-  const pageSelectedRecords = selectionCount === pageSize;
+  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" },
@@ -123835,10 +123939,12 @@ const EzGrid$1 = class extends HTMLElement$1 {
     this.configChange = createEvent(this, "configChange", 7);
     this._gridController = new AgGridController(false);
     this._debounceTimer = 500;
+    this._selectionAll = false;
     this._paginationInfo = undefined;
     this._paginationChangedByKeyboard = true;
-    this._selectionCount = 0;
     this._showSelectionCounter = false;
+    this._selectionCount = 0;
+    this._selectionPageCount = 0;
     this.multipleSelection = undefined;
     this.config = undefined;
     this.serverUrl = undefined;
@@ -123893,32 +123999,94 @@ const EzGrid$1 = class extends HTMLElement$1 {
   async quickFilter(term) {
     this._gridController.quickFilter(term);
   }
+  observeConfig(config) {
+    this._gridController.setColumnsState(config.columns);
+  }
   onSelectionChange(evt) {
-    var _a, _b, _c;
-    (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.setSelection((_c = (_b = evt === null || evt === void 0 ? void 0 : evt.detail) === null || _b === void 0 ? void 0 : _b.selection) === null || _c === void 0 ? void 0 : _c.map((r) => r.__record__id__));
-    this.controlSelectionCount();
+    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 : []);
   }
-  controlSelectionCount() {
+  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;
     }
-    this.getSelection()
-      .then((records) => {
-      var _a;
-      const counter = (_a = records === null || records === void 0 ? void 0 : records.length) !== null && _a !== void 0 ? _a : 0;
-      this._showSelectionCounter = counter > 1;
-      if (this._showSelectionCounter) {
+    if (counter > 1) {
+      setTimeout(() => {
         this.setSelectionCount(counter);
-      }
-      else {
-        setTimeout(this.setSelectionCount.bind(this, counter), this._debounceTimer);
-      }
-    });
+        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;
@@ -123929,60 +124097,23 @@ const EzGrid$1 = class extends HTMLElement$1 {
     return Math.ceil(total / (lastRecord - firstRecord + 1)) > 1;
   }
   onSelectAllRecords() {
-    var _a;
-    const { total } = (_a = this._paginationInfo) !== null && _a !== void 0 ? _a : {};
-    if (total == undefined) {
-      return;
-    }
-    this._selectionCount = total;
+    const allRecord = {
+      __record__id__: ALL_RECORD,
+      filter: this.dataUnit.getFilters(),
+      sort: this.dataUnit.getSort()
+    };
+    this.setSelection([allRecord]);
   }
   onSelectPageRecords() {
-    this.controlSelectionCount();
+    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._gridController) === null || _a === void 0 ? void 0 : _a.selectRows([]);
-  }
-  onColumnStateChange(type, state, info) {
-    var _a;
-    this.ezColumnStateChange.emit({ type, state, isUserChange: info.isUserChange });
-    if (info.isUserChange) {
-      if (type === 'columnMovedEnd' && !info.isElementResize) {
-        let newConfig;
-        if (this.config) {
-          newConfig = { columns: [] };
-          state.forEach(columnState => {
-            let newConfigColumn = this.config.columns.find(column => column.name === columnState.name);
-            if (newConfigColumn) {
-              newConfigColumn.width = columnState.width;
-              newConfig.columns.push(newConfigColumn);
-            }
-          });
-        }
-        else {
-          newConfig = this.createConfigFromState(state);
-        }
-        if (newConfig.columns.length > 0) {
-          this.configChange.emit(newConfig);
-        }
-      }
-      else if (type === 'columnResize') {
-        if ((_a = info.column) === null || _a === void 0 ? void 0 : _a.colId) {
-          let newConfig;
-          if (this.config) {
-            newConfig = Object.assign({}, this.config);
-          }
-          else {
-            newConfig = this.createConfigFromState(state);
-          }
-          let newColumn = newConfig.columns.find(column => column.name === info.column.colId);
-          if (newColumn) {
-            newColumn.customWidth = info.column.actualWidth;
-            this.configChange.emit(newConfig);
-          }
-        }
-      }
-    }
+    (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.clearSelection();
   }
   createConfigFromState(state) {
     let newConfig = { columns: [] };
@@ -124048,34 +124179,46 @@ const EzGrid$1 = class extends HTMLElement$1 {
     this._resizeObserver.observe(this._element);
     this.resizeSelectionCounter();
   }
-  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();
+  onColumnStateChange(type, state, info) {
+    var _a;
+    this.ezColumnStateChange.emit({ type, state, isUserChange: info.isUserChange });
+    if (info.isUserChange) {
+      if (type === 'columnMovedEnd' && !info.isElementResize) {
+        let newConfig;
+        if (this.config) {
+          newConfig = { columns: [] };
+          state.forEach(columnState => {
+            let newConfigColumn = this.config.columns.find(column => column.name === columnState.name);
+            if (newConfigColumn) {
+              newConfigColumn.width = columnState.width;
+              newConfig.columns.push(newConfigColumn);
+            }
+          });
         }
         else {
-          this._gridController.setFocusFirstRow();
-          this._paginationChangedByKeyboard = true;
+          newConfig = this.createConfigFromState(state);
         }
-        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);
+        if (newConfig.columns.length > 0) {
+          this.configChange.emit(newConfig);
+        }
+      }
+      else if (type === 'columnResize') {
+        if ((_a = info.column) === null || _a === void 0 ? void 0 : _a.colId) {
+          let newConfig;
+          if (this.config) {
+            newConfig = Object.assign({}, this.config);
+          }
+          else {
+            newConfig = this.createConfigFromState(state);
+          }
+          let newColumn = newConfig.columns.find(column => column.name === info.column.colId);
+          if (newColumn) {
+            newColumn.customWidth = info.column.actualWidth;
+            this.configChange.emit(newConfig);
+          }
+        }
+      }
     }
-    this.buildDataElementId();
-    this.setEvents();
   }
   buildDataElementId() {
     const dataInfo = { dataUnit: this.dataUnit };
@@ -124106,17 +124249,45 @@ const EzGrid$1 = class extends HTMLElement$1 {
     }
     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() {
-    var _a, _b;
+    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, total: (_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.total, pageSize: (_b = this.dataUnit) === null || _b === void 0 ? void 0 : _b.pageSize, 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" })));
+        ` }, 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 this; }
@@ -127565,7 +127736,7 @@ const EzBreadcrumb = /*@__PURE__*/proxyCustomElement(EzBreadcrumb$1, [1,"ez-brea
 const EzButton = /*@__PURE__*/proxyCustomElement(EzButton$1, [1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"iconName":[513,"icon-name"],"size":[513]},[[2,"click","clickListener"]]]);
 const EzCalendar = /*@__PURE__*/proxyCustomElement(EzCalendar$1, [1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"]}]);
 const EzCardItem = /*@__PURE__*/proxyCustomElement(EzCardItem$1, [1,"ez-card-item",{"item":[16]}]);
-const EzCheck = /*@__PURE__*/proxyCustomElement(EzCheck$1, [1,"ez-check",{"label":[513],"value":[1540],"enabled":[1540],"indeterminate":[516],"mode":[513]}]);
+const EzCheck = /*@__PURE__*/proxyCustomElement(EzCheck$1, [1,"ez-check",{"label":[513],"value":[1540],"enabled":[1540],"indeterminate":[1540],"mode":[513]}]);
 const EzChip = /*@__PURE__*/proxyCustomElement(EzChip$1, [1,"ez-chip",{"label":[513],"enabled":[516],"removePosition":[513,"remove-position"],"mode":[513],"value":[1540]}]);
 const EzCollapsibleBox = /*@__PURE__*/proxyCustomElement(EzCollapsibleBox$1, [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]}]);
 const EzComboBox = /*@__PURE__*/proxyCustomElement(EzComboBox$1, [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]}]);
@@ -127577,7 +127748,7 @@ const EzFileItem = /*@__PURE__*/proxyCustomElement(EzFileItem$1, [1,"ez-file-ite
 const EzFilterInput = /*@__PURE__*/proxyCustomElement(EzFilterInput$1, [1,"ez-filter-input",{"label":[1],"value":[1537],"enabled":[4],"errorMessage":[1537,"error-message"],"restrict":[1],"mode":[513],"asyncSearch":[516,"async-search"]}]);
 const EzForm = /*@__PURE__*/proxyCustomElement(EzForm$1, [2,"ez-form",{"dataUnit":[1040],"config":[16],"recordsValidator":[16]}]);
 const EzFormView = /*@__PURE__*/proxyCustomElement(EzFormView$1, [2,"ez-form-view",{"fields":[16]}]);
-const EzGrid = /*@__PURE__*/proxyCustomElement(EzGrid$1, [6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"_selectionCount":[32],"_showSelectionCounter":[32]},[[0,"ezSelectionChange","onSelectionChange"]]]);
+const EzGrid = /*@__PURE__*/proxyCustomElement(EzGrid$1, [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]},[[0,"ezSelectionChange","onSelectionChange"]]]);
 const EzGuideNavigator = /*@__PURE__*/proxyCustomElement(EzGuideNavigator$1, [1,"ez-guide-navigator",{"open":[1540],"selectedId":[1537,"selected-id"],"items":[16],"tooltipResolver":[16],"filterText":[32]}]);
 const EzIcon = /*@__PURE__*/proxyCustomElement(EzIcon$1, [1,"ez-icon",{"size":[513],"href":[513],"iconName":[513,"icon-name"]}]);
 const EzList = /*@__PURE__*/proxyCustomElement(EzList$1, [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]}]);