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

package/dist/esm/ez-form-view.entry.js

@@ -1,8 +1,8 @@
-import { h, r as registerInstance, c as createEvent, g as getElement, H as Host } from './index-5a720e56.js';
+import { h, r as registerInstance, c as createEvent, g as getElement, H as Host } from './index-baa5e267.js';
 import { ObjectUtils, StringUtils, UserInterface, ElementIDUtils } from '@sankhyalabs/core';
 import { F as FormLayout } from './FormLayout-bda67973.js';
 import { C as CheckMode } from './CheckMode-bdb2ec19.js';
-import { g as getI18n } from './index-225aa0c3.js';
+import { g as getI18n } from './index-9e6dab5b.js';
 
 const buildSwitch = (field, context) => {
   return buildField(field.name, field.label, field.readOnly, field.contextName, true, context);
@@ -176,6 +176,24 @@ const buildImage = ({ name, label, readOnly, contextName, props }) => {
     h("ez-image-input", Object.assign({ enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name, maxFileSize: Infinity }, props))));
 };
 
+const buildMultiSelectInput = ({ name, label, readOnly, contextName, canShowError, props }) => {
+  var _a, _b, _c, _d;
+  const rawOptions = props === null || props === void 0 ? void 0 : props.options;
+  let options;
+  if (typeof rawOptions === "string") {
+    const parsed = JSON.parse(rawOptions);
+    options = Object.keys(parsed).map(key => ({ value: key, label: parsed[key], check: false }));
+  }
+  else {
+    options = rawOptions;
+  }
+  // Quando o metadata não informa explicitamente, usamos a lista estática (options)
+  // caso não haja um datasource configurado.
+  const useOptions = (_a = props === null || props === void 0 ? void 0 : props.useOptions) !== null && _a !== void 0 ? _a : (options != undefined && (props === null || props === void 0 ? void 0 : props.dataSource) == undefined);
+  return (h("div", { class: "ez-col ez-col--sd-12" },
+    h("ez-multi-select-input", { class: "ez-input__no-margin", label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly, canShowError: canShowError, options: options, dataSource: props === null || props === void 0 ? void 0 : props.dataSource, columnName: (_b = props === null || props === void 0 ? void 0 : props.columnName) !== null && _b !== void 0 ? _b : name, useOptions: useOptions, isTextSearch: (_c = props === null || props === void 0 ? void 0 : props.isTextSearch) !== null && _c !== void 0 ? _c : false, orderSelectedFirst: (_d = props === null || props === void 0 ? void 0 : props.orderSelectedFirst) !== null && _d !== void 0 ? _d : false })));
+};
+
 const uiBuilders = new Map();
 uiBuilders.set(UserInterface.CHECKBOX, buildCheckBox);
 uiBuilders.set(UserInterface.SWITCH, buildSwitch);
@@ -192,6 +210,7 @@ uiBuilders.set(UserInterface.SEARCHPLUS, buildSearchPlus);
 uiBuilders.set(UserInterface.LONGTEXT, buildTextArea);
 uiBuilders.set(UserInterface.HTML, buildRichText);
 uiBuilders.set(UserInterface.IMAGE, buildImage);
+uiBuilders.set(UserInterface.MULTISELECTOR, buildMultiSelectInput);
 const fieldBuilder = (field, customUiBuilders = new Map(), context) => {
   const i18n = getI18n();
   const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_CASCADE ||
@@ -239,7 +258,7 @@ class FormItems {
   }
 }
 
