@sankhyalabs/ezui 1.1.66 → 1.1.69

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

@@ -2,12 +2,12 @@ import { Component, Prop, h, Watch, Method, Event, Host } from '@stencil/core';
 export class EzCheck {
   constructor() {
     /**
-     * Deixa o campo disponível ou não interagir com o usuário.
+     * Deixa o campo disponível ou não para interação com o usuário.
      */
     this.enabled = true;
     /**
      * Existem dois modos de visualização: regular e switch.
-     * Se esta propriedade for omitida, o componete assume o formato "regular";
+     * Se esta propriedade for omitida, o componete assume o formato "regular".
      * No modo "regular" a visualização é a tradicional de uma caixinha marcada/desmarcada.
      * No modo "switch" o campo tem uma interface em formato de um pino liga/desliga.
      */
@@ -48,14 +48,14 @@ export class EzCheck {
   getLabelClasses() {
     let classes = "label";
     if (!this.enabled) {
-      classes = classes + " label--disabled";
+      classes += " label--disabled";
     }
     return classes;
   }
   render() {
     return (h(Host, null,
       h("input", { type: "checkbox", class: "regularMode", checked: this.value === true, onChange: () => { this.changeValue(); }, disabled: !this.enabled, ref: (el) => this._inputElem = el }),
-      this.label ? h("label", { class: this.getLabelClasses(), onClick: () => { this.changeValue(); }, title: this.label }, this.label) : null));
+      this.label ? h("label", { class: this.getLabelClasses(), onClick: () => { this.changeValue(); }, title: this.label }, this.label) : undefined));
   }
   static get is() { return "ez-check"; }
   static get encapsulation() { return "shadow"; }
@@ -78,7 +78,7 @@ export class EzCheck {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Label \u00E9 o t\u00EDtulo do campo"
+        "text": "T\u00EDtulo do campo"
       },
       "attribute": "label",
       "reflect": true
@@ -112,7 +112,7 @@ export class EzCheck {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Deixa o campo dispon\u00EDvel ou n\u00E3o interagir com o usu\u00E1rio."
+        "text": "Deixa o campo dispon\u00EDvel ou n\u00E3o para intera\u00E7\u00E3o com o usu\u00E1rio."
       },
       "attribute": "enabled",
       "reflect": true,
@@ -130,7 +130,7 @@ export class EzCheck {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Existem dois modos de visualiza\u00E7\u00E3o: regular e switch.\nSe esta propriedade for omitida, o componete assume o formato \"regular\";\nNo modo \"regular\" a visualiza\u00E7\u00E3o \u00E9 a tradicional de uma caixinha marcada/desmarcada.\nNo modo \"switch\" o campo tem uma interface em formato de um pino liga/desliga."
+        "text": "Existem dois modos de visualiza\u00E7\u00E3o: regular e switch.\nSe esta propriedade for omitida, o componete assume o formato \"regular\".\nNo modo \"regular\" a visualiza\u00E7\u00E3o \u00E9 a tradicional de uma caixinha marcada/desmarcada.\nNo modo \"switch\" o campo tem uma interface em formato de um pino liga/desliga."
       },
       "attribute": "mode",
       "reflect": true,

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

@@ -1,12 +1,12 @@
 :host {
-  /*@doc Define a altura do componente quando collapsado.*/
+  /*@doc Define a altura do componente quando colapsado.*/
   --collapsible-box--height: 42px;
 
   /*@doc Define o tamanho da fonte do header.*/
   --collapsible-box--font-size: var(--title--medium, 14px);
   /*@doc Define a família da fonte do header.*/
   --collapsible-box--font-family: var(--font-pattern, Arial);
-  /*@doc Define o peso da fonte header.*/
+  /*@doc Define o peso da fonte do header.*/
   --collapsible-box--font-weight: var(--text-weight--large, 600);
   /*@doc Define a cor da fonte do header.*/
   --collapsible-box--color: var(--title--primary);

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

@@ -74,7 +74,7 @@ export class EzCollapsibleBox {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Label \u00E9 o t\u00EDtulo do campo"
+        "text": "T\u00EDtulo do campo"
       },
       "attribute": "label",
       "reflect": true

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

@@ -58,7 +58,7 @@ export class EzComboBox {
     //FIXME: Provavelmente isso fará com que o popup abra em uma 
     //posição errada no futuro. Preferi fazer simples no começo,
     //porque não quis onerar o text input com essa funcionalidade...
-    const top = this.errormessage ? '0px' : '-17px';
+    const top = this.errorMessage ? '0px' : '-17px';
     this._floatingID = FloatingManager.float(this._optionsList, this._listContainer, { autoClose: true, top });
     window.requestAnimationFrame(() => {
       this._optionsList.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
@@ -228,7 +228,7 @@ export class EzComboBox {
   }
   render() {
     return (h(Host, null,
-      h("ez-text-input", { ref: elem => this._inputElement = elem, enabled: this.enabled, onInput: evt => this.onTextInputChangeHandler(evt), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onEzChange: event => event.stopPropagation(), onKeyDown: event => this.keyDownHandler(event), label: this.label, value: this.getText(), errormessage: this.errormessage }, this.searchmode ?
+      h("ez-text-input", { ref: elem => this._inputElement = elem, enabled: this.enabled, onInput: evt => this.onTextInputChangeHandler(evt), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onEzChange: event => event.stopPropagation(), onKeyDown: event => this.keyDownHandler(event), label: this.label, value: this.getText(), errorMessage: this.errorMessage }, this.searchmode ?
         h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { this.loadOptions('ADVANCED'); }, slot: "leftIcon" })
         :
           h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-options", slot: "rightIcon", onClick: () => this.showOptions() })),
@@ -277,7 +277,7 @@ export class EzComboBox {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Label \u00E9 o t\u00EDtulo do campo"
+        "text": "T\u00EDtulo do campo"
       },
       "attribute": "label",
       "reflect": true
@@ -319,10 +319,10 @@ export class EzComboBox {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Array no formato \"{value: string, label: string} que alimenta as op\u00E7\u00F5es do Combobox\""
+        "text": "Array no formato \"{value: string, label: string}\" que alimenta as op\u00E7\u00F5es do Combobox"
       }
     },
-    "errormessage": {
+    "errorMessage": {
       "type": "string",
       "mutable": true,
       "complexType": {
@@ -336,7 +336,7 @@ export class EzComboBox {
         "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
     },
     "searchmode": {

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

@@ -11,7 +11,7 @@ export class EzDateInput {
     this._textInput.label = this.label;
   }
   setErrorMessage() {
-    this._textInput.errormessage = this.errormessage;
+    this._textInput.errorMessage = this.errorMessage;
   }
   applyValueToInput() {
     if (this._textInput) {
@@ -20,7 +20,7 @@ export class EzDateInput {
   }
   changeValue(newValue) {
     newValue = newValue == null ? null : DateUtils.clearTime(newValue);
-    this._textInput.errormessage = "";
+    this._textInput.errorMessage = "";
     if (this.getTextValue(newValue) !== this.getTextValue(this.value)) {
       this.value = newValue;
       this.ezChange.emit();
@@ -32,7 +32,7 @@ export class EzDateInput {
     //FIXME: Provavelmente isso fará com que o popup abra em uma 
     //posição errada no futuro. Preferi fazer simples no começo,
     //porque não quis onerar o text input com essa funcionalidade...
-    const top = this._textInput.errormessage ? 0 : -17;
+    const top = this._textInput.errorMessage ? 0 : -17;
     this._calendar.fitVertical(top, this._elem.clientHeight);
   }
   hideCalendar() {
@@ -51,7 +51,7 @@ export class EzDateInput {
       }
     }
     else {
-      this._textInput.errormessage = "O valor digitado não é uma data válida";
+      this._textInput.errorMessage = "O valor digitado não é uma data válida";
     }
   }
   getTextValue(d) {
@@ -60,7 +60,7 @@ export class EzDateInput {
   render() {
     return (h(Host, null,
       h("ez-text-input", { class: "text-input", ref: elem => this._textInput = elem, onBlur: () => this.parseDate(), onKeyDown: event => { if (event.key === 'H' || event.key === 'h')
-          this.changeValue(new Date()); }, label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: "0123456789/", enabled: this.enabled, errormessage: this.errormessage },
+          this.changeValue(new Date()); }, label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage },
         h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })),
       h("ez-calendar", { onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
   }
@@ -85,7 +85,7 @@ export class EzDateInput {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Label \u00E9 o t\u00EDtulo do campo"
+        "text": "T\u00EDtulo do campo"
       },
       "attribute": "label",
       "reflect": true
@@ -127,7 +127,7 @@ export class EzDateInput {
       "reflect": true,
       "defaultValue": "true"
     },
-    "errormessage": {
+    "errorMessage": {
       "type": "string",
       "mutable": true,
       "complexType": {
@@ -141,7 +141,7 @@ export class EzDateInput {
         "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
     }
   }; }
@@ -166,7 +166,7 @@ export class EzDateInput {
       "propName": "label",
       "methodName": "setLabel"
     }, {
-      "propName": "errormessage",
+      "propName": "errorMessage",
       "methodName": "setErrorMessage"
     }, {
       "propName": "value",

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

@@ -36,6 +36,9 @@ export class EzDialog {
     this._currentMessage = this._messageQueue.shift();
     forceUpdate(this);
   }
+  /**
+   * Faz com que o componente seja exibido.
+   */
   async show(title, message, critical, confirm, icon) {
     this.opened = true;
     return new Promise(resolve => {
@@ -175,7 +178,7 @@ export class EzDialog {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Define o \u00EDcone a ser exibido ao lado do t\u00EDtulo do"
+        "text": "Define o \u00EDcone a ser exibido ao lado do t\u00EDtulo do componente"
       },
       "attribute": "personalized-icon-path",
       "reflect": false
@@ -276,7 +279,7 @@ export class EzDialog {
         "return": "Promise<boolean>"
       },
       "docs": {
-        "text": "",
+        "text": "Faz com que o componente seja exibido.",
         "tags": []
       }
     }

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 ícone
+     */
     this.size = 'medium';
   }
   isSprite() {
@@ -36,7 +38,7 @@ export class EzIcon {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Tamanho do \u00EDcone"
       },
       "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-label-chip/ez-label-chip.css

@@ -22,7 +22,7 @@
   --lc__label__container--border: 1px solid;
   /*@doc Define a cor da borda do container.*/
   --lc__label__container--border-color-strokes: var(--color--strokes, #DCE0E8);
-  /*@doc Define a cor do texto, do ícone do label (quando o chip está ativo) e do botão de remoção .*/
+  /*@doc Define a cor do texto, do ícone do label e do botão de remoção (quando o chip está ativo).*/
   --lc__label__container--color-primary: var(--color--primary, #008561);
   /*@doc Define a cor da borda e do fundo quando o chip está desativado.*/
   --lc__label__container-color--disable-secondary: var(--color--disable-secondary, #F2F5F8);
@@ -38,6 +38,7 @@
   --lc__label__container--text--disabled: var(--text--disable, #AFB6C0);
 
   /* Buttons */
+  /* @doc Contém o ícone do botão de fechamento. */
   --lc__btn__close--image: url('data:image/svg+xml;utf8,<svg width="8" height="8" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg"><path d="M 4.7098145,3.9968334 7.8535703,0.85318776 C 7.9473034,0.75946455 8,0.63233985 8,0.49978585 8,0.36723841 7.947304,0.24011361 7.8535703,0.14638378 7.7598354,0.05266059 7.6327257,6.48e-8 7.500152,6.48e-8 7.3676457,6.48e-8 7.2404691,0.0526608 7.1467354,0.14638378 L 4.00298,3.2900293 0.8591984,0.14638378 C 0.76546463,0.05266059 0.63834103,6.48e-8 0.50578123,6.48e-8 0.3732281,6.48e-8 0.24609783,0.05266059 0.15236397,0.14638378 0.05863012,0.24011361 0.00597395,0.36723841 0.00597395,0.49978585 c 0,0.132554 0.05265617,0.2596787 0.14639002,0.35340191 L 3.2961455,3.9968334 0.15236397,7.1411589 C 0.10466427,7.1872561 0.06663114,7.2424161 0.04046961,7.303371 0.01431473,7.3643212 5.6180845e-4,7.429943 1.6859246e-5,7.4962264 -5.2808998e-4,7.5625744 0.01214297,7.6283944 0.03729854,7.6897476 c 0.02514888,0.061416 0.06227604,0.1171794 0.1092096,0.1640783 0.0469402,0.046903 0.10274083,0.083936 0.16415749,0.1090508 0.0614166,0.025114 0.12721688,0.037703 0.19355667,0.037103 0.06634,-5.714e-4 0.13190027,-0.014457 0.19284393,-0.04064 0.0609507,-0.026246 0.11606474,-0.064351 0.16213217,-0.1120492 L 4.00298,4.7036374 7.1467354,7.8472967 c 0.093734,0.09373 0.2209103,0.1463572 0.3534166,0.1463572 0.1325737,0 0.2596834,-0.052623 0.3534183,-0.1463572 C 7.9473034,7.753567 8,7.6264624 8,7.493895 8,7.3613281 7.9473086,7.2342224 7.8535703,7.1404927 Z"/></svg>');
 }
 

package/dist/collection/components/ez-label-chip/ez-label-chip.js

@@ -109,7 +109,7 @@ export class EzLabelChip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Label \u00E9 o t\u00EDtulo exibido no componente."
+        "text": "T\u00EDtulo exibido no componente."
       },
       "attribute": "label",
       "reflect": true

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

@@ -1,5 +1,5 @@
 :host {
-  /*@doc Define a camada que o componente será exibido.*/
+  /*@doc Define a camada em que o componente será exibido.*/
   --modal-z-index: var(--most-visible, 3);
   /*@doc Define o espaçamento vertical do conteúdo do modal.*/
   --modal-vertical-padding: var(--space--large, 24px);

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

@@ -6,7 +6,7 @@ export class EzModal {
     */
     this.oppened = true;
     /**
-    * Define se o modal será fechado ao digitar ESC
+    * Define se o modal será fechado ao clicar ESC
     */
     this.closeesc = false;
     /**
@@ -124,7 +124,7 @@ export class EzModal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Define o tamanho do modal devem ser utilizados os tamanhos definidos de colunas como \"col-sd-3\""
+        "text": "Define o tamanho do modal. Devem ser utilizados os tamanhos definidos de colunas como \"col-sd-3\""
       },
       "attribute": "modalsize",
       "reflect": false
@@ -141,7 +141,7 @@ export class EzModal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Define o alinhamento do modal, seus valores podem ser 'right' ou 'left'"
+        "text": "Define o alinhamento do modal. Seus valores podem ser 'right' ou 'left'"
       },
       "attribute": "align",
       "reflect": false
@@ -176,7 +176,7 @@ export class EzModal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Define se o modal ser\u00E1 fechado ao digitar ESC"
+        "text": "Define se o modal ser\u00E1 fechado ao clicar ESC"
       },
       "attribute": "closeesc",
       "reflect": false,

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.css

@@ -1,7 +1,7 @@
 :host {
   display: block;
   width: 100%;
-  /*@doc Define a cor do fundo do input.*/
+  /*@doc Define a cor de fundo do input.*/
   --it__input--background-color: var(--background--medium, #e0e0e0);
   /*@doc Define a cor da borda do input.*/
   --it__input--border-color: var(--it__input--background-color);

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"; }
@@ -64,7 +64,7 @@ export class EzNumericInput {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Label \u00E9 o t\u00EDtulo do campo"
+        "text": "T\u00EDtulo do campo"
       },
       "attribute": "label",
       "reflect": true
@@ -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": {
@@ -164,7 +164,7 @@ export class EzNumericInput {
       "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",
@@ -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

@@ -52,8 +52,6 @@ export class EzPopover {
         if (_container.shadowRoot && _container.shadowRoot.contains(node)) {
           return true;
         }
-        //Here: we pass this._box as parameter but we need to change to _host 
-        //because we need to get the lasChild (inner content to put in slot)
         _container = this._host;
         return !_container.lastElementChild.shadowRoot ? _container.contains(node) : _container.lastElementChild.shadowRoot.contains(node);
       }
@@ -78,8 +76,6 @@ export class EzPopover {
         if (_container.shadowRoot && _container.shadowRoot.contains(node)) {
           return true;
         }
-        // Here: we pass this._box as parameter but we need to change to _host 
-        // because we need to get the lasChild (inner content to put in slot)
         _container = this._host;
         return !_container.lastElementChild.shadowRoot ? _container.contains(node) : _container.lastElementChild.shadowRoot.contains(node);
       }