@sankhyalabs/ezui 1.1.67 → 1.1.68

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

@@ -2,55 +2,56 @@
 
   /* dimensions */
   /*@doc Define a largura do componente.*/
-  --bt--min-width: 100px;
+  --button--min-width: 100px;
 
   /* dimensions */
   /*@doc Define a altura do componente.*/
-  --bt--height: 42px;
+  --button--height: 42px;
   /*@doc Define a largura do slot que contém o ícone.*/
-  --bt__icon--width: 18px;
+  --button__icon--width: 18px;
   /*@doc Define o espaçamento entre o ícone e o label.*/
-  --bt__inline__icon--padding: 12px;
+  --button__inline__icon--padding: 12px;
 
   /*@doc Define o espaçamento superior ao label.*/
-  --bt--padding-top: var(--space--medium, 12px);
+  --button--padding-top: var(--space--medium, 12px);
   /*@doc Define o espaçamento inferior ao label.*/
-  --bt--padding-bottom: var(--space--medium, 12px);
+  --button--padding-bottom: var(--space--medium, 12px);
   /*@doc Define o espaçamento a direita do label.*/
-  --bt--padding-right: var(--space--large, 24px);
+  --button--padding-right: var(--space--large, 24px);
   /*@doc Define o espaçamento a esquerda do label.*/
-  --bt--padding-left: var(--space--large, 24px);
+  --button--padding-left: var(--space--large, 24px);
 
   /* general */
   /*@doc Define a cor do label.*/
