@sankhyalabs/ezui 6.1.0 → 6.2.0-dev.2

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

@@ -1,5 +1,5 @@
-import { h } from "@stencil/core";
 import { ElementIDUtils } from '@sankhyalabs/core';
+import { h } from "@stencil/core";
 export class EzChip {
   constructor() {
     this.label = undefined;
@@ -7,8 +7,14 @@ export class EzChip {
     this.removePosition = undefined;
     this.mode = undefined;
     this.value = false;
-    this.showNativeTooltip = true;
+    this.showNativeTooltip = false;
     this.disableAutoUpdateValue = false;
+    this.maxWidth = undefined;
+    this.size = 'default';
+    this.iconNameLeft = undefined;
+    this.iconNameRight = undefined;
+    this.type = 'primary';
+    this._isOverflowing = false;
   }
   //---------------------------------------------
   // Public methods
@@ -25,54 +31,46 @@ export class EzChip {
   async setBlur() {
     this._containerElem.blur();
   }
-  //---------------------------------------------
-  // Event handlers
-  //---------------------------------------------
-  handleSlotChange(ev) {
-    const slot = ev.target;
-    const content = slot.assignedElements()[0];
-    content.style.setProperty("--ez-icon--color", "var(--ez-icon--color)");
-  }
   handleValueChange() {
     this.swichState();
     this.valueChange.emit(this.value);
   }
-  handleClick(ev) {
-    const target = ev.target;
-    if (!this.enabled)
+  handleClick() {
+    if (!this.enabled) {
       return;
-    if (this.mode === "action")
+    }
+    if (this.mode === "action") {
       return this.actionClick.emit();
-    if (target.tagName.toLowerCase() !== "ez-icon" && !this.disableAutoUpdateValue)
+    }
+    if (!this.disableAutoUpdateValue) {
       return this.handleValueChange();
-    if (target.classList.contains("btn-close"))
-      return this.removeChip.emit();
-  }
-  swichState() {
-    if (this.enabled) {
-      this.value = !this.value;
     }
   }
-  formatLabel() {
-    if (this.label.length > ChipSize.CHAR_LIMIT) {
-      return this.label.substring(0, ChipSize.CHAR_LIMIT) + "...";
+  handleClickRemoveButton(event) {
+    if (!this.enabled) {
+      return;
     }
-    return this.label;
+    event.stopPropagation();
+    this.removeChip.emit();
   }
-  observeValue() {
-    (this.value && this.mode !== "action") ? this._containerElem.classList.add("label__container--active") : this._containerElem.classList.remove("label__container--active");
+  handleIconClick(event, icon) {
+    if (!this.enabled) {
+      return;
+    }
+    event.stopPropagation();
+    this.iconClick.emit({ icon });
   }
-  observeEnabled() {
+  swichState() {
     if (this.enabled) {
-      this._containerElem.classList.remove("label__container--disabled");
-      this._labelElem.classList.remove("lbl--disabled");
-      this._labelElem.classList.remove("cursor-disable");
+      this.value = !this.value;
     }
-    else {
-      this._containerElem.classList.add("label__container--disabled");
-      this._labelElem.classList.add("lbl--disabled");
-      this._labelElem.classList.add("cursor-disable");
+  }
+  checkIsOverflowing() {
+    if (this._labelElem) {
+      this._isOverflowing = this._labelElem.offsetWidth < this._labelElem.scrollWidth;
+      return;
     }
+    this._isOverflowing = false;
   }
   //---------------------------------------------
   // Lifecycle web component
@@ -82,14 +80,27 @@ export class EzChip {
       ElementIDUtils.addIDInfo(this._element, 'ezChip');
     }
     if (this._containerElem) {
-      this.observeValue();
-      this.observeEnabled();
       this._containerElem.setAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME, ElementIDUtils.getInternalIDInfo('button'));
     }
+    this.checkIsOverflowing();
   }
   render() {
-    const labelTitle = this.showNativeTooltip ? this.label : undefined;
-    return (h("button", { onClick: (ev) => this.handleClick(ev), class: "label__container" + (this.removePosition === "left" ? " label__container--row-reverse" : ""), ref: (el) => this._containerElem = el }, h("div", { class: "label__content" }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), h("label", { class: "lbl " + (this.value ? "lbl--active " : ""), ref: (el) => this._labelElem = el, title: labelTitle }, this.formatLabel()), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })), this.mode !== 'action' && this.removePosition && h("ez-icon", { class: "btn-close", size: "small", "icon-name": "close" })));
+    let colorState = 'default';
+    if (!this.enabled) {
+      colorState = 'disabled';
+    }
+    else if (this.value && this.mode !== "action") {
+      colorState = 'active';
+    }
+    return (h("ez-tooltip", { active: this.showNativeTooltip || this._isOverflowing, message: this.label }, h("button", { ref: (el) => this._containerElem = el, class: {
+        "label__container--row-reverse": this.removePosition === "left",
+        "label__container": true,
+      }, "data-color-state": colorState, "data-color-type": this.type, "data-size": this.size, onClick: () => this.handleClick(), style: {
+        maxWidth: this.maxWidth
+      } }, this.iconNameLeft && (h("ez-icon", { size: "medium", "icon-name": this.iconNameLeft, onClick: (event) => this.handleIconClick(event, 'left') })), h("slot", { name: "leftIcon" }), h("label", { ref: (el) => this._labelElem = el, class: {
+        "label__text--disabled": !this.enabled,
+        "label__text": true,
+      } }, this.label), h("slot", { name: "rightIcon" }), this.iconNameRight && (h("ez-icon", { size: "medium", "icon-name": this.iconNameRight, onClick: (event) => this.handleIconClick(event, 'right') })), (this.mode !== 'action' && this.removePosition) && (h("ez-icon", { class: "btn-close", size: "medium", "icon-name": "close", onClick: (event) => this.handleClickRemoveButton(event) })))));
   }
   static get is() { return "ez-chip"; }
   static get encapsulation() { return "shadow"; }
@@ -208,7 +219,7 @@ export class EzChip {
         },
         "attribute": "show-native-tooltip",
         "reflect": false,
-        "defaultValue": "true"
+        "defaultValue": "false"
       },
       "disableAutoUpdateValue": {
         "type": "boolean",
@@ -227,9 +238,101 @@ export class EzChip {
         "attribute": "disable-auto-update-value",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "maxWidth": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho m\u00E1ximo do chip."
+        },
+        "attribute": "max-width",
+        "reflect": false
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'medium' | 'large'",
+          "resolved": "\"default\" | \"large\" | \"medium\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho do chip."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "iconNameLeft": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o icone esquerdo."
+        },
+        "attribute": "icon-name-left",
+        "reflect": false
+      },
+      "iconNameRight": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o icone direito."
+        },
+        "attribute": "icon-name-right",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tipo de estiliza\u00E7\u00E3o do chip."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'primary'"
       }
     };
   }
