@sankhyalabs/ezui 1.1.72 → 1.1.75

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

@@ -1,66 +1,66 @@
 :host {
   /*@doc Define a família da fonte do componente.*/
-  --cal--font-family: var(--font-pattern, Arial);
+  --ez-calendar--font-family: var(--font-pattern, Arial);
   /*@doc Define a cor dos textos dentro do componente.*/
-  --cal--color: var(--title--primary, #626e82);
+  --ez-calendar--color: var(--title--primary, #626e82);
   /*@doc Define a sombra dos textos dentro do componente.*/
-  --cal--text-shadow: var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);
+  --ez-calendar--text-shadow: var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);
 
   /* cal__body */
   /*@doc Define a cor de fundo do corpo do calendário.*/
-  --cal__body--background-color: var(--background--xlight, #FFF);
+  --ez-calendar__body--background-color: var(--background--xlight, #FFF);
   /*@doc Define o espaçamento do corpo do calendário.*/
-  --cal__body--padding: var(--space--medium, 12px);
+  --ez-calendar__body--padding: var(--space--medium, 12px);
   /*@doc Define o raio da borda do corpo do calendário.*/
-  --cal__body--border-radius: var(--border--radius-medium, 12px);
+  --ez-calendar__body--border-radius: var(--border--radius-medium, 12px);
   /*@doc Define a sombra do corpo do calendário.*/
-  --cal__body--shadow: var(--shadow, 0px 0px 16px 0px #000);
+  --ez-calendar__body--shadow: var(--shadow, 0px 0px 16px 0px #000);
 
   /* cal__header */
   /*@doc Define a espessura da borda inferior do header.*/
-  --cal__header-line--stroke: 2px;
+  --ez-calendar__header-line--stroke: 2px;
   /*@doc Define a cor da borda inferior do header.*/
-  --cal__header-line--color: var(--color--strokes, #C0C0C0);
+  --ez-calendar__header-line--color: var(--color--strokes, #C0C0C0);
 
   /* nav buttons */
   /*@doc Define a cor do ícone de navegação.*/
-  --cal__nav-btn--fill: var(--text--primary, #008561);
+  --ez-calendar__nav-btn--fill: var(--text--primary, #008561);
   /*@doc Define a cor do ícone de navegação quando o cursor está sobre ele.*/
-  --cal__nav-btn--hover--fill: var(--color--primary, #350404);
+  --ez-calendar__nav-btn--hover--fill: var(--color--primary, #350404);
   /*@doc Define a largura do ícone de navegação.*/
-  --cal__nav-btn--width: 10px;
+  --ez-calendar__nav-btn--width: 10px;
   /*@doc Define a altura do ícone de navegação.*/
-  --cal__nav-btn--height: 16px;
+  --ez-calendar__nav-btn--height: 16px;
   /*@doc Contém a imagem do ícone de navegação à esquerda.*/
-  --cal__nav-btn--previous-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z"/></svg>');
+  --ez-calendar__nav-btn--previous-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z"/></svg>');
   /*@doc Contém a imagem do ícone de navegação à direita.*/
-  --cal__nav-btn--next-image: 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-calendar__nav-btn--next-image: 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>');
 
   /* cell */
   /*@doc Define o espaçamento vertical entre as células.*/
-  --cal__cell--margin: 0px var(--space--small, 12px);
+  --ez-calendar__cell--margin: 0px var(--space--small, 12px);
   /*@doc Define a largura das células.*/
-  --cal__cell--width: var(--space--large, 24px);
+  --ez-calendar__cell--width: var(--space--large, 24px);
   /*@doc Define o espaçamento horizontal entre as células.*/
-  --cal__cell--padding: var(--space--extra-small, 3px) 0px;
+  --ez-calendar__cell--padding: var(--space--extra-small, 3px) 0px;
   /*@doc Define o raio da borda das células.*/
-  --cal__cell--border-radius: var(--border--radius-small, 6px);
+  --ez-calendar__cell--border-radius: var(--border--radius-small, 6px);
   /*@doc Define a cor de fundo das células.*/
-  --cal__cell--over--background-color: var(--color--strokes, #C0C0C0);
+  --ez-calendar__cell--over--background-color: var(--color--strokes, #C0C0C0);
   /*@doc Define a cor do texto para células secundárias (fora do mês selecionado).*/
-  --cal__cell--outset--color: var(--color--strokes, #C0C0C0);
+  --ez-calendar__cell--outset--color: var(--color--strokes, #C0C0C0);
   /*@doc Define a cor de fundo das células selecionadas.*/
-  --cal__cell--selected--background-color: var(--color--primary, #008561);
+  --ez-calendar__cell--selected--background-color: var(--color--primary, #008561);
   /*@doc Define a cor do texto da célula selecionada.*/
-  --cal__cell--selected--color: var(--color--inverted, #FFF);
+  --ez-calendar__cell--selected--color: var(--color--inverted, #FFF);
 
   /* btn today */
   /*@doc Define a cor do texto do botão "Hoje".*/
-  --cal__btn-today--color: var(--color--primary);
+  --ez-calendar__btn-today--color: var(--color--primary);
   /*@doc Define a cor de fundo do botão "Hoje" quando o cursor está sobre ele.*/
-  --cal__btn-today--hover--background-color: var(--color--strokes, #C0C0C0);
+  --ez-calendar__btn-today--hover--background-color: var(--color--strokes, #C0C0C0);
   /*@doc Define o raio da borda do botão "Hoje".*/
-  --cal__btn-today--border-radius: var(--border--radius-small, 6px);
+  --ez-calendar__btn-today--border-radius: var(--border--radius-small, 6px);
 
   /***************
      host style  
@@ -78,10 +78,10 @@
   flex-direction: column;
 
   /*public*/
-  background-color: var(--cal__body--background-color);
-  padding: var(--cal__body--padding);
-  border-radius: var(--cal__body--border-radius);
-  box-shadow: var(--cal__body--shadow);
+  background-color: var(--ez-calendar__body--background-color);
+  padding: var(--ez-calendar__body--padding);
+  border-radius: var(--ez-calendar__body--border-radius);
+  box-shadow: var(--ez-calendar__body--shadow);
 }
 
 .calendar__header {
@@ -92,10 +92,10 @@
   margin: var(--space--small, 6px) var(--space--, 12px);
 
   /*public*/
-  font-family: var(--cal--font-family);
-  color: var(--cal--color);
-  text-shadow: var(--cal--text-shadow);
-  border-bottom: solid var(--cal__header-line--stroke) var(--cal__header-line--color);
+  font-family: var(--ez-calendar--font-family);
+  color: var(--ez-calendar--color);
+  text-shadow: var(--ez-calendar--text-shadow);
+  border-bottom: solid var(--ez-calendar__header-line--stroke) var(--ez-calendar__header-line--color);
 }
 
 .calendar__btn-next, .calendar__btn-previous {
@@ -113,27 +113,27 @@
   display: flex;
 
   /*public*/
-  background-color: var(--cal__nav-btn--fill);
+  background-color: var(--ez-calendar__nav-btn--fill);
   /*parece estranho, mas o bg funciona como fill pq aplicaremos a mascara.*/
-  width: var(--cal__nav-btn--width);
-  height: var(--cal__nav-btn--height);
+  width: var(--ez-calendar__nav-btn--width);
+  height: var(--ez-calendar__nav-btn--height);
 }
 
 .calendar__btn-previous::after {
   /*public*/
-  -webkit-mask-image: var(--cal__nav-btn--previous-image);
-  mask-image: var(--cal__nav-btn--previous-image);
+  -webkit-mask-image: var(--ez-calendar__nav-btn--previous-image);
+  mask-image: var(--ez-calendar__nav-btn--previous-image);
 }
 
 .calendar__btn-next::after {
   /*public*/
-  -webkit-mask-image: var(--cal__nav-btn--next-image);
-  mask-image: var(--cal__nav-btn--next-image);
+  -webkit-mask-image: var(--ez-calendar__nav-btn--next-image);
+  mask-image: var(--ez-calendar__nav-btn--next-image);
 }
 
 .calendar__btn-next:hover::after, .calendar__btn-previous:hover::after {
   /*public*/
-  background-color: var(--cal__nav-btn--hover--fill);
+  background-color: var(--ez-calendar__nav-btn--hover--fill);
 }
 
 .calendar__lbl-month {
@@ -142,9 +142,9 @@
   font-size: var(--title--medium, 16px);
 
   /*public*/
-  font-family: var(--cal--font-family);
-  color: var(--cal--color);
-  text-shadow: var(--cal--text-shadow);
+  font-family: var(--ez-calendar--font-family);
+  color: var(--ez-calendar--color);
+  text-shadow: var(--ez-calendar--text-shadow);
 }
 
 .calendar__line {
@@ -163,24 +163,24 @@
   font-size: var(--text--small, 12px);
 
   /*public*/
-  font-family: var(--cal--font-family);
-  color: var(--cal--color);
-  text-shadow: var(--cal--text-shadow);
-  padding: var(--cal__cell--padding);
-  margin: var(--cal__cell--margin);
-  min-width: var(--cal__cell--width);
-  border-radius: var(--cal__cell--border-radius);
+  font-family: var(--ez-calendar--font-family);
+  color: var(--ez-calendar--color);
+  text-shadow: var(--ez-calendar--text-shadow);
+  padding: var(--ez-calendar__cell--padding);
+  margin: var(--ez-calendar__cell--margin);
+  min-width: var(--ez-calendar__cell--width);
+  border-radius: var(--ez-calendar__cell--border-radius);
 }
 
 
 .calendar__cell:hover {
   /*public*/
-  background-color: var(--cal__cell--over--background-color);
+  background-color: var(--ez-calendar__cell--over--background-color);
 }
 
 .calendar__cell--secondary {
   /*public*/
-  color: var(--cal__cell--outset--color);
+  color: var(--ez-calendar__cell--outset--color);
 }
 
 .calendar__cell--unselectable:hover {
@@ -195,15 +195,15 @@
   font-weight: var(--text-weight--large, 600);
 
   /*public*/
-  font-family: var(--cal--font-family);
-  color: var(--cal--color);
-  text-shadow: var(--cal--text-shadow);
+  font-family: var(--ez-calendar--font-family);
+  color: var(--ez-calendar--color);
+  text-shadow: var(--ez-calendar--text-shadow);
 }
 
 .calendar__cell--selected, .calendar__cell--selected:hover {
   /*public*/
-  background-color: var(--cal__cell--selected--background-color);
-  color: var(--cal__cell--selected--color);
+  background-color: var(--ez-calendar__cell--selected--background-color);
+  color: var(--ez-calendar__cell--selected--color);
 }
 
 .calendar__body {
@@ -227,13 +227,13 @@
   padding: var(--space--extra-small, 6px);
 
   /*public*/
-  font-family: var(--cal--font-family);
-  text-shadow: var(--cal--text-shadow);
-  color: var(--cal__btn-today--color);
-  border-radius: var(--cal__btn-today--border-radius);
+  font-family: var(--ez-calendar--font-family);
+  text-shadow: var(--ez-calendar--text-shadow);
+  color: var(--ez-calendar__btn-today--color);
+  border-radius: var(--ez-calendar__btn-today--border-radius);
 }
 
 .calendar__btn-today:hover {
   /*public*/
-  background-color: var(--cal__btn-today--hover--background-color);
+  background-color: var(--ez-calendar__btn-today--hover--background-color);
 }

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

@@ -1,11 +1,11 @@
-import { FloatingManager } from '@sankhyalabs/core';
-import { Component, forceUpdate, h, Prop, Method, Event, Watch } from '@stencil/core';
+import { FloatingManager } from "@sankhyalabs/core";
+import { Component, forceUpdate, h, Prop, Method, Event, Watch } from "@stencil/core";
 export class EzCalendar {
   constructor() {
     this._firstRender = true;
-    this._todayLabel = 'Hoje';
-    this._weekDayLabels = ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'];
-    this._monthLabels = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
+    this._todayLabel = "Hoje";
+    this._weekDayLabels = ["D", "S", "T", "Q", "Q", "S", "S"];
+    this._monthLabels = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
     /**
      * A data selecionada no calendário
      */
@@ -26,18 +26,21 @@ export class EzCalendar {
     if (this.floating) {
       this._floatingID = FloatingManager.float(this._box, this._container, { autoClose: true, top, left, bottom, right });
       window.requestAnimationFrame(() => {
-        this._box.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+        this._box.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
       });
     }
   }
+  /**
+  * Método necessário para ajustar o posicionamento do calendar acima ou abaixo do ez-date-input conforme a disponibilidade de espaço.
+  */
   async fitVertical(topOffset, bottomOffset) {
     const neededHeight = this._container.getBoundingClientRect().bottom + this._calendarHeight;
     const availableBottom = (window.innerHeight || document.documentElement.clientHeight) > neededHeight;
     if (availableBottom) {
-      this.show(topOffset + 'px', undefined, 'unset');
+      this.show(topOffset + "px", undefined, "unset");
     }
     else {
-      this.show('unset', undefined, bottomOffset + 'px');
+      this.show("unset", undefined, bottomOffset + "px");
     }
   }
   /**
@@ -223,7 +226,7 @@ export class EzCalendar {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "M\u00E9todo necess\u00E1rio para ajustar o posicionamento do calendar acima ou abaixo do ez-date-input conforme a disponibilidade de espa\u00E7o.",
         "tags": []
       }
     },

package/dist/collection/components/ez-form/subcomponents/structure/Field.js

@@ -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);
             }
@@ -69,7 +69,7 @@ export const Field = ({ dataUnit, field, forceScroll, enabled }) => {
       const headers = strHeaders ? JSON.parse(strHeaders) : {};
       const maxfiles = Number(getProp(properties, "maxfiles") || 0);
       return (h("div", { class: "col col--sd-12 padding--small" }, loadingData ? h("place-holder", null) :
-        h("ez-upload", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.detail), urlupload: target, requestheaders: headers, maxfiles: maxfiles })));
+        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 }));

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

@@ -1,45 +1,45 @@
 :host {
   /* dimensions */
   /*@doc Define a altura do chip.*/
-  --lc--height: 36px;
+  --ez-label-chip--height: 36px;
 
   /* Label */
   /*@doc Define o tamanho do label.*/
-  --lc__label--font-size: var(--text--medium, 14px);
+  --ez-label-chip__label--font-size: var(--text--medium, 14px);
   /*@doc Define a família da fonte do label.*/
-  --lc__label--font-family: var(--font-pattern, Arial);
+  --ez-label-chip__label--font-family: var(--font-pattern, Arial);
   /*@doc Define o peso da fonte do label.*/
-  --lc__label--font-weight: var(--text-weight--large, 600);
+  --ez-label-chip__label--font-weight: var(--text-weight--large, 600);
   /*@doc Define o espaçamento do label.*/
-  --lc__label--space--medium: var(--space--medium, 12px);
+  --ez-label-chip__label--space--medium: var(--space--medium, 12px);
   /*@doc Define a cor do texto e do ícone.*/
-  --lc__label--title--primary: var(--title--primary, #919191);
+  --ez-label-chip__label--title--primary: var(--title--primary, #919191);
 
   /* Label Container */
   /*@doc Define o raio da borda do container do chip.*/
-  --lc__label__container--border-radius: var(--border--radius-large, 24px);
+  --ez-label-chip__label__container--border-radius: var(--border--radius-large, 24px);
   /*@doc Define o estilo da borda do container.*/
-  --lc__label__container--border: 1px solid;
+  --ez-label-chip__label__container--border: 1px solid;
   /*@doc Define a cor da borda do container.*/
-  --lc__label__container--border-color-strokes: var(--color--strokes, #DCE0E8);
+  --ez-label-chip__label__container--border-color-strokes: var(--color--strokes, #DCE0E8);
   /*@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);
+  --ez-label-chip__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);
+  --ez-label-chip__label__container-color--disable-secondary: var(--color--disable-secondary, #F2F5F8);
   /*@doc Define a cor de fundo do container quando ativo.*/
-  --lc__label__container--background-color: #0085610F;
+  --ez-label-chip__label__container--background-color: #0085610F;
   /*@doc Define a cor da borda do container quando ativo.*/
-  --lc__label__container--border-color: #0085610F;
+  --ez-label-chip__label__container--border-color: #0085610F;
   /*@doc Define a cor da borda do container quando o cursor está sobre ele.*/
-  --lc__label__container--default--border-color--hover: var(--color--primary-600, #007a5a);
+  --ez-label-chip__label__container--default--border-color--hover: var(--color--primary-600, #007a5a);
   /*@doc Define a cor do fundo do container quando o cursor está sobre ele.*/
-  --lc__label__container--default--background-color--hover: var(--color--primary-200, #f2faf8);
+  --ez-label-chip__label__container--default--background-color--hover: var(--color--primary-200, #f2faf8);
   /*@doc Define a cor do texto e do ícone quando o chip está desabilitado.*/
-  --lc__label__container--text--disabled: var(--text--disable, #AFB6C0);
+  --ez-label-chip__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>');
+  --ez-label-chip__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>');
 }
 
 .btn-close {
@@ -55,11 +55,11 @@
 .btn-close::after {
   content: '';
   display: flex;
-  background-color: var(--lc__label__container--color-primary);
+  background-color: var(--ez-label-chip__label__container--color-primary);
   width: 8px;
   height: 8px;
-  -webkit-mask-image: var(--lc__btn__close--image);
-  mask-image: var(--lc__btn__close--image);
+  -webkit-mask-image: var(--ez-label-chip__btn__close--image);
+  mask-image: var(--ez-label-chip__btn__close--image);
 }
 
 .label__container {
@@ -71,18 +71,18 @@
   align-items: center;
   background-color: #FFFFFF;
   align-self: center;
-  color: var(--lc__label--title--primary);
-  fill: var(--lc__label--title--primary);
-  border: var(--lc__label__container--border);
-  border-radius: var(--lc__label__container--border-radius);
-  border-color: var(--lc__label__container--border-color-strokes);
-  padding-right: var(--lc__label--space--medium);
-  padding-left: var(--lc__label--space--medium);
+  color: var(--ez-label-chip__label--title--primary);
+  fill: var(--ez-label-chip__label--title--primary);
+  border: var(--ez-label-chip__label__container--border);
+  border-radius: var(--ez-label-chip__label__container--border-radius);
+  border-color: var(--ez-label-chip__label__container--border-color-strokes);
+  padding-right: var(--ez-label-chip__label--space--medium);
+  padding-left: var(--ez-label-chip__label--space--medium);
 }
 
 .label__container:hover {
-  border-color: var(--lc__label__container--default--border-color--hover);
-  background-color: var(--lc__label__container--default--background-color--hover);
+  border-color: var(--ez-label-chip__label__container--default--border-color--hover);
+  background-color: var(--ez-label-chip__label__container--default--background-color--hover);
 }
 
 .label__container--active {
@@ -93,14 +93,14 @@
   position: relative;
   align-items: center;
   align-self: center;
-  border: var(--lc__label__container--border);
-  border-radius: var(--lc__label__container--border-radius);
-  padding-right: var(--lc__label--space--medium);
-  padding-left: var(--lc__label--space--medium);
-  fill: var(--lc__label__container--color-primary);
-  color: var(--lc__label__container--color-primary);
-  border-color: var(--lc__label__container--border-color);
-  background-color: var(--lc__label__container--background-color);
+  border: var(--ez-label-chip__label__container--border);
+  border-radius: var(--ez-label-chip__label__container--border-radius);
+  padding-right: var(--ez-label-chip__label--space--medium);
+  padding-left: var(--ez-label-chip__label--space--medium);
+  fill: var(--ez-label-chip__label__container--color-primary);
+  color: var(--ez-label-chip__label__container--color-primary);
+  border-color: var(--ez-label-chip__label__container--border-color);
+  background-color: var(--ez-label-chip__label__container--background-color);
 }
 
 
@@ -111,26 +111,26 @@
   position: relative;
   align-items: center;
   align-self: center;
-  border: var(--lc__label__container--border);
-  border-color: var(--lc__label__container-color--disable-secondary);
-  border-radius: var(--lc__label__container--border-radius);
-  padding-right: var(--lc__label--space--medium);
-  padding-left: var(--lc__label--space--medium);
-  fill: var(--lc__label__container--text--disabled);
-  color: var(--lc__label__container--text--disabled);
-  background-color: var(--lc__label__container-color--disable-secondary);
+  border: var(--ez-label-chip__label__container--border);
+  border-color: var(--ez-label-chip__label__container-color--disable-secondary);
+  border-radius: var(--ez-label-chip__label__container--border-radius);
+  padding-right: var(--ez-label-chip__label--space--medium);
+  padding-left: var(--ez-label-chip__label--space--medium);
+  fill: var(--ez-label-chip__label__container--text--disabled);
+  color: var(--ez-label-chip__label__container--text--disabled);
+  background-color: var(--ez-label-chip__label__container-color--disable-secondary);
 }
 
 label {
   /*private*/
   display: flex;
   align-items: center;
-  font-weight: var(--lc__label--font-weight);
+  font-weight: var(--ez-label-chip__label--font-weight);
   cursor: pointer;
   /*public*/
-  height: var(--lc--height);
-  font-family: var(--lc__label--font-family);
-  font-size: var(--lc__label--font-size);
+  height: var(--ez-label-chip--height);
+  font-family: var(--ez-label-chip__label--font-family);
+  font-size: var(--ez-label-chip__label--font-size);
 }
 
 .label__icon {

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

@@ -1,4 +1,4 @@
-import { Component, Prop, h, Method, Watch, Event } from '@stencil/core';
+import { Component, Prop, h, Method, Watch, Event } from "@stencil/core";
 export class EzLabelChip {
   constructor() {
     /**
@@ -34,7 +34,7 @@ export class EzLabelChip {
   //---------------------------------------------
   handleClick(ev) {
     const target = ev.target;
-    if (target.assignedSlot === null && !target.classList.contains('label__icon')) {
+    if (target.assignedSlot === null && !target.classList.contains("label__icon")) {
       this.valueChange.emit(this.value);
       this.swichState();
     }
@@ -46,13 +46,13 @@ export class EzLabelChip {
   }
   reflectChange() {
     if (this._divElem) {
-      this._divElem.classList.remove('label__container--active');
-      this._divElem.classList.remove('label__container');
+      this._divElem.classList.remove("label__container--active");
+      this._divElem.classList.remove("label__container");
       if (this.value) {
-        this._divElem.classList.add('label__container--active');
+        this._divElem.classList.add("label__container--active");
       }
       else {
-        this._divElem.classList.add('label__container');
+        this._divElem.classList.add("label__container");
       }
     }
   }
@@ -62,7 +62,7 @@ export class EzLabelChip {
   componentDidLoad() {
     if (this._divElem) {
       if (this.value) {
-        this._divElem.classList.add('label__container--active');
+        this._divElem.classList.add("label__container--active");
       }
       else {
         this.handleEnabledState();
@@ -70,12 +70,12 @@ export class EzLabelChip {
     }
   }
   handleEnabledState() {
-    this._divElem.classList.remove('label__container--disabled');
+    this._divElem.classList.remove("label__container--disabled");
     if (!this.enabled) {
-      this._divElem.classList.remove('label__container');
-      this._divElem.classList.add('label__container--disabled');
+      this._divElem.classList.remove("label__container");
+      this._divElem.classList.add("label__container--disabled");
       if (this._labelElem) {
-        this._labelElem.style.cursor = 'default';
+        this._labelElem.style.cursor = "default";
       }
     }
   }