@sankhyalabs/ezui 1.1.76 → 1.1.79

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

@@ -5,96 +5,96 @@
   ***************/
   /*dimensions */
   /*@doc Define a largura do box do checkbox.*/
-  --check--box--width: 18px;
+  --ez-check--box--width: 18px;
   /*@doc Define a altura do box do checkbox.*/
-  --check--box--height: 18px;
+  --ez-check--box--height: 18px;
   /*@doc Define a largura do input do checkbox.*/
-  --check--width: calc(var(--check--box--width) + 14px);
+  --ez-check--width: calc(var(--ez-check--box--width) + 14px);
   /*@doc Define a altura do input do checkbox */
-  --check--height: calc(var(--check--box--width) + 14px);
+  --ez-check--height: calc(var(--ez-check--box--width) + 14px);
 
   /*general*/
   /*@doc Define o raio da borda do input do checkbox.*/
-  --check--border-radius: var(--border--radius-small);
+  --ez-check--border-radius: var(--border--radius-small);
 
   /*box*/
   /*@doc Define a cor de fundo do input do checkbox quando marcado.*/
-  --check--checked--background-color: var(--color--primary-200);
+  --ez-check--checked--background-color: var(--color--primary-200);
   /*@doc Define a cor de fundo do input do checkbox quando focado.*/
