@sankhyalabs/ezui 7.1.2 → 7.2.0-dev.10

package/dist/cjs/ez-grid-pagination.cjs.entry.js

@@ -0,0 +1,227 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-a7b0c73d.js');
+const index$1 = require('./index-9739c242.js');
+const core = require('@sankhyalabs/core');
+
+const ezGridPaginationCss = ":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}";
+
+const EzGridPagination = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.pageChange = index.createEvent(this, "pageChange", 7);
+    this._dataUnitInitialized = false;
+    this.paginationInfo = undefined;
+    this.leftButtonDisabled = undefined;
+    this.rightButtonDisabled = undefined;
+    this.paginationCounterMode = 'auto';
+    this.dataUnit = undefined;
+    this.paginationTextPosition = 'left';
+    this.buttonsSize = 'large';
+  }
+  /**
+   * Navega para a página anterior.
+   */
+  async previousPage() {
+    if (!this.dataUnit) {
+      return;
+    }
+    await this.dataUnit.previousPage();
+    this.handlePageChange('previous');
+  }
+  /**
+   * Navega para a próxima página.
+   */
+  async nextPage() {
+    if (!this.dataUnit) {
+      return;
+    }
+    await this.dataUnit.nextPage();
+    this.handlePageChange('next');
+  }
+  /**
+   * Navega para a primeira página.
+   */
+  async firstPage() {
+    if (!this.dataUnit) {
+      return;
+    }
+    await this.dataUnit.gotoPage(0);
+    this.handlePageChange('previous');
+  }
+  /**
+   * Navega para a primeira página.
+   */
+  async lastPage() {
+    if (!this.dataUnit) {
+      return;
+    }
+    await this.dataUnit.gotoPage(this.getTotalPages() - 1);
+    this.handlePageChange('next');
+  }
+  onDataUnitChange() {
+    this.initializeDataUnit();
+  }
+  shouldPresentPaginationLabel() {
+    return this.paginationCounterMode !== 'hidden';
+  }
+  getRemainingPageLabel() {
+    var _a;
+    if (!this.paginationInfo)
+      return '';
+    return `${this.paginationInfo.total == undefined
+      ? this.i18n('ez-grid-pagination.remainingPageLabel', { count: ((_a = this.paginationInfo.count) !== null && _a !== void 0 ? _a : 0) + 1 })
+      : this.i18n('ez-grid-pagination.remainingTotalLabel', { total: this.paginationInfo.total, count: this.paginationInfo.count })}`;
+  }
+  getActualPageLabel() {
+    var _a, _b;
+    if (!this.paginationInfo)
+      return '0-0';
+    return `${(_a = this.paginationInfo.firstRecord) !== null && _a !== void 0 ? _a : 0} - ${(_b = this.paginationInfo.lastRecord) !== null && _b !== void 0 ? _b : 0}`;
+  }
+  getPaginationCount() {
+    var _a;
+    if (!this.paginationInfo || !this.dataUnit)
+      return '0-0';
+    const currentPage = ((_a = this.paginationInfo.currentPage) !== null && _a !== void 0 ? _a : 0) + 1;
+    let totalPages = this.getTotalPages();
+    return this.i18n('ez-grid-pagination.pageCounter', { currentPage, totalPages });
+  }
+  getTotalPages() {
+    var _a;
+    if (this.paginationInfo.total !== undefined) {
+      return Math.ceil(this.paginationInfo.total / this.dataUnit.pageSize);
+    }
+    else {
+      return Math.ceil(((_a = this.paginationInfo.count) !== null && _a !== void 0 ? _a : 0) / this.dataUnit.pageSize);
+    }
+  }
+  handlePageChange(direction) {
+    this.setPaginationInfo();
+    this.setStatusButtonPagination();
+    this.pageChange.emit(direction);
+  }
+  async handleCancelPagination() {
+    var _a;
+    if (!this.dataUnit)
+      return;
+    this.dataUnit.cancelPagination = true;
+    await ((_a = this._cancelPaginationPopoverElement) === null || _a === void 0 ? void 0 : _a.hide());
+  }
+  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');
+  }
+  hasToShowCancelPagination() {
+    if (!this.dataUnit || !this.paginationInfo)
+      return false;
+    const hasMore = this.paginationInfo.total === undefined;
+    return !this.dataUnit.cancelPagination && hasMore && this.paginationInfo.count > this.dataUnit.pageSize;
+  }
+  setPaginationInfo() {
+    if (!this.dataUnit) {
+      this.paginationInfo = null;
+      return;
+    }
+    this.paginationInfo = this.dataUnit.getPaginationInfo() || null;
+  }
+  dataUnitObserver(action) {
+    switch (action.type) {
+      case core.Action.PAGINATION_UPDATED:
+        this.setPaginationInfo();
+        this.setStatusButtonPagination();
+        this.handleShowCancelPagination();
+        break;
+      case core.Action.DATA_LOADED:
+        this.setPaginationInfo();
+        break;
+    }
+  }
+  getLeftButtonDisabledStatus() {
+    var _a, _b;
+    if (!this.dataUnit)
+      return true;
+    return ((_b = (_a = this.paginationInfo) === null || _a === void 0 ? void 0 : _a.currentPage) !== null && _b !== void 0 ? _b : 0) <= 0;
+  }
+  getRightButtonDisabledStatus() {
+    var _a;
+    if (!this.dataUnit)
+      return true;
+    return !((_a = this.paginationInfo) === null || _a === void 0 ? void 0 : _a.hasMore);
+  }
+  setStatusButtonPagination() {
+    this.leftButtonDisabled = this.getLeftButtonDisabledStatus();
+    this.rightButtonDisabled = this.getRightButtonDisabledStatus();
+  }
+  initializeDataUnit() {
+    if (!this.dataUnit || this._dataUnitInitialized) {
+      return;
+    }
+    this.setPaginationInfo();
+    this.setStatusButtonPagination();
+    this._dataUnitObserverBound = this.dataUnitObserver.bind(this);
+    this.dataUnit.subscribe(this._dataUnitObserverBound);
+    this._dataUnitInitialized = true;
+  }
+  addInfoId() {
+    if (this._element) {
+      core.ElementIDUtils.addIDInfo(this._element);
+    }
+  }
+  renderCancelPagination() {
+    return (index.h("ez-popover", { ref: (element) => (this._cancelPaginationPopoverElement = element), "overlay-type": "none", autoClose: false }, index.h("div", { class: 'cancel-pagination' }, index.h("ez-icon", { iconName: "sync", size: "x-large", class: "spin" }), index.h("span", { onClick: () => this.handleCancelPagination(), class: 'cancel-pagination-btn' }, this.i18n('ez-grid-pagination.cancelPagination')))));
+  }
+  async connectedCallback() {
+    this.i18n = await index$1.initI18n();
+    this.initializeDataUnit();
+  }
+  componentDidLoad() {
+    this.addInfoId();
+  }
+  disconnectedCallback() {
+    if (this.dataUnit && this._dataUnitInitialized && this._dataUnitObserverBound) {
+      this.dataUnit.unsubscribe(this._dataUnitObserverBound);
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { id: 'grid-pagination--container', class: {
+        'pagination__container': true,
+        'pagination-expanded': this.paginationCounterMode !== 'hidden',
+        'pagination-contracted': this.paginationCounterMode === 'hidden',
+        'pagination-text-right': this.paginationTextPosition === 'right',
+      } }, index.h("div", { id: "grid-pagination--page-navigator", class: "pagination__page-navigator" }, index.h("div", { id: 'grid-pagination--row-summary-panel', class: "pagination__row-summary-panel" }, index.h("span", { class: "pagination__label", "aria-live": "polite", "aria-atomic": "true", title: `${this.getActualPageLabel()} ${this.getRemainingPageLabel()}` }, this.shouldPresentPaginationLabel() && this.getActualPageLabel(), this.shouldPresentPaginationLabel() && this.getRemainingPageLabel())), this.renderCancelPagination(), index.h("div", { id: 'grid-pagination--page-summary-panel', class: {
+        'pagination__page-summary-panel': true,
+        'pagination__container': true,
+        'pagination-expanded': this.paginationCounterMode !== 'hidden',
+        'pagination-contracted': this.paginationCounterMode === 'hidden',
+        'pagination-text-right': this.paginationTextPosition === 'right',
+      } }, index.h("div", { id: 'grid-pagination--first-tooltip', class: {
+        'pagination__buttons-container': true,
+        'disabled': this.leftButtonDisabled
+      } }, index.h("ez-tooltip", { message: this.i18n('ez-grid-pagination.firstPage') }, index.h("ez-icon", { size: this.buttonsSize, iconName: "dual-chevron-left", onClick: () => !this.leftButtonDisabled && this.firstPage() }))), index.h("div", { id: 'grid-pagination--previous-tooltip', class: {
+        'pagination__buttons-container': true,
+        'disabled': this.leftButtonDisabled
+      } }, index.h("ez-tooltip", { message: this.i18n('ez-grid-pagination.previousPage') }, index.h("ez-icon", { size: this.buttonsSize, iconName: "chevron-left", onClick: () => !this.leftButtonDisabled && this.previousPage() }))), index.h("div", { class: "pagination__container-label" }, index.h("span", { class: "pagination__label", "aria-live": "polite", "aria-atomic": "true", title: `${this.getActualPageLabel()} ${this.getRemainingPageLabel()}` }, this.shouldPresentPaginationLabel() && this.getPaginationCount())), index.h("div", { id: 'grid-pagination--next-tooltip', class: {
+        'pagination__buttons-container': true,
+        'disabled': this.rightButtonDisabled
+      } }, index.h("ez-tooltip", { message: this.i18n('ez-grid-pagination.nextPage') }, index.h("ez-icon", { size: this.buttonsSize, iconName: "chevron-right", onClick: () => !this.rightButtonDisabled && this.nextPage() }))), index.h("div", { id: 'grid-pagination--last-tooltip', class: {
+        'pagination__buttons-container': true,
+        'disabled': this.rightButtonDisabled
+      } }, index.h("ez-tooltip", { message: this.i18n('ez-grid-pagination.lastPage') }, index.h("ez-icon", { size: this.buttonsSize, iconName: "dual-chevron-right", onClick: () => !this.rightButtonDisabled && this.lastPage() }))))))));
+  }
+  get _element() { return index.getElement(this); }
+  static get watchers() { return {
+    "dataUnit": ["onDataUnitChange"]
+  }; }
+};
+EzGridPagination.style = ezGridPaginationCss;
+
+exports.ez_grid_pagination = EzGridPagination;