@sankhyalabs/ezui 6.1.0-dev.3 → 6.1.0-dev.30

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

@@ -1,12 +1,13 @@
 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-391ebb4f.js';
 import { C as CSSVarsUtils } from './CSSVarsUtils-acba92d7.js';
 import './DialogType-54a62731.js';
 import './CheckMode-bdb2ec19.js';
+import { i as initI18n } from './index-76eedf30.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}.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%}";
+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}";
 
 const EzSearchPlus = class {
   constructor(hostRef) {
@@ -129,14 +130,17 @@ 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() {
     CSSVarsUtils.applyVarsTextInput(this.el, this._textInputCodeValue);
     CSSVarsUtils.applyVarsTextInput(this.el, this._textInputDescriptionValue);
+  }
+  connectedCallback() {
     this.initKeyboardManager();
     if (this.autoFocus) {
       requestAnimationFrame(() => {
@@ -146,13 +150,14 @@ const EzSearchPlus = class {
   }
   clearSearch() {
     this.value = null;
+    this.descriptionValue = null;
   }
   getCodLabel() {
     var _a;
     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) {
@@ -194,7 +199,7 @@ const EzSearchPlus = class {
   }
   async loadDescriptionValueByCode(codeValue) {
     if (!this.optionLoader) {
-      console.warn("optionLoader não definido");
+      console.warn(this.i18n("ez-search-plus.optionLoaderNotDefined"));
       return "";
     }
     try {
@@ -224,7 +229,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: "" };
@@ -341,7 +346,7 @@ const EzSearchPlus = class {
     this._keyboardManager
       .bind("ArrowUp", () => this.handleArrowUp(), Object.assign(Object.assign({}, defaultOpts), { propagate: false }))
       .bind("ArrowDown", () => this.handleArrowDown(), Object.assign(Object.assign({}, defaultOpts), { propagate: false }))
-      .bind("Enter", () => this.selectCurrentItem(), defaultOpts)
+      .bind("Enter", () => this.selectCurrentItem(), Object.assign(Object.assign({}, defaultOpts), { propagate: !this.stopPropagateEnterKeyEvent }))
       .bind("Tab", () => this.handleInputTab(), defaultOpts)
       .bind("Escape", () => this.handleInputEsc(), defaultOpts);
   }
@@ -375,13 +380,17 @@ const EzSearchPlus = class {
   getLeftIconElement() {
     return h("button", { class: "btn", slot: "leftIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handleSearchClick() }, this.canShowLoadSpinDescription() ? h("div", { class: "message__loading" }) : h("ez-icon", { iconName: "search" }));
   }
+  handleOnEzVisibilityChange(event) {
+    event.stopPropagation();
+    this.searchDescriptionIsOpen = event.detail;
+  }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
     return (h(Host, null, h("div", { class: "ez-search-plus__container" }, h("ez-text-input", { ref: elem => this._textInputCodeValue = elem, 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.searchDescriptionIsOpen = event.detail }, 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-baa5e267.js';
 import { StringUtils } from '@sankhyalabs/core';
+import { i as initI18n } from './index-76eedf30.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;
@@ -16,6 +16,11 @@ const EzSearchResultList = class {
     this.showOptionValue = true;
     this._preSelection = undefined;
   }
+  observerVisivleOptions(newValue) {
+    if (newValue.length) {
+      this.preSelectItemByIndex(0);
+    }
+  }
   async nextOption() {
     const newPreSelection = this._preSelection === undefined ? 0 : Math.min(this._preSelection + 1, this.visibleOptions.length - 1);
     this.preSelectItemByIndex(newPreSelection);
@@ -31,18 +36,24 @@ const EzSearchResultList = class {
   }
   selectOption(newOption) {
     const newOptionsReplaced = Object.assign(Object.assign({}, newOption), { value: newOption === null || newOption === void 0 ? void 0 : newOption.value, label: newOption === null || newOption === void 0 ? void 0 : newOption.label });
-    const newOptionsFormatted = Object.assign(Object.assign({}, newOptionsReplaced), { value: newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value, label: newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.label });
+    const newOptionsFormatted = Object.assign(Object.assign({}, newOptionsReplaced), { value: this.removeHighLight(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value), label: this.removeHighLight(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.label) });
     this.changeValue.emit(newOptionsFormatted);
   }
+  removeHighLight(text) {
+    if (!text || typeof text !== 'string') {
+      return text;
+    }
+    const startHighlight = new RegExp(this._startHighlightTag, 'g');
+    const endHighlight = new RegExp(this._endHighlightTag, 'g');
+    return text.replace(startHighlight, '').replace(endHighlight, '');
+  }
   createAndSelectOption(detail) {
     let { key, title } = detail;
     key = String(key !== null && key !== void 0 ? key : "");
-    const startHighlight = new RegExp(this._startHighlightTag, 'g');
-    const endHighlight = new RegExp(this._endHighlightTag, 'g');
     title = StringUtils.decodeHtmlEntities(title);
     const option = {
-      value: key === null || key === void 0 ? void 0 : key.replace(startHighlight, '').replace(endHighlight, ''),
-      label: title === null || title === void 0 ? void 0 : title.replace(startHighlight, '').replace(endHighlight, '')
+      value: this.removeHighLight(key),
+      label: this.removeHighLight(title)
     };
     this.selectOption(option);
   }
@@ -82,11 +93,17 @@ 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"]
+  }; }
 };
 EzSearchResultList.style = ezSearchResultListCss;
 

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-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-391ebb4f.js';
 import './DialogType-54a62731.js';
 import './CheckMode-bdb2ec19.js';
+import { i as initI18n } from './index-76eedf30.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] }, 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-baa5e267.js';
 import { ElementIDUtils } from '@sankhyalabs/core';
 import { E as EzScrollDirection } from './EzScrollDirection-2df26c93.js';
+import { i as initI18n } from './index-76eedf30.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-baa5e267.js';
+import { i as initI18n } from './index-76eedf30.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-baa5e267.js';
 import { ArrayUtils } from '@sankhyalabs/core';
+import { i as initI18n } from './index-76eedf30.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-split-button.entry.js

@@ -1,5 +1,6 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-baa5e267.js';
 import { ElementIDUtils } from '@sankhyalabs/core';
+import { i as initI18n } from './index-76eedf30.js';
 
 const ezSplitButtonCss = ":host{--ez-split-button--min-width:24;--ez-split-button--width:'auto';--ez-split-button__medium--height:32px;--ez-split-button__large--height:42px;--ez-split-button__medium-icon--width:40px;--ez-split-button__large-icon--width:44px;--ez-split-button__inline__icon--gap:6px;--ez-split-button__label--padding-top:0px;--ez-split-button__label--padding-bottom:0px;--ez-split-button__right-button--padding-left:8px;--ez-split-button--color:var(--title--primary, #2B3A54);--ez-split-button--font-size:var(--text--small, 12px);--ez-split-button--font-family:var(--font-pattern, Arial);--ez-split-button--font-weight:var(--text-weight--large);--ez-split-button--background-color:var(--background--light, #ffffff);--ez-split-button--border-radius:var(--border--radius-large, 24px);--ez-split-button--border:1px solid var(--color--strokes);--ez-split-button--justify-content:center;--ez-split-button--hover-color:var(--color--primary-600, #007a5a);--ez-split-button--hover--background-color:var(--background--light, #ffffff);--ez-split-button--disabled-color:var(--text--primary);--ez-split-button--disabled--background-color:var(--background--medium);--ez-split-button--focus--border:var(--border--medium, 2px) var(--color--primary-300);--ez-split-button--focus--box-shadow:none;--ez-split-button--active-color:var(--color--primary-700);--ez-split-button--active--background-color:var(--background--strong)}ez-icon{--ez-icon--color:inherit}button{position:relative;display:flex;align-items:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;white-space:nowrap;min-width:var(--ez-split-button--min-width);width:var(--ez-split-button--width);height:var(--ez-split-button__medium--height);font-family:var(--ez-split-button--font-family);font-size:var(--ez-split-button--font-size);font-weight:var(--ez-split-button--font-weight);padding:var(--ez-split-button__label--padding-top) 0 var(--ez-split-button__label--padding-bottom) 0;border-top-left-radius:var(--ez-split-button--border-radius);border-bottom-left-radius:var(--ez-split-button--border-radius);background-color:var(--ez-split-button--background-color);color:var(--ez-split-button--color);fill:var(--ez-split-button--color);border:none;justify-content:var(--ez-split-button--justify-content)}label{cursor:pointer}button:active{outline:none;box-shadow:none;background-color:var(--ez-split-button--active--background-color);color:var(--ez-split-button--active-color);fill:var(--ez-split-button--active-color);--ez-icon--color:var(--ez-split-button--active-color)}.ez-split-button__left-button{border:var(--ez-split-button--border);border-right:none;outline:none}.ez-split-button__right-button{border:var(--ez-split-button--border);border-left:none;outline:none}.ez-split-button__left-button:focus{box-shadow:0 0 0 2px var(--color--primary-300), \n    0 2px 0 0 var(--color--primary-300), \n    0 -2px 0 0 var(--color--primary-300);}.ez-split-button__right-button:focus{box-shadow:2px 0 0 0 var(--color--primary-300), \n    0 2px 0 0 var(--color--primary-300), \n    0 -2px 0 0 var(--color--primary-300);}.ez-split-button__left-button:hover,.ez-split-button__right-button:hover{outline:none;background-color:var(--ez-split-button--hover--background-color);color:var(--ez-split-button--hover-color);fill:var(--ez-split-button--hover-color);--ez-icon--color:var(--ez-split-button--hover-color)}.ez-split-button__left-button:active,.ez-split-button__right-button:active{outline:none;box-shadow:none;background-color:var(--ez-split-button--active--background-color);color:var(--ez-split-button--active-color);fill:var(--ez-split-button--active-color);--ez-icon--color:var(--ez-split-button--active-color)}.ez-split-button__left-button:disabled,.ez-split-button__left-button:disabled label,.ez-split-button__right-button:disabled{background-color:var(--ez-split-button--disabled--background-color);color:var(--ez-split-button--disabled-color);fill:var(--ez-split-button--disabled-color);border:none;--ez-icon--color:var(--ez-split-button--disabled-color);cursor:not-allowed}.ez-split-button__left-button:disabled{border:var(--ez-split-button--disabled-border);border-right:none}.ez-split-button__right-button:disabled{border:var(--ez-split-button--disabled-border);border-left:none}button.large{height:var(--ez-split-button__large--height)}button.medium{height:var(--ez-split-button__medium--height)}.default label{padding:var(--ez-split-button__label--padding-top) 12px var(--ez-split-button__label--padding-bottom) 20px}.icon-left{gap:var(--ez-split-button__inline__icon--gap)}.icon-left label{padding-right:12px}.icon-left ez-icon{padding-left:20px}.icon-only{padding-left:12px;padding-right:12px}.ez-split-button__right-button{border-top-right-radius:var(--ez-split-button--border-radius);border-bottom-right-radius:var(--ez-split-button--border-radius);border-top-left-radius:0;border-bottom-left-radius:0;border-right:var(--ez-split-button--border)}.ez-split-button__right-button--medium{min-width:var(--ez-split-button__medium-icon--width)}.ez-split-button__right-button--large{min-width:var(--ez-split-button__large-icon--width)}.ez-split-button__right-button--divider{top:10%;bottom:10%}.ez-split-button__right-button--divider:before{content:\"\";position:absolute;left:0;border-left:1px solid rgba(0, 0, 0, 20%);border-radius:2px;height:75%}.btn-icon--medium{min-width:--ez-split-button__medium-icon--width}.btn-icon--large{min-width:--ez-split-button__large-icon--width}.ez-split-button__right-button-container{position:absolute;left:0;padding-left:var(--ez-split-button__right-button--padding-left)}.label-icon{display:flex;flex-direction:row;align-items:center;color:var(--ez-split-button--color)}.label-icon:active{color:var(--ez-split-button--active-color);fill:var(--ez-split-button--active-color);--ez-icon--color:var(--ez-split-button--active-color)}.dropdown{display:flex}.dropdown-content{display:block;position:absolute;background-color:#f1f1f1;min-width:160px;z-index:var(--ez-elevation--8);border-radius:var(--ez-split-button--border-radius)}.dropdown-content>ez-dropdown{position:relative}";
 
@@ -9,7 +10,6 @@ const EzSplitButton = class {
     this.buttonClick = createEvent(this, "buttonClick", 7);
     this.dropdownItemClick = createEvent(this, "dropdownItemClick", 7);
     this.dropdownSubActionClick = createEvent(this, "dropdownSubActionClick", 7);
-    this.rightDefaultTitle = 'Mais opções';
     this.show = false;
     this.enabled = true;
     this.iconName = undefined;
@@ -17,7 +17,7 @@ const EzSplitButton = class {
     this.items = undefined;
     this.label = undefined;
     this.leftTitle = undefined;
-    this.rightTitle = 'Mais opções';
+    this.rightTitle = undefined;
     this.mode = 'default';
     this.size = 'medium';
     this.itemBuilder = undefined;
@@ -130,7 +130,8 @@ const EzSplitButton = class {
     window.removeEventListener('scroll', this.positionDropdown.bind(this));
     window.addEventListener('scroll', this.positionDropdown.bind(this));
   }
-  componentWillLoad() {
+  async componentWillLoad() {
+    this.i18n = await initI18n();
     this.setEvents();
   }
   componentWillRender() {
@@ -156,7 +157,7 @@ const EzSplitButton = class {
     const hasIconButton = this.shouldShowIconOnLeftButton();
     const hasLabelButton = this.shouldShowLabelOnLeftButton();
     const iconSize = this.getIconSize();
-    return (h("div", { class: "label-icon" }, h("button", { class: `ez-split-button__left-button ${iconSize} ${this.mode}`, title: this.leftTitle || this.label, type: "button", disabled: !this.enabled, onClick: () => { this.handleButtonClick(); }, ref: el => (this.leftButton = el) }, hasIconButton && h("ez-icon", { href: this.image, iconName: this.iconName, size: iconSize }), hasLabelButton && h("label", { title: this.leftTitle || this.label }, this.label)), h("div", { class: "dropdown" }, h("button", { class: `ez-split-button__right-button ${iconSize} ez-split-button__right-button--${iconSize} ez-split-button__right-button--divider`, title: this.rightTitle || this.rightDefaultTitle, type: "button", disabled: !this.enabled, onClick: () => { this.toggleDropdown(); }, ref: el => (this.rightButton = el) }, h("ez-icon", { class: `ez-split-button__right-button-container ` + (iconSize ? `btn-icon--${iconSize}` : ''), iconName: 'chevron-down', size: iconSize })), h("div", { class: `dropdown-content dropdown-content--${this.size}`, ref: (ref) => (this.dropdownParent = ref) }, this.show && (h("ez-dropdown", { items: this.items, onClick: evt => { evt.stopPropagation(); }, onEzOutsideClick: () => { this.closeDropdown(); }, onEzClick: evt => { this.handleDropdownItemClick(evt); }, onEzSubActionClick: evt => { this.handleDropdownSubActionClick(evt); }, itemBuilder: this.itemBuilder }))))));
+    return (h("div", { class: "label-icon" }, h("button", { class: `ez-split-button__left-button ${iconSize} ${this.mode}`, title: this.leftTitle || this.label, type: "button", disabled: !this.enabled, onClick: () => { this.handleButtonClick(); }, ref: el => (this.leftButton = el) }, hasIconButton && h("ez-icon", { href: this.image, iconName: this.iconName, size: iconSize }), hasLabelButton && h("label", { title: this.leftTitle || this.label }, this.label)), h("div", { class: "dropdown" }, h("button", { class: `ez-split-button__right-button ${iconSize} ez-split-button__right-button--${iconSize} ez-split-button__right-button--divider`, title: this.rightTitle || this.i18n("ez-split-button.moreOptions"), type: "button", disabled: !this.enabled, onClick: () => { this.toggleDropdown(); }, ref: el => (this.rightButton = el) }, h("ez-icon", { class: `ez-split-button__right-button-container ` + (iconSize ? `btn-icon--${iconSize}` : ''), iconName: 'chevron-down', size: iconSize })), h("div", { class: `dropdown-content dropdown-content--${this.size}`, ref: (ref) => (this.dropdownParent = ref) }, this.show && (h("ez-dropdown", { items: this.items, onClick: evt => { evt.stopPropagation(); }, onEzOutsideClick: () => { this.closeDropdown(); }, onEzClick: evt => { this.handleDropdownItemClick(evt); }, onEzSubActionClick: evt => { this.handleDropdownSubActionClick(evt); }, itemBuilder: this.itemBuilder }))))));
   }
   shouldShowLabelOnLeftButton() {
     return ['icon-left', 'default'].includes(this.mode);

package/dist/esm/ez-split-item.entry.js

@@ -1,9 +1,10 @@
 import { r as registerInstance, h, H as Host } from './index-baa5e267.js';
-import './ApplicationUtils-eaf91331.js';
+import './ApplicationUtils-391ebb4f.js';
 import { C as CSSVarsUtils } from './CSSVarsUtils-acba92d7.js';
 import './DialogType-54a62731.js';
 import './CheckMode-bdb2ec19.js';
 import '@sankhyalabs/core';
+import { i as initI18n } from './index-76eedf30.js';
 import './FormLayout-071d324c.js';
 
 const ezSplitItemCss = ".box_split-item{background-color:var(--background--xlight);width:100%;height:100%;border-radius:var(--border--radius-medium);box-shadow:var(--shadow--xsmall);flex-direction:column;overflow:hidden;display:flex;padding:var(--space--nano)}.box_split-item>.ez-split-item--content{overflow:auto}.expanded__item{position:absolute;z-index:var(--more-visible);top:0;left:0;width:100%;height:100%}.ez-split-item--header{display:flex;align-items:center;justify-content:space-between}.ez-split-item--header-title{flex:1;white-space:nowrap;overflow:hidden}.ez-split-item--header-title h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.ez-split-item--header-buttons{display:flex;align-items:center;max-height:20px}.ez-split-item--content{display:block;height:100%}h3.ez-margin--small{margin-left:var(--space--small)}.structural__item{background:none;box-shadow:none;padding:0;margin:0;border:0}.content__item{margin:var(--space--extra-small);width:calc(100% - 2*(var(--space--extra-small)));height:calc(100% - 2*(var(--space--extra-small)))}";
@@ -25,11 +26,14 @@ const SplitItem = class {
     this._expanded = !this._expanded;
     (_b = (_a = this.expandButtonRef.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.blur();
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidLoad() {
     CSSVarsUtils.applyVarsGrid(this._element, this._slot.children[0]);
   }
   render() {
-    return (h(Host, { class: `box_split-item ${this._expanded ? 'expanded__item' : ''} ${this.structural ? 'structural__item' : 'content__item'}`, ref: el => (this._element = el) }, h("div", { class: "ez-split-item--header" }, h("slot", { name: "leftButtons" }), h("div", { class: "ez-split-item--header-title" }, this.label && (h("h3", { class: "ez-text ez-text--primary ez-title ez-title--medium ez-margin--small", title: this.label }, this.label))), h("div", { class: "ez-split-item--header-buttons" }, h("slot", { name: "rightButtons" }), this.enableExpand && (h("ez-button", { ref: el => this.expandButtonRef = el, size: "small", mode: "icon", iconName: "expand", class: 'ez-button--tertiary', onClick: () => this.toggleExpandItem(), title: this._expanded ? 'Resumir' : 'Expandir' })))), h("div", { class: "ez-split-item--content grid_height-0", ref: el => (this._slot = el) }, h("slot", null))));
+    return (h(Host, { class: `box_split-item ${this._expanded ? 'expanded__item' : ''} ${this.structural ? 'structural__item' : 'content__item'}`, ref: el => (this._element = el) }, h("div", { class: "ez-split-item--header" }, h("slot", { name: "leftButtons" }), h("div", { class: "ez-split-item--header-title" }, this.label && (h("h3", { class: "ez-text ez-text--primary ez-title ez-title--medium ez-margin--small", title: this.label }, this.label))), h("div", { class: "ez-split-item--header-buttons" }, h("slot", { name: "rightButtons" }), this.enableExpand && (h("ez-button", { ref: el => this.expandButtonRef = el, size: "small", mode: "icon", iconName: "expand", class: 'ez-button--tertiary', onClick: () => this.toggleExpandItem(), title: this._expanded ? this.i18n('app.collapse') : this.i18n('app.expand') })))), h("div", { class: "ez-split-item--content grid_height-0", ref: el => (this._slot = el) }, h("slot", null))));
   }
 };
 SplitItem.style = ezSplitItemCss;

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

@@ -0,0 +1,34 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-baa5e267.js';
+import { ElementIDUtils } from '@sankhyalabs/core';
+
+const ezTagCss = ":host{--ez-tag--padding-x:var(--space--8, 8px);--ez-tag--padding-y:var(--space--4, 4px);--ez-tag--min-width:var(--space--6, 6px);--ez-tag--min-height:var(--space--14, 14px);--ez-tag--border-radius:var(--border--radius-24, 24px);--ez-tag--background-color:var(--color--ocean-green-600, #008561);--ez-tag_label--font-weight:var(--font-weight--regular, 400);--ez-tag_label--font-size:var(--font-size--default, 14px);--ez-tag_label--color:var(--color--gray-70, #FFFFFF)}.tag{background-color:var(--ez-tag--custom-background-color, var(--ez-tag--background-color));padding:var(--ez-tag--padding-y) var(--ez-tag--padding-x);border-radius:var(--ez-tag--border-radius);min-width:var(--ez-tag--min-width);min-height:var(--ez-tag--min-height);display:inline-flex;justify-content:center;align-items:center}label{font-weight:var(--ez-tag_label--font-weight);font-size:var(--ez-tag_label--font-size);color:var(--ez-tag_label--custom-color, var(--ez-tag_label--color));font-family:var(--font--pattern, Arial);line-height:var(--ez-tag_label--font-size);text-align:center;line-height:normal}.light-ocean-green{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--ocean-green-100));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--ocean-green-600))}.green{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--green-600));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--gray-70))}.light-green{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--green-200));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--green-600))}.yellow{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--yellow-600));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--yellow-900))}.light-yellow{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--yellow-200));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--yellow-800))}.red{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--red-600));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--gray-70))}.light-red{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--red-200));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--red-600))}.gray{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--gray-500));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--gray-100))}.light-gray{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--gray-100));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--gray-400))}.petroleum{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--petroleum-600));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--petroleum-200))}.light-petroleum{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--petroleum-100));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--petroleum-400))}";
+
+const EzTag = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.label = undefined;
+    this.color = "ocean-green";
+    this.customBackgroundColor = undefined;
+    this.customLabelColor = undefined;
+  }
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._tag) {
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this._tag, 'EzTag', dataInfo);
+    }
+  }
+  validateLabel() {
+    return (this.label) && this.label.trim() !== "";
+  }
+  render() {
+    const customStyleVars = Object.assign({}, this.customBackgroundColor && { '--ez-tag--custom-background-color': `var(${this.customBackgroundColor})` }, this.customLabelColor && { '--ez-tag_label--custom-color': `var(${this.customLabelColor})` });
+    return (h(Host, { style: customStyleVars }, h("div", { ref: el => { this._tag = el; }, class: `tag ${this.color || ''}` }, this.validateLabel() && h("label", { title: this.label }, this.label))));
+  }
+  get _element() { return getElement(this); }
+};
+EzTag.style = ezTagCss;
+
+export { EzTag as ez_tag };