@sankhyalabs/ezui 6.5.0 → 6.6.0-dev.1

package/dist/esm/ez-search-plus.entry.js

@@ -1,9 +1,10 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5a720e56.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
 import { StringUtils, KeyboardManager, ElementIDUtils } from '@sankhyalabs/core';
-import './ApplicationUtils-eaf91331.js';
+import './ApplicationUtils-1569f757.js';
 import { C as CSSVarsUtils } from './CSSVarsUtils-acba92d7.js';
 import './DialogType-54a62731.js';
 import './CheckMode-bdb2ec19.js';
+import { i as initI18n } from './index-41363fa6.js';
 import { S as SearchMode } from './FormLayout-071d324c.js';
 
 const ezSearchPlusCss = ":host{--ez-search--height:42px;--ez-search--width:100%;--ez-search__icon--width:48px;--ez-search--border-radius:var(--border--radius-medium, 12px);--ez-search--border-radius-small:var(--border--radius-small, 6px);--ez-search--font-size:var(--text--medium, 14px);--ez-search--font-family:var(--font-pattern, Arial);--ez-search--font-weight--large:var(--text-weight--large, 500);--ez-search--font-weight--medium:var(--text-weight--medium, 400);--ez-search--background-color--xlight:var(--background--xlight, #fff);--ez-search--background-medium:var(--background--medium, #f0f3f7);--ez-search--line-height:calc(var(--text--medium, 14px) + 4px);--ez-search__input--background-color:var(--background--medium, #e0e0e0);--ez-search__input--border:var(--border--medium, 2px solid);--ez-search__input--border-color:var(--ez-search__input--background-color);--ez-search__input--focus--border-color:var(--color--primary, #008561);--ez-search__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-search__input--disabled--color:var(--text--disable, #AFB6C0);--ez-search__input--error--border-color:#CC2936;--ez-search__btn--color:var(--title--primary, #2B3A54);--ez-search__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-search__btn-hover--color:var(--color--primary, #4e4e4e);--ez-search__label--color:var(--title--primary, #2B3A54);--ez-search__list-title--primary:var(--title--primary, #2B3A54);--ez-search__list-text--primary:var(--text--primary, #626e82);--ez-search__list-height:calc(var(--ez-search--font-size) + var(--ez-search--space--medium) + 4px);--ez-search__list-min-width:64px;--ez-search--space--medium:var(--space--medium, 12px);--ez-search--space--small:var(--space--small, 6px);--ez-search__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-search__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-search__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-search__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-search__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-search__scrollbar--width:var(--space--medium, 12px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-search--width)}ez-icon{--ez-icon--color:inherit;font-weight:var(--text-weight--large, 600)}.suppressed-search-input{--ez-text-input__input--border-color:var(--color--strokes, #dce0e8);--ez-text-input__input--disabled--background-color:var(--background--xlight, #fff);--ez-text-input__input--disabled--color:var(--title--primary, #2B3A54)}.list-container{min-width:var(--ez-search__list-min-width);overflow:auto;position:relative;width:100%}.list-wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:0;z-index:var(--more-visible, 2);max-height:350px;min-width:150px;background-color:var(--ez-search--background-color--xlight);border-radius:var(--ez-search--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000)}.list-options{margin-top:0px;box-sizing:border-box;width:100%;height:100%;padding:0;display:flex;flex-direction:column;scroll-behavior:smooth;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--ez-search__scrollbar--color-clicked) var(--ez-search__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--scrollbar--background);width:var(--space--small);max-width:var(--space--small);min-width:var(--space--small);height:var(--space--small);max-height:var(--space--small);min-height:var(--space--small)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-search__scrollbar--color-background);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-search__scrollbar--color-default);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-search__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-search__scrollbar--color-clicked)}.item{display:flex;align-items:center;width:100%;box-sizing:border-box;list-style-type:none;cursor:pointer;border-radius:var(--ez-search--border-radius-small);gap:var(--space--small, 6px)}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size);line-height:var(--ez-search--line-height)}.item__label{font-weight:var(--ez-search--font-weight--medium)}.item__label--bold{font-weight:var(--ez-search--font-weight--large)}.item__value{text-align:center;color:var(--ez-search__list-text--primary);font-weight:var(--ez-search--font-weight--large)}.item__value--hidden{visibility:hidden;position:absolute;white-space:nowrap;z-index:-1;top:0;left:0}.item__label{text-align:left}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;min-height:var(--ez-search__list-height)}.message__no-result{color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size)}.message__loading{border-radius:50%;width:14px;height:14px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border:3px solid var(--ez-search__list-title--primary);border-top:3px solid transparent}.item__list>li:hover{background-color:var(--ez-search--background-medium)}.preselected{background-color:var(--background--medium)}.btn{outline:none;border:none;background:none;cursor:pointer;color:var(--ez-search__btn--color)}.btn:disabled{cursor:not-allowed;color:var(--ez-search__btn-disabled--color)}.btn:disabled:hover{cursor:not-allowed;color:var(--ez-search__btn-disabled--color)}.btn:hover{color:var(--ez-search__btn-hover--color)}.btn__close{visibility:hidden}ez-text-input:hover .btn__close,ez-text-input:focus .btn__close{visibility:visible}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@supports not (scrollbar-width: thin){.item{padding-right:8px}}.ez-search-plus__container{display:flex;flex-grow:1;gap:3px}.ez-search-plus__text-input{--ez-text-input--border-top-left-radius:0px;--ez-text-input--border-bottom-left-radius:0px;outline:none}.ez-search-plus__code-input-no-border{--ez-text-input--border-top-right-radius:0px;--ez-text-input--border-bottom-right-radius:0px}.ez-search-plus__code-input{max-width:85px}.ez-search-plus__code-input-full{width:100%}.description-input-container{width:100%;outline:none}";
