@sankhyalabs/ezui 1.1.64 → 1.1.68

package/dist/collection/components/ez-form/subcomponents/form-metadata.js

@@ -93,7 +93,7 @@ export class FormMetadata {
           const subDuName = child.getAttribute("dataunit");
           let subDu;
           if (subDuName) {
-            subDu = new DataUnit(subDuName, child.hasAttribute("many") ? 'N' : '1');
+            subDu = new DataUnit(subDuName, 'noname', child.hasAttribute("many") ? 'N' : '1');
           }
           else {
             subDu = dataUnit;
@@ -108,7 +108,7 @@ export class FormMetadata {
     if (!this.dataunit) {
       this.dataunit = "dataunit_" + (this.name || this.label || new Date().getTime());
     }
-    const du = new DataUnit(this.dataunit, this.many ? 'N' : '1');
+    const du = new DataUnit(this.dataunit, 'noname', this.many ? 'N' : '1');
     this.metadata = this.fromElements(this._host.children, this.label, this.name, du, this.autoload);
   }
   render() {

package/dist/collection/components/ez-form/subcomponents/structure/Field.js

@@ -21,7 +21,7 @@ export const Field = ({ dataUnit, field, forceScroll, enabled }) => {
   switch (userInterface) {
     case 'LONGTEXT':
       return h("div", { class: "col col--sd-12 padding--small" }, loadingData ? h("place-holder", null) :
-        h("ez-text-area", { value: value || '', label: formattedLabel, onEzChange: evt => changeFieldHandler(evt.target['value']), errormessage: errorMessage, ref: elem => scrollToView(forceScroll, elem), key: key, enabled: isEnabled }));
+        h("ez-text-area", { value: value || '', label: formattedLabel, onEzChange: evt => changeFieldHandler(evt.target['value']), errorMessage: errorMessage, ref: elem => scrollToView(forceScroll, elem), key: key, enabled: isEnabled }));
     case 'CHECKBOX':
     case 'SWITCH':
       return h("div", { class: "col col--sd-12 col--tb-3 padding--small align--middle padding-bottom--large" }, loadingData ? h("place-holder", null) :
@@ -30,7 +30,7 @@ export const Field = ({ dataUnit, field, forceScroll, enabled }) => {
       const optsObj = properties ? JSON.parse(getProp(properties, 'options')) : {};
       const normalized = Object.keys(optsObj).map(key => { return { value: key, label: optsObj[key] }; });
       return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
-        h("ez-combo-box", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']), errormessage: errorMessage, ref: elem => scrollToView(forceScroll, elem), key: key, options: normalized }));
+        h("ez-combo-box", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']), errorMessage: errorMessage, ref: elem => scrollToView(forceScroll, elem), key: key, options: normalized }));
     case 'SEARCH':
       const context = {
         __MAIN_FORM: form,
@@ -58,7 +58,7 @@ export const Field = ({ dataUnit, field, forceScroll, enabled }) => {
         context['CRITERIA'] = criteriaList;
       }
       return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
-        h("ez-search", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']), errormessage: errorMessage, optionloader: (argument) => {
+        h("ez-search", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']), errorMessage: errorMessage, optionloader: (argument) => {
             if (form) {
               return form.loadSearch(argument, context);
             }
@@ -72,7 +72,7 @@ export const Field = ({ dataUnit, field, forceScroll, enabled }) => {
         h("ez-upload", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.detail), urlupload: target, requestheaders: headers, maxfiles: maxfiles })));
     case 'DATE':
       return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
-        h("ez-date-input", { value: !value ? null : DateUtils.clearTime(value), label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']), errormessage: errorMessage, ref: elem => scrollToView(forceScroll, elem), key: key }));
+        h("ez-date-input", { value: !value ? null : DateUtils.clearTime(value), label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']), errorMessage: errorMessage, ref: elem => scrollToView(forceScroll, elem), key: key }));
     case 'DECIMALNUMBER':
     case 'INTEGERNUMBER':
       let precision = 0;
@@ -82,11 +82,11 @@ export const Field = ({ dataUnit, field, forceScroll, enabled }) => {
         prettyPrecision = Number(getProp(properties, "prettyprecision") || precision);
       }
       return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
-        h("ez-numeric-input", { value: !value ? null : value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']), errormessage: errorMessage, precision: precision, prettyprecision: prettyPrecision, ref: elem => scrollToView(forceScroll, elem), key: key }));
+        h("ez-numeric-input", { value: !value ? null : value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']), errorMessage: errorMessage, precision: precision, prettyprecision: prettyPrecision, ref: elem => scrollToView(forceScroll, elem), key: key }));
     //IMAGE, DATETIME, ELAPSEDTIME, PASSWORD, MASKEDTEXT, HTML
     default:
       return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
-        h("ez-text-input", { value: value, label: formattedLabel, enabled: isEnabled, loading: loadingData, onInput: (event) => changeFieldHandler(event.target['value']), errormessage: errorMessage, ref: elem => scrollToView(forceScroll, elem), key: key }));
+        h("ez-text-input", { value: value, label: formattedLabel, enabled: isEnabled, loading: loadingData, onInput: (event) => changeFieldHandler(event.target['value']), errorMessage: errorMessage, ref: elem => scrollToView(forceScroll, elem), key: key }));
   }
 };
 function getProp(properties, name) {

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

@@ -2,13 +2,15 @@
   display: block;
   overflow: hidden;
   position: relative;
+  /* @doc Define a cor do ícone. */
+  --ez-icon--color: var(--icon--color, #ffffff);
 }
 
 svg {
   display: flex;
   justify-content: center;
   align-items: center;
-  fill: var(--color--icon);
+  fill: var(--ez-icon--color);
 }
 
 .x-small {

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

@@ -1,7 +1,9 @@
 import { Component, h, Host, Prop } from '@stencil/core';
 export class EzIcon {
   constructor() {
-    /*Tamanho do icone*/
+    /**
+     * Tamanho do icone
+     */
     this.size = 'medium';
   }
   isSprite() {
@@ -36,7 +38,7 @@ export class EzIcon {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Tamanho do icone"
       },
       "attribute": "size",
       "reflect": true,
@@ -54,7 +56,7 @@ export class EzIcon {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Path da imagem"
       },
       "attribute": "href",
       "reflect": true

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

@@ -31,7 +31,7 @@ export class NumberInput {
     this.checkNumberValidation = (valuePtBRorNumber) => {
       try {
         if (valuePtBRorNumber != "" && NumberUtils.format(valuePtBRorNumber, this.precision, this.prettyprecision) === "NaN") {
-          this.errormessage = `Valor não é um número válido`;
+          this.errorMessage = `Valor não é um número válido`;
           this.value = undefined;
           this.strvalue = undefined;
           if (this._inputElem) {
@@ -41,14 +41,14 @@ export class NumberInput {
         }
       }
       catch (err) {
-        this.errormessage = err.message;
+        this.errorMessage = err.message;
         return false;
       }
       return true;
     };
   }
   showError() {
-    const hasError = typeof this.errormessage === 'string' && this.errormessage !== '';
+    const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
     if (this._inputElem) {
       if (hasError) {
         this._inputElem.classList.add('hasError');
@@ -76,7 +76,7 @@ export class NumberInput {
     if (isNaN(newValue) && newValue !== undefined) {
       this.value = undefined;
       this.strvalue = "";
-      this.errormessage = `Valor não é um número válido`;
+      this.errorMessage = `Valor não é um número válido`;
       this.adjustFloatingLabel();
     }
     else {
@@ -122,7 +122,7 @@ export class NumberInput {
   async handleFocusout() {
     //Setting value and strvalue by stringinput
     if (this._inputElem) {
-      this.errormessage = "";
+      this.errorMessage = "";
       if (this._inputElem.value !== "") {
         this._inputElem.value = this.settingStrValueIntNumber(this._inputElem.value);
         const value = NumberUtils.keepOnlyDecimalSeparator(this._inputElem.value, this.formatnumber.toUpperCase());
@@ -134,7 +134,7 @@ export class NumberInput {
             this._inputElem.value = this.formatnumber.toUpperCase() !== "EN-US" ? NumberUtils.format(value, this.precision, this.prettyprecision) : NumberUtils.changeFormat(NumberUtils.format(value, this.precision, this.prettyprecision));
           }
           catch (e) {
-            this.errormessage = e.message;
+            this.errorMessage = e.message;
             return;
           }
         }
@@ -189,7 +189,7 @@ export class NumberInput {
         this._inputElem.value = this.formatnumber.toUpperCase() !== "EN-US" ? NumberUtils.format(value, this.precision, this.prettyprecision) : NumberUtils.changeFormat(NumberUtils.format(value, this.precision, this.prettyprecision));
       }
       catch (e) {
-        this.errormessage = e.message;
+        this.errorMessage = e.message;
         return;
       }
       this.strvalue = this._inputElem.value;
@@ -231,7 +231,7 @@ export class NumberInput {
       labelInput,
       h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", value: this.strvalue, disabled: !this.enabled, onInput: this.handleChange.bind(this), onFocusout: this.handleFocusout.bind(this) }),
       h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
-      h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el }, this.errormessage)));
+      h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el }, this.errorMessage)));
   }
   static get is() { return "ez-number-input"; }
   static get encapsulation() { return "shadow"; }
@@ -311,7 +311,7 @@ export class NumberInput {
       "reflect": true,
       "defaultValue": "true"
     },
-    "errormessage": {
+    "errorMessage": {
       "type": "string",
       "mutable": true,
       "complexType": {
@@ -325,7 +325,7 @@ export class NumberInput {
         "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
     },
     "precision": {
@@ -467,7 +467,7 @@ export class NumberInput {
   }; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
-      "propName": "errormessage",
+      "propName": "errorMessage",
       "methodName": "showError"
     }, {
       "propName": "precision",

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

@@ -11,7 +11,7 @@ export class EzNumericInput {
     this._textInput.label = this.label;
   }
   setErrorMessage() {
-    this._textInput.errormessage = this.errormessage;
+    this._textInput.errorMessage = this.errorMessage;
   }
   applyValueToInput() {
     if (this._textInput) {
@@ -19,7 +19,7 @@ export class EzNumericInput {
     }
   }
   changeValue(newValue) {
-    this._textInput.errormessage = "";
+    this._textInput.errorMessage = "";
     if (newValue !== this.value) {
       this.value = newValue;
       this.ezChange.emit();
@@ -28,7 +28,7 @@ export class EzNumericInput {
   parseNumber() {
     const parsedNumber = this._textInput.value ? NumberUtils.stringToNumber(this._textInput.value) : null;
     if (parsedNumber != null && isNaN(parsedNumber)) {
-      this._textInput.errormessage = "O valor digitado não é um número válido";
+      this._textInput.errorMessage = "O valor digitado não é um número válido";
     }
     else {
       this.changeValue(parsedNumber);
@@ -41,7 +41,7 @@ export class EzNumericInput {
     return null;
   }
   render() {
-    return (h("ez-text-input", { class: "text-input", ref: elem => this._textInput = elem, onBlur: () => this.parseNumber(), label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errormessage: this.errormessage }));
+    return (h("ez-text-input", { class: "text-input", ref: elem => this._textInput = elem, onBlur: () => this.parseNumber(), label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage }));
   }
   static get is() { return "ez-numeric-input"; }
   static get encapsulation() { return "shadow"; }
@@ -104,7 +104,7 @@ export class EzNumericInput {
       "reflect": true,
       "defaultValue": "true"
     },
-    "errormessage": {
+    "errorMessage": {
       "type": "string",
       "mutable": true,
       "complexType": {
@@ -118,7 +118,7 @@ export class EzNumericInput {
         "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
     },
     "precision": {
@@ -176,7 +176,7 @@ export class EzNumericInput {
       "propName": "label",
       "methodName": "setLabel"
     }, {
-      "propName": "errormessage",
+      "propName": "errorMessage",
       "methodName": "setErrorMessage"
     }, {
       "propName": "value",

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

@@ -27,7 +27,7 @@
   /* width: fit-content; */
 
   /*public*/
-  background-color: transparent;
+  background-color: var(--background--xlight);
   border-radius: var(--pop__box--border-radius);
   box-shadow: var(--pop__box--box-shadow);
 }

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

@@ -1,4 +1,4 @@
-import { Component, h, Method, Element, Host, Prop } from '@stencil/core';
+import { Component, h, Method, Element, Host, Prop, Event, Watch } from '@stencil/core';
 import { FloatingManager } from '@sankhyalabs/core';
 export class EzPopover {
   constructor() {
@@ -30,6 +30,11 @@ export class EzPopover {
      */
     this.boxwidth = 'fit-content';
   }
+  dispatchVisibilityChange(newValue, oldValue) {
+    if (newValue != oldValue) {
+      this.ezVisibilityChange.emit(newValue);
+    }
+  }
   /**
    * Atualiza a posição do popover em relação ao componente pai.
    */
@@ -239,6 +244,22 @@ export class EzPopover {
       "reflect": true
     }
   }; }
+  static get events() { return [{
+      "method": "ezVisibilityChange",
+      "name": "ezVisibilityChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Evento disparado ao exibir/ocultar o componente."
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }]; }
   static get methods() { return {
     "updatePosition": {
       "complexType": {
@@ -320,4 +341,8 @@ export class EzPopover {
     }
   }; }
   static get elementRef() { return "_host"; }
+  static get watchers() { return [{
+      "propName": "isOpened",
+      "methodName": "dispatchVisibilityChange"
+    }]; }
 }

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

@@ -25,7 +25,7 @@ export class EzSearch {
     this.ezChange.emit(evt.detail);
   }
   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 }));
+    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 }));
   }
   ;
   static get is() { return "ez-search"; }
@@ -94,7 +94,7 @@ export class EzSearch {
       "reflect": true,
       "defaultValue": "true"
     },
-    "errormessage": {
+    "errorMessage": {
       "type": "string",
       "mutable": true,
       "complexType": {
@@ -108,7 +108,7 @@ export class EzSearch {
         "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
     },
     "optionloader": {

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

@@ -11,7 +11,7 @@ export class EzTextArea {
     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"; }
@@ -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": {
@@ -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,50 @@
 :host {
   /* dimensions */
-  --it--height: 42px;
-  --it--width: 100%;
-  --it__icon--width: 48px;
+  --text-input--height: 42px;
+  --text-input--width: 100%;
+  --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);
+  --text-input--border-radius: var(--border--radius-medium, 12px);
+  --text-input--font-size: var(--text--medium, 14px);
+  --text-input--font-family: var(--font-pattern, Arial);
+  --text-input--font-weight: var(--text-weight--large, 500);
+  --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 +55,7 @@
   flex-wrap: wrap;
   position: relative;
   /*public*/
-  width: var(--it--width);
+  width: var(--text-input--width);
 }
 
 input {
@@ -66,40 +66,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 +118,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 +138,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 {