@sankhyalabs/ezui 1.1.67 → 1.1.70

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

@@ -1,85 +1,85 @@
-import { Component, Event, Element, h, Prop, Host } from '@stencil/core';
+import { Component, Event, Element, h, Prop, Host } from "@stencil/core";
 export class EzTabselector {
   constructor() {
-    this.setFoucusedParam = (ev) => {
-      if (ev.key === 'Enter') {
-        this.selectedindex = this.foucusedindex;
-        this.foucusedindex = undefined;
-        this.selectedtab = this._processedTabs[this.selectedindex]['tabKey'];
-        this.handleTabClick(this.selectedtab, parseInt(this.selectedindex));
+    this.setFocusedParam = (ev) => {
+      if (ev.key === "Enter") {
+        this.selectedIndex = this.focusedIndex;
+        this.focusedIndex = undefined;
+        this.selectedTab = this._processedTabs[this.selectedIndex]["tabKey"];
+        this.handleTabClick(this.selectedTab, parseInt(this.selectedIndex));
         ev.preventDefault();
-        this.setFocusedTab(this.selectedindex);
+        this.setFocusedTab(this.selectedIndex);
       }
-      else if (ev.key === 'ArrowLeft' || ev.key === 'ArrowRight') {
+      else if (ev.key === "ArrowLeft" || ev.key === "ArrowRight") {
         let operator = undefined;
-        if (ev.key === 'ArrowLeft') {
+        if (ev.key === "ArrowLeft") {
           operator = false;
         }
-        else if (ev.key === 'ArrowRight') {
+        else if (ev.key === "ArrowRight") {
           operator = true;
         }
         else {
           return;
         }
-        if (this.foucusedindex === undefined) {
+        if (this.focusedIndex === undefined) {
           if (operator === false) {
-            this.foucusedindex = this.selectedindex !== undefined ? (parseInt(this.selectedindex) - 1).toString() : undefined;
+            this.focusedIndex = this.selectedIndex !== undefined ? (parseInt(this.selectedIndex) - 1).toString() : undefined;
           }
           else {
-            this.foucusedindex = this.selectedindex !== undefined ? (parseInt(this.selectedindex) + 1).toString() : undefined;
+            this.focusedIndex = this.selectedIndex !== undefined ? (parseInt(this.selectedIndex) + 1).toString() : undefined;
           }
         }
         else {
           if (operator === false) {
-            this.foucusedindex = (parseInt(this.foucusedindex) - 1).toString();
+            this.focusedIndex = (parseInt(this.focusedIndex) - 1).toString();
           }
           else {
-            this.foucusedindex = (parseInt(this.foucusedindex) + 1).toString();
+            this.focusedIndex = (parseInt(this.focusedIndex) + 1).toString();
           }
         }
-        if (parseInt(this.foucusedindex) < 0) {
-          this.foucusedindex = '0';
+        if (parseInt(this.focusedIndex) < 0) {
+          this.focusedIndex = "0";
         }
-        else if (parseInt(this.foucusedindex) > this._processedTabs.length - 1) {
-          this.foucusedindex = (this._processedTabs.length - 1).toString();
+        else if (parseInt(this.focusedIndex) > this._processedTabs.length - 1) {
+          this.focusedIndex = (this._processedTabs.length - 1).toString();
         }
-        this.setFoucusedBtn(true, this.foucusedindex);
-        this.setFocusedTab(this.foucusedindex);
-        this.change.emit();
+        this.setFocusedBtn(true, this.focusedIndex);
+        this.setFocusedTab(this.focusedIndex);
+        this.ezChange.emit();
       }
-      else if (ev.key === 'Tab' || ev.key === 'Escape') {
-        this.foucusedindex = undefined;
-        this.selectedtab = this._processedTabs[this.selectedindex]['tabKey'];
-        this.handleTabClick(this.selectedtab, parseInt(this.selectedindex));
+      else if (ev.key === "Tab" || ev.key === "Escape") {
+        this.focusedIndex = undefined;
+        this.selectedTab = this._processedTabs[this.selectedIndex]["tabKey"];
+        this.handleTabClick(this.selectedTab, parseInt(this.selectedIndex));
         ev.preventDefault();
-        this.setFocusedTab(this.selectedindex);
+        this.setFocusedTab(this.selectedIndex);
       }
       // this.setFocusedTab();
     };
   }
   handleTabClick(tab, index) {
-    this.selectedindex = index.toString();
-    this.foucusedindex = undefined;
-    this.selectedtab = tab;
-    this.change.emit();
-    this.setFoucusedBtn(false, this.selectedindex);
+    this.selectedIndex = index.toString();
+    this.focusedIndex = undefined;
+    this.selectedTab = tab;
+    this.ezChange.emit();
+    this.setFocusedBtn(false, this.selectedIndex);
   }
   componentWillRender() {
     if (!this._processedTabs) {
       this._processedTabs = [];
       if (this.tabs) {
-        this.tabs.split(',').forEach((label) => {
+        this.tabs.split(",").forEach((label) => {
           label = label.trim();
           this._processedTabs.push(new Tab(label, label));
         });
       }
-      this._hostElem.querySelectorAll('ez-tab').forEach((elem) => {
-        const tabKey = elem.getAttribute('tabKey');
-        const label = elem.getAttribute('label');
+      this._hostElem.querySelectorAll("ez-tab").forEach((elem) => {
+        const tabKey = elem.getAttribute("tabKey");
+        const label = elem.getAttribute("label");
         const t = new Tab(label, tabKey);
         const content = elem.firstChild;
         if (content) {
-          content.setAttribute('slot', 'tab' + this._processedTabs.length);
+          content.setAttribute("slot", "tab" + this._processedTabs.length);
           this._hostElem.appendChild(content);
         }
         this._processedTabs.push(t);
@@ -103,7 +103,7 @@ export class EzTabselector {
     const container = this._scrollContainer;
     if (container) {
       let lastTab = null;
-      container.querySelectorAll('.tab').forEach((tab) => {
+      container.querySelectorAll(".tab").forEach((tab) => {
         if (tab.getBoundingClientRect().right < container.clientWidth) {
           lastTab = tab;
         }
@@ -122,18 +122,18 @@ export class EzTabselector {
       this._startHidden = container.scrollLeft > 0;
       this._endHidden = remainingScroll > 0;
       if (this._startHidden) {
-        this._backwardButton.classList.remove('hidden');
+        this._backwardButton.classList.remove("hidden");
       }
       else {
-        this._backwardButton.classList.add('hidden');
+        this._backwardButton.classList.add("hidden");
       }
       if (this._endHidden) {
-        this._forwardButton.classList.remove('hidden');
+        this._forwardButton.classList.remove("hidden");
       }
       else {
-        this._forwardButton.classList.add('hidden');
+        this._forwardButton.classList.add("hidden");
       }
-      const classNames = ['', 'startHidden', 'endHidden', 'midle'];
+      const classNames = ["", "startHidden", "endHidden", "midle"];
       const currentClass = classNames[Number(this._startHidden) | Number(this._endHidden) << 1];
       classNames.forEach((name) => {
         if (name !== currentClass && container.classList.contains(name)) {
@@ -150,11 +150,9 @@ export class EzTabselector {
     this._scrollCallBack = window.setTimeout(() => { this.updateScroll(); }, 200);
   }
   setFocusedTab(index) {
-    window.clearTimeout(this._scrollCallBackTeste);
-    this._scrollCallBackTeste = window.setTimeout(() => {
+    window.clearTimeout(this._scrollCallBackTest);
+    this._scrollCallBackTest = window.setTimeout(() => {
       const tabtoscroll = this._scrollContainer.querySelector(`#tab${index}`);
-      console.log('tabtoscroll => ID', `#tab${this.selectedindex}`);
-      console.log('tabtoscroll', tabtoscroll);
       tabtoscroll.scrollIntoView();
     }, 200);
   }
@@ -163,16 +161,16 @@ export class EzTabselector {
       this._textMesurement = this._hostElem.shadowRoot.ownerDocument.createElement("canvas");
     }
     const context = this._textMesurement.getContext("2d");
-    context.font = '14px Sora, Algerian';
-    return Math.min(220, 24 + context.measureText(text).width) + 'px';
+    context.font = "14px Sora, Algerian";
+    return Math.min(220, 24 + context.measureText(text).width) + "px";
   }
   ;
-  setFoucusedBtn(visible, paramater) {
-    const tabsButtons = this._scrollContainer.querySelectorAll('.tab');
+  setFocusedBtn(visible, parameter) {
+    const tabsButtons = this._scrollContainer.querySelectorAll(".tab");
     tabsButtons.forEach((el) => {
-      el.classList.remove('is-focused');
-      if (el.id === 'tab' + paramater && visible) {
-        el.classList.add('is-focused');
+      el.classList.remove("is-focused");
+      if (el.id === "tab" + parameter && visible) {
+        el.classList.add("is-focused");
       }
       ;
     });
@@ -180,13 +178,13 @@ export class EzTabselector {
   render() {
     return (h(Host, null,
       h("button", { class: "backward-button", ref: (el) => this._backwardButton = el, onClick: () => this.scrollBackward() }),
-      h("div", { class: "scroll", ref: (el) => this._scrollContainer = el, onScroll: () => this.domScrollHandler(), onKeyDown: (ev) => this.setFoucusedParam(ev) }, this._processedTabs.map((tab, index) => {
-        const labelStyle = { 'min-width': this.getTextWidth(tab.label) };
+      h("div", { class: "scroll", ref: (el) => this._scrollContainer = el, onScroll: () => this.domScrollHandler(), onKeyDown: (ev) => this.setFocusedParam(ev) }, this._processedTabs.map((tab, index) => {
+        const labelStyle = { "min-width": this.getTextWidth(tab.label) };
         const tabId = "tab" + index;
-        const isSelected = index === parseInt(this.selectedindex) || (this.selectedtab && tab.tabKey === this.selectedtab);
+        const isSelected = index === parseInt(this.selectedIndex) || (this.selectedTab && tab.tabKey === this.selectedTab);
         if (isSelected) {
-          this.selectedtab = tab.tabKey;
-          this.selectedindex = index.toString();
+          this.selectedTab = tab.tabKey;
+          this.selectedIndex = index.toString();
         }
         return h("button", { id: tabId, class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab.tabKey, index), style: labelStyle },
           h("span", { class: "tab-label", title: tab.label }, tab.label),
@@ -203,7 +201,7 @@ export class EzTabselector {
     "$": ["ez-tabselector.css"]
   }; }
   static get properties() { return {
-    "selectedindex": {
+    "selectedIndex": {
       "type": "string",
       "mutable": true,
       "complexType": {
@@ -215,12 +213,12 @@ export class EzTabselector {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Define o index da aba selecionada."
       },
-      "attribute": "selectedindex",
+      "attribute": "selected-index",
       "reflect": true
     },
-    "selectedtab": {
+    "selectedTab": {
       "type": "string",
       "mutable": true,
       "complexType": {
@@ -232,9 +230,9 @@ export class EzTabselector {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Define a aba selecionada."
       },
-      "attribute": "selectedtab",
+      "attribute": "selected-tab",
       "reflect": true
     },
     "tabs": {
@@ -249,21 +247,21 @@ export class EzTabselector {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Define o nome das abas do componente, separadas por v\u00EDrgulas \",\"."
       },
       "attribute": "tabs",
       "reflect": false
     }
   }; }
   static get events() { return [{
-      "method": "change",
-      "name": "change",
+      "method": "ezChange",
+      "name": "ezChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Este \u00E9 o evento emitido ao clicar para abrir o popup (onChange)."
+        "text": "Evento emitido ao clicar para abrir o popup (onChange)."
       },
       "complexType": {
         "original": "string",

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

@@ -1,12 +1,18 @@
 :host {
   /* dimensions */
+  /*@doc Define a largura do componente.*/
   --ta--width: 100%;
 
   /* general */
+  /*@doc Define o raio da borda do input do componente.*/
   --ta--border-radius: var(--border--radius-medium, 12px);
+  /*@doc Define o tamanho da fonte do input e label do componente.*/
   --ta--font-size: var(--text--medium, 14px);
+  /*@doc Define a família da fonte do input, label e caixa de mensagem do componente.*/
   --ta--font-family: var(--font-pattern, Arial);
+  /*@doc Define o peso da fonte do label do componente.*/
   --ta--font-weight: var(--text-weight--large, 500);
+  /*@doc Define a cor da fonte do input e label do componente.*/
   --ta--color: var(--title--primary, #000);
 
   /* input */

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

@@ -6,12 +6,12 @@ export class EzTextArea {
      */
     this.enabled = true;
     /**
-     * Ajusta o numero de linhas e consequentemente o height do textarea. Valor default: 4
+     * Ajusta o número de linhas e consequentemente o height do textarea. Valor default: 4
      */
     this.rows = 4;
   }
   showError() {
-    const hasError = typeof this.errormessage === 'string' && this.errormessage !== '';
+    const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
     if (hasError) {
       this._container.classList.add('hasError');
       this._messageBoxElem.classList.add('hasError');
@@ -95,7 +95,7 @@ export class EzTextArea {
           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, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, onKeyDown: event => event.stopPropagation(), rows: this.rows })),
-      h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errormessage }, this.errormessage)));
+      h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
   }
   static get is() { return "ez-text-area"; }
   static get encapsulation() { return "shadow"; }
@@ -118,7 +118,7 @@ export class EzTextArea {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Label \u00E9 o t\u00EDtulo do campo"
+        "text": "T\u00EDtulo do campo"
       },
       "attribute": "label",
       "reflect": true
@@ -175,7 +175,7 @@ export class EzTextArea {
       "attribute": "loading",
       "reflect": true
     },
-    "errormessage": {
+    "errorMessage": {
       "type": "string",
       "mutable": true,
       "complexType": {
@@ -189,7 +189,7 @@ export class EzTextArea {
         "tags": [],
         "text": "Quando h\u00E1 um problema de valida\u00E7\u00E3o, serve como orienta\u00E7\u00E3o ao usu\u00E1rio"
       },
-      "attribute": "errormessage",
+      "attribute": "error-message",
       "reflect": true
     },
     "rows": {
@@ -204,7 +204,7 @@ export class EzTextArea {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Ajusta o numero de linhas e consequentemente o height do textarea. Valor default: 4"
+        "text": "Ajusta o n\u00FAmero de linhas e consequentemente o height do textarea. Valor default: 4"
       },
       "attribute": "rows",
       "reflect": true,
@@ -219,7 +219,7 @@ export class EzTextArea {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Um evento disparado quando o estado do componente \u00E9 alterado (onEzChange)."
+        "text": "Evento disparado quando o estado do componente \u00E9 alterado (onEzChange)."
       },
       "complexType": {
         "original": "string",
@@ -263,7 +263,7 @@ export class EzTextArea {
   }; }
   static get elementRef() { return "_hostElement"; }
   static get watchers() { return [{
-      "propName": "errormessage",
+      "propName": "errorMessage",
       "methodName": "showError"
     }, {
       "propName": "value",

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

@@ -1,50 +1,58 @@
 :host {
   /* dimensions */
-  --it--height: 42px;
-  --it--width: 100%;
-  --it__icon--width: 48px;
+  /*@doc Define a altura do componente.*/
+  --text-input--height: 42px;
+  /*@doc Define a largura do componente.*/
+  --text-input--width: 100%;
+  /*@doc Define a largura do slot que contém o ícone.*/
+  --text-input__icon--width: 48px;
 
   /* general */
-  --it--border-radius: var(--border--radius-medium, 12px);
-  --it--font-size: var(--text--medium, 14px);
-  --it--font-family: var(--font-pattern, Arial);
-  --it--font-weight: var(--text-weight--large, 500);
-  --it--color: var(--title--primary, #000);
+  /*@doc Define o raio da borda do input do componente.*/
+  --text-input--border-radius: var(--border--radius-medium, 12px);
+  /*@doc Define o tamanho da fonte do input e label do componente.*/
+  --text-input--font-size: var(--text--medium, 14px);
+  /*@doc Define a família da fonte do input, label e caixa de mensagem do componente.*/
+  --text-input--font-family: var(--font-pattern, Arial);
+  /*@doc Define o peso da fonte do label do componente.*/
+  --text-input--font-weight: var(--text-weight--large, 500);
+  /*@doc Define a cor da fonte do input e label do componente.*/
+  --text-input--color: var(--title--primary, #000);
 
   /* input */
   /*@doc Define a cor de fundo do input.*/
-  --it__input--background-color: var(--background--medium, #e0e0e0);
+  --text-input__input--background-color: var(--background--medium, #e0e0e0);
   /*@doc Define o estilo da borda do input.*/
-  --it__input--border: var(--border--medium, 2px solid);
+  --text-input__input--border: var(--border--medium, 2px solid);
   /*@doc Define a cor da borda do input.*/
-  --it__input--border-color: var(--it__input--background-color);
+  --text-input__input--border-color: var(--text-input__input--background-color);
   /*no modo normal usamos a borda com a mesma cor do bg*/
   /*@doc Define a cor da borda do input quando focado.*/
-  --it__input--focus--border-color: var(--color--alert-cold-800, #042EFF);
+  --text-input__input--focus--border-color: var(--color--alert-cold-800, #042EFF);
   /*@doc Define a cor de fundo do input quando desabilitado.*/
-  --it__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
+  --text-input__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
   /*@doc Define a cor do texto do input.*/
-  --it__input--disabled--color: var(--text--disable, #AFB6C0);
+  --text-input__input--disabled--color: var(--text--disable, #AFB6C0);
   /*@doc Define a cor da borda do input quando com erro.*/
-  --it__input--error--border-color: #CC2936;
+  --text-input__input--error--border-color: #CC2936;
 
   /* message box */
   /*@doc Define o tamanho da fonte da mensagem abaixo do input.*/
-  --it__message_box--font-size: var(--text--small, 12px);
+  --text-input__message_box--font-size: var(--text--small, 12px);
   /*@doc Define a cor da fonte da mensagem quando info.*/
-  --it__message_box--info--color: var(--color--success, #22085d);
+  --text-input__message_box--info--color: var(--color--success, #22085d);
   /*@doc Define a cor da fonte da mensagem quando erro.*/
-  --it__message_box--error--color: var(--color--error, #FF0000);
+  --text-input__message_box--error--color: var(--color--error, #FF0000);
 
   /* label */
   /*@doc Define o posicionamento do label.*/
-  --it__label--floating--top: 6px;
+  --text-input__label--floating--top: 6px;
   /*@doc Define o posicionamento do label.*/
-  --it__label--padding-top: 12px;
+  --text-input__label--padding-top: 12px;
   /*@doc Define o espaçamento esquerdo do label.*/
-  --it__label--padding-left: 14px;
+  --text-input__label--padding-left: 14px;
   /*@doc Define o espaçamento direito do label.*/
-  --it__label--padding-right: 12px;
+  --text-input__label--padding-right: 12px;
 
 
   /***************
@@ -55,7 +63,7 @@
   flex-wrap: wrap;
   position: relative;
   /*public*/
-  width: var(--it--width);
+  width: var(--text-input--width);
 }
 
 input {
@@ -66,40 +74,40 @@ input {
   font-weight: var(--text-weight--large, 600);
 
   /*public*/
-  height: var(--it--height);
-  border-radius: var(--it--border-radius);
-  font-family: var(--it--font-family);
-  font-size: var(--it--font-size);
-  border: var(--it__input--border);
-  border-color: var(--it__input--border-color);
-  background-color: var(--it__input--background-color);
-  color: var(--it--color);
+  height: var(--text-input--height);
+  border-radius: var(--text-input--border-radius);
+  font-family: var(--text-input--font-family);
+  font-size: var(--text-input--font-size);
+  border: var(--text-input__input--border);
+  border-color: var(--text-input__input--border-color);
+  background-color: var(--text-input__input--background-color);
+  color: var(--text-input--color);
 }
 
 input:disabled {
   /*public*/
-  background-color: var(--it__input--disabled--background-color);
-  color: var(--it__input--disabled--color);
+  background-color: var(--text-input__input--disabled--background-color);
+  color: var(--text-input__input--disabled--color);
 }
 
 input:focus {
   /*private*/
   outline: none;
   /*public*/
-  border-color: var(--it__input--focus--border-color);
+  border-color: var(--text-input__input--focus--border-color);
 }
 
 input.icon--left {
-  padding-left: var(--it__icon--width);
+  padding-left: var(--text-input__icon--width);
 }
 
 input.icon--right {
-  padding-right: var(--it__icon--width);
+  padding-right: var(--text-input__icon--width);
 }
 
 input.hasError {
-  color: var(--it--color);
-  border-color: var(--it__input--error--border-color);
+  color: var(--text-input--color);
+  border-color: var(--text-input__input--error--border-color);
 }
 
 input.text--right {
@@ -118,14 +126,14 @@ input.text--right {
   white-space: nowrap;
 
   /*public*/
-  font-family: var(--it--font-family);
-  font-size: var(--it__message_box--font-size);
-  color: var(--it__message_box--info--color);
+  font-family: var(--text-input--font-family);
+  font-size: var(--text-input__message_box--font-size);
+  color: var(--text-input__message_box--info--color);
 }
 
 .hasError {
   /*public*/
-  color: var(--it__message_box--error--color);
+  color: var(--text-input__message_box--error--color);
 }
 
 .input__label {
@@ -138,49 +146,49 @@ input.text--right {
   white-space: nowrap;
   -webkit-transition: font-size .05s, top .05s;
   transition: font-size .05s, top .05s;
-  width: calc(100% - var(--it__label--padding-right));
-  left: var(--it--space--medium);
+  width: calc(100% - var(--text-input__label--padding-right));
+  left: var(--text-input--space--medium);
 
   /*public*/
-  font-family: var(--it--font-family);
-  font-size: var(--it--font-size);
-  font-weight: var(--it--font-weight);
-  color: var(--it--color);
-  top: var(--it__label--padding-top);
-  left: var(--it__label--padding-left);
-  padding-right: var(--it__label--padding-right);
+  font-family: var(--text-input--font-family);
+  font-size: var(--text-input--font-size);
+  font-weight: var(--text-input--font-weight);
+  color: var(--text-input--color);
+  top: var(--text-input__label--padding-top);
+  left: var(--text-input__label--padding-left);
+  padding-right: var(--text-input__label--padding-right);
 }
 
 .input__label--floated {
-  font-family: var(--it--font-family);
+  font-family: var(--text-input--font-family);
   font-size: var(--text--extra-small);
   color: var(--text--primary);
-  top: var(--it__label--floating--top);
+  top: var(--text-input__label--floating--top);
 }
 
 .input__label--disabled {
-  color: var(--it__input--disabled--color);
+  color: var(--text-input__input--disabled--color);
 }
 
 .input__label--left {
   /*public*/
   text-align: left;
-  left: calc(var(--it__icon--width) + 2px);
+  left: calc(var(--text-input__icon--width) + 2px);
   /*borda*/
-  width: calc(100% - var(--it__icon--width));
+  width: calc(100% - var(--text-input__icon--width));
 }
 
 .input__label--right {
   /*public*/
-  right: var(--it__icon--width);
-  width: calc(100% - var(--it__icon--width));
+  right: var(--text-input__icon--width);
+  width: calc(100% - var(--text-input__icon--width));
 }
 
 /* ISSO TA ERRADO CRIAR INPUT__LABEL--BOTH */
 .input__label--left.input__label--right {
-  left: calc(var(--it__icon--width) + 2px);
+  left: calc(var(--text-input__icon--width) + 2px);
   /*borda*/
-  width: calc(100% - var(--it__icon--width) * 2);
+  width: calc(100% - var(--text-input__icon--width) * 2);
 }
 
 .input--with--label {