@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-132280.3 → 0.0.0-bugfix-dev-KB-157120.0

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

@@ -259,7 +259,14 @@ export default class DataSource {
             for (const value in properties) {
               props.set(value, properties[value]);
             }
-            const col = { label: f.label, name: f.name, userInterface: f.userInterface, options: (_a = this._dataUnit.getField(f.name).properties) === null || _a === void 0 ? void 0 : _a.options, props };
+            const col = {
+              label: f.label,
+              name: f.name,
+              userInterface: f.userInterface,
+              options: (_a = this._dataUnit.getField(f.name).properties) === null || _a === void 0 ? void 0 : _a.options,
+              props,
+              aggFunc: f['aggFunc']
+            };
             columnDefs.push(col);
             if (f.userInterface === UserInterface.SEARCHPLUS && ((_b = f.properties) === null || _b === void 0 ? void 0 : _b.DESCRIPTIONFIELD)) {
               const descriptionField = this.getDescriptionField((_c = f.properties) === null || _c === void 0 ? void 0 : _c.DESCRIPTIONFIELD, (_d = f.properties) === null || _d === void 0 ? void 0 : _d.ENTITYNAME);

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

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

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

@@ -0,0 +1,24 @@
+const BUILTIN_AGG_FUNCS = {
+  "sum": (params) => params.values.reduce((a, b) => Number(a !== null && a !== void 0 ? a : 0) + Number(b !== null && b !== void 0 ? b : 0), 0),
+  avg: (params) => {
+    const valid = params.values.filter(v => v != null && !Number.isNaN(v));
+    return valid.length
+      ? valid.reduce((a, b) => a + b, 0) / valid.length
+      : null;
+  },
+  min: (params) => {
+    const valid = params.values.filter(v => v != null && !Number.isNaN(v));
+    return valid.length ? Math.min(...valid) : null;
+  },
+  max: (params) => Math.max(...params.values.filter(v => v != null && !Number.isNaN(v))),
+  count: (params) => params.values.filter(v => v != null).length
+};
+export function resolveAggFunc(aggFunc) {
+  if (typeof aggFunc === 'function')
+    return aggFunc;
+  const fn = BUILTIN_AGG_FUNCS[aggFunc];
+  if (!fn) {
+    throw new Error(`aggFunc "${aggFunc}" não suportada`);
+  }
+  return fn;
+}

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

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

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

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

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

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

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

@@ -1,6 +1,10 @@
 .filter-column {
   padding: var(--space--2xs, 8px);
   position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
 }
 
 .filter-column__header {
@@ -10,6 +14,7 @@
   align-items: center;
   justify-content: space-between;
   height: var(--space--xl, 32px);
+  flex: 0 0 auto;
 }
 
 .filter-column__footer {
@@ -23,6 +28,7 @@
   left: 0;
   padding-top: var(--space--2xs, 8px);
   border-top: var(--border--medium) var(--color--disable-secondary);
+  flex: 0 0 auto;
 }
 
 .filter-column__popover {
@@ -35,4 +41,8 @@
 
 #filter-column-selection-list {
   --ez-multi-selection-default-height: unset;
+  --ez-multi-selection-default-max-height: 100%;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
 }

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

@@ -102,7 +102,7 @@ export class FilterColumn {
     this.options = null;
   }
   buildOptions(selectedItems) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     if (selectedItems && selectedItems.length > 0) {
       return selectedItems;
     }
@@ -110,10 +110,16 @@ export class FilterColumn {
       return [
         { label: this.i18n("app.yes"), value: 'true', check: true },
         { label: this.i18n("app.no"), value: 'false', check: true },
+        { label: '', value: null, check: true },
       ];
     }
     const options = (_b = (_a = this.fieldDescriptor) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.options;
     if (Array.isArray(options)) {
+      if ((_d = (_c = this.fieldDescriptor) === null || _c === void 0 ? void 0 : _c.properties) === null || _d === void 0 ? void 0 : _d.switchLabelsAndValues) {
+        return options.map((option) => {
+          return { label: option.label, value: option.value, check: true };
+        });
+      }
       return options.map((option) => {
         return { label: option.value, value: option.value, check: true };
       });

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

@@ -12,7 +12,7 @@ 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({ key: "selectAllRecordsEzButton", 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({ key: "clearAllSelectionEzButton", class: "grid__btn-clear", label: i18n("ez-grid.clearSelection"), mode: "link", onClick: onClearAll }, getElementID("ezGridSelectionCounter_clearAll"))))), h("button", Object.assign({ class: "grid__btn-close", title: i18n("app.close"), onClick: onClose }, getElementID("ezGridSelectionCounter_close")), h("ez-icon", { iconName: "close" })))));
+    h("ez-button", Object.assign({ key: "selectAllRecordsEzButton", title: buildSelectAllTitle(total), enabled: enableSelectAll(total), class: "ez-margin-right--medium ez-padding-vertical--medium", label: buildSelectAllLabel(allRecordSelected, count, total), mode: "link", onClick: allRecordSelected ? onSelectPage : onSelectAll }, getElementID(`ezGridSelectionCounter_select${allRecordSelected ? "Page" : "All"}`))), h("ez-button", Object.assign({ key: "clearAllSelectionEzButton", class: "grid__btn-clear ez-padding-vertical--medium", label: i18n("ez-grid.clearSelection"), mode: "link", onClick: onClearAll }, getElementID("ezGridSelectionCounter_clearAll"))))), h("button", Object.assign({ class: "grid__btn-close", title: i18n("app.close"), onClick: onClose }, getElementID("ezGridSelectionCounter_close")), h("ez-icon", { iconName: "close" })))));
 };
 function getElementID(sufix) {
   return {

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

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

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

@@ -0,0 +1,111 @@
+:host {
+  display: block;
+}
+
+.pagination__container {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+}
+
+.pagination__buttons-container {
+  display: flex;
+  border-radius: 50%;
+  background-color: var(--color--ocean-green-90, #E1E2E5);
+  cursor: pointer;
+}
+
+.pagination__buttons-container ez-icon {
+  --ez-icon--color: var(--color--ocean-green-600, #008561);
+}
+
+.pagination__buttons-container.disabled {
+  background-color: #DEDEDE;
+  cursor: not-allowed;
+  pointer-events: auto;
+}
+
+.pagination__buttons-container.disabled ez-icon {
+  --ez-icon--color: var(--color--petroleum-300, #848D9C);
+  pointer-events: none;
+}
+.pagination__page-navigator {
+  display: flex;
+  align-items: center;
+}
+
+.pagination__row-summary-panel {
+  font-size: var(--font-size--default, 14px);
+  font-family: var(--font--pattern, 'Roboto');
+  color: var(--color--petroleum-300, #848D9C);
+  font-weight: var(--font-weight--regular, 400);
+  padding: var(--space--8, 8px) var(--space--16, 16px);
+}
+.pagination__page-summary-panel {
+  display: flex;
+  align-items: center;
+  padding: var(--space--8, 8px) var(--space--16, 16px);
+  gap: var(--space--4, 4px);
+}
+
+.pagination__container-label {
+  margin: 0 var(--space--8, 8px);
+}
+
+.pagination-contracted {
+  width: 100px;
+}
+
+.pagination-expanded {
+  min-width: 150px;
+}
+
+.pagination__label {
+  font-family: var(--font--pattern, 'Roboto');
+  color: var(--color--petroleum-300, #848D9C);
+  font-weight: var(--font-weight--regular, 400);
+  width: 100%;
+  white-space: nowrap
+}
+
+.cancel-pagination {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space--4, 4px);
+  padding: var(--space--8, 8px);
+}
+
+.spin {
+  animation-name: spin;
+  animation-duration: 5000ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.cancel-pagination-btn {
+  color: var(--color--red-600, #BD0025);
+  font-size: var(--font-size--medium, 16px);
+  font-weight: var(--font-weight--semi-bold, 600);
+  font-family: var(--font--pattern, 'Roboto');
+  text-wrap: nowrap;
+  cursor: pointer;
+}
+
+.pagination-text-right {
+  flex-direction: row-reverse;
+}