@sankhyalabs/ezui 7.2.0-dev.1 → 7.2.0-dev.11

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/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;
+}