+  static get states() {
+    return {
+      "_isOverflowing": {}
+    };
+  }
   static get events() {
     return [{
         "method": "valueChange",
@@ -276,6 +379,21 @@ export class EzChip {
           "resolved": "void",
           "references": {}
         }
+      }, {
+        "method": "iconClick",
+        "name": "iconClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o icone \u00E9 acionado."
+        },
+        "complexType": {
+          "original": "{ icon: \"left\" | \"right\" }",
+          "resolved": "{ icon: \"left\" | \"right\"; }",
+          "references": {}
+        }
       }];
   }
   static get methods() {
@@ -315,17 +433,4 @@ export class EzChip {
     };
   }
   static get elementRef() { return "_element"; }
-  static get watchers() {
-    return [{
-        "propName": "value",
-        "methodName": "observeValue"
-      }, {
-        "propName": "enabled",
-        "methodName": "observeEnabled"
-      }];
-  }
 }
-var ChipSize;
-(function (ChipSize) {
-  ChipSize[ChipSize["CHAR_LIMIT"] = 28] = "CHAR_LIMIT";
-})(ChipSize || (ChipSize = {}));

package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.css

@@ -48,6 +48,7 @@ ez-icon {
   display: flex;
   flex-direction: column;
   width: 100%;
+  overflow: hidden;
 }
 
 