-  --check--focus--background-color: var(--color--strokes, #FFFFFF);
+  --ez-check--focus--background-color: var(--color--strokes, #FFFFFF);
   /*@doc Define a cor de fundo do input do checkbox quando o cursor está sobre ele.*/
-  --check--hover--background-color: var(--background--medium);
+  --ez-check--hover--background-color: var(--background--medium);
   /*@doc Define a cor de fundo do input do checkbox quando marcado e desabilitado.*/
-  --check--checked--disabled--background-color: var(--color--disable-secondary);
+  --ez-check--checked--disabled--background-color: var(--color--disable-secondary);
 
   /*@doc Define o estilo da borda do input do checkbox.*/
-  --check--border: var(--border--medium) var(--title--primary);
+  --ez-check--border: var(--border--medium) var(--title--primary);
   /*@doc Define o estilo da borda do input do checkbox quando desabilitado.*/
-  --check--disabled--border: var(--border--medium) var(--color--strokes);
+  --ez-check--disabled--border: var(--border--medium) var(--color--strokes);
   /*@doc Define o estilo da borda do input do checkbox quando marcado.*/
-  --check--checked--border: var(--border--medium) var(--color--primary);
+  --ez-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.*/
-  --check--checked--hover--background-color: var(--color--primary-200);
+  --ez-check--checked--hover--background-color: var(--color--primary-200);
   /*@doc Define a cor de fundo do input do checkbox quando ativo e focado.*/
-  --check--checked--focus--background-color: var(--color--primary-300, #FFFFFF);
+  --ez-check--checked--focus--background-color: var(--color--primary-300, #FFFFFF);
 
   /*check*/
   /*@doc Contém o ícone do input marcado.*/
-  --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>');
+  --ez-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.*/
-  --check--check--background-color: var(--color--primary);
+  --ez-check--check--background-color: var(--color--primary);
   /*@doc Define a cor de fundo do slot do ícone quando marcado e desabilitado.*/
-  --check--check--disabled--background-color: var(--color--strokes);
+  --ez-check--check--disabled--background-color: var(--color--strokes);
 
   /***************
     Switch mode
   ***************/
   /*dimensions */
   /*@doc Define a largura do slider do checkbox.*/
-  --switch--slider--width: 34px;
+  --ez-switch--slider--width: 34px;
   /*@doc Define a altura do slider do checkbox.*/
-  --switch--slider--height: 14px;
+  --ez-switch--slider--height: 14px;
   /*@doc Define a largura do pino do slider do checkbox.*/
-  --switch--pin--width: 20px;
+  --ez-switch--pin--width: 20px;
   /*@doc Define a altura do pino do slider do checkbox.*/
-  --switch--pin--height: 20px;
+  --ez-switch--pin--height: 20px;
   /*@doc Define a largura do slider quando focado.*/
-  --switch--focus--width: 32px;
+  --ez-switch--focus--width: 32px;
   /*@doc Define a altura do slider quando focado.*/
-  --switch--focus--height: 32px;
+  --ez-switch--focus--height: 32px;
 
   /*background*/
   /*@doc Define a cor de fundo do checkbox no modo switch.*/
-  --switch--background-color: var(--color--strokes);
+  --ez-switch--background-color: var(--color--strokes);
   /*@doc Define a cor de fundo do checkbox desabilitado no modo switch.*/
-  --switch--disabled--background-color: var(--color--disable-secondary);
+  --ez-switch--disabled--background-color: var(--color--disable-secondary);
   /*@doc Define a cor de fundo do checkbox marcado no modo switch.*/
-  --switch--checked--background-color: var(--color--primary-300);
+  --ez-switch--checked--background-color: var(--color--primary-300);
 
   /*pin*/
   /*@doc Define a cor de fundo do pino do slider. */
-  --switch--pin--background-color: var(--background--xlight);
+  --ez-switch--pin--background-color: var(--background--xlight);
   /*@doc Define a cor de fundo do pino do slider quando desabilitado. */
-  --switch--pin--disabled--background-color: var(--color--disable-secondary);
+  --ez-switch--pin--disabled--background-color: var(--color--disable-secondary);
   /*@doc Define a cor de fundo do pino do slider quando marcado. */
-  --switch--pin--checked--background-color: var(--color--primary);
+  --ez-switch--pin--checked--background-color: var(--color--primary);
   /*@doc Define a cor de fundo do pino do slider quando marcado e desabilitado1. */
-  --switch--pin--checked--disabled--background-color: #E8F7F4;
+  --ez-switch--pin--checked--disabled--background-color: #E8F7F4;
   /*@doc Define a cor de fundo do pino do slider quando focado. */
-  --switch--pin--focus--background-color: var(--text--disable);
+  --ez-switch--pin--focus--background-color: var(--text--disable);
   /*@doc Define a cor de fundo do pino do slider quando marcado e focado. */
-  --switch--pin--checked--focus--background-color: var(--color--primary);
+  --ez-switch--pin--checked--focus--background-color: var(--color--primary);
 
   /*@doc Define o tamanho da fonte do label.*/
-  --check--label--font-size: var(--text--medium, 14px);
+  --ez-check--label--font-size: var(--text--medium, 14px);
   /*@doc Define a família da fonte do label.*/
-  --check--label--font-family: var(--font-pattern, Arial);
+  --ez-check--label--font-family: var(--font-pattern, Arial);
   /*@doc Define a cor da fonte do label.*/
-  --check--label--color: var(--title--primary, #000);
+  --ez-check--label--color: var(--title--primary, #000);
   /*@doc Define a cor da fonte do label quando desabilitado.*/
-  --check--label--disabled--color: var(--text--disable, #AFB6C0);
+  --ez-check--label--disabled--color: var(--text--disable, #AFB6C0);
 
   /***************
      host style  
@@ -123,14 +123,14 @@ input.regularMode {
 
 
   /*public*/
-  width: var(--check--width);
-  height: var(--check--height);
+  width: var(--ez-check--width);
+  height: var(--ez-check--height);
 }
 
 
 input.regularMode:enabled:hover {
   /*public*/
-  background-color: var(--check--hover--background-color);
+  background-color: var(--ez-check--hover--background-color);
 }
 
 input.regularMode:enabled:focus {
@@ -138,7 +138,7 @@ input.regularMode:enabled:focus {
   outline: none;
 
   /*public*/
-  background-color: var(--check--focus--background-color);
+  background-color: var(--ez-check--focus--background-color);
 }
 
 input.regularMode:disabled {
@@ -154,38 +154,38 @@ input.regularMode::before {
   display: block;
 
   /*public*/
-  width: var(--check--box--width);
-  height: var(--check--box--height);
-  border-radius: var(--check--border-radius);
-  border: var(--check--border);
+  width: var(--ez-check--box--width);
+  height: var(--ez-check--box--height);
+  border-radius: var(--ez-check--border-radius);
+  border: var(--ez-check--border);
 }
 
 input.regularMode:disabled::before {
   /*public*/
-  border: var(--check--disabled--border);
+  border: var(--ez-check--disabled--border);
 }
 
 /*-------------------------------checked---------------------------------*/
 input.regularMode:checked:enabled:hover {
   /*public*/
-  background-color: var(--check--checked--hover--background-color);
+  background-color: var(--ez-check--checked--hover--background-color);
 }
 
 input.regularMode:checked:enabled:focus {
   /*public*/
-  background-color: var(--check--checked--focus--background-color);
+  background-color: var(--ez-check--checked--focus--background-color);
 }
 
 input.regularMode:checked::before {
   /*public*/
-  border: var(--check--checked--border);
-  background-color: var(--check--checked--background-color);
+  border: var(--ez-check--checked--border);
+  background-color: var(--ez-check--checked--background-color);
 }
 
 input.regularMode:checked:disabled:before {
   /*public*/
-  border: var(--check--disabled--border);
-  background-color: var(--check--checked--disabled--background-color);
+  border: var(--ez-check--disabled--border);
+  background-color: var(--ez-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(--check--check--background-color);
+  background-color: var(--ez-check--check--background-color);
   width: 8px;
   height: 7px;
 
   /*public*/
-  -webkit-mask-image: var(--check--check--image);
-  mask-image: var(--check--check--image);
+  -webkit-mask-image: var(--ez-check--check--image);
+  mask-image: var(--ez-check--check--image);
 }
 
 input.regularMode:checked:disabled::after {
   /*public*/
-  background-color: var(--check--check--disabled--background-color);
+  background-color: var(--ez-check--check--disabled--background-color);
 }
 
 /******** SWITCH MODE ********/
@@ -222,14 +222,14 @@ input.switchMode {
   transition: background-color var(--transition);
 
   /*public*/
-  width: var(--switch--slider--width);
-  height: var(--switch--slider--height);
-  background-color: var(--switch--background-color);
+  width: var(--ez-switch--slider--width);
+  height: var(--ez-switch--slider--height);
+  background-color: var(--ez-switch--background-color);
 }
 
 input.switchMode:disabled {
   /*public*/
-  background-color: var(--switch--disabled--background-color);
+  background-color: var(--ez-switch--disabled--background-color);
 }
 
 input.switchMode::after {
@@ -244,14 +244,14 @@ input.switchMode::after {
   border-radius: 50%;
 
   /*public*/
-  width: var(--switch--pin--width);
-  height: var(--switch--pin--height);
-  background-color: var(--switch--pin--background-color);
+  width: var(--ez-switch--pin--width);
+  height: var(--ez-switch--pin--height);
+  background-color: var(--ez-switch--pin--background-color);
 }
 
 input.switchMode:disabled::after {
   /*public*/
-  background-color: var(--switch--pin--disabled--background-color);
+  background-color: var(--ez-switch--pin--disabled--background-color);
 }
 
 /*-------------------------------ON---------------------------------*/
@@ -260,7 +260,7 @@ input.switchMode:checked {
   transition: background-color var(--transition);
 
   /*public*/
-  background-color: var(--switch--checked--background-color);
+  background-color: var(--ez-switch--checked--background-color);
 }
 
 input.switchMode::before {
@@ -273,11 +273,11 @@ input.switchMode::before {
   opacity: 0;
 
   /*public*/
-  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);
+  width: var(--ez-switch--focus--width);
+  height: var(--ez-switch--focus--height);
+  top: calc((var(--ez-switch--slider--height) - var(--ez-switch--focus--height)) / 2);
+  left: calc((var(--ez-switch--pin--width) - var(--ez-switch--focus--width))/2);
+  background-color: var(--ez-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(--switch--pin--checked--focus--background-color);
-  transform: translateX(calc(var(--switch--slider--width) - var(--switch--pin--width)));
+  background-color: var(--ez-switch--pin--checked--focus--background-color);
+  transform: translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width)));
 }
 
 input.switchMode:checked::after {
   /*private*/
   transition: transform var(--transition);
   transition: background-color var(--transition);
-  transform: translateX(calc(var(--switch--slider--width) - var(--switch--pin--width))) translateY(-3px);
+  transform: translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width))) translateY(-3px);
   box-shadow: var(--shadow);
 
   /*public*/
-  background-color: var(--switch--pin--checked--background-color);
+  background-color: var(--ez-switch--pin--checked--background-color);
 }
 
 input.switchMode:checked:disabled::after {
   /*public*/
-  background-color: var(--switch--pin--checked--disabled--background-color);
+  background-color: var(--ez-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(--check--label--color);
+  color: var(--ez-check--label--color);
   text-shadow: var(--text-shadow);
-  font-size: var(--check--label--font-size);
-  font-family: var(--check--label--font-family);
+  font-size: var(--ez-check--label--font-size);
+  font-family: var(--ez-check--label--font-family);
   cursor: default;
   padding-left: var(--space--small);
 }
 
 .label--disabled {
-  color: var(--check--label--disabled--color);
+  color: var(--ez-check--label--disabled--color);
 }

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

@@ -43,7 +43,7 @@ export class EzCheck {
   }
   changeValue() {
     this.value = !this.value;
-    this.ezChange.emit();
+    this.ezChange.emit(this.value);
   }
   getLabelClasses() {
     let classes = "label";
@@ -148,8 +148,8 @@ export class EzCheck {
         "text": "Evento disparado ao mudar o estado do check(onEzChange)."
       },
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "any",
+        "resolved": "any",
         "references": {}
       }
     }]; }

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

@@ -2,65 +2,81 @@
 
   /* dimensions */
   /*@doc Define altura do input.*/
-  --combo-box--height: 42px;
+  --ez-combo-box--height: 42px;
   /*@doc Define largura do input.*/
-  --combo-box--width: 100%;
+  --ez-combo-box--width: 100%;
   /*@doc Define largura do slot do ícone do input.*/
-  --combo-box__icon--width: 48px;
+  --ez-combo-box__icon--width: 48px;
 
   /* general */
   /*@doc Define o raio da borda do input.*/
-  --combo-box--border-radius: var(--border--radius-medium, 12px);
+  --ez-combo-box--border-radius: var(--border--radius-medium, 12px);
   /*@doc Define o raio da borda do input quando pequeno.*/
-  --combo-box--border-radius-small: var(--border--radius-small, 6px);
+  --ez-combo-box--border-radius-small: var(--border--radius-small, 6px);
   /*@doc Define o tamanho da fonte dentro do input.*/
-  --combo-box--font-size: var(--text--medium, 14px);
+  --ez-combo-box--font-size: var(--text--medium, 14px);
   /*@doc Define a família da fonte dentro do input.*/
-  --combo-box--font-family: var(--font-pattern, Arial);
+  --ez-combo-box--font-family: var(--font-pattern, Arial);
   /*@doc Define o peso da fonte dentro do input quando pesada.*/
-  --combo-box--font-weight--large: var(--text-weight--large, 500);
+  --ez-combo-box--font-weight--large: var(--text-weight--large, 500);
   /*@doc Define o peso da fonte dentro do input quando média.*/
-  --combo-box--font-weight--medium: var(--text-weight--medium, 400);
+  --ez-combo-box--font-weight--medium: var(--text-weight--medium, 400);
   /*@doc Define a cor de fundo da lista de opções.*/
-  --combo-box--background-color--xlight: var(--background--xlight, #fff);
+  --ez-combo-box--background-color--xlight: var(--background--xlight, #fff);
+  /*@doc Define a cor de fundo dos itens da lista de opções.*/
+  --ez-combo-box--background-medium: var(--background--medium, #f0f3f7);
 
   /* input */
   /*@doc Define a cor de fundo do input.*/
-  --combo-box__input--background-color: var(--background--medium, #e0e0e0);
+  --ez-combo-box__input--background-color: var(--background--medium, #e0e0e0);
   /*@doc Define o estilo da borda do input.*/
-  --combo-box__input--border: var(--border--medium, 2px solid);
+  --ez-combo-box__input--border: var(--border--medium, 2px solid);
   /*@doc Define a cor da borda do input.*/
-  --combo-box__input--border-color: var(--combo-box__input--background-color);
+  --ez-combo-box__input--border-color: var(--ez-combo-box__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.*/
-  --combo-box__input--focus--border-color: var(--color--primary, #008561);
+  --ez-combo-box__input--focus--border-color: var(--color--primary, #008561);
   /*@doc Define a cor de fundo do input quando desabilitado.*/
-  --combo-box__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
+  --ez-combo-box__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
   /*@doc Define a cor do texto dentro do input quando desabilitado.*/
-  --combo-box__input--disabled--color: var(--text--disable, #AFB6C0);
+  --ez-combo-box__input--disabled--color: var(--text--disable, #AFB6C0);
   /*@doc Define a cor da borda do input quando com erro.*/
-  --combo-box__input--error--border-color: #CC2936;
+  --ez-combo-box__input--error--border-color: #CC2936;
+
+  /* buttons */
+  /*@doc Define a cor do botão de pesquisa do componente.*/
+  --ez-combo-box__btn-search--background-color: var(--text--primary, #626e82);
+  /*@doc Define a cor do botão de pesquisa do componente quando desabilitado.*/
+  --ez-combo-box__btn-search-disabled--background-color: var(--text--disable, #AFB6C0);
+  /*@doc Define a cor do botão de pesquisa do componente quando o mouse está sobre ele.*/
+  --ez-combo-box__btn-search-hover--background-color: var(--color--primary, #4e4e4e);
+  /*@doc Define a cor do botão de opções do componente.*/
+  --ez-combo-box__btn-options--background-color: var(--text--primary, #626e82);
+  /*@doc Define a cor do botão de opções do componente quando desabilitado.*/
+  --ez-combo-box__btn-options-disabled--background-color: var(--text--disable, #AFB6C0);
+  /*@doc Define a cor do botão de opções do componente quando o mouse está sobre ele.*/
+  --ez-combo-box__btn-options-hover--background-color: var(--color--primary, #4e4e4e);
 
   /* label */
   /*@doc Define a cor do label.*/
-  --combo-box__label--color: var(--title--primary, #919191);
+  --ez-combo-box__label--color: var(--title--primary, #919191);
 
   /* list */
   /*@doc Define a cor do texto da lista de opções.*/
-  --combo-box__list-text--primary: var(--text--primary, #626e82);
+  --ez-combo-box__list-text--primary: var(--text--primary, #626e82);
   /*@doc Define a altura do box da lista de opções.*/
-  --combo-box__list-height: calc(var(--combo-box--font-size) + var(--combo-box--space--medium));
+  --ez-combo-box__list-height: calc(var(--ez-combo-box--font-size) + var(--ez-combo-box--space--medium));
 
   /*@doc Contém a imagem do ícone que aciona a lista.*/
-  --combo-box--drop-down__image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="16px"><path d="M 1.8585859,3.0707069 7.9999998,9.2121212 14.141414,3.0707069 16,5.0101006 7.9999998,12.929293 0,4.9292932 Z"/></svg>');
+  --ez-combo-box__drop-down-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="16px"><path d="M 1.8585859,3.0707069 7.9999998,9.2121212 14.141414,3.0707069 16,5.0101006 7.9999998,12.929293 0,4.9292932 Z"/></svg>');
   /*@doc Contém a imagem do ícone de pesquisa.*/
-  --combo-box--search__image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="22px" width="22px"><path d="m 9.4,2.3 c 4.1,0 7.4,3.2 7.4,7.2 0,1.8 -0.7,3.4 -1.8,4.7 l 0.3,0.3 h 0.9 l 5.7,5.6 -1.7,1.7 -5.7,-5.6 V 15.3 L 14.3,15 C 13,16.1 11.3,16.7 9.5,16.7 5.3,16.7 2,13.5 2,9.5 2,5.5 5.3,2.3 9.4,2.3 m 0,2.2 c -2.9,0 -5.1,2.2 -5.1,5 0,2.8 2.3,5 5.1,5 2.8,0 5.1,-2.2 5.1,-5 0,-2.8 -2.2,-5 -5.1,-5 z"/></svg>');
+  --ez-combo-box__search-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="22px" width="22px"><path d="m 9.4,2.3 c 4.1,0 7.4,3.2 7.4,7.2 0,1.8 -0.7,3.4 -1.8,4.7 l 0.3,0.3 h 0.9 l 5.7,5.6 -1.7,1.7 -5.7,-5.6 V 15.3 L 14.3,15 C 13,16.1 11.3,16.7 9.5,16.7 5.3,16.7 2,13.5 2,9.5 2,5.5 5.3,2.3 9.4,2.3 m 0,2.2 c -2.9,0 -5.1,2.2 -5.1,5 0,2.8 2.3,5 5.1,5 2.8,0 5.1,-2.2 5.1,-5 0,-2.8 -2.2,-5 -5.1,-5 z"/></svg>');
 
   /* espaçamento */
   /*@doc Define um espaçamento mediano entre elementos do componente.*/
-  --combo-box--space--medium: var(--space--medium, 12px);
+  --ez-combo-box--space--medium: var(--space--medium, 12px);
   /*@doc Define um espaçamento pequeno entre elementos do componente.*/
-  --combo-box--space--small: var(--space--small, 6px);
+  --ez-combo-box--space--small: var(--space--small, 6px);
 
   /***************
      host style  
@@ -70,12 +86,7 @@
   flex-wrap: wrap;
   position: relative;
   /*public*/
-  width: var(--combo-box--width);
-}
-
-ez-text-input {
-  --ez-text-input__input--background-color: var(--combo-box__input--background-color, #FFFFFF);
-  --ez-text-input__input--border-color: var(--combo-box__input--border-color, #DCE0E8);
+  width: var(--ez-combo-box--width);
 }
 
 .list-container {
@@ -93,12 +104,12 @@ ez-text-input {
   flex-direction: column;
 
   /*public*/
-  background-color: var(--combo-box--background-color--xlight);
-  padding: var(--combo-box--space--small);
-  border-radius: var(--combo-box--border-radius);
+  background-color: var(--ez-combo-box--background-color--xlight);
+  padding: var(--ez-combo-box--space--small);
+  border-radius: var(--ez-combo-box--border-radius);
   box-shadow: var(--shadow, 0px 0px 16px 0px #000);
   scroll-behavior: smooth;
-  max-height: calc(4*var(--combo-box__list-height) + 2*var(--combo-box--space--small));
+  max-height: calc(4*var(--ez-combo-box__list-height) + 2*var(--ez-combo-box--space--small));
   overflow: auto;
 }
 
@@ -107,11 +118,11 @@ ez-text-input {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-radius: var(--combo-box--border-radius-small);
-  padding: 0 var(--combo-box--space--small);
+  border-radius: var(--ez-combo-box--border-radius-small);
+  padding: 0 var(--ez-combo-box--space--small);
   list-style-type: none;
 
-  min-height: var(--combo-box__list-height);
+  min-height: var(--ez-combo-box__list-height);
   ;
 }
 
@@ -119,9 +130,9 @@ ez-text-input {
   text-align: left;
   flex-basis: 85%;
   flex-grow: 1;
-  color: var(--combo-box__list-text--primary);
-  font-weight: var(--combo-box--font-weight--large);
-  font-family: var(--combo-box--font-family);
+  color: var(--ez-combo-box__list-text--primary);
+  font-weight: var(--ez-combo-box--font-weight--large);
+  font-family: var(--ez-combo-box--font-family);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -131,16 +142,16 @@ ez-text-input {
   text-align: right;
   flex-basis: 15%;
   flex-grow: 0;
-  color: var(--combo-box__list-text--primary);
-  font-weight: var(--combo-box--font-weight--large);
-  font-family: var(--combo-box--font-family);
+  color: var(--ez-combo-box__list-text--primary);
+  font-weight: var(--ez-combo-box--font-weight--large);
+  font-family: var(--ez-combo-box--font-family);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 li:hover {
-  background-color: var(--background--medium);
+  background-color: var(--ez-combo-box--background-medium);
 }
 
 .preselected {
@@ -161,19 +172,19 @@ li:hover {
 .btn-open-options::after {
   content: '';
   display: flex;
-  background-color: var(--text--primary, #008561);
+  background-color: var(--ez-combo-box__btn-options--background-color);
   width: 16px;
   height: 16px;
-  -webkit-mask-image: var(--combo-box--drop-down__image);
-  mask-image: var(--combo-box--drop-down__image);
+  -webkit-mask-image: var(--ez-combo-box__drop-down-image);
+  mask-image: var(--ez-combo-box__drop-down-image);
 }
 
 .btn-open-options:disabled:after {
-  background-color: var(--text--disable, #AFB6C0);
+  background-color: var(--ez-combo-box__btn-options-disabled--background-color);
 }
 
 .btn-open-options:enabled:hover::after {
-  background-color: var(--color--primary, #4e4e4e);
+  background-color: var(--ez-combo-box__btn-options-hover--background-color);
 }
 
 .btn-open-search {
@@ -190,17 +201,17 @@ li:hover {
 .btn-open-search::after {
   content: '';
   display: flex;
-  background-color: var(--text--primary, #008561);
+  background-color: var(--ez-combo-box__btn-search--background-color);
   width: 22px;
   height: 22px;
-  -webkit-mask-image: var(--combo-box--search__image);
-  mask-image: var(--combo-box--search__image);
+  -webkit-mask-image: var(--ez-combo-box__search-image);
+  mask-image: var(--ez-combo-box__search-image);
 }
 
 .btn-open-search:disabled:after {
-  background-color: var(--text--disable, #AFB6C0);
+  background-color: var(--ez-combo-box__btn-search-disabled--background-color);
 }
 
 .btn-open-search:enabled:hover::after {
-  background-color: var(--color--primary, #4e4e4e);
+  background-color: var(--ez-combo-box__btn-search-hover--background-color);
 }

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() {
     /**
@@ -112,6 +113,7 @@ export class EzComboBox {
     if (currentOpt !== opt) {
       const adjustedOpt = !(opt === null || opt === void 0 ? void 0 : opt.value) ? undefined : opt;
       this.value = adjustedOpt;
+      this.errorMessage = "";
       this.ezChange.emit(adjustedOpt);
     }
     else {
@@ -176,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();
     }