-const ezFormViewCss = ".sc-ez-form-view-h{display:flex;flex-wrap:wrap;width:100%;--ez-form-view__item--min-width:220px;--ez-form-view__item--max-width:440px;--ez-form-view__item--gap:var(--space--14, 14px);--ez-form-view__item--padding:var(--space--small)}.form-view__content.sc-ez-form-view{display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--ez-form-view__item--min-width), 1fr));gap:var(--ez-form-view__item--gap);padding-inline:var(--ez-form-view__item--padding);width:100%}.form-view__content--single-column.sc-ez-form-view{grid-template-columns:repeat(1, minmax(var(--ez-form-view__item--min-width), var(--ez-form-view__item--max-width)))}.input-full_width.sc-ez-form-view{grid-column:1 / -1;width:100%}*.sc-ez-form-view:has(*)+ez-collapsible-box.sc-ez-form-view{margin-top:var(--space--16, 16px)}";
+const ezFormViewCss = ".sc-ez-form-view-h{display:flex;flex-wrap:wrap;width:100%;--ez-form-view__item--min-width:250px;--ez-form-view__long-item--min-width:530px;--ez-form-view__item--max-width:512px;--ez-form-view__long-item--max-width:100%;--ez-form-view__item--gap:var(--space--14, 14px);--ez-form-view__item--padding:var(--space--small)}.form-view__content.sc-ez-form-view{display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--ez-form-view__item--min-width), 1fr));gap:var(--ez-form-view__item--gap);padding-inline:var(--ez-form-view__item--padding);width:100%}.form-view__content--single-column.sc-ez-form-view{grid-template-columns:1fr}.form-view__content--single-column.sc-ez-form-view>div.sc-ez-form-view:not(.input-full_width){width:clamp(var(--ez-form-view__item--min-width), 70%, var(--ez-form-view__item--max-width))}.input-full_width.sc-ez-form-view{grid-column:1/-1;width:clamp(var(--ez-form-view__long-item--min-width), 100%, var(--ez-form-view__long-item--max-width))}.single-column.sc-ez-form-view{--ez-form-view__long-item--max-width:1024px}*.sc-ez-form-view:has(*)+ez-collapsible-box.sc-ez-form-view{margin-top:var(--space--16, 16px)}";
 
 const EzFormView = class {
   constructor(hostRef) {
@@ -322,7 +341,7 @@ const EzFormView = class {
   buildFormItemElement(item, classItem = "") {
     var _a;
     if (this.isItemFullWidth(item.userInterface)) {
-      classItem += " input-full_width";
+      classItem += ` input-full_width ${this.singleColumn && `single-column`}`;
     }
     const context = {
       formLayout: this.formLayout,

package/dist/esm/ez-form.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, h, f as forceUpdate, H as Host, g as getElement } from './index-5a720e56.js';
+import { r as registerInstance, c as createEvent, h, f as forceUpdate, H as Host, g as getElement } from './index-baa5e267.js';
 import { DateUtils, ApplicationContext, Action, StringUtils, KeyboardManager, DataUnit, ElementIDUtils } from '@sankhyalabs/core';
-import { b as buildFieldMetadata, a as buildFieldSearch, S as SHORTCUT_SEARCH_FIELD, f as focusOnFieldSerch, c as SEARCH_FIELD_FULL_WIDTH, D as DataBinder } from './search-column-2da15ef5.js';
-import { g as getI18n, i as initI18n } from './index-225aa0c3.js';
+import { b as buildFieldMetadata, a as buildFieldSearch, S as SHORTCUT_SEARCH_FIELD, f as focusOnFieldSerch, c as SEARCH_FIELD_FULL_WIDTH, D as DataBinder } from './search-column-7d7f0331.js';
+import { g as getI18n, i as initI18n } from './index-9e6dab5b.js';
 import { F as FormLayout } from './FormLayout-bda67973.js';
-import './ApplicationUtils-0c5cb207.js';
+import './ApplicationUtils-f7721533.js';
 import './DialogType-54a62731.js';
 import './CheckMode-bdb2ec19.js';
 import './types-6f6b2650.js';
@@ -129,54 +129,75 @@ function parseTabToFormSheet(key, fields) {
 function handleFields(config, sheets, hiddenTabs, dataUnit, requiredFields, cleanOnCopyFields, defaultValues) {
   var _a;
   (_a = config === null || config === void 0 ? void 0 : config.fields) === null || _a === void 0 ? void 0 : _a.forEach((field) => {
-    var _a, _b, _c;
-    if (field.visible !== false) {
-      const tabConfig = getTabConfig(field.tab || "__main", sheets, config);
-      if (hiddenTabs.has(tabConfig.label)) {
-        return;
+    var _a, _b, _c, _d, _e, _f;
+    if (field.visible === false) {
+      return;
+    }
+    if (!field.tab && ((_b = (_a = dataUnit.getField(field.name)) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.isPrimaryKey)) {
+      field.tab = "__main";
+    }
+    const tabConfig = getTabConfig(field.tab || "Geral", sheets, config);
+    if (hiddenTabs.has(tabConfig.label)) {
+      return;
+    }
+    const descriptor = dataUnit.getField(field.name);
+    const fieldVisible = (descriptor === null || descriptor === void 0 ? void 0 : descriptor.visible) == undefined || (descriptor === null || descriptor === void 0 ? void 0 : descriptor.visible) === true;
+    if (descriptor && fieldVisible && tabConfig.visible) {
+      if (!sheets.has(tabConfig)) {
+        sheets.set(tabConfig, []);
       }
-      const descriptor = dataUnit.getField(field.name);
-      const fieldVisible = (descriptor === null || descriptor === void 0 ? void 0 : descriptor.visible) == undefined || (descriptor === null || descriptor === void 0 ? void 0 : descriptor.visible) === true;
-      if (descriptor && fieldVisible && tabConfig.visible) {
-        if (!sheets.has(tabConfig)) {
-          sheets.set(tabConfig, []);
-        }
-        const formField = buildFieldMetadata(descriptor, field);
-        sheets.get(tabConfig).push(formField);
-        if (formField.required) {
-          requiredFields.push(field.name);
-        }
-        const cleanOnCopy = field.cleanOnCopy == undefined ? (_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy : field.cleanOnCopy;
-        if (cleanOnCopy || ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.cleanOnCopy)) {
-          cleanOnCopyFields.push(field.name);
-        }
-        let defaultValue = field.defaultValue == undefined ? (_c = descriptor.properties) === null || _c === void 0 ? void 0 : _c.defaultValue : field.defaultValue;
-        if (defaultValue && defaultValue.value != undefined) {
-          const { type, value } = defaultValue;
-          if (type) {
-            if (type === "V") {
-              defaultValue = value;
-            }
-            else {
-              try {
-                const parsed = JSON.parse(value);
-                if (parsed && "value" in parsed) {
-                  defaultValue = parsed;
-                }
-                else {
-                  defaultValue = value;
-                }
+      const formField = buildFieldMetadata(descriptor, field);
+      (_c = sheets.get(tabConfig)) === null || _c === void 0 ? void 0 : _c.push(formField);
+      if (formField.required) {
+        requiredFields.push(field.name);
+      }
+      const cleanOnCopy = field.cleanOnCopy == undefined ? (_d = descriptor.properties) === null || _d === void 0 ? void 0 : _d.cleanOnCopy : field.cleanOnCopy;
+      if (cleanOnCopy || ((_e = descriptor.properties) === null || _e === void 0 ? void 0 : _e.cleanOnCopy)) {
+        cleanOnCopyFields.push(field.name);
+      }
+      let defaultValue = field.defaultValue == undefined ? (_f = descriptor.properties) === null || _f === void 0 ? void 0 : _f.defaultValue : field.defaultValue;
+      if (defaultValue && defaultValue.value != undefined) {
+        const { type, value } = defaultValue;
+        if (type) {
+          if (type === "V") {
+            defaultValue = value;
+          }
+          else {
+            try {
+              const parsed = JSON.parse(value);
+              if (parsed && "value" in parsed) {
+                defaultValue = parsed;
               }
-              catch (_d) {
+              else {
+                defaultValue = value;
               }
             }
+            catch (_g) {
+            }
           }
-          defaultValues[field.name] = defaultValue;
         }
+        defaultValues[field.name] = defaultValue;
       }
     }
   });
 }
+function getDistinctTabs(config) {
+  var _a, _b;
+  const fieldTabs = (_b = (_a = config.fields) === null || _a === void 0 ? void 0 : _a.map((field, index) => ({
+    label: field.tab,
+    name: field.tab,
+    order: index,
+    visible: true,
+    isDetail: false,
+    isCustom: false,
+  }))) !== null && _b !== void 0 ? _b : [];
+  return fieldTabs.reduce((total, item) => {
+    if (!total.some((tab) => tab.name === item.name)) {
+      return [...total, item];
+    }
+    return total;
+  }, []);
+}
 const buildFormMetadata = (config, dataUnit, includeDetails = false, customGuides) => {
   var _a;
   if (config == undefined || (config === null || config === void 0 ? void 0 : config.emptyConfig) === true) {
@@ -187,7 +208,7 @@ const buildFormMetadata = (config, dataUnit, includeDetails = false, customGuide
   const requiredFields = [];
   const cleanOnCopyFields = [];
   const defaultValues = {};
-  const tabs = (_a = config === null || config === void 0 ? void 0 : config.tabs) !== null && _a !== void 0 ? _a : [];
+  const tabs = (_a = config === null || config === void 0 ? void 0 : config.tabs) !== null && _a !== void 0 ? _a : getDistinctTabs(config);
   tabs.forEach((tab) => {
     if (!hiddenTabs.has(tab.label) && tab.visible === false) {
       hiddenTabs.set(tab.label, tab);
@@ -219,7 +240,8 @@ const getTabFromConfig = (tab, config) => {
   if (!config) {
     return;
   }
-  return (_a = config.tabs) === null || _a === void 0 ? void 0 : _a.find(t => t.label === tab);
+  const tabs = (_a = config === null || config === void 0 ? void 0 : config.tabs) !== null && _a !== void 0 ? _a : getDistinctTabs(config);
+  return tabs === null || tabs === void 0 ? void 0 : tabs.find(t => t.label === tab);
 };
 const getTabConfig = (tab, sheets, config) => {
   if (typeof tab !== "string") {

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

@@ -0,0 +1,223 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
+import { i as initI18n } from './index-9e6dab5b.js';
+import { Action, ElementIDUtils } from '@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) {
+    registerInstance(this, hostRef);
+    this.pageChange = 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 Action.PAGINATION_UPDATED:
+        this.setPaginationInfo();
+        this.setStatusButtonPagination();
+        this.handleShowCancelPagination();
+        break;
+      case 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) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+  }
+  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-pagination.cancelPagination')))));
+  }
+  async connectedCallback() {
+    this.i18n = await initI18n();
+    this.initializeDataUnit();
+  }
+  componentDidLoad() {
+    this.addInfoId();
+  }
+  disconnectedCallback() {
+    if (this.dataUnit && this._dataUnitInitialized && this._dataUnitObserverBound) {
+      this.dataUnit.unsubscribe(this._dataUnitObserverBound);
+    }
+  }
+  render() {
+    return (h(Host, null, 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',
+      } }, h("div", { id: "grid-pagination--page-navigator", class: "pagination__page-navigator" }, h("div", { id: 'grid-pagination--row-summary-panel', class: "pagination__row-summary-panel" }, 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(), 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',
+      } }, h("div", { id: 'grid-pagination--first-tooltip', class: {
+        'pagination__buttons-container': true,
+        'disabled': this.leftButtonDisabled
+      } }, h("ez-tooltip", { message: this.i18n('ez-grid-pagination.firstPage') }, h("ez-icon", { size: this.buttonsSize, iconName: "dual-chevron-left", onClick: () => !this.leftButtonDisabled && this.firstPage() }))), h("div", { id: 'grid-pagination--previous-tooltip', class: {
+        'pagination__buttons-container': true,
+        'disabled': this.leftButtonDisabled
+      } }, h("ez-tooltip", { message: this.i18n('ez-grid-pagination.previousPage') }, h("ez-icon", { size: this.buttonsSize, iconName: "chevron-left", onClick: () => !this.leftButtonDisabled && this.previousPage() }))), h("div", { class: "pagination__container-label" }, h("span", { class: "pagination__label", "aria-live": "polite", "aria-atomic": "true", title: `${this.getActualPageLabel()} ${this.getRemainingPageLabel()}` }, this.shouldPresentPaginationLabel() && this.getPaginationCount())), h("div", { id: 'grid-pagination--next-tooltip', class: {
+        'pagination__buttons-container': true,
+        'disabled': this.rightButtonDisabled
+      } }, h("ez-tooltip", { message: this.i18n('ez-grid-pagination.nextPage') }, h("ez-icon", { size: this.buttonsSize, iconName: "chevron-right", onClick: () => !this.rightButtonDisabled && this.nextPage() }))), h("div", { id: 'grid-pagination--last-tooltip', class: {
+        'pagination__buttons-container': true,
+        'disabled': this.rightButtonDisabled
+      } }, h("ez-tooltip", { message: this.i18n('ez-grid-pagination.lastPage') }, h("ez-icon", { size: this.buttonsSize, iconName: "dual-chevron-right", onClick: () => !this.rightButtonDisabled && this.lastPage() }))))))));
+  }
+  get _element() { return getElement(this); }
+  static get watchers() { return {
+    "dataUnit": ["onDataUnitChange"]
+  }; }
+};
+EzGridPagination.style = ezGridPaginationCss;
+
+export { EzGridPagination as ez_grid_pagination };

package/dist/esm/ez-grid-view.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-5a720e56.js';
+import { r as registerInstance, h } from './index-baa5e267.js';
 import { RECORD_DATE_FORMAT, DataUnitInMemoryLoader } from '@sankhyalabs/core';
 
 const ezGridViewCss = "";