package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { ElementIDUtils } from "@sankhyalabs/core";
 import { ApplicationUtils } from "../../utils";
+import initI18n from '../../utils/i18n';
 export class EzCollapsibleBox {
   constructor() {
     this._activeEditText = false;
@@ -58,14 +59,13 @@ export class EzCollapsibleBox {
     this._activeEditText = true;
     this.ezEditLabelMode.emit(this._activeEditText);
   }
-  confirmRemove(evt) {
+  async confirmRemove(evt) {
     evt.stopPropagation();
-    ApplicationUtils.confirm("Aviso", `Deseja realmente remover o grupo <b>${this.label}</b>?`)
-      .then((canRemove) => {
-      if (canRemove) {
-        this.removeElement();
-      }
-    });
+    const confirmMessage = this.i18n("ez-collapsible-box.confirmRemove", { label: this.label });
+    const canRemove = await ApplicationUtils.confirm(this.i18n("app.warning"), confirmMessage);
+    if (canRemove) {
+      this.removeElement();
+    }
   }
   saveEditionText(editDetails) {
     const { value, newValue } = editDetails.detail;
@@ -95,6 +95,9 @@ export class EzCollapsibleBox {
     };
     return styledLabel;
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidLoad() {
     ElementIDUtils.addIDInfo(this._hostElement);
   }
@@ -103,8 +106,8 @@ export class EzCollapsibleBox {
         (this.iconPlacement === "right" ? " collapsible-box__title--icon-right" : "") +
         (this.value ? " collapsible-box__title--no-margin" : "") }), h("ez-icon", { slot: "icon", "icon-name": "chevron-right", size: this.getHeaderSize(), class: "collapsible-box__icon collapsible-box__icon--" + this.getHeaderSize() + (this.value ? " collapsible-box__icon--collapsed" : ""), id: "toggleCollapsible" }), !this._activeEditText ?
       h("label", { class: "collapsible-box__label font--" + this.getHeaderSize(), title: this.label, ref: elem => this._refLabel = elem }, h("span", null, this.label), this.editable &&
-        h("ez-icon", { slot: "icon", "icon-name": "edit", onClick: (evt) => this.editLabel(evt), title: "Editar" }), this.removable &&
-        h("ez-icon", { slot: "icon", "icon-name": "delete", onClick: (evt) => this.confirmRemove(evt), title: "Remover" })) :
+        h("ez-icon", { slot: "icon", "icon-name": "edit", onClick: (evt) => this.editLabel(evt), title: this.i18n("app.edit") }), this.removable &&
+        h("ez-icon", { slot: "icon", "icon-name": "delete", onClick: (evt) => this.confirmRemove(evt), title: this.i18n("app.remove") })) :
       h("ez-text-edit", { class: "collapsible-box__text-edit", ref: ref => this._refTextEdit = ref, value: this.label, styled: this.getStyledLabel(), onSaveEdition: (ev) => this.saveEditionText(ev), onCancelEdition: () => this.cancelEdition() })), h("slot", { name: "rightSlot" })), h("div", { class: "collapsible-box__content" + (this.value ? "" : " collapsible-box__content--show") }, this.subtitle &&
       h("div", { class: "subtitle-box__content" }, h("label", { class: "subtitle-box__label", title: this.subtitle }, h("span", null, this.subtitle))), h("slot", null))));
   }

package/dist/collection/components/ez-combo-box/ez-combo-box-list/ez-combo-box-list.js

