@sankhyalabs/ezui 6.1.0-dev.20 → 6.1.0-dev.21

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();

package/dist/collection/components/ez-rich-text/ez-link-builder/ez-link-builder.js

@@ -1,5 +1,6 @@
 import { h } from '@stencil/core';
 import { RICH_TOOLBAR_COMMANDS } from '../ez-rich-toolbar/RichToolbarHelper';
+import initI18n from '../../../utils/i18n';
 export class EzLinkBuilder {
   constructor() {
     this.textToShow = undefined;
@@ -15,6 +16,9 @@ export class EzLinkBuilder {
   async hide() {
     this._popupElement.opened = false;
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   async handleCancel() {
     this.clearValues();
     this.executeToolbarCommand.emit({ command: RICH_TOOLBAR_COMMANDS.FOCUS });
@@ -45,7 +49,7 @@ export class EzLinkBuilder {
     return ((_a = this.link) === null || _a === void 0 ? void 0 : _a.trim()) ? 'ENABLED' : 'DISABLED';
   }
   render() {
-    return (h("ez-popup", { heightMode: 'auto', size: 'small', useHeader: false, ref: ref => this._popupElement = ref, onEzClosePopup: () => this.clearValues() }, h("div", null, h("ez-modal-container", { modalTitle: "Adicionar link", modalSubTitle: "Insira um link no texto para abrir novas p\u00E1ginas.", okButtonLabel: "Enviar", cancelButtonLabel: "Cancelar", onEzModalAction: this.handleActionPopup.bind(this), okButtonStatus: this.getOkButtonStatus() }, h("div", { class: 'link-builder-container' }, h("ez-text-input", { id: 'link_url_input', label: 'Insira a URL destino', value: this.link, onEzChange: (e) => this.link = e.detail }), h("ez-text-input", { id: 'link_text_input', label: 'Insira o texto a ser exibido', value: this.textToShow, onEzChange: (e) => this.textToShow = e.detail }), h("ez-check", { label: 'Abrir em uma nova página.', value: this.openInNewGuide, onEzChange: (e) => this.openInNewGuide = e.detail }))))));
+    return (h("ez-popup", { heightMode: 'auto', size: 'small', useHeader: false, ref: ref => this._popupElement = ref, onEzClosePopup: () => this.clearValues() }, h("div", null, h("ez-modal-container", { modalTitle: this.i18n("ez-link-builder.addLinkTitle"), modalSubTitle: this.i18n("ez-link-builder.addLinkSubtitle"), okButtonLabel: this.i18n("ez-link-builder.submit"), cancelButtonLabel: this.i18n("app.cancel"), onEzModalAction: this.handleActionPopup.bind(this), okButtonStatus: this.getOkButtonStatus() }, h("div", { class: 'link-builder-container' }, h("ez-text-input", { id: 'link_url_input', label: this.i18n("ez-link-builder.urlInputLabel"), value: this.link, onEzChange: (e) => this.link = e.detail }), h("ez-text-input", { id: 'link_text_input', label: this.i18n("ez-link-builder.textInputLabel"), value: this.textToShow, onEzChange: (e) => this.textToShow = e.detail }), h("ez-check", { label: this.i18n("ez-link-builder.openInNewPage"), value: this.openInNewGuide, onEzChange: (e) => this.openInNewGuide = e.detail }))))));
   }
   static get is() { return "ez-link-builder"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/ez-rich-text/ez-rich-text.js

@@ -2,6 +2,7 @@ import { h, Host } from '@stencil/core';
 import { KeyboardManager, ObjectUtils } from '@sankhyalabs/core';
 import { RICH_TOOLBAR_COMMANDS, RICH_TOOLBAR_FORMAT_TAGS, } from './ez-rich-toolbar/RichToolbarHelper';
 import DOMPurify from 'dompurify';
+import initI18n from '../../utils/i18n';
 export class EzRichText {
   constructor() {
     this.historyStack = [];
@@ -66,13 +67,13 @@ export class EzRichText {
     this._keyboardManager
       .bind('ctrl + l', async () => {
       await this.handleFormatSelection(RICH_TOOLBAR_FORMAT_TAGS.LIST);
-    }, { description: 'Aplica estilo de lista ao texto selecionado.', element: this.element })
+    }, { description: this.i18n("ez-rich-text.listShortcut"), element: this.element })
       .bind('ctrl + k', async () => {
       await this.handleLink();
-    }, { description: 'Abre popup de link.', element: this.element })
+    }, { description: this.i18n("ez-rich-text.linkShortcut"), element: this.element })
       .bind('ctrl + o', async () => {
       await this.handleImage();
-    }, { description: 'Abre popup de imagem.', element: this.element });
+    }, { description: this.i18n("ez-rich-text.imageShortcut"), element: this.element });
   }
   bindTextFormat() {
     if (!this._keyboardManager || !this.showTextFormat)
@@ -80,26 +81,26 @@ export class EzRichText {
     this._keyboardManager
       .bind('ctrl + b', async () => {
       await this.handleFormatSelection(RICH_TOOLBAR_FORMAT_TAGS.BOLD);
-    }, { description: 'Aplica estilo negrito ao texto selecionado.', element: this.element })
+    }, { description: this.i18n("ez-rich-text.boldShortcut"), element: this.element })
       .bind('ctrl + i', async () => {
       await this.handleFormatSelection(RICH_TOOLBAR_FORMAT_TAGS.ITALIC);
-    }, { description: 'Aplica estilo itálico ao texto selecionado.', element: this.element })
+    }, { description: this.i18n("ez-rich-text.italicShortcut"), element: this.element })
       .bind('ctrl + u', async () => {
       await this.handleFormatSelection(RICH_TOOLBAR_FORMAT_TAGS.UNDERLINE);
-    }, { description: 'Aplica estilo underline ao texto selecionado.', element: this.element });
+    }, { description: this.i18n("ez-rich-text.underlineShortcut"), element: this.element });
   }
   initKeyboardManager() {
     this._keyboardManager = new KeyboardManager({ propagate: false, element: this.element });
     this._keyboardManager
       .bind('ctrl + Enter', async () => {
       await this.handleFormatSelection(RICH_TOOLBAR_FORMAT_TAGS.BREAK_LINE);
-    }, { description: 'Aplica quebra de linha.', element: this.element })
+    }, { description: this.i18n("ez-rich-text.breakLineShortcut"), element: this.element })
       .bind('ctrl + z', async () => {
       await this.handleUndo();
-    }, { description: 'Desfaz a ultima alteração de texto.', element: this.element })
+    }, { description: this.i18n("ez-rich-text.undoShortcut"), element: this.element })
       .bind('ctrl + x', async () => {
       await this.handleRedo();
-    }, { description: 'Refaz a ultima alteração de texto.', element: this.element });
+    }, { description: this.i18n("ez-rich-text.redoShortcut"), element: this.element });
     this.bindPreview();
     this.bindConfigs();
     this.bindTextFormat();
