@sankhyalabs/ezui 1.1.74 → 1.1.77

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-collapsible-box/ez-collapsible-box.css

@@ -1,39 +1,39 @@
 :host {
   /*@doc Define a altura do componente quando colapsado.*/
-  --collapsible-box--height: 42px;
+  --ez-collapsible-box--height: 42px;
 
   /*@doc Define o tamanho da fonte do header.*/
-  --collapsible-box--font-size: var(--title--medium, 14px);
+  --ez-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);
+  --ez-collapsible-box--font-family: var(--font-pattern, Arial);
   /*@doc Define o peso da fonte do header.*/
-  --collapsible-box--font-weight: var(--text-weight--large, 600);
+  --ez-collapsible-box--font-weight: var(--text-weight--large, 600);
   /*@doc Define a cor da fonte do header.*/
-  --collapsible-box--color: var(--title--primary);
+  --ez-collapsible-box--color: var(--title--primary);
 
   /*@doc Contém a imagem do chevron no tamanho xsmall.*/
-  --collapsible-box__btn--image--xsmall: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="12px" width="7.5px"><path d="M 0,10.56 4.5967752,6.0000006 0,1.3800006 1.4516132,0 7.5,6.0000006 1.4516132,12 Z"/></svg>');
+  --ez-collapsible-box__btn--image--xsmall: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="12px" width="7.5px"><path d="M 0,10.56 4.5967752,6.0000006 0,1.3800006 1.4516132,0 7.5,6.0000006 1.4516132,12 Z"/></svg>');
 
   /*@doc Contém a imagem do chevron no tamanho small.*/
-  --collapsible-box__btn--image--small: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="14px" width="8.68px"><path d="M 0,12.32 5.3200012,7.0000007 0,1.6100007 1.6800004,0 8.68,7.0000007 1.6800004,14 Z"/></svg>');
+  --ez-collapsible-box__btn--image--small: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="14px" width="8.68px"><path d="M 0,12.32 5.3200012,7.0000007 0,1.6100007 1.6800004,0 8.68,7.0000007 1.6800004,14 Z"/></svg>');
 
   /*@doc Contém a imagem do chevron no tamanho medium.*/
-  --collapsible-box__btn--image--medium: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z"/></svg>');
+  --ez-collapsible-box__btn--image--medium: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z"/></svg>');
 
   /*@doc Contém a imagem do chevron no tamanho large.*/
-  --collapsible-box__btn--image--large: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="18px" width="11.25px"><path d="M 0,15.84 6.8951628,9.0000009 0,2.0700009 2.1774198,0 11.25,9.0000009 2.1774198,18 Z"/></svg>');
+  --ez-collapsible-box__btn--image--large: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="18px" width="11.25px"><path d="M 0,15.84 6.8951628,9.0000009 0,2.0700009 2.1774198,0 11.25,9.0000009 2.1774198,18 Z"/></svg>');
 
   /*@doc Contém a imagem do chevron no tamanho xlarge.*/
-  --collapsible-box__btn--image--xlarge: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="20px" width="12.5px"><path d="M 0,17.6 7.661292,10.000001 0,2.300001 2.4193553,0 12.5,10.000001 2.4193553,20 Z"/></svg>');
+  --ez-collapsible-box__btn--image--xlarge: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="20px" width="12.5px"><path d="M 0,17.6 7.661292,10.000001 0,2.300001 2.4193553,0 12.5,10.000001 2.4193553,20 Z"/></svg>');
 
   /*@doc Define a cor do chevron.*/
-  --collapsible-box__btn--fill: var(--collapsible-box--color);
+  --ez-collapsible-box__btn--fill: var(--ez-collapsible-box--color);
 
   /*@doc Define a largura do botão que contém o chevron.*/
-  --collapsible-box__btn--width: 10px;
+  --ez-collapsible-box__btn--width: 10px;
 
   /*@doc Define a altura do botão que contém o chevron.*/