@@ -1,10 +1,11 @@
 import { h } from "@stencil/core";
 import { ElementIDUtils } from "@sankhyalabs/core";
+import initI18n from '../../../utils/i18n';
 export class EzComboBoxList {
   constructor() {
     this.showLoading = undefined;
     this.visibleOptions = undefined;
-    this.textEmptyList = "Nenhum resultado encontrado";
+    this.textEmptyList = undefined;
     this.showOptionValue = undefined;
     this.preSelection = undefined;
     this.maxWidth = undefined;
@@ -126,6 +127,9 @@ export class EzComboBoxList {
       });
     }
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidLoad() {
     this._listWrapper.style.width = `${this.width}px`;
     this._listWrapper.style.maxWidth = this.maxWidth ? `${this.maxWidth}px` : '';
@@ -137,7 +141,7 @@ export class EzComboBoxList {
     });
   }
   render() {
-    return (h("section", { class: "list-container" }, h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, 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: "message" }, h("div", { class: "message__loading" }))), this.showOptionValue && (h("span", { class: "item__value item__value--hidden" })), !this.showLoading && this.visibleOptions.length > 0 &&
+    return (h("section", { class: "list-container" }, h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, 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.i18n("ez-combo-box.noResults")))), this.showLoading && (h("div", { class: "message" }, h("div", { class: "message__loading" }))), this.showOptionValue && (h("span", { class: "item__value item__value--hidden" })), !this.showLoading && this.visibleOptions.length > 0 &&
       this.visibleOptions.map((opt, index) => this.buildItem(opt, index))))));
   }
   static get is() { return "ez-combo-box-list"; }
@@ -221,8 +225,7 @@ export class EzComboBoxList {
           "text": "Mensagem exibida quando a lista de op\u00E7\u00F5es est\u00E1 vazia."
         },
         "attribute": "text-empty-list",
