@sankhyalabs/ezui 6.4.4 → 6.5.0-dev.10

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

@@ -1,6 +1,7 @@
 import { ElementIDUtils, StringUtils } from '@sankhyalabs/core';
 import { Fragment, Host, h } from '@stencil/core';
 import { processListOnDrop } from './ezListHelper';
+import initI18n from '../../utils/i18n';
 export class EzList {
   constructor() {
     this._listItemsHistory = [];
@@ -205,7 +206,8 @@ export class EzList {
       ElementIDUtils.addIDInfoIfNotExists(item, 'selectable');
     });
   }
-  componentWillLoad() {
+  async componentWillLoad() {
+    this.i18n = await initI18n();
     this._listItemsHistory = [];
   }
   componentWillRender() {
@@ -582,7 +584,7 @@ export class EzList {
           'hover-feedback': this.hoverFeedback,
         }, key: 'item_' + item.id }, {
         [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils.replaceAccentuatedChars(item.label)}`),
-      }), h("div", { class: 'draggable' + (item.selected == true ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onDblClick: () => this.doubleClickItem(item), onClick: () => this.setSelection(item), onDragLeave: () => group.sort ? undefined : this.removeOverClass(), onDragEnd: () => this.onDragEnd(), onDragStart: () => this.onDragStart(item, group, index), onDragOver: event => group.sort ? undefined : this.onDragOverItem(event), onDrop: event => this.onDrop(event, { groupName: group.group, item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: 'item-content' }, this.ezDraggable ? h("span", { class: 'draggable-icon' }) : undefined, this.listMode === 'regular' ? (h(Fragment, null, !!this.itemLeftSlotBuilder && this.getContainerItemBuilder('left', item, group), h("p", { title: item.label, class: 'person-name text--ellipsis' }, item.label))) : (h("ez-check", { label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit(this.buildItem(item, evt)) }))), !!this.itemSlotBuilder && this.getContainerItemBuilder('right', item, group, 'slot-item')))))), h("div", { class: 'last-droppable-space', onDragLeave: () => this.removeOverClass(), onDragOver: event => this.onDragOverLastIndex(event), onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event, group) })), group.sort ? (h("div", { id: this.getGroupOverlayId(group.group), class: 'group-overlay' }, "Mover para ", group.group)) : undefined)));
+      }), h("div", { class: 'draggable' + (item.selected == true ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onDblClick: () => this.doubleClickItem(item), onClick: () => this.setSelection(item), onDragLeave: () => group.sort ? undefined : this.removeOverClass(), onDragEnd: () => this.onDragEnd(), onDragStart: () => this.onDragStart(item, group, index), onDragOver: event => group.sort ? undefined : this.onDragOverItem(event), onDrop: event => this.onDrop(event, { groupName: group.group, item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: 'item-content' }, this.ezDraggable ? h("span", { class: 'draggable-icon' }) : undefined, this.listMode === 'regular' ? (h(Fragment, null, !!this.itemLeftSlotBuilder && this.getContainerItemBuilder('left', item, group), h("p", { title: item.label, class: 'person-name text--ellipsis' }, item.label))) : (h("ez-check", { label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit(this.buildItem(item, evt)) }))), !!this.itemSlotBuilder && this.getContainerItemBuilder('right', item, group, 'slot-item')))))), h("div", { class: 'last-droppable-space', onDragLeave: () => this.removeOverClass(), onDragOver: event => this.onDragOverLastIndex(event), onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event, group) })), group.sort ? (h("div", { id: this.getGroupOverlayId(group.group), class: 'group-overlay' }, this.i18n("ez-list.moveToGroup", { groupName: group.group }))) : undefined)));
     }));
   }
   renderList() {

package/dist/collection/components/ez-list-item/ez-list-item.css

@@ -0,0 +1,61 @@
+:host {
+    /* @doc Define a cor do título do item da lista. */
+    --ez-list-item__title--color: var(--color--ocean-green-900, #003D2D);
+
+    /* @doc Define a cor do texto do item da lista. */
+    --ez-list-item__text--color: var(--color--ocean-green-1000, #00281D);
+
+    /* @doc Define a cor do ícone do item da lista. */
+    --ez-list-item__icon--color: var(--color--ocean-green-600, #008561);
+
+    /* @doc Define a cor do background do item da lista. */
+    --ez-list-item__background--color: var(--color--gray-80, #F9F9F9);
+
+    /* @doc Define a cor da borda do item da lista com hover. */
+    --ez-list-item__border--color-hover: var(--color--gray-100, #DEDEDE);
+
+    /* @doc Define a largura mínima do componente. */
+    --ez-list-item__min-width: 150;
+
+    display: flex;
+    flex-direction: column;
+    background: var(--ez-list-item__background--color);
+    padding: var(--space--12, 12px) var(--space--16, 16px);
+    min-width: var(--ez-list-item__min-width);
+    width: 100%;
+    border-radius: var(--border--radius-16, 16px);
+    outline: none;
+    transition: box-shadow 0.2s;
+    cursor: pointer;
+}
+
+:host(:hover) {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--ez-list-item__border--color-hover);
+}
+
+
+.list-item__header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+
+.list-item__title{
+    color: var(--ez-list-item__title--color);
+    font-size: var(--text--large);
+    font-weight: var(--font-weight--medium);
+}
+
+.list-item__text{
+    font-size: var(--text--medium);
+    font-weight: var(--font-weight--regular);
+    color: var(--ez-list-item__text--color);
+}
+
+
+ez-icon {
+    --ez-icon--color: var(--ez-list-item__icon--color);
+}

package/dist/collection/components/ez-list-item/ez-list-item.js

@@ -0,0 +1,78 @@
+import { h, Host } from '@stencil/core';
+export class EzListItem {
+  constructor() {
+    this.titleText = undefined;
+    this.text = undefined;
+    this.iconName = undefined;
+  }
+  render() {
+    return (h(Host, { class: "list-item" }, h("div", { class: 'list-item__header' }, h("span", { class: 'list-item__title' }, this.titleText), this.iconName && h("ez-icon", { "icon-name": this.iconName })), this.text && h("span", { class: 'list-item__text' }, this.text)));
+  }
+  static get is() { return "ez-list-item"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-list-item.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-list-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "titleText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "T\u00EDtulo do item da lista."
+        },
+        "attribute": "title-text",
+        "reflect": true
+      },
+      "text": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Texto do item da lista."
+        },
+        "attribute": "text",
+        "reflect": true
+      },
+      "iconName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Nome do \u00EDcone que deve ser exibido no item."
+        },
+        "attribute": "icon-name",
+        "reflect": true
+      }
+    };
+  }
+}

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

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { FloatingManager, KeyboardManager } from '@sankhyalabs/core';
+import initI18n from '../../utils/i18n';
 export class EzModal {
   constructor() {
     this.modalSize = undefined;
@@ -23,6 +24,9 @@ export class EzModal {
     this.opened = false;
     this.ezCloseModal.emit(this.opened);
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidLoad() {
     this.observeOpened();
     this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element, enableShadowDom: true })
@@ -65,7 +69,7 @@ export class EzModal {
     const scrimType = `modal__screen-${this.scrim}`;
     return (h(Host, null, this.opened
       ?
-        h("div", { ref: ref => this._modalRef = ref, class: `modal ${scrimType} ${regularVerticalPaddingClass}`, onMouseDown: evt => this.onMouseDownHandler(evt), tabIndex: -1 }, h("div", { class: `modal__container modal__container--${positionSufix}`, ref: ref => this._overlay = ref }, h("div", { onMouseLeave: () => this.onMouseLeaveHandler(), class: `modal__content ${modalContentHeightMode} ${this.modalSize}` }, h("slot", null))))
+        h("div", { ref: ref => this._modalRef = ref, class: `modal ${scrimType} ${regularVerticalPaddingClass}`, onMouseDown: evt => this.onMouseDownHandler(evt), tabIndex: -1, "aria-label": this.i18n("ez-modal.close") }, h("div", { class: `modal__container modal__container--${positionSufix}`, ref: ref => this._overlay = ref }, h("div", { onMouseLeave: () => this.onMouseLeaveHandler(), class: `modal__content ${modalContentHeightMode} ${this.modalSize}` }, h("slot", null))))
       :
         undefined));
   }

package/dist/collection/components/ez-modal-container/ez-modal-container.css

@@ -16,6 +16,7 @@
   flex-wrap: nowrap;
   flex-direction: row;
   justify-content: space-between;
+  align-items: start;
 }
 
 .ez-modal-container__content {
@@ -48,6 +49,7 @@
   background-color: transparent;
   border: none;
   outline: none;
+  padding: var(--space--6, 6px) 0px;
 }
 
 .ez-modal-container__close-icon {

package/dist/collection/components/ez-modal-container/ez-modal-container.js

@@ -2,6 +2,7 @@ import { h, Host } from "@stencil/core";
 import { KeyboardManager } from "@sankhyalabs/core";
 import ModalAction from "./modal-action";
 import ModalButtonStatus from "./modal-button-status";
+import initI18n from '../../utils/i18n';
 export class EzModalContainer {
   constructor() {
     this.modalTitle = undefined;
@@ -25,6 +26,9 @@ export class EzModalContainer {
   okIsVisible() {
     return (this.okButtonStatus !== ModalButtonStatus.HIDDEN && this.okButtonLabel != undefined);
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidLoad() {
     window.requestAnimationFrame(() => {
       this.ezModalAction.emit(ModalAction.LOAD);
@@ -52,7 +56,7 @@ export class EzModalContainer {
     this._closeButton.focus();
   }
   render() {
-    return (h(Host, null, h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusLast() }), h("div", { ref: ref => this._modalRef = ref, tabIndex: -1, class: "ez-modal-container__header-container" }, this.showTitleBar && (h("div", { class: "ez-modal-container__header ez-margin-bottom--medium" }, h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle && (h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle))), (this.showCloseButton && h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction.CLOSE) }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" })))))), h("div", { tabIndex: -1, class: "ez-modal-container__content" }, h("slot", null)), h("div", { tabIndex: -1, class: "ez-modal-container__footer" }, this.cancelIsVisible() && (h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.CANCEL) })), this.okIsVisible() && (h("ez-button", { ref: ref => this._okButton = ref, class: "ez-button--primary", label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.OK) }))), h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusFirst() })));
+    return (h(Host, null, h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusLast() }), h("div", { ref: ref => this._modalRef = ref, tabIndex: -1, class: "ez-modal-container__header-container" }, this.showTitleBar && (h("div", { class: "ez-modal-container__header ez-margin-bottom--medium" }, h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle && (h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle))), (this.showCloseButton && h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction.CLOSE), "aria-label": this.i18n("app.close") }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" })))))), h("div", { tabIndex: -1, class: "ez-modal-container__content" }, h("slot", null)), h("div", { tabIndex: -1, class: "ez-modal-container__footer" }, this.cancelIsVisible() && (h("ez-button", { label: this.cancelButtonLabel || this.i18n("app.cancel"), enabled: this.cancelButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.CANCEL) })), this.okIsVisible() && (h("ez-button", { ref: ref => this._okButton = ref, class: "ez-button--primary", label: this.okButtonLabel || this.i18n("app.ok"), enabled: this.okButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.OK) }))), h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusFirst() })));
   }
   static get is() { return "ez-modal-container"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/ez-multi-selection-list/ez-multi-selection-list.js

@@ -1,3 +1,4 @@
+import initI18n from '../../utils/i18n';
 import { ArrayUtils } from '@sankhyalabs/core';
 import { Fragment, h, Host } from '@stencil/core';
 var ViewScenarios;
@@ -20,6 +21,9 @@ export class EzMuiltiSelectionList {
     this.viewScenario = undefined;
     this.displayOptionToCheckAllItems = true;
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   async clearFilteredOptions() {
     this.setInitialScenario();
     this.filteredOptions = [];
@@ -58,7 +62,7 @@ export class EzMuiltiSelectionList {
     let emptyElement;
     filteredOptions.forEach(item => {
       if (item.value == undefined || item.label === "") {
-        emptyElement = Object.assign(Object.assign({}, item), { label: "(Vazio)" });
+        emptyElement = Object.assign(Object.assign({}, item), { label: this.i18n("ez-multi-selection-list.empty") });
       }
       else {
         (item.check ? listWithSelectChecked.push(item) : listWithNotSelectChecked.push(item));
@@ -145,16 +149,16 @@ export class EzMuiltiSelectionList {
     this.changeFilteredOptions.emit(this.filteredOptions);
   }
   buildViewList(hasDelete) {
-    return (h(Fragment, null, this.displayOptionToCheckAllItems && (h("ez-check", { ref: (element) => (this.checkInput = element), label: "Selecionar todos", class: "multi-selection__select-all", onEzChange: this.handleChangeSelectAllItems.bind(this) })), h("ez-list", { class: "multi-selection__list", dataSource: this.displayOptions.map(opt => (Object.assign(Object.assign({}, opt), { id: opt.value }))), listMode: "check", hoverFeedback: true, onEzCheckChange: this.handleChangeSelectedItem.bind(this), itemSlotBuilder: hasDelete ? this.buildDeleteIconSlot.bind(this) : null })));
+    return (h(Fragment, null, this.displayOptionToCheckAllItems && (h("ez-check", { ref: (element) => (this.checkInput = element), label: this.i18n("ez-multi-selection-list.selectAll"), class: "multi-selection__select-all", onEzChange: this.handleChangeSelectAllItems.bind(this) })), h("ez-list", { class: "multi-selection__list", dataSource: this.displayOptions.map(opt => (Object.assign(Object.assign({}, opt), { id: opt.value }))), listMode: "check", hoverFeedback: true, onEzCheckChange: this.handleChangeSelectedItem.bind(this), itemSlotBuilder: hasDelete ? this.buildDeleteIconSlot.bind(this) : null })));
   }
   buildDeleteIconSlot(item) {
     return h("ez-icon", { style: { cursor: 'pointer' }, iconName: "delete", onClick: () => this.handleRemoveItemFromOptions(item) });
   }
   buildInitViewWithDataSource() {
-    return h("multi-selection-box-message", { message: "Selecione os valores a serem filtrados atrav\u00E9s do campo de busca." });
+    return h("multi-selection-box-message", { message: this.i18n("ez-multi-selection-list.initMessage") });
   }
   buildViewEmptyResults() {
-    return h("multi-selection-box-message", { message: "Nenhum resultado encontrado." });
+    return h("multi-selection-box-message", { message: this.i18n("ez-multi-selection-list.emptyResults") });
   }
   scenarioToDisplay(view) {
     const scenarios = {
@@ -168,7 +172,7 @@ export class EzMuiltiSelectionList {
     return scenarioBuilder ? scenarioBuilder() : undefined;
   }
   render() {
-    return (h(Host, null, h("div", { class: "multi-selection" }, this.useOptions ? (h("ez-filter-input", { ref: (element) => (this.filterInput = element), label: `Buscar..`, onEzChange: this.handleSearchOnOption.bind(this) })) : (h("ez-search", { class: "multi-selection__input", label: `Buscar...`, ref: (element) => (this.searchInput = element), suppressEmptyOption: true, showOptionValue: false, showSelectedValue: false, optionLoader: (search) => this.searchWithDataSource(search, this.columnName), onEzChange: this.handleSearchOnDataSource.bind(this), isTextSearch: this.isTextSearch })), h("ez-scroll", { class: "multi-selection__content-options" }, this.scenarioToDisplay(this.viewScenario)))));
+    return (h(Host, null, h("div", { class: "multi-selection" }, this.useOptions ? (h("ez-filter-input", { ref: (element) => (this.filterInput = element), label: this.i18n("ez-multi-selection-list.search"), onEzChange: this.handleSearchOnOption.bind(this) })) : (h("ez-search", { class: "multi-selection__input", label: this.i18n("ez-multi-selection-list.search"), ref: (element) => (this.searchInput = element), suppressEmptyOption: true, showOptionValue: false, showSelectedValue: false, optionLoader: (search) => this.searchWithDataSource(search, this.columnName), onEzChange: this.handleSearchOnDataSource.bind(this), isTextSearch: this.isTextSearch })), h("ez-scroll", { class: "multi-selection__content-options" }, this.scenarioToDisplay(this.viewScenario)))));
   }
   static get is() { return "ez-multi-selection-list"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/ez-number-input/ez-number-input.js

@@ -1,6 +1,7 @@
 import { ElementIDUtils, NumberUtils, StringUtils } from "@sankhyalabs/core";
 import { h } from "@stencil/core";
 import CSSVarsUtils from "../../utils/CSSVarsUtils";
+import initI18n from '../../utils/i18n';
 export class EzNumberInput {
   constructor() {
     this._focused = false;
@@ -124,7 +125,7 @@ export class EzNumberInput {
     try {
       const parsedNumber = this.getParsedNumber();
       if (parsedNumber !== undefined && isNaN(parsedNumber)) {
-        this.setError("O valor digitado não é um número válido");
+        this.setError(this.i18n("ez-number-input.invalidNumber"));
       }
       else {
         try {
@@ -161,6 +162,9 @@ export class EzNumberInput {
       this._textInput.value = this._value;
     }
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();

package/dist/collection/components/ez-pagination/ez-pagination.css

@@ -0,0 +1,102 @@
+:host {
+    /* @doc Define a cor do label de informação dfa paginação. */
+    --ez-pagination__info--color: var(--color--petroleum-500);
+
+    /* @doc Define o espaçamento entre o texto de informação e os botões de controle. */
+    --ez-pagination__info--margin-right: var(--space--sm);
+
+    /* @doc Define o peso da fonte do texto de informação . */
+    --ez-pagination__info--text-weight: var(--text-weight--medium);
+
+    /* @doc Define o tamanho da fonte do texto de informação . */
+    --ez-pagination__info--font-size: var(--text--medium);
+
+    /* @doc Define o peso da fonte do texto de intervalo da informação . */
+    --ez-pagination__info-range--font-weight: var(--font-weight--bold);
+
+    /* @doc Define o espaçamento lateral entre as opções de páginas do modo numérico . */
+    --ez-pagination__pages-option-padding: var(--space--nano);
+
+    /* @doc Define a cor de texto das opções de páginas do modo numérico . */
+    --ez-pagination__pages-option-color: var(--color--petroleum-500);
+
+    /* @doc Define a o peso da fonte do texto das opções de páginas do modo numérico . */
+    --ez-pagination__pages-option-weight: var(--text-weight--medium);
+
+    /* @doc Define a o tamanho da fonte do texto das opções de páginas do modo numérico . */
+    --ez-pagination__pages-option-size: var(--text--medium);
+
+}
+
+.pagination-container {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    overflow: hidden;
+}
+
+.info {
+    color: var(--ez-pagination__info--color);
+    margin-right: var(--ez-pagination__info--margin-right);
+    font-weight: var(--ez-pagination__info--text-weight);
+    font-size: var(--ez-pagination__info--font-size);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+}
+
+.info-range {
+    font-weight: var(--ez-pagination__info-range--font-weight);
+}
+
+.controls {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.controls-compact {
+    gap: var(--space--2xs);
+}
+
+.pages-options {
+    display: flex;
+    align-items: center;
+    padding: 0 var(--ez-pagination__pages-option-padding);
+}
+
+.page-button {
+    color: var(--ez-pagination__pages-option-color);
+    font-weight: var(--ez-pagination__pages-option-weight);
+    font-size: var(--ez-pagination__pages-option-size);
+    background-color: transparent;
+    padding: 0;
+    border: none;
+    cursor: pointer;
+    min-width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+
+.current-page {
+    color: var(--color--primary);
+}
+
+.page-info {
+    margin: 0 8px;
+}
+
+.ellipsis {
+    color: var(--ez-pagination__pages-option-color);
+    font-weight: var(--ez-pagination__pages-option-weight);
+    font-size: var(--ez-pagination__pages-option-size);
+    min-width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

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

@@ -0,0 +1,246 @@
+import { h } from '@stencil/core';
+import initI18n from '../../utils/i18n';
+export class EzPagination {
+  constructor() {
+    this.handlePreviousPage = () => {
+      if (this.currentPage > 1) {
+        this.currentPage--;
+        this.ezPageChange.emit(this.currentPage);
+      }
+    };
+    this.handleNextPage = () => {
+      if (this.currentPage < this.getTotalPages()) {
+        this.currentPage++;
+        this.ezPageChange.emit(this.currentPage);
+      }
+    };
+    this.handlePageClick = (page) => {
+      this.currentPage = page;
+      this.ezPageChange.emit(this.currentPage);
+    };
+    this.type = 'default';
+    this.currentPage = 1;
+    this.totalItems = 0;
+    this.pageSize = 10;
+    this.hideInfoLabel = false;
+    this.pageLimit = 10;
+  }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
+  getTotalPages() {
+    return Math.ceil(this.totalItems / this.pageSize);
+  }
+  renderNextBtn() {
+    return h("ez-button", { "aria-label": this.i18n('ez-pagination.nextPage'), label: this.i18n('ez-pagination.nextPage'), "data-element-id": "pagination-next-button", size: "small", iconName: "arrow-right", class: "ez-button--primary", mode: "icon", enabled: this.currentPage < this.getTotalPages(), onClick: () => this.handleNextPage() });
+  }
+  renderPreviousBtn() {
+    return h("ez-button", { label: this.i18n('ez-pagination.previousPage'), "aria-label": this.i18n('ez-pagination.previousPage'), "data-element-id": "pagination-previous-button", size: "small", iconName: "arrow-left", mode: "icon", enabled: this.currentPage > 1, onClick: () => this.handlePreviousPage() });
+  }
+  renderPageButton(page) {
+    return (h("button", { "aria-label": `page-${page}`, class: { 'page-button': true, 'current-page': this.currentPage === page }, onClick: () => this.handlePageClick(page) }, page));
+  }
+  renderEllipsis() {
+    return h("span", { "aria-label": 'page-ellipsis', class: "ellipsis" }, "...");
+  }
+  renderPageButtons(pages) {
+    return pages.map(page => (page === '...' ? this.renderEllipsis() : this.renderPageButton(page)));
+  }
+  renderInfoLabel(firstItem, lastItem) {
+    return !this.hideInfoLabel && (h("div", { class: "info" }, h("span", { class: 'info-range' }, firstItem, " at\u00E9 ", lastItem), " de ", this.totalItems));
+  }
+  renderDefault() {
+    const firstItem = (this.currentPage - 1) * this.pageSize + 1;
+    const lastItem = Math.min(this.currentPage * this.pageSize, this.totalItems);
+    return (h("div", { class: "pagination-container" }, this.renderInfoLabel(firstItem, lastItem), h("div", { class: "controls controls-compact" }, this.renderPreviousBtn(), this.renderNextBtn())));
+  }
+  renderNumber() {
+    const totalPages = this.getTotalPages();
+    const { currentPage, pageLimit } = this;
+    const pages = [];
+    if (totalPages <= pageLimit) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    }
+    else {
+      const range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
+      const mainPagesCount = pageLimit - 2;
+      const showLeftEllipsis = currentPage > mainPagesCount;
+      const showRightEllipsis = currentPage < totalPages - mainPagesCount + 1;
+      if (!showLeftEllipsis) {
+        // Exibe o início da paginação sem elipse à esquerda
+        // Ex: 1 2 3 4 5 6 ... 10 (pageLimit = 8)
+        pages.push(...range(1, pageLimit - 2));
+        pages.push('...');
+        pages.push(totalPages);
+      }
+      else if (!showRightEllipsis) {
+        // Exibe o final da paginação sem elipse à direita
+        // Ex: 1 ... 5 6 7 8 9 10 (pageLimit = 8)
+        pages.push(1);
+        pages.push('...');
+        pages.push(...range(totalPages - (pageLimit - 3), totalPages));
+      }
+      else {
+        // Exibe elipses em ambos os lados
+        // Ex: 1 ... 4 5 6 7 ... 10 (pageLimit = 8)
+        const innerPagesCount = pageLimit - 4; // Contabiliza 1, ..., ..., totalPages
+        const aroundCount = Math.floor((innerPagesCount - 1) / 2);
+        const startPage = currentPage - aroundCount;
+        const endPage = currentPage + (innerPagesCount - 1 - aroundCount);
+        pages.push(1);
+        pages.push('...');
+        pages.push(...range(startPage, endPage));
+        pages.push('...');
+        pages.push(totalPages);
+      }
+    }
+    return (h("div", { class: "pagination-container" }, h("div", { class: "controls" }, this.renderPreviousBtn(), h("div", { class: "pages-options" }, this.renderPageButtons(pages)), this.renderNextBtn())));
+  }
+  render() {
+    return this.type === 'number' ? this.renderNumber() : this.renderDefault();
+  }
+  static get is() { return "ez-pagination"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-pagination.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-pagination.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'number'",
+          "resolved": "\"default\" | \"number\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "O tipo de pagina\u00E7\u00E3o a ser renderizada.\nPode ser 'default' ou 'number'."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "currentPage": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "O n\u00FAmero da p\u00E1gina atual."
+        },
+        "attribute": "current-page",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "totalItems": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "O n\u00FAmero total de itens."
+        },
+        "attribute": "total-items",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "pageSize": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "O n\u00FAmero de itens por p\u00E1gina."
+        },
+        "attribute": "page-size",
+        "reflect": false,
+        "defaultValue": "10"
+      },
+      "hideInfoLabel": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Esconde as o texto de informa\u00E7\u00E3o da pagina\u00E7\u00E3o no tipo default."
+        },
+        "attribute": "hide-info-label",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "pageLimit": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "O n\u00FAmero de p\u00E1ginas a serem exibidas na pagina\u00E7\u00E3o."
+        },
+        "attribute": "page-limit",
+        "reflect": false,
+        "defaultValue": "10"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezPageChange",
+        "name": "ezPageChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento emitido quando a p\u00E1gina \u00E9 alterada."
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }];
+  }
+}