-  --collapsible-box__btn--height: 16px;
+  --ez-collapsible-box__btn--height: 16px;
 
   /***************
      host style  
@@ -60,10 +60,10 @@
   width: 100%;
 
   /*public*/
-  font-family: var(--collapsible-box--font-family);
-  font-size: var(--collapsible-box--font-size);
-  font-weight: var(--collapsible-box--font-weight);
-  color: var(--collapsible-box--color);
+  font-family: var(--ez-collapsible-box--font-family);
+  font-size: var(--ez-collapsible-box--font-size);
+  font-weight: var(--ez-collapsible-box--font-weight);
+  color: var(--ez-collapsible-box--color);
 }
 
 .collapsible-box__label--icon-right {
@@ -73,10 +73,10 @@
   text-overflow: ellipsis;
 
   /*public*/
-  font-family: var(--collapsible-box--font-family);
-  font-size: var(--collapsible-box--font-size);
-  font-weight: var(--collapsible-box--font-weight);
-  color: var(--collapsible-box--color);
+  font-family: var(--ez-collapsible-box--font-family);
+  font-size: var(--ez-collapsible-box--font-size);
+  font-weight: var(--ez-collapsible-box--font-weight);
+  color: var(--ez-collapsible-box--color);
 }
 
 .collapsible-box__btn {
@@ -94,10 +94,10 @@
   display: flex;
 
   /*public*/
-  background-color: var(--collapsible-box__btn--fill);
+  background-color: var(--ez-collapsible-box__btn--fill);
   /*parece estranho, mas o bg funciona como fill pq aplicaremos mascara.*/
-  width: var(--collapsible-box__btn--width);
-  height: var(--collapsible-box__btn--height);
+  width: var(--ez-collapsible-box__btn--width);
+  height: var(--ez-collapsible-box__btn--height);
   transition: transform var(--transition);
   transform: rotate(90deg);
 }