-        "reflect": false,
-        "defaultValue": "\"Nenhum resultado encontrado\""
+        "reflect": false
       },
       "showOptionValue": {
         "type": "boolean",

package/dist/collection/components/ez-combo-box/ez-combo-box.js

@@ -1,13 +1,13 @@
 import { ElementIDUtils, ObjectUtils } from "@sankhyalabs/core";
 import { h, Host } from "@stencil/core";
 import { CSSVarsUtils } from "../../utils";
+import initI18n from '../../utils/i18n';
 export class EzComboBox {
   constructor() {
     this._changeDeboucingTimeout = null;
     this._deboucingTime = 300;
     this._maxWidthValue = 0;
     this._tabPressed = false;
-    this._textEmptyList = "Nenhum resultado encontrado";
     this._lookupMode = false;
     this.isOpen = false;
     this._preSelection = undefined;
@@ -33,8 +33,9 @@ export class EzComboBox {
     this.listOptionsPosition = undefined;
     this.isTextSearch = false;
     this.autoFocus = false;
+    this.preventAutoFocus = false;
     this.alternativePlaceholder = undefined;
-    this.textEmptyOption = "Selecione um item";
+    this.textEmptyOption = undefined;
   }
   observeErrorMessage() {
     var _a;
@@ -159,7 +160,7 @@ export class EzComboBox {
       opts = opts.filter(opt => opt.label.toLocaleUpperCase().indexOf(upperCriteria) > -1);
     }
     if (this.hasToAddEmptyoption(opts)) {
-      opts = [{ value: undefined, label: this.textEmptyOption }].concat(opts);
+      opts = [{ value: undefined, label: this.textEmptyOption || this.i18n("ez-combo-box.placeholder") }].concat(opts);
     }
     this._visibleOptions = opts;
     this._maxWidthValue = this.getMaxWidthValue();
@@ -204,7 +205,8 @@ export class EzComboBox {
     this._preSelection = indexValue === -1 ? 0 : indexValue;
     if (!!this._resizeObserver)
       this._resizeObserver.observe(this._textInput);
-    await this.setFocus();
+    if (!this.preventAutoFocus)
+      await this.setFocus();
   }
   hideOptions() {
     var _a;
@@ -302,7 +304,8 @@ export class EzComboBox {
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
-  componentWillLoad() {
+  async componentWillLoad() {
+    this.i18n = await initI18n();
     if (this.options === undefined) {
       this.options = [];
       const optionsTags = this.el.querySelectorAll("option");
@@ -454,7 +457,7 @@ export class EzComboBox {
   render() {
     var _a;
     ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
-    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: `text-input-slot-container ${this.suppressSearch ? "suppressed-search-input" : ""}`, ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), 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: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: "chevron-down" }))), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this._textInput, autoClose: true, boxWidth: 'fit-content', overlayType: 'none', onEzVisibilityChange: event => this.isOpen = event.detail, "data-element-id": this.el.getAttribute("data-element-id") }, h("ez-combo-box-list", { ref: ref => this._comboBoxList = ref, showLoading: this._showLoading, visibleOptions: this._visibleOptions, textEmptyList: this._textEmptyList, showOptionValue: this.showOptionValue, preSelection: this._preSelection, maxWidth: this._maxWidthValue, width: (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.clientWidth, onOptionSelect: (opt) => this.selectOption(opt), onOptionHover: (index) => this._preSelection = index }))));
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: `text-input-slot-container ${this.suppressSearch ? "suppressed-search-input" : ""}`, ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode, alternativePlaceholder: this.alternativePlaceholder || this.i18n("ez-combo-box.placeholder") }, h("button", { class: "btn", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: "chevron-down" }))), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this._textInput, autoClose: true, boxWidth: 'fit-content', overlayType: 'none', onEzVisibilityChange: event => this.isOpen = event.detail, "data-element-id": this.el.getAttribute("data-element-id") }, h("ez-combo-box-list", { ref: ref => this._comboBoxList = ref, showLoading: this._showLoading, visibleOptions: this._visibleOptions, textEmptyList: this.i18n("ez-combo-box.noResults"), showOptionValue: this.showOptionValue, preSelection: this._preSelection, maxWidth: this._maxWidthValue, width: (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.clientWidth, onOptionSelect: (opt) => this.selectOption(opt), onOptionHover: (index) => this._preSelection = index }))));
   }
   static get is() { return "ez-combo-box"; }
   static get encapsulation() { return "shadow"; }
@@ -810,6 +813,24 @@ export class EzComboBox {
         "reflect": false,
         "defaultValue": "false"
       },
+      "preventAutoFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true, impede que o campo de texto receba foco automaticamente ao abrir as op\u00E7\u00F5es."
+        },
+        "attribute": "prevent-auto-focus",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "alternativePlaceholder": {
         "type": "string",
         "mutable": false,
@@ -842,8 +863,7 @@ export class EzComboBox {
           "text": "Texto a ser apresentado na op\u00E7\u00E3o de valor nulo."
         },
         "attribute": "text-empty-option",
-        "reflect": false,
-        "defaultValue": "\"Selecione um item\""
+        "reflect": false
       }
     };
   }

package/dist/collection/components/ez-date-input/ez-date-input.js

@@ -1,6 +1,7 @@
 import { Host, h } from '@stencil/core';
 import { DateUtils, ElementIDUtils } from '@sankhyalabs/core';
 import CSSVarsUtils from '../../utils/CSSVarsUtils';
