@sankhyalabs/ezui 6.5.1 → 6.6.0-dev.2

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

@@ -0,0 +1,14 @@
+export function fileToBase64(file) {
+  return new Promise((resolve, reject) => {
+    try {
+      const reader = new FileReader();
+      reader.onload = () => {
+        resolve(reader.result);
+      };
+      reader.readAsDataURL(file);
+    }
+    catch (error) {
+      reject(error);
+    }
+  });
+}

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

@@ -0,0 +1,10 @@
+export function formatBytes(bytes, decimals = 1) {
+  if (bytes === 0) {
+    return "0 Bytes";
+  }
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "Kilobytes", "Megabytes", "Gigabytes", "Terabytes", "Petabytes", "Exabytes", "Zettabytes", "Yottabytes"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+}

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], "data-element-id": this.el.getAttribute("data-element-id") }, 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], "data-element-id": this.el.getAttribute("data-element-id") }, 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) {
@@ -190,7 +192,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 {
@@ -220,7 +222,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: "" };
@@ -381,7 +383,7 @@ export class EzSearchPlus {
         "ez-search-plus__code-input": !this.hideDescriptionInput,
         "ez-search-plus__code-input-no-border": !this.hideDescriptionInput,
         "ez-search-plus__code-input-full": this.hideDescriptionInput
-      }, "data-element-id": ElementIDUtils.getInternalIDInfo("codeInput"), "data-slave-mode": "true", enabled: !this.disableCodeInput && this.enabled, mode: this.mode, label: this.getCodLabel(), canShowError: this.canShowError, hasInvalid: !StringUtils.isEmpty(this.errorMessage), errorMessage: this.hideDescriptionInput ? this.errorMessage : "", value: this.codeValue, onFocusout: () => this.handleCodeInputFocusOut(), onFocus: () => this.handleCodeInputFocus() }, this.getLeftIconElement()), !this.hideDescriptionInput && (h("div", { class: "description-input-container" }, h("ez-text-input", { ref: elem => this._textInputDescriptionValue = elem, tabIndex: -1, class: "ez-search-plus__text-input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), "data-slave-mode": "true", enabled: !this.disableDescriptionInput && this.enabled, label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode, value: this.descriptionValue, onInput: event => this.handleTextInputChangeHandler(event), onFocus: () => this.handleDescriptionInputFocus() }, this.getRightIconElement()), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this.el, autoClose: true, boxWidth: 'fit-content', overlayType: 'none', useAnchorSize: true, onEzVisibilityChange: (event) => this.handleOnEzVisibilityChange(event) }, h("ez-search-result-list", { ref: (ref) => this._searchList = ref, showLoading: this.showLoading, visibleOptions: this.visibleOptions, value: this.value, showOptionValue: this.showOptionValue, onChangeValue: (evt) => this.handleSelectItem(evt) })))))));
+      }, "data-element-id": ElementIDUtils.getInternalIDInfo("codeInput"), "data-slave-mode": "true", enabled: !this.disableCodeInput && this.enabled, mode: this.mode, label: this.getCodLabel(), canShowError: this.canShowError, hasInvalid: !StringUtils.isEmpty(this.errorMessage), errorMessage: this.hideDescriptionInput ? this.errorMessage : "", value: this.codeValue, onFocusout: () => this.handleCodeInputFocusOut(), onFocus: () => this.handleCodeInputFocus() }, this.getLeftIconElement()), !this.hideDescriptionInput && (h("div", { class: "description-input-container" }, h("ez-text-input", { ref: elem => this._textInputDescriptionValue = elem, tabIndex: -1, class: "ez-search-plus__text-input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), "data-slave-mode": "true", enabled: !this.disableDescriptionInput && this.enabled, label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode, value: this.descriptionValue, onInput: event => this.handleTextInputChangeHandler(event), onFocus: () => this.handleDescriptionInputFocus() }, this.getRightIconElement()), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this.el, autoClose: true, boxWidth: 'fit-content', overlayType: 'none', useAnchorSize: true, onEzVisibilityChange: (event) => this.handleOnEzVisibilityChange(event), "data-element-id": this.el.getAttribute("data-element-id") }, h("ez-search-result-list", { ref: (ref) => this._searchList = ref, showLoading: this.showLoading, visibleOptions: this.visibleOptions, value: this.value, showOptionValue: this.showOptionValue, onChangeValue: (evt) => this.handleSelectItem(evt) })))))));
   }
   static get is() { return "ez-search-plus"; }
   static get encapsulation() { return "shadow"; }

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

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

@@ -1,6 +1,7 @@
 import { h } from '@stencil/core';
 import Sortable, { MultiDrag } from 'sortablejs';
 import { ArrayUtils } from '@sankhyalabs/core';
+import initI18n from '../../utils/i18n';
 Sortable.mount(new MultiDrag());
 export class EzSortableList {
   constructor() {
@@ -11,9 +12,9 @@ export class EzSortableList {
     this.group = 'default';
     this.dataSource = [];
     this.idSortableList = 'DEFAULT_LIST';
-    this.entityLabel = 'item';
-    this.entityLabelPlural = 'itens';
-    this.emptyMessage = 'Nenhum item na lista';
+    this.entityLabel = undefined;
+    this.entityLabelPlural = undefined;
+    this.emptyMessage = undefined;
     this.hoverFeedback = true;
     this.enableMultipleSelection = false;
     this.removeItensMoved = false;
@@ -34,6 +35,12 @@ export class EzSortableList {
     });
     this.ezSelectItens.emit([]);
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+    this.emptyMessage = this.i18n("ez-sortable-list.emptyMessage");
+    this.entityLabel = this.i18n("ez-sortable-list.entityLabel");
+    this.entityLabelPlural = this.i18n("ez-sortable-list.entityLabelPlural");
+  }
   componentDidLoad() {
     this.initSortable();
   }
@@ -174,7 +181,7 @@ export class EzSortableList {
     }
   }
   buildTotalizer() {
-    return `Total de ${this.dataSource.length} ${this.dataSource.length === 1 ? this.entityLabel : this.entityLabelPlural}`;
+    return `${this.i18n("ez-sortable-list.total")} ${this.dataSource.length} ${this.dataSource.length === 1 ? this.entityLabel : this.entityLabelPlural}`;
   }
   renderItems() {
     const itemsToRender = ArrayUtils.applyStringFilter(this.filterTerm, this.dataSource);
@@ -196,7 +203,7 @@ export class EzSortableList {
   renderHeader() {
     if (this.hideHeader)
       return;
-    return (h("div", { class: 'sortable-header' }, h("span", { class: 'sortable-label' }, this.title), h("ez-filter-input", { label: `Buscar ${this.entityLabel}`, mode: "slim", onEzChange: evt => this.handleFilterChanged(evt) })));
+    return (h("div", { class: 'sortable-header' }, h("span", { class: 'sortable-label' }, this.title), h("ez-filter-input", { label: `${this.i18n("ez-sortable-list.search")} ${this.entityLabel}`, mode: "slim", onEzChange: evt => this.handleFilterChanged(evt) })));
   }
   render() {
     return (h("div", { class: 'sortable-content' }, this.renderHeader(), h("div", { class: `sortable-list ${this.dataSource.length < 1 ? 'empty-content' : ''} list-scroller--fix`, "data-content": this.emptyMessage, style: { '--empty-content': `"${this.emptyMessage}"` }, id: this.idSortableList, key: this.idSortableList }, this.renderItems()), this.renderTotalizer()));
@@ -342,8 +349,7 @@ export class EzSortableList {
           "text": "Nome da entidade listada.\nExemplo: \"Campo\", \"Item\", \"Empresa\"."
         },
         "attribute": "entity-label",
-        "reflect": false,
-        "defaultValue": "'item'"
+        "reflect": false
       },
       "entityLabelPlural": {
         "type": "string",
@@ -360,8 +366,7 @@ export class EzSortableList {
           "text": "Varia\u00E7\u00E3o plural do nome da entidade listada.\nExemplo: \"Campos\", \"Itens\", \"Empresas\"."
         },
         "attribute": "entity-label-plural",
-        "reflect": false,
-        "defaultValue": "'itens'"
+        "reflect": false
       },
       "emptyMessage": {
         "type": "string",
@@ -378,8 +383,7 @@ export class EzSortableList {
           "text": "Mensagem exibida quando a lista est\u00E1 vazia"
         },
         "attribute": "empty-message",
-        "reflect": false,
-        "defaultValue": "'Nenhum item na lista'"
+        "reflect": false
       },
       "hoverFeedback": {
         "type": "boolean",

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

@@ -0,0 +1,76 @@
+:host {
+  /*@doc Define a cor do spinner.*/
+  --ez-spinner--color: var(--color--ocean-green-600, #008561);
+
+  /*@doc Define o tamanho padrão do spinner.*/
+  --ez-spinner--size-default: 24px;
+
+  /*@doc Define o tamanho médio do spinner.*/
+  --ez-spinner--size-medium: 32px;
+
+  /*@doc Define o tamanho grande do spinner.*/
+  --ez-spinner--size-large: 42px;
+
+  /*@doc Define a duração da animação do spinner.*/
+  --ez-spinner--animation-duration: 1.4s;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.spinner__container {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.spinner__svg {
+  color: var(--ez-spinner--color);
+  width: var(--ez-spinner--size-default);
+  height: var(--ez-spinner--size-default);
+}
+
+.spinner__container[data-size="medium"] .spinner__svg {
+  width: var(--ez-spinner--size-medium);
+  height: var(--ez-spinner--size-medium);
+}
+
+.spinner__container[data-size="large"] .spinner__svg {
+  width: var(--ez-spinner--size-large);
+  height: var(--ez-spinner--size-large);
+}
+
+.spinner__path {
+  animation: spinner-dash var(--ez-spinner--animation-duration) ease-in-out infinite,
+    spinner-rotate var(--ez-spinner--animation-duration) linear infinite;
+  transform-origin: center;
+  will-change: stroke-dasharray, stroke-dashoffset;
+}
+
+@keyframes spinner-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spinner-dash {
+  0% {
+    stroke-dasharray: 1, 63;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 32, 63;
+    stroke-dashoffset: -16;
+  }
+
+  100% {
+    stroke-dasharray: 1, 63;
+    stroke-dashoffset: -63;
+  }
+}

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

@@ -0,0 +1,57 @@
+import { Host, h } from '@stencil/core';
+import { ElementIDUtils } from '@sankhyalabs/core';
+import { getI18n } from '../../utils/i18n';
+export class EzSpinner {
+  constructor() {
+    this.size = 'small';
+  }
+  addInfoId() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+  }
+  async componentWillLoad() {
+    this.i18n = getI18n();
+  }
+  componentDidLoad() {
+    this.addInfoId();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "spinner__container", "data-size": this.size, role: "status", "aria-label": this.i18n ? this.i18n('spinner.loading') : 'Carregando...' }, h("svg", { viewBox: "0 0 24 24", class: "spinner__svg" }, h("circle", { cx: "12", cy: "12", r: "10", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", class: "spinner__path" })))));
+  }
+  static get is() { return "ez-spinner"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-spinner.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-spinner.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'small' | 'medium' | 'large'",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho do spinner"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'small'"
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+}