@@ -105,36 +105,36 @@
 .collapsible-box__btn--xsmall::after {
   width: 7.5px;
   height: 12px;
-  -webkit-mask-image: var(--collapsible-box__btn--image--xsmall);
-  mask-image: var(--collapsible-box__btn--image--xsmall);
+  -webkit-mask-image: var(--ez-collapsible-box__btn--image--xsmall);
+  mask-image: var(--ez-collapsible-box__btn--image--xsmall);
 }
 
 .collapsible-box__btn--small::after {
   width: 8.68px;
   height: 14px;
-  -webkit-mask-image: var(--collapsible-box__btn--image--small);
-  mask-image: var(--collapsible-box__btn--image--small);
+  -webkit-mask-image: var(--ez-collapsible-box__btn--image--small);
+  mask-image: var(--ez-collapsible-box__btn--image--small);
 }
 
 .collapsible-box__btn--medium::after {
   width: 10px;
   height: 16px;
-  -webkit-mask-image: var(--collapsible-box__btn--image--medium);
-  mask-image: var(--collapsible-box__btn--image--medium);
+  -webkit-mask-image: var(--ez-collapsible-box__btn--image--medium);
+  mask-image: var(--ez-collapsible-box__btn--image--medium);
 }
 
 .collapsible-box__btn--large::after {
   width: 11.25px;
   height: 18px;
-  -webkit-mask-image: var(--collapsible-box__btn--image--large);
-  mask-image: var(--collapsible-box__btn--image--large);
+  -webkit-mask-image: var(--ez-collapsible-box__btn--image--large);
+  mask-image: var(--ez-collapsible-box__btn--image--large);
 }
 
 .collapsible-box__btn--xlarge::after {
   width: 12.5px;
   height: 20px;
-  -webkit-mask-image: var(--collapsible-box__btn--image--xlarge);
-  mask-image: var(--collapsible-box__btn--image--xlarge);
+  -webkit-mask-image: var(--ez-collapsible-box__btn--image--xlarge);
+  mask-image: var(--ez-collapsible-box__btn--image--xlarge);
 }
 
 .collapsible-box__btn--collapsed::after {

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

@@ -1,4 +1,4 @@
-import { Component, h, Host, Prop, Event, Watch, Method } from '@stencil/core';
+import { Component, h, Host, Prop, Event, Watch, Method } from "@stencil/core";
 export class EzCollapsibleBox {
   constructor() {
     /**
@@ -8,11 +8,11 @@ export class EzCollapsibleBox {
     /**
     * Define o tamanho do texto e do ícone do componente.
     */
-    this.headersize = "small";
+    this.headerSize = "small";
     /**
     * Define o local onde o ícone será renderizado.
     */
-    this.iconplacement = "left";
+    this.iconPlacement = "left";
   }
   observeValue() {
     this.ezChange.emit();
@@ -25,14 +25,14 @@ export class EzCollapsibleBox {
   }
   render() {
     return (h(Host, null,
-      this.iconplacement == 'right' ?
+      this.iconPlacement == "right" ?
         h("div", { class: "collapsible-box__title" },
-          h("label", { class: (this.iconplacement == 'right' ? "collapsible-box__label--icon-right " : "collapsible-box__label ") + (this.headersize ? "font--" + this.headersize : ""), onClick: () => this.showHide(), title: this.label }, this.label),
-          h("button", { class: this.value ? "collapsible-box__btn collapsible-box__btn--collapsed " + "collapsible-box__btn--" + this.headersize : "collapsible-box__btn " + "collapsible-box__btn--" + this.headersize, onClick: () => this.showHide() }))
+          h("label", { class: (this.iconPlacement == "right" ? "collapsible-box__label--icon-right " : "collapsible-box__label ") + (this.headerSize ? "font--" + this.headerSize : ""), onClick: () => this.showHide(), title: this.label }, this.label),
+          h("button", { class: this.value ? "collapsible-box__btn collapsible-box__btn--collapsed " + "collapsible-box__btn--" + this.headerSize : "collapsible-box__btn " + "collapsible-box__btn--" + this.headerSize, onClick: () => this.showHide() }))
         :
           h("div", { class: "collapsible-box__title" },
-            h("button", { class: this.value ? "collapsible-box__btn collapsible-box__btn--collapsed " + "collapsible-box__btn--" + this.headersize : "collapsible-box__btn " + "collapsible-box__btn--" + this.headersize, onClick: () => this.showHide() }),
-            h("label", { class: (this.iconplacement == 'right' ? "collapsible-box__label--icon-right " : "collapsible-box__label ") + (this.headersize ? "font--" + this.headersize : ""), onClick: () => this.showHide(), title: this.label }, this.label)),
+            h("button", { class: this.value ? "collapsible-box__btn collapsible-box__btn--collapsed " + "collapsible-box__btn--" + this.headerSize : "collapsible-box__btn " + "collapsible-box__btn--" + this.headerSize, onClick: () => this.showHide() }),
+            h("label", { class: (this.iconPlacement == "right" ? "collapsible-box__label--icon-right " : "collapsible-box__label ") + (this.headerSize ? "font--" + this.headerSize : ""), onClick: () => this.showHide(), title: this.label }, this.label)),
       !this.value ? h("slot", null) : null));
   }
   static get is() { return "ez-collapsible-box"; }
@@ -79,7 +79,7 @@ export class EzCollapsibleBox {
       "attribute": "label",
       "reflect": true
     },
-    "headersize": {
+    "headerSize": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -93,11 +93,11 @@ export class EzCollapsibleBox {
         "tags": [],
         "text": "Define o tamanho do texto e do \u00EDcone do componente."
       },
-      "attribute": "headersize",
+      "attribute": "header-size",
       "reflect": true,
       "defaultValue": "\"small\""
     },
-    "iconplacement": {
+    "iconPlacement": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -111,7 +111,7 @@ export class EzCollapsibleBox {
         "tags": [],
         "text": "Define o local onde o \u00EDcone ser\u00E1 renderizado."
       },
-      "attribute": "iconplacement",
+      "attribute": "icon-placement",
       "reflect": true,
       "defaultValue": "\"left\""
     }