@@ -129,9 +130,10 @@ const EzSearchPlus = class {
   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() {
@@ -155,7 +157,7 @@ const EzSearchPlus = class {
     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) {
@@ -191,13 +193,15 @@ const EzSearchPlus = class {
       }
     }
     if (typeof valueToNormalize != 'object') {
-      return valueToNormalize;
+      return typeof valueToNormalize === 'number'
+        ? String(valueToNormalize)
+        : valueToNormalize;
     }
     return valueToNormalize === null || valueToNormalize === void 0 ? void 0 : valueToNormalize.value;
   }
   async loadDescriptionValueByCode(codeValue) {
     if (!this.optionLoader) {
-      console.warn("optionLoader não definido");
+      console.warn(this.i18n("ez-search-plus.optionLoaderNotDefined"));
       return "";
     }
     try {
@@ -227,7 +231,7 @@ const EzSearchPlus = class {
   }
   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: "" };
@@ -388,7 +392,7 @@ const EzSearchPlus = class {
         "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) })))))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/ez-search-result-list.entry.js

@@ -1,5 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-5a720e56.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-baa5e267.js';
 import { StringUtils } from '@sankhyalabs/core';
+import { i as initI18n } from './index-41363fa6.js';
 
 const ezSearchResultListCss = ":host{--ez-search__list-title--primary:var(--title--primary, #2B3A54);--ez-search__list-text--primary:var(--text--primary, #626e82);--ez-search__list-height:calc(var(--ez-search--font-size) + var(--ez-search--space--medium) + 4px);--ez-search__list-min-width:64px;--ez-search__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-search__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-search__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-search__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-search__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-search__scrollbar--width:var(--space--small, 6px);--ez-search--border-radius-small:var(--border--radius-small, 6px);--ez-search--font-size:var(--text--medium, 14px);--ez-search--font-family:var(--font-pattern, Arial);--ez-search--font-weight--large:var(--text-weight--large, 500);--ez-search--font-weight--medium:var(--text-weight--medium, 400);--ez-search--background-medium:var(--background--medium, #f0f3f7);--ez-search--line-height:calc(var(--text--medium, 14px) + 4px)}.list-options{position:relative;z-index:var(--more-visible, 2);margin:var(--space--small) 0px;padding:0px;padding-inline-start:0px;box-sizing:border-box;width:100%;height:100%;max-height:350px;min-width:150px;display:flex;flex-direction:column;scroll-behavior:smooth;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--ez-search__scrollbar--color-clicked) var(--ez-search__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--scrollbar--background);width:var(--space--small);max-width:var(--space--small);min-width:var(--space--small);height:var(--space--small);max-height:var(--space--small);min-height:var(--space--small)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-search__scrollbar--color-background);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-search__scrollbar--color-default);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-search__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-search__scrollbar--color-clicked)}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;margin:var(--space--medium) 0px;min-height:var(--ez-search__list-height)}.message__no-result{color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size)}.loading__container{display:flex;flex-direction:column;margin:var(--space--small)}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size);line-height:var(--ez-search--line-height)}.item__label{font-weight:var(--ez-search--font-weight--medium)}.item__label--bold{font-weight:var(--ez-search--font-weight--large)}.item__value{text-align:center;color:var(--ez-search__list-text--primary);font-weight:var(--ez-search--font-weight--large)}.item__value--hidden{visibility:hidden;position:absolute;white-space:nowrap;z-index:-1;top:0;left:0}.item__label{text-align:left}.item__list>li:hover{background-color:var(--ez-search--background-medium)}.item{display:flex;align-items:center;width:100%;box-sizing:border-box;list-style-type:none;cursor:pointer;border-radius:var(--ez-search--border-radius-small);gap:var(--space--small, 6px)}.preselected{background-color:var(--background--medium)}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@supports not (scrollbar-width: thin){.item{padding-right:8px}}";
 
@@ -7,7 +8,6 @@ const EzSearchResultList = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.changeValue = createEvent(this, "changeValue", 7);
-    this._textEmptyList = "Nenhum resultado encontrado";
     this._startHighlightTag = "<span class='card-item__highlight'>";
     this._endHighlightTag = "</span>";
     this.showLoading = undefined;
@@ -93,10 +93,13 @@ const EzSearchResultList = class {
   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 watchers() { return {
     "visibleOptions": ["observerVisivleOptions"]

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

@@ -1,11 +1,11 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5a720e56.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
 import { C as CSSVarsUtils } from './CSSVarsUtils-acba92d7.js';
 import { ObjectUtils, StringUtils, ElementIDUtils } from '@sankhyalabs/core';
-import { A as ApplicationUtils } from './ApplicationUtils-eaf91331.js';
+import { A as ApplicationUtils } from './ApplicationUtils-1569f757.js';
 import './DialogType-54a62731.js';
 import './CheckMode-bdb2ec19.js';
+import { i as initI18n } from './index-41363fa6.js';
 import './FormLayout-071d324c.js';
-import { R as REQUIRED_INFO } from './constants-b036528f.js';
 import { r as replaceQuotes, a as replaceHighlight } from './searchFormatters-8229207e.js';
 
 const ezSearchCss = ":host{--ez-search--height:42px;--ez-search--width:100%;--ez-search__icon--width:48px;--ez-search--border-radius:var(--border--radius-medium, 12px);--ez-search--border-radius-small:var(--border--radius-small, 6px);--ez-search--font-size:var(--text--medium, 14px);--ez-search--font-family:var(--font-pattern, Arial);--ez-search--font-weight--large:var(--text-weight--large, 500);--ez-search--font-weight--medium:var(--text-weight--medium, 400);--ez-search--background-color--xlight:var(--background--xlight, #fff);--ez-search--background-medium:var(--background--medium, #f0f3f7);--ez-search--line-height:calc(var(--text--medium, 14px) + 4px);--ez-search__input--background-color:var(--background--medium, #e0e0e0);--ez-search__input--border:var(--border--medium, 2px solid);--ez-search__input--border-color:var(--ez-search__input--background-color);--ez-search__input--focus--border-color:var(--color--primary, #008561);--ez-search__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-search__input--disabled--color:var(--text--disable, #AFB6C0);--ez-search__input--error--border-color:#CC2936;--ez-search__btn--color:var(--title--primary, #2B3A54);--ez-search__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-search__btn-hover--color:var(--color--primary, #4e4e4e);--ez-search__label--color:var(--title--primary, #2B3A54);--ez-search--space--medium:var(--space--medium, 12px);--ez-search--space--small:var(--space--small, 6px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-search--width)}ez-icon{--ez-icon--color:inherit;font-weight:var(--text-weight--large, 600)}.suppressed-search-input{--ez-text-input__input--border-color:var(--color--strokes, #dce0e8);--ez-text-input__input--disabled--background-color:var(--background--xlight, #fff);--ez-text-input__input--disabled--color:var(--title--primary, #2B3A54)}.btn{outline:none;border:none;background:none;cursor:pointer;color:var(--ez-search__btn--color)}.btn:disabled{cursor:not-allowed;color:var(--ez-search__btn-disabled--color)}.btn:disabled:hover{cursor:not-allowed;color:var(--ez-search__btn-disabled--color)}.btn:hover{color:var(--ez-search__btn-hover--color)}.btn__close{visibility:hidden}ez-text-input:hover .btn__close,ez-text-input:focus .btn__close{visibility:visible}";
@@ -19,8 +19,6 @@ const EzSearch = class {
     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;
@@ -346,7 +344,7 @@ const EzSearch = class {
     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);
@@ -408,11 +406,11 @@ const EzSearch = class {
   }
   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();
@@ -436,7 +434,8 @@ const EzSearch = class {
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
-  componentWillLoad() {
+  async componentWillLoad() {
+    this.i18n = await initI18n();
     if (this.options === undefined) {
       this.options = [];
       const optionsTags = this.el.querySelectorAll("option");
@@ -618,7 +617,7 @@ const EzSearch = class {
     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) }))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/ez-sidebar-navigator.entry.js

@@ -1,6 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5a720e56.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
 import { ElementIDUtils } from '@sankhyalabs/core';
 import { E as EzScrollDirection } from './EzScrollDirection-2df26c93.js';
+import { i as initI18n } from './index-41363fa6.js';
 
 var ModeMenuEnum;
 (function (ModeMenuEnum) {
@@ -22,12 +23,6 @@ var TypeMenuEnum;
   TypeMenuEnum["DYNAMIC"] = "dynamic";
 })(TypeMenuEnum || (TypeMenuEnum = {}));
 
-const MESSAGES = {
-  HIDE_MENU: 'Ocultar menu',
-  UN_PIN_MENU: 'Desafixar menu',
-  PUSH_PIN_MENU: 'Fixar menu',
-};
-
 const ezSidebarNavigatorCss = ":host{--ez-sidebar-navigator--padding-left:var(--space--xs, 12px);--ez-sidebar-navigator--padding-right:var(--space--xs, 12px);--ez-sidebar-navigator--gap:var(--space--xs, 12px);--ez-sidebar-navigator--box-shadow:var(--shadow, 0px 0px 24px 0px #000);--ez-sidebar-navigator--background-color:var(--color--inverted);--ez-sidebar-navigator--border-radius:0px var(--border--radius-medium) var(--border--radius-medium) 0px;--ez-sidebar-navigator--height:calc(100vh - var(--space--lg, 24px));--ez-sidebar-navigator--z-index:var(--elevation--20, 20);--ez-sidebar-navigator--header-gap:var(--space--xs, 12px);--ez-sidebar-navigator--footer-gap:var(--space--xs, 12px);--ez-ez-sidebar-navigator__title--font-family:var(--font-pattern, \"Roboto\");--ez-ez-sidebar-navigator__title--font-size:var(--title--medium, 16px);--ez-ez-sidebar-navigator__title--color:var(--title--primary, #2b3a54);--ez-ez-sidebar-navigator__title--font-weight:var(--text-weight--extra-large, 700)}.inverted{transform:rotate(180deg)}.ez-sidebar-navigator{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:var(--ez-sidebar-navigator--height);padding-top:var(--space--xs, 12px);padding-bottom:var(--space--xs, 12px);outline:none;gap:var(--ez-sidebar-navigator--gap);padding-left:var(--ez-sidebar-navigator--padding-left);padding-right:var(--ez-sidebar-navigator--padding-right);background-color:var(--ez-sidebar-navigator--background-color);-webkit-box-shadow:var(--ez-sidebar-navigator--box-shadow);box-shadow:var(--ez-sidebar-navigator--box-shadow);border-radius:var(--ez-sidebar-navigator--border-radius)}.ez-sidebar-navigator__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;justify-content:space-between;gap:var(--ez-sidebar-navigator--header-gap)}.ez-sidebar-navigator__content{height:100%}.ez-sidebar-navigator__footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--ez-sidebar-navigator--footer-gap)}.ez-sidebar-navigator__title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-family:var(--ez-ez-sidebar-navigator__title--font-family);font-size:var(--ez-ez-sidebar-navigator__title--font-size);font-weight:var(--ez-ez-sidebar-navigator__title--font-weight);color:var(--ez-ez-sidebar-navigator__title--color)}.ez-sidebar-navigator__end{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:auto;gap:var(--ez-sidebar-navigator--gap)}.dynamic{position:absolute;z-index:var(--ez-sidebar-navigator--z-index)}.fixed{position:relative}.hidden{display:none}.show{animation:fadeIn .1s ease-in-out 1}@keyframes fadeIn{from{transform:translate(-100%)}}.sm{width:240px}.md{width:280px}.lg{width:320px}@media screen and (max-width: 991px){.responsive{width:240px}}@media screen and (min-width: 992px){.responsive{width:280px}}@media screen and (min-width: 1200px){.responsive{width:320px}}";
 
 const EzSidebarNavigator = class {
@@ -70,6 +65,9 @@ const EzSidebarNavigator = class {
   async openSidebar() {
     this.open = true;
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidLoad() {
     if (this.type === TypeMenuEnum.FIXED) {
       this.mode = ModeMenuEnum.FIXED;
@@ -78,7 +76,7 @@ const EzSidebarNavigator = class {
   }
   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));
   }
   get _element() { return getElement(this); }

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

@@ -1,4 +1,6 @@
-import { r as registerInstance, h } from './index-5a720e56.js';
+import { r as registerInstance, h } from './index-baa5e267.js';
+import { i as initI18n } from './index-41363fa6.js';
+import '@sankhyalabs/core';
 
 const ALLOWED_ANIMATIONS = ['progress', 'pulse', 'false'];
 const ALLOWED_VARIANTS = ['circle', 'rect', 'text'];
@@ -11,7 +13,6 @@ const SKELETON_ARIA = {
   DATA_BUSY: 'true',
   DATA_VALUEMIN: '0',
   DATA_VALUEMAX: '100',
-  DATA_VALUETEXT: 'Loading...',
   ROLE: 'progressbar',
   TABINDEX: '0'
 };
@@ -43,7 +44,8 @@ const EzSkeleton = class {
     this.marginLeft = null;
     this.animation = DEFAULT_VALUES.ANIMATION;
   }
-  componentWillLoad() {
+  async componentWillLoad() {
+    this.i18n = await initI18n();
     this.initializeItems();
   }
   componentWillUpdate() {
@@ -134,7 +136,7 @@ const EzSkeleton = class {
     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/esm/ez-sortable-list.entry.js

@@ -1,5 +1,6 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-5a720e56.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-baa5e267.js';
 import { ArrayUtils } from '@sankhyalabs/core';
+import { i as initI18n } from './index-41363fa6.js';
 
 /**!
  * Sortable 1.15.6
@@ -3309,9 +3310,9 @@ const EzSortableList = class {
     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;
@@ -3332,6 +3333,12 @@ const EzSortableList = class {
     });
     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();
   }
@@ -3472,7 +3479,7 @@ const EzSortableList = class {
     }
   }
   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);
@@ -3494,7 +3501,7 @@ const EzSortableList = class {
   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()));

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

@@ -0,0 +1,30 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-baa5e267.js';
+import { ElementIDUtils } from '@sankhyalabs/core';
+import { g as getI18n } from './index-41363fa6.js';
+
+const ezSpinnerCss = ":host{--ez-spinner--color:var(--color--ocean-green-600, #008561);--ez-spinner--size-default:24px;--ez-spinner--size-medium:32px;--ez-spinner--size-large:42px;--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,\n    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}}";
+
+const EzSpinner = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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" })))));
+  }
+  get _element() { return getElement(this); }
+};
+EzSpinner.style = ezSpinnerCss;
+
+export { EzSpinner as ez_spinner };