@sankhyalabs/ezui 1.1.73 → 1.1.76

package/dist/collection/components/ez-form/subcomponents/form-metadata.js

@@ -1,5 +1,5 @@
-import { Component, Host, h, Element, Prop } from '@stencil/core';
-import DataUnit from './DataUnit';
+import { Component, Host, h, Element, Prop } from "@stencil/core";
+import DataUnit from "./DataUnit";
 export class FormMetadata {
   buildField(element) {
     let label = element.getAttribute("label");
@@ -11,7 +11,7 @@ export class FormMetadata {
         label = "Selecione uma das opções:";
       }
       const objOpts = {};
-      Array.from(element.getElementsByTagName('OPTION')).forEach((optElem, index) => {
+      Array.from(element.getElementsByTagName("OPTION")).forEach((optElem, index) => {
         const optValue = optElem.getAttribute("value") || index;
         const optLabel = optElem.textContent;
         objOpts[optValue] = optLabel;
@@ -19,15 +19,15 @@ export class FormMetadata {
       properties.push({ name: "options", value: JSON.stringify(objOpts) });
     }
     else if (userInterface === "FILE") {
-      const urlElement = element.querySelector('URL');
-      const headersElement = element.querySelectorAll('HEADERS>HEADER');
+      const urlElement = element.querySelector("URL");
+      const headersElement = element.querySelectorAll("HEADERS>HEADER");
       if (urlElement) {
         properties.push({ name: "URL", value: urlElement.textContent });
       }
       if (headersElement && headersElement.length > 0) {
         const headers = {};
         headersElement.forEach(header => {
-          headers[header.getAttribute('name')] = header.textContent;
+          headers[header.getAttribute("name")] = header.textContent;
         });
         properties.push({ name: "HEADERS", value: JSON.stringify(headers) });
       }
@@ -53,7 +53,7 @@ export class FormMetadata {
   }
   buildFieldSet(dataUnit, element) {
     const label = element.getAttribute("label");
-    const fields = Array.from(element.getElementsByTagName('FIELD')).map(f => {
+    const fields = Array.from(element.getElementsByTagName("FIELD")).map(f => {
       const field = this.buildField(f);
       dataUnit.addFieldMetadata(field);
       return { name: field.name };
@@ -70,7 +70,7 @@ export class FormMetadata {
     Array.from(elements).forEach(child => {
       const tagName = child.tagName.toUpperCase();
       switch (tagName) {
-        case 'FIELD':
+        case "FIELD":
           if (!form.items) {
             form.items = [];
           }
@@ -78,13 +78,13 @@ export class FormMetadata {
           dataUnit.addFieldMetadata(f);
           form.items.push({ name: f.name });
           break;
-        case 'FIELD-SET':
+        case "FIELD-SET":
           if (!form.items) {
             form.items = [];
           }
           form.items.push(this.buildFieldSet(dataUnit, child));
           break;
-        case 'SUB-FORM':
+        case "SUB-FORM":
           if (!form.subForms) {
             form.subForms = [];
           }
@@ -93,7 +93,7 @@ export class FormMetadata {
           const subDuName = child.getAttribute("dataunit");
           let subDu;
           if (subDuName) {
-            subDu = new DataUnit(subDuName, 'noname', child.hasAttribute("many") ? 'N' : '1');
+            subDu = new DataUnit(subDuName, "noname", child.hasAttribute("many") ? "N" : "1");
           }
           else {
             subDu = dataUnit;
@@ -108,7 +108,7 @@ export class FormMetadata {
     if (!this.dataunit) {
       this.dataunit = "dataunit_" + (this.name || this.label || new Date().getTime());
     }
-    const du = new DataUnit(this.dataunit, 'noname', this.many ? 'N' : '1');
+    const du = new DataUnit(this.dataunit, "noname", this.many ? "N" : "1");
     this.metadata = this.fromElements(this._host.children, this.label, this.name, du, this.autoload);
   }
   render() {

package/dist/collection/components/ez-form/subcomponents/place-holder.js

@@ -1,4 +1,4 @@
-import { Component, Host, h } from '@stencil/core';
+import { Component, Host, h } from "@stencil/core";
 export class PlaceHolder {
   render() {
     return h(Host, null);

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

@@ -19,19 +19,19 @@ export const Field = ({ dataUnit, field, forceScroll, enabled }) => {
     dataUnit.changeValue(name, newValue);
   };
   switch (userInterface) {
-    case 'LONGTEXT':
+    case "LONGTEXT":
       return h("div", { class: "col col--sd-12 padding--small" }, loadingData ? h("place-holder", null) :
-        h("ez-text-area", { value: value || '', label: formattedLabel, onEzChange: evt => changeFieldHandler(evt.target['value']), errorMessage: errorMessage, ref: elem => scrollToView(forceScroll, elem), key: key, enabled: isEnabled }));
-    case 'CHECKBOX':
-    case 'SWITCH':
+        h("ez-text-area", { value: value || "", label: formattedLabel, onEzChange: evt => changeFieldHandler(evt.target["value"]), errorMessage: errorMessage, ref: elem => scrollToView(forceScroll, elem), key: key, enabled: isEnabled }));
+    case "CHECKBOX":
+    case "SWITCH":
       return h("div", { class: "col col--sd-12 col--tb-3 padding--small align--middle padding-bottom--large" }, loadingData ? h("place-holder", null) :
-        h("ez-check", { value: value, label: label, enabled: isEnabled, mode: userInterface === "CHECKBOX" ? "regular" : "switch", onEzChange: (event) => changeFieldHandler(event.target['value']), ref: elem => scrollToView(forceScroll, elem), key: key }));
-    case 'OPTIONSELECTOR':
-      const optsObj = properties ? JSON.parse(getProp(properties, 'options')) : {};
+        h("ez-check", { value: value, label: label, enabled: isEnabled, mode: userInterface === "CHECKBOX" ? "regular" : "switch", onEzChange: (event) => changeFieldHandler(event.target["value"]), ref: elem => scrollToView(forceScroll, elem), key: key }));
+    case "OPTIONSELECTOR":
+      const optsObj = properties ? JSON.parse(getProp(properties, "options")) : {};
       const normalized = Object.keys(optsObj).map(key => { return { value: key, label: optsObj[key] }; });
       return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
-        h("ez-combo-box", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']), errorMessage: errorMessage, ref: elem => scrollToView(forceScroll, elem), key: key, options: normalized }));
-    case 'SEARCH':
+        h("ez-combo-box", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target["value"]), errorMessage: errorMessage, ref: elem => scrollToView(forceScroll, elem), key: key, options: normalized }));
+    case "SEARCH":
       const context = {
         __MAIN_FORM: form,
         __DATA_UNIT: dataUnit.name,
@@ -55,38 +55,38 @@ export const Field = ({ dataUnit, field, forceScroll, enabled }) => {
         }
       });
       if (criteriaList.length > 0) {
-        context['CRITERIA'] = criteriaList;
+        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);
             }
           }, ref: elem => scrollToView(forceScroll, elem), key: key }));
-    case 'FILE':
-      const target = getProp(properties, 'URL');
-      const strHeaders = getProp(properties, 'HEADERS');
+    case "FILE":
+      const target = getProp(properties, "URL");
+      const strHeaders = getProp(properties, "HEADERS");
       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 })));
-    case 'DATE':
+        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 }));
-    case 'DECIMALNUMBER':
-    case 'INTEGERNUMBER':
+        h("ez-date-input", { value: !value ? null : DateUtils.clearTime(value), label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target["value"]), errorMessage: errorMessage, ref: elem => scrollToView(forceScroll, elem), key: key }));
+    case "DECIMALNUMBER":
+    case "INTEGERNUMBER":
       let precision = 0;
       let prettyPrecision = 0;
-      if (userInterface === 'DECIMALNUMBER') {
+      if (userInterface === "DECIMALNUMBER") {
         precision = Number(getProp(properties, "precision") || 2);
         prettyPrecision = Number(getProp(properties, "prettyprecision") || precision);
       }
       return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
-        h("ez-numeric-input", { value: !value ? null : value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']), errorMessage: errorMessage, precision: precision, prettyprecision: prettyPrecision, ref: elem => scrollToView(forceScroll, elem), key: key }));
+        h("ez-numeric-input", { value: !value ? null : value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target["value"]), errorMessage: errorMessage, precision: precision, prettyprecision: prettyPrecision, ref: elem => scrollToView(forceScroll, elem), key: key }));
     //IMAGE, DATETIME, ELAPSEDTIME, PASSWORD, MASKEDTEXT, HTML
     default:
       return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
-        h("ez-text-input", { value: value, label: formattedLabel, enabled: isEnabled, loading: loadingData, onInput: (event) => changeFieldHandler(event.target['value']), errorMessage: errorMessage, ref: elem => scrollToView(forceScroll, elem), key: key }));
+        h("ez-text-input", { value: value, label: formattedLabel, enabled: isEnabled, loading: loadingData, onInput: (event) => changeFieldHandler(event.target["value"]), errorMessage: errorMessage, ref: elem => scrollToView(forceScroll, elem), key: key }));
   }
 };
 function getProp(properties, name) {

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

@@ -23,13 +23,13 @@ export const NavigationBar = ({ dataUnit: du, buttonProps, enabled }) => {
     || buttonProps.cancelVisible
     || buttonProps.reloadVisible) {
     return h("div", { class: "col col--sd-12 align--right" },
-      buttonProps.previousVisible ? h("ez-button", { key: du.name + '_previous', title: "Registro anterior", mode: "icon", enabled: enabled && du.hasPrevious(), onClick: () => du.previous(), image: "/themes/default/images/icons/actions-sprite.svg#previous-circle-inverted", class: "button--secondary margin-right--medium" }) : null,
-      buttonProps.nextVisible ? h("ez-button", { key: du.name + '_next', title: "Pr\u00F3ximo registro", mode: "icon", enabled: enabled && du.hasNext(), onClick: () => du.next(), image: "/themes/default/images/icons/actions-sprite.svg#next-circle-inverted", class: "button--secondary margin-right--medium" }) : null,
-      buttonProps.removeVisible ? h("ez-button", { key: du.name + '_remove', label: "Remover", enabled: enabled && du.hasCurrentRecord(), onClick: () => removeHandler(du), image: "/themes/default/images/icons/actions-sprite.svg#minus-circle-inverted", class: "button--secondary margin-right--medium" }) : null,
-      buttonProps.addVisible ? h("ez-button", { key: du.name + '_add', label: "Adicionar", enabled: enabled, onClick: () => du.insert(), class: "button--secondary margin-right--medium" }) : null,
-      buttonProps.reloadVisible ? h("ez-button", { key: du.name + '_reload', title: "Recarregar", enabled: enabled, mode: "icon", onClick: () => du.load(), image: "/themes/default/images/icons/actions-sprite.svg#rotate", class: "button--secondary margin-right--medium" }) : null,
-      buttonProps.cancelVisible ? h("ez-button", { key: du.name + '_cancel', label: "Cancelar", enabled: enabled && du.hasChanges(), onClick: () => du.cancel(), class: "button--secondary margin-right--medium" }) : null,
-      buttonProps.saveVisible ? h("ez-button", { key: du.name + '_save', label: "Salvar", enabled: enabled && du.hasChanges(), onClick: () => saveHandler(du), class: "button--primary margin-right--medium" }) : null);
+      buttonProps.previousVisible ? h("ez-button", { key: du.name + "_previous", title: "Registro anterior", mode: "icon", enabled: enabled && du.hasPrevious(), onClick: () => du.previous(), image: "/themes/default/images/icons/actions-sprite.svg#previous-circle-inverted", class: "button--secondary margin-right--medium" }) : null,
+      buttonProps.nextVisible ? h("ez-button", { key: du.name + "_next", title: "Pr\u00F3ximo registro", mode: "icon", enabled: enabled && du.hasNext(), onClick: () => du.next(), image: "/themes/default/images/icons/actions-sprite.svg#next-circle-inverted", class: "button--secondary margin-right--medium" }) : null,
+      buttonProps.removeVisible ? h("ez-button", { key: du.name + "_remove", label: "Remover", enabled: enabled && du.hasCurrentRecord(), onClick: () => removeHandler(du), image: "/themes/default/images/icons/actions-sprite.svg#minus-circle-inverted", class: "button--secondary margin-right--medium" }) : null,
+      buttonProps.addVisible ? h("ez-button", { key: du.name + "_add", label: "Adicionar", enabled: enabled, onClick: () => du.insert(), class: "button--secondary margin-right--medium" }) : null,
+      buttonProps.reloadVisible ? h("ez-button", { key: du.name + "_reload", title: "Recarregar", enabled: enabled, mode: "icon", onClick: () => du.load(), image: "/themes/default/images/icons/actions-sprite.svg#rotate", class: "button--secondary margin-right--medium" }) : null,
+      buttonProps.cancelVisible ? h("ez-button", { key: du.name + "_cancel", label: "Cancelar", enabled: enabled && du.hasChanges(), onClick: () => du.cancel(), class: "button--secondary margin-right--medium" }) : null,
+      buttonProps.saveVisible ? h("ez-button", { key: du.name + "_save", label: "Salvar", enabled: enabled && du.hasChanges(), onClick: () => saveHandler(du), class: "button--primary margin-right--medium" }) : null);
   }
   else {
     return null;

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";
       }
     }
   }

