@sankhyalabs/ezui 1.1.159 → 1.1.161

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

@@ -1,78 +1,102 @@
 :host {
-
   /* @doc Define a camada de visibilidae do componente. */
   --ez-list__host--z-index: var(--visible, 1);
+
   /* @doc Define o raio da borda do componente. */
   --ez-list__host--border-radius: var(--border--radius-medium, 12px);
+
   /* @doc Define o espaçamento entre a lista e o componente. */
   --ez-list__host--padding: var(--space--medium, 12px);
 
   /* @doc Define o espaçamento interno do ícone. */
-  --ez-list__icon__padding: var(--space--small, 6px);
+  --ez-list__icon--padding: var(--space--small, 6px);
+
   /* @doc Define a cor do ícone de arrasto do item da lista. */
   --ez-list__icon--color: #AFB6C0;
 
   /* @doc Define o espaçamento externo do item da lista. */
-  --ez-list__item__margin: 0 var(--space--small, 6px);
+  --ez-list__item--margin: 0 var(--space--small, 6px);
+
   /* @doc Define a cor do texto do item da lista. */
   --ez-list__item--color: var(--title--primary, #2b3a54);
+
   /* @doc Define o estilo borda inferior do item da lista. */
   --ez-list__item--border-bottom: var(--border--small, 1px solid);
+
   /* @doc Define a cor da borda inferior do item da lista. */
   --ez-list__item--border-color: var(--title--primary, #2b3a54);
+
   /* @doc Define o estilo do texto do item da lista. */
   --ez-list__item--font-family: var(--font-pattern, "Sora");
+
   /* @doc Define o tamanho do texto do item da lista. */
   --ez-list__item--font-size: var(--text--medium, 14px);
 
   /* @doc Define o espaçamento lateral direito para items selecionados. */
   --ez-list__selectable--padding-right: var(--space--small, 6px);
+  
   /* @doc Define o espaçamento lateral esquerdo para items selecionados. */
   --ez-list__selectable--padding-left: var(--space--small, 6px);
 
   /*@doc Define o raio da borda de items selecionados.*/
-  --ez-list__selected-item__border-radius: var(--border--radius-small, 6px);
+  --ez-list__selected-item--border-radius: var(--border--radius-small, 6px);
+  
   /*@doc Define a cor de fundo de items selecionados.*/
-  --ez-list__selected-item__background: var(--color--primary-300, #E2F4EF);
+  --ez-list__selected-item--background-color: var(--color--primary-300, #E2F4EF);
 
   /* @doc Define o estilo do texto do grupo da lista. */
   --ez-list__group--font-family: var(--font-pattern, "Sora");
+  
   /* @doc Define o tamanho do texto do grupo da lista. */
   --ez-list__group--font-size: var(--text--medium, 14px);
+  
   /* @doc Define o peso do texto do grupo da lista. */
   --ez-list__group--font-weight: var(--text-weight--large, 600);
+  
   /* @doc Define o espaçamento inferior do grupo da lista. */
   --ez-list__group--padding-bottom: var(--space-small, 6px);
 
   /* @doc Define o estilo do texto da área de transferência de grupos. */
-  --ez-list__group__overlay--font-family: var(--font-pattern, "Sora");
+  --ez-list__group-overlay--font-family: var(--font-pattern, "Sora");
+
   /* @doc Define o tamanho do texto da área de transferência de grupos. */
-  --ez-list__group__overlay--font-size: var(--text--medium, 14px);
+  --ez-list__group-overlay--font-size: var(--text--medium, 14px);
 
   /*@doc Define o raio da borda da barra de rolagem do container de grupos.*/
-  --ez-list__group-container__scrollbar--border-radius: var(--border--radius-large, 24px);
+  --ez-list__group-container-scrollbar--border-radius: var(--border--radius-small, 6px);
+  
   /*@doc Define a largura da barra de rolagem do container de grupos.*/
-  --ez-list__group-container__scrollbar--width: var(--space--medium, 12px);
+  --ez-list__group-container-scrollbar--width: var(--space--medium, 12px);
+  
   /*@doc Define a cor da barra de rolagem do container de grupos.*/
-  --ez-list__group-container__scrollbar--background-color: var(--text--primary, #626e82);
+  --ez-list__group-container-scrollbar--background-color-primary: var(--scrollbar--primary, #2B3A54);
+  
+  /*@doc Define a cor de fundo da barra de rolagem do container de grupos.*/
+  --ez-list__group-container-scrollbar--background-color-secondary: var(--scrollbar--secondary, #E5EAF0);
 
   /* @doc Define a cor da borda pontilhada sobre os elementos da lista. */
   --ez-list__over--border--color: var(--color--primary, #008561);
 
-  /*@doc Define o espaçamento do container de itens arrastáveis .*/
-  --ez-list__draggable__list--padding-bottom: var(--space--small, 6px);
-
   /*@doc Define a altura do container para arrasto para última posição .*/
   --ez-list__last-droppable-space--height: var(--space--small, 6px);
 
   /*@doc Define o raio da borda da barra de rolagem do componente.*/
-  --ez-list__draggable__scrollbar--border-radius: var(--border--radius-large, 24px);
+  --ez-list__draggable-scrollbar--border-radius: var(--border--radius-small, 6px);
+
   /*@doc Define a largura da barra de rolagem do componente.*/
-  --ez-list__draggable__scrollbar--width: var(--space--medium, 12px);
+  --ez-list__draggable-scrollbar--width: var(--space--medium, 12px);
+
   /*@doc Define a cor da barra de rolagem do componente.*/
-  --ez-list__draggable__scrollbar--background-color: var(--text--primary, #626e82);
+  --ez-list__draggable-scrollbar--background-color-primary: var(--scrollbar--primary, #2B3A54);
+
+  /*@doc Define a cor de fundo da barra de rolagem do componente.*/
+  --ez-list__draggable-scrollbar--background-color-secondary: var(--scrollbar--secondary, #E5EAF0);
+  
+  /*@doc Define o espaçamento do container de itens arrastáveis .*/
+  --ez-list__draggable-list--padding-bottom: var(--space--small, 6px);
+
   /* @doc Define a imagem do ícone de drag. */
-  --ez-list__draggable__icon--image: url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="m 6.75,2.25 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z"/></svg>');
+  --ez-list__draggable-icon--image: url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="m 6.75,2.25 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z"/></svg>');
 
   max-height: 100%;
   width: 100%;
@@ -94,6 +118,7 @@ p {
   font-family: var(--ez-list__item--font-family);
   font-size: var(--ez-list__item--font-size);
   flex: 1;
+  width: 100%;
 }
 
 .dragging {
@@ -118,8 +143,9 @@ p {
 
 .item-content {
   display: flex;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
+  width: calc(100% - 41px);
 }
 
 .draggable-list {
@@ -128,12 +154,16 @@ p {
   margin: 0;
   width: 100%;
   max-height: 100%;
+  scrollbar-width: thin;
+
+  /*public*/
+  scrollbar-color: var(--ez-list__draggable-scrollbar--background-color-primary) var(--ez-list__draggable-scrollbar--background-color-secondary);
 }
 
 .draggable-list li {
   background-color: #fff;
   display: flex;
-  margin: var(--ez-list__item__margin);
+  margin: var(--ez-list__item--margin);
   font-family: var(--ez-list__item--font-family);
   font-size: var(--ez-list__item--font-size);
   color: var(--ez-list__item--color);
@@ -159,19 +189,19 @@ p {
 
 /* Precisamos dos tokens do scrollbar */
 .draggable-list::-webkit-scrollbar-track {
-  background-color: #f0f2f5;
+  background-color: var(--ez-list__draggable-scrollbar--background-color-secondary);
 }
 
 .draggable-list::-webkit-scrollbar-thumb {
-  background-color: var(--ez-list__draggable__scrollbar--background-color);
-  border-radius: var(--ez-list__draggable__scrollbar--border-radius);
+  background-color: var(--ez-list__draggable-scrollbar--background-color-primary);
+  border-radius: var(--ez-list__draggable-scrollbar--border-radius);
 }
 
 .draggable-list::-webkit-scrollbar {
-  background-color: #f0f2f5;
-  width: var(--ez-list__draggable__scrollbar--width);
-  max-width: var(--ez-list__draggable__scrollbar--width);
-  min-width: var(--ez-list__draggable__scrollbar--width);
+  background-color: var(--ez-list__draggable-scrollbar--background-color-secondary);
+  width: var(--ez-list__draggable-scrollbar--width);
+  max-width: var(--ez-list__draggable-scrollbar--width);
+  min-width: var(--ez-list__draggable-scrollbar--width);
 }
 
 .draggable-icon {
@@ -188,8 +218,8 @@ p {
   background-color: var(--ez-list__icon--color);
   width: 18px;
   height: 18px;
-  -webkit-mask-image: var(--ez-list__draggable__icon--image);
-  mask-image: var(--ez-list__draggable__icon--image);
+  -webkit-mask-image: var(--ez-list__draggable-icon--image);
+  mask-image: var(--ez-list__draggable-icon--image);
 }
 
 * {
@@ -213,6 +243,10 @@ p {
   overflow-y: auto;
   outline: none;
   width: 100%;
+  scrollbar-width: thin;
+
+  /*public*/
+  scrollbar-color: var(--ez-list__group-container-scrollbar--background-color-primary) var(--ez-list__group-container-scrollbar--background-color-secondary);
 }
 
 .group-name {
@@ -234,19 +268,19 @@ p {
 
 /* Precisamos dos tokens do scrollbar */
 .group-container::-webkit-scrollbar-track {
-  background-color: #f0f2f5;
+  background-color: var(--ez-list__group-container-scrollbar--background-color-secondary);
 }
 
 .group-container::-webkit-scrollbar-thumb {
-  background-color: var(--ez-list__group-container__scrollbar--background-color);
-  border-radius: var(--ez-list__group-container__scrollbar--border-radius);
+  background-color: var(--ez-list__group-container-scrollbar--background-color-primary);
+  border-radius: var(--ez-list__group-container-scrollbar--border-radius);
 }
 
 .group-container::-webkit-scrollbar {
-  background-color: #f0f2f5;
-  width: var(--ez-list__group-container__scrollbar--width);
-  max-width: var(--ez-list__group-container__scrollbar--width);
-  min-width: var(--ez-list__group-container__scrollbar--width);
+  background-color: var(--ez-list__group-container-scrollbar--background-color-secondary);
+  width: var(--ez-list__group-container-scrollbar--width);
+  max-width: var(--ez-list__group-container-scrollbar--width);
+  min-width: var(--ez-list__group-container-scrollbar--width);
 }
 
 .section-container {
@@ -260,6 +294,10 @@ p {
   max-height: 100%;
   overflow-y: auto;
   outline: none;
+  scrollbar-width: thin;
+
+  /*public*/
+  scrollbar-color: var(--ez-list__draggable-scrollbar--background-color-primary) var(--ez-list__draggable-scrollbar--background-color-secondary);
 }
 
 .group-items-container {
@@ -270,24 +308,24 @@ p {
 }
 
 .items-container::-webkit-scrollbar-track {
-  background-color: #f0f2f5;
+  background-color: var(--ez-list__draggable-scrollbar--background-color-secondary);
 }
 
 .items-container::-webkit-scrollbar-thumb {
-  background-color: var(--ez-list__draggable__scrollbar--background-color);
-  border-radius: var(--ez-list__draggable__scrollbar--border-radius);
+  background-color: var(--ez-list__draggable-scrollbar--background-color-primary);
+  border-radius: var(--ez-list__draggable-scrollbar--border-radius);
 }
 
 .items-container::-webkit-scrollbar {
-  background-color: #f0f2f5;
-  width: var(--ez-list__draggable__scrollbar--width);
-  max-width: var(--ez-list__draggable__scrollbar--width);
-  min-width: var(--ez-list__draggable__scrollbar--width);
+  background-color: var(--ez-list__draggable-scrollbar--background-color-secondary);
+  width: var(--ez-list__draggable-scrollbar--width);
+  max-width: var(--ez-list__draggable-scrollbar--width);
+  min-width: var(--ez-list__draggable-scrollbar--width);
 }
 
 .group-overlay {
-  font-family: var(--ez-list__group__overlay--font-family);
-  font-size: var(--ez-list__group__overlay--font-size);
+  font-family: var(--ez-list__group-overlay--font-family);
+  font-size: var(--ez-list__group-overlay--font-size);
   background: rgba(226, 244, 239, 0.8);
   border: 1px solid #008561;
   border-radius: 8px;
@@ -318,8 +356,8 @@ p {
 }
 
 .selected-item {
-  background: var(--ez-list__selected-item__background);
-  border-radius: var(--ez-list__selected-item__border-radius);
+  background: var(--ez-list__selected-item--background-color);
+  border-radius: var(--ez-list__selected-item--border-radius);
 }
 
 .slot-item {

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

@@ -54,8 +54,8 @@
 .modal__content {
   display: flex;
   flex-wrap: wrap;
-  /* Cálculo deve ser revisto pois foi feito apenas para lista de tarefas */
-  max-height: calc(100% - 48px);
+  box-sizing: border-box;
+  max-height: 100%;
   height: 100%;
   overflow-y: auto;
   background-color: rgb(255, 255, 255);

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

@@ -3,6 +3,7 @@ import { Component, h, Event, Prop, Element, Method, Watch } from "@stencil/core
 import CSSVarsUtils from "../../utils/CSSVarsUtils";
 export class EzNumberInput {
   constructor() {
+    this._focused = false;
     /**
      * Deixa o campo disponível ou não para uso.
      */
@@ -24,66 +25,107 @@ export class EzNumberInput {
   async setBlur() {
     this._textInput.setBlur();
   }
+  /**
+   * Retorna informando se o campo está inválido (true | false)
+   */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+  }
   observeLabel() {
     if (this._textInput) {
       this._textInput.label = this.label;
     }
   }
   observeErrorMessage() {
+    var _a;
     if (this._textInput) {
       this._textInput.errorMessage = this.errorMessage;
+      if (!((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.trim())) {
+        this.setInputValue();
+      }
     }
   }
-  observeValue() {
-    if (this._textInput) {
-      this._textInput.value = this.getTextValue(this.value) || '';
+  observeValue(newValue, oldValue) {
+    if (this._textInput && newValue != oldValue) {
+      const newValueValidated = this.validateValue(newValue);
+      const oldValueValidated = this.validateValue(oldValue);
+      if (newValueValidated != oldValueValidated) {
+        const textValue = this.getTextValue(newValueValidated) || '';
+        if ((this._textInput.value || '') !== textValue) {
+          const parsedNumber = this.getParsedNumber(textValue);
+          if (parsedNumber !== undefined || !this._focused) {
+            this._textInput.value = textValue;
+            this._focused = false;
+            this.errorMessage = "";
+          }
+        }
+        const valueEmitted = newValueValidated === null ? undefined : newValueValidated;
+        this.ezChange.emit(valueEmitted);
+      }
+    }
+  }
+  validateValue(value) {
+    return isNaN(value) || value === undefined ? null : value;
+  }
+  getTextValue(value) {
+    if (value != undefined) {
+      return this.precision > 0 ? NumberUtils.format(value.toString(), Number(this.precision), Number(this.prettyPrecision)) : value.toString();
     }
+    return undefined;
   }
   changeValue(newValue) {
     this.errorMessage = "";
-    if (newValue !== this.value) {
-      this.value = newValue;
-      this.ezChange.emit(this.value);
-      return true;
+    if (this.value != newValue) {
+      this.value = newValue === undefined ? null : newValue;
     }
     else {
-      this.observeValue();
+      this.ezCancelWaitingChange.emit();
     }
-    return false;
   }
-  parseNumber() {
-    const parsedNumber = this._textInput.value ? NumberUtils.stringToNumber(this._textInput.value) : undefined;
+  setError(msg) {
+    this.value = null;
+    this.errorMessage = msg;
+    this.ezCancelWaitingChange.emit();
+  }
+  handleBlur() {
+    const parsedNumber = this.getParsedNumber();
     if (parsedNumber !== undefined && isNaN(parsedNumber)) {
-      this.ezCancelWaitingChange.emit();
-      this.errorMessage = "O valor digitado não é um número válido";
+      this.setError("O valor digitado não é um número válido");
     }
     else {
       try {
-        if (!this.changeValue(parsedNumber)) {
-          this.ezCancelWaitingChange.emit();
-        }
+        this.changeValue(parsedNumber);
       }
       catch (e) {
-        this.ezCancelWaitingChange.emit();
-        this.errorMessage = e.message;
+        this.setError(e.message);
         return;
       }
     }
   }
-  getTextValue(value) {
-    if (value) {
-      return this.precision > 0 ? NumberUtils.format(value.toString(), Number(this.precision), Number(this.prettyPrecision)) : value.toString();
+  handleInput() {
+    const parsedNumber = this.getParsedNumber();
+    if (parsedNumber !== this.value) {
+      this._focused = true;
+      this.ezStartChange.emit({ waitmessage: "", blocking: false });
     }
-    return undefined;
   }
-  startChange() {
-    this.ezStartChange.emit({ waitmessage: "", blocking: false });
+  getParsedNumber(value) {
+    var _a;
+    if (value === void 0) { value = (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value; }
+    return (value === null || value === void 0 ? void 0 : value.trim()) ? NumberUtils.stringToNumber(value) : undefined;
+  }
+  setInputValue() {
+    const textValue = this.getTextValue(this.value) || '';
+    if ((this._textInput.value || '') !== textValue) {
+      this._textInput.value = textValue;
+    }
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+    this.setInputValue();
   }
   render() {
-    return (h("ez-text-input", { ref: elem => this._textInput = elem, onBlur: () => this.parseNumber(), label: this.label, onInput: () => this.startChange(), value: this.getTextValue(this.value), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, slaveMode: true }));
+    return (h("ez-text-input", { ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode }));
   }
   static get is() { return "ez-number-input"; }
   static get encapsulation() { return "shadow"; }
@@ -299,6 +341,22 @@ export class EzNumberInput {
         "text": "Remove o foco no componente de input",
         "tags": []
       }
+    },
+    "isInvalid": {
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "Retorna informando se o campo est\u00E1 inv\u00E1lido (true | false)",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "_elem"; }

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

@@ -23,6 +23,11 @@ export class EzSearch {
       */
     this.mode = "regular";
   }
+  observeErrorMessage() {
+    if (this._comboElement) {
+      this._comboElement.errorMessage = this.errorMessage;
+    }
+  }
   observeValue() {
     if (this._comboElement) {
       this._comboElement.value = this.value;
@@ -40,16 +45,25 @@ export class EzSearch {
   async setBlur() {
     this._comboElement.setBlur();
   }
-  onComboChange(evt) {
-    evt.stopPropagation();
-    this.value = evt.detail;
-    this.ezChange.emit(evt.detail);
+  /**
+   * Retorna informando se o campo está inválido (true | false)
+   */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+  }
+  onComboChange(event) {
+    event.stopPropagation();
+    this.value = event.detail;
+    this.ezChange.emit(event.detail);
+    if (this.errorMessage !== this._comboElement.errorMessage) {
+      this.errorMessage = this._comboElement.errorMessage;
+    }
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._comboElement);
   }
   render() {
-    return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionLoader: this.optionLoader, searchMode: true, onEzChange: evt => this.onComboChange(evt), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue, suppressEmptyOption: this.suppressEmptyOption, mode: this.mode }));
+    return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionLoader: this.optionLoader, searchMode: true, onEzChange: event => this.onComboChange(event), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue, suppressEmptyOption: this.suppressEmptyOption, mode: this.mode }));
   }
   ;
   static get is() { return "ez-search"; }
@@ -295,10 +309,29 @@ export class EzSearch {
         "text": "Remove o foco no componente de pesquisa",
         "tags": []
       }
+    },
+    "isInvalid": {
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "Retorna informando se o campo est\u00E1 inv\u00E1lido (true | false)",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "_elem"; }
   static get watchers() { return [{
+      "propName": "errorMessage",
+      "methodName": "observeErrorMessage"
+    }, {
       "propName": "value",
       "methodName": "observeValue"
     }]; }

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

@@ -67,7 +67,7 @@ textarea {
   resize: none;
   margin-top: calc(var(--space--medium, 12px) + 4px);
   width: 100%;
-  font-weight: var(--text-weight--large, 600);
+  font-weight: var(--text-area--font-weight);
   font-family: var(--text-area--font-family);
   font-size: var(--text-area--font-size);
   color: var(--text-area--color);

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

@@ -73,6 +73,12 @@ export class EzTextArea {
   async setBlur() {
     this._inputElem.blur();
   }
+  /**
+   * Retorna informando se o campo está inválido (true | false)
+   */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+  }
   //---------------------------------------------
   // Private methods
   //---------------------------------------------
@@ -134,7 +140,7 @@ export class EzTextArea {
         this.label && this.mode != "slim" ?
           h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "textarea__label" : "textarea__label textarea__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
           : null,
-        h("textarea", { onFocus: () => this.handleFocus(), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: this.mode == "slim" ? "textarea--slim" : "", placeholder: this.mode == "slim" && this.label ? this.label : "", onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, onKeyDown: event => event.stopPropagation(), rows: this.rows })),
+        h("textarea", { onFocus: () => this.handleFocus(), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: this.mode === "slim" ? "textarea--slim" : "", placeholder: this.mode === "slim" && this.label ? this.label : "", onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, onKeyDown: event => event.stopPropagation(), rows: this.rows })),
       this.canShowError && this.mode != "slim" &&
         h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
   }
@@ -336,6 +342,22 @@ export class EzTextArea {
         "text": "Remove o foco no componente de input",
         "tags": []
       }
+    },
+    "isInvalid": {
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "Retorna informando se o campo est\u00E1 inv\u00E1lido (true | false)",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "_hostElement"; }

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

@@ -73,7 +73,6 @@ input {
   width: 100%;
   box-sizing: border-box;
   padding: var(--space--medium, 6px);
-  font-weight: var(--text-weight--large, 600);
 
   /*public*/
   height: var(--ez-text-input--height);
@@ -84,6 +83,7 @@ input {
   border-color: var(--ez-text-input__input--border-color);
   background-color: var(--ez-text-input__input--background-color);
   color: var(--ez-text-input--color);
+  font-weight: var(--ez-text-input--font-weight);
 }
 
 input:disabled {