+import initI18n from '../../utils/i18n';
 export class EzDateInput {
   constructor() {
     this._changePending = false;
@@ -117,7 +118,7 @@ export class EzDateInput {
       else {
         this.changeValue(undefined);
         this.ezCancelWaitingChange.emit();
-        this.errorMessage = "O valor digitado não é uma data válida";
+        this.errorMessage = this.i18n("ez-date-input.invalidDate");
       }
     }
     finally {
@@ -153,6 +154,9 @@ export class EzDateInput {
   disconnectedCallback() {
     this._popover.hide();
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();

package/dist/collection/components/ez-date-time-input/ez-date-time-input.js

@@ -1,6 +1,7 @@
 import { Host, h } from '@stencil/core';
 import { DateUtils, ElementIDUtils, TimeFormatter } from '@sankhyalabs/core';
 import CSSVarsUtils from '../../utils/CSSVarsUtils';
+import initI18n from '../../utils/i18n';
 export class EzDateTimeInput {
   constructor() {
     this._changePending = false;
@@ -166,7 +167,7 @@ export class EzDateTimeInput {
       else {
         this.changeValue(undefined);
         this.ezCancelWaitingChange.emit();
-        this.errorMessage = "O valor digitado não é uma data válida";
+        this.errorMessage = this.i18n("ez-date-time-input.invalidDate");
       }
     }
     finally {
@@ -204,6 +205,9 @@ export class EzDateTimeInput {
   disconnectedCallback() {
     this._popover.hide();
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();

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

@@ -2,6 +2,7 @@ import { h, forceUpdate, } from '@stencil/core';
 import { DialogType } from "./DialogType";
 import { ElementIDUtils, FloatingManager, KeyboardManager } from "@sankhyalabs/core";
 import FocusResolver from '../../utils/FocusResolver';
+import initI18n from '../../utils/i18n';
 class Message {
   constructor(title, message, dialogType, confirm, icon, labelCancel, labelConfirm, btnConfirmDanger, callBack, beforeClose) {
     this.title = title;
@@ -19,8 +20,6 @@ class Message {
 export class EzDialog {
   constructor() {
     this.PRIMARY_BUTTON_ID = "EZ_DIALOG_PRIMARY_BUTTON";
-    this.labelConfirm = 'Sim';
-    this.labelCancel = 'Não';
     this.btnConfirmDanger = false;
     this._messageQueue = [];
     this._canFocusOnPrimaryBtn = false;
@@ -137,6 +136,9 @@ export class EzDialog {
   getClassTitleLabel(message) {
     return this.getIconElement(message) == undefined ? "title title__label title__label--no-icon" : "title title__label";
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentWillRender() {
     if (!this._currentMessage) {
       if (this._messageQueue.length > 0) {
@@ -144,7 +146,7 @@ export class EzDialog {
       }
       else {
         if (this.opened) {
-          this._currentMessage = new Message(this.ezTitle, this.message, this.dialogType, this.confirm, this.personalizedIconPath, this.labelCancel, this.labelConfirm, this.btnConfirmDanger, null, this.beforeClose);
+          this._currentMessage = new Message(this.ezTitle, this.message, this.dialogType, this.confirm, this.personalizedIconPath, this.i18n("app.no"), this.i18n("app.yes"), this.btnConfirmDanger, null, this.beforeClose);
         }
       }
     }
@@ -152,9 +154,9 @@ export class EzDialog {
   componentDidLoad() {
     ElementIDUtils.addIDInfo(this._element);
     this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element })
-      .bind("Enter", () => this.handleButtonClick(true), { description: "Botão de confirmação ou OK", element: this._element })
-      .bind("Escape", () => this.handleButtonClick(false), { description: "Botão de fechar ou x", element: this._element })
-      .bind("Esc", () => this.handleButtonClick(false), { description: "Botão de fechar ou x", element: this._element });
+      .bind("Enter", () => this.handleButtonClick(true), { description: this.i18n("ez-dialog.confirmButton"), element: this._element })
+      .bind("Escape", () => this.handleButtonClick(false), { description: this.i18n("ez-dialog.closeButton"), element: this._element })
+      .bind("Esc", () => this.handleButtonClick(false), { description: this.i18n("ez-dialog.closeButton"), element: this._element });
   }
   componentDidRender() {
     this.manageOverlay();

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

@@ -2,6 +2,7 @@ import { h, Host } from '@stencil/core';
 import { moveItems, transferAll, transferItems } from './doubleListHelper';
 import { ObjectUtils } from '@sankhyalabs/core';
 import { isContinuousSequence } from '../ez-list/ezListHelper';
+import initI18n from '../../utils/i18n';
 export class EzDoubleList {
   constructor() {
     this.LEFT_LIST_ID = 'LEFT-LIST-ID';
@@ -38,6 +39,9 @@ export class EzDoubleList {
       return;
     this.ezRightListChanged.emit(newValue);
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   async handleChangeLeft({ detail }) {
     if (!detail.to.getAttribute('id') || detail.to.getAttribute('id') !== this.RIGHT_LIST_ID) {
       this.leftList = [...this.reorderArray(detail.dataSource, detail.selectItens, detail.newIndex)];
@@ -214,7 +218,9 @@ export class EzDoubleList {
         title: this.leftTitle,
         isFiltering: this.isFilteringLeft,
         filteredList: this.leftFilteredList,
-        emptyMessage: !!((_a = this.emptyMessage) === null || _a === void 0 ? void 0 : _a.LEFT_LIST) ? this.emptyMessage.LEFT_LIST : `Nenhum ${this.entityLabel} disponível`,
+        emptyMessage: !!((_a = this.emptyMessage) === null || _a === void 0 ? void 0 : _a.LEFT_LIST)
+          ? this.emptyMessage.LEFT_LIST
+          : this.i18n("ez-double-list.noItemsAvailable", { entity: this.entityLabel }),
         slotConfig: {
           itemRightSlotBuilder: (_c = (_b = this.slotsListBuilder) === null || _b === void 0 ? void 0 : _b.LEFT_LIST) === null || _c === void 0 ? void 0 : _c.itemRightSlotBuilder,
           itemLeftSlotBuilder: (_e = (_d = this.slotsListBuilder) === null || _d === void 0 ? void 0 : _d.LEFT_LIST) === null || _e === void 0 ? void 0 : _e.itemLeftSlotBuilder,
@@ -227,13 +233,15 @@ export class EzDoubleList {
           onChoose: this.handleChooseLeft.bind(this),
         },
       })), !this.useOnlyRightList &&
-      h("div", { class: 'actions__column' }, h("ez-button", { mode: "icon", iconName: "dual-chevron-right", enabled: this.enableTransferAllToRight(), title: `Mover todos para ${this.rightListLabel}`, size: "small", onClick: this.handleTransferAllToRight.bind(this) }), h("ez-button", { mode: "icon", iconName: "chevron-right", enabled: this.enableTransferToRight(), title: `Mover para ${this.rightListLabel}`, size: "small", onClick: this.handleTransferToRight.bind(this) }), h("ez-button", { mode: "icon", iconName: "chevron-left", enabled: this.enableTransferToLeft(), title: `Mover para ${this.leftListLabel}`, size: "small", onClick: this.handleTransferToLeft.bind(this) }), h("ez-button", { mode: "icon", iconName: "dual-chevron-left", enabled: this.enableTransferAllToLeft(), title: `Mover todos para ${this.leftListLabel}`, size: "small", onClick: this.handleTransferAllToLeft.bind(this) })), h("div", { class: "list__container" }, this.rightList && this.renderList({
+      h("div", { class: 'actions__column' }, h("ez-button", { mode: "icon", iconName: "dual-chevron-right", enabled: this.enableTransferAllToRight(), title: this.i18n("ez-double-list.moveAllTo", { list: this.rightListLabel }), size: "small", onClick: this.handleTransferAllToRight.bind(this) }), h("ez-button", { mode: "icon", iconName: "chevron-right", enabled: this.enableTransferToRight(), title: this.i18n("ez-double-list.moveTo", { list: this.rightListLabel }), size: "small", onClick: this.handleTransferToRight.bind(this) }), h("ez-button", { mode: "icon", iconName: "chevron-left", enabled: this.enableTransferToLeft(), title: this.i18n("ez-double-list.moveTo", { list: this.leftListLabel }), size: "small", onClick: this.handleTransferToLeft.bind(this) }), h("ez-button", { mode: "icon", iconName: "dual-chevron-left", enabled: this.enableTransferAllToLeft(), title: this.i18n("ez-double-list.moveAllTo", { list: this.leftListLabel }), size: "small", onClick: this.handleTransferAllToLeft.bind(this) })), h("div", { class: "list__container" }, this.rightList && this.renderList({
       idSortableList: this.RIGHT_LIST_ID,
       list: this.rightList,
       title: this.rightTitle,
       isFiltering: this.isFilteringRight,
       filteredList: this.rightFilteredList,
-      emptyMessage: !!((_f = this.emptyMessage) === null || _f === void 0 ? void 0 : _f.RIGHT_LIST) ? this.emptyMessage.RIGHT_LIST : `Nenhum ${this.entityLabel} selecionado`,
+      emptyMessage: !!((_f = this.emptyMessage) === null || _f === void 0 ? void 0 : _f.RIGHT_LIST)
+        ? this.emptyMessage.RIGHT_LIST
+        : this.i18n("ez-double-list.noItemsSelected", { entity: this.entityLabel }),
       slotConfig: {
         itemRightSlotBuilder: (_h = (_g = this.slotsListBuilder) === null || _g === void 0 ? void 0 : _g.RIGHT_LIST) === null || _h === void 0 ? void 0 : _h.itemRightSlotBuilder,
         itemLeftSlotBuilder: (_k = (_j = this.slotsListBuilder) === null || _j === void 0 ? void 0 : _j.RIGHT_LIST) === null || _k === void 0 ? void 0 : _k.itemLeftSlotBuilder,
@@ -245,7 +253,7 @@ export class EzDoubleList {
         onDoubleClick: this.handleTransferToLeft.bind(this),
         onChoose: this.handleChooseRight.bind(this),
       },
-    })), h("div", { class: 'actions__column' }, h("ez-button", { mode: "icon", iconName: "dual-chevron-up", enabled: this.enableMoveUp(true), title: "Mover para primeira posi\u00E7\u00E3o", size: "small", onClick: this.handleMoveToTop.bind(this) }), h("ez-button", { mode: "icon", iconName: "chevron-up", enabled: this.enableMoveUp(), title: "Mover para cima", size: "small", onClick: this.handleMoveUp.bind(this) }), h("ez-button", { mode: "icon", iconName: "chevron-down", enabled: this.enableMoveDown(), title: "Mover para baixo", size: "small", onClick: this.handleMoveDown.bind(this) }), h("ez-button", { mode: "icon", iconName: "dual-chevron-down", enabled: this.enableMoveDown(true), title: "Mover para \u00FAltima posi\u00E7\u00E3o", size: "small", onClick: this.handleMoveToBottom.bind(this) }))));
+    })), h("div", { class: 'actions__column' }, h("ez-button", { mode: "icon", iconName: "dual-chevron-up", enabled: this.enableMoveUp(true), title: this.i18n("ez-double-list.moveToFirstPosition"), size: "small", onClick: this.handleMoveToTop.bind(this) }), h("ez-button", { mode: "icon", iconName: "chevron-up", enabled: this.enableMoveUp(), title: this.i18n("ez-double-list.moveUp"), size: "small", onClick: this.handleMoveUp.bind(this) }), h("ez-button", { mode: "icon", iconName: "chevron-down", enabled: this.enableMoveDown(), title: this.i18n("ez-double-list.moveDown"), size: "small", onClick: this.handleMoveDown.bind(this) }), h("ez-button", { mode: "icon", iconName: "dual-chevron-down", enabled: this.enableMoveDown(true), title: this.i18n("ez-double-list.moveToLastPosition"), size: "small", onClick: this.handleMoveToBottom.bind(this) }))));
   }
   static get is() { return "ez-double-list"; }
   static get encapsulation() { return "scoped"; }