package/dist/collection/components/ez-numeric-input/ez-numeric-input.css

@@ -2,12 +2,12 @@
   display: block;
   width: 100%;
   /*@doc Define a cor de fundo do input.*/
-  --it__input--background-color: var(--background--medium, #e0e0e0);
+  --ez-text-input__input--background-color: var(--background--medium, #e0e0e0);
   /*@doc Define a cor da borda do input.*/
-  --it__input--border-color: var(--it__input--background-color);
+  --ez-text-input__input--border-color: var(--ez-text-input__input--background-color);
 }
 
 .text-input {
-  --it__input--background-color: inherit;
-  --it__input--border-color: inherit;
+  --ez-text-input__input--background-color: inherit;
+  --ez-text-input__input--border-color: inherit;
 }

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

@@ -1,4 +1,4 @@
-import { Component, Event, h, Prop, Watch } from '@stencil/core';
+import { Component, Event, h, Prop, Watch } from "@stencil/core";
 export class EzSearch {
   constructor() {
     /**
@@ -8,11 +8,11 @@ export class EzSearch {
     /**
    * Ajusta a opção de mostrar o "value" ao selecionar uma opção.
    */
-    this.showselectedvalue = true;
+    this.showSelectedValue = true;
     /**
      * Ajusta a opção de mostrar o "value" para cada opção.
      */
-    this.showoptionvalue = true;
+    this.showOptionValue = true;
   }
   updateValue() {
     if (this._comboElement) {
@@ -25,7 +25,7 @@ export class EzSearch {
     this.ezChange.emit(evt.detail);
   }
   render() {
-    return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionLoader: this.optionloader, searchMode: true, onEzChange: evt => this.onComboChange(evt), showSelectedValue: this.showselectedvalue, showOptionValue: this.showoptionvalue }));
+    return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionLoader: this.optionLoader, searchMode: true, onEzChange: evt => this.onComboChange(evt), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue }));
   }
   ;
   static get is() { return "ez-search"; }
@@ -111,7 +111,7 @@ export class EzSearch {
       "attribute": "error-message",
       "reflect": true
     },
-    "optionloader": {
+    "optionLoader": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
@@ -130,7 +130,7 @@ export class EzSearch {
         "text": "Fun\u00E7\u00E3o respons\u00E1vel por carregar as op\u00E7\u00F5es dinamicamente"
       }
     },
-    "showselectedvalue": {
+    "showSelectedValue": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -144,11 +144,11 @@ export class EzSearch {
         "tags": [],
         "text": "Ajusta a op\u00E7\u00E3o de mostrar o \"value\" ao selecionar uma op\u00E7\u00E3o."
       },
-      "attribute": "showselectedvalue",
+      "attribute": "show-selected-value",
       "reflect": false,
       "defaultValue": "true"
     },
-    "showoptionvalue": {
+    "showOptionValue": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -162,7 +162,7 @@ export class EzSearch {
         "tags": [],
         "text": "Ajusta a op\u00E7\u00E3o de mostrar o \"value\" para cada op\u00E7\u00E3o."
       },
-      "attribute": "showoptionvalue",
+      "attribute": "show-option-value",
       "reflect": false,
       "defaultValue": "true"
     }