@sankhyalabs/ezui 5.22.0-dev.83 → 5.22.0-dev.85

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

@@ -50277,7 +50277,7 @@ class EzGridCustomHeader {
     this.element.classList.add('ag-cell-label-container');
     this.element.setAttribute('title', (_a = this.params.tooltip) !== null && _a !== void 0 ? _a : '');
     this.element.innerHTML = `
-          <div class='ez-flex ez-flex--justify-between'>
+          <div id='filter-column-${agParams.column.getColId()}-${agParams.context.dataUnit.dataUnitId}' class='ez-flex ez-flex--justify-between'>
             <i id='ez-grid-filter-icon' class='ez-icon-filter' style='color:#008561'></i>        
             <i id='ez-grid-menu-icon' class='ez-icon-dots-vertical'></i>        
           </div>
@@ -66047,7 +66047,7 @@ class InMemoryFilterColumnDataSource {
   }
 }
 
-const ezGridCss = ".sc-ez-grid-h{display:grid;grid-template-rows:auto 1fr auto;height:100%;width:100%;--ez-grid__header--background-color:var(--background--xlight, #FFF);--ez-grid__selection-counter--z-index:var(--visible, 1);--ez-grid__container--shadow:var(--shadow);--ez-grid--min-height:300px;--ez-grid__container--shadow--outline:var(--shadow--outline) var(--color--strokes);--ez-grid__header--shadow:var(--shadow--xsmall);--ez-grid__header--shadow--outline:var(--shadow--outline) var(--color--strokes);--ez-grid__header--outline:none;--ez-grid__header--border:none;min-height:var(--ez-grid--min-height)}.grid-header.sc-ez-grid{display:grid;justify-content:space-between;align-items:center;grid-row-start:1;grid-template-columns:1fr;background-color:var(--ez-grid__header--background-color, #FFF)}.grid-header.shadow-mode.sc-ez-grid{box-shadow:var(--ez-grid__header--shadow);border:var(--ez-grid__header--border);outline:var(--ez-grid__header--outline)}.grid-header.outline-mode.sc-ez-grid{box-shadow:var(--ez-grid__header--shadow--outline);border:var(--ez-grid__header--border);outline:var(--ez-grid__header--outline)}.grid__container.sc-ez-grid{padding-top:15px;margin-top:-12px;outline:none;box-shadow:var(--ez-grid__container--shadow);background-color:var(--ez-grid__header--background-color)}.grid__container.outline-mode.sc-ez-grid{box-shadow:var(--ez-grid__container--shadow--outline);border:none;outline:none}.grid-header__popover.sc-ez-grid{position:relative;top:var(--space--sm, 16px)}.grid-header__container.sc-ez-grid{display:flex;align-items:center}.grid-header__position.sc-ez-grid{display:flex;align-items:center;justify-content:space-between}.grid__selection-counter.sc-ez-grid{position:fixed;white-space:nowrap;transform:translate(-50%, 0px);left:50%;opacity:0;bottom:-100%;transition:opacity 0.1s, bottom 0.5s}.grid__selection-counter--opened.sc-ez-grid{opacity:1;bottom:0px}.grid__btn-close.sc-ez-grid{display:flex;align-items:center;justify-content:center;padding:0;outline:none;width:20px;height:20px;border:none;background-color:unset;cursor:pointer}.grid__btn-clear.sc-ez-grid{--ez-button--link-color:var(--color--alert-warning-900, #8C6B00);--ez-button--link--hover-color:var(--color--alert-warning-900, #8C6B00)}[no-header].sc-ez-grid-h .grid-header.sc-ez-grid{height:0;padding:0}.grid-header__pagination.sc-ez-grid{justify-content:flex-end;flex-wrap:nowrap}.grid-header__pagination-label.sc-ez-grid{width:100%;white-space:nowrap}.overflowed.sc-ez-grid{display:none}.pagination-contracted.sc-ez-grid{width:100px}.pagination-expanded.sc-ez-grid{min-width:150px}.left__header-contracted.sc-ez-grid{width:calc(100% - 100px)}.left__header-expanded.sc-ez-grid{flex-grow:1}";
+const ezGridCss = ".sc-ez-grid-h{display:grid;grid-template-rows:auto 1fr auto;height:100%;width:100%;--ez-grid__header--background-color:var(--background--xlight, #FFF);--ez-grid__selection-counter--z-index:var(--visible, 1);--ez-grid__container--shadow:var(--shadow);--ez-grid--min-height:300px;--ez-grid__container--shadow--outline:var(--shadow--outline) var(--color--strokes);--ez-grid__header--shadow:var(--shadow--xsmall);--ez-grid__header--shadow--outline:var(--shadow--outline) var(--color--strokes);--ez-grid__header--outline:none;--ez-grid__header--border:none;min-height:var(--ez-grid--min-height)}.grid-header.sc-ez-grid{display:grid;justify-content:space-between;align-items:center;grid-row-start:1;grid-template-columns:1fr;background-color:var(--ez-grid__header--background-color, #FFF)}.grid-header.shadow-mode.sc-ez-grid{box-shadow:var(--ez-grid__header--shadow);border:var(--ez-grid__header--border);outline:var(--ez-grid__header--outline)}.grid-header.outline-mode.sc-ez-grid{box-shadow:var(--ez-grid__header--shadow--outline);border:var(--ez-grid__header--border);outline:var(--ez-grid__header--outline)}.grid__container.sc-ez-grid{padding-top:15px;margin-top:-12px;outline:none;box-shadow:var(--ez-grid__container--shadow);background-color:var(--ez-grid__header--background-color)}.grid__container.outline-mode.sc-ez-grid{box-shadow:var(--ez-grid__container--shadow--outline);border:none;outline:none}.grid-header__popover.sc-ez-grid{position:relative;top:var(--space--sm, 16px)}.grid-header__container.sc-ez-grid{display:flex;align-items:center}.grid-header__position.sc-ez-grid{display:flex;align-items:center;justify-content:space-between}.grid__selection-counter.sc-ez-grid{position:fixed;white-space:nowrap;transform:translate(-50%, 0px);left:50%;opacity:0;bottom:-100%;transition:opacity 0.1s, bottom 0.5s}.grid__selection-counter--opened.sc-ez-grid{opacity:1;bottom:0px}.grid__btn-close.sc-ez-grid{display:flex;align-items:center;justify-content:center;padding:0;outline:none;width:20px;height:20px;border:none;background-color:unset;cursor:pointer}.grid__btn-clear.sc-ez-grid{--ez-button--link-color:var(--color--alert-warning-900, #8C6B00);--ez-button--link--hover-color:var(--color--alert-warning-900, #8C6B00)}[no-header].sc-ez-grid-h .grid-header.sc-ez-grid{height:0;padding:0}.grid-header__pagination.sc-ez-grid{justify-content:flex-end;flex-wrap:nowrap}.grid-header__pagination-label.sc-ez-grid{width:100%;white-space:nowrap}.overflowed.sc-ez-grid{display:none}.pagination-contracted.sc-ez-grid{width:100px}.pagination-expanded.sc-ez-grid{min-width:150px}.left__header-contracted.sc-ez-grid{width:calc(100% - 100px)}.left__header-expanded.sc-ez-grid{flex-grow:1}.cancel-pagination.sc-ez-grid{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:4px;padding:8px;width:180px}.cancel-pagination-btn.sc-ez-grid{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.sc-ez-grid{animation-name:spin;animation-duration:5000ms;animation-iteration-count:infinite;animation-timing-function:linear}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}";
 
 const windowInstace = window;
 const matches = (text, filter) => {
@@ -66235,6 +66235,7 @@ const EzGrid = class {
     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');
@@ -66421,11 +66422,28 @@ const EzGrid = class {
       return "pagination-expanded";
     return "pagination-contracted";
   }
+  async handleCancelPagination() {
+    this.dataUnit.cancelPagination = true;
+    await this._cancelPaginationPopoverElement.hide();
+  }
+  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' }, "Cancelar pagina\u00E7\u00E3o"))));
+  }
+  handleShowCancelPagination() {
+    var _a;
+    if (!this._hasToShowCancelPagination()) {
+      this._cancelPaginationPopoverElement.hide();
+      return;
+    }
+    if (this._cancelPaginationPopoverElement.opened)
+      return;
+    (_a = this._cancelPaginationPopoverElement) === null || _a === void 0 ? void 0 : _a.show("15px");
+  }
   getPaginationControl() {
     if (!this._paginationInfo)
       return null;
     const { currentPage, hasMore } = this._paginationInfo;
-    return (index.h("div", { class: `grid-header__container grid-header__pagination ${this.resolvePaginationClassMode()}`, ref: ref => (this._refPaginationControl = ref) }, index.h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium", ref: (element) => (this._refPaginationLabel = element) }, index.h("span", { class: "grid-header__pagination-label" }, this.paginationCounterMode == 'show' && index.h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, this._getActualPageLabel()), this.paginationCounterMode == 'show' && this._getRemainingPageLabel())), index.h("div", { id: "grid-pagination-tooltip", ref: (element) => (this._refPaginationLabelTooltip = element), class: "ez-flex ez-margin-right--medium", title: `${this._getActualPageLabel()} ${this._getRemainingPageLabel()}` }, index.h("ez-button", { size: "small", class: "ez-margin-right--medium", iconName: "chevron-left", mode: "icon", enabled: currentPage > 0, onClick: () => this.previousPage(), label: "P\u00E1gina anterior" }), index.h("ez-button", { size: "small", iconName: "chevron-right", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" }))));
+    return (index.h("div", { class: `grid-header__container grid-header__pagination ${this.resolvePaginationClassMode()}`, ref: ref => (this._refPaginationControl = ref) }, this.renderCancelPagination(), index.h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium", ref: (element) => (this._refPaginationLabel = element) }, index.h("span", { class: "grid-header__pagination-label" }, this.paginationCounterMode == 'show' && index.h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, this._getActualPageLabel()), this.paginationCounterMode == 'show' && this._getRemainingPageLabel())), index.h("div", { id: "grid-pagination-tooltip", ref: (element) => (this._refPaginationLabelTooltip = element), class: "ez-flex ez-margin-right--medium", title: `${this._getActualPageLabel()} ${this._getRemainingPageLabel()}` }, index.h("ez-button", { size: "small", class: "ez-margin-right--medium", iconName: "chevron-left", mode: "icon", enabled: currentPage > 0, onClick: () => this.previousPage(), label: "P\u00E1gina anterior" }), index.h("ez-button", { size: "small", iconName: "chevron-right", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" }))));
   }
   componentDidLoad() {
     const _application = core.ApplicationContext.getContextValue("__SNK__APPLICATION__");
@@ -66497,6 +66515,11 @@ const EzGrid = class {
     const { total, count } = this._paginationInfo;
     return `${total == undefined ? ` de ${count + 1} ou mais` : ` de ${total}`}`;
   }
+  _hasToShowCancelPagination() {
+    const { total, count } = this._paginationInfo;
+    const hasMore = (total === undefined);
+    return !this.dataUnit.cancelPagination && hasMore && count > this.dataUnit.pageSize;
+  }
   _getPaginationTooltip() {
     return this._getActualPageLabel() + this._getRemainingPageLabel();
   }