@sankhyalabs/ezui 6.1.0 → 6.2.0-dev.1

package/dist/collection/components/ez-grid/subcomponents/filter-column.js

@@ -1,6 +1,7 @@
 import { UserInterface } from '@sankhyalabs/core';
 import { h } from '@stencil/core';
 import { PRESENTATION_FROM_COL_PROP_NAME } from '../../../utils/constants';
+import initI18n from '../../../utils/i18n';
 const windowInstace = window;
 const onSubmitFilter = new CustomEvent('onSubmitFilter', {
   detail: {
@@ -107,8 +108,8 @@ export class FilterColumn {
     }
     if (this.isCheckBoxOrSwitch()) {
       return [
-        { label: 'Sim', value: 'true', check: true },
-        { label: 'Não', value: 'false', check: true },
+        { label: this.i18n("app.yes"), value: 'true', check: true },
+        { label: this.i18n("app.no"), value: 'false', check: true },
       ];
     }
     const options = (_b = (_a = this.fieldDescriptor) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.options;
@@ -128,8 +129,11 @@ export class FilterColumn {
       this.clearConfigs();
     }
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   render() {
-    return (h("ez-popover-plus", { ref: (element) => (this.ezPopoverElement = element), class: 'filter-column__popover', "overlay-type": 'none', autoClose: true, onEzVisibilityChange: this.handleEzVisibilityChange.bind(this) }, h("section", { class: 'filter-column' }, h("header", { class: 'filter-column__header' }, h("span", { class: 'ez-text ez-text--medium filter-column__header-title' }, "Filtro da coluna ", this.columnLabel), h("ez-button", { mode: 'icon', "icon-name": 'close', class: 'ez-button--tertiary', onClick: () => this.hide() })), h("ez-multi-selection-list", { id: 'filter-column-selection-list', columnName: this.columnName, dataSource: this.dataSource, options: this.options, useOptions: this.useOptions, ref: (element) => (this.ezMultiSelectionList = element), onChangeFilteredOptions: (event) => this.changeSelectedItems(event.detail), isTextSearch: this.isTextSearch, "data-element-id": this.columnName }), h("footer", { class: 'filter-column__footer' }, h("ez-button", { label: 'Aplicar', class: 'ez-button--primary', onClick: this.submit.bind(this) })))));
+    return (h("ez-popover-plus", { ref: (element) => (this.ezPopoverElement = element), class: 'filter-column__popover', "overlay-type": 'none', autoClose: true, onEzVisibilityChange: this.handleEzVisibilityChange.bind(this) }, h("section", { class: 'filter-column' }, h("header", { class: 'filter-column__header' }, h("span", { class: 'ez-text ez-text--medium filter-column__header-title' }, this.i18n("ez-grid.filterColumnHeader", { columnLabel: this.columnLabel })), h("ez-button", { mode: 'icon', "icon-name": 'close', class: 'ez-button--tertiary', onClick: () => this.hide() })), h("ez-multi-selection-list", { id: 'filter-column-selection-list', columnName: this.columnName, dataSource: this.dataSource, options: this.options, useOptions: this.useOptions, ref: (element) => (this.ezMultiSelectionList = element), onChangeFilteredOptions: (event) => this.changeSelectedItems(event.detail), isTextSearch: this.isTextSearch, "data-element-id": this.columnName }), h("footer", { class: 'filter-column__footer' }, h("ez-button", { label: this.i18n("app.apply"), class: 'ez-button--primary', onClick: this.submit.bind(this) })))));
   }
   static get is() { return "filter-column"; }
   static get originalStyleUrls() {

package/dist/collection/components/ez-grid/subcomponents/selection-counter.js

@@ -2,7 +2,7 @@ import { ElementIDUtils } from "@sankhyalabs/core";
 import { h } from "@stencil/core";
 import { buildSelectAllLabel, buildSelectAllTitle, enableSelectAll, getText } from './utils/selectionCounterUtils';
 export const SelectionCounter = (props) => {
-  const { selectionCount, currentPageSelected, allRecordSelected, paginationInfo, canSelectAll, onSelectAll, onSelectPage, onClearAll, onClose } = props;
+  const { selectionCount, currentPageSelected, allRecordSelected, paginationInfo, canSelectAll, onSelectAll, onSelectPage, onClearAll, onClose, i18n } = props;
   const { total, hasMore, count } = paginationInfo || {};
   const shouldRenderSelectionButton = () => {
     if ((!allRecordSelected && selectionCount === total) || (allRecordSelected && !hasMore))
@@ -12,7 +12,7 @@ export const SelectionCounter = (props) => {
     return !!paginationInfo && (currentPageSelected || allRecordSelected);
   };
   return (h("div", Object.assign({ class: "ez-box ez-box--shadow-small" }, getElementID("ezGridSelectionCounter")), h("div", { class: "ez-flex ez-flex--align-items-center ez-size-width--full ez-padding-horizontal--medium" }, h("div", { class: "ez-flex ez-flex--wrap ez-flex--align-items-baseline ez-flex--justify-center" }, h("label", Object.assign({ innerHTML: getText(selectionCount, allRecordSelected), class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium ez-margin-top--medium" }, getElementID("ezGridSelectionCounter_label"))), h("div", { class: "ez-flex ez-margin-right--medium" }, shouldRenderSelectionButton() &&
-    h("ez-button", Object.assign({ key: "selectAllRecordsEzButton", title: buildSelectAllTitle(total), enabled: enableSelectAll(total), class: "ez-margin-right--medium", label: buildSelectAllLabel(allRecordSelected, count, total), mode: "link", onClick: allRecordSelected ? onSelectPage : onSelectAll }, getElementID(`ezGridSelectionCounter_select${allRecordSelected ? "Page" : "All"}`))), h("ez-button", Object.assign({ key: "clearAllSelectionEzButton", class: "grid__btn-clear", label: "Limpar Sele\u00E7\u00E3o", mode: "link", onClick: onClearAll }, getElementID("ezGridSelectionCounter_clearAll"))))), h("button", Object.assign({ class: "grid__btn-close", title: "Fechar", onClick: onClose }, getElementID("ezGridSelectionCounter_close")), h("ez-icon", { iconName: "close" })))));
+    h("ez-button", Object.assign({ key: "selectAllRecordsEzButton", title: buildSelectAllTitle(total), enabled: enableSelectAll(total), class: "ez-margin-right--medium", label: buildSelectAllLabel(allRecordSelected, count, total), mode: "link", onClick: allRecordSelected ? onSelectPage : onSelectAll }, getElementID(`ezGridSelectionCounter_select${allRecordSelected ? "Page" : "All"}`))), h("ez-button", Object.assign({ key: "clearAllSelectionEzButton", class: "grid__btn-clear", label: i18n("ez-grid.clearSelection"), mode: "link", onClick: onClearAll }, getElementID("ezGridSelectionCounter_clearAll"))))), h("button", Object.assign({ class: "grid__btn-close", title: i18n("app.close"), onClick: onClose }, getElementID("ezGridSelectionCounter_close")), h("ez-icon", { iconName: "close" })))));
 };
 function getElementID(sufix) {
   return {

package/dist/collection/components/ez-grid/subcomponents/utils/selectionCounterUtils.js

@@ -1,22 +1,26 @@
+import { getI18n } from "../../../../utils/i18n";
 export function enableSelectAll(total) {
   return total !== undefined;
 }
 export function buildSelectAllLabel(allRecordSelected, count, total) {
+  const i18n = getI18n();
   if (allRecordSelected)
-    return 'Selecionar apenas a página atual';
+    return i18n('utils.selectAllPage');
   if (total === undefined)
-    return `Carregando todos os ${count} registros`;
-  return `Selecionar todos os ${total} registros`;
+    return i18n('utils.loadingAllRecords', { count });
+  return i18n('utils.selectAllRecords', { total });
 }
 export function buildSelectAllTitle(total) {
   if (enableSelectAll(total))
     return '';
-  return 'Aguarde o carregamento para selecionar o registro de todas as páginas';
+  const i18n = getI18n();
+  return i18n('utils.waitForLoad');
 }
 export function getText(selectionCount, allSelectedRecords) {
+  const i18n = getI18n();
   if (allSelectedRecords) {
-    return `Todos os <strong>${selectionCount} registros</strong> da grade estão selecionados.`;
+    return i18n('utils.allRecordsSelected', { selectionCount });
   }
-  const pluralCharacter = selectionCount > 1 ? "s" : "";
-  return `Há <strong>${selectionCount} registro${pluralCharacter}</strong> selecionado${pluralCharacter} na grade.`;
+  const plural = selectionCount > 1 ? "s" : "";
+  return i18n('utils.selectedRecords', { selectionCount, plural });
 }

package/dist/collection/components/ez-guide-navigator/ez-guide-navigator.js

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { ElementIDUtils } from "@sankhyalabs/core";
 import { EzScrollDirection } from "../ez-scroller/EzScrollDirection";
+import initI18n from '../../utils/i18n';
 const ENTER_KEY = "Enter";
 export class EzGuideNavigator {
   constructor() {
@@ -70,6 +71,9 @@ export class EzGuideNavigator {
   async getParent(id) {
     return this._tree.getParent(id);
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   async handleToggleSidebar() {
     this.open = !this.open;
   }
@@ -84,7 +88,7 @@ export class EzGuideNavigator {
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._element);
-    return (h(Host, null, h("ez-sidebar-button", { class: this.open ? "hidden" : "", onEzClick: this.handleToggleSidebar.bind(this), "aria-controls": "navigator", "aria-expanded": this.open, "data-element-id": ElementIDUtils.getInternalIDInfo("openButton") }), h("aside", { tabIndex: -1, id: "navigator", class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-guide-navigator " + (this.open ? "" : "hidden"), "data-element-id": ElementIDUtils.getInternalIDInfo("sidebar") }, h("div", { role: "search", class: "ez-guide-navigator__actions" }, h("ez-filter-input", { mode: "slim", value: this.filterText, onEzChange: (event) => this.onFilterChanged(event), label: "Buscar guia", "aria-placeholder": "Buscar guia", onKeyUp: this.handleFilterTree.bind(this), "data-element-id": ElementIDUtils.getInternalIDInfo("textinput") }), h("ez-button", { onClick: this.handleToggleSidebar.bind(this), class: "inverted", mode: "icon", size: "small", iconName: "show_menu", title: "Ocultar menu", "aria-label": "Ocultar menu", "aria-controls": "navigator", "data-element-id": ElementIDUtils.getInternalIDInfo("closeButton") })), h("ez-scroller", { direction: EzScrollDirection.VERTICAL, activeShadow: true }, h("ez-tree", { ref: element => (this._tree = element), items: this.items, "data-element-id": ElementIDUtils.getInternalIDInfo("tree"), tooltipResolver: this.tooltipResolver, onEzChange: evt => this.ezSelectionChange.emit(evt.detail), selectedId: this.selectedId })))));
+    return (h(Host, null, h("ez-sidebar-button", { class: this.open ? "hidden" : "", onEzClick: this.handleToggleSidebar.bind(this), "aria-controls": "navigator", "aria-expanded": this.open, "data-element-id": ElementIDUtils.getInternalIDInfo("openButton") }), h("aside", { tabIndex: -1, id: "navigator", class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-guide-navigator " + (this.open ? "" : "hidden"), "data-element-id": ElementIDUtils.getInternalIDInfo("sidebar") }, h("div", { role: "search", class: "ez-guide-navigator__actions" }, h("ez-filter-input", { mode: "slim", value: this.filterText, onEzChange: (event) => this.onFilterChanged(event), label: this.i18n("ez-guide-navigator.searchGuide"), "aria-placeholder": this.i18n("ez-guide-navigator.searchGuide"), onKeyUp: this.handleFilterTree.bind(this), "data-element-id": ElementIDUtils.getInternalIDInfo("textinput") }), h("ez-button", { onClick: this.handleToggleSidebar.bind(this), class: "inverted", mode: "icon", size: "small", iconName: "show_menu", title: this.i18n("ez-guide-navigator.hideMenu"), "aria-label": this.i18n("ez-guide-navigator.hideMenu"), "aria-controls": "navigator", "data-element-id": ElementIDUtils.getInternalIDInfo("closeButton") })), h("ez-scroller", { direction: EzScrollDirection.VERTICAL, activeShadow: true }, h("ez-tree", { ref: element => (this._tree = element), items: this.items, "data-element-id": ElementIDUtils.getInternalIDInfo("tree"), tooltipResolver: this.tooltipResolver, onEzChange: evt => this.ezSelectionChange.emit(evt.detail), selectedId: this.selectedId })))));
   }
   static get is() { return "ez-guide-navigator"; }
   static get encapsulation() { return "shadow"; }

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

@@ -76,146 +76,153 @@ svg {
 .ez-icon-balance:before { content: "\ea13"; }
 .ez-icon-bell-inverted:before { content: "\ea14"; }
 .ez-icon-bell:before { content: "\ea15"; }
-.ez-icon-boleto:before { content: "\ea16"; }
-.ez-icon-boolean:before { content: "\ea17"; }
-.ez-icon-business-center:before { content: "\ea18"; }
-.ez-icon-calendar-clock:before { content: "\ea19"; }
-.ez-icon-calendar:before { content: "\ea1a"; }
-.ez-icon-cart-history:before { content: "\ea1b"; }
-.ez-icon-cash-remove:before { content: "\ea1c"; }
-.ez-icon-check-circle-inverted:before { content: "\ea1d"; }
-.ez-icon-check-circle:before { content: "\ea1e"; }
-.ez-icon-check:before { content: "\ea1f"; }
-.ez-icon-chevron-down:before { content: "\ea20"; }
-.ez-icon-chevron-left:before { content: "\ea21"; }
-.ez-icon-chevron-right:before { content: "\ea22"; }
-.ez-icon-chevron-up:before { content: "\ea23"; }
-.ez-icon-circle--medium:before { content: "\ea24"; }
-.ez-icon-circle:before { content: "\ea25"; }
-.ez-icon-clean-cart:before { content: "\ea26"; }
-.ez-icon-cleaning:before { content: "\ea27"; }
-.ez-icon-clipboard:before { content: "\ea28"; }
-.ez-icon-clock-rotate-left:before { content: "\ea29"; }
-.ez-icon-close:before { content: "\ea2a"; }
-.ez-icon-cobrar:before { content: "\ea2b"; }
-.ez-icon-code:before { content: "\ea2c"; }
-.ez-icon-configuration:before { content: "\ea2d"; }
-.ez-icon-content-cut:before { content: "\ea2e"; }
-.ez-icon-copy:before { content: "\ea2f"; }
-.ez-icon-credit_card:before { content: "\ea30"; }
-.ez-icon-crop:before { content: "\ea31"; }
-.ez-icon-custom:before { content: "\ea32"; }
-.ez-icon-delete-file:before { content: "\ea33"; }
-.ez-icon-delete:before { content: "\ea34"; }
-.ez-icon-description:before { content: "\ea35"; }
-.ez-icon-dividir:before { content: "\ea36"; }
-.ez-icon-docx:before { content: "\ea37"; }
-.ez-icon-dot-notification:before { content: "\ea38"; }
-.ez-icon-dots-horizontal:before { content: "\ea39"; }
-.ez-icon-dots-vertical:before { content: "\ea3a"; }
-.ez-icon-drag-indicator:before { content: "\ea3b"; }
-.ez-icon-dual-chevron-down:before { content: "\ea3c"; }
-.ez-icon-dual-chevron-left:before { content: "\ea3d"; }
-.ez-icon-dual-chevron-right:before { content: "\ea3e"; }
-.ez-icon-dual-chevron-up:before { content: "\ea3f"; }
-.ez-icon-edit-file:before { content: "\ea40"; }
-.ez-icon-edit-table:before { content: "\ea41"; }
-.ez-icon-edit-time:before { content: "\ea42"; }
-.ez-icon-edit-value:before { content: "\ea43"; }
-.ez-icon-edit:before { content: "\ea44"; }
-.ez-icon-email:before { content: "\ea45"; }
-.ez-icon-estorno:before { content: "\ea46"; }
-.ez-icon-exe:before { content: "\ea47"; }
-.ez-icon-expand:before { content: "\ea48"; }
-.ez-icon-expandir_card:before { content: "\ea49"; }
-.ez-icon-extrato:before { content: "\ea4a"; }
-.ez-icon-eye-off:before { content: "\ea4b"; }
-.ez-icon-eye:before { content: "\ea4c"; }
-.ez-icon-favorite:before { content: "\ea4d"; }
-.ez-icon-figma:before { content: "\ea4e"; }
-.ez-icon-file-download:before { content: "\ea4f"; }
-.ez-icon-file-upload:before { content: "\ea50"; }
-.ez-icon-filter:before { content: "\ea51"; }
-.ez-icon-find-file:before { content: "\ea52"; }
-.ez-icon-find-page:before { content: "\ea53"; }
-.ez-icon-format-color-fill:before { content: "\ea54"; }
-.ez-icon-generic:before { content: "\ea55"; }
-.ez-icon-gif:before { content: "\ea56"; }
-.ez-icon-graph_bar:before { content: "\ea57"; }
-.ez-icon-handshake:before { content: "\ea58"; }
-.ez-icon-help-inverted:before { content: "\ea59"; }
-.ez-icon-help:before { content: "\ea5a"; }
-.ez-icon-hide-list:before { content: "\ea5b"; }
-.ez-icon-hide_menu:before { content: "\ea5c"; }
-.ez-icon-hierarchical-tree:before { content: "\ea5d"; }
-.ez-icon-home:before { content: "\ea5e"; }
-.ez-icon-icons104:before { content: "\ea5f"; }
-.ez-icon-language:before { content: "\ea60"; }
-.ez-icon-launch:before { content: "\ea61"; }
-.ez-icon-lightbulb:before { content: "\ea62"; }
-.ez-icon-list:before { content: "\ea63"; }
-.ez-icon-location:before { content: "\ea64"; }
-.ez-icon-lock-outline:before { content: "\ea65"; }
-.ez-icon-lock:before { content: "\ea66"; }
-.ez-icon-menu:before { content: "\ea67"; }
-.ez-icon-mid:before { content: "\ea68"; }
-.ez-icon-minus:before { content: "\ea69"; }
-.ez-icon-money-off:before { content: "\ea6a"; }
-.ez-icon-money:before { content: "\ea6b"; }
-.ez-icon-more:before { content: "\ea6c"; }
-.ez-icon-mp3:before { content: "\ea6d"; }
-.ez-icon-mp4:before { content: "\ea6e"; }
-.ez-icon-multiple-files:before { content: "\ea6f"; }
-.ez-icon-north-west:before { content: "\ea70"; }
-.ez-icon-number:before { content: "\ea71"; }
-.ez-icon-ordem-ascendente:before { content: "\ea72"; }
-.ez-icon-ordem-descendente:before { content: "\ea73"; }
-.ez-icon-parcelar:before { content: "\ea74"; }
-.ez-icon-pause:before { content: "\ea75"; }
-.ez-icon-payments:before { content: "\ea76"; }
-.ez-icon-pdf:before { content: "\ea77"; }
-.ez-icon-play:before { content: "\ea78"; }
-.ez-icon-plus:before { content: "\ea79"; }
-.ez-icon-png:before { content: "\ea7a"; }
-.ez-icon-power:before { content: "\ea7b"; }
-.ez-icon-pptx:before { content: "\ea7c"; }
-.ez-icon-preview:before { content: "\ea7d"; }
-.ez-icon-print:before { content: "\ea7e"; }
-.ez-icon-push-pin:before { content: "\ea7f"; }
-.ez-icon-rateio:before { content: "\ea80"; }
-.ez-icon-receipt:before { content: "\ea81"; }
-.ez-icon-recolher_card:before { content: "\ea82"; }
-.ez-icon-remove-from-cart:before { content: "\ea83"; }
-.ez-icon-restore:before { content: "\ea84"; }
-.ez-icon-return:before { content: "\ea85"; }
-.ez-icon-sankhya-place:before { content: "\ea86"; }
-.ez-icon-save:before { content: "\ea87"; }
-.ez-icon-search:before { content: "\ea88"; }
-.ez-icon-settings-inverted:before { content: "\ea89"; }
-.ez-icon-settings:before { content: "\ea8a"; }
-.ez-icon-share:before { content: "\ea8b"; }
-.ez-icon-shield:before { content: "\ea8c"; }
-.ez-icon-show-list:before { content: "\ea8d"; }
-.ez-icon-show_menu:before { content: "\ea8e"; }
-.ez-icon-south-east:before { content: "\ea8f"; }
-.ez-icon-sync:before { content: "\ea90"; }
-.ez-icon-table:before { content: "\ea91"; }
-.ez-icon-tag_code:before { content: "\ea92"; }
-.ez-icon-text:before { content: "\ea93"; }
-.ez-icon-timeline:before { content: "\ea94"; }
-.ez-icon-timer-outline:before { content: "\ea95"; }
-.ez-icon-trending-up:before { content: "\ea96"; }
-.ez-icon-tune:before { content: "\ea97"; }
-.ez-icon-txt:before { content: "\ea98"; }
-.ez-icon-un-pin:before { content: "\ea99"; }
-.ez-icon-unfold_less:before { content: "\ea9a"; }
-.ez-icon-unfold_more:before { content: "\ea9b"; }
-.ez-icon-user-circle:before { content: "\ea9c"; }
-.ez-icon-warning-outline:before { content: "\ea9d"; }
-.ez-icon-warning_triangle:before { content: "\ea9e"; }
-.ez-icon-whatshot:before { content: "\ea9f"; }
-.ez-icon-xlsx:before { content: "\eaa0"; }
-.ez-icon-zip:before { content: "\eaa1"; }
+.ez-icon-bold:before { content: "\ea16"; }
+.ez-icon-boleto:before { content: "\ea17"; }
+.ez-icon-boolean:before { content: "\ea18"; }
+.ez-icon-business-center:before { content: "\ea19"; }
+.ez-icon-calendar-clock:before { content: "\ea1a"; }
+.ez-icon-calendar:before { content: "\ea1b"; }
+.ez-icon-cart-history:before { content: "\ea1c"; }
+.ez-icon-cash-remove:before { content: "\ea1d"; }
+.ez-icon-check-circle-inverted:before { content: "\ea1e"; }
+.ez-icon-check-circle:before { content: "\ea1f"; }
+.ez-icon-check:before { content: "\ea20"; }
+.ez-icon-chevron-down:before { content: "\ea21"; }
+.ez-icon-chevron-left:before { content: "\ea22"; }
+.ez-icon-chevron-right:before { content: "\ea23"; }
+.ez-icon-chevron-up:before { content: "\ea24"; }
+.ez-icon-circle--medium:before { content: "\ea25"; }
+.ez-icon-circle:before { content: "\ea26"; }
+.ez-icon-clean-cart:before { content: "\ea27"; }
+.ez-icon-cleaning:before { content: "\ea28"; }
+.ez-icon-clipboard:before { content: "\ea29"; }
+.ez-icon-clock-rotate-left:before { content: "\ea2a"; }
+.ez-icon-close:before { content: "\ea2b"; }
+.ez-icon-cobrar:before { content: "\ea2c"; }
+.ez-icon-code:before { content: "\ea2d"; }
+.ez-icon-configuration:before { content: "\ea2e"; }
+.ez-icon-content-cut:before { content: "\ea2f"; }
+.ez-icon-copy:before { content: "\ea30"; }
+.ez-icon-credit_card:before { content: "\ea31"; }
+.ez-icon-crop:before { content: "\ea32"; }
+.ez-icon-custom:before { content: "\ea33"; }
+.ez-icon-delete-file:before { content: "\ea34"; }
+.ez-icon-delete:before { content: "\ea35"; }
+.ez-icon-description:before { content: "\ea36"; }
+.ez-icon-dividir:before { content: "\ea37"; }
+.ez-icon-docx:before { content: "\ea38"; }
+.ez-icon-dot-notification:before { content: "\ea39"; }
+.ez-icon-dots-horizontal:before { content: "\ea3a"; }
+.ez-icon-dots-vertical:before { content: "\ea3b"; }
+.ez-icon-drag-indicator:before { content: "\ea3c"; }
+.ez-icon-dual-chevron-down:before { content: "\ea3d"; }
+.ez-icon-dual-chevron-left:before { content: "\ea3e"; }
+.ez-icon-dual-chevron-right:before { content: "\ea3f"; }
+.ez-icon-dual-chevron-up:before { content: "\ea40"; }
+.ez-icon-edit-file:before { content: "\ea41"; }
+.ez-icon-edit-table:before { content: "\ea42"; }
+.ez-icon-edit-time:before { content: "\ea43"; }
+.ez-icon-edit-value:before { content: "\ea44"; }
+.ez-icon-edit:before { content: "\ea45"; }
+.ez-icon-email:before { content: "\ea46"; }
+.ez-icon-estorno:before { content: "\ea47"; }
+.ez-icon-exe:before { content: "\ea48"; }
+.ez-icon-expand:before { content: "\ea49"; }
+.ez-icon-expandir_card:before { content: "\ea4a"; }
+.ez-icon-extrato:before { content: "\ea4b"; }
+.ez-icon-eye-off:before { content: "\ea4c"; }
+.ez-icon-eye:before { content: "\ea4d"; }
+.ez-icon-favorite:before { content: "\ea4e"; }
+.ez-icon-figma:before { content: "\ea4f"; }
+.ez-icon-file-download:before { content: "\ea50"; }
+.ez-icon-file-upload:before { content: "\ea51"; }
+.ez-icon-filter:before { content: "\ea52"; }
+.ez-icon-find-file:before { content: "\ea53"; }
+.ez-icon-find-page:before { content: "\ea54"; }
+.ez-icon-format-color-fill:before { content: "\ea55"; }
+.ez-icon-generic:before { content: "\ea56"; }
+.ez-icon-gif:before { content: "\ea57"; }
+.ez-icon-graph_bar:before { content: "\ea58"; }
+.ez-icon-handshake:before { content: "\ea59"; }
+.ez-icon-help-inverted:before { content: "\ea5a"; }
+.ez-icon-help:before { content: "\ea5b"; }
+.ez-icon-hide-list:before { content: "\ea5c"; }
+.ez-icon-hide_menu:before { content: "\ea5d"; }
+.ez-icon-hierarchical-tree:before { content: "\ea5e"; }
+.ez-icon-home:before { content: "\ea5f"; }
+.ez-icon-icons104:before { content: "\ea60"; }
+.ez-icon-image-plus:before { content: "\ea61"; }
+.ez-icon-italic:before { content: "\ea62"; }
+.ez-icon-language:before { content: "\ea63"; }
+.ez-icon-launch:before { content: "\ea64"; }
+.ez-icon-lightbulb:before { content: "\ea65"; }
+.ez-icon-link:before { content: "\ea66"; }
+.ez-icon-list:before { content: "\ea67"; }
+.ez-icon-location:before { content: "\ea68"; }
+.ez-icon-lock-outline:before { content: "\ea69"; }
+.ez-icon-lock:before { content: "\ea6a"; }
+.ez-icon-menu:before { content: "\ea6b"; }
+.ez-icon-mid:before { content: "\ea6c"; }
+.ez-icon-minus:before { content: "\ea6d"; }
+.ez-icon-money-off:before { content: "\ea6e"; }
+.ez-icon-money:before { content: "\ea6f"; }
+.ez-icon-more:before { content: "\ea70"; }
+.ez-icon-mp3:before { content: "\ea71"; }
+.ez-icon-mp4:before { content: "\ea72"; }
+.ez-icon-multiple-files:before { content: "\ea73"; }
+.ez-icon-north-west:before { content: "\ea74"; }
+.ez-icon-number:before { content: "\ea75"; }
+.ez-icon-ordem-ascendente:before { content: "\ea76"; }
+.ez-icon-ordem-descendente:before { content: "\ea77"; }
+.ez-icon-parcelar:before { content: "\ea78"; }
+.ez-icon-pause:before { content: "\ea79"; }
+.ez-icon-payments:before { content: "\ea7a"; }
+.ez-icon-pdf:before { content: "\ea7b"; }
+.ez-icon-play:before { content: "\ea7c"; }
+.ez-icon-plus:before { content: "\ea7d"; }
+.ez-icon-png:before { content: "\ea7e"; }
+.ez-icon-power:before { content: "\ea7f"; }
+.ez-icon-pptx:before { content: "\ea80"; }
+.ez-icon-preview:before { content: "\ea81"; }
+.ez-icon-print:before { content: "\ea82"; }
+.ez-icon-push-pin:before { content: "\ea83"; }
+.ez-icon-rateio:before { content: "\ea84"; }
+.ez-icon-receipt:before { content: "\ea85"; }
+.ez-icon-recolher_card:before { content: "\ea86"; }
+.ez-icon-redo:before { content: "\ea87"; }
+.ez-icon-remove-from-cart:before { content: "\ea88"; }
+.ez-icon-restore:before { content: "\ea89"; }
+.ez-icon-return:before { content: "\ea8a"; }
+.ez-icon-sankhya-place:before { content: "\ea8b"; }
+.ez-icon-save:before { content: "\ea8c"; }
+.ez-icon-search:before { content: "\ea8d"; }
+.ez-icon-settings-inverted:before { content: "\ea8e"; }
+.ez-icon-settings:before { content: "\ea8f"; }
+.ez-icon-share:before { content: "\ea90"; }
+.ez-icon-shield:before { content: "\ea91"; }
+.ez-icon-show-list:before { content: "\ea92"; }
+.ez-icon-show_menu:before { content: "\ea93"; }
+.ez-icon-south-east:before { content: "\ea94"; }
+.ez-icon-sync:before { content: "\ea95"; }
+.ez-icon-table:before { content: "\ea96"; }
+.ez-icon-tag_code:before { content: "\ea97"; }
+.ez-icon-text:before { content: "\ea98"; }
+.ez-icon-timeline:before { content: "\ea99"; }
+.ez-icon-timer-outline:before { content: "\ea9a"; }
+.ez-icon-trending-up:before { content: "\ea9b"; }
+.ez-icon-tune:before { content: "\ea9c"; }
+.ez-icon-txt:before { content: "\ea9d"; }
+.ez-icon-un-pin:before { content: "\ea9e"; }
+.ez-icon-underline:before { content: "\ea9f"; }
+.ez-icon-undo:before { content: "\eaa0"; }
+.ez-icon-unfold_less:before { content: "\eaa1"; }
+.ez-icon-unfold_more:before { content: "\eaa2"; }
+.ez-icon-user-circle:before { content: "\eaa3"; }
+.ez-icon-warning-outline:before { content: "\eaa4"; }
+.ez-icon-warning_triangle:before { content: "\eaa5"; }
+.ez-icon-whatshot:before { content: "\eaa6"; }
+.ez-icon-xlsx:before { content: "\eaa7"; }
+.ez-icon-zip:before { content: "\eaa8"; }
 /*
   END CSS GENERATED BY EZ-DESIGN ICONS
 */

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-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 = [];
@@ -55,7 +59,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));
@@ -141,16 +145,16 @@ export class EzMuiltiSelectionList {
     itemSelected.check = itemCheckSelected.check;
   }
   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, 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, 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 = {
@@ -164,7 +168,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();