@@ -241,6 +242,9 @@ export class EzRichText {
     var _a;
     (_a = this._keyboardManager) === null || _a === void 0 ? void 0 : _a.unbindAllShortcutKeys();
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidLoad() {
     this.initKeyboardManager();
     this.addToHistory(this.value);

package/dist/collection/components/ez-rich-text/ez-rich-toolbar/RichToolbarHelper.js

@@ -14,18 +14,6 @@ export const RICH_TOOLBAR_FORMAT_TAGS = {
   LIST: '<ul><li>$selection</li></ul>',
   BREAK_LINE: '\n<br/>\n',
 };
-export const RICH_TOOLBAR_COMMAND_TITLE = {
-  PREVIEW: 'Ctrl + P',
-  EDIT: 'Ir para modo edição',
-  UNDO: 'Desfazer (Ctrl + Z)',
-  REDO: 'Refazer (Ctrl + X)',
-  LINK: 'Inserir link (Ctrl + K)',
-  IMAGE: 'Inserir imagem (Ctrl + O)',
-  LIST: 'Lista (Ctrl + L)',
-  UNDERLINE: 'Sublinhado (Ctrl + U)',
-  ITALIC: 'Itálico (Ctrl + I)',
-  BOLD: 'Negrito (Ctrl + B)',
-};
 export const RICH_TOOLBAR_COMMAND_ICON = {
   PREVIEW: 'Ctrl + P',
   UNDO: 'undo',

package/dist/collection/components/ez-rich-text/ez-rich-toolbar/ez-rich-toolbar-arrows/ez-rich-toolbar-arrows.js

@@ -1,8 +1,12 @@
 import { h, Host } from '@stencil/core';
-import { RICH_TOOLBAR_COMMAND_ICON, RICH_TOOLBAR_COMMAND_TITLE, RICH_TOOLBAR_COMMANDS } from '../RichToolbarHelper';
+import { RICH_TOOLBAR_COMMAND_ICON, RICH_TOOLBAR_COMMANDS } from '../RichToolbarHelper';
+import initI18n from '../../../../utils/i18n';
 export class EzRichToolbarArrows {
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   render() {
-    return (h(Host, null, h("ez-rich-toolbar-item", { icon: RICH_TOOLBAR_COMMAND_ICON.UNDO, command: RICH_TOOLBAR_COMMANDS.UNDO, title: RICH_TOOLBAR_COMMAND_TITLE.UNDO }), h("ez-rich-toolbar-item", { icon: RICH_TOOLBAR_COMMAND_ICON.REDO, command: RICH_TOOLBAR_COMMANDS.REDO, title: RICH_TOOLBAR_COMMAND_TITLE.REDO })));
+    return (h(Host, null, h("ez-rich-toolbar-item", { icon: RICH_TOOLBAR_COMMAND_ICON.UNDO, command: RICH_TOOLBAR_COMMANDS.UNDO, title: this.i18n("ez-rich-text.title.undo") }), h("ez-rich-toolbar-item", { icon: RICH_TOOLBAR_COMMAND_ICON.REDO, command: RICH_TOOLBAR_COMMANDS.REDO, title: this.i18n("ez-rich-text.title.redo") })));
   }
   static get is() { return "ez-rich-toolbar-arrows"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/ez-rich-text/ez-rich-toolbar/ez-rich-toolbar-configs/ez-rich-toolbar-configs.js

@@ -1,8 +1,12 @@
 import { h, Host } from '@stencil/core';
-import { RICH_TOOLBAR_COMMAND_ICON, RICH_TOOLBAR_COMMAND_TITLE, RICH_TOOLBAR_COMMANDS, RICH_TOOLBAR_FORMAT_TAGS, } from '../RichToolbarHelper';
+import { RICH_TOOLBAR_COMMAND_ICON, RICH_TOOLBAR_COMMANDS, RICH_TOOLBAR_FORMAT_TAGS, } from '../RichToolbarHelper';
+import initI18n from '../../../../utils/i18n';
 export class EzRichToolbarConfigs {
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   render() {
-    return (h(Host, null, h("ez-rich-toolbar-item", { icon: RICH_TOOLBAR_COMMAND_ICON.LIST, command: RICH_TOOLBAR_COMMANDS.FORMAT, value: RICH_TOOLBAR_FORMAT_TAGS.LIST, title: RICH_TOOLBAR_COMMAND_TITLE.LIST }), h("ez-rich-toolbar-item", { icon: RICH_TOOLBAR_COMMAND_ICON.IMAGE, command: RICH_TOOLBAR_COMMANDS.IMAGE, title: RICH_TOOLBAR_COMMAND_TITLE.IMAGE }), h("ez-rich-toolbar-item", { icon: RICH_TOOLBAR_COMMAND_ICON.LINK, command: RICH_TOOLBAR_COMMANDS.LINK, title: RICH_TOOLBAR_COMMAND_TITLE.LINK })));
+    return (h(Host, null, h("ez-rich-toolbar-item", { icon: RICH_TOOLBAR_COMMAND_ICON.LIST, command: RICH_TOOLBAR_COMMANDS.FORMAT, value: RICH_TOOLBAR_FORMAT_TAGS.LIST, title: this.i18n("ez-rich-text.title.list") }), h("ez-rich-toolbar-item", { icon: RICH_TOOLBAR_COMMAND_ICON.IMAGE, command: RICH_TOOLBAR_COMMANDS.IMAGE, title: this.i18n("ez-rich-text.title.image") }), h("ez-rich-toolbar-item", { icon: RICH_TOOLBAR_COMMAND_ICON.LINK, command: RICH_TOOLBAR_COMMANDS.LINK, title: this.i18n("ez-rich-text.title.link") })));
   }
   static get is() { return "ez-rich-toolbar-configs"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/ez-rich-text/ez-rich-toolbar/ez-rich-toolbar-letters/ez-rich-toolbar-letters.js

@@ -1,8 +1,12 @@
 import { h, Host } from '@stencil/core';
-import { RICH_TOOLBAR_COMMAND_ICON, RICH_TOOLBAR_COMMAND_TITLE, RICH_TOOLBAR_COMMANDS, RICH_TOOLBAR_FORMAT_TAGS, } from '../RichToolbarHelper';
+import { RICH_TOOLBAR_COMMAND_ICON, RICH_TOOLBAR_COMMANDS, RICH_TOOLBAR_FORMAT_TAGS, } from '../RichToolbarHelper';
+import initI18n from '../../../../utils/i18n';
 export class EzRichToolbarLetters {
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   render() {
-    return (h(Host, null, h("ez-rich-toolbar-item", { icon: RICH_TOOLBAR_COMMAND_ICON.BOLD, command: RICH_TOOLBAR_COMMANDS.FORMAT, value: RICH_TOOLBAR_FORMAT_TAGS.BOLD, title: RICH_TOOLBAR_COMMAND_TITLE.BOLD }), h("ez-rich-toolbar-item", { icon: RICH_TOOLBAR_COMMAND_ICON.ITALIC, command: RICH_TOOLBAR_COMMANDS.FORMAT, value: RICH_TOOLBAR_FORMAT_TAGS.ITALIC, title: RICH_TOOLBAR_COMMAND_TITLE.ITALIC }), h("ez-rich-toolbar-item", { icon: RICH_TOOLBAR_COMMAND_ICON.UNDERLINE, command: RICH_TOOLBAR_COMMANDS.FORMAT, value: RICH_TOOLBAR_FORMAT_TAGS.UNDERLINE, title: RICH_TOOLBAR_COMMAND_TITLE.UNDERLINE })));
+    return (h(Host, null, h("ez-rich-toolbar-item", { icon: RICH_TOOLBAR_COMMAND_ICON.BOLD, command: RICH_TOOLBAR_COMMANDS.FORMAT, value: RICH_TOOLBAR_FORMAT_TAGS.BOLD, title: this.i18n("ez-rich-text.title.bold") }), h("ez-rich-toolbar-item", { icon: RICH_TOOLBAR_COMMAND_ICON.ITALIC, command: RICH_TOOLBAR_COMMANDS.FORMAT, value: RICH_TOOLBAR_FORMAT_TAGS.ITALIC, title: this.i18n("ez-rich-text.title.italic") }), h("ez-rich-toolbar-item", { icon: RICH_TOOLBAR_COMMAND_ICON.UNDERLINE, command: RICH_TOOLBAR_COMMANDS.FORMAT, value: RICH_TOOLBAR_FORMAT_TAGS.UNDERLINE, title: this.i18n("ez-rich-text.title.underline") })));
   }
   static get is() { return "ez-rich-toolbar-letters"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/ez-rich-text/ez-rich-toolbar/ez-rich-toolbar.js

@@ -1,5 +1,6 @@
 import { h, Host } from '@stencil/core';
-import { RICH_TOOLBAR_COMMAND_TITLE, RICH_TOOLBAR_COMMANDS } from './RichToolbarHelper';
+import { RICH_TOOLBAR_COMMANDS } from './RichToolbarHelper';
+import initI18n from '../../../utils/i18n';
 export class EzRichToolbar {
   constructor() {
     this.showPreview = true;
@@ -8,6 +9,9 @@ export class EzRichToolbar {
     this.showTextFormat = true;
     this.showUndoRedo = true;
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   handleActionTriggered(event) {
     this.executeToolbarCommand.emit({ command: event.detail.command, value: event.detail.value });
   }
@@ -32,12 +36,12 @@ export class EzRichToolbar {
   renderPreview() {
     if (!this.showPreview)
       return;
-    return (h("div", { class: "taskbar-group" }, h("span", { id: 'rich-text-preview-btn', class: "preview-btn", title: this.getPreviewTitle(), onClick: this.handleClickPreview.bind(this) }, this.isPreviewMode ? 'Editar' : 'Pré-visualizar')));
+    return (h("div", { class: "taskbar-group" }, h("span", { id: 'rich-text-preview-btn', class: "preview-btn", title: this.getPreviewTitle(), onClick: this.handleClickPreview.bind(this) }, this.isPreviewMode ? this.i18n("ez-rich-text.edit") : this.i18n("ez-rich-text.preview"))));
   }
   getPreviewTitle() {
     return this.isPreviewMode
-      ? RICH_TOOLBAR_COMMAND_TITLE.EDIT
-      : RICH_TOOLBAR_COMMAND_TITLE.PREVIEW;
+      ? this.i18n("ez-rich-text.title.edit")
+      : this.i18n("ez-rich-text.title.preview");
   }
   render() {
     return (h(Host, null, h("div", { class: "taskbar" }, this.renderPreview(), this.renderArrows(), this.renderLetters(), this.renderConfigs())));

package/dist/collection/components/ez-rich-text/ez-simple-image-uploader/ez-simple-image-uploader.js

@@ -2,6 +2,7 @@ import { Fragment, h } from "@stencil/core";
 import { RICH_TOOLBAR_COMMANDS } from "../ez-rich-toolbar/RichToolbarHelper";
 import { formatBytes } from "./utils/formatBytes";
 import { fileToBase64 } from "./utils/fileToBase64";
+import initI18n from '../../../utils/i18n';
 export class EzSimpleImageUploader {
   constructor() {
     this.link = undefined;
@@ -22,6 +23,9 @@ export class EzSimpleImageUploader {
   async hide() {
     this._popupElement.opened = false;
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   async handleCancel() {
     this.removeSelectedFile();
     this.executeToolbarCommand.emit({ command: RICH_TOOLBAR_COMMANDS.FOCUS });
@@ -49,7 +53,7 @@ export class EzSimpleImageUploader {
       this.base64 = await fileToBase64(file);
     }
     else {
-      this.messageError = `A imagem deve ter menos de ${formatBytes(this.maxSize)}.`;
+      this.messageError = this.i18n("ez-simple-image-uploader.imageTooLarge", { maxSize: formatBytes(this.maxSize) });
     }
   }
   getFileList(event) {
@@ -94,7 +98,7 @@ export class EzSimpleImageUploader {
   }
   async handleCreateImgTag() {
     var _a;
-    const tag = `<img src="${(_a = this.base64) !== null && _a !== void 0 ? _a : this.link}" alt="Image" />`;
+    const tag = `<img src="${(_a = this.base64) !== null && _a !== void 0 ? _a : this.link}" alt="${this.i18n("ez-simple-image-uploader.imageAlt")}" />`;
     this.executeToolbarCommand.emit({ command: RICH_TOOLBAR_COMMANDS.FORMAT, value: tag });
     this.removeSelectedFile();
     await this.hide();
@@ -104,13 +108,13 @@ export class EzSimpleImageUploader {
     return (!this.base64 && !((_a = this.link) === null || _a === void 0 ? void 0 : _a.trim())) ? 'DISABLED' : 'ENABLED';
   }
   render() {
-    return (h("ez-popup", { ref: ref => this._popupElement = ref, heightMode: "auto", size: "small", useHeader: false, onEzClosePopup: () => this.handleCancel() }, h("div", null, h("ez-modal-container", { modalTitle: "Upload de imagens", modalSubTitle: "Envie seus arquivos preenchendo apenas 1 campo por vez.", okButtonLabel: "Enviar", cancelButtonLabel: "Cancelar", onEzModalAction: this.handleActionPopup.bind(this), okButtonStatus: this.getOkButtonStatus() }, h("div", { class: "image-uploader-container" }, h("ez-tooltip", { message: "O arquivo selecionado abaixo ser\u00E1 priorizado!", active: !!this.selectedFile }, h("ez-text-input", { label: "Insira a URL da imagem", value: this.link, onEzChange: (e) => this.link = e.detail, enabled: !this.selectedFile })), h("span", null, "OU"), h("section", { class: "drop-zone-section" }, h("div", { ref: (ref) => this._dropZone = ref, class: "drop-zone", onDrop: (ev) => this.handleFileChange(ev), onDragOver: (ev) => this.handleDragOver(ev), onDragEnter: (ev) => this.handleDragEnter(ev), onDragLeave: (ev) => this.handleDragLeave(ev) }, h("div", { class: {
+    return (h("ez-popup", { ref: ref => this._popupElement = ref, heightMode: "auto", size: "small", useHeader: false, onEzClosePopup: () => this.handleCancel() }, h("div", null, h("ez-modal-container", { modalTitle: this.i18n("ez-simple-image-uploader.uploadTitle"), modalSubTitle: this.i18n("ez-simple-image-uploader.uploadSubtitle"), okButtonLabel: this.i18n("ez-simple-image-uploader.submit"), cancelButtonLabel: this.i18n("app.cancel"), onEzModalAction: this.handleActionPopup.bind(this), okButtonStatus: this.getOkButtonStatus() }, h("div", { class: "image-uploader-container" }, h("ez-tooltip", { message: this.i18n("ez-simple-image-uploader.tooltipMessage"), active: !!this.selectedFile }, h("ez-text-input", { label: this.i18n("ez-simple-image-uploader.urlInputLabel"), value: this.link, onEzChange: (e) => this.link = e.detail, enabled: !this.selectedFile })), h("span", null, this.i18n("ez-simple-image-uploader.orText")), h("section", { class: "drop-zone-section" }, h("div", { ref: (ref) => this._dropZone = ref, class: "drop-zone", onDrop: (ev) => this.handleFileChange(ev), onDragOver: (ev) => this.handleDragOver(ev), onDragEnter: (ev) => this.handleDragEnter(ev), onDragLeave: (ev) => this.handleDragLeave(ev) }, h("div", { class: {
         "drop-zone-container": true,
         "clickable": !this.selectedFile,
       }, onClick: () => this.triggerFileSelect() }, !!this.selectedFile ?
-      h(Fragment, null, h("span", { class: "ez-text ez-text--primary ez-text--medium" }, this.selectedFile.name, " (", formatBytes(this.selectedFile.size), ")"), h("button", { class: "button-close", onClick: (event) => this.removeSelectedFile(event), title: "Remover arquivo" }, h("ez-icon", { iconName: "close" })))
+      h(Fragment, null, h("span", { class: "ez-text ez-text--primary ez-text--medium" }, this.selectedFile.name, " (", formatBytes(this.selectedFile.size), ")"), h("button", { class: "button-close", onClick: (event) => this.removeSelectedFile(event), title: this.i18n("ez-simple-image-uploader.removeFile") }, h("ez-icon", { iconName: "close" })))
       :
-        h(Fragment, null, h("ez-icon", { iconName: "anexo" }), h("span", { class: "ez-text ez-text--primary ez-text--medium" }, "Arraste e solte ou clique para adicionar arquivos"))), h("input", { ref: (el) => this._fileInput = el, type: "file", accept: "image/*", style: { display: "none" }, onChange: (ev) => this.handleFileChange(ev) })), !!this.messageError && h("span", { class: "text-error" }, this.messageError)))))));
+        h(Fragment, null, h("ez-icon", { iconName: "anexo" }), h("span", { class: "ez-text ez-text--primary ez-text--medium" }, this.i18n("ez-simple-image-uploader.dragDropText")))), h("input", { ref: (el) => this._fileInput = el, type: "file", accept: "image/*", style: { display: "none" }, onChange: (ev) => this.handleFileChange(ev) })), !!this.messageError && h("span", { class: "text-error" }, this.messageError)))))));
   }
   static get is() { return "ez-simple-image-uploader"; }
   static get encapsulation() { return "scoped"; }

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

@@ -2,8 +2,8 @@ import { h, Host } from "@stencil/core";
 import CSSVarsUtils from "../../utils/CSSVarsUtils";
 import { ElementIDUtils, ObjectUtils, StringUtils } from "@sankhyalabs/core";
 import { ApplicationUtils } from "../../utils";
-import { REQUIRED_INFO } from "../../utils/constants";
 import { replaceHighlight, replaceQuotes } from "./utils/searchFormatters";
+import initI18n from '../../utils/i18n';
 export class EzSearch {
   constructor() {
     this._changeDeboucingTimeout = null;
@@ -11,8 +11,6 @@ export class EzSearch {
     this._deboucingTime = 300;
     this._maxWidthValue = 0;
     this._tabPressed = false;
-    this._textEmptyList = "Nenhum resultado encontrado";
-    this._textEmptySearch = "Nenhum resultado de {0} encontrado";
     this._startHighlightTag = "<span class='card-item__highlight'>";
     this._endHighlightTag = "</span>";
     this._preSelection = undefined;
@@ -338,7 +336,7 @@ export class EzSearch {
     var _a;
     if (!((_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.length)) {
       this.clearSearch();
-      ApplicationUtils.info(this._textEmptyList);
+      ApplicationUtils.info(this.i18n("ez-search.emptyList"));
     }
     else {
       this.controlListWithOnlyOne(focusOnInput);
@@ -400,11 +398,11 @@ export class EzSearch {
   }
   async showNoResultMessage() {
     this.clearSearch();
-    ApplicationUtils.info(this._textEmptySearch.replace("{0}", this.getFieldLabel()));
+    ApplicationUtils.info(this.i18n("ez-search.emptySearch", { field: this.getFieldLabel() }));
   }
   getFieldLabel() {
     var _a;
-    return (_a = this.label) === null || _a === void 0 ? void 0 : _a.replace(REQUIRED_INFO, "").toUpperCase();
+    return (_a = this.label) === null || _a === void 0 ? void 0 : _a.replace(this.i18n("app.requiredInfo"), "").toUpperCase();
   }
   resetOptions() {
     this.hideOptions();
@@ -428,7 +426,8 @@ export class EzSearch {
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
-  componentWillLoad() {
+  async componentWillLoad() {
+    this.i18n = await initI18n();
     if (this.options === undefined) {
       this.options = [];
       const optionsTags = this.el.querySelectorAll("option");
@@ -610,7 +609,7 @@ export class EzSearch {
     ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
     return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode, alternativePlaceholder: this.alternativePlaceholder }, h("button", { class: "btn", slot: "leftIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, this.canShowLoadSpinDescription() ? h("div", { class: "message__loading" }) : h("ez-icon", { iconName: "search" })), (((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value) || this.ensureClearButtonVisible)
       ? h("button", { class: "btn btn__close", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() }, h("ez-icon", { iconName: "close" }))
-      : undefined), h("ez-popover-plus", { ref: elem => this._ezPopOverPlusElement = elem, autoClose: false, overlayType: "none", useAnchorSize: true, anchorElement: [this._textInput, this.el] }, h("search-list", { ref: (ref) => this._searchList = ref, showLoading: this._showLoading, visibleOptions: this._visibleOptions, textEmptyList: this._textEmptyList, canShowListOptions: this.canShowListOptions(), value: this.value, showOptionValue: this.showOptionValue, preSelection: this._preSelection, onChangeValue: ({ detail }) => this.selectOption(detail), onChangePreSelection: ({ detail }) => this.onChangePreSelection(detail) }))));
+      : undefined), h("ez-popover-plus", { ref: elem => this._ezPopOverPlusElement = elem, autoClose: false, overlayType: "none", useAnchorSize: true, anchorElement: [this._textInput, this.el] }, h("search-list", { ref: (ref) => this._searchList = ref, showLoading: this._showLoading, visibleOptions: this._visibleOptions, textEmptyList: this.i18n("ez-search.emptyList"), canShowListOptions: this.canShowListOptions(), value: this.value, showOptionValue: this.showOptionValue, preSelection: this._preSelection, onChangeValue: ({ detail }) => this.selectOption(detail), onChangePreSelection: ({ detail }) => this.onChangePreSelection(detail) }))));
   }
   static get is() { return "ez-search"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/ez-search-plus/ez-search-plus.js

@@ -1,6 +1,7 @@
 import { h, Host, } from "@stencil/core";
 import { ElementIDUtils, KeyboardManager, StringUtils, } from "@sankhyalabs/core";
 import { CSSVarsUtils, SearchMode } from "../../utils";
+import initI18n from '../../utils/i18n';
 export class EzSearchPlus {
   constructor() {
     this.SEARCH_DESCRIPTION_TIMEOUT = 300;
@@ -120,9 +121,10 @@ export class EzSearchPlus {
   async isInvalid() {
     return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
   }
-  componentWillLoad() {
+  async componentWillLoad() {
+    this.i18n = await initI18n();
     if (this.value && StringUtils.isEmpty(this.codeValue)) {
-      this.observeValue(this.value, undefined);
+      await this.observeValue(this.value, undefined);
     }
   }
   componentDidLoad() {
@@ -146,7 +148,7 @@ export class EzSearchPlus {
     if (this.hideDescriptionInput) {
       return this.label;
     }
-    return (_a = this.codLabel) !== null && _a !== void 0 ? _a : "Cód.";
+    return (_a = this.codLabel) !== null && _a !== void 0 ? _a : this.i18n("ez-search-plus.defaultCodeLabel");
   }
   async normalizeCodeToDescriptionValue(valueToNormalize) {
     if (!valueToNormalize) {
@@ -188,7 +190,7 @@ export class EzSearchPlus {
   }
   async loadDescriptionValueByCode(codeValue) {
     if (!this.optionLoader) {
-      console.warn("optionLoader não definido");
+      console.warn(this.i18n("ez-search-plus.optionLoaderNotDefined"));
       return "";
     }
     try {
@@ -218,7 +220,7 @@ export class EzSearchPlus {
   }
   async loadAdvancedSearch() {
     if (!this.optionLoader) {
-      console.warn("optionLoader não definido");
+      console.warn(this.i18n("ez-search-plus.optionLoaderNotDefined"));
       return;
     }
     const searchArgument = { mode: SearchMode.ADVANCED, argument: "" };

package/dist/collection/components/ez-search-plus/subcomponent/ez-search-result-list/ez-search-result-list.js

@@ -1,8 +1,8 @@
 import { Host, h } from '@stencil/core';
 import { StringUtils } from '@sankhyalabs/core';
+import initI18n from '../../../../utils/i18n';
 export class EzSearchResultList {
   constructor() {
-    this._textEmptyList = "Nenhum resultado encontrado";
     this._startHighlightTag = "<span class='card-item__highlight'>";
     this._endHighlightTag = "</span>";
     this.showLoading = undefined;
@@ -88,10 +88,13 @@ export class EzSearchResultList {
   canShowListOptions() {
     return !this.showLoading && this.visibleOptions.length > 0;
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   render() {
     return (h(Host, null, h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this.showLoading
       && this.visibleOptions.length === 0
-      && h("div", { class: "message" }, h("span", { class: "message__no-result" }, this._textEmptyList)), this.showLoading && (h("div", { class: "loading__container" }, h("ez-skeleton", { count: 4, height: '20px' }))), this.canShowListOptions() && this.visibleOptions.map((opt, index) => this.buildItem(opt, index)))));
+      && h("div", { class: "message" }, h("span", { class: "message__no-result" }, this.i18n("ez-search-plus.emptyList"))), this.showLoading && (h("div", { class: "loading__container" }, h("ez-skeleton", { count: 4, height: '20px' }))), this.canShowListOptions() && this.visibleOptions.map((opt, index) => this.buildItem(opt, index)))));
   }
   static get is() { return "ez-search-result-list"; }
   static get encapsulation() { return "shadow"; }

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

@@ -2,7 +2,7 @@ import { h, Host } from "@stencil/core";
 import { ElementIDUtils } from "@sankhyalabs/core";
 import { EzScrollDirection } from "../ez-scroller/EzScrollDirection";
 import { ModeMenuEnum, SizeMenuEnum, TypeMenuEnum } from "./interfaces";
-import { MESSAGES } from './messages/constants';
+import initI18n from '../../utils/i18n';
 export class EzSidebarNavigator {
   constructor() {
     this.handleToggleSidebar = () => {
@@ -41,6 +41,9 @@ export class EzSidebarNavigator {
   async openSidebar() {
     this.open = true;
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidLoad() {
     if (this.type === TypeMenuEnum.FIXED) {
       this.mode = ModeMenuEnum.FIXED;
@@ -49,7 +52,7 @@ export class EzSidebarNavigator {
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._element);
-    return (h(Host, null, h("ez-sidebar-button", { class: this.open ? "hidden" : "", onEzClick: this.mode === ModeMenuEnum.FIXED ? this.handleToggleSidebar : undefined, onMouseEnter: this.mode === ModeMenuEnum.FLOAT ? this.handleToggleSidebar : undefined, "aria-controls": "navigator", "aria-expanded": this.open, "data-element-id": ElementIDUtils.getInternalIDInfo("openButton") }), this.open ? (h("aside", { tabIndex: -1, id: "navigator", class: `ez-col ez-col--sd-12 ez-col--tb-3 ez-sidebar-navigator ${this.mode === ModeMenuEnum.FLOAT ? 'dynamic' : 'fixed'} ${this.isResponsive ? 'responsive' : this.size} ${!this.open ? "hidden" : "show"}`, "data-element-id": ElementIDUtils.getInternalIDInfo("sidebar"), onMouseLeave: this.type !== TypeMenuEnum.FIXED && this.mode === ModeMenuEnum.FLOAT ? this.handleToggleSidebar : undefined }, h("header", { class: "ez-sidebar-navigator__header" }, h("slot", { name: "start" }), this.titleMenu !== '' && (h("div", { class: "ez-sidebar-navigator__title", title: this.titleMenu }, this.titleMenu)), !this.titleMenu && (h("slot", { name: "content" })), h("div", { class: "ez-sidebar-navigator__end" }, h("slot", { name: "end" }), (this.type === TypeMenuEnum.DYNAMIC && this.showFixedButton) && (h("ez-button", { onClick: this.handleToggleMode, mode: "icon", size: "small", iconName: this.mode === ModeMenuEnum.FIXED ? "un-pin" : "push-pin", title: this.mode === ModeMenuEnum.FIXED ? MESSAGES.UN_PIN_MENU : MESSAGES.PUSH_PIN_MENU, "aria-label": this.mode === ModeMenuEnum.FIXED ? MESSAGES.UN_PIN_MENU : MESSAGES.PUSH_PIN_MENU, "aria-controls": "navigator", "data-element-id": ElementIDUtils.getInternalIDInfo("pinButton") })), (this.mode === ModeMenuEnum.FIXED && this.showCollapseMenu) && (h("ez-button", { onClick: this.handleToggleSidebar, class: "inverted", mode: "icon", size: "small", iconName: "show_menu", title: MESSAGES.HIDE_MENU, "aria-label": MESSAGES.HIDE_MENU, "aria-controls": "navigator", "data-element-id": ElementIDUtils.getInternalIDInfo("closeButton") })))), this.titleMenu && (h("slot", { name: "content" })), h("ez-scroller", { class: "ez-sidebar-navigator__content", direction: EzScrollDirection.VERTICAL, activeShadow: true }, h("slot", null)), h("footer", { class: "ez-sidebar-navigator__footer" }, h("slot", { name: "footer" }))))
+    return (h(Host, null, h("ez-sidebar-button", { class: this.open ? "hidden" : "", onEzClick: this.mode === ModeMenuEnum.FIXED ? this.handleToggleSidebar : undefined, onMouseEnter: this.mode === ModeMenuEnum.FLOAT ? this.handleToggleSidebar : undefined, "aria-controls": "navigator", "aria-expanded": this.open, "data-element-id": ElementIDUtils.getInternalIDInfo("openButton") }), this.open ? (h("aside", { tabIndex: -1, id: "navigator", class: `ez-col ez-col--sd-12 ez-col--tb-3 ez-sidebar-navigator ${this.mode === ModeMenuEnum.FLOAT ? 'dynamic' : 'fixed'} ${this.isResponsive ? 'responsive' : this.size} ${!this.open ? "hidden" : "show"}`, "data-element-id": ElementIDUtils.getInternalIDInfo("sidebar"), onMouseLeave: this.type !== TypeMenuEnum.FIXED && this.mode === ModeMenuEnum.FLOAT ? this.handleToggleSidebar : undefined }, h("header", { class: "ez-sidebar-navigator__header" }, h("slot", { name: "start" }), this.titleMenu !== '' && (h("div", { class: "ez-sidebar-navigator__title", title: this.titleMenu }, this.titleMenu)), !this.titleMenu && (h("slot", { name: "content" })), h("div", { class: "ez-sidebar-navigator__end" }, h("slot", { name: "end" }), (this.type === TypeMenuEnum.DYNAMIC && this.showFixedButton) && (h("ez-button", { onClick: this.handleToggleMode, mode: "icon", size: "small", iconName: this.mode === ModeMenuEnum.FIXED ? "un-pin" : "push-pin", title: this.mode === ModeMenuEnum.FIXED ? this.i18n("ez-sidebar.unPinMenu") : this.i18n("ez-sidebar.pushPinMenu"), "aria-label": this.mode === ModeMenuEnum.FIXED ? this.i18n("ez-sidebar.unPinMenu") : this.i18n("ez-sidebar.pushPinMenu"), "aria-controls": "navigator", "data-element-id": ElementIDUtils.getInternalIDInfo("pinButton") })), (this.mode === ModeMenuEnum.FIXED && this.showCollapseMenu) && (h("ez-button", { onClick: this.handleToggleSidebar, class: "inverted", mode: "icon", size: "small", iconName: "show_menu", title: this.i18n("ez-sidebar.hideMenu"), "aria-label": this.i18n("ez-sidebar.hideMenu"), "aria-controls": "navigator", "data-element-id": ElementIDUtils.getInternalIDInfo("closeButton") })))), this.titleMenu && (h("slot", { name: "content" })), h("ez-scroller", { class: "ez-sidebar-navigator__content", direction: EzScrollDirection.VERTICAL, activeShadow: true }, h("slot", null)), h("footer", { class: "ez-sidebar-navigator__footer" }, h("slot", { name: "footer" }))))
       : undefined));
   }
   static get is() { return "ez-sidebar-navigator"; }

package/dist/collection/components/ez-skeleton/ez-skeleton.constants.js

@@ -9,7 +9,6 @@ export const SKELETON_ARIA = {
   DATA_BUSY: 'true',
   DATA_VALUEMIN: '0',
   DATA_VALUEMAX: '100',
-  DATA_VALUETEXT: 'Loading...',
   ROLE: 'progressbar',
   TABINDEX: '0'
 };

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

@@ -1,5 +1,6 @@
 import { h } from '@stencil/core';
 import { ALLOWED_ANIMATIONS, ALLOWED_VARIANTS, DEFAULT_VALUES, SKELETON_ARIA, VARIANT_TYPES, ANIMATION_TYPES, } from './ez-skeleton.constants';
+import initI18n from '../../utils/i18n';
 export class EzSkeleton {
   constructor() {
     this.items = [];
@@ -14,7 +15,8 @@ export class EzSkeleton {
     this.marginLeft = null;
     this.animation = DEFAULT_VALUES.ANIMATION;
   }
-  componentWillLoad() {
+  async componentWillLoad() {
+    this.i18n = await initI18n();
     this.initializeItems();
   }
   componentWillUpdate() {
@@ -105,7 +107,7 @@ export class EzSkeleton {
     return this.renderSkeletonSpan(index, config);
   }
   renderSkeletonSpan(index, config) {
-    return (h("span", { key: index, class: config === null || config === void 0 ? void 0 : config.skeletonClasses, style: config === null || config === void 0 ? void 0 : config.styles, "data-busy": SKELETON_ARIA.DATA_BUSY, "data-valuemin": SKELETON_ARIA.DATA_VALUEMIN, "data-valuemax": SKELETON_ARIA.DATA_VALUEMAX, "data-valuetext": SKELETON_ARIA.DATA_VALUETEXT, role: SKELETON_ARIA.ROLE, tabindex: SKELETON_ARIA.TABINDEX }));
+    return (h("span", { key: index, class: config === null || config === void 0 ? void 0 : config.skeletonClasses, style: config === null || config === void 0 ? void 0 : config.styles, "data-busy": SKELETON_ARIA.DATA_BUSY, "data-valuemin": SKELETON_ARIA.DATA_VALUEMIN, "data-valuemax": SKELETON_ARIA.DATA_VALUEMAX, "data-valuetext": this.i18n("app.loading"), role: SKELETON_ARIA.ROLE, tabindex: SKELETON_ARIA.TABINDEX }));
   }
   render() {
     return !this.template ? this.items.map((_, index) => this.renderSkeletonItem(index)) : this.renderSkeletonTemplate(this.template);