@sankhyalabs/ezui 7.2.0 → 7.3.0

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

@@ -1,4 +1,4 @@
-import { ElementIDUtils, JSUtils, StringUtils, ApplicationContext, KeyboardManager, } from '@sankhyalabs/core';
+import { ElementIDUtils, JSUtils, OverflowWatcher, OVERFLOWED_CLASS_NAME, 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,7 +50,6 @@ export class EzGrid {
     this.useSearchColumn = true;
     this.suppressHorizontalScroll = false;
     this.mode = "complete";
-    this.hidePagination = false;
   }
   /**
    * Aplica a definição de colunas.
@@ -200,17 +199,26 @@ 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;
@@ -373,6 +381,23 @@ 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) {
@@ -392,6 +417,38 @@ 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;
@@ -456,9 +513,76 @@ export class EzGrid {
     }
     this._paginationInfo = paginationInfo;
   }
-  disconnectedCallback() {
+  _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._gridController) === null || _a === void 0 ? void 0 : _a.destroy();
+    (_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();
     this.removeShortcuts();
   }
   connectedCallback() {
@@ -487,6 +611,8 @@ export class EzGrid {
     if (this.dataUnit && this._showSelectionCounter) {
       this.setSelection(this.dataUnit.getSelectionInfo());
     }
+    if (this.paginationCounterMode === 'auto')
+      this._initHeaderOverflowWatcher();
   }
   getDataSource() {
     if (!this.columnfilterDataSource) {
@@ -498,7 +624,7 @@ export class EzGrid {
     if (this.mode === "simple") {
       return true;
     }
-    return !this._hasLeftButtons;
+    return !this._hasLeftButtons && !this._paginationInfo;
   }
   resolveLeftHeaderClass() {
     if (this.paginationCounterMode == 'show')
@@ -523,7 +649,7 @@ export class EzGrid {
         return;
       const { currentPage } = this._paginationInfo;
       if (currentPage > 0) {
-        this._refGridPagination.previousPage();
+        this.previousPage();
       }
     }, { description: this.i18n("ez-grid.previousPage"), element: this._element })
       .bind("ctrl + alt + ArrowRight", () => {
@@ -531,7 +657,7 @@ export class EzGrid {
         return;
       const { hasMore } = this._paginationInfo;
       if (hasMore) {
-        this._refGridPagination.nextPage();
+        this.nextPage();
       }
     }, { description: this.i18n("ez-grid.nextPage"), element: this._element });
     if (this.useSearchColumn) {
@@ -584,9 +710,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" })))), 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" })), 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
           ${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" }, (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" }))));
+        ` }, 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" }))));
   }
   static get is() { return "ez-grid"; }
   static get encapsulation() { return "scoped"; }
@@ -863,7 +989,7 @@ export class EzGrid {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Define a forma como a pagina\u00E7\u00E3o ir\u00E1 se comportar."
+          "text": "Define se a grid ser\u00E1 focada ao ser carregada."
         },
         "attribute": "pagination-counter-mode",
         "reflect": false,
@@ -1053,24 +1179,6 @@ 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"
       }
     };
   }
@@ -1693,22 +1801,6 @@ 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": []
-        }
       }
     };
   }
@@ -1717,6 +1809,12 @@ 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,2 +1 @@
 export * from './ColumnFilterManager';
-export * from '../controller/ag-grid/gridColumnDefaultWidths';