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

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

@@ -10,7 +10,7 @@ export class EzTextArea {
     this.errorMessage = undefined;
     this.rows = 4;
     this.canShowError = true;
-    this.mode = "regular";
+    this.mode = 'regular';
     this.enableResize = true;
     this.autoRows = false;
     this.autoFocus = false;
@@ -33,10 +33,10 @@ export class EzTextArea {
     if (this._inputElem) {
       if (newValue != oldValue) {
         if (this.canChangeValue()) {
-          this._inputElem.value = this.value || "";
+          this._inputElem.value = this.value || '';
         }
         this.adjustFloatingLabel();
-        this.errorMessage = "";
+        this.errorMessage = '';
         this.ezChange.emit(this.value);
       }
     }
@@ -45,13 +45,13 @@ export class EzTextArea {
     if (this._initialRows == undefined) {
       this._initialRows = this.rows > 0 ? this.rows : undefined;
     }
-    const rows = this._initialRows > 0 ? this._initialRows : this.mode != "slim" ? 4 : 2;
+    const rows = this._initialRows > 0 ? this._initialRows : this.mode != 'slim' ? 4 : 2;
     if (rows !== this.rows) {
       this.rows = rows;
     }
   }
   observeRows() {
-    const rows = this.rows > 0 ? this.rows : this.mode != "slim" ? 4 : 2;
+    const rows = this.rows > 0 ? this.rows : this.mode != 'slim' ? 4 : 2;
     if (rows !== this.rows) {
       this.updateRows(rows);
     }
@@ -84,8 +84,8 @@ export class EzTextArea {
     var _a, _b, _c, _d;
     const selectionStart = this._inputElem.selectionStart;
     const selectionEnd = this._inputElem.selectionEnd;
-    const textStart = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.substring(0, selectionStart)) !== null && _b !== void 0 ? _b : "";
-    const textEnd = (_d = (_c = this.value) === null || _c === void 0 ? void 0 : _c.substring(selectionEnd)) !== null && _d !== void 0 ? _d : "";
+    const textStart = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.substring(0, selectionStart)) !== null && _b !== void 0 ? _b : '';
+    const textEnd = (_d = (_c = this.value) === null || _c === void 0 ? void 0 : _c.substring(selectionEnd)) !== null && _d !== void 0 ? _d : '';
     this.value = `${textStart}${text}${textEnd}`;
     const newSelectionEnd = selectionStart + text.length;
     const start = (selectionStart === selectionEnd) ? newSelectionEnd : selectionStart;
@@ -108,28 +108,28 @@ export class EzTextArea {
    * Retorna se o conteúdo é inválido.
    */
   async isInvalid() {
-    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+    return typeof this.errorMessage === 'string' && this.errorMessage.trim() !== '';
   }
   //---------------------------------------------
   // Private methods
   //---------------------------------------------
   canChangeValue() {
-    return this._inputElem && (this.value || "") !== this._inputElem.value;
+    return this._inputElem && (this.value || '') !== this._inputElem.value;
   }
   adjustFloatingLabel() {
     if (this.forceLabelFloat)
       return;
     if (this.label && this._labelElem) {
       const hasValue = this.value && this.value.toString().length > 0;
-      const containsFloatedClass = this._labelElem.classList.contains("textarea__label--floated");
+      const containsFloatedClass = this._labelElem.classList.contains('textarea__label--floated');
       if (hasValue || this.isFocused()) {
         if (!containsFloatedClass) {
-          this._labelElem.classList.add("textarea__label--floated");
+          this._labelElem.classList.add('textarea__label--floated');
         }
       }
       else {
         if (containsFloatedClass) {
-          this._labelElem.classList.remove("textarea__label--floated");
+          this._labelElem.classList.remove('textarea__label--floated');
         }
       }
     }
@@ -178,8 +178,8 @@ export class EzTextArea {
   //---------------------------------------------
   handleFocusout() {
     this.adjustFloatingLabel();
-    if (this._container && this._container.classList.contains("textarea--focus")) {
-      this._container.classList.remove("textarea--focus");
+    if (this._container && this._container.classList.contains('textarea--focus')) {
+      this._container.classList.remove('textarea--focus');
     }
   }
   handleChange() {
@@ -188,11 +188,11 @@ export class EzTextArea {
     }
   }
   handleFocus() {
-    if (this.label && this._labelElem && !this._labelElem.classList.contains("textarea__label--floated")) {
-      this._labelElem.classList.add("textarea__label--floated");
+    if (this.label && this._labelElem && !this._labelElem.classList.contains('textarea__label--floated')) {
+      this._labelElem.classList.add('textarea__label--floated');
     }
-    if (this._container && !this._container.classList.contains("textarea--focus")) {
-      this._container.classList.add("textarea--focus");
+    if (this._container && !this._container.classList.contains('textarea--focus')) {
+      this._container.classList.add('textarea--focus');
     }
   }
   connectedCallback() {
@@ -205,7 +205,7 @@ export class EzTextArea {
   buildPlaceholder() {
     if (this.alternativePlaceholder)
       return this.alternativePlaceholder;
-    return (this.mode === "slim" && this.label) ? this.label : '';
+    return (this.mode === 'slim' && this.label) ? this.label : '';
   }
   buildLabelClass() {
     let classList = this.enabled ? 'textarea__label' : 'textarea__label textarea__label--disabled';
@@ -215,6 +215,19 @@ export class EzTextArea {
       classList = classList + ' textarea__label--floated';
     return classList;
   }
+  renderErrorTooltip() {
+    if (!this.canShowError || this.mode == 'slim' || !this.errorMessage)
+      return;
+    return (h("div", { class: "tooltip-container" }, h("ez-tooltip", { type: "error", message: this.errorMessage }, h("ez-icon", { class: `tooltip-icon ${this.errorMessage ? 'hasError' : ''}`, "data-element-id": ElementIDUtils.getInternalIDInfo('tooltip-icon'), iconName: "alert-circle" }))));
+  }
+  renderLabel() {
+    if (!this.label || this.mode == 'slim')
+      return null;
+    return h("label", { ref: (el) => this._labelElem = el, class: this.buildLabelClass(), onClick: () => this._inputElem.focus(), title: this.label }, this.label);
+  }
+  renderTextArea() {
+    return h("textarea", { onFocus: () => this.handleFocus(), "data-element-id": ElementIDUtils.getInternalIDInfo('input'), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: { 'textarea--slim': this.mode === 'slim' }, placeholder: this.buildPlaceholder(), onInput: () => this.handleChange(), onFocusout: () => this.handleFocusout(), rows: this.rows });
+  }
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
@@ -230,13 +243,7 @@ export class EzTextArea {
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
-    return (h(Host, null, h("div", { class: `textarea ${this.enabled ? "" : "textarea--disabled"}`, ref: (el) => this._container = el }, this.label && this.mode != "slim" ?
-      h("label", { ref: (el) => this._labelElem = el, class: this.buildLabelClass(), onClick: () => this._inputElem.focus(), title: this.label }, this.label)
-      : null, h("textarea", { onFocus: () => this.handleFocus(), "data-element-id": ElementIDUtils.getInternalIDInfo("input"), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: {
-        "textarea--slim": this.mode === "slim",
-        "textarea--resizable": this.enableResize
-      }, placeholder: this.buildPlaceholder(), onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, rows: this.rows })), this.canShowError && this.mode != "slim" &&
-      h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
+    return (h(Host, null, h("div", { class: `textarea ${this.enabled ? '' : 'textarea--disabled'}`, ref: (el) => this._container = el }, this.renderLabel(), h("div", { class: `input-container ${this.enableResize ? 'textarea--resizable' : ""}` }, this.renderTextArea(), this.renderErrorTooltip()))));
   }
   static get is() { return "ez-text-area"; }
   static get encapsulation() { return "shadow"; }
@@ -361,7 +368,7 @@ export class EzTextArea {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"slim\" | \"regular\"",
+          "original": "'slim' | 'regular'",
           "resolved": "\"regular\" | \"slim\"",
           "references": {}
         },
@@ -373,7 +380,7 @@ export class EzTextArea {
         },
         "attribute": "mode",
         "reflect": true,
-        "defaultValue": "\"regular\""
+        "defaultValue": "'regular'"
       },
       "enableResize": {
         "type": "boolean",

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

@@ -1,6 +1,7 @@
 import { Host, h } from '@stencil/core';
 import { ElementIDUtils } from '@sankhyalabs/core';
 import { ApplicationUtils } from "../../utils";
+import initI18n from '../../utils/i18n';
 export class EzTextEdit {
   constructor() {
     this._newValue = undefined;
@@ -63,7 +64,7 @@ export class EzTextEdit {
   }
   handleSaveEdition() {
     if (!this._newValue) {
-      ApplicationUtils.alert("Aviso", "Não é possível salvar um campo em branco.").then(() => {
+      ApplicationUtils.alert(this.i18n("app.warning"), this.i18n("ez-text-edit.emptyFieldWarning")).then(() => {
         this.setNewValue(this.value, true);
       });
       return;
@@ -77,6 +78,9 @@ export class EzTextEdit {
     this._newValue = value;
     this.calcSizeInput(this._newValue, setSelect);
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidLoad() {
     this.applyFocusSelect();
     this.setNewValue(this.value);

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

@@ -172,7 +172,7 @@ export class EzTextInput {
   }
   controlChangeValue() {
     if (this._inputElem && (this.value || '') !== this._inputElem.value) {
-      if (this.cleanValueMask) {
+      if (this.cleanValueMask && this._maskFormatter) {
         this.value = this._maskFormatter.removeMask(this._inputElem.value);
       }
       else {
@@ -287,6 +287,7 @@ export class EzTextInput {
   //---------------------------------------------
   componentWillLoad() {
     this.observeMask();
+    this.forceLabelFloat = !!this.alternativePlaceholder;
     if (this.value) {
       if (this._maskFormatter) {
         try {

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

@@ -0,0 +1,151 @@
+:host {
+
+  /* dimensions */
+  /*@doc Define a largura do componente.*/
+  --ez-tile--width: 120px;
+  /*@doc Define a altura do componente.*/
+  --ez-tile--height: 80px;
+  /*@doc Define a margem do componente.*/
+  --ez-tile--padding: var(--space--12, 12px);
+  /*@doc Define o espaçamento entre o ícone e o title.*/
+  --ez-tile--icon--margin-bottom: var(--space--8);
+  /*@doc Define o raio da borda do componente.*/
+  --ez-tile--border-radius: var(--border--radius-16, 16px);
+
+  /*general colors*/
+  /*@doc Define a cor de fundo do componente.*/
+  --ez-tile--background-color: var(--color--gray-70, #ffffff);
+  /*@doc Define a cor do title.*/
+  --ez-tile--color: var(--color--ocean-green-900, #003D2D);
+  /*@doc Define a cor do ícone.*/
+  --ez-tile--icon-color: var(--color--ocean-green-400, #42A58A);
+
+  /*action colors*/
+  /*@doc Define a cor de fundo do componente no hover.*/
+  --ez-tile--hover-background-color: var(--color--gray-80, #F9F9F9);
+  /*@doc Define a cor do title no hover.*/
+  --ez-tile--hover-color: var(--color--ocean-green-900, #003D2D);
+  /*@doc Define a cor do ícone no hover.*/
+  --ez-tile--hover-icon-color: var(--color--ocean-green-400, #42A58A);
+  /*@doc Define a cor do ícone no hover.*/
+  --ez-tile--focus-visible-border: 2px solid var(--color--petroleum-400, #626D80);
+
+  /*typography*/
+  /*@doc Define a família da fonte do title.*/
+  --ez-tile--font-family: var(--font-pattern, Arial);
+  /*@doc Define o peso da fonte do title.*/
+  --ez-tile--font-weight: var(--font-weight--regular, 400);
+  /*@doc Define o tamanho do title.*/
+  --ez-tile--font-size: var(--font-size--default, 14px);
+  /*@doc Define a altura da linha do title.*/
+  --ez-tile--title-line-height: var(--line-height--20, 20px);
+  /*@doc Define a altura da linha do ícone.*/
+  --ez-tile--icon-line-height: var(--line-height--24, 24px);
+}
+
+
+
+button {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: space-between;
+  overflow: hidden;
+  outline: none;
+  box-shadow: none;
+  width: var(--ez-tile--custom-width, var(--ez-tile--width));
+  height: var(--ez-tile--custom-height, var(--ez-tile--height));
+  border-radius: var(--ez-tile--border-radius);
+  background-color: var(--ez-tile--background-color);
+  color: var(--ez-tile--color);
+
+  box-sizing: border-box;
+  padding: var(--ez-tile--padding);
+  border: 2px solid var(--ez-tile--background-color);
+}
+button:focus-visible {
+  border: var(--ez-tile--focus-visible-border);
+}
+
+.medium {
+  --ez-tile--width: var(--ez-tile--custom-width, 120px);
+  --ez-tile--height: var(--ez-tile--custom-height, 170px);
+}
+
+.isInteractive:hover,
+.isInteractive:focus {
+  --ez-icon--color: var(--ez-tile--hover-icon-color);
+  --ez-tile--background-color: var(--ez-tile--hover-background-color);
+  --ez-tile--color: var(--ez-tile--hover-color);
+  cursor: pointer;
+}
+
+
+span {
+  /*public*/
+  -webkit-line-clamp: var(--ez-tile--custom-maximum-lines, 1);
+  line-clamp: var(--ez-tile--custom-maximum-lines,1);
+  font-family: var(--ez-tile--font-family);
+  font-weight: var(--ez-tile--font-weight);
+  font-size: var(--ez-tile--font-size);
+  line-height: var(--ez-tile--title-line-height);
+
+  /*private*/
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+  white-space: pre-wrap;
+}
+
+ez-icon {
+  --ez-icon--color: var(--ez-tile--icon-color);
+  margin-bottom: var(--ez-tile--icon--margin-bottom);
+  line-height: var(--ez-tile--icon-line-height);
+}
+.isInteractive:hover,
+.isInteractive:focus {
+  outline: none;
+}
+
+.green{
+  --ez-tile--background-color: var(--color--ocean-green-90);
+  --ez-tile--icon-color: var(--color--ocean-green-500);
+}
+.isInteractive.green:hover,
+.isInteractive.green:focus {
+  --ez-tile--hover-background-color: var(--color--ocean-green-100);
+  --ez-tile--icon-color: var(--color--ocean-green-500);
+  outline: none;
+}
+
+.gray{
+  --ez-tile--background-color: var(--color--gray-80);
+  --ez-tile--icon-color: var(--color--ocean-green-400);
+}
+.isInteractive.gray:hover,
+.isInteractive.gray:focus {
+  --ez-tile--hover-background-color: var(--color--gray-90);
+  --ez-tile--hover-icon-color: var(--color--ocean-green-400);
+}
+
+.red{
+  --ez-tile--background-color: var(--color--red-100);
+  --ez-tile--icon-color: var(--color--red-300);
+} 
+.isInteractive.red:hover,
+.isInteractive.red:focus {
+  --ez-tile--hover-background-color: var(--color--red-200);
+  --ez-tile--hover-icon-color: var(--color--red-300);
+}
+
+.yellow{
+  --ez-tile--background-color: var(--color--yellow-100);
+  --ez-tile--icon-color: var(--color--yellow-400);
+} 
+.isInteractive.yellow:hover,
+.isInteractive.yellow:focus {
+  --ez-tile--hover-background-color: var(--color--yellow-200);
+  --ez-tile--hover-icon-color: var(--color--yellow-400);
+}

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

@@ -0,0 +1,269 @@
+import { ElementIDUtils } from "@sankhyalabs/core";
+import { h, Host } from "@stencil/core";
+export class EzTile {
+  constructor() {
+    this.text = undefined;
+    this.size = "small";
+    this.height = undefined;
+    this.width = undefined;
+    this.color = "default";
+    this.iconName = "home";
+    this.maximumLines = undefined;
+    this.isInteractive = false;
+  }
+  /**
+   * Aplica o foco no componente.
+   */
+  async setFocus() {
+    this._container.focus();
+  }
+  /**
+   * Remove o foco do componente.
+   */
+  async setBlur() {
+    this._container.blur();
+  }
+  clickListener(evt) {
+    if (!this.isInteractive) {
+      evt.stopImmediatePropagation();
+    }
+  }
+  handleClick() {
+    if (this.isInteractive) {
+      this.tileClick.emit();
+    }
+  }
+  componentDidRender() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._container) {
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this._container, 'tile-button', dataInfo);
+    }
+  }
+  render() {
+    const customStyleVars = Object.assign(Object.assign(Object.assign({}, (this.height ? { '--ez-tile--custom-height': `${this.height}px` } : {})), (this.width ? { '--ez-tile--custom-width': `${this.width}px` } : {})), (this.maximumLines ? { '--ez-tile--custom-maximum-lines': `${this.maximumLines}` } : {}));
+    return (h(Host, { style: customStyleVars }, h("button", { ref: element => this._container = element, class: `${this.color} ${this.size} ${this.isInteractive ? "isInteractive" : ""}`, onClick: () => this.handleClick() }, h("ez-icon", { class: "icon", iconName: this.iconName, size: "large" }), h("span", { title: this.text }, this.text))));
+  }
+  static get is() { return "ez-tile"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-tile.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-tile.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "text": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto a ser apresentado como t\u00EDtulo do componente."
+        },
+        "attribute": "text",
+        "reflect": true
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"small\" | \"medium\"",
+          "resolved": "\"medium\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define qual o tamanho do componente.\n- `\"default\"`: 120x80px\n- `\"medium\"`: 120x170px"
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "\"small\""
+      },
+      "height": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho do componente, sobrescrevendo o padr\u00E3o da propriedade size."
+        },
+        "attribute": "height",
+        "reflect": true
+      },
+      "width": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define a largura do componente, sobrescrevendo o padr\u00E3o da propriedade size."
+        },
+        "attribute": "width",
+        "reflect": true
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"green\" | \"gray\" | \"red\" | \"yellow\"",
+          "resolved": "\"default\" | \"gray\" | \"green\" | \"red\" | \"yellow\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a cor tema do componente."
+        },
+        "attribute": "color",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
+      "iconName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o \u00EDcone a ser usado da biblioteca de \u00EDcones: [ez-icons](https://gilded-nasturtium-6b64dd.netlify.app/docs/components/layout-doc/icons/)"
+        },
+        "attribute": "icon-name",
+        "reflect": true,
+        "defaultValue": "\"home\""
+      },
+      "maximumLines": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define a quantidade m\u00E1xima de linhas de texto a serem apresentadas.\nQuando a propriedade n\u00E3o \u00E9 passada, limita a 1 linha."
+        },
+        "attribute": "maximum-lines",
+        "reflect": true
+      },
+      "isInteractive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o componente ser\u00E1 interativo. Caso contr\u00E1rio, ser\u00E1 est\u00E1tico. \nSe true, permite permite clique.\nSe false, n\u00E3o permite clique"
+        },
+        "attribute": "is-interactive",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tileClick",
+        "name": "tileClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o elemento principal \u00E9 clicado"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Aplica o foco no componente.",
+          "tags": []
+        }
+      },
+      "setBlur": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Remove o foco do componente.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "clickListener",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }];
+  }
+}

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

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { TimeFormatter, MaskFormatter, NumberUtils, ElementIDUtils } from "@sankhyalabs/core";
 import CSSVarsUtils from "../../utils/CSSVarsUtils";
+import initI18n from '../../utils/i18n';
 export class EzTimeInput {
   constructor() {
     this.label = undefined;
@@ -41,7 +42,7 @@ export class EzTimeInput {
         this._viewValue = newValueValidated == undefined ? "" : newValueValidated.toString();
         this.prepareValue(this._viewValue);
         if (this._viewValue && !TimeFormatter.validateTime(this._viewValue, this.showSeconds)) {
-          this.setError("Favor inserir um horário válido.");
+          this.setError(this.i18n("ez-time-input.invalidTime"));
           newValueValidated = undefined;
         }
         else {
@@ -130,15 +131,8 @@ export class EzTimeInput {
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
-  componentDidLoad() {
-    CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
-    if (this.autoFocus) {
-      requestAnimationFrame(() => {
-        this.setFocus({ selectText: true });
-      });
-    }
-  }
-  componentWillLoad() {
+  async componentWillLoad() {
+    this.i18n = await initI18n();
     this.observeShowSeconds();
     if (this.value) {
       this.prepareValue(this.value.toString());
@@ -147,6 +141,14 @@ export class EzTimeInput {
       this.prepareValue(this._viewValue);
     }
   }
+  componentDidLoad() {
+    CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
+  }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
     return (h(Host, null, h("ez-text-input", { class: "time__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: (el) => this._textInput = el, "data-slave-mode": "true", value: this._viewValue, enabled: this.enabled, label: this.label, restrict: "0123456789:", onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError, alternativePlaceholder: this.alternativePlaceholder }, h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));