@sankhyalabs/ezui 1.1.77 → 1.1.78

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

@@ -83,10 +83,15 @@ export class EzCalendar {
   }
   selectDate(d) {
     let newDate = d;
-    if (this.value) {
+    if (this.value && (this.time || this.showSeconds)) {
       newDate.setHours(this.value.getHours());
       newDate.setMinutes(this.value.getMinutes());
-      newDate.setSeconds(this.value.getSeconds());
+      if (this.showSeconds) {
+        newDate.setSeconds(this.value.getSeconds());
+      }
+      else {
+        newDate.setSeconds(0);
+      }
     }
     this.value = newDate;
     this.ezChange.emit();

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

@@ -89,11 +89,6 @@
   width: var(--ez-combo-box--width);
 }
 
-ez-text-input {
-  --ez-text-input__input--background-color: var(--ez-combo-box__input--background-color, #FFFFFF);
-  --ez-text-input__input--border-color: var(--ez-combo-box__input--border-color, #DCE0E8);
-}
-
 .list-container {
   position: relative;
   width: 100%;

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

@@ -1,5 +1,6 @@
 import { FloatingManager } from "@sankhyalabs/core";
 import { Component, h, Host, Prop, State, Event, Element, Watch } from "@stencil/core";
+import CSSVarsUtils from "../../utils/CSSVarsUtils";
 export class EzComboBox {
   constructor() {
     /**
@@ -177,6 +178,9 @@ export class EzComboBox {
       this._optionsList.remove();
     }
   }
+  componentDidLoad() {
+    CSSVarsUtils.applyVarsTextInput(this.el, this._inputElement);
+  }
   //---------------------------------------------
   // Event handlers
   //---------------------------------------------

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

@@ -9,10 +9,10 @@
   --ez-date-input__calendar-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="15px"><path d="M 3.171875,5.25 C 2.6485088,5.25 2.21875,5.6797588 2.21875,6.203125 2.21875,6.7264912 2.6485088,7.15625 3.171875,7.15625 3.6952412,7.15625 4.125,6.7264912 4.125,6.203125 4.125,5.6797588 3.6952412,5.25 3.171875,5.25 Z m 2.875,0 C 5.5235088,5.25 5.09375,5.6797588 5.09375,6.203125 5.09375,6.7264912 5.5235088,7.15625 6.046875,7.15625 6.5702412,7.15625 7,6.7264912 7,6.203125 7,5.6797588 6.5702412,5.25 6.046875,5.25 Z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.9511719,-0.4297588 0.9511719,-0.953125 C 9.8730469,5.6797588 9.4452412,5.25 8.921875,5.25 Z m 2.873047,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.953125 0.953125,0.953125 0.523366,0 0.953125,-0.4297588 0.953125,-0.953125 C 12.748047,5.6797588 12.318288,5.25 11.794922,5.25 Z M 3.171875,8.1230469 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 0.5233662,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 C 6.5702412,10.029297 7,9.5995381 7,9.0761719 7,8.5528057 6.5702412,8.1230469 6.046875,8.1230469 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297587,0.9531251 0.953125,0.9531251 0.5233661,0 0.9531249,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.9531251 0.953125,0.9531251 0.523367,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.171875,10.998047 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 C 6.5702412,12.904297 7,12.474538 7,11.951172 7,11.427806 6.5702412,10.998047 6.046875,10.998047 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297587,0.953125 0.953125,0.953125 0.5233661,0 0.9531249,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.429759,0.953125 0.953125,0.953125 0.523367,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.5,0 c -0.554,0 -1,0.446 -1,1 v 0.050781 C 1.0853217,1.2909766 0,2.5186658 0,4 v 9 c 0,1.652487 1.3475134,3 3,3 h 9 c 1.652487,0 3,-1.347513 3,-3 V 4 C 15,2.5186658 13.914678,1.2909766 12.5,1.0507812 V 1 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 C 4.5,0.446 4.054,0 3.5,0 Z m 1,2.0996094 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 v -0.640625 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 V 2.1738281 C 13.311725,2.3905225 13.900391,3.11278 13.900391,4 v 9 c 0,1.062113 -0.838278,1.900391 -1.900391,1.900391 H 3 C 1.9378864,14.900391 1.0996094,14.062113 1.0996094,13 V 4 C 1.0996094,3.11278 1.6882747,2.3905225 2.5,2.1738281 v 0.5664063 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 z"/></svg>');
 }
 
-.text-input {
+/*.text-input {
   --ez-text-input__input--background-color: inherit;
   --ez-text-input__input--border-color: inherit;
-}
+}*/
 
 .btn-open-cal {
   outline: none;

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

@@ -22,7 +22,7 @@ export class EzDateInput {
   changeValue(newValue) {
     newValue = newValue == null ? null : DateUtils.clearTime(newValue);
     this._textInput.errorMessage = "";
-    if (this.getTextValue(newValue) !== this.getTextValue(this.value)) {
+    if (newValue !== this.value) {
       this.value = newValue;
       this.ezChange.emit();
     }

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

@@ -9,11 +9,6 @@
   --ez-date-input__calendar-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="15px"><path d="M 3.171875,5.25 C 2.6485088,5.25 2.21875,5.6797588 2.21875,6.203125 2.21875,6.7264912 2.6485088,7.15625 3.171875,7.15625 3.6952412,7.15625 4.125,6.7264912 4.125,6.203125 4.125,5.6797588 3.6952412,5.25 3.171875,5.25 Z m 2.875,0 C 5.5235088,5.25 5.09375,5.6797588 5.09375,6.203125 5.09375,6.7264912 5.5235088,7.15625 6.046875,7.15625 6.5702412,7.15625 7,6.7264912 7,6.203125 7,5.6797588 6.5702412,5.25 6.046875,5.25 Z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.9511719,-0.4297588 0.9511719,-0.953125 C 9.8730469,5.6797588 9.4452412,5.25 8.921875,5.25 Z m 2.873047,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.953125 0.953125,0.953125 0.523366,0 0.953125,-0.4297588 0.953125,-0.953125 C 12.748047,5.6797588 12.318288,5.25 11.794922,5.25 Z M 3.171875,8.1230469 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 0.5233662,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 C 6.5702412,10.029297 7,9.5995381 7,9.0761719 7,8.5528057 6.5702412,8.1230469 6.046875,8.1230469 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297587,0.9531251 0.953125,0.9531251 0.5233661,0 0.9531249,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.9531251 0.953125,0.9531251 0.523367,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.171875,10.998047 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 C 6.5702412,12.904297 7,12.474538 7,11.951172 7,11.427806 6.5702412,10.998047 6.046875,10.998047 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297587,0.953125 0.953125,0.953125 0.5233661,0 0.9531249,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.429759,0.953125 0.953125,0.953125 0.523367,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.5,0 c -0.554,0 -1,0.446 -1,1 v 0.050781 C 1.0853217,1.2909766 0,2.5186658 0,4 v 9 c 0,1.652487 1.3475134,3 3,3 h 9 c 1.652487,0 3,-1.347513 3,-3 V 4 C 15,2.5186658 13.914678,1.2909766 12.5,1.0507812 V 1 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 C 4.5,0.446 4.054,0 3.5,0 Z m 1,2.0996094 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 v -0.640625 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 V 2.1738281 C 13.311725,2.3905225 13.900391,3.11278 13.900391,4 v 9 c 0,1.062113 -0.838278,1.900391 -1.900391,1.900391 H 3 C 1.9378864,14.900391 1.0996094,14.062113 1.0996094,13 V 4 C 1.0996094,3.11278 1.6882747,2.3905225 2.5,2.1738281 v 0.5664063 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 z"/></svg>');
 }
 
-.text-input {
-  --ez-text-input__input--background-color: inherit;
-  --ez-text-input__input--border-color: inherit;
-}
-
 .btn-open-cal {
   outline: none;
   border: none;

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

@@ -1,5 +1,5 @@
 import { Component, Element, Host, h, Prop, Watch, Event } from '@stencil/core';
-import { DateUtils } from '@sankhyalabs/core';
+import { DateUtils, TimeFormatter } from '@sankhyalabs/core';
 import CSSVarsUtils from '../../utils/CSSVarsUtils';
 export class EzDateTimeInput {
   constructor() {
@@ -30,29 +30,18 @@ export class EzDateTimeInput {
     }
     else if (ev.shiftKey && ev.key === "Tab") {
       if (input.selectionStart > 0) {
-        let selectIni = input.value.lastIndexOf(":", input.selectionStart);
-        selectIni = selectIni === -1 ? input.value.lastIndexOf(" ", input.selectionStart) : selectIni;
-        selectIni = selectIni === -1 ? input.value.lastIndexOf("/", input.selectionStart) : selectIni;
-        selectIni = selectIni === -1 ? input.selectionStart : selectIni;
-        let selectFin = input.value.lastIndexOf(":", selectIni - 1);
-        selectFin = selectFin === -1 ? input.value.lastIndexOf(" ", selectIni - 1) : selectFin;
-        selectFin = selectFin === -1 ? input.value.lastIndexOf("/", selectIni - 1) : selectFin;
-        selectFin = selectFin === -1 ? 0 : selectFin + 1;
-        input.setSelectionRange(selectFin, selectIni);
-        ev.preventDefault();
+        let selectIni = input.value.lastIndexOf(" ", input.selectionStart);
+        if (selectIni !== -1) {
+          input.setSelectionRange(0, selectIni);
+          ev.preventDefault();
+        }
       }
     }
     else if (ev.key === "Tab") {
       if (input.value.length !== input.selectionEnd) {
-        let selectIni = input.value.indexOf("/", input.selectionEnd);
-        selectIni = selectIni === -1 ? input.value.indexOf(" ", input.selectionEnd) : selectIni;
-        selectIni = selectIni === -1 ? input.value.indexOf(":", input.selectionEnd) : selectIni;
+        let selectIni = input.value.indexOf(" ", input.selectionEnd);
         selectIni = selectIni === -1 ? input.selectionEnd : selectIni + 1;
-        let selectFin = input.value.indexOf("/", selectIni);
-        selectFin = selectFin === -1 ? input.value.indexOf(" ", selectIni) : selectFin;
-        selectFin = selectFin === -1 ? input.value.indexOf(":", selectIni) : selectFin;
-        selectFin = selectFin === -1 ? input.value.length : selectFin;
-        input.setSelectionRange(selectIni, selectFin);
+        input.setSelectionRange(selectIni, input.value.length);
         ev.preventDefault();
       }
     }
@@ -60,27 +49,22 @@ export class EzDateTimeInput {
   onFocused() {
     const input = this._textInput.shadowRoot.querySelector('input');
     if (input.selectionStart !== input.selectionEnd) {
-      let selectFin = input.value.indexOf("/");
-      selectFin = selectFin === -1 ? input.value.indexOf(" ") : selectFin;
-      selectFin = selectFin === -1 ? input.value.indexOf(":") : selectFin;
-      selectFin = selectFin === -1 ? input.value.length : selectFin;
-      input.setSelectionRange(0, selectFin);
+      let selectIni = input.value.indexOf(" ", input.selectionStart);
+      selectIni = selectIni === -1 ? input.value.length : selectIni;
+      input.setSelectionRange(0, selectIni);
     }
   }
   onClicked() {
     const input = this._textInput.shadowRoot.querySelector('input');
-    let selectIni = input.value.indexOf("/", input.selectionEnd);
-    selectIni = selectIni === -1 ? input.value.indexOf(" ", input.selectionEnd) : selectIni;
-    selectIni = selectIni === -1 ? input.value.indexOf(":", input.selectionEnd) : selectIni;
-    let selectFin = input.value.lastIndexOf(":", input.selectionEnd);
-    selectFin = selectFin === -1 ? input.value.lastIndexOf(" ", selectIni - 1) : selectFin;
-    selectFin = selectFin === -1 ? input.value.lastIndexOf("/", selectIni - 1) : selectFin;
-    selectFin = selectFin === -1 ? 0 : selectFin + 1;
-    input.setSelectionRange(selectFin, selectIni);
+    let selectIni = input.value.lastIndexOf(" ", input.selectionEnd);
+    selectIni = selectIni === -1 ? 0 : selectIni + 1;
+    selectIni = selectIni > input.selectionEnd ? 0 : selectIni;
+    let selectFin = selectIni === 0 ? input.value.indexOf(" ") : input.value.length;
+    input.setSelectionRange(selectIni, selectFin);
   }
   changeValue(newValue) {
     this._textInput.errorMessage = "";
-    if (this.getTextValue(newValue) !== this.getTextValue(this.value)) {
+    if (newValue !== this.value) {
       this.value = newValue;
       this.ezChange.emit();
     }
@@ -92,7 +76,12 @@ export class EzDateTimeInput {
   }
   parseDate() {
     const strValue = this._textInput.value;
-    const parsedDate = DateUtils.strToDate(strValue);
+    const partsDateTime = (strValue && strValue.length > 0) ? strValue.split(" ") : [];
+    const onlyDate = partsDateTime.length > 0 ? partsDateTime[0] : strValue;
+    const onlyTime = partsDateTime[1] ? partsDateTime[1] : "";
+    const parsedTime = TimeFormatter.prepareValue(onlyTime, this.showSeconds);
+    const strDateTime = onlyDate + (parsedTime && " " + parsedTime);
+    const parsedDate = DateUtils.strToDate(strDateTime);
     if (parsedDate || !strValue) {
       if (this.value === parsedDate) {
         this.changeValue(this.value);

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

@@ -1,13 +1,4 @@
 :host {
   display: block;
   width: 100%;
-  /*@doc Define a cor de fundo do input.*/
-  --ez-number-input__input--background-color: var(--background--medium, #e0e0e0);
-  /*@doc Define a cor da borda do input.*/
-  --ez-number-input__input--border-color: var(--ez-number-input__input--background-color);
 }
-
-.text-input {
-  --ez-number-input__input--background-color: inherit;
-  --ez-number-input__input--border-color: inherit;
-}

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

@@ -1,22 +1,12 @@
 import { NumberUtils } from "@sankhyalabs/core";
-import { Component, h, Event, Prop, Watch, State, Host } from "@stencil/core";
+import { Component, h, Event, Prop, Watch, Element } from "@stencil/core";
+import CSSVarsUtils from "../../utils/CSSVarsUtils";
 export class EzNumberInput {
   constructor() {
     /**
      * Deixa o campo disponível ou não para uso.
      */
     this.enabled = true;
-    /**
-     * Configura o alinhamento do texto.
-     */
-    this.textleft = false;
-    /**
-     * Opção de configurar a transformação de string to number entre formatação pt-BR e en-US
-     * (formatação de ENTRADA e SAÍDA do componente: pt-BR="###.###,##" en-US="###,###.##"; Default: "pt-BR")
-     * Qualquer outro valor que não seja "en-US", adotará a formatação "pt-BR"
-     * Não é case sensitive
-     */
-    this.formatNumber = "PT-BR";
   }
   setLabel() {
     this._textInput.label = this.label;
@@ -29,22 +19,11 @@ export class EzNumberInput {
       this._textInput.value = this.getTextValue(this.value);
     }
   }
-  onPrecisionChanged(newPrecision) {
-    if (isNaN(newPrecision)) {
-      this.precision = 0;
-    }
-  }
-  onPrettyPrecisionChanged(newPrettyPrecision) {
-    if (isNaN(newPrettyPrecision)) {
-      this.prettyPrecision = 0;
-    }
-  }
   changeValue(newValue) {
     this.errorMessage = "";
     if (newValue && newValue !== this.value) {
       this.value = newValue;
-      this._textInput.value = this.getTextValue(newValue);
-      this.ezChange.emit();
+      this.ezChange.emit(this.value);
     }
   }
   parseNumber() {
@@ -63,45 +42,16 @@ export class EzNumberInput {
     }
   }
   getTextValue(value) {
-    const parsedNumber = value ? NumberUtils.stringToNumber(value) : null;
-    if (parsedNumber != null && isNaN(parsedNumber)) {
-      this.errorMessage = "O valor digitado não é um número válido";
-    }
-    else {
-      return this.formatNumber.toUpperCase() !== "EN-US" ? NumberUtils.format(value.toString(), this.precision, this.prettyPrecision) : NumberUtils.changeFormat(NumberUtils.format(value.toString(), this.precision, this.prettyPrecision));
+    if (value) {
+      return this.precision > 0 ? NumberUtils.format(value.toString(), Number(this.precision), Number(this.prettyPrecision)) : value.toString();
     }
-    return "";
+    return null;
   }
   componentDidLoad() {
-    if (!this.textleft) {
-      this._textInput.shadowRoot.querySelector('input').classList.add('text--right');
-    }
-    let rightItem;
-    let letfItem;
-    for (const key in this._hostElement.children) {
-      if (Object.prototype.hasOwnProperty.call(this._hostElement.children, key)) {
-        const element = this._hostElement.children[key];
-        if (element.getAttribute('slot') === 'rightIcon') {
-          rightItem = element;
-        }
-        else if (element.getAttribute('slot') === 'leftIcon') {
-          letfItem = element;
-        }
-      }
-    }
-    this._leftSlotItem = letfItem;
-    this._rightSlotItem = rightItem;
-    this.slotElement;
-  }
-  componentWillLoad() {
-    this.onPrecisionChanged(this.precision);
-    this.onPrettyPrecisionChanged(this.prettyPrecision);
+    CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
   }
   render() {
-    return (h(Host, { ref: elem => this._hostElement = elem },
-      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: "0123456789-,.", enabled: this.enabled, errorMessage: this.errorMessage },
-        this._rightSlotItem ? h("slot", { name: "rightIcon", slot: "rightIcon" }) : undefined,
-        this._leftSlotItem ? h("slot", { name: "leftIcon", slot: "leftIcon" }) : undefined)));
+    return (h("ez-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-number-input"; }
   static get encapsulation() { return "shadow"; }
@@ -127,14 +77,14 @@ export class EzNumberInput {
         "text": "T\u00EDtulo do campo"
       },
       "attribute": "label",
-      "reflect": true
+      "reflect": false
     },
     "value": {
-      "type": "any",
+      "type": "number",
       "mutable": true,
       "complexType": {
-        "original": "string | number",
-        "resolved": "number | string",
+        "original": "number",
+        "resolved": "number",
         "references": {}
       },
       "required": false,
@@ -161,7 +111,7 @@ export class EzNumberInput {
         "text": "Deixa o campo dispon\u00EDvel ou n\u00E3o para uso."
       },
       "attribute": "enabled",
-      "reflect": true,
+      "reflect": false,
       "defaultValue": "true"
     },
     "errorMessage": {
@@ -183,7 +133,7 @@ export class EzNumberInput {
     },
     "precision": {
       "type": "number",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "number",
         "resolved": "number",
@@ -196,11 +146,11 @@ export class EzNumberInput {
         "text": "Precis\u00E3o decimal, ou seja, quantas casas decimais podem ser exibidas. Caso a\nquantidade de casas decimais do valor seja maior que precision, haver\u00E1 arredondamento"
       },
       "attribute": "precision",
-      "reflect": true
+      "reflect": false
     },
     "prettyPrecision": {
       "type": "number",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "number",
         "resolved": "number",
@@ -213,49 +163,9 @@ export class EzNumberInput {
         "text": "Esse atributo determina qual \u00E9 o n\u00FAmero m\u00EDnimo de casas depois da v\u00EDrgula.\nExemplo: Digamos que a precision seja igual a 4, assim qualquer n\u00FAmero ser\u00E1 \nrepresentado com 4 casas decimais mesmo que iguais a zero: 1,0100.\nSe prettiprecision igual a 2, como n\u00E3o h\u00E1 necessidade de mais de duas casas decimais\no valor exibido ser\u00E1 1,01. Por outro lado, at\u00E9 a quarta casa n\u00E3o haver\u00E1 arredondamento\n(1,1234 = 1,1234) mas a partir da quinta casa sim (1,12345 = 1,1235)."
       },
       "attribute": "pretty-precision",
-      "reflect": true
-    },
-    "textleft": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Configura o alinhamento do texto."
-      },
-      "attribute": "textleft",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "formatNumber": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Op\u00E7\u00E3o de configurar a transforma\u00E7\u00E3o de string to number entre formata\u00E7\u00E3o pt-BR e en-US\n(formata\u00E7\u00E3o de ENTRADA e SA\u00CDDA do componente: pt-BR=\"###.###,##\" en-US=\"###,###.##\"; Default: \"pt-BR\")\nQualquer outro valor que n\u00E3o seja \"en-US\", adotar\u00E1 a formata\u00E7\u00E3o \"pt-BR\"\nN\u00E3o \u00E9 case sensitive"
-      },
-      "attribute": "format-number",
-      "reflect": true,
-      "defaultValue": "\"PT-BR\""
+      "reflect": false
     }
   }; }
-  static get states() { return {
-    "_leftSlotItem": {},
-    "_rightSlotItem": {}
-  }; }
   static get events() { return [{
       "method": "ezChange",
       "name": "ezChange",
@@ -267,11 +177,12 @@ export class EzNumberInput {
         "text": "Evento disparado quando o estado do componente \u00E9 alterado (onEzChange)."
       },
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "number",
+        "resolved": "number",
         "references": {}
       }
     }]; }
+  static get elementRef() { return "_elem"; }
   static get watchers() { return [{
       "propName": "label",
       "methodName": "setLabel"
@@ -281,11 +192,5 @@ export class EzNumberInput {
     }, {
       "propName": "value",
       "methodName": "applyValueToInput"
-    }, {
-      "propName": "precision",
-      "methodName": "onPrecisionChanged"
-    }, {
-      "propName": "prettyPrecision",
-      "methodName": "onPrettyPrecisionChanged"
     }]; }
 }

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

@@ -1,4 +1,5 @@
-import { Component, Event, h, Prop, Watch } from "@stencil/core";
+import { Component, Event, h, Prop, Watch, Element } from "@stencil/core";
+import CSSVarsUtils from "../../utils/CSSVarsUtils";
 export class EzSearch {
   constructor() {
     /**
@@ -24,6 +25,9 @@ export class EzSearch {
     this.value = evt.detail;
     this.ezChange.emit(evt.detail);
   }
+  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 }));
   }
@@ -203,6 +207,7 @@ export class EzSearch {
         "references": {}
       }
     }]; }
+  static get elementRef() { return "_elem"; }
   static get watchers() { return [{
       "propName": "value",
       "methodName": "updateValue"

package/dist/collection/utils/CSSVarsUtils.js

@@ -1,14 +1,14 @@
 export default class CSSVarsUtils {
-  static applyVarsTextInput(host, textInput) {
-    if (textInput) {
-      CSSVarsUtils.applyIfExists(host, textInput, '--text-input__input--background-color');
-      CSSVarsUtils.applyIfExists(host, textInput, '--text-input__input--border-color');
+  static applyVarsTextInput(host, child) {
+    if (child) {
+      CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__input--background-color');
+      CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__input--border-color');
     }
   }
-  static applyIfExists(host, textInput, varName) {
+  static applyIfExists(host, element, varName) {
     const prop = getComputedStyle(host).getPropertyValue(varName);
     if (prop) {
-      textInput.style.setProperty(varName, prop);
+      element.style.setProperty(varName, prop);
     }
   }
 }