-  --bt--color: var(--text--inverted, #FFF);
+  --button--color: var(--text--inverted, #FFF);
   /*@doc Define o tamanho do label.*/
-  --bt--font-size: var(--text--medium, 14px);
+  --button--font-size: var(--text--medium, 14px);
   /*@doc Define a família da fonte do label.*/
-  --bt--font-family: var(--font-pattern, Arial);
+  --button--font-family: var(--font-pattern, Arial);
   /*@doc Define o peso da fonte do label.*/
-  --bt--font-weight: var(--text-weight--large);
+  --button--font-weight: var(--text-weight--large);
   /*@doc Define a cor de fundo do botão.*/
-  --bt--background-color: var(--color--primary, #c0c0c0);
+  --button--background-color: var(--color--primary, #c0c0c0);
   /*@doc Define o raio da borda do botão.*/
-  --bt--border-radius: var(--border--radius-large, 12px);
+  --button--border-radius: var(--border--radius-large, 12px);
   /*@doc Define o estilo da borda do botão.*/
-  --bt--border: none;
+  --button--border: none;
 
   /*@doc Define a cor de fundo quando o cursor está sobre o botão.*/
-  --bt--hover--background-color: var(--color--primary-700, var(--bt--background-color));
+  --button--hover--background-color: var(--color--primary-700, var(--button--background-color));
 
   /*@doc Define a cor do texto quando o botão está desabilitado.*/
-  --bt--disabled-color: var(--text--disable);
+  --button--disabled-color: var(--text--disable);
   /*@doc Define a cor de fundo quando o botão está desabilitado.*/
-  --bt--disabled--background-color: var(--color--disable-primary);
+  --button--disabled--background-color: var(--color--disable-primary);
 
   /*@doc Define o estido da borda quando o botão está selecionado.*/
-  --bt--focus--border: var(--bt--border);
+  --button--focus--border: var(--button--border);
   /*@doc Define a sombra do botão quando selecionado.*/
-  --bt--focus--box-shadow: none;
+  --button--focus--box-shadow: none;
 
-  --bt--link-color: var(--title--primary, '#C0C0C0');
+  /*@doc Define a cor do texto do botão no modo link.*/
+  --button--link-color: var(--title--primary, '#C0C0C0');
 }
 
 button {
@@ -63,35 +64,35 @@ button {
   transition: background-color 0.2s linear;
 
   /*public*/
-  min-width: var(--bt--min-width);
-  height: var(--bt--height);
-  font-family: var(--bt--font-family);
-  font-size: var(--bt--font-size);
-  font-weight: var(--bt--font-weight);
-  padding: var(--bt--padding-top) var(--bt--padding-right) var(--bt--padding-bottom) var(--bt--padding-left);
-  border-radius: var(--bt--border-radius);
-
-  background-color: var(--bt--background-color);
-  color: var(--bt--color);
-  fill: var(--bt--color);
-  border: var(--bt--border);
+  min-width: var(--button--min-width);
+  height: var(--button--height);
+  font-family: var(--button--font-family);
+  font-size: var(--button--font-size);
+  font-weight: var(--button--font-weight);
+  padding: var(--button--padding-top) var(--button--padding-right) var(--button--padding-bottom) var(--button--padding-left);
+  border-radius: var(--button--border-radius);
+
+  background-color: var(--button--background-color);
+  color: var(--button--color);
+  fill: var(--button--color);
+  border: var(--button--border);
 }
 
 button:hover {
-  background-color: var(--bt--hover--background-color);
+  background-color: var(--button--hover--background-color);
 }
 
 button:focus {
   /*FIXME: Estranho o botão não dar nenhuma indicação de que recebeu foco*/
   outline: none;
-  border: var(--bt--focus--border);
-  box-shadow: var(--bt--focus--box-shadow);
+  border: var(--button--focus--border);
+  box-shadow: var(--button--focus--box-shadow);
 }
 
 button:disabled {
-  background-color: var(--bt--disabled--background-color);
-  color: var(--bt--disabled-color);
-  fill: var(--bt--disabled-color);
+  background-color: var(--button--disabled--background-color);
+  color: var(--button--disabled-color);
+  fill: var(--button--disabled-color);
   border: none;
   cursor: no-drop;
 }
@@ -105,10 +106,10 @@ button.icon {
 
 a {
   /*private*/
-  font-family: var(--bt--font-family);
-  font-size: var(--bt--font-size);
-  font-weight: var(--bt--font-weight);
-  color: var(--bt--link-color);
+  font-family: var(--button--font-family);
+  font-size: var(--button--font-size);
+  font-weight: var(--button--font-weight);
+  color: var(--button--link-color);
   cursor: pointer;
   display: flex;
   align-items: center;

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

@@ -16,10 +16,10 @@ export class EzButton {
     if (this.mode == "link") {
       content.style.display = "inline";
       if (slot.name == "leftIcon") {
-        content.style.paddingRight = "var(--bt__inline__icon--padding)";
+        content.style.paddingRight = "var(--button__inline__icon--padding)";
       }
       else if (slot.name == "rightIcon") {
-        content.style.paddingLeft = "var(--bt__inline__icon--padding)";
+        content.style.paddingLeft = "var(--button__inline__icon--padding)";
       }
     }
   }

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

@@ -5,96 +5,96 @@
   ***************/
   /*dimensions */
   /*@doc Define a largura do box do checkbox.*/
-  --chk--box--width: 18px;
+  --check--box--width: 18px;
   /*@doc Define a altura do box do checkbox.*/
-  --chk--box--height: 18px;
+  --check--box--height: 18px;
   /*@doc Define a largura do input do checkbox.*/
-  --chk--width: calc(var(--chk--box--width) + 14px);
+  --check--width: calc(var(--check--box--width) + 14px);
   /*@doc Define a altura do input do checkbox */
-  --chk--height: calc(var(--chk--box--width) + 14px);
+  --check--height: calc(var(--check--box--width) + 14px);
 
   /*general*/
   /*@doc Define o raio da borda do input do checkbox.*/
-  --chk--border-radius: var(--border--radius-small);
+  --check--border-radius: var(--border--radius-small);
 
   /*box*/
   /*@doc Define a cor de fundo do input do checkbox quando marcado.*/
-  --chk--checked--background-color: var(--color--primary-200);
+  --check--checked--background-color: var(--color--primary-200);
   /*@doc Define a cor de fundo do input do checkbox quando focado.*/
-  --chk--focus--background-color: var(--color--strokes, #FFFFFF);
+  --check--focus--background-color: var(--color--strokes, #FFFFFF);
   /*@doc Define a cor de fundo do input do checkbox quando o cursor está sobre ele.*/
-  --chk--hover--background-color: var(--background--medium);
+  --check--hover--background-color: var(--background--medium);
   /*@doc Define a cor de fundo do input do checkbox quando marcado e desabilitado.*/
-  --chk--checked--disabled--background-color: var(--color--disable-secondary);
+  --check--checked--disabled--background-color: var(--color--disable-secondary);
 
   /*@doc Define o estilo da borda do input do checkbox.*/
-  --chk--border: var(--border--medium) var(--title--primary);
+  --check--border: var(--border--medium) var(--title--primary);
   /*@doc Define o estilo da borda do input do checkbox quando desabilitado.*/
-  --chk--disabled--border: var(--border--medium) var(--color--strokes);
+  --check--disabled--border: var(--border--medium) var(--color--strokes);
   /*@doc Define o estilo da borda do input do checkbox quando marcado.*/
-  --chk--checked--border: var(--border--medium) var(--color--primary);
+  --check--checked--border: var(--border--medium) var(--color--primary);
 
 
   /*@doc Define a cor de fundo do input do checkbox quando ativo e com o cursor sobre ele.*/
-  --chk--checked--hover--background-color: var(--color--primary-200);
+  --check--checked--hover--background-color: var(--color--primary-200);
   /*@doc Define a cor de fundo do input do checkbox quando ativo e focado.*/
-  --chk--checked--focus--background-color: var(--color--primary-300, #FFFFFF);
+  --check--checked--focus--background-color: var(--color--primary-300, #FFFFFF);
 
   /*check*/
   /*@doc Contém o ícone do input marcado.*/
-  --chk--check--image: url('data:image/svg+xml;utf8,<svg width="8" height="7" viewBox="0 0 8 7" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M7.70002 0.398999L7.48502 0.207997C7.31524 0.0598858 7.09376 -0.0150438 6.86894 -0.000430025C6.64411 0.0141838 6.43419 0.117153 6.28502 0.285997L2.70002 4.332L1.61802 3.384C1.44837 3.23576 1.22697 3.16067 1.00214 3.17509C0.77732 3.18952 0.567332 3.2923 0.418019 3.461L0.229019 3.674C0.0752361 3.84797 -0.00437434 4.07521 0.00721192 4.30713C0.0187982 4.53904 0.120661 4.75722 0.291019 4.915L2.27402 6.762C2.35832 6.8432 2.45842 6.90618 2.56811 6.94702C2.67779 6.98787 2.79471 7.00571 2.91159 6.99942C3.02846 6.99314 3.14279 6.96287 3.24747 6.91049C3.35214 6.85812 3.44492 6.78477 3.52002 6.695L7.79102 1.638C7.94063 1.46048 8.01486 1.23149 7.99786 0.999963C7.98085 0.768436 7.87396 0.552749 7.70002 0.398999Z"/></svg>');
+  --check--check--image: url('data:image/svg+xml;utf8,<svg width="8" height="7" viewBox="0 0 8 7" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M7.70002 0.398999L7.48502 0.207997C7.31524 0.0598858 7.09376 -0.0150438 6.86894 -0.000430025C6.64411 0.0141838 6.43419 0.117153 6.28502 0.285997L2.70002 4.332L1.61802 3.384C1.44837 3.23576 1.22697 3.16067 1.00214 3.17509C0.77732 3.18952 0.567332 3.2923 0.418019 3.461L0.229019 3.674C0.0752361 3.84797 -0.00437434 4.07521 0.00721192 4.30713C0.0187982 4.53904 0.120661 4.75722 0.291019 4.915L2.27402 6.762C2.35832 6.8432 2.45842 6.90618 2.56811 6.94702C2.67779 6.98787 2.79471 7.00571 2.91159 6.99942C3.02846 6.99314 3.14279 6.96287 3.24747 6.91049C3.35214 6.85812 3.44492 6.78477 3.52002 6.695L7.79102 1.638C7.94063 1.46048 8.01486 1.23149 7.99786 0.999963C7.98085 0.768436 7.87396 0.552749 7.70002 0.398999Z"/></svg>');
   /*@doc Define a cor de fundo do slot do ícone quando marcado.*/
-  --chk--check--background-color: var(--color--primary);
+  --check--check--background-color: var(--color--primary);
   /*@doc Define a cor de fundo do slot do ícone quando marcado e desabilitado.*/
-  --chk--check--disabled--background-color: var(--color--strokes);
+  --check--check--disabled--background-color: var(--color--strokes);
 
   /***************
     Switch mode
   ***************/
   /*dimensions */
   /*@doc Define a largura do slider do checkbox.*/
-  --swt--slider--width: 34px;
+  --switch--slider--width: 34px;
   /*@doc Define a altura do slider do checkbox.*/
-  --swt--slider--height: 14px;
+  --switch--slider--height: 14px;
   /*@doc Define a largura do pino do slider do checkbox.*/
-  --swt--pin--width: 20px;
+  --switch--pin--width: 20px;
   /*@doc Define a altura do pino do slider do checkbox.*/
-  --swt--pin--height: 20px;
+  --switch--pin--height: 20px;
   /*@doc Define a largura do slider quando focado.*/
-  --swt--focus--width: 32px;
+  --switch--focus--width: 32px;
   /*@doc Define a altura do slider quando focado.*/
-  --swt--focus--height: 32px;
+  --switch--focus--height: 32px;
 
   /*background*/
   /*@doc Define a cor de fundo do checkbox no modo switch.*/
-  --swt--background-color: var(--color--strokes);
+  --switch--background-color: var(--color--strokes);
   /*@doc Define a cor de fundo do checkbox desabilitado no modo switch.*/
-  --swt--disabled--background-color: var(--color--disable-secondary);
+  --switch--disabled--background-color: var(--color--disable-secondary);
   /*@doc Define a cor de fundo do checkbox marcado no modo switch.*/
-  --swt--checked--background-color: var(--color--primary-300);
+  --switch--checked--background-color: var(--color--primary-300);
 
   /*pin*/
   /*@doc Define a cor de fundo do pino do slider. */
-  --swt--pin--background-color: var(--background--xlight);
+  --switch--pin--background-color: var(--background--xlight);
   /*@doc Define a cor de fundo do pino do slider quando desabilitado. */
-  --swt--pin--disabled--background-color: var(--color--disable-secondary);
+  --switch--pin--disabled--background-color: var(--color--disable-secondary);
   /*@doc Define a cor de fundo do pino do slider quando marcado. */
-  --swt--pin--checked--background-color: var(--color--primary);
+  --switch--pin--checked--background-color: var(--color--primary);
   /*@doc Define a cor de fundo do pino do slider quando marcado e desabilitado1. */
-  --swt--pin--checked--disabled--background-color: #E8F7F4;
+  --switch--pin--checked--disabled--background-color: #E8F7F4;
   /*@doc Define a cor de fundo do pino do slider quando focado. */
-  --swt--pin--focus--background-color: var(--text--disable);
+  --switch--pin--focus--background-color: var(--text--disable);
   /*@doc Define a cor de fundo do pino do slider quando marcado e focado. */
-  --swt--pin--checked--focus--background-color: var(--color--primary);
+  --switch--pin--checked--focus--background-color: var(--color--primary);
 
   /*@doc Define o tamanho da fonte do label.*/
-  --chk--label--font-size: var(--text--medium, 14px);
+  --check--label--font-size: var(--text--medium, 14px);
   /*@doc Define a família da fonte do label.*/
-  --chk--label--font-family: var(--font-pattern, Arial);
+  --check--label--font-family: var(--font-pattern, Arial);
   /*@doc Define a cor da fonte do label.*/
-  --chk--label--color: var(--title--primary, #000);
+  --check--label--color: var(--title--primary, #000);
   /*@doc Define a cor da fonte do label quando desabilitado.*/
-  --chk--label--disabled--color: var(--text--disable, #AFB6C0);
+  --check--label--disabled--color: var(--text--disable, #AFB6C0);
 
   /***************
      host style  
@@ -123,14 +123,14 @@ input.regularMode {
 
 
   /*public*/
-  width: var(--chk--width);
-  height: var(--chk--height);
+  width: var(--check--width);
+  height: var(--check--height);
 }
 
 
 input.regularMode:enabled:hover {
   /*public*/
-  background-color: var(--chk--hover--background-color);
+  background-color: var(--check--hover--background-color);
 }
 
 input.regularMode:enabled:focus {
@@ -138,7 +138,7 @@ input.regularMode:enabled:focus {
   outline: none;
 
   /*public*/
-  background-color: var(--chk--focus--background-color);
+  background-color: var(--check--focus--background-color);
 }
 
 input.regularMode:disabled {
@@ -154,38 +154,38 @@ input.regularMode::before {
   display: block;
 
   /*public*/
-  width: var(--chk--box--width);
-  height: var(--chk--box--height);
-  border-radius: var(--chk--border-radius);
-  border: var(--chk--border);
+  width: var(--check--box--width);
+  height: var(--check--box--height);
+  border-radius: var(--check--border-radius);
+  border: var(--check--border);
 }
 
 input.regularMode:disabled::before {
   /*public*/
-  border: var(--chk--disabled--border);
+  border: var(--check--disabled--border);
 }
 
 /*-------------------------------checked---------------------------------*/
 input.regularMode:checked:enabled:hover {
   /*public*/
-  background-color: var(--chk--checked--hover--background-color);
+  background-color: var(--check--checked--hover--background-color);
 }
 
 input.regularMode:checked:enabled:focus {
   /*public*/
-  background-color: var(--chk--checked--focus--background-color);
+  background-color: var(--check--checked--focus--background-color);
 }
 
 input.regularMode:checked::before {
   /*public*/
-  border: var(--chk--checked--border);
-  background-color: var(--chk--checked--background-color);
+  border: var(--check--checked--border);
+  background-color: var(--check--checked--background-color);
 }
 
 input.regularMode:checked:disabled:before {
   /*public*/
-  border: var(--chk--disabled--border);
-  background-color: var(--chk--checked--disabled--background-color);
+  border: var(--check--disabled--border);
+  background-color: var(--check--checked--disabled--background-color);
 }
 
 input.regularMode:checked::after {
@@ -193,18 +193,18 @@ input.regularMode:checked::after {
   display: flex;
   position: absolute;
   content: "";
-  background-color: var(--chk--check--background-color);
+  background-color: var(--check--check--background-color);
   width: 8px;
   height: 7px;
 
   /*public*/
-  -webkit-mask-image: var(--chk--check--image);
-  mask-image: var(--chk--check--image);
+  -webkit-mask-image: var(--check--check--image);
+  mask-image: var(--check--check--image);
 }
 
 input.regularMode:checked:disabled::after {
   /*public*/
-  background-color: var(--chk--check--disabled--background-color);
+  background-color: var(--check--check--disabled--background-color);
 }
 
 /******** SWITCH MODE ********/
@@ -222,14 +222,14 @@ input.switchMode {
   transition: background-color var(--transition);
 
   /*public*/
-  width: var(--swt--slider--width);
-  height: var(--swt--slider--height);
-  background-color: var(--swt--background-color);
+  width: var(--switch--slider--width);
+  height: var(--switch--slider--height);
+  background-color: var(--switch--background-color);
 }
 
 input.switchMode:disabled {
   /*public*/
-  background-color: var(--swt--disabled--background-color);
+  background-color: var(--switch--disabled--background-color);
 }
 
 input.switchMode::after {
@@ -244,14 +244,14 @@ input.switchMode::after {
   border-radius: 50%;
 
   /*public*/
-  width: var(--swt--pin--width);
-  height: var(--swt--pin--height);
-  background-color: var(--swt--pin--background-color);
+  width: var(--switch--pin--width);
+  height: var(--switch--pin--height);
+  background-color: var(--switch--pin--background-color);
 }
 
 input.switchMode:disabled::after {
   /*public*/
-  background-color: var(--swt--pin--disabled--background-color);
+  background-color: var(--switch--pin--disabled--background-color);
 }
 
 /*-------------------------------ON---------------------------------*/
@@ -260,7 +260,7 @@ input.switchMode:checked {
   transition: background-color var(--transition);
 
   /*public*/
-  background-color: var(--swt--checked--background-color);
+  background-color: var(--switch--checked--background-color);
 }
 
 input.switchMode::before {
@@ -273,11 +273,11 @@ input.switchMode::before {
   opacity: 0;
 
   /*public*/
-  width: var(--swt--focus--width);
-  height: var(--swt--focus--height);
-  top: calc((var(--swt--slider--height) - var(--swt--focus--height)) / 2);
-  left: calc((var(--swt--pin--width) - var(--swt--focus--width))/2);
-  background-color: var(--swt--pin--focus--background-color);
+  width: var(--switch--focus--width);
+  height: var(--switch--focus--height);
+  top: calc((var(--switch--slider--height) - var(--switch--focus--height)) / 2);
+  left: calc((var(--switch--pin--width) - var(--switch--focus--width))/2);
+  background-color: var(--switch--pin--focus--background-color);
 }
 
 input.switchMode:focus::before {
@@ -288,24 +288,24 @@ input.switchMode:focus::before {
 
 input.switchMode:checked:focus::before {
   /*private*/
-  background-color: var(--swt--pin--checked--focus--background-color);
-  transform: translateX(calc(var(--swt--slider--width) - var(--swt--pin--width)));
+  background-color: var(--switch--pin--checked--focus--background-color);
+  transform: translateX(calc(var(--switch--slider--width) - var(--switch--pin--width)));
 }
 
 input.switchMode:checked::after {
   /*private*/
   transition: transform var(--transition);
   transition: background-color var(--transition);
-  transform: translateX(calc(var(--swt--slider--width) - var(--swt--pin--width))) translateY(-3px);
+  transform: translateX(calc(var(--switch--slider--width) - var(--switch--pin--width))) translateY(-3px);
   box-shadow: var(--shadow);
 
   /*public*/
-  background-color: var(--swt--pin--checked--background-color);
+  background-color: var(--switch--pin--checked--background-color);
 }
 
 input.switchMode:checked:disabled::after {
   /*public*/
-  background-color: var(--swt--pin--checked--disabled--background-color);
+  background-color: var(--switch--pin--checked--disabled--background-color);
 }
 
 .label {
@@ -313,14 +313,14 @@ input.switchMode:checked:disabled::after {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: var(--chk--label--color);
+  color: var(--check--label--color);
   text-shadow: var(--text-shadow);
-  font-size: var(--chk--label--font-size);
-  font-family: var(--chk--label--font-family);
+  font-size: var(--check--label--font-size);
+  font-family: var(--check--label--font-family);
   cursor: default;
   padding-left: var(--space--small);
 }
 
 .label--disabled {
-  color: var(--chk--label--disabled--color);
+  color: var(--check--label--disabled--color);
 }

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

@@ -55,7 +55,7 @@ export class EzCheck {
   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"; }

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() })),
@@ -322,7 +322,7 @@ export class EzComboBox {
         "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 })));
   }
@@ -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",